:root {
  color-scheme: light;

  /* 基本配色 */
  --html-archive-background: #f4f6f8;
  --html-archive-surface: #ffffff;
  --html-archive-surface-soft: #f6f8fa;
  --html-archive-border: #d0d7de;
  --html-archive-text: #1f2328;
  --html-archive-muted: #57606a;
  --html-archive-accent: #0969da;
  --html-archive-accent-hover: #0757b5;
  --html-archive-danger: #cf222e;
  --html-archive-success: #1a7f37;
  --html-archive-warning: #9a6700;
  --html-archive-on-accent: #ffffff;

  /* 状態・プレビュー配色 */
  --html-archive-info-border: #b6e3ff;
  --html-archive-info-text: #0550ae;
  --html-archive-info-background: #ddf4ff;
  --html-archive-success-background: #dafbe1;
  --html-archive-warning-background: #fff8c5;
  --html-archive-danger-background: #ffebe9;
  --html-archive-preview-grid-color: #eef1f4;
  --html-archive-preview-background: #ffffff;

  /* 装飾 */
  --html-archive-focus-ring: rgba(9, 105, 218, 0.24);
  --html-archive-panel-shadow: 0 1px 2px rgba(31, 35, 40, 0.06);

  /* 寸法・余白 */
  --html-archive-control-height: 38px;
  --html-archive-control-radius: 7px;
  --html-archive-panel-radius: 10px;
  --html-archive-panel-gap: 16px;
  --html-archive-panel-padding: 16px;
  --html-archive-panel-padding-compact: 14px;
  --html-archive-flex-gap: 10px;
  --html-archive-source-gap: 16px;
  --html-archive-page-max-width: 1240px;
  --html-archive-page-gutter: 32px;
  --html-archive-page-gutter-compact: 20px;
  --html-archive-page-padding-start: 32px;
  --html-archive-page-padding-end: 24px;
  --html-archive-page-padding-start-compact: 22px;
  --html-archive-source-height: 360px;
  --html-archive-preview-height: 620px;
  --html-archive-preview-height-compact: 500px;
  --html-archive-preview-mobile-width: 390px;
  --html-archive-preview-mobile-padding: 16px;
  --html-archive-preview-grid-size: 18px;
  --html-archive-preview-grid-offset: 9px;
  --html-archive-preview-grid-offset-negative: -9px;
  --html-archive-preview-radius: 8px;
  --html-archive-message-radius: 6px;
}

/* ページ基盤 */
* {
  box-sizing: border-box;
}

body.html-archive-page {
  margin: 0;
  min-block-size: 100vh;
  color: var(--html-archive-text);
  background: var(--html-archive-background);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.html-archive-main {
  inline-size:
    min(
      var(--html-archive-page-max-width),
      calc(100% - var(--html-archive-page-gutter))
    );
  margin-inline: auto;
  padding-block:
    var(--html-archive-page-padding-start)
    var(--html-archive-page-padding-end);
}

/* ページ見出し・パンくず */
.html-archive-page-header {
  margin-block-end: var(--html-archive-panel-gap);
}

.html-archive-page-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.html-archive-page-header .breadcrumb a {
  color: var(--html-archive-accent);
  font-weight: 700;
  text-decoration: none;
}

.html-archive-page-header .breadcrumb a:hover,
.html-archive-page-header .breadcrumb a:focus-visible {
  text-decoration: underline;
}

.html-archive-page-header h1 {
  margin-block: 8px 0;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.html-archive-page-header p {
  margin-block: 8px 0;
  color: var(--html-archive-muted);
  line-height: 1.7;
}

/* 通知・パネル */
.html-archive-notice,
.html-archive-panel {
  border: 1px solid var(--html-archive-border);
  border-radius: var(--html-archive-panel-radius);
  background: var(--html-archive-surface);
  box-shadow: var(--html-archive-panel-shadow);
}

.html-archive-notice {
  margin-block-end: var(--html-archive-panel-gap);
  padding: 12px 14px;
  border-color: var(--html-archive-info-border);
  color: var(--html-archive-info-text);
  background: var(--html-archive-info-background);
  line-height: 1.65;
}

.html-archive-panel {
  margin-block-end: var(--html-archive-panel-gap);
  padding: var(--html-archive-panel-padding);
}

.html-archive-panel-heading,
.html-archive-actions,
.html-archive-inline-control {
  display: flex;
  align-items: center;
  gap: var(--html-archive-flex-gap);
}

.html-archive-panel-heading {
  justify-content: space-between;
  margin-block-end: 14px;
}

.html-archive-panel-title {
  margin: 0;
  font-size: 1.08rem;
}

.html-archive-panel-description {
  margin-block: 5px 0;
  color: var(--html-archive-muted);
  line-height: 1.6;
}

/* 入力レイアウト */
.html-archive-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: var(--html-archive-source-gap);
}

.html-archive-source-options,
.html-archive-field {
  display: grid;
}

.html-archive-source-options {
  align-content: start;
  gap: 12px;
}

.html-archive-field {
  gap: 6px;
  min-inline-size: 0;
  color: var(--html-archive-muted);
  font-weight: 700;
}

.html-archive-field--source {
  align-content: start;
}

/* 入力部品・ボタン */
.html-archive-control,
.html-archive-page button {
  border: 1px solid var(--html-archive-border);
  border-radius: var(--html-archive-control-radius);
  color: var(--html-archive-text);
  background: var(--html-archive-surface);
  font: inherit;
}

.html-archive-page button {
  min-block-size: var(--html-archive-control-height);
  padding: 7px 13px;
  background: var(--html-archive-surface-soft);
  font-weight: 700;
  cursor: pointer;
}

input.html-archive-control {
  min-block-size: var(--html-archive-control-height);
  padding: 7px 10px;
}

.html-archive-control[type="file"] {
  padding: 5px 7px;
}

.html-archive-control[type="file"]::file-selector-button {
  min-block-size: 28px;
  margin-inline-end: 8px;
  padding-inline: 10px;
  border: 1px solid var(--html-archive-border);
  border-radius: 5px;
  color: var(--html-archive-text);
  background: var(--html-archive-surface-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.html-archive-code-input {
  inline-size: 100%;
  block-size: var(--html-archive-source-height);
  min-block-size: 260px;
  padding: 12px;
  font: 13px/1.55 "Cascadia Code", Consolas, monospace;
  resize: vertical;
}

.html-archive-page button:hover:not(:disabled) {
  border-color: var(--html-archive-accent);
  color: var(--html-archive-accent);
}

.html-archive-page .html-archive-button--primary {
  border-color: var(--html-archive-accent);
  color: var(--html-archive-on-accent);
  background: var(--html-archive-accent);
}

.html-archive-page .html-archive-button--primary:hover:not(:disabled) {
  border-color: var(--html-archive-accent-hover);
  color: var(--html-archive-on-accent);
  background: var(--html-archive-accent-hover);
}

.html-archive-page :is(button, input, textarea):focus-visible {
  outline: 3px solid var(--html-archive-focus-ring);
  outline-offset: 2px;
}

.html-archive-page :is(button, input, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.html-archive-inline-control {
  align-items: stretch;
}

.html-archive-inline-control .html-archive-control {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* 補助文・加工設定 */
.html-archive-help,
.html-archive-file-information {
  margin: 0;
  color: var(--html-archive-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.html-archive-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px 14px;
  margin-block: 16px 0;
  padding: 14px;
  border: 1px solid var(--html-archive-border);
  border-radius: var(--html-archive-control-radius);
}

.html-archive-options legend {
  padding-inline: 5px;
  font-weight: 700;
}

.html-archive-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 28px;
}

.html-archive-options input[type="checkbox"] {
  inline-size: 17px;
  block-size: 17px;
  margin: 0;
  accent-color: var(--html-archive-accent);
}

/* 操作・状態表示 */
.html-archive-actions {
  flex-wrap: wrap;
}

.html-archive-actions--end {
  justify-content: flex-end;
}

.html-archive-message {
  --html-archive-message-color: var(--html-archive-muted);
  --html-archive-message-background: var(--html-archive-surface-soft);
  min-block-size: 24px;
  margin-block: 12px 0;
  padding: 9px 11px;
  border-radius: var(--html-archive-message-radius);
  color: var(--html-archive-message-color);
  background: var(--html-archive-message-background);
  line-height: 1.55;
}

.html-archive-message[data-type="success"] {
  --html-archive-message-color: var(--html-archive-success);
  --html-archive-message-background: var(--html-archive-success-background);
}

.html-archive-message[data-type="warning"] {
  --html-archive-message-color: var(--html-archive-warning);
  --html-archive-message-background: var(--html-archive-warning-background);
}

.html-archive-message[data-type="error"] {
  --html-archive-message-color: var(--html-archive-danger);
  --html-archive-message-background: var(--html-archive-danger-background);
}

.html-archive-message[data-type="loading"] {
  --html-archive-message-color: var(--html-archive-info-text);
  --html-archive-message-background: var(--html-archive-info-background);
}

/* プレビュー */
.html-archive-preview-heading {
  align-items: flex-start;
}

.html-archive-preview-stage {
  display: grid;
  min-block-size: var(--html-archive-preview-height);
  place-items: stretch center;
  overflow: auto;
  border: 1px solid var(--html-archive-border);
  border-radius: var(--html-archive-preview-radius);
  background:
    linear-gradient(
      45deg,
      var(--html-archive-preview-grid-color) 25%,
      transparent 25%
    )
      0 0 /
      var(--html-archive-preview-grid-size)
      var(--html-archive-preview-grid-size),
    linear-gradient(
      45deg,
      transparent 75%,
      var(--html-archive-preview-grid-color) 75%
    )
      0 0 /
      var(--html-archive-preview-grid-size)
      var(--html-archive-preview-grid-size),
    linear-gradient(
      45deg,
      transparent 75%,
      var(--html-archive-preview-grid-color) 75%
    )
      var(--html-archive-preview-grid-offset)
      var(--html-archive-preview-grid-offset-negative) /
      var(--html-archive-preview-grid-size)
      var(--html-archive-preview-grid-size),
    linear-gradient(
      45deg,
      var(--html-archive-preview-grid-color) 25%,
      var(--html-archive-preview-background) 25%
    )
      var(--html-archive-preview-grid-offset)
      var(--html-archive-preview-grid-offset-negative) /
      var(--html-archive-preview-grid-size)
      var(--html-archive-preview-grid-size);
}

.html-archive-preview-stage[data-width="mobile"] {
  padding-inline: var(--html-archive-preview-mobile-padding);
}

.html-archive-preview-frame {
  inline-size: 100%;
  block-size: var(--html-archive-preview-height);
  border: 0;
  background: var(--html-archive-preview-background);
}

.html-archive-preview-stage[data-width="mobile"] .html-archive-preview-frame {
  inline-size: min(var(--html-archive-preview-mobile-width), 100%);
  box-shadow: 0 0 0 1px var(--html-archive-border);
}

.html-archive-preview-empty {
  align-self: center;
  margin: 0;
  padding: 20px;
  color: var(--html-archive-muted);
  text-align: center;
}

/* 注意事項 */
.html-archive-cautions ul {
  margin-block: 12px 0;
  padding-inline-start: 1.4rem;
  line-height: 1.75;
}

/* レスポンシブ */
@media (max-width: 900px) {
  /* タブレット幅では入力欄と設定欄を縦に並べる。 */
  .html-archive-source-grid {
    grid-template-columns: 1fr;
  }

  .html-archive-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .html-archive-preview-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  /* モバイル幅では余白と操作部品を圧縮し、ボタンを折り返す。 */
  .html-archive-main {
    inline-size:
      min(
        calc(100% - var(--html-archive-page-gutter-compact)),
        var(--html-archive-page-max-width)
      );
    padding-block-start: var(--html-archive-page-padding-start-compact);
  }

  .html-archive-panel {
    padding: var(--html-archive-panel-padding-compact);
  }

  .html-archive-panel-heading,
  .html-archive-inline-control {
    align-items: stretch;
    flex-direction: column;
  }

  .html-archive-options {
    grid-template-columns: 1fr;
  }

  .html-archive-actions {
    align-items: stretch;
  }

  .html-archive-actions button {
    flex: 1 1 auto;
  }

  .html-archive-preview-stage,
  .html-archive-preview-frame {
    min-block-size: var(--html-archive-preview-height-compact);
    block-size: var(--html-archive-preview-height-compact);
  }
}