/* 額装のシミュレーション
   デザイン「案E: あたたかい白＋木の茶ひとしずく」(v0.30.0〜)
   器 = HPの声: 見出しはKlee One・生成りがかった白・直角基調・広い字間。
   道具 = 親しみ: UI文字はHP本文と同じゴシック(Helvetica Neue→ヒラギノ角ゴ)・主ボタンはウォールナット塗り・角丸3px。
   図面(SVG)の文字だけはKlee Oneを保ち、手描き図面の趣を残す。
   差し戻し: git tag `design-a`(=v0.29.0 全面明朝) / `design-before-klee`(=v0.28.0 旧デザイン) */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Klee One(Fontworks/OFL)のサブセット(アプリ使用文字+かな・英数記号のみ)を同梱。
   未収録文字(保存名などの自由入力)はfont-familyのフォールバック(游明朝等)が文字単位で補う */
@font-face {
  font-family: "Klee One";
  font-weight: 400;
  font-display: swap;
  src: url("assets/KleeOne-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Klee One";
  font-weight: 600;
  font-display: swap;
  src: url("assets/KleeOne-SemiBold.woff2") format("woff2");
}

:root {
  --ink: #212529;
  --muted: #8a8a8a;
  --line: #e3e3e3;
  --bg: #fdfcfa;   /* 純白より一段だけ温かい生成りの白 */
  --panel: #ffffff;
  --accent: #6b5138; /* ウォールナットの茶。押す場所(主ボタン・ラジオ)にだけ差す */
  --serif: "Klee One", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
}

body {
  /* HP本文(kumeframe.com/case)と同一のゴシックスタック */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  letter-spacing: 0.02em; /* HP本文のゆったりした字間の気配だけ移す */
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

/* 見出しはKlee One＝HPの声。図面(SVG)の文字も手描き図面の趣としてKlee Oneを保つ */
header h1, header .brand, .controls h2, .card h2, dialog#guide-dialog h2 { font-family: var(--serif); }
.canvas svg text { font-family: var(--serif); }

header {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 26px 36px 20px;
  border-bottom: 1px solid #ececec;
  background: var(--panel);
}
/* PCのみヘッダー固定（2026-08-02 久米要望。モバイルは表示領域優先で固定しない） */
@media (min-width: 981px) {
  header {
    position: sticky;
    top: 0;
    z-index: 40; /* 3Dキャンバス・寸法線より前面。dialogはさらに上のtop layerなので影響なし */
  }
}
header h1 { font-size: 17px; font-weight: 600; letter-spacing: 0.45em; }
header .brand { font-size: 11px; color: var(--muted); letter-spacing: 0.25em; }
/* 公式サイトへの戻り導線（PCヘッダーのみ。モバイルは320px幅でタイトルと重なるため
   非表示にし、フッターと「この仕様で注文」内の既存リンクに任せる。2026-08-02 久米要望） */
.site-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: var(--muted);
  text-decoration: none;
}
.site-link::after { content: "↗"; margin-left: 3px; text-indent: 0; }
.site-link:hover { color: var(--accent); }

.guide-link {
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-indent: 0.15em; /* letter-spacingは末尾にも付くため中央がずれる。同量を先頭に足して光学的に中央へ */
  color: #3a3833;
  text-decoration: none;
  border: 1px solid #999;
  border-radius: 3px;
  background: var(--panel);
}
.guide-link:hover { border-color: var(--accent); color: var(--accent); }

/* --- 使い方モーダル ---
   dialog自身はスクロールさせず、見出し＋閉じるボタンを固定ヘッダーにして .guide-body だけをスクロールする。
   （dialogをスクロール要素にすると、閉じてもscrollTopが残り再表示時に途中から出る・
     モバイルでbackdropタップ判定と干渉してスクロール不能になることがある） */
dialog#guide-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  margin: auto; /* 先頭の全称リセット(*{margin:0})がdialogのUA標準の中央寄せを打ち消すため明示する */
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--panel);
}
/* flex化は開いている時だけ。素のセレクタでdisplay:flexを指定すると、
   閉じている時のUA標準 display:none を打ち消して出しっぱなしになる */
dialog#guide-dialog[open] { display: flex; flex-direction: column; }
dialog#guide-dialog::backdrop { background: rgba(0, 0, 0, .32); }
.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
dialog#guide-dialog h2 { font-size: 16px; font-weight: 600; }
.guide-close {
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
}

/* 樹種の実物写真（サムネイル＋拡大ダイアログ） */
.species-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wood-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.wood-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
dialog#wood-dialog {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--panel);
}
dialog#wood-dialog::backdrop { background: rgba(0, 0, 0, .32); }
dialog#wood-dialog img { width: 100%; display: block; }
.wood-dialog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
}

/* ティースハンガー等の「?」ヘルプ */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.help-panel {
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
}
.help-panel img { max-width: 100%; height: auto; display: block; border-radius: 2px; }
.help-panel p { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.help-panel a { color: var(--accent); }
.guide-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 端まで来たとき背後のページが動かないように */
  padding: 16px 20px 20px;
}
.guide-lead { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.guide-step { margin-bottom: 18px; }
.guide-step h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
/* 画像はwidth属性（撮影時のCSS実寸）で表示し、3コマの拡大率を揃える
   （全て100%表示にすると、切り出し幅の違いがそのまま拡大率の差になり見た目がちぐはぐになる。
     CSSでwidthを指定するとHTMLのwidth属性を上書きしてしまうため、max-widthとheight:autoのみ指定） */
.guide-step img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  margin: 0 auto 8px;
  display: block;
}
.guide-step p { font-size: 13px; line-height: 1.7; }
.guide-step:last-child { margin-bottom: 0; }

main {
  display: grid;
  grid-template-columns: 270px 1fr 290px;
  gap: 28px;
  padding: 28px 36px;
  max-width: 1400px;
  margin: 0 auto;
}

/* --- 左：コントロール ---
   見出しは「大見出し(h2) > 中見出し(h3) > 小ラベル(.sub-label)」の3階層。
   旧実装は見出しが本文(14px)より小さく薄いため階層が視覚的に逆転していた。
   色数を増やさず、サイズ・濃さ・区切り線だけで強弱をつける */
.controls section { margin-bottom: 24px; }
/* 大見出し（1. 作品 / 2. 額縁 / 3. マット）: 本文色＋上に区切り線で「新しいまとまり」を示す */
.controls h2 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.35em;
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}
.controls > section:first-child h2 { padding-top: 0; border-top: none; } /* 先頭は線なし */
/* 中見出し（「2. 額縁」内のデザイン・樹種・サイズ）: h2より一段控えめだが小ラベルよりは強い */
.controls h3 {
  font-size: 13px;
  font-weight: 600;
  color: #6b665e;
  letter-spacing: 0.06em;
  margin: 14px 0 6px;
}
.controls h3:first-child { margin-top: 0; }

/* 「詳しい設定」（箱額スペーサー・ティースハンガー）: 使用頻度が低いため既定で折りたたむ */
.controls .advanced-settings {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0 14px;
  background: var(--panel);
}
.controls .advanced-settings[open] { padding-bottom: 6px; }
.controls .advanced-settings section { margin-bottom: 18px; }
.controls .advanced-settings section:last-of-type { margin-bottom: 0; }
.controls .advanced-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px; /* タップ領域確保 */
  padding: 10px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
}
.controls .advanced-settings summary::-webkit-details-marker { display: none; }
.controls .advanced-settings summary::marker { display: none; content: ""; }
.controls .advanced-settings summary::after {
  content: "▸";
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
}
.controls .advanced-settings[open] summary::after { content: "▾"; }
.radio-row { display: flex; flex-direction: column; gap: 4px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }
.radio-row label, .check { font-size: 14px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.size-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.size-row label { display: flex; flex-direction: column; gap: 2px; }
input[type="number"] {
  width: 90px;
  padding: 6px 8px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
}
input[type="number"]:disabled {
  color: #aaa;
  background: #f5f5f5;
  border-color: #e8e8e8;
}
input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  margin-bottom: 8px;
}
.link-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  padding: 5px 8px;
  font-size: 14px;
  align-self: flex-end;
}
.link-btn.off { opacity: 0.35; }
.canvas.dragover { outline: 2px dashed var(--accent); outline-offset: -8px; }
input[type="file"] { font-size: 12.5px; margin-bottom: 6px; width: 100%; }
#mat-options { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
/* 数値入力のラベルは縦積み。.check（チェックボックス行）は除外して「マットを使用する」と同じ横並び・左揃えにする */
#mat-options > label:not(.check) { font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.notice { background: #fafafa; border: 1px solid #ddd; border-radius: 0; padding: 6px 9px; color: #666; font-size: 11.5px; margin-top: 4px; }
/* 注文フローの要点（コピー→備考欄へ貼り付け）。見落とすと注文が仕様なしで届くため、hintより一段目立たせる */
.copy-note {
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
  background: #f6f1e8;
  border-left: 3px solid var(--accent);
}
.copy-note strong { font-weight: 600; }
/* 小ラベル（作品画像 / 作品サイズ / 窓寸法 など）。3階層のいちばん下なので色は据え置き */
.sub-label { font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.warn { color: #a33d2e; }
.errors {
  background: #fbeeec;
  border: 1px solid #e5b8b1;
  border-radius: 0;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #a33d2e;
}

/* 主ボタンはウォールナット塗り＝「押せるもの」として立たせる。subは白地に茶の気配 */
button {
  /* buttonはUAスタイルシートでfont-familyがbodyから継承されないため明示指定
     （実機Safariで日本語ラベルが表示されない事象が起きたため2026-08-02追加） */
  font-family: inherit;
  padding: 9px 15px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { opacity: 0.85; }
button.sub {
  background: transparent;
  color: var(--accent);
  border: 1px solid #c0b1a0;
}
button.sub:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
.size-presets { margin-bottom: 8px; }
.size-preset { padding: 4px 10px; font-size: 12px; }

/* --- 中央：プレビュー ---
   デスクトップでは左右カラムをスクロールしてもプレビューが見え続けるよう上部に固定する。
   grid itemはデフォルトでstretchするため、align-self:startにしないとstickyが効かない。
   高さは画面の7割を上限にして、縦の狭い画面でも画面を占有しないようにする（≤980pxはモバイル用の指定が上書き） */
.preview {
  min-width: 0;
  position: sticky;
  top: 20px; /* mainのpadding-topと揃える */
  align-self: start;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
/* PCはヘッダーも固定(sticky)のため、その分だけプレビューの固定位置を下げる
   （さもないとタブがヘッダーの裏に隠れる。2026-08-02 久米指摘「スクロールすると
   タブが見えなくなる」の原因はこの重なりだった）。
   --header-h はapp.jsがヘッダーの実測高さを設定する（フォールバック73px）。
   注: この上書きは基底の .preview 定義より後に書くこと（同一詳細度のため順序で決まる） */
@media (min-width: 981px) {
  .preview {
    top: calc(var(--header-h, 73px) + 20px);
    /* -130px の内訳: 上下余白40px ＋ フッター相当90px（折り返し余裕込み）。
       ページ最下部までスクロールするとstickyが親（グリッド行）の下端に当たって
       押し上げられ、タブが固定ヘッダーの裏に隠れるため、フッター分を先に差し引いておく */
    max-height: calc(100vh - var(--header-h, 73px) - 130px);
  }
}
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px 3px 0 0;
}
.tab.active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 400; }
.canvas {
  background: var(--panel);
  border: 1px solid #ececec;
  border-radius: 0;
  padding: 18px;
  /* 子SVGの max-height:100% は「親のheight」を基準にするため、max-heightだけでは効かず
     縦長・正方形の額で寸法線が枠外へはみ出す。高さを確定させて枠内に収める
     （固定表示時に画面からはみ出さないよう70vhを上限に） */
  height: min(640px, 70vh);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas[hidden] { display: none; }
/* SVGはviewBoxを持つのでwidth/heightを100%にすると縦横比を無視して引き伸ばされ、
   寸法線が枠外へはみ出す（object-fitはSVG要素には効かない）。
   幅・高さとも「最大でも枠内」に留め、比率はSVG自身のpreserveAspectRatio（既定=meet）に任せる */
.canvas svg { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; }
.canvas-3d { flex-direction: column; align-items: stretch; gap: 8px; }
/* min-heightを固定値にすると、プレビュー固定時の高さ上限（.canvasのmax-height）を超えてはみ出すため0にする。
   flex:1で親（.canvas-3d）の残り高さいっぱいに広がるので、実際の表示サイズは従来と変わらない */
#view-3d { flex: 1; min-height: 0; border-radius: 0; overflow: hidden; }
#view-3d canvas { display: block; }
.preset-row { display: flex; gap: 6px; }
.preset {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 5px 12px;
  font-size: 12.5px;
}
.preset:hover { color: var(--ink); }

.dim-toggles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.dim-toggle {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.dim-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dim-toggle:disabled {
  opacity: 0.4;
  cursor: default;
}
.dim-toggle:hover:not(:disabled) { opacity: 0.85; }
.dim-toggle.active:hover { opacity: 0.88; }

/* --- 右：情報 --- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.card h2 {
  /* 左列（.controls h2「1. 作品」等）と同じ扱いに統一。以前はmuted色12.5pxで目立ちにくかった（2026-08-01 久米指摘） */
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.35em;
  margin-bottom: 8px;
}
.card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.card th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 0;
  white-space: nowrap;
}
.card td { text-align: right; padding: 4px 0; font-variant-numeric: tabular-nums; }
.card td.unit { color: var(--muted); font-size: 11px; width: 26px; text-align: left; padding-left: 6px; }
.price { font-size: 24px; font-weight: 600; letter-spacing: 0.02em; }
.price .tax { font-size: 12px; color: var(--muted); font-weight: 400; }
#spec-text {
  font-family: inherit;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--bg);
  border-radius: 0;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 10px;
  max-height: 150px;
  overflow-y: auto;
}
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* 注文への出口リンク（v0.36.0） */
.order-links { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 10px; }
.order-link-main {
  display: block;
  text-align: center;
  padding: 10px 15px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.order-link-main:hover { opacity: 0.85; }
.order-link-sub { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }

#btn-save { margin-bottom: 4px; }
.save-list { list-style: none; margin: 8px 0 4px; display: flex; flex-direction: column; }
.save-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.save-list li:last-child { border-bottom: none; }
.save-list li.active { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); padding-left: 6px; }
.save-list .save-empty { color: var(--muted); font-size: 12.5px; padding: 8px 0; border-bottom: none; }
.save-thumb {
  width: 40px;
  height: 40px;
  border-radius: 0;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--line);
}
.save-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.save-name {
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.save-name:hover { text-decoration: underline dotted; }
.save-spec {
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-name-input {
  width: 100%;
  font-size: 16px; /* iOSズーム防止 */
  padding: 2px 4px;
}
.save-btn { padding: 4px 8px; font-size: 11px; flex-shrink: 0; }

footer {
  text-align: center;
  padding: 18px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.footer-links { margin-top: 6px; }
.footer-links a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0 10px;
}

/* --- レスポンシブ --- */
@media (max-width: 980px) {
  /* タイトル「額装のシミュレーション」が途中で折り返さないようヘッダーを縦積みにする */
  header { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px 10px; }
  /* 広い字間(0.45em)のままだと320px幅で「使い方」ボタンと重なるため、モバイルは字間を絞る */
  header h1 { font-size: 15px; letter-spacing: 0.22em; white-space: nowrap; }
  header .brand { letter-spacing: 0.18em; }
  /* 縦積みレイアウトではmargin-left:autoが効かないため右上に絶対配置する */
  .guide-link { position: absolute; top: 14px; right: 16px; margin-left: 0; padding: 10px 14px; }
  .site-link { display: none; }
  main { grid-template-columns: 1fr; padding: 14px 14px; gap: 14px; }
  /* プレビューを画面上部に固定し、下の入力欄だけスクロールできるようにする（3Dタブも同じ固定枠に収める） */
  .preview { order: -1; position: sticky; top: 0; z-index: 20; background: var(--bg); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .canvas { height: 35vh; min-height: 0; padding: 8px; }
  /* デスクトップと同じ理由で幅・高さは上限指定のみ（100%指定は縦横比を崩して寸法線がはみ出す） */
  .canvas svg { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .canvas-3d { height: 35vh; }
  #view-3d { min-height: 0; }
  .canvas-3d .hint { display: none; }
  .dim-toggles { margin-top: 4px; }
  input[type="number"], input[type="text"] { font-size: 16px; } /* iOS Safariのフォーカス時自動ズーム防止（16px未満だとズームされる） */
}