/* rackbuilder — 画面のスタイル
   reference/rack-simulator.jsx の CSS 文字列を移植したもの。
   変更点: Google Fonts（Oswald）の読み込みは外し、数字は端末のフォントで表示する。
   追加点: 横幅 900px 以上では 3D と操作パネルを左右に並べる。
   親サイトへの導線として、一番上に細いヘッダー（.rk-head）、操作パネルの最後にフッター（.rk-site-foot）を置く。 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #DDE1E4; }
button { font: inherit; cursor: pointer; }

.rk-root{
  --bg:#DDE1E4; --panel:#FFFFFF; --ink:#0E141A; --ink2:#66727E;
  --line:#C7CED4; --accent:#1D3FCC; --warnbg:#FBF0DC; --warnink:#8A4B00;
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.rk-num{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; letter-spacing:.02em; font-variant-numeric:tabular-nums; }

/* 親サイト（すき間ツールドットコム）への導線。25MINUTE と同じく、ページに直接書いたヘッダーとフッターで、共通のファイルは読み込まない。
   ヘッダー（.rk-head）は index.html と compare.html の一番上に置く 1 行の細い帯で、左に小さな薄い文字でサイト名（トップページ / へのリンク）、
   その右にツール名を置く。3D の外（上）に置くため、全体表示の計算（js/scene.js）が使う 3D の範囲には入らない。
   --rk-head-h はヘッダーの高さ（下の線を含む）。スマホでは操作パネルの最大の高さから同じだけ引き、ヘッダーを足す前と 3D の高さを変えない */
:root{ --rk-head-h:30px; }
.rk-head{ position:relative; z-index:3; flex:0 0 auto; display:flex; align-items:stretch; gap:10px; min-width:0;
  height:calc(var(--rk-head-h) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background:#fff; border-bottom:1px solid #C7CED4; white-space:nowrap; }
/* 文字の行の高さを帯の高さ（下の線を除く）にそろえ、押せる範囲を帯の高さいっぱいにする */
.rk-parent, .rk-brand{ display:block; line-height:calc(var(--rk-head-h) - 1px); }
.rk-parent{ flex:0 0 auto; font-size:10.5px; letter-spacing:.02em; color:#66727E; text-decoration:none; }
.rk-parent:hover{ color:#0E141A; text-decoration:underline; }
/* ツール名は、幅が足りない画面では末尾を「…」にして 1 行に収める */
.rk-brand{ flex:0 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis;
  font-size:12px; font-weight:600; letter-spacing:.04em; color:#0E141A; text-decoration:none; }
a.rk-brand:hover{ text-decoration:underline; }

/* 親サイトへの導線（フッター）。25MINUTE のフッターと同じ文面の形で、中央に小さく出す。
   index.html では操作パネルの最後（組む・買うタブの中身の一番下）、compare.html ではページの最後に置く */
.rk-site-foot{ padding:12px 16px 18px; border-top:1px solid #C7CED4; text-align:center;
  font-size:11px; line-height:1.8; color:#8B959E; }
.rk-site-foot p{ margin:0; }
.rk-site-foot a{ color:#5A6672; }
/* ツール名は途中で折り返さず、入り切らないときは名前ごと次の行へ送る */
.rk-site-foot .nw{ white-space:nowrap; }

.rk-stage{
  position:relative; flex:1 1 auto; min-height:0;
  background:radial-gradient(120% 90% at 50% 16%,#FBFCFD 0%,#DCE2E7 58%,#B7C1C8 100%);
  touch-action:none;
}
.rk-stage canvas{ display:block; width:100% !important; height:100% !important; }

/* 3D の上に重ねる表示は、スマホでラックを隠さないよう小さく保つ。
   左上：寸法バッジ（1行）と、その下にシリーズ名（1行）。構成コードは画面に出さない（URL と書き出し画像には入る）。
   この左上の高さぶんは、js/scene.js の全体表示でラックを置かない余白になる。
   --hud-fs は寸法の文字の大きさで、画面の幅に合わせて変える。幅 375px 以下は 10px、幅 1440px 以上は 18px、その間は幅に比例させる。
   シリーズ名の文字・バッジの内側の余白・バッジとシリーズ名の間隔は、--hud-fs に掛け算して同じ比率で大きくする
   （幅 375px では 9.5px・3px 6px・3px のまま） */
.rk-hud{ --hud-fs:clamp(10px, calc(10px + (100vw - 375px) * 8 / 1065), 18px);
  position:absolute; left:0; top:0; padding:10px 12px 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--hud-fs) * .3); pointer-events:none; }
.rk-tag{ background:rgba(14,20,26,.6); color:#fff; border-radius:1px;
  padding:calc(var(--hud-fs) * .3) calc(var(--hud-fs) * .6);
  font-size:var(--hud-fs); line-height:1.25; white-space:nowrap; }
.rk-series{ font-size:calc(var(--hud-fs) * .95); line-height:1.25; color:#4E5A66; white-space:nowrap;
  text-shadow:0 0 3px rgba(255,255,255,.9); }

/* 操作の案内。js/app.js が、開いて 4 秒後か最初に 3D に触れたときに .off を付けて消す */
.rk-hint{ position:absolute; bottom:10px; left:0; right:0; text-align:center;
  font-size:10.5px; letter-spacing:.1em; color:#78838E; pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s; }
.rk-hint.off{ opacity:0; visibility:hidden; }

/* 画像を作るのに時間がかかっているときの表示。カメラのボタンを押してから 0.2 秒たっても画像ができていないときだけ、
   js/app.js が「画像を作っています」を入れ、書き出し画面が開いたら空にする。空のときは出さない */
.rk-busy{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  background:rgba(14,20,26,.78); color:#fff; border-radius:2px; padding:6px 12px;
  font-size:12px; line-height:1.4; white-space:nowrap; pointer-events:none; }
.rk-busy:empty{ display:none; }

/* 右下に縦に並べる丸いボタン（カメラのアイコンと「全体」の文字）。見た目は直径 40px、押せる範囲はボタン自体の 44px 四方 */
.rk-acts{ position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:4px; }
.rk-fab{ width:44px; height:44px; padding:0; border:0; background:none;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.rk-fab .ic{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(20,30,40,.18); }
.rk-fab svg{ display:block; }
.rk-fab:focus-visible{ outline:none; }
.rk-fab:focus-visible .ic{ outline:2px solid var(--accent); outline-offset:2px; }
.rk-cap .ic{ background:var(--ink); color:#fff; }
/* 全体を表示は、四隅の矢印だと全画面表示と取り違えやすいため、丸の中に「全体」と文字で書く */
.rk-reset .ic{ background:rgba(255,255,255,.94); border:1px solid var(--line); color:var(--ink);
  font-size:12px; font-weight:600; line-height:1; letter-spacing:.02em; }
.rk-stage-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; font-size:13px; line-height:1.7; color:var(--ink2); }

/* 最大の高さは、参考実装の 58vh からヘッダーの高さを引いたもの（スマホでヘッダーを足しても 3D の高さを変えない） */
.rk-tray{ flex:0 0 auto; background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(20,30,40,.08); max-height:calc(58vh - var(--rk-head-h)); overflow-y:auto;
  -webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom); }
.rk-tabs{ display:flex; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2; }
.rk-tab{ flex:1; padding:13px 4px; font-size:12.5px; background:none; border:0;
  color:var(--ink2); position:relative; }
.rk-tab.on{ color:var(--ink); font-weight:600; }
.rk-tab.on:after{ content:""; position:absolute; left:14%; right:14%; bottom:-1px;
  height:2px; background:var(--accent); }
.rk-tab .badge{ display:inline-block; min-width:16px; margin-left:5px; padding:1px 3px;
  font-size:10px; border-radius:9px; background:var(--accent); color:#fff; }

.rk-body{ padding:14px 16px 20px; }
.rk-row{ margin-bottom:16px; }
.rk-lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; gap:8px; }
.rk-lab b{ font-size:11.5px; font-weight:600; letter-spacing:.06em; }
.rk-lab span{ font-size:11px; color:var(--ink2); text-align:right; }

.rk-pills{ display:flex; gap:6px; overflow-x:auto; padding-bottom:3px; -webkit-overflow-scrolling:touch; }
.rk-pill{ flex:0 0 auto; min-width:54px; padding:9px 11px; border:1px solid var(--line);
  background:#fff; border-radius:2px; color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; font-variant-numeric:tabular-nums; }
.rk-pill .u{ font-size:10px; opacity:.6; }
.rk-pill.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.rk-pill:disabled{ opacity:.35; cursor:not-allowed; }
.rk-pill.wide{ font-family:inherit; font-size:12.5px; min-width:88px; text-align:left; }
.rk-pill small{ display:block; font-family:inherit; font-size:9.5px; opacity:.6; margin-top:2px; }
.rk-slider{ width:100%; accent-color:var(--accent); }

/* ブランド抽象化（Phase 2）で足したもの：色見本・ステッパー・標準サイズ／オーダー品の表示 */
.rk-pill.color{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rk-pill.color small{ flex-basis:100%; margin-top:0; }
.rk-sw{ display:inline-block; width:16px; height:16px; border-radius:2px; border:1px solid rgba(14,20,26,.25); flex:0 0 auto; }
.rk-pill.on .rk-sw{ border-color:rgba(255,255,255,.6); }
.rk-step{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:2px; background:#fff; margin-bottom:8px; }
.rk-step-btn{ flex:0 0 52px; border:0; background:#F3F5F7; color:var(--ink); font-size:20px; line-height:1; }
.rk-step-btn:first-child{ border-right:1px solid var(--line); }
.rk-step-btn:last-child{ border-left:1px solid var(--line); }
.rk-step-btn:disabled{ opacity:.3; cursor:not-allowed; }
.rk-step-val{ flex:1 1 auto; display:flex; align-items:baseline; justify-content:center; gap:4px; padding:10px 8px; }
.rk-step-val b{ font-size:22px; font-weight:500; }
.rk-step-val .u{ font-size:11px; color:var(--ink2); }
.rk-step-val small{ font-size:10.5px; color:var(--ink2); margin-left:6px; }
.rk-sub{ font-size:10.5px; color:var(--ink2); margin:2px 0 5px; letter-spacing:.06em; }
.rk-status{ margin:-6px 0 16px; padding:9px 12px; font-size:12px; background:#EEF3FF; border-left:3px solid var(--accent); color:#1F2D6B; }
.rk-status.order{ background:var(--warnbg); border-left-color:#C98A2E; color:var(--warnink); }
.rk-status a{ color:inherit; }
.rk-mn.order{ background:var(--warnbg); color:var(--warnink); font-family:inherit; }

.rk-warn{ display:flex; gap:9px; background:var(--warnbg); border-left:3px solid #C98A2E;
  padding:11px 12px; margin-bottom:10px; }
.rk-warn .ic{ font-size:13px; color:var(--warnink); font-weight:600; }
.rk-warn p{ margin:0; font-size:12px; line-height:1.6; color:var(--warnink); }

.rk-item{ display:flex; gap:11px; align-items:flex-start; padding:13px 0; border-bottom:1px solid #E7EBEE; }
.rk-item.done{ opacity:.42; }
/* チェック：四角と「買った」の文字を 1 つのボタンにしたもの。文字を押しても切り替わる */
.rk-check{ flex:0 0 auto; display:flex; align-items:center; gap:4px; margin-top:1px; padding:0; border:0; background:none; }
.rk-check .t{ font-size:10.5px; color:var(--ink2); }
.rk-box{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:21px; height:21px;
  border:1.5px solid var(--ink2); border-radius:2px; background:#fff; color:#fff; font-size:12px; line-height:1; }
.rk-box.on{ background:var(--accent); border-color:var(--accent); }
/* 買うタブの部品一覧の上に出す説明（チェックはカートの操作ではないこと） */
.rk-guide{ margin:0 0 2px; padding:8px 10px; font-size:11.5px; line-height:1.6;
  background:#EEF3FF; border-left:3px solid var(--accent); color:#1F2D6B; }
/* オーダー品が含まれるときだけ、説明の下に出す注文先の一文（オーダー品の表示と同じ色づかい） */
.rk-guide.order{ margin-top:6px; background:var(--warnbg); border-left-color:#C98A2E; color:var(--warnink); }
.rk-item .nm{ flex:1 1 auto; min-width:0; }
.rk-item .nm b{ display:block; font-size:13.5px; font-weight:600; }
.rk-item .nm i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink2); margin-top:3px; line-height:1.5; }
.rk-item .qt{ flex:0 0 auto; text-align:right; padding-left:4px; }
.rk-item .qt .q{ font-size:16px; }
.rk-item .qt .q em{ font-style:normal; font-size:10px; color:var(--ink2); }
.rk-item .qt .p{ display:block; font-size:12.5px; color:var(--ink2); margin-top:3px; }
.rk-item .qt .p em{ font-style:normal; font-size:9.5px; }
.rk-mn{ display:inline-block; margin-top:5px; padding:2px 6px; font-size:10.5px;
  background:#EEF1F3; color:#6E7A85; border-radius:2px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
.rk-mn.none{ font-family:inherit; }
.rk-link{ margin-top:7px; margin-right:6px; display:inline-block; padding:7px 11px; font-size:11.5px;
  border:1px solid var(--accent); color:var(--accent); border-radius:2px; text-decoration:none; }
.rk-link.primary{ background:var(--accent); color:#fff; }
.rk-sum{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 2px; }
.rk-sum span{ font-size:11.5px; color:var(--ink2); }
.rk-sum b{ font-size:20px; }
.rk-note{ font-size:10.5px; line-height:1.7; color:#8B959E; margin-top:12px; }
.rk-disc{ background:#F3F5F7; border:1px solid #E2E7EA; padding:12px 13px; margin-top:14px; }
.rk-disc b{ display:block; font-size:11px; letter-spacing:.08em; color:#5A6672; margin-bottom:5px; }
.rk-disc p{ margin:0 0 7px; font-size:11.5px; line-height:1.75; color:#4E5A66; }
.rk-disc p:last-child{ margin-bottom:0; }
.rk-foot{ margin-top:16px; font-size:10.5px; color:#8B959E; line-height:1.8; }
.rk-foot a{ color:#5A6672; }

.rk-modal{ position:fixed; inset:0; background:rgba(10,16,22,.9); z-index:50;
  display:flex; flex-direction:column; padding:16px; overflow-y:auto; }
.rk-modal img{ width:100%; max-width:540px; margin:0 auto; height:auto; border-radius:2px; background:#fff; }
.rk-modal p{ color:#DDE3E8; font-size:12px; margin:12px 2px; text-align:center; }
.rk-modal .acts{ display:flex; gap:9px; margin-top:auto; padding-top:12px; max-width:540px; width:100%; margin-left:auto; margin-right:auto; }
.rk-modal .acts a, .rk-modal .acts button{ flex:1; text-align:center; padding:14px 8px;
  font-size:13px; border-radius:2px; text-decoration:none;
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; }
/* 主のボタン（「共有」か、共有できない端末では「ダウンロード」）を白く目立たせる */
.rk-modal .acts .primary{ background:#fff; color:var(--ink); border-color:#fff; font-weight:600; }
/* 共有できる端末で「共有」と並べる「ダウンロード」（.mouse-only）は、マウスで操作する端末（hover: hover かつ pointer: fine）だけに出す。
   タッチ操作の端末では出さない（共有できれば白い「共有」だけ）。
   マウスで操作する端末では、左から「ダウンロード」（白）「共有」「閉じる」の順に並べ、「共有」（.share）は「閉じる」と同じ枠線だけの見た目にする */
.rk-modal .acts .mouse-only{ display:none; }
@media (hover: hover) and (pointer: fine) {
  .rk-modal .acts .mouse-only{ display:block; }
  .rk-modal .acts .share{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); font-weight:inherit; }
}

.rk-loading{ padding:24px 16px; font-size:12.5px; color:var(--ink2); }
.rk-error{ padding:16px; font-size:12.5px; color:#8A2A1A; background:#FBE4DF; }

/* compare.html（ブランドの違い・互換性）。通常のスクロールするページ */
.cmp-body{ color:#0E141A; font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; -webkit-font-smoothing:antialiased; line-height:1.7; }
.cmp-main{ max-width:860px; margin:0 auto; padding:24px 16px 48px; }
.cmp-main h1{ font-size:22px; margin:8px 0 6px; letter-spacing:.02em; }
.cmp-main h2{ font-size:15px; margin:28px 0 8px; letter-spacing:.06em; color:#5A6672; }
.cmp-sub{ font-size:13px; color:#66727E; margin:0 0 18px; }
.cmp-lead{ background:#fff; border:1px solid #C7CED4; border-radius:2px; padding:14px 16px; font-size:14px; margin:0 0 18px; }
.cmp-table{ width:100%; border-collapse:collapse; background:#fff; font-size:13px; }
.cmp-table th, .cmp-table td{ border:1px solid #C7CED4; padding:10px 12px; vertical-align:top; text-align:left; }
.cmp-table thead th{ background:#0E141A; color:#fff; font-weight:600; }
.cmp-table tbody th{ background:#F3F5F7; font-weight:600; width:26%; }
.cmp-table ul{ margin:0; padding-left:1.2em; }
.cmp-note{ font-size:12px; color:#66727E; margin:12px 0; }
.cmp-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.cmp-btn{ display:inline-block; padding:12px 18px; background:#0E141A; color:#fff; text-decoration:none; border-radius:2px; font-size:14px; }
.cmp-src{ font-size:12px; color:#4E5A66; padding-left:1.2em; }
.cmp-src a{ color:#1D3FCC; word-break:break-all; }
.cmp-foot{ margin-top:36px; font-size:12px; color:#66727E; border-top:1px solid #C7CED4; padding-top:14px; }
.cmp-foot a{ color:#1D3FCC; }

@media (min-width: 900px) {
  /* 細いヘッダーを横いっぱいに置き、その下に 3D と操作パネル（幅 420px）を左右に並べる。フッターはスマホと同じく操作パネルの最後 */
  .rk-root{ display:grid; grid-template-columns:minmax(0, 1fr) 420px; grid-template-rows:auto minmax(0, 1fr); }
  .rk-root > .rk-head{ grid-column:1 / -1; }
  .rk-stage{ grid-column:1; grid-row:2; }
  .rk-tray{ grid-column:2; grid-row:2; max-height:none; border-top:0; border-left:1px solid var(--line);
    box-shadow:-8px 0 24px rgba(20,30,40,.08); }
}