/* ===================================================
   CLAY — セット面 コンフィギュレーター (css/setmen.css)
   =================================================== */

/* ── 日本語の折り返し ───────────────────────────────
   対応ブラウザでは文節単位で改行する。「美容室の/セット面を」のように
   意味の切れ目で折り返るので、行頭に助詞だけが残る不格好な改行が消える。
   text-wrap: pretty は最終行に1〜2文字だけ落ちるのを防ぐ。

   【重要】土台は normal にすること。keep-all を土台にすると、
   auto-phrase 非対応のブラウザ（Safari）で日本語が一切折り返せなくなり、
   段組みからはみ出して隣の要素の下に潜り込む。normal は
   日本語の標準の折り返し（禁則つきで文字単位）で、これが正しい退避先。 */
h1, h2, h3, h4, h5,
p, li, dt, dd, figcaption, blockquote,
label, button, summary {
    line-break: strict;
    word-break: normal;
    word-break: auto-phrase;
    overflow-wrap: break-word;
}

p, li, dd, figcaption, blockquote {
    text-wrap: pretty;
}

h1, h2, h3 {
    text-wrap: balance;
}

/* ── Skip Navigation (Accessibility) ── */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: #fff;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.1s;
}

.skip-nav:focus {
    top: 16px;
}

/* ── Text selection (brand color) ── */
::selection {
    background: rgba(176, 138, 78, 0.3);
    color: #fff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black: #151109;
    --obsidian: #151109;
    --dark: #1c170f;
    --card-bg: #1c170f;
    --border: #2a2318;
    --border-light: #362e1f;
    --silver: #8f8474;
    --silver-light: #b6ab98;
    --white: #fff;
    --off-white: #f3e9dc;
    --accent: #b08a4e;
    --beige: #f3e9dc;
    --beige-card: #fdf9f3;
    --beige-border: #ddccb2;
    --beige-ink: #241f19;
    --font-serif: 'Fraunces', 'Shippori Mincho', Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
    --font-sans: 'Inter', 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", Roboto, sans-serif;
    --header-h: 60px;
    --sidebar-w: 440px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    height: 100vh;
    /* iOS Safari のツールバー分だけはみ出すため dvh で上書きする */
    height: 100dvh;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ─── HEADER ─────────────────────────────────────── */
.sm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: rgba(253, 249, 243, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--beige-border);
}

.sm-home-link {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(36, 31, 25, 0.55);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.2s;
}

/* ヘッダーのアイコン類は 24x24〜36x36 しかなく、指のタップ領域として狭い。
   レイアウトを動かさずに当たり判定だけ 44px 相当まで広げる */
.sm-home-link,
.sm-header-share,
.sm-header-cart {
    position: relative;
}

.sm-home-link::after,
.sm-header-share::after,
.sm-header-cart::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
}

.sm-home-link:hover {
    color: var(--beige-ink);
}

.sm-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

.sm-logo-sub {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.04em;
    color: rgba(36, 31, 25, 0.55);
    margin-bottom: 1px;
}

.sm-logo-text {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--beige-ink);
    text-transform: lowercase;
}

.sm-logo-dot {
    color: var(--accent);
}

.sm-mobile-step-status {
    display: none;
}

/* Step nav */
.sm-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.sm-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(36, 31, 25, 0.35);
    transition: color 0.2s;
}

.sm-step.active {
    color: var(--beige-ink);
}

.sm-step.done {
    color: var(--accent);
    cursor: default;
}

.sm-step-num {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

.sm-step-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sm-step-line {
    width: 32px;
    height: 1px;
    background: var(--beige-border);
}

/* Header right group (price + cart) */
.sm-header-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: rgba(36, 31, 25, 0.05);
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(36, 31, 25, 0.1);
    flex-shrink: 0;
}

.sm-header-price-label {
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--silver);
    text-transform: uppercase;
}

.sm-header-price-val {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 300;
    color: var(--beige-ink);
}

/* ── Cart Icon (setmen header) ── */
.sm-header-cart,
.sm-header-cart:visited,
.sm-header-cart:link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--beige-ink) !important;
    text-decoration: none;
    width: 36px;
    height: 36px;
    margin-left: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(36, 31, 25, 0.08);
    border: 1px solid rgba(36, 31, 25, 0.15);
    transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sm-header-cart svg {
    stroke: var(--beige-ink);
}

.sm-header-cart:hover {
    background: rgba(36, 31, 25, 0.15);
    transform: scale(1.08);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #d9bd8a, #b08a4e);
    color: #241f19;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(176, 138, 78, 0.5);
}

/* ── Cart Button (sidebar footer, inside .sm-nav-buttons) ── */
.sm-btn-cart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 16px;
    background: var(--accent-gold, #b08a4e);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.sm-btn-cart:hover {
    background: #8a6a38;
}

.sm-btn-cart:active {
    transform: scale(0.98);
}

.sm-btn-cart:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ─── MAIN LAYOUT ─────────────────────────────────── */
.sm-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
    padding-top: var(--header-h);
}

/* ─── PREVIEW SECTION (3D model-viewer) ─────────────── */
.sm-preview {
    flex: 1;
    /* これが無いと flex 子が中身の幅より縮まず、サイドバーを可変にしても効かない */
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background: #fdfcfb;
}

/* 撮影スタジオのホリゾント（無限背景）をCSSで作る。
 *
 * 以前は 356×290px のほぼ均一な画像（上188 / 中182 / 下190）を
 * 全面に引き伸ばしていた。床と壁の明るさの差が実測で3.5しかなく、
 * 「床」が存在しないため、どれだけ影を足しても製品が地面に立っている
 * ようには見えなかった（画像自体も小さすぎて拡大でボケていた）。
 *
 * 実際の物撮りは、上から光が来るぶん必ず 壁 > 床 の明るさになり、
 * その境目（ホリゾントの曲面）が接地の手がかりになる。
 * グラデーションで作れば拡大ボケもなく、色も自由に調整できる。
 */
/* 撮影スタジオのホリゾント（無限背景）。**床と奥の壁だけ**で作る。
 *
 * 【2026-09-18】実写のサロン内観を敷いていたのをやめた。理由が2つある。
 *
 * 1. 大きさが破綻する。モデルは実寸2.000mだが、写真上では鏡が1195px、
 *    同程度の奥行きにある椅子（実寸約0.95m）が220px。同じ奥行きなら椅子は
 *    約570pxになるはずで、鏡が2.5〜3倍＝約5mの物体として写っていた。
 *    家具が写った背景は「椅子の大きさ」という物差しを画面に持ち込むので、
 *    製品を大きく見せたいコンフィギュレーターとは本質的に両立しない。
 * 2. 側壁と天井の角の線が、カメラを回しても動かない。3D側のカメラ
 *    （画角25°・半径5.24m・俯角15°）と写真のパースは一致しないので、
 *    орbitするほど背景だけ固定されているのが分かってしまう。
 *    これは箱状の emptyroom_white03.png でも同じだった。
 *
 * ホリゾントには側壁も天井も無いので、角の線が最初から存在しない。
 * どの角度に回しても破綻せず、大きさの手がかりも持ち込まない。
 * 色は img/sand-Osaka-scaled.jpeg（鏡の反射に使っている写真）の壁・床から
 * 採って明るく起こしたもの。反射と背景の色調が揃う。
 *
 * 実際の物撮りは上から光が来るぶん必ず 壁 > 床 の明るさになり、その境目
 * （ホリゾントの曲面）が接地の手がかりになる。#sm-floor-shadow が下42%を
 * 床として扱っているので、境目もそこに合わせて 58% 付近に置いている。
 */
.preview-bg-image {
    position: absolute;
    inset: 0;
    background-color: #ded6cb;
    /* 生成: python3 scripts/build-backdrop.py
       サロン写真を強くぼかして奥の壁にし、床はクリーンな階調で繋いだもの。
       ぼかすと角は「線」ではなく階調になるので、カメラを回しても破綻しない。
       家具も読めない色面になるので「椅子の大きさ」という物差しも入らない。 */
    background-image: url('../背景/bg_horizon_salon.jpg');
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 0;
    transition: background 0.6s ease, filter 0.6s ease;
}

/* 両面タイプ用（js/setmen.js が面数に応じて付け外しする）。
   以前は箱状の白い部屋の画像を敷いていたが、側壁と天井の角が
   カメラを回しても動かず破綻していた。上のホリゾントが既に
   「壁を背負っていない」見え方なので、ここでの上書きは不要。
   クラス自体は片面との出し分けのために残してある。 */

/* 片面（壁掛け）は、GLB自体が壁と床を含む「部屋ごと」のモデル。
   その後ろに実写のサロン写真を敷くと部屋が二重になり、カメラを振ると
   GLBの壁が途切れたところから写真が覗いて、パースの合わない硬い矩形の
   継ぎ目になる（実測：±60°で画面の15〜19%、±80°で28〜30%が写真）。
   ここだけ背景をGLBの壁・床に馴染む無地にすると継ぎ目が見えなくなり、
   壁のある側を180°回しても破綻しない。
   GLBの壁の明るさはカメラ角度で振れる（正面 rgb(239,231,221) /
   真横 rgb(175,167,156)）ので、単色では全角度に合わせられない。
   その中間調に置き、中心を明るく・外側をわずかに落とすことで、
   どの角度でも「継ぎ目」ではなく壁の陰影の続きとして読めるようにする。 */
.sm-preview.single-sided .preview-bg-image {
    background-image: none;
    background-color: #d8d1c7;
    background:
        radial-gradient(115% 85% at 50% 38%,
            #e6dfd5 0%,
            #d8d1c7 55%,
            #cdc6bc 100%);
}

#sm-floor-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(38, 30, 22, 0.10) 0%,
        rgba(38, 30, 22, 0.04) 45%,
        transparent 100%);
}

/* 本体が実際に接地している位置に追従する、局所的な接地シャドウ。
   全幅の#sm-floor-shadowだけだと「写真の上に置いただけ」に見えるため、
   足元にだけ濃い影を落として重量感・接地感を出す（hotspot-base-l/rに追従） */
#sm-floor-contact {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30%;
    height: 9%;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    /* 接地点はほぼ光が回り込めないので、中心はしっかり暗くする。
       実測で床との輝度差が1.2%しかなく、影として機能していなかった。
       中心を濃く・周辺を素早く減衰させると「面で接している」感じが出る
       （薄く広いぼかしは、かえって宙に浮いて見える）。 */
    background: radial-gradient(ellipse,
        rgba(24, 19, 14, 0.68) 0%,
        rgba(24, 19, 14, 0.38) 34%,
        rgba(24, 19, 14, 0.12) 60%,
        transparent 76%);
    filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 磨かれた床の照り返し。以前は製品の真下を白く飛ばしていて、
   いちばん暗くあるべき接地点の影を打ち消していた（薄く広い白は
   かえって宙に浮いて見える）。中心を抜いて周囲だけ光らせ、
   接地シャドウと場所を取り合わないようにする。 */
#sm-floor-reflection {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 13%;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 252, 247, 0.26) 58%,
        transparent 82%);
    filter: blur(22px);
    opacity: 0.55;
}

.sm-preview::before,
.sm-preview::after {
    display: none;
}

#sm-floor-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 28%;
    pointer-events: none;
    z-index: 98;
    border-radius: 50%;
    filter: blur(22px);
    opacity: 0;
    transition: opacity 0.6s ease;
    background: radial-gradient(ellipse at top, rgba(255, 200, 80, 0.45), transparent 70%);
}

/* LED光のブルーム（光源そのものがふわっと滲む） */
/* モデル前面(z-index:3)に通常合成で重ねる。screenは高キーな画面では
   見えないため不使用。LEDアーチに寄せたウォームホワイトの芯でにじませる */
#sm-mirror-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    filter: blur(19px);
    opacity: 0;
    transition: opacity 0.6s ease;
    background: transparent;
}

/* LEDグロー追従用の不可視アンカー（hotspotで3Dに張り付き、JSが位置だけ読む） */
.sm-led-anchor {
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    pointer-events: none;
    --min-hotspot-opacity: 0;
}

/* ── ライムストーンタイル床 ─────────────────────────────── */
#sm-marble-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38%;
    pointer-events: none;
    z-index: 97;

    /* 正方形タイル 200x200px + 光沢 + ベース */
    background-image:
        /* 光沢ハイライト（ポリッシュ仕上げの映り込み） */
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse 30% 20% at 35% 55%, rgba(255, 255, 255, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 20% 15% at 65% 40%, rgba(255, 255, 255, 0.25) 0%, transparent 70%),
        /* 目地（縦） */
        repeating-linear-gradient(90deg,
            rgba(160, 155, 145, 0.85) 0px, rgba(160, 155, 145, 0.85) 2px,
            transparent 2px, transparent 200px),
        /* 目地（横） */
        repeating-linear-gradient(180deg,
            rgba(160, 155, 145, 0.85) 0px, rgba(160, 155, 145, 0.85) 2px,
            transparent 2px, transparent 200px),
        /* ベース: 暖かいベージュ系 */
        linear-gradient(180deg, #efe8db 0%, #e5dccf 100%);
    background-size:
        100% 100%, 100% 100%, 100% 100%,
        200px 100%, 100% 200px, 100% 100%;

    /* 手前ほど明るい（マスク緩め＝目地しっかり見せる） */
    -webkit-mask-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.7) 25%,
            rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.7) 25%,
            rgba(0, 0, 0, 1) 100%);
}

/* 照明の床反射（LED光が影の上に映る） */
#sm-floor-reflection {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 18%;
    pointer-events: none;
    z-index: 99;
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.85;
    background: radial-gradient(ellipse, rgba(255, 245, 215, 0.95) 0%, rgba(255, 238, 200, 0.6) 30%, transparent 70%);
}

/* model-viewer fills the flex space */
#sm-model {
    flex: 1;
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 1;
    --poster-color: transparent;
}


/* vignette overlay removed for pure white look */
/* 写真らしさを足すレイヤー（製品の上にも重ねる）。
 *
 * CGに見える原因のうち、モデルやライティングと関係なく効くものが2つある。
 *   1. グラデーションが完全に滑らかで、粒子が一切無い
 *      実写には必ずセンサーノイズがあり、逆に「ノイズが無い画面」は
 *      それだけで合成物に見える。滑らかすぎる階調は実機でバンディングも出る。
 *   2. 画面の四隅まで均一に明るい
 *      実際のレンズは必ず周辺光量が落ちる。
 *
 * 粒子は背景だけでなく製品にも均一に掛ける。実写は画面全体に同じ粒子が
 * 乗るので、背景にだけ乗せると逆に製品が浮いて見える。
 * 外部ファイルを増やさないよう、SVGのfeTurbulenceをインラインで使う。 */
.viewer-vignette {
    position: absolute;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    /* 周辺光量落ち。中心は完全に素通し、四隅だけわずかに沈める */
    background: radial-gradient(125% 95% at 50% 45%,
            rgba(0, 0, 0, 0) 55%,
            rgba(34, 28, 22, 0.05) 82%,
            rgba(34, 28, 22, 0.12) 100%);
}

.viewer-vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* baseFrequency を上げるほど細かい粒になる。0.9 で等倍表示のとき
       ちょうどフィルム粒子くらいの細かさになる */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    /* 強くすると「ざらついた画像」になってしまう。効いているか
       分からないくらいが正解で、消すとのっぺりしたのが分かる程度にする */
    opacity: 0.055;
    mix-blend-mode: overlay;
}

/* ステップ3の間、メインプレビューを丸ごと空間シミュレーションに切り替える */
.sm-chair-preview-wrap {
    position: absolute;
    inset: 0;
    z-index: 5;
    animation: chair-preview-in 0.35s ease;
}

.sm-chair-preview-wrap[hidden] {
    display: none;
}

/* ステップ3中はミラー単体プレビュー側の装飾を隠す（空間モデルに一本化） */
.sm-preview.space-mode #sm-model,
.sm-preview.space-mode #sm-preview-bg,
.sm-preview.space-mode #sm-floor-shadow,
.sm-preview.space-mode #sm-floor-reflection,
.sm-preview.space-mode #sm-mirror-glow,
.sm-preview.space-mode #sm-floor-glow,
.sm-preview.space-mode #sm-floor-ref-left,
.sm-preview.space-mode #sm-floor-ref-right,
.sm-preview.space-mode .viewer-vignette {
    display: none;
}

.sm-chair-preview {
    width: 100%;
    height: 100%;
    background: #fff;
    --poster-color: transparent;
}

.sm-chair-preview-label {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    text-transform: uppercase;
}

@keyframes chair-preview-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 720px) {
    .sm-chair-preview-wrap {
        /* Fill the whole preview area, same as desktop (base rule: inset: 0) —
           previously this was shrunk to a 130x130 corner box, which made the
           step 3 space simulation look broken/tiny on mobile. */
        inset: 0;
    }

    .sm-chair-preview-label {
        left: 16px;
        bottom: 16px;
    }
}

/* ─── Logo hotspot pinned to 3D mirror surface ─────────── */
.sm-logo-hotspot {
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(12px, 1.8vw, 30px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.22em;
    /* color and text-shadow set dynamically by JS (kelvin-matched) */
    /* Hide the default hotspot dot */
    --min-hotspot-opacity: 0;
}

.sm-logo-hotspot .logo-inner {
    display: inline-block;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

/* WebGL fallback (Lockdown Mode etc.) */
.model-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1c170f;
    gap: 16px;
}

.model-fallback[hidden] {
    display: none;
}

.model-fallback img {
    width: min(280px, 60%);
    height: auto;
    opacity: 0.85;
    border-radius: 4px;
}

.model-fallback-notice {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-sans);
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0;
}

/* Loading poster */
.loading-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: radial-gradient(circle at 50% 42%, #211b12 0%, #0d0b08 72%);
    transition: opacity 0.6s ease;
    overflow: hidden;
}

/* ── アーチミラーが立ち上がるローディング ───────────────── */
.lp-stage {
    position: relative;
    width: 92px;
    height: 132px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lp-mirror {
    position: relative;
    width: 68px;
    height: 118px;
    transform-origin: 50% 100%;
    animation: lp-rise 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* 外周のLEDライン。上半分がアーチ、下は直線 */
.lp-arch {
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 34px 34px 4px 4px;
    box-shadow:
        0 0 12px rgba(230, 192, 122, 0.55),
        inset 0 0 10px rgba(230, 192, 122, 0.28);
    animation: lp-glow 2.6s ease-in-out infinite;
}

/* 鏡面。上から下へ光がすっと流れる */
.lp-glass {
    position: absolute;
    inset: 5px;
    border-radius: 30px 30px 2px 2px;
    background: linear-gradient(180deg,
            rgba(255, 250, 238, 0.16) 0%,
            rgba(255, 250, 238, 0.05) 45%,
            rgba(255, 250, 238, 0.12) 100%);
    overflow: hidden;
}

.lp-glass::after {
    content: '';
    position: absolute;
    left: -40%;
    top: -60%;
    width: 180%;
    height: 60%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: rotate(-18deg);
    animation: lp-shine 2.6s ease-in-out infinite;
}

/* 棚板 */
.lp-shelf {
    position: absolute;
    left: -8px;
    right: -8px;
    top: 62%;
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6b5а43, #3a2f22);
    background: linear-gradient(180deg, #6b5a43, #3a2f22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transform-origin: 50% 50%;
    animation: lp-shelf-in 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* 立ち上がりに合わせて弾ける光の粒 */
.lp-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffe9b8;
    box-shadow: 0 0 8px 2px rgba(255, 220, 150, 0.8);
    opacity: 0;
}

.lp-sparkle--1 {
    left: -14px;
    top: 26%;
    animation: lp-spark 2.6s ease-out infinite;
}

.lp-sparkle--2 {
    right: -12px;
    top: 44%;
    animation: lp-spark 2.6s ease-out 0.18s infinite;
}

.lp-sparkle--3 {
    left: 50%;
    top: -12px;
    animation: lp-spark 2.6s ease-out 0.34s infinite;
}

/* 足元の光だまり */
.lp-floor {
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 96px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(230, 192, 122, 0.45) 0%, transparent 70%);
    filter: blur(4px);
    animation: lp-pool 2.6s ease-in-out infinite;
}

.loading-poster-text {
    font-size: 11px;
    color: rgba(255, 240, 215, 0.62);
    letter-spacing: 0.18em;
    font-family: var(--font-sans);
    animation: loading-text-fade 2.6s ease-in-out infinite;
}

/* 進捗バー（体感待ち時間を短くする） */
.lp-bar {
    width: 132px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.lp-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: lp-bar-slide 1.5s ease-in-out infinite;
}

@keyframes lp-rise {
    0% {
        transform: translateY(16px) scaleY(0.82);
        opacity: 0;
    }

    26% {
        transform: translateY(0) scaleY(1.04);
        opacity: 1;
    }

    36% {
        transform: translateY(0) scaleY(0.99);
    }

    82% {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scaleY(1);
        opacity: 0;
    }
}

@keyframes lp-glow {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(230, 192, 122, 0.25), inset 0 0 6px rgba(230, 192, 122, 0.12);
    }

    45% {
        box-shadow: 0 0 18px rgba(230, 192, 122, 0.75), inset 0 0 14px rgba(230, 192, 122, 0.4);
    }
}

@keyframes lp-shine {

    0%,
    30% {
        transform: translateY(0) rotate(-18deg);
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    75%,
    100% {
        transform: translateY(230%) rotate(-18deg);
        opacity: 0;
    }
}

@keyframes lp-shelf-in {

    0%,
    22% {
        transform: scaleX(0);
        opacity: 0;
    }

    40% {
        transform: scaleX(1.06);
        opacity: 1;
    }

    48%,
    86% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

@keyframes lp-spark {

    0%,
    22% {
        transform: scale(0) translate(0, 0);
        opacity: 0;
    }

    34% {
        transform: scale(1.2) translate(-4px, -6px);
        opacity: 1;
    }

    56%,
    100% {
        transform: scale(0) translate(-10px, -16px);
        opacity: 0;
    }
}

@keyframes lp-pool {

    0%,
    18% {
        opacity: 0;
        transform: translateX(-50%) scaleX(0.5);
    }

    40% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }

    86% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes lp-bar-slide {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(360%);
    }
}

@keyframes loading-text-fade {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.95;
    }
}

/* 動きを減らす設定の人にはアニメーションを控える */
@media (prefers-reduced-motion: reduce) {

    .lp-mirror,
    .lp-arch,
    .lp-glass::after,
    .lp-shelf,
    .lp-sparkle,
    .lp-floor,
    .lp-bar span,
    .loading-poster-text {
        animation: none !important;
    }

    .lp-mirror,
    .lp-shelf,
    .lp-floor {
        opacity: 1;
        transform: none;
    }
}

/* Model error overlay */
.model-error-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #1c170f;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 32px;
    z-index: 10;
}

.model-error-overlay[hidden] {
    display: none;
}

.model-error-overlay p {
    font-size: 13px;
    font-family: var(--font-sans);
    margin: 0;
}

.model-error-sub {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

.model-error-btn {
    margin-top: 8px;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: 4px;
    transition: border-color 0.2s, color 0.2s;
}

.model-error-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* AR button */
.ar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-size: 11px;
    font-family: var(--font-sans);
    letter-spacing: 0.12em;
    cursor: pointer;
    position: absolute;
    bottom: 56px;
    right: 20px;
    backdrop-filter: blur(8px);
    z-index: 4;
    transition: background 0.2s, border-color 0.2s;
}

.ar-btn:hover {
    background: rgba(176, 138, 78, 0.15);
    border-color: var(--accent);
}



.preview-meta {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    position: relative;
    z-index: 6;
}

.preview-meta-brand {
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
}

.preview-meta-code {
    font-size: 9px;
    letter-spacing: 0.15em;
    color: rgba(0, 0, 0, 0.45);
}

.preview-meta-code strong {
    color: var(--accent);
}

/* ── Share Icon (setmen header) ── */
/* 共有ボタン。アイコンだけだと何のボタンか分からず、ほとんど押されない。
   文字を添えて「押せば共有できる」と読めるピルにする。 */
.sm-header-share {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--beige-ink) !important;
    height: 36px;
    padding: 0 14px 0 12px;
    margin-left: 8px;
    flex-shrink: 0;
    border-radius: 18px;
    background: rgba(36, 31, 25, 0.08);
    border: 1px solid rgba(36, 31, 25, 0.15);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sm-header-share-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.sm-header-share svg {
    stroke: var(--beige-ink);
}

.sm-header-share:hover {
    background: rgba(36, 31, 25, 0.15);
    transform: scale(1.08);
}

.sm-header-share.is-copied {
    background: var(--accent);
    border-color: var(--accent);
}

.sm-header-share.is-copied svg {
    stroke: #fff;
}

.sm-header-share.is-copied .sm-header-share-label {
    color: #fff;
}

.sm-header-share-toast {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--beige-ink);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 20;
}

.sm-header-share-toast::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 14px;
    border: 5px solid transparent;
    border-bottom-color: var(--beige-ink);
}

/* ─── SIDEBAR ─────────────────────────────────────── */
.sm-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--dark);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sm-sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── STEP PANELS ──────────────────────────────────── */
.sm-panel {
    flex: 1;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 28px 28px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.sm-panel::-webkit-scrollbar {
    width: 4px;
}

.sm-panel::-webkit-scrollbar-track {
    background: transparent;
}

.sm-panel::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
}

.sm-panel.active {
    display: flex;
}

.sm-panel-header {
    margin-bottom: 24px;
    flex-shrink: 0;
}

/* STEPラベルは毎画面の一番上に出る。ここが金色だと開いた瞬間に
   「金色のUI」という印象が決まってしまうので、彩度を持たせない */
.sm-eyebrow {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.32em;
    color: var(--silver);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sm-panel-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.12;
}

.sm-panel-subtitle {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--silver-light);
    letter-spacing: 0.04em;
    line-height: 1.65;
}

/* ─── CONFIG GROUPS ─────────────────────────────────── */
.sm-group {
    margin-bottom: 24px;
    flex-shrink: 0;
}

.sm-group-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--silver-light);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 1画面に何度も出る「現在の選択」ラベル。色数を増やさず、
   ラベル(--silver-light)より太く・白く見せることで違いを出す。
   Porsche/Mercedesのコンフィギュレーターも選択値の強調は色でなく太字 */
.sm-current-label {
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Shape grid (フォルム) */
.sm-shape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sm-shape-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--silver);
}

.sm-shape-card:hover {
    border-color: #443a26;
    background: #1c170f;
}

.sm-shape-card.selected {
    border-color: var(--accent);
    background: rgba(176, 138, 78, 0.06);
    color: var(--white);
}

.shape-icon {
    width: 36px;
    height: 60px;
}

/* Badge (price add-on) */
.sm-badge {
    display: block;
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-align: center;
}

/* Toggle row (片面/両面) */
.sm-toggle-row {
    display: flex;
    gap: 8px;
}

.sm-toggle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--silver);
    text-align: center;
}

.sm-toggle:hover {
    border-color: #443a26;
    background: #1c170f;
}

.sm-toggle.selected {
    border-color: var(--accent);
    background: rgba(176, 138, 78, 0.06);
    color: var(--white);
}

.sm-toggle-icon {
    color: currentColor;
    opacity: 0.7;
}

/* Swatch grid (カラー, チェア) */
.sm-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.sm-swatch-grid--wide {
    grid-template-columns: repeat(5, 1fr);
}

.sm-swatch {
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
    display: block;
}

.sm-swatch:hover {
    transform: scale(1.08);
}

.sm-swatch.selected {
    border-color: var(--white);
}

.sm-swatch-plus {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    color: #000;
    font-size: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Color name row */
.sm-color-names {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.sm-swatch-grid--wide+.sm-color-names {
    grid-template-columns: repeat(5, 1fr);
}

.sm-color-names span {
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--silver);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Outlet grid */
.sm-outlet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* 9-item outlet grid: 3×3 */
.sm-outlet-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.sm-outlet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
    background: transparent;
}

.sm-outlet:hover .sm-outlet-swatch {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #443a26;
}

.sm-outlet.selected .sm-outlet-swatch {
    box-shadow: 0 0 0 2px var(--accent);
}

.sm-outlet-swatch {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* ミラー形状・面数の実写サムネイル。
   marketing/photo/ の実際の納品写真から切り出したもの（切り出しは手作業）。
   縦長比率はライティング形状のサムネイル(.sm-lighting-thumb)と揃えてある。 */
.sm-option-thumb {
    width: 74px;
    height: 104px;
    object-fit: cover;
    border: 1px solid var(--border-light);
    background: #0d0b08;
    display: block;
    transition: border-color 0.2s, transform 0.2s;
}

.sm-outlet:hover .sm-option-thumb {
    transform: scale(1.04);
}

.sm-outlet.selected .sm-option-thumb {
    border-color: var(--accent);
}

.sm-outlet-name {
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--silver);
    white-space: nowrap;
    text-align: center;
}

.sm-outlet.selected .sm-outlet-name {
    color: var(--white);
}

/* ── Swatch material textures ── */
/*
 * フレーム／棚下カバーの仕上げ20種。すべて実物サンプル（3M DI-NOC / AICA）の写真で、
 * 「素材を確認」ポップアップ（js/setmen.js）とも同じ画像を使う。
 *
 * 画像は scripts/build-finishes.py が marketing/finish-samples/ の写真から書き出す。
 * 仕上げを足す・差し替えるときはそのスクリプトを直すこと（CSSに色を書かない）。
 */
.sm-finish-grid .sm-outlet-swatch {
    background-size: cover;
    background-position: center;
}

.swatch-copper-plain    { background-image: url("../img/swatch/finish/copper-plain.jpg"); }
.swatch-rosegold-plain  { background-image: url("../img/swatch/finish/rosegold-plain.jpg"); }
.swatch-beigegold-plain { background-image: url("../img/swatch/finish/beigegold-plain.jpg"); }
.swatch-hl-copper       { background-image: url("../img/swatch/finish/hl-copper.jpg"); }
.swatch-hl-black        { background-image: url("../img/swatch/finish/hl-black.jpg"); }
.swatch-hl-gold         { background-image: url("../img/swatch/finish/hl-gold.jpg"); }
.swatch-hl-silver       { background-image: url("../img/swatch/finish/hl-silver.jpg"); }
.swatch-aging-black     { background-image: url("../img/swatch/finish/aging-black.jpg"); }
.swatch-aging-brown     { background-image: url("../img/swatch/finish/aging-brown.jpg"); }
.swatch-aging-silver    { background-image: url("../img/swatch/finish/aging-silver.jpg"); }
.swatch-white-oak       { background-image: url("../img/swatch/finish/white-oak.jpg"); }
.swatch-oak             { background-image: url("../img/swatch/finish/oak.jpg"); }
.swatch-walnut          { background-image: url("../img/swatch/finish/walnut.jpg"); }
.swatch-terrazzo-gray   { background-image: url("../img/swatch/finish/terrazzo-gray.jpg"); }
.swatch-terrazzo-beige  { background-image: url("../img/swatch/finish/terrazzo-beige.jpg"); }
.swatch-terrazzo-white  { background-image: url("../img/swatch/finish/terrazzo-white.jpg"); }
.swatch-stone-gray      { background-image: url("../img/swatch/finish/stone-gray.jpg"); }
.swatch-stone-brown     { background-image: url("../img/swatch/finish/stone-brown.jpg"); }
.swatch-mortar-white    { background-image: url("../img/swatch/finish/mortar-white.jpg"); }
.swatch-mortar-gray     { background-image: url("../img/swatch/finish/mortar-gray.jpg"); }

/* 仕上げは7系統・20種あるので、系統ごとに見出しを挟んで並べる。
   見出しは格子の1行を丸ごと使う（列数が変わるモバイルでも崩れない） */
.sm-finish-grid {
    row-gap: 2px;
}

.sm-finish-group {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--silver);
    opacity: 0.8;
}

.sm-finish-group:first-child {
    margin-top: 0;
}

/* 20個並ぶので丸を一回り小さくする（TODO「色ボタンのサイズを小さく」）。
   モバイルは「小さな丸＋横に名前」の行レイアウトが別にあるので、そちらを上書きしない */
@media (min-width: 834px) {
    .sm-finish-grid .sm-outlet {
        padding: 6px 2px;
    }

    .sm-finish-grid .sm-outlet-swatch {
        width: 36px;
        height: 36px;
    }
}


/* コンセントカラーは「素材」ではなく「部品」なので、仕様書PDFに載っている
   プレートそのものの実物写真を出す。丸く切ると差込口だけが写って
   何の部品か分からなくなるため、ここだけ角丸の四角にしている。 */
.swatch-outlet-stainless-bl,
.swatch-outlet-brass-hl,
.swatch-outlet-brass,
.swatch-outlet-stainless-hl,
.swatch-outlet-stainless,
.swatch-outlet-copper-bl,
.swatch-outlet-copper-plain,
.swatch-outlet-black,
.swatch-outlet-matte-black {
    border-radius: 6px;
    background-size: cover;
    background-position: center;
}

.swatch-outlet-stainless-bl  { background-image: url("../img/swatch/outlet/stainless-bl.jpg"); }
.swatch-outlet-brass-hl      { background-image: url("../img/swatch/outlet/brass-hl.jpg"); }
.swatch-outlet-brass         { background-image: url("../img/swatch/outlet/brass.jpg"); }
.swatch-outlet-stainless-hl  { background-image: url("../img/swatch/outlet/stainless-hl.jpg"); }
.swatch-outlet-stainless     { background-image: url("../img/swatch/outlet/stainless.jpg"); }
.swatch-outlet-copper-bl     { background-image: url("../img/swatch/outlet/copper-bl.jpg"); }
.swatch-outlet-copper-plain  { background-image: url("../img/swatch/outlet/copper-plain.jpg"); }
.swatch-outlet-black         { background-image: url("../img/swatch/outlet/black.jpg"); }
.swatch-outlet-matte-black   { background-image: url("../img/swatch/outlet/matte-black.jpg"); }

/* コンセント系：ヘアライン研磨（縦方向） */
.swatch-hairline-v {
    position: relative;
    overflow: hidden;
}
.swatch-hairline-v::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px,
        rgba(0,0,0,0.10)       1px, rgba(0,0,0,0.10)       2px,
        rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 3px,
        rgba(0,0,0,0.05)       3px, rgba(0,0,0,0.05)       4px
    );
    pointer-events: none;
}

/* Option list (ミラー、ライティング等) */
.sm-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-option-card {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.sm-option-card:hover {
    border-color: #443a26;
    background: #1c170f;
}

.sm-option-card.selected {
    border-color: var(--accent);
    background: rgba(176, 138, 78, 0.05);
}

.sm-option-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sm-option-title {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 3px;
}

.sm-option-card:not(.selected) .sm-option-title {
    color: var(--silver-light);
}

/* ── ライティング形状: 実写プレビュー付きカード ───────────── */
.sm-lighting-card .sm-option-inner {
    justify-content: flex-start;
    gap: 12px;
}

/* 元画像は横長で、ミラー本体（＝光の形）が中央のごく一部に写っている。
   正方形で切ると形が分からなくなるため、縦長比率にして中央を拡大表示する */
.sm-lighting-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 62px;
    object-fit: cover;
    object-position: center 42%;
    border: 1px solid var(--border-light);
    background: #0d0b08;
    display: block;
}

.sm-lighting-card.selected .sm-lighting-thumb {
    border-color: var(--accent);
}

/* 「なし」用のプレースホルダー（光の入っていない状態を示す） */
.sm-lighting-thumb--none {
    position: relative;
}

.sm-lighting-thumb--none::after {
    content: "—";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--silver);
    font-size: 14px;
}


.sm-option-desc {
    font-size: 10px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--silver);
}

/* 価格の上乗せ表示。標準(無料)にも同じ金色が付いていて意味が薄れていたため、
   価格は淡色に統一し、金色は合計金額（ヘッダー/サマリー）だけの特別感に戻す */
.sm-option-price {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 300;
    color: var(--silver-light);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Kelvin grid */
.sm-kelvin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sm-kelvin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s;
}

.sm-kelvin:hover {
    border-color: #443a26;
}

.sm-kelvin.selected {
    border-color: var(--accent);
}

.sm-kelvin-bar {
    width: 100%;
    height: 12px;
    border-radius: 2px;
}

.sm-kelvin-val {
    font-size: 10px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.05em;
}

.sm-kelvin-name {
    font-size: 9px;
    font-weight: 300;
    color: var(--silver);
    letter-spacing: 0.05em;
}

/* Help button & panel */
/* 「?」だけの丸ボタンは何が起きるか読めなかったので、
   ラベル行の右端に置く文言付きのピルにした。一目で用途がわかる。 */
/* ラベルとボタンを1行に並べる見出し行。ボタンをラベルの <p> の中に
   入れてしまうと、モバイルのタブ名が .sm-group-label の textContent から
   作られている都合でボタン文言まで混ざり、さらにクローン時に
   .sm-group-label ごと削除されてボタンが消える。必ず兄弟に置くこと。 */
.sm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* グリッドの直後に続く小見出し行は上にも余白が要る */
.sm-group-head--sub {
    margin-top: 16px;
    margin-bottom: 8px;
}

.sm-group-head .sm-group-label,
.sm-group-head .sm-group-sublabel {
    margin: 0;
    min-width: 0;
}

.sm-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: var(--silver-light);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.sm-help-ico {
    width: 12px;
    height: 12px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
}

.sm-help-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
}

.sm-help-panel {
    margin-top: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    animation: smHelpFadeIn 0.2s ease;
}

@keyframes smHelpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sm-help-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 8px;
    letter-spacing: 0.08em;
}

.sm-help-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.sm-help-list li {
    font-size: 11px;
    color: var(--silver);
    line-height: 1.8;
    padding-left: 0;
}

.sm-help-list li strong {
    color: var(--white);
}

.sm-help-tip {
    font-size: 10px;
    color: var(--accent);
    margin: 0;
    line-height: 1.6;
}

/* ─── フレームカラー実物見本ポップアップ ─── */
.sm-color-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sm-color-modal[hidden] {
    display: none;
}

.sm-color-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0.72);
    backdrop-filter: blur(2px);
    animation: smColorModalFadeIn 0.18s ease;
}

.sm-color-modal-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(80vh, 640px);
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 28px 24px 24px;
    animation: smColorModalRise 0.22s ease;
}

@keyframes smColorModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes smColorModalRise {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sm-color-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: var(--silver);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.sm-color-modal-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.sm-color-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    padding-right: 30px;
}

.sm-color-modal-desc {
    font-size: 11.5px;
    color: var(--silver);
    line-height: 1.7;
    margin: 0 0 18px;
}

.sm-color-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sm-color-modal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}

.sm-color-modal-item.is-current {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

.sm-color-modal-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* 実写を出しているスウォッチは、素材感が見えるよう少し拡大して表示する */
.sm-color-modal-swatch.is-photo {
    background-size: 130%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.sm-color-modal-name {
    font-size: 11px;
    color: var(--white);
    letter-spacing: 0.04em;
    text-align: center;
}

.sm-color-modal-note {
    font-size: 9px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.02em;
    text-align: center;
}

.sm-color-modal-note.is-pending {
    color: rgba(255, 255, 255, 0.28);
}

.sm-color-modal-current-tag {
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    .sm-color-modal {
        padding: 0;
        align-items: flex-end;
    }

    .sm-color-modal-panel {
        max-width: none;
        width: 100%;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        padding: 22px 18px 28px;
        animation: smColorModalRiseMobile 0.22s ease;
    }

    @keyframes smColorModalRiseMobile {
        from { opacity: 0; transform: translateY(100%); }
        to { opacity: 1; transform: translateY(0); }
    }

    .sm-color-modal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

/* Texture grid (床/壁) */
.sm-texture-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.sm-texture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--silver);
    text-align: center;
    line-height: 1.4;
}

.sm-texture:hover {
    border-color: #443a26;
}

.sm-texture.selected {
    border-color: var(--accent);
    color: var(--white);
}

.sm-texture-swatch {
    width: 100%;
    height: 32px;
    border-radius: 1px;
    display: block;
}

/* ─── LOGO CUSTOM PANEL ──────────────────────────── */
.sm-logo-panel {
    margin-top: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sm-logo-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.sm-logo-mode-btn {
    flex: 1;
    padding: 12px 0;
    min-height: 44px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sm-logo-mode-btn.active {
    background: rgba(176, 138, 78, 0.15);
    color: var(--accent);
}

.sm-logo-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-mini-label {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.sm-text-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 12px;
    min-height: 44px;
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 16px; /* 16px未満だとiOS Safariが自動ズームするため */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.sm-text-input:focus {
    border-color: var(--accent);
}

.sm-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    min-height: 44px;
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    font-family: var(--font-sans);
    font-size: 16px; /* 16px未満だとiOS Safariが自動ズームするため */
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}

.sm-select option {
    background: #1c170f;
    color: #fff;
}

.sm-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.sm-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(176, 138, 78, 0.4);
}

.sm-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-sans);
    font-size: 12px;
    box-sizing: border-box;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.sm-upload-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.sm-upload-name {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin: 2px 0 0;
}

/* ─── SIDEBAR FOOTER ──────────────────────────────── */
.sm-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 18px 28px 20px;
    background: var(--dark);
}

.sm-price-display {
    margin-bottom: 14px;
}

.sm-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}

.sm-price-row.sm-price-options {
    padding-bottom: 8px;
}

.sm-price-label {
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--silver);
    text-transform: uppercase;
}

.sm-price-val {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 300;
    color: var(--silver-light);
}

.sm-price-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.sm-price-total {
    padding-top: 8px;
}

.sm-price-total-val {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 300;
    color: var(--white);
    letter-spacing: 0.02em;
}

/* Navigation buttons */
.sm-nav-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.sm-btn-prev,
.sm-btn-next {
    flex: 1;
    padding: 13px 16px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: none;
}

.sm-btn-prev {
    background: transparent;
    color: var(--silver);
    border: 1px solid var(--border-light);
}

.sm-btn-prev:hover:not(:disabled) {
    color: var(--white);
    border-color: #59503b;
}

.sm-btn-prev:disabled {
    opacity: 0.3;
    cursor: default;
}

.sm-btn-next {
    background: var(--white);
    color: var(--black);
}

.sm-btn-next:hover {
    background: var(--off-white);
}

/* PDF button */
.sm-btn-pdf {
    width: 100%;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(176, 138, 78, 0.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.sm-btn-pdf:hover {
    background: rgba(176, 138, 78, 0.2);
}

/* ===================================================
   RESPONSIVE — スマートフォン対応
   =================================================== */

@media (max-width: 833.98px) {
    #sm-floor-glow {
        width: 55%;
        height: 22%;
        filter: blur(14px);
    }

    body {
        overflow: auto;
        overflow-x: hidden;
        height: auto;
    }

    /* ── Header ── */
    .sm-header {
        padding: 0 16px;
    }

    .sm-logo-text {
        display: none;
    }

    .sm-step-label {
        display: none;
    }

    .sm-step {
        padding: 8px;
    }

    .sm-step-line {
        width: 20px;
    }

    .sm-header-price {
        display: none;
    }

    /* Removed conflicting mobile layout rules to allow the final mobile UI to control 60/40 split */


    /* ── Sidebar ── */
    .sm-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .sm-sidebar-inner {
        height: auto;
        flex: none;
    }

    .sm-panel {
        overflow-y: visible;
        flex: none;
        padding: 20px 16px 96px;
    }

    /* ── Swatch Grid ── */
    .sm-swatch-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .sm-color-names {
        grid-template-columns: repeat(5, 1fr);
    }

    .sm-swatch-grid--wide {
        grid-template-columns: repeat(4, 1fr);
    }

    .sm-swatch-grid--wide+.sm-color-names {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ── Texture Grid ── */
    .sm-texture-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Sidebar footer / navigation ── */
    .sm-sidebar-footer {
        position: sticky;
        bottom: 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(28, 23, 15, 0.97), rgba(28, 23, 15, 0.92));
        border-top: 1px solid var(--border);
    }

    .sm-nav-buttons {
        gap: 6px;
    }

    .sm-btn-prev,
    .sm-btn-next {
        padding-block: 14px;
        font-size: 12px;
    }

    .sm-btn-pdf {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

/* ─── PRINT SHEET ─────────────────────────────────── */
.print-sheet {
    display: none;
}

/* ─── PRINT STYLES ─────────────────────────────────── */
@media print {
    body {
        background: #fff;
        color: #000;
        overflow: visible;
        height: auto;
    }

    .sm-header,
    .sm-layout {
        display: none !important;
    }

    .print-sheet {
        display: block;
        padding: 32px 40px;
        font-family: var(--font-sans);
        color: #000;
        max-width: 900px;
        margin: 0 auto;
    }

    .print-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 6px;
    }

    .print-brand {
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 300;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: #000;
    }

    .print-title {
        font-family: var(--font-serif);
        font-size: 28px;
        font-weight: 300;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
    }

    .print-subtitle {
        font-size: 12px;
        color: #666;
        letter-spacing: 0.08em;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #ddd;
    }

    .print-body {
        display: grid;
        grid-template-columns: 1fr 1.6fr;
        gap: 40px;
        align-items: start;
    }

    .print-mirror-preview {
        width: 100%;
        aspect-ratio: 2/3;
        border: 1px solid #ddd;
        background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .print-mirror-preview .pm-frame {
        width: 60%;
        height: 80%;
        border: 8px solid;
        position: relative;
        overflow: hidden;
    }

    .print-mirror-preview .pm-surface {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #d0d8e4, #c0ccd8, #d8e0ec);
    }

    .print-section {
        margin-bottom: 18px;
    }

    .print-section h3 {
        font-size: 9px;
        font-weight: 500;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: #888;
        margin-bottom: 8px;
        padding-bottom: 4px;
        border-bottom: 1px solid #eee;
    }

    .print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
    }

    .print-table td {
        padding: 5px 4px;
        border-bottom: 1px solid #f0f0f0;
    }

    .print-table td:first-child {
        color: #666;
        width: 45%;
        font-weight: 300;
    }

    .print-table td:last-child {
        font-weight: 400;
        color: #111;
    }

    .print-total td {
        font-size: 14px;
        font-weight: 600;
        border-bottom: 2px solid #000;
        padding-top: 8px;
    }

    .print-code-label {
        font-size: 10px;
        color: #666;
        margin-top: 12px;
        letter-spacing: 0.06em;
    }

    .print-code-label strong {
        color: #000;
        font-family: monospace;
    }

    .print-note {
        font-size: 9px;
        color: #999;
        margin-top: 8px;
        line-height: 1.6;
    }

    .print-footer-note {
        margin-top: 32px;
        padding-top: 12px;
        border-top: 1px solid #ddd;
        font-size: 9px;
        color: #aaa;
        letter-spacing: 0.12em;
    }
}

/* ─── MOBILE ONLY UI (max-width: 768px) ─── */
.sm-logo {
    display: none;
}

#sm-mobile-ui {
    display: none;
}

/* スマホ横向き（例: 844x390）は幅768pxを超えるためPCレイアウトになってしまい、
   モバイルUIが丸ごと出ないまま狭い画面にサイドバーが詰め込まれていた。
   「低い横長かつタブレット幅以下」も同じモバイルUIの対象にする。
   横向き向けの2カラム化は、このブロックの後で上書きしている。 */
/* モバイル専用DOM（#sm-mobile-ui）を使う帯。
   768px までだったが、769〜833px（iPad mini 744 / iPad 810）は
   デスクトップDOMだとサイドバー440pxに圧迫されて3Dプレビューが
   330〜394pxしか残らず、モバイルUIのほうが明確に使いやすい。
   834px（iPad縦の実幅）からデスクトップDOM＋可変サイドバーに切り替える。 */
@media (max-width: 833.98px),
(max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {

    /* --- Branding Cleanup --- */
    .sm-logo,
    .preview-meta,
    #sm-ar-btn,
    #sm-logo-label,
    .sm-steps,
    .sm-header-price {
        display: none !important;
    }

    body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
        width: 100%;
        background: #151109;
        margin: 0;
        /* フッターは position:fixed で浮いている。その高さぶんを本文側で
           空けておかないと、縦の段組みが画面より下にはみ出し、
           パネルの最終行がフッターの裏に隠れる。 */
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    /* --- Header Refinement --- */
    .sm-header {
        height: 50px;
        flex: none;
        background: rgba(21, 17, 9, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        border-bottom: 1px solid var(--border);
        position: relative;
    }

    .sm-home-link {
        display: flex !important;
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1010;
        color: var(--off-white);
        opacity: 0.8;
    }

    /* 共有とカートはヘッダー右端に固定する。中央寄せの並びに混ざると
       ステップ表示が中心からずれ、押せるものが見つけにくい。 */
    .sm-header-share {
        position: absolute;
        right: 56px;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        margin-left: 0;
        padding: 0 12px 0 10px;
        gap: 5px;
        background: rgba(243, 233, 220, 0.1);
        border-color: rgba(243, 233, 220, 0.22);
        color: var(--off-white) !important;
    }

    .sm-header-share svg {
        width: 15px;
        height: 15px;
        stroke: var(--off-white);
    }

    .sm-header-share-label {
        font-size: 11.5px;
    }

    .sm-header-share:hover {
        transform: translateY(-50%);
    }

    .sm-header-cart {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* トーストはボタン基準だと画面右端で切れるので、ヘッダー中央下に出す */
    .sm-header-share-toast {
        position: fixed;
        top: 58px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        font-size: 12px;
        padding: 8px 16px;
    }

    .sm-header-share-toast::after {
        right: auto;
        left: 50%;
        margin-left: -5px;
    }

    .sm-mobile-step-status {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 14px;
        letter-spacing: 0.08em;
    }

    /* スマホ最上部、開いた瞬間に目に入る文字。ここが金色だと
       PC版より先に「金色のUI」という第一印象が付いてしまう */
    .sm-mobile-step-id {
        color: var(--white);
        font-weight: 700;
    }

    .sm-mobile-step-total {
        color: rgba(243, 233, 220, 0.45);
    }

    /* プログレスドット */
    .sm-mobile-step-dots {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-left: 4px;
    }

    .sm-step-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(217, 189, 138, 0.25);
        transition: background 0.3s, transform 0.3s;
    }

    .sm-step-dot.active {
        background: var(--accent);
        transform: scale(1.2);
    }

    /* --- Main Layout --- */
    /* 3Dプレビューは「余った高さ」を受け取る側にする。
       固定の 60vh と下の 40vh を足すとヘッダーとフッターのぶん画面を超え、
       操作パネルの最終行が必ず切れていた。 */
    body .sm-layout {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding-top: 0 !important;
        margin-top: 0 !important;
        overflow: hidden;
        position: relative;
    }

    .sm-preview {
        height: 100% !important;
        flex: 1;
        width: 100%;
        position: relative;
        background: #151109;
        overflow: hidden;
    }

    #sm-model {
        height: 100% !important;
        width: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: transparent;
        transform-origin: center center;
    }

    .sm-sidebar {
        display: none !important;
    }

    /* --- 2nd-Tier Step UI --- */
    /* 選択肢が読める最低限（280px）は必ず確保し、大きい端末でも
       伸ばしすぎない。残りは上の3Dプレビューに回る。 */
    body #sm-mobile-ui {
        height: clamp(280px, 42dvh, 360px) !important;
        flex: none;
        display: flex;
        flex-direction: column;
        background: #151109;
        position: relative;
        z-index: 500;
        overflow: hidden;
        border-top: 1px solid var(--border);
    }

    #sm-mobile-step-title {
        height: 30px;
        background: #171208;
        color: rgba(243, 233, 220, 0.55);
        font-size: 11px;
        letter-spacing: 0.2em;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }

    /* Row 1: Categories */
    #sm-mobile-tabs {
        height: 44px;
        flex: none;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        background: #171208;
        border-bottom: 1px solid var(--border);
        padding: 0 8px;
        align-items: center;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Fade the trailing edge so it's clear more tabs are reachable by
           scrolling (tab list overflows the viewport with no other hint). */
        mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
    }

    #sm-mobile-tabs::-webkit-scrollbar {
        display: none;
    }

    .sm-mobile-tab {
        height: 100%;
        padding: 0 12px;
        background: none;
        border: none;
        color: rgba(243, 233, 220, 0.45);
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.05em;
        position: relative;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 選択中タブの文字。下の2pxライン(::after)だけで「選択中」は
       十分伝わるので、文字色まで金色にしない。PC版の .sm-current-label と
       同じ考え方（色ではなく明度・太さで見せる） */
    .sm-mobile-tab.active {
        color: var(--white);
        font-weight: 600;
    }

    /* 一度開いた項目。全部開くまで「次へ」が押せないので、どれが残っているかを示す */
    .sm-mobile-tab.visited:not(.active) {
        color: rgba(243, 233, 220, 0.72);
    }

    .sm-mobile-tab:not(.visited)::before {
        content: '';
        position: absolute;
        top: 12px;
        right: 6px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
    }

    .sm-mobile-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 12px;
        height: 2px;
        background: var(--accent);
    }

    /* Row 2: Options */
    #sm-mobile-panels {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        /* フッターぶんは body の padding-bottom で空けた。ここで
           さらに100px取ると、短いパネルが上に寄って間延びして見える。 */
        padding: 14px 12px 18px;
        background: #151109;
        -webkit-overflow-scrolling: touch;
    }

    .sm-mobile-panel .sm-group {
        margin-bottom: 0px;
    }

    .sm-mobile-panel .sm-group-label {
        display: none !important;
    }

    /* Grid layout for options */
    /* minmax(0, 1fr): ラベルがnowrapのカードでも列がコンテナ幅を超えてはみ出さないようにする */
    .sm-outlet-grid,
    .sm-kelvin-grid,
    .sm-texture-grid,
    .sm-swatch-grid,
    .sm-options-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* カラー行は「丸＋名前」を横並びにしたぶん幅が要るので2列。
       高さが下がったので、2列でも一画面に見える数はむしろ増える。 */
    .sm-outlet-grid,
    .sm-outlet-grid--3col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .sm-swatch,
    .sm-texture,
    .sm-option-card,
    .sm-outlet,
    .sm-kelvin {
        min-height: 40px;
        background: #1c170f;
        border: 1px solid rgba(217, 189, 138, 0.08);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px;
        transition: all 0.2s ease;
    }

    /* カラー選択は「大きな丸＋下に文字」だとカード1枚が130px近くなり、
       小さな画面では3〜4個しか見えず、スクロールばかりになっていた。
       小さな丸を文字の横に置く横並びの行にして、高さを半分以下に抑える。 */
    .sm-outlet,
    .sm-finish-grid .sm-outlet {
        flex-direction: row;
        justify-content: flex-start;
        gap: 7px;
        min-height: 34px;
        padding: 5px 8px;
    }

    .sm-outlet-swatch,
    .sm-finish-grid .sm-outlet-swatch {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    .sm-outlet.selected .sm-outlet-swatch,
    .sm-outlet:hover .sm-outlet-swatch {
        box-shadow: 0 0 0 1.5px var(--accent);
        transform: none;
    }

    /* カラーラベルをモバイルで常時表示。狭いカード幅でも1行に収める */
    .sm-outlet-name {
        font-size: 11.5px;
        opacity: 1;
        text-align: left;
        line-height: 1.25;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* PC版は縁取り+淡い背景だけで文字色は変えていない。モバイルだけ
       文字色まで金色にしていたので、ここだけ他より金色が濃くなっていた。
       PC版と揃えて縁取り+淡い背景のみに戻す */
    .sm-swatch.selected,
    .sm-texture.selected,
    .sm-option-card.selected,
    .sm-outlet.selected,
    .sm-kelvin.selected {
        background: rgba(176, 138, 78, 0.1);
        border-color: var(--accent);
    }

    .sm-help-btn {
        /* タップ領域は 44px 確保しつつ、見た目のピルは細いままにする */
        min-height: 44px;
        padding: 5px 12px;
        font-size: 11.5px;
    }

    .sm-help-panel {
        padding: 12px 14px;
    }

    .sm-help-list li {
        font-size: 12px;
        line-height: 2;
    }

    .sm-help-tip {
        font-size: 11px;
    }

    /* ジェスチャーヒント（モバイルのみ） */
    .sm-gesture-hint {
        display: flex;
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(21, 17, 9, 0.75);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: rgba(243, 233, 220, 0.92);
        font-size: 12px;
        letter-spacing: 0.06em;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1px solid rgba(217, 189, 138, 0.2);
        white-space: nowrap;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s;
    }

    .sm-gesture-hint.visible {
        opacity: 1;
    }

    /* Footer */
    #sm-mobile-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-bottom));
        background: rgba(21, 17, 9, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 calc(20px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(20px + env(safe-area-inset-left));
        z-index: 2000;
    }

    .sm-mobile-price-val {
        font-family: var(--font-serif);
        font-size: 16px;
        color: var(--off-white);
    }

    .sm-mobile-btn-next {
        height: 48px;
        padding: 0 24px;
        background: var(--accent);
        color: #241f19;
        border: none;
        border-radius: 24px;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.1em;
        transition: background 0.25s ease, color 0.25s ease;
    }

    /* 未確認の項目が残っている間。押せないことが一目で分かる見た目にする */
    .sm-mobile-btn-next.is-locked {
        background: none;
        color: rgba(243, 233, 220, 0.45);
        border: 1px solid var(--border);
    }

    /* 戻るボタン。PC版のサイドバーにある「← 戻る」はモバイルでは実体が
       消えており、一度進むと戻れない一方通行になっていたため footer に置く。 */
    .sm-mobile-btn-prev {
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        background: none;
        color: var(--off-white);
        border: 1px solid var(--border);
        border-radius: 24px;
        font-size: 16px;
        line-height: 1;
    }

    .sm-mobile-btn-prev[disabled] {
        opacity: 0.3;
    }

    /* 戻るボタンが入って3カラムになるので、価格は中央で均等に */
    .sm-mobile-price {
        flex: 1 1 auto;
        text-align: center;
    }

    /* ── 極小ラベルを可読域に底上げ ── */
    .sm-header-price-label,
    .sm-eyebrow,
    .sm-badge,
    .preview-meta-brand,
    .preview-meta-code {
        font-size: 11px;
    }
}

/* ── グループ内の小見出し（棚板下カバーの「カバーの仕上げ」など） ── */
.sm-group-sublabel {
    font-size: 11px;
    color: #999;
    letter-spacing: .08em;
    margin: 12px 0 6px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   スマホ横向き（ランドスケープ）
   縦向き前提の「上=3Dプレビュー／下=操作パネル」を横で使うと、
   高さ400px弱に 40vh のパネルが潰れて選択肢がほとんど見えない。
   横では左右2カラムに組み替え、パネルに画面高いっぱいを与える。
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {

    body {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        /* 横向きではフッターが static で右カラムの中に入るので、
           縦向き用に空けておいた下余白は要らない */
        padding-bottom: 0;
    }

    /* ヘッダーは横幅いっぱいで最上段に残す（高さは詰める） */
    .sm-header {
        width: 100%;
        height: 42px;
    }

    /* 左: 3Dプレビュー */
    body .sm-layout {
        width: 46%;
        height: calc(100dvh - 42px) !important;
        flex: none;
    }

    /* 右: 操作パネル。縦の 40vh 指定を打ち消して全高を使う */
    body #sm-mobile-ui {
        width: 54%;
        height: calc(100dvh - 42px) !important;
        border-top: none;
        border-left: 1px solid var(--border);
    }

    /* フッターは画面固定をやめ、右カラムの一番下に収める。
       固定のままだと左のプレビューまで覆ってしまう。 */
    #sm-mobile-footer {
        position: static;
        width: 100%;
        height: 52px;
        padding-bottom: 0;
        flex: none;
    }

    /* パネル下部の余白は固定フッター分を空けていたもの。不要になる */
    #sm-mobile-panels {
        padding-bottom: 16px;
    }

    /* 高さが足りない分、幅で稼ぐ。列数を増やして一画面に多く見せる */
    #sm-mobile-panels .sm-kelvin-grid,
    #sm-mobile-panels .sm-texture-grid,
    #sm-mobile-panels .sm-swatch-grid,
    #sm-mobile-panels .sm-options-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* 横向きは幅が広いのでカラー行は3列まで */
    #sm-mobile-panels .sm-outlet-grid,
    #sm-mobile-panels .sm-outlet-grid--3col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 縦向き用のスワイプ案内はレイアウトが変わるので出さない */
    .sm-gesture-hint {
        display: none;
    }
}

/* ステップ3 → 空間シミュレーション（space.html）への導線 */
.sm-space-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border, #ddccb2);
    border-radius: var(--radius-md, 10px);
    background: var(--card-bg, #fdf9f3);
    color: var(--dark, #241f19);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.sm-space-cta:hover {
    border-color: var(--accent, #b08a4e);
    background: #fff;
    transform: translateY(-1px);
}

.sm-space-cta svg {
    flex: 0 0 auto;
    color: var(--accent-deep, #8a6a38);
}

.sm-space-cta-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sm-space-cta-text strong {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.sm-space-cta-text span {
    font-size: 12px;
    line-height: 1.6;
    color: var(--silver, #7a6f5f);
}

/* ── 仕上がりイメージ写真（サイドバー下部・最終ステップ） ──
   サイドバーフッターは var(--dark) 背景なので、明るい枠で写真を浮かせる。 */
.sm-preview-photo {
    margin: 0 0 14px;
}

.sm-preview-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.sm-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sm-preview-photo[data-preview-state="ready"] .sm-preview-frame img {
    opacity: 1;
}

/* 読み込み中だけスケルトンを流す。解決済み・失敗時は消す */
.sm-preview-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0.04) 30%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.04) 70%);
    background-size: 300% 100%;
    animation: sm-preview-shimmer 1.4s linear infinite;
}

.sm-preview-photo[data-preview-state="ready"] .sm-preview-skeleton,
.sm-preview-photo[data-preview-state="empty"] .sm-preview-skeleton {
    display: none;
}

/* 解決できなかったときは枠ごと畳む（空の箱を残さない） */
.sm-preview-photo[data-preview-state="empty"] {
    display: none;
}

@keyframes sm-preview-shimmer {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -150% 0;
    }
}

.sm-preview-note {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
}

/* 生成ボタン。写真がまだ無い構成のときだけ出る（js/setmen.js の refreshPreview） */
.sm-preview-gen {
    margin: 0 0 14px;
}

.sm-preview-gen-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sm-preview-gen-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

.sm-preview-gen-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

.sm-preview-gen-note {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {

    .sm-preview-skeleton {
        animation: none;
    }

    .sm-preview-frame img {
        transition: none;
    }
}

/* ─── タブレット（834〜1179px、縦向き）─────────────────
   サイドバーが 440px 固定だったため、834px では
   プレビュー394px ＜ サイドバー440px と逆転し、
   主役であるはずの3Dモデルがサイドバーより小さく表示されていた。

   幅を可変にする。上限440pxにちょうど 1180px で到達するので、
   デスクトップ段との境界で幅が飛ばない（37.3vw ≒ 440px / 1180px）。
     834px  → 340px（プレビュー 494px）
     1024px → 382px（プレビュー 642px）
     1180px → 440px（デスクトップと一致）

   横向きで高さの無い端末は別途 3262 のブロックが受け持つので、
   min-height で明示的に除外して取り合いにしない。
   ブレークポイントの定義は css/tokens.css の冒頭コメントを参照。 */
@media (min-width: 834px) and (max-width: 1179.98px) and (min-height: 561px) {
    :root {
        --sidebar-w: clamp(340px, 37.3vw, 440px);
    }

    /* サイドバーが細くなる分、内側の余白を詰めて中身の幅を確保する */
    .sm-panel {
        padding: 24px 20px 0;
    }

    /* 8列のままだと 1マスが 44px を割ってタップしづらくなる。
       6列にして 45px 前後を保つ。 */
    .sm-swatch-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .sm-swatch-grid--wide {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── 印刷シートの設置イメージ ── */
@media print {

    .print-photo-preview {
        margin: 8px 0 0;
        break-inside: avoid;
    }

    .print-photo-preview img {
        width: 100%;
        border-radius: 4px;
        display: block;
    }

    .print-photo-preview figcaption {
        margin-top: 4px;
        font-size: 8px;
        color: #666;
    }
}