/* HAIRFIT AI — 납품본 디자인 (원본 기능 v16 + 승인된 시제품 디자인)
   색, 글꼴, 간격, 움직임 값은 모두 :root 에 모아 두었다. 디자인을 바꿀 때는 여기부터 고친다.
   앞부분은 시제품 디자인 그대로, 맨 아래 「원본 화면 요소」 부분이 원본 사이트의 요소(id, class)에 같은 디자인을 입힌다. */

:root {
  /* 색 (지시서의 무채색 6단계) */
  --c-black: #0D0D0D;
  --c-charcoal: #171717;
  --c-dark: #292929;
  --c-mid: #777777;
  --c-silver: #BFC0C2;
  --c-white: #F5F5F5;

  /* 글꼴 */
  --f-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --f-ui: "Inter Tight", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* 간격 */
  --gutter: clamp(20px, 3.2vw, 48px);
  --header-h: 72px;

  /* 움직임 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-hover: 420ms;

  /* 중앙 고속 전환 프레임 크기 */
  --frame-w: clamp(220px, 22vw, 360px);
}
@media (max-width: 720px) {
  :root { --frame-w: min(54vw, 300px); --header-h: 60px; }
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;              /* 두 화면 모두 한 화면 안에서 끝난다 */
}
body.is-chosen, html.rm body, html:not(.js) body { overflow: auto; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--c-white); outline-offset: 4px; }

/* ---------- 헤더 ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.logo {
  font-family: var(--f-ui); font-weight: 600; font-size: 15px;
  letter-spacing: 0.28em; color: var(--c-white); text-decoration: none;
}
.logo span { font-weight: 400; color: var(--c-silver); margin-left: 0.5em; letter-spacing: 0.2em; }
.header-note {
  font-size: 12px; letter-spacing: 0.08em; color: var(--c-silver);
}
@media (max-width: 720px) { .header-note { display: none; } }

/* ---------- 화면 1: 인트로 ---------- */
.intro {
  position: fixed; inset: 0; z-index: 20;
  background: var(--c-black);
  overflow: hidden;
}
.intro-hero, .intro-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.intro-hero img { object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }
.intro-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(13,13,13,0) 0%, rgba(13,13,13,.55) 70%, rgba(13,13,13,.85) 100%),
    linear-gradient(to bottom, rgba(13,13,13,.55), rgba(13,13,13,0) 22%, rgba(13,13,13,0) 70%, rgba(13,13,13,.7));
}

/* 중앙 고정 프레임: 위치와 크기는 움직이지 않고 안의 사진만 바뀐다 */
.cut-frame {
  position: absolute; left: 50%; top: 50%;
  width: var(--frame-w);
  transform: translate(-50%, -50%);
}
.cut-stack {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--c-charcoal);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.cut-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; visibility: hidden;
}
.cut-stack img.on { visibility: visible; }
.cut-label {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-silver); font-variant-numeric: tabular-nums;
}

.intro-caption {
  position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.01em;
  display: flex; flex-direction: column;
}
.intro-caption span:last-child { padding-left: 1.2em; }

.skip {
  position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-silver);
  transition: color 200ms ease;
}
.skip span { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .skip:hover { color: var(--c-white); }
  .skip:hover span { transform: translateX(4px); }
}

/* 스크립트 시작 전에는 인트로 요소를 숨겨 깜빡임을 막는다 */
.js .intro-hero img, .js .intro-shade, .js .cut-frame, .js .intro-caption, .js .skip, .js .site-header { opacity: 0; }
.intro.is-done { pointer-events: none; }

/* ---------- 화면 2: 남성 / 여성 선택 ---------- */
.choose {
  position: relative; min-height: 100dvh;
  background: var(--c-charcoal);
  display: flex; flex-direction: column;
}
.js .choose { visibility: hidden; }
.js .choose.is-ready { visibility: visible; }

/* 선택 화면 제목: 화면에는 안 보이고 화면 낭독기만 읽는다 */
.choose-title {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.panels {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}
.gpanel {
  position: relative; overflow: hidden; text-align: left;
  background: var(--c-black); isolation: isolate;
}
.gpanel + .gpanel { border-left: 1px solid var(--c-dark); }
.gpanel img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; object-position: 50% 25%;
  filter: grayscale(1) brightness(.62);
  transform: scale(1.001);
  transition: transform 900ms var(--ease-out), filter var(--t-hover) ease;
}
.gpanel::after { /* 글자가 읽히도록 아래쪽만 어둡게 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13,13,13,.86) 0%, rgba(13,13,13,0) 55%);
}
.panel-text {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--t-hover) var(--ease-out);
}
.panel-no { font-size: 11px; letter-spacing: 0.22em; color: var(--c-silver); font-variant-numeric: tabular-nums; }
.panel-en {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 6.6vw, 112px); line-height: .9; letter-spacing: -0.02em;
}
.panel-ko { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--c-silver); }
.arrow {
  display: inline-block; opacity: 0; transform: translateX(-8px);
  transition: opacity 240ms ease, transform var(--t-hover) var(--ease-out);
}
.panel-state {
  position: absolute; top: calc(var(--header-h) + 64px); left: var(--gutter);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--c-silver); color: var(--c-white);
  opacity: 0; transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms var(--ease-out);
}

/* 마우스를 올렸을 때: 터치 기기의 가짜 hover 를 막으려고 포인터 기기에서만 */
@media (hover: hover) and (pointer: fine) {
  .gpanel:hover img { transform: scale(1.04); filter: grayscale(.85) brightness(.82); }
  .gpanel:hover .panel-text { transform: translateY(-10px); }
  .gpanel:hover .arrow { opacity: 1; transform: none; }
  .panels:hover .gpanel:not(:hover) img { filter: grayscale(1) brightness(.4); }
}
.gpanel:focus-visible { outline-offset: -6px; }
.gpanel:focus-visible .arrow { opacity: 1; transform: none; }

/* 선택된 상태 */
.gpanel[aria-pressed="true"] img { filter: grayscale(.6) brightness(.9); transform: scale(1.04); }
.gpanel[aria-pressed="true"] .panel-state { opacity: 1; transform: none; }
.gpanel[aria-pressed="true"] .arrow { opacity: 1; transform: none; }
.gpanel[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(245, 245, 245, .7);
}
.panels.has-choice .gpanel[aria-pressed="false"] img { filter: grayscale(1) brightness(.32); }

.choose-bar {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 25;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 14px 12px 20px;
  background: rgba(23, 23, 23, .86); border: 1px solid var(--c-dark);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 240ms ease, transform 240ms var(--ease-out);
  white-space: nowrap;
}
.choose-bar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.choose-bar p { font-size: 14px; }
.link-btn {
  min-height: 36px; padding: 0 12px; font-size: 13px; color: var(--c-silver);
  border: 1px solid var(--c-dark);
  transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .link-btn:hover { color: var(--c-white); border-color: var(--c-mid); } }

/* 휴대폰: 위아래 두 칸, 한 화면에 둘 다 보이게 */
@media (max-width: 720px) {
  .panels { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: 100dvh; }
  .gpanel + .gpanel { border-left: 0; border-top: 1px solid var(--c-dark); }
  .gpanel img { object-position: 50% 22%; }
  .panel-en { font-size: clamp(38px, 11vw, 56px); }
  .panel-text { gap: 6px; bottom: 18px; }
  .gpanel:first-child .panel-text { bottom: 18px; }
  .gpanel:first-child { padding-top: calc(var(--header-h) + 34px); }
  .panel-state { top: 16px; left: auto; right: var(--gutter); }
  .gpanel:first-child .panel-state { top: calc(var(--header-h) + 52px); }
  .arrow { opacity: 1; transform: none; } /* 터치에서는 늘 보이게 */
  .choose-bar { left: 16px; right: 16px; transform: translateY(12px); justify-content: space-between; }
  .choose-bar.show { transform: none; }
}

/* 애니메이션 감소 설정과 스크립트 없음: 인트로를 건너뛰고 선택 화면만 */
html.rm .intro, html:not(.js) .intro { display: none; }
html.rm .site-header, html:not(.js) .site-header { opacity: 1; }
html.rm .choose, html:not(.js) .choose { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .gpanel img, .panel-text, .arrow, .panel-state, .choose-bar { transition-property: opacity, filter; }
  .gpanel:hover img, .gpanel[aria-pressed="true"] img { transform: none; }
  .gpanel:hover .panel-text { transform: none; }
}

/* ---------- 화면 3: 질문 ---------- */
/* 왼쪽: 성별 이름과 큰 단계 번호 (글자만, 사진 없음), 오른쪽: 질문 하나와 이전/다음 */
:root {
  --flow-pad: clamp(24px, 5.2vw, 96px);   /* 질문 칸 좌우 여백 */
  --flow-max: 680px;                       /* 질문 칸 최대 너비 */
  --opt-h: 64px;                           /* 선택지 한 줄 높이 */
  --t-step: 340ms;                         /* 질문이 바뀌는 시간 (flow.js 와 같게) */
}
@media (max-width: 720px) { :root { --flow-pad: 16px; --opt-h: 56px; } }

body.in-flow { overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0;
}

.flow {
  position: fixed; inset: 0; z-index: 26;   /* 선택 화면 하단 안내(25) 위, 헤더(30) 아래 */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--c-charcoal);
}
.flow[hidden] { display: none; }
.flow button, .flow label { -webkit-tap-highlight-color: transparent; }  /* 눌렀을 때 파란 번쩍임 없애기 */

.flow-aside {
  position: relative; overflow: hidden; background: var(--c-black);
  border-right: 1px solid var(--c-dark);
}
.flow-title {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 40px);
  font-family: var(--f-display); font-style: italic; font-weight: 400; text-transform: none;
  font-size: clamp(44px, 4.6vw, 76px); line-height: 1; letter-spacing: -0.01em; color: var(--c-silver);
}
.flow-aside-text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 8px); }
.flow-en {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-silver);
}
.flow-no {
  display: flex; align-items: baseline; gap: 14px; margin: 10px 0 14px;
  font-family: var(--f-display); font-weight: 400; line-height: .82; letter-spacing: -0.03em;
  font-size: clamp(110px, 12vw, 190px); font-variant-numeric: lining-nums;
}
.flow-of { font-family: var(--f-ui); font-size: 15px; letter-spacing: 0.12em; color: var(--c-silver); }

.flow-body { display: flex; flex-direction: column; min-width: 0; height: 100dvh; }
.flow-top { padding: calc(var(--header-h) + 12px) var(--flow-pad) 0; }
.flow-top-row, .flow-line, .flow-form, .flow-nav > * { max-width: var(--flow-max); }
.flow-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.flow-top .link-btn { min-height: 44px; }
.flow-count { font-size: 13px; letter-spacing: 0.08em; color: var(--c-silver); font-variant-numeric: tabular-nums; }
.flow-line { position: relative; height: 1px; margin-top: 12px; background: var(--c-dark); overflow: hidden; }
.flow-line span {
  position: absolute; inset: 0; background: var(--c-white);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);
}

.flow-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(32px, 6vh, 64px) var(--flow-pad) 40px; }
/* 위로 올라간 글자가 진행선 아래에서 잘려 보이지 않게 위쪽만 흐리게 */
.flow-scroll { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.flow-form { margin: 0; }

/* 질문 머리 */
.q-kicker {
  display: flex; gap: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-silver); font-variant-numeric: tabular-nums;
}
.q-title {
  margin-top: 16px; font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.28;
  letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere;
}
.q-title:focus { outline: none; }
.q-helper { margin-top: 14px; max-width: 34em; font-size: 15px; line-height: 1.65; color: var(--c-silver); word-break: keep-all; }
.q-tag {
  display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 20px; padding: 8px 12px;
  border: 1px solid var(--c-mid); font-size: 13px;
}
.q-tag span { color: var(--c-silver); }
.q-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 36px;
  font-size: 13px; color: var(--c-silver); word-break: keep-all;
}
.lock { flex: none; width: 9px; height: 7px; border: 1px solid var(--c-silver); position: relative; top: 2px; }
.lock::before {
  content: ""; position: absolute; left: 1px; bottom: 100%; width: 5px; height: 5px;
  border: 1px solid var(--c-silver); border-bottom: 0; border-radius: 3px 3px 0 0;
}

/* 선택지: 가는 선으로 나눈 목록. 고르면 흰 바탕으로 뒤집힌다 */
.opts { margin-top: 36px; border-bottom: 1px solid var(--c-dark); }
.opt {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 8px;
  min-height: var(--opt-h); padding: 10px 18px 10px 16px;
  border-top: 1px solid var(--c-dark); cursor: pointer;
  font-size: 17px; line-height: 1.4; color: var(--c-silver); word-break: keep-all;
  transition: background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.opt-no { font-size: 11px; letter-spacing: 0.16em; color: var(--c-mid); font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.opt-mark {
  width: 14px; height: 14px; border: 1px solid var(--c-mid); border-radius: 50%; justify-self: end;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.opt-check .opt-mark { border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { color: var(--c-white); background: rgba(245,245,245,.04); }
  .opt:hover .opt-mark { border-color: var(--c-silver); }
}
.opt:active { background: rgba(245,245,245,.07); }
.opt.is-on { background: var(--c-white); color: var(--c-black); border-top-color: var(--c-white); }
.opt.is-on + .opt { border-top-color: var(--c-white); }
.opt.is-on .opt-no { color: var(--c-dark); }
.opt.is-on .opt-mark { border-color: var(--c-black); background: var(--c-black); box-shadow: inset 0 0 0 3px var(--c-white); }
.opt-check.is-on .opt-mark { box-shadow: none; }
.opt:has(input:focus-visible) { outline: 1px solid var(--c-white); outline-offset: 3px; z-index: 1; }

/* 묶음 질문 (시술 이력, 컬러 조건) */
.group { border: 0; padding: 0; margin: 40px 0 0; min-width: 0; }
.group + .group { margin-top: 44px; }
.group-label { display: flex; gap: 12px; padding: 0; font-size: 15px; font-weight: 500; }
.group-label span { font-size: 11px; letter-spacing: 0.2em; color: var(--c-silver); padding-top: 3px; }
.group .opts { margin-top: 14px; }

/* 이전 / 다음 */
.flow-nav {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--flow-pad) calc(18px + env(safe-area-inset-bottom));
  padding-right: max(var(--flow-pad), calc(100% - var(--flow-max) - var(--flow-pad)));
  border-top: 1px solid var(--c-dark); background: var(--c-charcoal);
}
.flow-nav > * { max-width: none; }
.nav-prev {
  min-height: 48px; padding: 0 6px; font-size: 14px; color: var(--c-silver);
  display: inline-flex; align-items: center; gap: 8px; transition: color 200ms ease;
}
.nav-next {
  min-height: 52px; padding: 0 28px; margin-left: auto;
  background: var(--c-white); color: var(--c-black); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.nav-next span { transition: transform 200ms var(--ease-out); }
.nav-next:active { transform: scale(.98); }
.nav-next[aria-disabled="true"] { background: var(--c-dark); color: var(--c-silver); cursor: default; }
.nav-next[aria-disabled="true"]:active { transform: none; }
.nav-next.is-submit { padding: 0 32px; letter-spacing: 0.01em; }
@media (hover: hover) and (pointer: fine) {
  .nav-prev:hover { color: var(--c-white); }
  .nav-next:not([aria-disabled="true"]):hover span { transform: translateX(4px); }
}
.flow-hint { font-size: 13px; color: var(--c-white); text-align: right; }
.flow-hint:empty { display: none; }
.flow[data-step="done"] .flow-nav { display: none; }

/* 사진 화면 */
.photo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; margin-top: 36px; align-items: start; }
.photo-frame {
  aspect-ratio: 4 / 5; background: var(--c-black); border: 1px solid var(--c-dark);
  display: grid; place-items: center; overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty { font-family: var(--f-display); font-size: 28px; color: var(--c-mid); }
.photo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--c-silver); color: var(--c-white); font-size: 15px; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: var(--c-white); color: var(--c-black); } }
.photo-pick input:focus-visible + .btn-line { outline: 1px solid var(--c-white); outline-offset: 4px; }
.photo-pick .link-btn { min-height: 44px; }
.photo-meta { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--c-silver); }
.photo-meta span { letter-spacing: 0.04em; }
.photo-file { color: var(--c-white); overflow-wrap: anywhere; }
.photo-error { margin-top: 10px; font-size: 14px; color: var(--c-white); padding-left: 12px; border-left: 2px solid var(--c-white); }
.photo-error:empty { display: none; }
.photo-trial { margin-top: 32px; padding: 18px 0 0; border-top: 1px solid var(--c-dark); font-size: 14px; line-height: 1.7; color: var(--c-silver); word-break: keep-all; }
.photo-trial-title { color: var(--c-white); font-weight: 500; margin-bottom: 4px; }
.consent {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start;
  margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--c-dark); border-bottom: 1px solid var(--c-dark);
  cursor: pointer; word-break: keep-all;
}
.consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.consent-box { width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--c-silver); position: relative; }
.consent input:checked + .consent-box { background: var(--c-white); border-color: var(--c-white); }
.consent input:checked + .consent-box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--c-black); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.consent input:focus-visible + .consent-box { outline: 1px solid var(--c-white); outline-offset: 3px; }
.consent strong { display: block; font-weight: 500; font-size: 15px; }
.consent small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--c-silver); }
.photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.btn-solid {
  min-height: 52px; padding: 0 26px; background: var(--c-white); color: var(--c-black); font-size: 15px; font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn-solid[aria-disabled="true"] { background: var(--c-dark); color: var(--c-silver); cursor: default; }
.photo-need { font-size: 13px; color: var(--c-silver); }
.photo-result { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--c-silver); }
.photo-result-k { font-size: 11px; letter-spacing: 0.22em; color: var(--c-silver); }
.photo-result-v { margin: 6px 0 16px; font-size: 24px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.photo-result-v span { font-size: 13px; font-weight: 400; color: var(--c-silver); padding: 3px 8px; border: 1px dashed var(--c-mid); }

/* 확인 화면 */
.rv-gender { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; }
.rv-list { list-style: none; padding: 0; margin-top: 18px; border-bottom: 1px solid var(--c-dark); }
.rv-row {
  display: grid; grid-template-columns: 36px minmax(0, 11em) minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--c-dark); font-size: 15px; word-break: keep-all;
}
.rv-no { font-size: 11px; letter-spacing: 0.16em; color: var(--c-mid); font-variant-numeric: tabular-nums; }
.rv-q { color: var(--c-silver); font-size: 14px; }
.rv-a { line-height: 1.55; overflow-wrap: anywhere; }
.rv-sub { display: inline-block; min-width: 7.5em; margin-right: 8px; font-size: 12px; color: var(--c-silver); }
.rv-edit {
  min-height: 44px; min-width: 56px; padding: 0 12px; font-size: 13px; color: var(--c-silver);
  border: 1px solid var(--c-dark); transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .rv-edit:hover { color: var(--c-white); border-color: var(--c-mid); } }
.rv-gender .rv-edit { min-height: 36px; }

.done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; }
.done-actions .link-btn { min-height: 48px; padding: 0 18px; }

/* 휴대폰: 한 칸, 글자만. 이전/다음은 화면 아래 고정 */
@media (max-width: 720px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-aside { display: none; }
  .flow-top { padding-top: calc(var(--header-h) + 4px); }
  .flow-line { margin-top: 10px; }
  .flow-scroll { padding-top: 24px; padding-bottom: 28px; }
  .q-title { font-size: clamp(24px, 7vw, 28px); margin-top: 12px; }
  .q-helper { font-size: 14px; }
  .opts { margin-top: 26px; }
  .opt { font-size: 16px; grid-template-columns: 34px minmax(0, 1fr) 16px; padding: 8px 14px 8px 12px; }
  .group { margin-top: 30px; }
  .group + .group { margin-top: 34px; }
  .flow-nav { padding: 10px var(--flow-pad) calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .nav-prev { min-height: 52px; padding: 0 12px 0 2px; flex: none; }
  .nav-next { flex: 1; padding: 0 16px; }
  .nav-next.is-submit { padding: 0 16px; }
  .flow-hint { position: absolute; left: var(--flow-pad); right: var(--flow-pad); bottom: 100%; padding: 8px 0; text-align: left; background: var(--c-charcoal); }
  .photo { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; margin-top: 26px; }
  .btn-line { padding: 0 16px; }
  .photo-meta { font-size: 13px; }
  .btn-solid { width: 100%; }
  .rv-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n q e" "n a e"; padding: 10px 0; }
  .rv-no { grid-area: n; align-self: start; padding-top: 3px; }
  .rv-q { grid-area: q; font-size: 12px; }
  .rv-a { grid-area: a; }
  .rv-edit { grid-area: e; }
  .rv-sub { display: block; min-width: 0; margin: 4px 0 0; }
}
@media (max-width: 370px) {
  .photo { grid-template-columns: minmax(0, 1fr); }
  .photo-frame { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line span, .nav-next, .nav-next span { transition-property: opacity, background-color, color; }
  .nav-next:active { transform: none; }
}

/* ---------- 화면 4~6: 결과(02), 스타일 둘러보기(03), 상담 준비(04) ----------
   가는 구분선과 테두리 상자는 쓰지 않는다 (2026-10-18 사용자 결정).
   영역은 바탕 톤(검정 → 차콜 → 짙은 회색)과 넉넉한 여백으로만 나눈다. 선택 상태는 흰 바탕으로 뒤집는다. */
:root {
  --sec-pad-y: clamp(80px, 10vw, 168px);
  --sec-max: 1360px;
  --t-reveal: 420ms;
}
[hidden] { display: none !important; }

body.in-results { height: auto; overflow: visible; }
html:has(body.in-results) { scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html:has(body.in-results) { scroll-behavior: smooth; } }

/* 머리글: 결과 화면에서는 바탕을 깔고 02/03/04 이동을 보여 준다 */
.header-nav { display: none; }
body.in-results .site-header {
  background: rgba(13, 13, 13, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.in-results .header-note { display: none; }
body.in-results .header-nav { display: flex; gap: 4px; }
.header-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  font-size: 13px; color: var(--c-silver); text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}
.hn-no { font-family: var(--f-display); font-size: 15px; color: var(--c-white); font-variant-numeric: lining-nums; }
.hn-count {
  min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center;
  background: var(--c-dark); color: var(--c-silver); font-size: 12px; font-variant-numeric: tabular-nums;
  transition: background-color 240ms ease, color 240ms ease;
}
.hn-count.has { background: var(--c-white); color: var(--c-black); }
@media (hover: hover) and (pointer: fine) { .header-nav a:hover { color: var(--c-white); background: var(--c-charcoal); } }
@media (max-width: 720px) {
  body.in-results .header-nav { gap: 0; margin-right: -8px; }
  .header-nav a { padding: 0 8px; gap: 5px; font-size: 12px; }
  .hn-no { font-size: 13px; }
}
@media (max-width: 380px) { .hn-label { display: none; } }

.after :focus-visible, .header-nav :focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
.after button, .after label { -webkit-tap-highlight-color: transparent; }

/* 영역 공통 */
.sec {
  --bg: var(--c-black); --s1: var(--c-charcoal); --s2: var(--c-dark);
  background: var(--bg);
  padding: calc(var(--sec-pad-y) + var(--header-h) * .4) max(var(--gutter), calc((100% - var(--sec-max)) / 2)) var(--sec-pad-y);
  scroll-margin-top: 0;
}
.sec-library { --bg: var(--c-charcoal); --s1: var(--c-black); --s2: var(--c-dark); }
.sec-consult { --bg: var(--c-dark); --s1: var(--c-black); --s2: var(--c-charcoal); }

.sec-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(24px, 4vw, 64px); align-items: start; }
.sec-no {
  font-family: var(--f-display); font-weight: 400; line-height: .78; letter-spacing: -0.04em;
  font-size: clamp(110px, 15vw, 236px); color: var(--c-white); font-variant-numeric: lining-nums;
}
.sec-kicker { font-size: 12px; letter-spacing: 0.18em; color: var(--c-silver); }
.sec-title {
  margin-top: 18px; font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.18; letter-spacing: -0.025em;
  word-break: keep-all; max-width: 15em;
}
.sec-title:focus { outline: none; }
.sec-sub { margin-top: 18px; max-width: 38em; font-size: 16px; line-height: 1.7; color: var(--c-silver); word-break: keep-all; }
.sec-tools { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* 버튼 */
.after .btn-solid { min-height: 52px; padding: 0 26px; }
.btn-tone {
  min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--s1); color: var(--c-white); font-size: 15px;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.btn-tone span { transition: transform 200ms var(--ease-out); }
.btn-tone:active, .after .btn-solid:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn-tone:hover { background: var(--s2); }
  .btn-tone:hover span { transform: translateX(-3px); }
  .after .btn-solid:not([aria-disabled="true"]):hover { background: var(--c-silver); }
}
.sec-consult .btn-tone { background: var(--c-black); }
@media (hover: hover) and (pointer: fine) { .sec-consult .btn-tone:hover { background: var(--c-charcoal); } }

.status { font-size: 14px; line-height: 1.6; color: var(--c-silver); word-break: keep-all; }
.status:empty { display: none; }

/* 입력한 조건 묶음과 시제품 안내 */
.profile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px;
  background: var(--s1); font-size: 13px; color: var(--c-white); word-break: keep-all;
}
.chip b { font-weight: 400; color: var(--c-silver); font-size: 12px; }
.demo-note {
  margin-top: 16px; display: inline-block; padding: 8px 12px;
  background: var(--s2); color: var(--c-silver); font-size: 12px; line-height: 1.6; word-break: keep-all;
}

.block-title {
  display: flex; align-items: baseline; gap: 16px; margin-top: clamp(72px, 9vw, 128px);
  font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.015em;
}
.block-en { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.25em; color: var(--c-silver); }
.block-sub { margin-top: 14px; max-width: 44em; font-size: 15px; line-height: 1.7; color: var(--c-silver); word-break: keep-all; }

/* 사진 공통: 흑백, 마우스를 올리면 살짝 밝아지고 커진다 */
.card-photo, .ccard-photo, .slot-photo { position: relative; overflow: hidden; background: var(--s1); }
.card-photo { aspect-ratio: 4 / 5; }
.card-photo img, .ccard-photo img, .slot-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.04) brightness(.86);
  transition: transform 600ms var(--ease-out), filter 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-photo img, .lcard:hover .card-photo img, .ccard:hover .ccard-photo img { transform: scale(1.035); filter: grayscale(1) contrast(1.04) brightness(1); }
}

/* 02 컷 추천 카드: 01 은 크게, 나머지는 4칸 */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px) clamp(16px, 2vw, 28px); margin-top: 36px; }
.card { min-width: 0; display: flex; flex-direction: column; }
.card-body { display: flex; flex-direction: column; padding-top: 18px; flex: 1; min-width: 0; }
.card-rank {
  position: absolute; left: 14px; bottom: 8px; z-index: 1;
  font-family: var(--f-display); font-size: clamp(54px, 5vw, 76px); line-height: 1; letter-spacing: -0.03em;
  color: var(--c-white); text-shadow: 0 2px 24px rgba(0,0,0,.45); font-variant-numeric: lining-nums;
}
.card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,.6), rgba(13,13,13,0) 42%); pointer-events: none; }
.card-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-silver); }
.card-meta span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-name { margin-top: 10px; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; word-break: keep-all; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags li { padding: 5px 9px; background: var(--s1); font-size: 12px; color: var(--c-silver); }
.reasons { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--c-silver); word-break: keep-all; }
.card-note { margin-top: 12px; font-size: 13px; line-height: 1.65; color: var(--c-silver); word-break: keep-all; }
.card-note b { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; color: var(--c-white); margin-bottom: 2px; }

.pick {
  margin-top: auto; min-height: 48px; width: 100%; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--s2); color: var(--c-white); font-size: 14px; font-weight: 500;
  transition: background-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out);
}
.card-body > .pick { margin-top: 20px; }
.lcard .card-body > .pick, .card:not(.card-lead) .card-body > .pick { margin-top: auto; }
.card:not(.card-lead) .reasons + .card-note, .lcard .tags { margin-bottom: 18px; }
.pick:active { transform: scale(.98); }
.pick[aria-pressed="true"] { background: var(--c-white); color: var(--c-black); }
@media (hover: hover) and (pointer: fine) {
  .pick[aria-pressed="false"]:hover { background: var(--c-mid); }
}
.pick-msg { font-size: 13px; line-height: 1.55; color: var(--c-white); word-break: keep-all; }
.pick-msg:not(:empty) { margin-top: 8px; padding: 9px 12px; background: var(--s2); }

.card-lead {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px); align-items: end;
}
.card-lead .card-rank { display: none; }
.card-lead .card-photo::after { display: none; }
.card-lead .card-body { padding: 0 0 8px; max-width: 560px; }
.card-lead .card-meta { justify-content: flex-start; gap: 18px; }
.card-lead .card-body::before {
  content: "01"; display: block; margin-bottom: 18px;
  font-family: var(--f-display); font-size: clamp(120px, 13vw, 200px); line-height: .78; letter-spacing: -0.04em; font-variant-numeric: lining-nums;
}
.card-lead .card-name { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; letter-spacing: -0.025em; margin-top: 14px; }
.card-lead .reasons { font-size: 16px; margin-top: 20px; }
.card-lead .card-note { font-size: 14px; margin-top: 16px; }
.card-lead .pick { width: auto; align-self: flex-start; min-height: 52px; padding: 0 28px; font-size: 15px; margin-top: 28px; }

/* 염색 색상: 흑백 사진 위에 색을 입히고 큰 색상칩을 둔다 */
.color-notes { margin-top: 10px; max-width: 44em; font-size: 13px; line-height: 1.7; color: var(--c-silver); word-break: keep-all; }
.color-notes:empty { display: none; }
.color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 32px; }
.ccard { display: flex; flex-direction: column; min-width: 0; }
.ccard-photo { aspect-ratio: 4 / 5; }
.ccard-tint { position: absolute; inset: 0; mix-blend-mode: color; opacity: .9; pointer-events: none; }
.ccard-chip { position: absolute; right: 0; bottom: 0; width: 38%; aspect-ratio: 1; }
.ccard-no {
  position: absolute; left: 14px; top: 10px; font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--c-white);
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.ccard-desc { margin: 10px 0 18px; font-size: 13px; line-height: 1.65; color: var(--c-silver); word-break: keep-all; }

.res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; margin-top: clamp(64px, 8vw, 112px); }
.res-actions .status { flex-basis: 100%; }
.res-aside { margin-top: 28px; max-width: 44em; font-size: 14px; line-height: 1.7; color: var(--c-silver); word-break: keep-all; }
.copy-fallback { display: block; width: 100%; min-height: 160px; margin-top: 10px; padding: 14px; background: var(--s1); color: var(--c-white); border: 0; font: 13px/1.6 var(--f-ui); }

/* 03 둘러보기 */
.lib-controls { display: grid; grid-template-columns: auto minmax(0, 420px) 1fr; align-items: end; gap: 16px 20px; margin-top: clamp(56px, 6vw, 88px); }
.seg { display: inline-flex; background: var(--s1); padding: 4px; }
.seg button {
  min-height: 48px; min-width: 96px; padding: 0 22px; font-size: 15px; color: var(--c-silver);
  transition: background-color 220ms ease, color 220ms ease;
}
.seg button[aria-pressed="true"] { background: var(--c-white); color: var(--c-black); }
@media (hover: hover) and (pointer: fine) { .seg button[aria-pressed="false"]:hover { color: var(--c-white); background: var(--s2); } }
.search { display: grid; gap: 8px; }
.search-label { font-size: 12px; letter-spacing: 0.08em; color: var(--c-silver); }
.search input {
  width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: 0;
  background: var(--s1); color: var(--c-white); font: 16px var(--f-ui);
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--c-mid); }
.search input:focus { outline: 2px solid var(--c-white); outline-offset: 2px; }
.lib-count { justify-self: end; font-size: 13px; color: var(--c-silver); font-variant-numeric: tabular-nums; }

.lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(14px, 1.6vw, 24px); margin-top: 36px; }
.lcard { display: flex; flex-direction: column; min-width: 0; }
.lcard-no { position: absolute; left: 12px; top: 10px; z-index: 1; font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--c-white); text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.lcard .card-name { font-size: 17px; margin-top: 4px; }
.lcard .card-body { padding-top: 14px; }
.lcard-en { margin-top: 2px; font-size: 12px; letter-spacing: 0.06em; color: var(--c-silver); }
.lcard .tags { margin-top: 10px; }
.lib-empty { margin-top: 36px; padding: 40px 28px; background: var(--s1); font-size: 16px; color: var(--c-silver); text-align: center; word-break: keep-all; }

/* 04 상담 준비: 스타일 3칸 + 염색 1칸. 빈 칸에도 흐린 사진을 깐다 */
.save-check { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 22px; cursor: pointer; font-size: 15px; }
.save-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.save-box { width: 22px; height: 22px; background: var(--c-black); position: relative; flex: none; transition: background-color 200ms ease; }
.save-check input:checked + .save-box { background: var(--c-white); }
.save-check input:checked + .save-box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--c-black); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.save-check input:focus-visible + .save-box { outline: 2px solid var(--c-white); outline-offset: 3px; }
.sec-consult .status { margin-top: 6px; }

.consult-empty { margin-top: clamp(56px, 6vw, 88px); font-size: 16px; color: var(--c-white); word-break: keep-all; }
.slots { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.consult-empty[hidden] + .slots { margin-top: clamp(56px, 6vw, 88px); }
.slot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-black); }
.slot-photo { position: absolute; inset: 0; background: var(--c-black); }
.slot.is-empty .slot-photo img { filter: grayscale(1) brightness(.26) blur(2px); transform: scale(1.06); }
.slot.slot-color.is-empty .slot-photo img { filter: grayscale(1) brightness(.2) blur(3px); }
.slot.is-full .slot-photo img { filter: grayscale(1) contrast(1.04) brightness(.8); }
.slot-photo .ccard-tint { opacity: .85; }
.slot-over {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: clamp(14px, 1.6vw, 22px);
  background: linear-gradient(to top, rgba(13,13,13,.82), rgba(13,13,13,0) 60%);
}
.slot-no { position: absolute; top: clamp(12px, 1.4vw, 18px); left: clamp(14px, 1.6vw, 22px); font-family: var(--f-display); font-size: 22px; line-height: 1; color: var(--c-white); }
.slot.is-empty .slot-no { color: var(--c-silver); }
.slot-guide { font-size: 14px; line-height: 1.6; color: var(--c-silver); word-break: keep-all; }
.slot-name { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; line-height: 1.3; word-break: keep-all; }
.slot-chip { width: 20px; height: 20px; flex: none; }
.slot-sub { font-size: 12px; color: var(--c-silver); }
.slot-remove {
  align-self: flex-start; margin-top: 8px; min-height: 44px; padding: 0 16px;
  background: rgba(245,245,245,.14); color: var(--c-white); font-size: 13px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .slot-remove:hover { background: var(--c-white); color: var(--c-black); } }
.slot.is-full { animation: slot-in 360ms var(--ease-out); }
@keyframes slot-in { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
.sec-consult > .status { margin-top: 16px; }

.memo { margin-top: clamp(48px, 5vw, 72px); max-width: 760px; }
.memo-label { display: block; font-size: 16px; font-weight: 500; }
.memo textarea {
  display: block; width: 100%; min-height: 140px; margin-top: 14px; padding: 16px 18px; resize: vertical;
  border: 0; border-radius: 0; background: var(--c-black); color: var(--c-white); font: 16px/1.65 var(--f-ui);
}
.memo textarea::placeholder { color: var(--c-mid); }
.memo textarea:focus { outline: 2px solid var(--c-white); outline-offset: 2px; }
.memo-count { margin-top: 8px; text-align: right; font-size: 12px; color: var(--c-silver); font-variant-numeric: tabular-nums; }
.consult-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.consult-actions .status { flex-basis: 100%; }
.after .btn-solid[aria-disabled="true"] { background: var(--c-black); color: var(--c-mid); cursor: default; }
.after .btn-solid[aria-disabled="true"]:active { transform: none; }

.after-foot { background: var(--c-black); padding: 56px max(var(--gutter), calc((100% - var(--sec-max)) / 2)) calc(56px + env(safe-area-inset-bottom)); color: var(--c-silver); font-size: 13px; line-height: 1.8; }
.after-foot .logo { display: block; margin-bottom: 10px; }
.after-foot-sub { color: var(--c-mid); }

/* 나타나는 움직임 */
html.js:not(.rm) .rv { opacity: 0; transform: translateY(18px); }
html.js:not(.rm) .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) ease-out, transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(min(var(--d, 0), 7) * 55ms);
}

/* 중간 화면 */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lib-controls { grid-template-columns: auto minmax(0, 1fr); }
  .lib-count { grid-column: 1 / -1; justify-self: start; }
}

/* 휴대폰 */
@media (max-width: 720px) {
  :root { --sec-pad-y: 72px; }
  .sec { padding-top: calc(var(--header-h) + 48px); padding-left: 16px; padding-right: 16px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sec-no { font-size: 96px; }
  .sec-title { font-size: clamp(26px, 7.4vw, 32px); margin-top: 12px; }
  .sec-sub { font-size: 15px; }
  .sec-tools .btn-tone, .res-actions > button, .consult-actions > button { flex: 1 1 100%; justify-content: center; }
  .cards { gap: 36px 12px; margin-top: 24px; }
  .card-lead { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card-lead .card-body { padding-top: 20px; }
  .card-lead .card-body::before { font-size: 0; margin: 0; }
  .card-lead .card-rank { display: block; font-size: 88px; }
  .card-lead .card-photo::after { display: block; }
  .card-lead .card-name { font-size: 28px; }
  .card-lead .pick { width: 100%; }
  .card-name { font-size: 16px; }
  .card:not(.card-lead) .reasons li + li, .card:not(.card-lead) .card-note { display: none; }
  .card:not(.card-lead) .reasons { font-size: 13px; }
  .card-meta { font-size: 10px; letter-spacing: 0.12em; }
  .card:not(.card-lead) .card-meta span:last-child { display: none; }
  .card-rank { font-size: 46px; left: 10px; }
  .pick { font-size: 13px; padding: 0 8px; }
  .tags li { font-size: 11px; padding: 4px 7px; }
  .color-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ccard-photo { aspect-ratio: 4 / 3; }
  .ccard-photo img { object-position: 50% 20%; }
  .lib-controls { grid-template-columns: minmax(0, 1fr); }
  .seg { width: 100%; }
  .seg button { flex: 1; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .lcard .card-name { font-size: 15px; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .slot-name { font-size: 15px; }
  .slot-guide { font-size: 12.5px; }
  .slot-remove { min-height: 44px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-photo img, .ccard-photo img, .slot-photo img { transition: filter 200ms ease; }
  .card:hover .card-photo img, .lcard:hover .card-photo img, .ccard:hover .ccard-photo img { transform: none; }
  .slot.is-full { animation: none; }
  .btn-tone, .pick, .after .btn-solid { transition-property: background-color, color; }
  .btn-tone:active, .pick:active, .after .btn-solid:active { transform: none; }
}
/* 결과 첫 화면: 01 카드가 첫 화면 아래쪽에 보이도록 위 여백을 줄인다 */
.sec-results { padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px)); }
.sec-results .sec-no { font-size: clamp(110px, 12vw, 190px); }
.sec-results .profile { margin-top: 28px; }
.sec-results .block-title:first-of-type { margin-top: clamp(56px, 6vw, 88px); }
@media (max-width: 720px) { .sec-results { padding-top: calc(var(--header-h) + 36px); } }
/* 색상 카드: 색을 옅게 입히고 가로로 낮게 */
.ccard-photo { aspect-ratio: 5 / 4; }
.ccard-photo img { object-position: 50% 22%; }
.ccard-tint { opacity: .62; }
.ccard-chip { width: 30%; }
@media (max-width: 720px) { .slot { aspect-ratio: 3 / 4; } }

/* =====================================================================
   원본 화면 요소 (logic/ 의 원본 코드가 만들고 찾는 id, class 에 시제품 디자인을 입힌다)
   ===================================================================== */
.muted { color: var(--c-silver); }
.muted:empty { display: none; }
.sr, .profile-summary.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
button:disabled { cursor: default; }

/* 공통 체크 상자 (사진 분석 동의, 컬러 추천, 자동 저장) */
label.check {
  display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 10px 0;
  cursor: pointer; font-size: 15px; line-height: 1.5; word-break: keep-all;
}
label.check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0;
  border: 1px solid var(--c-silver); background: transparent; position: relative; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
label.check input:checked { background: var(--c-white); border-color: var(--c-white); }
label.check input:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 11px;
  border: solid var(--c-black); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
label.check input:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

/* ---------- 선택 화면 ---------- */
.choose { height: 100dvh; min-height: 0; }
.panels { min-height: 0; flex: 1 1 auto; }
.choose-note {
  flex: none; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: var(--c-black); color: var(--c-silver); font-size: 12px; line-height: 1.6; text-align: center; word-break: keep-all;
}
.choose-bar { bottom: calc(64px + env(safe-area-inset-bottom)); padding: 8px; }
.choose-bar .link-btn { min-height: 44px; padding: 0 18px; }
.gpanel { width: 100%; }
@media (max-width: 720px) {
  .panels { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .gpanel:first-child { padding-top: 0; }
  .gpanel:first-child .panel-state { top: calc(var(--header-h) + 46px); }
  .choose-note { font-size: 11.5px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); text-align: left; }
  .choose-bar { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); justify-content: center; }
}

/* ---------- 질문 화면 (원본 #quiz) ---------- */
.flow-form { max-width: none; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.flow-scroll > * { max-width: var(--flow-max); }
.flow-count { min-height: 44px; display: flex; align-items: center; }
progress.flow-line {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: var(--flow-max);
  height: 1px; margin-top: 4px; border: 0; background: var(--c-dark); color: var(--c-white); overflow: hidden;
}
progress.flow-line::-webkit-progress-bar { background: var(--c-dark); }
progress.flow-line::-webkit-progress-value { background: var(--c-white); transition: width 420ms var(--ease-out); }
progress.flow-line::-moz-progress-bar { background: var(--c-white); }

.wizard-step > h3 {
  margin-top: 16px; font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.28;
  letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere;
}
.wizard-step > h3:focus { outline: none; }
.wizard-step > .muted { margin-top: 14px; max-width: 34em; font-size: 15px; line-height: 1.65; word-break: keep-all; }
.wizard-step[data-step="photoChoice"] > .muted { margin-top: 20px; }
.wizard-source, .group-source { display: none !important; }

/* 선택지: 원본이 만드는 버튼 (.wizard-options button). 번호는 CSS 로 붙인다 */
.wizard-options { margin-top: 36px; border-bottom: 1px solid var(--c-dark); counter-reset: opt; }
.wizard-options button {
  counter-increment: opt;
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 8px;
  width: 100%; min-height: var(--opt-h); padding: 10px 18px 10px 16px; text-align: left;
  border-top: 1px solid var(--c-dark);
  font-size: 17px; line-height: 1.4; color: var(--c-silver); word-break: keep-all;
  transition: background-color 200ms ease, color 200ms ease;
}
.wizard-options button::before {
  content: counter(opt, decimal-leading-zero);
  font-size: 11px; letter-spacing: 0.16em; color: var(--c-mid); font-variant-numeric: tabular-nums; transition: color 200ms ease;
}
.wizard-options button::after {
  content: ""; width: 14px; height: 14px; border: 1px solid var(--c-mid); border-radius: 50%; justify-self: end;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.wizard-step[data-step="photoChoice"] .wizard-options button::after { content: "→"; width: auto; height: auto; border: 0; border-radius: 0; font-size: 15px; color: var(--c-mid); }
@media (hover: hover) and (pointer: fine) {
  .wizard-options button:not(:disabled):not([aria-pressed="true"]):hover { color: var(--c-white); background: rgba(245,245,245,.04); }
  .wizard-options button:not(:disabled):not([aria-pressed="true"]):hover::after { border-color: var(--c-silver); }
}
.wizard-options button:active { background: rgba(245,245,245,.07); }
.wizard-options button[aria-pressed="true"] { background: var(--c-white); color: var(--c-black); border-top-color: var(--c-white); }
.wizard-options button[aria-pressed="true"] + button { border-top-color: var(--c-white); }
.wizard-options button[aria-pressed="true"]::before { color: var(--c-dark); }
.wizard-options button[aria-pressed="true"]::after { border-color: var(--c-black); background: var(--c-black); box-shadow: inset 0 0 0 3px var(--c-white); }
.wizard-options button:focus-visible { outline: 1px solid var(--c-white); outline-offset: 3px; z-index: 1; }
.wizard-options button:disabled { opacity: .45; }

/* 두 항목 질문 (시술 이력, 컬러 조건) */
.group { margin-top: 40px; }
.group + .group { margin-top: 44px; }
.group .wizard-options { margin-top: 14px; }
#colorFields .group:first-child, .wizard-step[data-step="history"] h3 + label + .group { margin-top: 40px; }

/* 컬러 추천 체크 (한 줄 선택지 모양) */
.wizard-step label.opt-check {
  margin-top: 36px; min-height: var(--opt-h); align-items: center; padding: 10px 18px 10px 16px;
  border-top: 1px solid var(--c-dark); border-bottom: 1px solid var(--c-dark); font-size: 17px; color: var(--c-silver);
  transition: background-color 200ms ease, color 200ms ease;
}
.wizard-step label.opt-check:has(input:checked) { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.wizard-step label.opt-check:has(input:checked) input { background: var(--c-black); border-color: var(--c-black); }
.wizard-step label.opt-check:has(input:checked) input::after { border-color: var(--c-white); }

/* 사진 화면 */
.photo { margin-top: 36px; }
label.upload {
  position: relative; aspect-ratio: 4 / 5; background: var(--c-black); border: 1px solid var(--c-dark);
  display: grid; place-items: center; overflow: hidden; cursor: pointer; text-align: center;
  transition: border-color 200ms ease;
}
label.upload:focus-within { outline: 1px solid var(--c-white); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { label.upload:hover { border-color: var(--c-silver); } }
label.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#uploadText { display: grid; gap: 10px; padding: 12px; }
#uploadText b { font-weight: 500; font-size: 15px; color: var(--c-white); }
#uploadText small { font-size: 12px; line-height: 1.6; color: var(--c-silver); }
.photo-side { display: grid; gap: 10px; align-content: start; }
.textbutton {
  justify-self: start; min-height: 44px; padding: 0 16px; font-size: 13px; color: var(--c-silver);
  border: 1px solid var(--c-dark); transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .textbutton:hover { color: var(--c-white); border-color: var(--c-mid); } }
#photoError, #profileError { font-size: 14px; line-height: 1.6; color: var(--c-white); padding-left: 12px; border-left: 2px solid var(--c-white); word-break: keep-all; }
#photoError:empty, #profileError:empty { display: none; }
.face-analysis { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--c-dark); display: grid; gap: 12px; justify-items: start; }
.face-analysis > * { max-width: 40em; }
.face-title { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; color: var(--c-white); }
.face-title .chip { padding: 3px 8px; font-size: 11px; letter-spacing: 0.06em; background: var(--c-dark); color: var(--c-silver); }
.face-analysis .muted, .privacy { font-size: 13px; line-height: 1.7; color: var(--c-silver); word-break: keep-all; }
.face-analysis label.check { font-weight: 500; }
#analyzeFace {
  min-height: 52px; padding: 0 26px; background: var(--c-white); color: var(--c-black); font-size: 15px; font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
#analyzeFace:disabled { background: var(--c-dark); color: var(--c-silver); }
#faceStatus { font-size: 14px; line-height: 1.65; color: var(--c-white); word-break: keep-all; overflow-wrap: anywhere; }
#applyFace {
  min-height: 48px; padding: 0 22px; border: 1px solid var(--c-silver); color: var(--c-white); font-size: 15px;
  transition: background-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { #applyFace:hover { background: var(--c-white); color: var(--c-black); } }

/* 확인 화면 */
#wizardReview { margin-top: 28px; border-bottom: 1px solid var(--c-dark); counter-reset: rv; }
.review-row {
  counter-increment: rv;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--c-dark); font-size: 15px; line-height: 1.55; word-break: keep-all;
}
.review-row::before { content: counter(rv, decimal-leading-zero); font-size: 11px; letter-spacing: 0.16em; color: var(--c-mid); font-variant-numeric: tabular-nums; }
.review-row span { overflow-wrap: anywhere; }
.review-row button {
  min-height: 44px; min-width: 56px; padding: 0 12px; font-size: 13px; color: var(--c-silver);
  border: 1px solid var(--c-dark); transition: color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .review-row button:hover { color: var(--c-white); border-color: var(--c-mid); } }
.wizard-step[data-step="review"] #profileError { margin-top: 18px; }
.wizard-step button.primary {
  align-self: flex-start; margin-top: 28px; min-height: 56px; padding: 0 32px;
  background: var(--c-white); color: var(--c-black); font-size: 16px; font-weight: 500;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.wizard-step button.primary:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .wizard-step button.primary:hover { background: var(--c-silver); } }
.flow-scroll .q-foot { margin-top: 40px; }

/* 이전 / 다음 (원본 #wizardPrev, #wizardNext) */
.nav-next::after { content: "→"; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-next:hover::after { transform: translateX(4px); } }
.nav-prev::before { content: "←"; }
.nav-prev:disabled { opacity: .35; }
.nav-next[hidden] + *, .flow-nav:has(.nav-next[hidden]) .nav-prev { margin-right: auto; }

@media (max-width: 720px) {
  .wizard-step > h3 { font-size: clamp(24px, 7vw, 28px); margin-top: 12px; }
  .wizard-step > .muted { font-size: 14px; }
  .wizard-options { margin-top: 26px; }
  .wizard-options button { font-size: 16px; grid-template-columns: 34px minmax(0, 1fr) 16px; padding: 8px 14px 8px 12px; }
  .wizard-step label.opt-check { margin-top: 26px; font-size: 16px; padding: 8px 14px 8px 12px; }
  .group { margin-top: 30px; }
  .photo { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; margin-top: 26px; }
  #uploadText small { font-size: 11px; }
  #analyzeFace, .wizard-step button.primary { width: 100%; }
  .review-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; font-size: 14px; }
  .flow-nav:has(.nav-next[hidden]) .nav-prev { flex: 1; justify-content: flex-start; }
}
@media (max-width: 370px) { .photo { grid-template-columns: 112px minmax(0, 1fr); } }

/* ---------- 결과 (원본 #results) ---------- */
.block-title h2, .block-title h3 { font: inherit; letter-spacing: inherit; margin: 0; }
#cutNotice { margin-top: 14px; }
.profile:empty { display: none; }

.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 3vw, 48px); }
#cards > .card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: start; }
.card .card-body { padding-top: 0; }
.card-photo.no-photo { display: grid; place-items: center; padding: 16px; background: var(--s2); }
.no-photo-name { font-family: var(--f-display); font-style: italic; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; text-align: center; color: var(--c-silver); word-break: keep-all; }
.card .card-meta { justify-content: flex-start; }
.card .card-name { margin-top: 10px; }
.card-en, .lcard-en { margin-top: 4px; font-size: 12px; letter-spacing: 0.06em; color: var(--c-silver); }
.card-body > p:not(.card-meta):not(.card-en):not(.lcard-en) { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--c-silver); word-break: keep-all; overflow-wrap: anywhere; }
.card-body > p.card-note b, .card-body details p.card-note b { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; color: var(--c-white); margin-bottom: 2px; }
.card-note .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.card-body > p.treatment-line { color: var(--c-white); }
.card .pick, .card-body > .pick { margin-top: 20px; }
#cards > .card-lead { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.card-lead .card-name { font-size: clamp(30px, 3.2vw, 46px); }
.card-lead .card-body > p:not(.card-meta):not(.card-en) { font-size: 15px; }
.card-lead .card-meta { font-size: 12px; }
.treat-note { margin-top: 40px; max-width: 44em; font-size: 14px; }

/* 담기 버튼: 한 번 누르면 「담음 ✓」, 다시 누르면 뺀다 */
.pick { margin-top: 20px; }
.pick[aria-pressed="true"] { background: var(--c-white); color: var(--c-black); }
.pick:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

/* 염색 색상: 사진에 색을 입히지 않는다. 큰 색상칩 + 결 무늬 (얼굴 없음) */
.colors { margin-top: 8px; }
.ccard-swatch { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--s1); }
.ccard-swatch .swatch { position: absolute; inset: 0; }
.ccard-strands {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.22) 100%),
    repeating-linear-gradient(98deg, rgba(255,255,255,.07) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(94deg, rgba(0,0,0,.12) 0 2px, rgba(0,0,0,0) 2px 11px);
}
.ccard-no {
  position: absolute; left: 12px; top: 12px; padding: 4px 8px;
  background: rgba(13,13,13,.72); color: var(--c-white); font-size: 12px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
}
.ccard .card-body { padding-top: 18px; }
.ccard .card-meta { justify-content: space-between; }
.ccard .hex { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.ccard-desc, .ccard-note { margin-top: 10px; font-size: 13px; line-height: 1.65; color: var(--c-silver); word-break: keep-all; }
.ccard .pick { margin-top: auto; }
.ccard .ccard-note { margin-bottom: 18px; }

.res-actions { margin-top: clamp(64px, 8vw, 112px); }
#copyStatus { margin-top: 12px; }
.status textarea { display: block; width: 100%; min-height: 160px; margin-top: 10px; padding: 14px; background: var(--s1); color: var(--c-white); border: 0; font: 13px/1.6 var(--f-ui); }

/* ---------- 03 둘러보기 (원본 details) ---------- */
#libraryBrowser > summary { list-style: none; cursor: pointer; }
#libraryBrowser > summary::-webkit-details-marker { display: none; }
#libraryBrowser > summary:focus-visible { outline: 2px solid var(--c-white); outline-offset: 8px; }
.library-toggle .sec-head-text, .library-toggle .sec-kicker { display: block; }
.library-toggle-title { display: flex; align-items: center; gap: 20px; }
.toggle-mark {
  display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; background: var(--s1);
  font-size: 22px; font-weight: 400; transition: transform 300ms var(--ease-out), background-color 200ms ease;
}
#libraryBrowser[open] .toggle-mark { background: var(--c-white); color: var(--c-black); }
.toggle-mark { font-size: 0; }
.toggle-mark::before { content: "＋"; font-size: 22px; }
#libraryBrowser[open] .toggle-mark::before { content: "−"; }
@media (hover: hover) and (pointer: fine) { #libraryBrowser:not([open]) > summary:hover .toggle-mark { background: var(--s2); } }
.library-body { margin-top: clamp(40px, 5vw, 72px); }
.lib-sub { margin-top: 0; }
.lib-controls { display: flex; flex-wrap: wrap; margin-top: 28px; }
.lib-title { margin-top: clamp(40px, 5vw, 64px); font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 40px); color: var(--c-white); }
.lib-search { display: grid; grid-template-columns: minmax(0, 420px) 1fr; align-items: end; gap: 12px 20px; margin-top: 20px; }
.search { font-size: 12px; letter-spacing: 0.08em; color: var(--c-silver); }
.lib-count { margin: 0; }
.lcard .card-body { padding-top: 14px; }
.lcard .chip { align-self: flex-start; padding: 4px 8px; font-size: 11px; background: var(--s1); color: var(--c-silver); }
.lcard .card-name { margin-top: 10px; }
.lcard details { margin-top: 10px; }
.lcard summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13px; color: var(--c-white);
  list-style: none;
}
.lcard summary::-webkit-details-marker { display: none; }
.lcard summary::after { content: "+"; margin-left: 8px; color: var(--c-silver); }
.lcard details[open] summary::after { content: "−"; }
.lcard details p { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--c-silver); word-break: keep-all; }
.lcard .pick { margin-top: auto; }
.lcard details:not([open]) { margin-bottom: 14px; }
.lcard details[open] { margin-bottom: 18px; }

/* ---------- 04 상담 준비 ---------- */
.sec-consult label.check { margin-top: 18px; }
.sec-consult label.check input { border-color: var(--c-silver); background: var(--c-black); }
.sec-consult label.check input:checked { background: var(--c-white); }
.slots { margin-top: clamp(48px, 5vw, 80px); }
#selectedStyles, #slotGhosts { display: contents; }
#selectedStyles > p.muted { grid-column: 1 / -1; font-size: 16px; color: var(--c-white); word-break: keep-all; }
.slot-swatch { background: var(--c-charcoal); }
.slot.is-empty .slot-swatch { background: var(--c-black); }
.slot.is-empty .slot-swatch .ccard-strands { opacity: .4; }
.slot .slot-name { font-size: 17px; font-weight: 500; line-height: 1.35; word-break: keep-all; }
.slot.is-full .slot-photo.no-photo { display: grid; place-items: center; }
.sec-consult .status { margin-top: 14px; }
#copyConsult:disabled { background: var(--c-black); color: var(--c-mid); }

@media (max-width: 1100px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .lib-search { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #cards > .card { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 16px; }
  #cards > .card-lead { grid-template-columns: minmax(0, 1fr); }
  .card-lead .card-name { font-size: 28px; }
  .card .card-rank { font-size: 40px; left: 8px; }
  .card-lead .card-rank { display: block; font-size: 88px; }
  .card-lead .card-photo { aspect-ratio: 4 / 4.2; }
  .card-lead .card-body { padding-top: 20px; }
  .card:not(.card-lead) .card-name { font-size: 17px; }
  .card:not(.card-lead) .card-body > p:not(.card-meta) { font-size: 13px; }
  .card:not(.card-lead) .card-photo { grid-row: span 1; }
  .ccard-swatch { aspect-ratio: 16 / 7; }
  .lcard .chip { display: none; }
  .toggle-mark { width: 44px; height: 44px; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot .slot-name { font-size: 14px; }
}
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
.header-nav a { min-width: 44px; justify-content: center; }

/* 세미리프컷·펌: 사용자가 등록한 두 사진 전환 */
.photo-pages { position:absolute; z-index:4; bottom:12px; right:12px; display:flex; gap:6px; }
.photo-pages button { min-width:36px; min-height:36px; padding:6px; border:1px solid #aaa; border-radius:0; background:#161616; color:#fff; font:inherit; cursor:pointer; }
.photo-pages button[aria-pressed="true"] { background:#fff; color:#111; border-color:#fff; }
.photo-pages button:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* 추천 카드: 순위·이름 통합 및 설명 제목 줄바꿈 */
#cards .card-name { font-size:clamp(20px,2vw,30px); line-height:1.45; }
#cards .card-en-inline { font-size:.65em; font-family:inherit; font-weight:400; color:var(--muted,#aaa); }
.card-note .note-heading { display:block; margin-bottom:6px; }