@layer pages {
  /* ── Hero ─────────────────────────────────────────── */
  .studio-hero { padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) 0 clamp(36px, 4vw, 64px); }
  .studio-hero__inner { display: grid; gap: var(--s-8); }
  @media (min-width: 1040px) { .studio-hero__inner { grid-template-columns: 1.15fr .85fr; align-items: end; } }
  .studio-hero__aside { display: grid; gap: var(--s-6); max-width: 520px; }
  .studio-hero__facts { display: flex; gap: var(--s-8); list-style: none; padding: var(--s-5) 0 0; border-top: 1px solid var(--line); }
  .studio-hero__facts li { display: grid; gap: 2px; }
  .studio-hero__facts b { font-size: 2.6rem; line-height: 1; font-weight: 400; }
  .studio-hero__facts span { font-size: var(--fs-caption); color: var(--text-sub); }

  /* ── Shell ────────────────────────────────────────── */
  .studio__shell { display: grid; gap: var(--s-5); align-items: start; }

  /* ── Panel ────────────────────────────────────────── */
  .studio-panel { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-inset), var(--sh-1); padding: clamp(20px, 2.4vw, 32px); display: grid; gap: var(--s-6); order: 2; }
  .studio-steps ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none; padding: 0; }
  .studio-steps__btn { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 6px 2px; border-radius: var(--r-md); color: var(--text-sub); transition: color var(--d-2); }
  .studio-steps__btn:hover { color: var(--ink); }
  .studio-steps__num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-size: .8125rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums lining-nums; border: 1px solid var(--line); transition: all var(--d-3) var(--ease-out); }
  .studio-steps__label { font-size: .75rem; font-weight: 600; white-space: nowrap; }
  .studio-steps__btn[aria-current="step"] { color: var(--ink); }
  .studio-steps__btn[aria-current="step"] .studio-steps__num { background: var(--brown-800); border-color: var(--brown-800); color: var(--ivory-100); transform: scale(1.06); }
  .studio-steps__btn.is-done .studio-steps__num { border-color: var(--brown-800); color: var(--ink); }
  .studio-steps__bar { height: 2px; background: var(--ivory-300); border-radius: 2px; margin-top: var(--s-3); overflow: hidden; }
  .studio-steps__bar span { display: block; height: 100%; background: var(--brown-800); transform-origin: left; transform: scaleX(.2); transition: transform var(--d-5) var(--ease-out); }

  .studio-step { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-5); }
  .studio-step.is-entering { animation: rise var(--d-4) var(--ease-out) both; }
  /* legend 는 float 해야 fieldset 그리드의 gap 을 받아요 */
  .studio-step__title { float: left; width: 100%; display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--fs-title-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1.35; padding: 0; outline: none; }
  .studio-step__title + * { clear: both; }
  .studio-step__hint { color: var(--text-sub); font-size: var(--fs-small); line-height: 1.65; margin-top: calc(var(--s-2) * -1); }
  .studio-sub { display: grid; gap: var(--s-3); padding-top: var(--s-2); }

  .fit-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .fit-choice .choice__body { align-items: flex-start; gap: 4px; padding: 18px; min-height: 148px; justify-content: flex-end; }
  .fit-ico { width: 64px; height: 48px; margin-bottom: auto; stroke: var(--brown-800); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-4) var(--ease-out); }
  .fit-choice:hover .fit-ico { transform: translateY(-3px); }
  .fit-choice input:checked + .choice__body { background: var(--brown-800); color: var(--ivory-100); }
  .fit-choice input:checked + .choice__body .fit-ico { stroke: var(--oak-300); }
  .fit-choice input:checked + .choice__body .choice__desc { color: var(--dark-sub); }

  .fit-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; padding: 4px; background: var(--bg-alt); border-radius: var(--r-md); }
  .fit-seg__item { position: relative; }
  .fit-seg__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .fit-seg__item span { display: grid; place-items: center; min-height: 42px; padding: 6px 8px; border-radius: 6px; font-size: .875rem; font-weight: 600; color: var(--text-sub); text-align: center; line-height: 1.3; transition: all var(--d-2); }
  .fit-seg__item input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); }
  .fit-seg__item input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

  /* 치수 입력 */
  .measure-figure { background: var(--bg-alt); border-radius: var(--r-lg); padding: var(--s-4); display: grid; place-items: center; }
  .measure-svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
  .measure-svg .m-base, .measure-svg .m-body { fill: none; stroke: var(--brown-700); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .measure-svg .m-base { opacity: .5; }
  .measure-svg .m-body { stroke: var(--brown-800); stroke-width: 3.2; opacity: .2; }
  .measure-svg .m-thin { stroke-width: .7; }
  .measure-svg .m-dim { stroke: var(--focus); stroke-width: 1.4; fill: none; opacity: 0; transition: opacity var(--d-3); }
  .measure-svg .m-dim text { fill: var(--focus); stroke: none; font-size: 11px; font-weight: 700; font-family: var(--font-sans); }
  .measure-svg .m-ext { stroke-dasharray: 3 3; }
  .measure-svg[data-active="seatH"] [data-measure="seatH"],
  .measure-svg[data-active="elbowH"] [data-measure="elbowH"],
  .measure-svg[data-active="kneeH"] [data-measure="kneeH"],
  .measure-svg[data-active="armrestH"] [data-measure="armrestH"],
  .measure-svg[data-active="height"] [data-measure="height"],
  .measure-svg[data-active="width"] [data-measure="width"] { opacity: 1; }
  .measure-svg[data-active="armrestH"] .m-arm { stroke: var(--focus); opacity: 1; }

  .fit-fields { display: grid; gap: var(--s-5); }
  .fit-field { display: grid; gap: 8px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg); transition: box-shadow var(--d-2), background-color var(--d-2); }
  .fit-field:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--brown-800); }
  .fit-field__head { display: flex; align-items: center; justify-content: space-between; }
  .fit-field__badge { font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn); }
  .fit-field__control { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; }
  .fit-field__input { text-align: center; font-family: var(--font-serif); font-size: 1.5rem !important; font-weight: 500; min-height: 50px; padding-inline: 36px; font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; }
  .fit-field__input::-webkit-outer-spin-button, .fit-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .fit-step { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); transition: all var(--d-2); }
  .fit-step:hover { background: var(--brown-800); color: var(--ivory-100); border-color: var(--brown-800); }
  .fit-step:active { transform: scale(.94); }
  .fit-step .icon { width: 16px; height: 16px; }
  .fit-reestimate { justify-self: start; font-size: var(--fs-small); }
  .fit-reestimate .icon { width: 16px; height: 16px; }

  .fit-needs { display: grid; gap: var(--s-2); }
  .fit-need .choice__body { padding: 14px 16px; }
  .fit-need .choice__title .icon { width: 18px; height: 18px; color: var(--accent-text); }
  .fit-room { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

  .studio-panel__nav { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

  /* ── Stage ────────────────────────────────────────── */
  .studio-stage {
    position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 460px; height: 62svh;
    background:
      radial-gradient(120% 90% at 50% 18%, #FFFDF9 0%, #F4EEE6 55%, #E9E1D6 100%);
    box-shadow: var(--sh-inset);
    isolation: isolate;
  }
  .studio-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 48px 48px; mask-image: radial-gradient(70% 60% at 50% 70%, #000 0%, transparent 70%); }
  .studio-stage__canvas, .studio-stage__blueprint { position: absolute; inset: 0; z-index: 1; }
  .studio-stage__canvas { cursor: grab; touch-action: pan-y; }
  .studio-stage__canvas:active { cursor: grabbing; }
  .studio-stage__canvas canvas { display: block; }
  .studio-stage__loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3); color: var(--text-sub); font-size: var(--fs-small); transition: opacity var(--d-4); }
  .studio-stage__loading span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brown-800); animation: spin .9s linear infinite; }
  .studio-stage__loading.is-done { opacity: 0; pointer-events: none; }
  .studio-stage__blueprint { padding: clamp(112px, 9vw, 132px) clamp(10px, 2vw, 28px) clamp(60px, 5vw, 76px); display: grid; place-items: center; background: var(--bp-paper); overflow: auto; }
  .studio-stage__blueprint .bp-svg { width: 100%; height: 100%; max-height: 100%; }

  .studio-stage__top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: clamp(14px, 2vw, 24px); pointer-events: none; }
  .studio-stage__top > * { pointer-events: auto; }
  .studio-readout { background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--r-lg); padding: 14px 18px 12px; box-shadow: var(--sh-2); }
  .studio-readout__eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--accent-text); }
  .studio-readout__nums { display: flex; gap: clamp(16px, 2.4vw, 32px); margin-top: 4px; }
  .studio-readout__nums > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; }
  .studio-readout__k { grid-column: 1 / -1; font-size: .75rem; color: var(--text-sub); font-weight: 500; }
  .studio-readout__nums b { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.05; font-weight: 500; color: var(--ink-strong); }
  .studio-readout__nums small { font-size: .8rem; color: var(--text-sub); }
  .studio-view { background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); box-shadow: var(--sh-2); }

  .studio-stage__bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); padding: clamp(14px, 2vw, 24px); pointer-events: none; flex-wrap: wrap; }
  .studio-stage__bottom > * { pointer-events: auto; }
  .studio-cams { display: flex; gap: 4px; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); padding: 4px; border-radius: var(--r-pill); box-shadow: var(--sh-1); }
  .studio-cam { height: 34px; padding-inline: 14px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; color: var(--text-sub); transition: all var(--d-2); }
  .studio-cam[aria-pressed="true"] { background: var(--brown-800); color: var(--ivory-100); }
  .studio-checks-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 14px; border-radius: var(--r-pill); background: var(--good-soft); color: var(--good); font-size: .8125rem; font-weight: 600; box-shadow: var(--sh-1); }
  .studio-checks-pill .icon { width: 16px; height: 16px; }
  .studio-checks-pill.is-warn { background: var(--warn-soft); color: var(--warn); }

  /* 3D 치수 글자 */
  .fit-label { font: 600 12px/1 var(--font-sans); color: var(--brown-900); background: rgba(253, 252, 250, .92); padding: 6px 9px; border-radius: 999px; box-shadow: 0 2px 10px rgba(42,31,22,.12), inset 0 0 0 1px rgba(154,91,46,.35); white-space: nowrap; letter-spacing: -.01em; }
  .fit-label--v { transform: translateX(-56%); }
  .fit-label.is-subtle { color: var(--focus); }
  .fit-label--point { background: var(--brown-800); color: var(--ivory-100); box-shadow: var(--sh-2); }
  .fit-label--floor { background: transparent; box-shadow: none; color: var(--focus); }
  @media (max-width: 640px) { .fit-label { font-size: 10.5px; padding: 4px 7px; } .fit-label--point { display: none; } }

  /* ── Blueprint 공통 스타일 ───────────────────────── */
  :root { --bp-paper: #FBF9F5; --bp-ink: #3A2A1E; --bp-accent: #9A5B2E; --bp-grid: rgba(158,130,108,.12); --bp-grid-strong: rgba(158,130,108,.22); }
  .bp-svg { font-family: var(--font-sans); }
  .bp-svg .bp-line, .bp-svg .bp-heavy, .bp-svg .bp-thin, .bp-svg .bp-hidden, .bp-svg .bp-dim, .bp-svg .bp-ext, .bp-svg .bp-ref, .bp-svg .bp-turn, .bp-svg .bp-chair, .bp-svg .bp-room, .bp-svg .bp-frame, .bp-svg .bp-frame-thin, .bp-svg .bp-body, .bp-svg .bp-accent-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .bp-svg .bp-line { stroke: var(--bp-ink); stroke-width: 1.3; }
  .bp-svg .bp-heavy { stroke: var(--bp-ink); stroke-width: 2; }
  .bp-svg .bp-thin { stroke: var(--bp-ink); stroke-width: .7; opacity: .7; }
  .bp-svg .bp-hidden { stroke: var(--bp-ink); stroke-width: 1; stroke-dasharray: 5 4; opacity: .6; }
  .bp-svg .bp-dim, .bp-svg .bp-ext { stroke: var(--bp-accent); stroke-width: .9; }
  .bp-svg .bp-ext { opacity: .55; }
  .bp-svg .bp-ref { stroke: var(--bp-accent); stroke-width: 1; stroke-dasharray: 2 4; }
  .bp-svg .bp-turn { stroke: var(--bp-accent); stroke-width: 1; stroke-dasharray: 8 5; }
  .bp-svg .bp-chair { stroke: var(--bp-ink); stroke-width: 1; stroke-dasharray: 3 3; }
  .bp-svg .bp-room { stroke: var(--bp-ink); stroke-width: 4; opacity: .25; }
  .bp-svg .bp-frame { stroke: var(--bp-ink); stroke-width: 1.4; }
  .bp-svg .bp-frame-thin { stroke: var(--bp-ink); stroke-width: .6; }
  .bp-svg .bp-body { stroke: var(--bp-ink); stroke-width: 5; opacity: .24; }
  .bp-svg .bp-body-fill { fill: var(--bp-ink); opacity: .1; stroke: none; }
  .bp-svg .bp-accent-line { stroke: var(--bp-accent); stroke-width: 3; opacity: .6; }
  .bp-svg .bp-fill-hatch { fill: url(#bp-hatch); }
  .bp-svg .bp-fill-accent { fill: var(--bp-accent); fill-opacity: .25; }
  .bp-svg .bp-dot { fill: var(--bp-accent); stroke: none; }
  .bp-svg .bp-reach { fill: #C9A06E; fill-opacity: .16; stroke: var(--bp-accent); stroke-width: .8; stroke-dasharray: 2 3; }
  .bp-svg .bp-zone { opacity: .9; }
  .bp-svg text { fill: var(--bp-ink); }
  .bp-svg .bp-label { font-family: var(--font-serif); font-size: 13px; letter-spacing: .22em; font-weight: 600; fill-opacity: .7; }
  .bp-svg .bp-label-ko { font-size: 15px; font-weight: 700; }
  .bp-svg .bp-dimtext { font-size: 13px; font-weight: 700; fill: var(--bp-accent); paint-order: stroke; stroke: var(--bp-paper); stroke-width: 4px; }
  .bp-svg .bp-note { font-size: 12px; font-weight: 500; fill: var(--bp-ink); paint-order: stroke; stroke: var(--bp-paper); stroke-width: 4px; }
  .bp-svg .bp-note--accent { fill: var(--bp-accent); font-weight: 600; }
  .bp-svg .bp-logo { font-family: var(--font-serif); font-size: 30px; letter-spacing: .3em; font-weight: 500; }
  .bp-svg .bp-logo-sub { font-family: var(--font-serif); font-size: 10px; letter-spacing: .24em; }
  .bp-svg .bp-cell-label { font-size: 11px; fill: var(--bp-accent); font-weight: 600; letter-spacing: .02em; }
  .bp-svg .bp-cell { font-size: 15px; font-weight: 600; }
  .bp-svg .bp-cell-sm { font-size: 12px; font-weight: 500; opacity: .75; }

  .is-drawing .bp-svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-inout) forwards; }
  .is-drawing .bp-svg .bp-hidden, .is-drawing .bp-svg .bp-turn, .is-drawing .bp-svg .bp-chair, .is-drawing .bp-svg .bp-ref { stroke-dasharray: 1; }
  .is-drawing .bp-svg text { opacity: 0; animation: fade-in .6s var(--ease-out) 1s forwards; }

  /* ── Result ───────────────────────────────────────── */
  .studio-result { padding-top: clamp(64px, 7vw, 120px); }
  .studio-result__head { display: grid; gap: var(--s-6); margin-bottom: var(--s-9); }
  @media (min-width: 1040px) { .studio-result__head { grid-template-columns: 1fr auto; align-items: end; } }
  .studio-result__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .studio-result__grid { display: grid; gap: var(--s-4); }
  @media (min-width: 900px) { .studio-result__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1280px) { .studio-result__grid { grid-template-columns: 1.1fr 1fr 1.1fr; } .result-card--notes { grid-column: 1 / -1; } }
  .result-card { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 2.4vw, 32px); box-shadow: var(--sh-inset); }
  .result-card__title { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--s-4); }
  .result-card .spec-list__row:last-child { border-bottom: 0; }

  .check-list { display: grid; gap: 2px; }
  .check-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); }
  .check-item__icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
  .is-pass .check-item__icon { background: var(--good-soft); color: var(--good); }
  .is-fail .check-item__icon { background: var(--warn-soft); color: var(--warn); }
  .is-ref .check-item__icon { background: var(--bg-deep); color: var(--text-sub); }
  .check-item__std { display: block; font-size: .72rem; color: var(--text-sub); font-weight: 600; letter-spacing: .02em; }
  .check-item__val { font-family: var(--font-serif); font-size: 1.15rem; font-variant-numeric: lining-nums; }
  .check-list__foot { margin-top: var(--s-4); }

  .formula-list { display: grid; }
  .formula-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .formula-item:last-child { border-bottom: 0; }
  .formula-item__n { font-family: var(--font-serif); color: var(--accent-text); font-size: .95rem; }
  .formula-item__body { display: grid; gap: 2px; font-size: var(--fs-small); }
  .formula-item__body span { color: var(--text-sub); font-size: var(--fs-caption); }
  .formula-item__val { font-size: 1.35rem; white-space: nowrap; }

  .note-list { display: grid; gap: var(--s-3); }
  @media (min-width: 1280px) { .note-list { grid-template-columns: repeat(2, 1fr); } }
  .note-item { padding: 14px 16px 14px 44px; border-radius: var(--r-md); background: var(--bg-alt); font-size: var(--fs-small); position: relative; line-height: 1.65; }
  .note-item::before { content: ""; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; }
  .note-item--warn { background: var(--warn-soft); color: #6b4a16; }
  .note-item--good { background: var(--good-soft); color: #3b5237; }

  .studio-products { margin-top: var(--s-10); display: grid; gap: var(--s-5); }
  .studio-products__list { display: grid; gap: var(--s-3); }
  @media (min-width: 900px) { .studio-products__list { grid-template-columns: repeat(3, 1fr); } }
  .mini-product { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-4); align-items: center; padding: 12px; padding-right: 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-inset); transition: box-shadow var(--d-3), transform var(--d-3) var(--ease-out); }
  .mini-product:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
  .mini-product__media { width: 84px; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--bg-deep); }
  .mini-product__media img { width: 100%; height: 100%; object-fit: cover; }
  .mini-product__body { display: grid; gap: 2px; }
  .mini-product__name { font-weight: 700; }
  .studio-disclaimer { display: flex; gap: 8px; align-items: center; margin-top: var(--s-8); }
  .studio-disclaimer .icon { width: 16px; height: 16px; }

  .studio-print { display: none; }

  /* 모바일 하단 고정 바 */
  .studio-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 8px 8px 8px 20px; border-radius: var(--r-pill); background: var(--brown-900); color: var(--ivory-100); box-shadow: var(--sh-3); transition: transform var(--d-4) var(--ease-out), opacity var(--d-3); }
  .studio-dock .btn--primary { background: var(--ivory-100); color: var(--brown-900); }
  .studio-dock__nums { font-weight: 600; font-size: .9375rem; }
  .studio-dock.is-hidden { transform: translateY(140%); opacity: 0; }
  @media (min-width: 1100px) { .studio-dock { display: none; } }

  @media (max-width: 1099px) {
    .studio__shell { padding-bottom: 84px; }
    .studio-stage { order: 1; height: min(62svh, 560px); }
    .studio-panel { order: 2; }
  }
  @media (max-width: 520px) {
    .studio-stage__top { flex-direction: column; align-items: stretch; }
    .studio-view { align-self: flex-end; position: absolute; right: 14px; top: 14px; }
    .studio-readout { align-self: flex-start; padding: 10px 14px; }
    .studio-steps__label { font-size: .7rem; }
    .fit-choice .choice__body { min-height: 128px; }
    .studio-cams { overflow-x: auto; }
  }

  @media (min-width: 1100px) {
    .studio__shell { grid-template-columns: minmax(380px, 440px) 1fr; gap: var(--s-6); }
    .studio-stage { position: sticky; top: calc(var(--header-h) + 12px); height: calc(100svh - var(--header-h) - 28px); min-height: 560px; order: 2; }
    .studio-panel { order: 1; }
  }

  /* 인쇄: 도면과 치수표만 */
  @media print {
    @page { size: A4 landscape; margin: 10mm; }
    body.page-studio > *:not(main), .page-studio .studio-hero, .page-studio .studio__shell, .page-studio .studio-result__actions,
    .page-studio .studio-products, .page-studio .studio-dock, .page-studio .site-footer, .page-studio .result-card--notes { display: none !important; }
    .page-studio .studio-print { display: block; break-after: page; }
    .page-studio .studio-print .bp-svg { width: 100%; height: auto; }
    .page-studio .studio-result { padding: 0; }
    .page-studio .result-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  }
}
@layer pages {
  .studio-confirm { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: var(--s-12); padding-top: var(--s-10); border-top: 1px solid var(--line); }
  @media (min-width: 960px) { .studio-confirm { grid-template-columns: 1.1fr .9fr; } }
  .studio-confirm__media { aspect-ratio: 3 / 2; border-radius: var(--r-md); }
  .studio-confirm__copy { display: grid; gap: var(--s-5); justify-items: start; }
}
@layer pages {
  /* 치수 입력: 키만 / 직접 */
  .fit-mode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .fit-mode__item .choice__body { padding: 14px 16px; }
  .fit-mode__item .choice__title { flex-wrap: wrap; row-gap: 4px; }
  .fit-mode__tag { height: 22px; padding-inline: 8px; font-size: .72rem; }
  .fit-measure[data-mode="simple"] .fit-detail { display: none; }
  .fit-measure[data-mode="detail"] .fit-estimate, .fit-measure[data-mode="detail"] .fit-presets { display: none; }
  .fit-simple, .fit-detail { display: grid; gap: var(--s-4); }
  .fit-field--hero { background: var(--bg-alt); }
  .fit-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .fit-preset { min-height: 36px; padding-inline: 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: .8125rem; font-weight: 600; color: var(--text-sub); transition: all var(--d-2); }
  .fit-preset:hover { border-color: var(--brown-800); color: var(--ink); }
  .fit-estimate { padding: var(--s-5); border-radius: var(--r-lg); box-shadow: var(--sh-inset); display: grid; gap: var(--s-3); }
  .fit-estimate__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-small); }
  .fit-estimate__title .icon { width: 16px; height: 16px; color: var(--accent-text); }
  .fit-estimate__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); }
  .fit-estimate__list > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); }
  .fit-estimate__list dt { color: var(--text-sub); }
  .fit-estimate__list dd { margin: 0; font-weight: 600; }
  .fit-estimate__list .t-num { font-size: 1.2rem; font-weight: 500; margin-right: 2px; }
  .fit-estimate__edit { justify-self: start; font-size: var(--fs-small); }
  .fit-estimate__edit .icon { width: 15px; height: 15px; }
  .fit-howto { font-size: var(--fs-caption); }
  .fit-howto summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; font-weight: 600; color: var(--accent-text); list-style: none; }
  .fit-howto summary::-webkit-details-marker { display: none; }
  .fit-howto summary .icon { width: 15px; height: 15px; }
  .fit-howto ol { margin: 4px 0 2px; padding: 12px 14px 12px 32px; border-radius: var(--r-md); background: var(--surface); color: var(--text); line-height: 1.6; display: grid; gap: 4px; }
  .fit-tip { align-items: flex-start; }
  .fit-arm { width: 34px; height: 34px; margin: 2px auto 2px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .fit-arm__chair { stroke: currentColor; stroke-width: 2; opacity: .45; }
  .fit-arm__rest { stroke: var(--focus); stroke-width: 3.2; }
  .fit-arm__rest.is-dashed { stroke-dasharray: 4 3; }
  .fit-arm__post { stroke: var(--focus); stroke-width: 1.6; }
  .fit-seg__item span { flex-direction: column; gap: 2px; padding-block: 8px; }
  @media (max-width: 420px) { .fit-estimate__list { grid-template-columns: 1fr; } .fit-mode { grid-template-columns: 1fr; } }
}
@layer pages {
  .fit-presets { display: grid; grid-template-columns: repeat(4, 1fr); }
  .studio-step__opt { align-self: center; margin-left: 2px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--bg-deep); font-size: .72rem; font-weight: 600; color: var(--text-sub); letter-spacing: 0; }
  .choice__title { line-height: 1.4; }
}
@layer pages {
  .fit-seg { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
  .fit-seg__item span { font-size: .8125rem; padding-inline: 4px; }
}
@layer pages {
  .studio-cam { height: 40px; min-width: 44px; }
  .fit-preset { min-height: 44px; }
  .studio-steps__label { font-size: .75rem; }
}