/* FocusTone Lab — 어둡고 조용한 톤.
   측정 중에는 화면이 주의를 뺏으면 안 되므로 자극 화면만 대비를 낮추고 요소를 최소화한다.
   나머지 화면은 반대로 또렷하게 간다. */

:root {
  --bg: #080a0e;
  --bg-soft: #0e1117;
  --panel: #12161e;
  --line: #232a36;
  --line-soft: #1a202a;
  --ink: #eaeff6;
  --ink-dim: #9aa5b5;
  --ink-faint: #66717f;
  --accent: #6ee7c8;
  --accent-2: #7aa2ff;
  --warn: #ffb86b;
  --go: #3ddc84;
  --nogo: #ff5f6d;

  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
  --elev: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 18px 40px -22px rgba(0, 0, 0, .9);
  --elev-hi: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 24px 50px -20px rgba(0, 0, 0, .95);
  --glow-a: rgba(110, 231, 200, .16);
  --glow-b: rgba(122, 162, 255, .14);

  --radius: 18px;
  --maxw: 960px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo",
          "Malgun Gothic", Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9; --bg-soft: #fff; --panel: #fff;
    --line: #e2e6ee; --line-soft: #eef1f6;
    --ink: #10151d; --ink-dim: #515c6b; --ink-faint: #8a94a3;
    --accent: #0d9b7a; --accent-2: #3a6adf;
    --sheen: none;
    --elev: 0 1px 2px rgba(16, 21, 29, .04), 0 10px 30px -18px rgba(16, 21, 29, .28);
    --elev-hi: 0 2px 4px rgba(16, 21, 29, .05), 0 18px 40px -18px rgba(16, 21, 29, .32);
    --glow-a: rgba(13, 155, 122, .1); --glow-b: rgba(58, 106, 223, .09);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(1100px 620px at 12% -12%, var(--glow-a), transparent 62%),
    radial-gradient(900px 560px at 92% -4%, var(--glow-b), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { line-height: 1.22; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5.4vw, 3.35rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.02rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
a { color: inherit; }
strong { font-weight: 650; }

.eyebrow {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .8em; font-weight: 700;
}
.lede { font-size: clamp(1rem, 2vw, 1.1rem); color: var(--ink-dim); }
.lede strong { color: var(--ink); }
.micro { font-size: .82rem; color: var(--ink-faint); line-height: 1.65; }
.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-h {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin: 3.2rem 0 1rem;
  display: flex; align-items: center; gap: .9rem;
}
.section-h::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ── 상단바 ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 2rem);
  max-width: var(--maxw); margin: 0 auto; width: 100%;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; letter-spacing: -.03em; text-decoration: none; font-size: 1.03rem;
}
.brand em { font-style: normal; color: var(--ink-faint); font-weight: 500; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--accent); animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--glow-a); }
  50%      { box-shadow: 0 0 0 9px transparent; }
}
.topnav { display: flex; gap: .15rem; flex-wrap: wrap; }
.topnav a {
  text-decoration: none; color: var(--ink-dim); font-size: .88rem; font-weight: 500;
  padding: .4rem .8rem; border-radius: 99px; transition: .16s;
}
.topnav a:hover { color: var(--ink); background: var(--line-soft); }
.topnav a.active { color: var(--ink); background: var(--line); }

/* ── 레이아웃 ── */
#app { flex: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: .5rem clamp(1rem, 4vw, 2rem) 4.5rem; }
/* fill-mode 를 쓰지 않는다. both/backwards 를 붙이면 애니메이션이 시작되지 않는 상황
   (백그라운드 탭 등 합성기가 멈춘 경우) from 상태인 opacity:0 에 갇혀 화면이 빈다.
   fill 이 없으면 애니메이션이 안 돌아도 요소는 자연 상태 = 보이는 상태로 남는다.
   요소의 가시성을 애니메이션에 의존시키지 않는 게 요점이다. */
.view { display: none; animation: rise .4s cubic-bezier(.22, 1, .36, 1); }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.hero { padding: clamp(1.8rem, 7vw, 4.5rem) 0 2rem; max-width: 640px; }
.hero .lede { margin-bottom: 2rem; }
.cta-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.cta-row.center { justify-content: center; }

/* ── 히어로 파형 ── */
.wave-figure { margin: 0; }
.wave-figure canvas {
  display: block; width: 100%; height: clamp(120px, 22vw, 190px);
  /* 좌우 끝을 흐리게 잘라 파형이 화면 밖으로 이어지는 느낌을 준다 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wave-figure figcaption {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center;
  font-size: .8rem; color: var(--ink-faint); margin-top: .4rem;
}
.wl { display: inline-flex; align-items: center; gap: .45rem; }
.wl i { width: 14px; height: 2px; border-radius: 2px; display: block; }
.wl-out { color: var(--ink-dim); }
.wl-out strong { color: var(--accent); font-weight: 700; }

/* ── 버튼 ── */
.btn {
  font: inherit; font-size: .93rem; font-weight: 650;
  border: 1px solid transparent; border-radius: 99px;
  padding: .62rem 1.35rem; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), filter .16s, background .16s, border-color .16s;
  white-space: nowrap;
}
.btn[hidden] { display: none; } /* display:inline-flex가 UA의 [hidden]을 이기는 것 방지 */
.btn-primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 86%, #000));
  color: #04231b; box-shadow: 0 6px 18px -8px var(--accent);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-ghost { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-faint); transform: translateY(-2px); }
.btn-quiet { background: none; border: none; color: var(--ink-faint); font-weight: 500; font-size: .84rem; }
.btn-quiet:hover { color: var(--ink); text-decoration: underline; }
.btn-lg { padding: .82rem 1.85rem; font-size: .98rem; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
select.btn { -webkit-appearance: none; appearance: none; padding-right: 1.35rem; }

/* ── 카드 / 패널 ── */
.panel, .stage-card, .verdict, .steps article {
  background-color: var(--panel); background-image: var(--sheen);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--elev);
}
.panel, .stage-card, .verdict { padding: clamp(1.3rem, 4vw, 2.1rem); }
.stage-card { max-width: 620px; margin: 1.5rem auto 0; }
.stage-card.wide { max-width: 730px; }
.panel.note { margin-top: 1.2rem; }
.panel.note h3 { color: var(--ink-dim); }

.steps { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.steps article { padding: 1.4rem; position: relative; overflow: hidden; transition: .22s cubic-bezier(.22, 1, .36, 1); }
.steps article:hover { transform: translateY(-3px); box-shadow: var(--elev-hi); border-color: var(--line); }
.steps .num {
  font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--line);
  position: absolute; top: .7rem; right: .9rem; pointer-events: none;
}
.steps h3 { margin: 0 0 .4rem; }
.steps p { color: var(--ink-dim); font-size: .89rem; margin: 0; }

/* ── 폼 ── */
.checklist { padding-left: 1.15rem; color: var(--ink-dim); margin: 0 0 1.6rem; }
.checklist li { margin-bottom: .6rem; padding-left: .2rem; }
.checklist li::marker { color: var(--accent); }
.checklist strong { color: var(--ink); }

.hp-check {
  border: 1px solid var(--line); background: var(--bg); border-radius: 14px;
  padding: 1.1rem; margin-bottom: 1.5rem;
}
.hp-check .label { font-weight: 650; font-size: .88rem; margin: 0 0 .7rem; }
.hp-buttons { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }
.hp-buttons .btn { flex: 1; min-width: 130px; }
.hp-check .micro { margin: 0; }

.field-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 1.7rem; }
.field { display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--ink-dim); font-weight: 500; }
.field select {
  font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 11px; padding: .65rem .7rem;
}

.howto { display: grid; gap: .7rem; margin-bottom: 1.3rem; }
.howto-item { display: flex; gap: 1rem; align-items: center; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 14px; padding: 1rem; }
.howto-item p { margin: .1rem 0 0; color: var(--ink-dim); font-size: .88rem; }
.dot { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.dot-go { background: var(--go); box-shadow: 0 0 24px rgba(61, 220, 132, .4); }
.dot-nogo { background: var(--nogo); box-shadow: 0 0 24px rgba(255, 95, 109, .32); }
kbd {
  font: inherit; font-size: .8em; background: var(--line); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: .05em .45em;
}

/* ── 측정 진행 ── */
.run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.run-head .eyebrow { margin-bottom: .25em; }
.run-sub { color: var(--ink-faint); font-size: .86rem; margin: 0; }
.run-timer { font-size: 1.8rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em; }
.run-timer small { font-size: .78rem; color: var(--ink-faint); font-weight: 500; margin-left: .15em; }

.progressbar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 1.1rem 0 0; }
.progressbar div {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .25s linear;
}

.stimulus {
  height: min(46vh, 340px); margin: 1.3rem 0 .8rem;
  display: grid; place-items: center;
  border-radius: 14px; background: var(--bg); border: 1px solid var(--line-soft);
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  position: relative; overflow: hidden;
}
.stim-circle {
  width: 134px; height: 134px; border-radius: 50%;
  background: var(--line-soft); transform: scale(.5); opacity: .3;
  transition: transform .08s ease-out, background .08s, opacity .08s, box-shadow .08s;
}
.stimulus[data-state="go"] .stim-circle {
  background: var(--go); transform: scale(1); opacity: 1;
  box-shadow: 0 0 70px rgba(61, 220, 132, .32);
}
.stimulus[data-state="nogo"] .stim-circle {
  background: var(--nogo); transform: scale(1); opacity: 1;
  box-shadow: 0 0 70px rgba(255, 95, 109, .3);
}
/* 반응 피드백은 테두리로만 준다. 자극 자체를 건드리면 다음 시행에 간섭한다. */
.flash-ok   { animation: fl 260ms ease-out; --fc: var(--go); }
.flash-bad  { animation: fl 400ms ease-out; --fc: var(--nogo); }
.flash-miss { animation: fl 260ms ease-out; --fc: var(--warn); }
@keyframes fl {
  from { box-shadow: inset 0 0 0 2px var(--fc); }
  to   { box-shadow: inset 0 0 0 2px transparent; }
}

/* 작업기억(글자)·처리속도(암산) 과제 표시 */
.stimulus[data-state="nback"] .stim-circle,
.stimulus[data-state="arith"] .stim-circle { display: none; }
.glyph {
  font-size: clamp(4rem, 20vh, 8.5rem); font-weight: 800; letter-spacing: .04em;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.arith-q { font-size: clamp(2.6rem, 11vh, 4.4rem); font-weight: 750; margin-bottom: 1.5rem; letter-spacing: .03em; }
.arith-opts { display: flex; gap: 1.1rem; }
.arith-opt {
  min-width: 5.6rem; padding: 1rem 1.5rem; font-size: 1.7rem; font-weight: 750;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--ink); cursor: pointer; transition: .14s cubic-bezier(.22,1,.36,1);
  font-variant-numeric: tabular-nums;
}
.arith-opt:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.run-foot { display: flex; align-items: center; justify-content: space-between; }
#run-counter { font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.countdown {
  font-size: clamp(3rem, 12vw, 4rem); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--accent); text-align: center; margin: 1rem 0 1.2rem; letter-spacing: -.04em; line-height: 1;
}
[data-step="rest"] { text-align: center; }
[data-step="rest"] .lede { max-width: 34ch; margin-inline: auto; }

/* ── 결과 ── */
.verdict { text-align: center; padding-block: clamp(1.8rem, 6vw, 3rem); position: relative; overflow: hidden; }
.verdict::before {
  content: ""; position: absolute; inset: -40% 20% auto; height: 260px;
  background: radial-gradient(closest-side, var(--glow-a), transparent 70%);
  pointer-events: none;
}
.verdict > * { position: relative; }
.verdict .big {
  font-size: clamp(3.2rem, 14vw, 5.4rem); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; margin: .05em 0 .12em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.verdict .band-name { color: var(--ink-dim); font-size: .98rem; margin-bottom: 1.1rem; }
.verdict .delta { font-weight: 700; color: var(--accent); }
.verdict .delta.neg { color: var(--warn); }

.bars { display: grid; gap: .5rem; }
.bar-row {
  display: grid; grid-template-columns: 84px 1fr 3.4em; gap: .8rem; align-items: center;
  font-size: .87rem;
}
.bar-row .bl { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.bar-row .bt { height: 28px; background: var(--bg); border-radius: 7px; overflow: hidden; }
.bar-row .bf {
  /* span 이라 기본이 inline 이고, inline 요소는 width/height/transform 을 전부 무시한다.
     .bt 는 그리드 아이템이라 자동으로 블록이 되지만 .bf 는 한 단계 안쪽이라 아니다.
     이게 빠지면 막대가 0x0 으로 렌더된다. */
  display: block;
  height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, rgba(122, 162, 255, .4), rgba(110, 231, 200, .6));
  /* fill-mode 없음. 붙이면 애니메이션이 안 돌 때 막대가 0폭에 갇힌다(.view 주석 참고). */
  animation: grow .85s cubic-bezier(.22, 1, .36, 1);
}
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } }
.bar-row.is-best .bf { background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 20px -6px var(--accent); }
.bar-row.is-base .bf { background: var(--line); }
.bar-row .bv { font-variant-numeric: tabular-nums; color: var(--ink-dim); text-align: right; }
.bar-row.is-best .bl, .bar-row.is-best .bv { color: var(--ink); font-weight: 700; }

.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tbl th, .tbl td { padding: .55rem .35rem; text-align: right; border-bottom: 1px solid var(--line-soft); }
.tbl th { color: var(--ink-faint); font-weight: 500; font-size: .76rem; letter-spacing: .03em; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.hl td { color: var(--ink); font-weight: 650; }

.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.panel + .panel, .verdict + .panel, .panel + .grid-2 { margin-top: 1rem; }
.panel h3 { margin-bottom: .8rem; }
.tag {
  display: inline-block; font-size: .73rem; font-weight: 700; letter-spacing: .04em;
  padding: .22em .8em; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-dim);
}
.tag.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: var(--glow-a); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.empty { text-align: center; padding: 4rem 1rem; color: var(--ink-dim); }
.empty .lede { margin-bottom: 1.6rem; }

/* ── 근거 페이지 ── */
.evidence-hero { padding-block: clamp(1.5rem, 5vw, 2.6rem); }
.panel.highlight {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background:
    radial-gradient(120% 140% at 100% 0%, var(--glow-a), transparent 60%),
    var(--panel);
}
.panel.highlight .btn { margin-top: 1rem; }
.evidence-tbl th:first-child { width: 46%; color: var(--ink-dim); }
.evidence-tbl td { vertical-align: top; }
.evidence-steps .num {
  position: static; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); -webkit-text-stroke: 0; text-transform: uppercase;
  display: inline-block; margin-bottom: .5rem;
}
.voices-note { font-size: .95rem; margin-top: -.4rem; }
.voices { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.voice {
  position: relative; margin: 0; padding: 1.5rem; border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); background: var(--panel);
}
.voice blockquote { margin: 0 0 .9rem; font-size: .98rem; line-height: 1.55; color: var(--ink); }
.voice blockquote::before { content: "\201C"; color: var(--accent); font-weight: 800; margin-right: .1em; }
.voice figcaption { color: var(--ink-dim); font-size: .86rem; }
.voice-badge {
  position: absolute; top: .9rem; right: .9rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; padding: .18em .6em; border-radius: 99px;
  color: var(--ink-faint); border: 1px solid var(--line);
}
.disclaimer { margin-top: 1.2rem; }
.voice.founder {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: radial-gradient(120% 140% at 0% 0%, var(--glow-a), transparent 55%), var(--panel);
}
.voice.founder blockquote { font-size: 1.04rem; }
.voice-badge.founder-badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.voices-empty { text-align: center; border-style: dashed; }
.voices-empty-title { font-size: 1.02rem; margin-bottom: .5rem; }
.voices-empty .btn { margin-top: 1rem; }
.cite {
  font-size: .62em; vertical-align: super; line-height: 0; font-weight: 700;
  color: var(--accent); padding: 0 .12em; text-decoration: none;
}
.cite:hover { text-decoration: underline; }
.refs { margin: 0; padding-left: 1.4rem; display: grid; gap: .8rem; }
.refs li { color: var(--ink-dim); font-size: .85rem; line-height: 1.5; }
.refs li em { color: var(--ink); font-style: italic; }
.refs a { word-break: break-all; }
.refs li.ref-flash {
  background: var(--glow-a); border-radius: 6px;
  box-shadow: 0 0 0 6px var(--glow-a); transition: background .3s, box-shadow .3s;
}

/* ── 4가지 방법 삼각측량 카드 (결과) ── */
.methods .micro { margin-bottom: 1rem; }
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.method {
  display: grid; gap: .18rem; align-content: start; padding: 1rem 1.05rem;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft);
  text-decoration: none; color: var(--ink); transition: .15s cubic-bezier(.22,1,.36,1);
}
.method:hover { border-color: var(--accent); transform: translateY(-2px); }
.method-ic { font-size: 1.4rem; line-height: 1; }
.method-t { font-weight: 700; }
.method-d { font-size: .8rem; color: var(--ink-dim); line-height: 1.4; }
.method-s { font-size: .74rem; color: var(--ink-faint); margin-top: .35rem; font-weight: 600; }
.method.done { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: var(--glow-a); }
.method.done .method-s { color: var(--accent); }
@media (max-width: 480px) { .method-grid { grid-template-columns: 1fr; } }

/* ── SNS 공유 카드 ── */
.share-panel { text-align: center; }
.share-panel .micro { margin-bottom: 1.1rem; }
.share-preview {
  display: block; width: 100%; max-width: 300px; aspect-ratio: 1 / 1;
  margin: 0 auto 1.2rem; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.share-panel .cta-row { justify-content: center; }

/* ── 주관적 몰입 평가 (측정) ── */
.rate-scale { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 .6rem; }
.rate-scale button {
  width: 3.2rem; height: 3.2rem; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); font-size: 1.1rem; font-weight: 700; cursor: pointer;
  transition: .14s cubic-bezier(.22,1,.36,1);
}
.rate-scale button:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-a) 0 0 0 4px; }
.rate-ends { display: flex; justify-content: space-between; max-width: 27rem; margin: 0 auto; color: var(--ink-faint); font-size: .8rem; }
.session-rate { text-align: center; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.session-rate .rate-scale { margin-top: 1.2rem; }
.session-rate #sess-rate-skip { margin-top: 1.1rem; }

/* ── 수행 vs 느낌 일치 (결과) ── */
.agree {
  max-width: 30rem; margin: 1.2rem auto .2rem; padding: .9rem 1.1rem; border-radius: 12px;
  font-size: .9rem; line-height: 1.5; text-align: left; border: 1px solid var(--line);
}
.agree.ok { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: var(--glow-a); }
.agree.warn { border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* ── A/B 취향 비교 ── */
.ab-pair { display: flex; gap: 1rem; margin: 1.6rem 0 1rem; }
.ab-listen {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.8rem 1rem; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); cursor: pointer;
  transition: .16s cubic-bezier(.22,1,.36,1);
}
.ab-listen:hover { transform: translateY(-3px); border-color: var(--accent); }
.ab-listen .ab-key { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.ab-listen .ab-sub { font-size: .8rem; color: var(--ink-dim); }
.ab-listen.playing {
  border-color: var(--accent); background: var(--glow-a); box-shadow: 0 0 0 4px var(--glow-a);
}
.ab-listen.playing .ab-key { color: var(--accent); }
.ab-now { text-align: center; min-height: 1.2em; }
.ab-choose { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* ── 정확도 진행바 (결과) ── */
.accuracy { max-width: 30rem; margin: 1.3rem auto .2rem; text-align: left; }
.accuracy .acc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; color: var(--ink-dim); margin-bottom: .45rem;
}
.accuracy .acc-count { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }
.accuracy .acc-track { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.accuracy .acc-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.accuracy.done .acc-fill { background: var(--accent); }
.accuracy.warn .acc-fill { background: linear-gradient(90deg, var(--warn), var(--accent-2)); }
.accuracy .micro { margin-top: .5rem; }
.measured-at { color: var(--ink-faint); margin-top: .3rem; letter-spacing: .01em; }

/* ── 세션 ── */
.session-card { text-align: center; }
.freq-picker { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 1.3rem 0 1.8rem; }
.chip {
  font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer;
  background: var(--bg); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 99px; padding: .42rem 1.05rem;
  transition: .16s cubic-bezier(.22, 1, .36, 1); position: relative;
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); transform: translateY(-2px); }
.chip.on {
  background: var(--accent); border-color: var(--accent); color: #04231b;
  box-shadow: 0 6px 18px -8px var(--accent);
}
.chip .mine { position: absolute; top: -7px; right: -5px; font-size: .62rem; }

.dial-wrap { display: grid; place-items: center; margin: .5rem 0 1.5rem; }
.dial { position: relative; width: min(248px, 64vw); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.dial-track { stroke: var(--line); }
.dial-fill {
  stroke: var(--accent); stroke-dasharray: 553; stroke-dashoffset: 553;
  transition: stroke-dashoffset .8s linear;
}
.dial.running .dial-fill { filter: drop-shadow(0 0 8px var(--accent)); }

/* 대기 중엔 링을 손으로 돌려 시간을 맞출 수 있다. .locked는 세션 진행 중(일시정지 포함) */
.dial:not(.locked) { touch-action: none; cursor: grab; }
.dial.dragging { cursor: grabbing; }
.dial.dragging .dial-fill { transition: none; } /* 손을 따라오도록 지연 제거 */
.dial-hint { margin-top: .6rem; }
.dial.locked + .dial-hint { visibility: hidden; }
.dial-inner { position: absolute; inset: 0; display: grid; place-content: center; gap: .15rem; }
.dial-inner strong {
  font-size: clamp(2rem, 7.5vw, 2.9rem); font-variant-numeric: tabular-nums;
  letter-spacing: -.035em; line-height: 1;
}
.dial-inner span { font-size: .78rem; color: var(--ink-faint); }
.dial.running .dial-inner strong { color: var(--accent); }

/* ── 자연음 믹서 (세션) ── */
.mixer { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); text-align: left; }
.mixer-h { font-weight: 650; color: var(--ink); margin-bottom: 1rem; }
.mixer-h .micro { font-weight: 400; margin-left: .4rem; }
.mixer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.4rem; }
.mix-slider { display: grid; gap: .4rem; font-size: .83rem; color: var(--ink-dim); font-weight: 500; }
.mix-lab { display: flex; justify-content: space-between; align-items: baseline; }
.mix-lab output { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 460px) { .mixer-grid { grid-template-columns: 1fr; } }

.sliders { display: grid; gap: 1.1rem; margin-top: 2.2rem; text-align: left; }
.slider { display: grid; gap: .4rem; font-size: .83rem; color: var(--ink-dim); font-weight: 500; }
.slider span { display: flex; justify-content: space-between; }
.slider output { color: var(--ink); font-variant-numeric: tabular-nums; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 4px; border-radius: 2px; background: var(--line);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--panel);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .6);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  cursor: pointer; border: 3px solid var(--panel);
}

/* ── 리텐션 지표 ── */
#focus-stats { max-width: 730px; margin: 1rem auto 0; }
#focus-stats .panel { text-align: left; }
.stat-empty { text-align: center; }
.stat-empty .micro { margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: .3rem 0 1rem; }
.stat { text-align: center; padding: .9rem .5rem; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 12px; }
.stat strong {
  display: block; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 750;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent);
}
.stat strong small { font-size: .5em; font-weight: 600; color: var(--ink-dim); margin-left: .1em; letter-spacing: 0; }
.stat span { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: .4rem; }
.streak-msg { margin: -.4rem 0 1rem; color: var(--warn); }

.slots { display: grid; gap: .4rem; margin-top: .3rem; }
.slot-row { display: grid; grid-template-columns: 44px 1fr 3em; gap: .7rem; align-items: center; font-size: .84rem; }
.slot-row .sl { color: var(--ink-dim); }
.slot-row .st { height: 20px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.slot-row .sf { display: block; height: 100%; border-radius: 6px; background: var(--line); transition: width .6s cubic-bezier(.22,1,.36,1); }
.slot-row.hot .sf { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.slot-row.hot .sl { color: var(--ink); font-weight: 650; }
.slot-row .sv { text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.nudge { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.nudge .btn { display: inline-flex; }

/* ── 푸터 ── */
.foot {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 1.3rem clamp(1rem, 4vw, 2rem) 2.2rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: var(--ink-faint); flex-wrap: wrap;
}

@media (max-width: 520px) {
  .bar-row { grid-template-columns: 62px 1fr 3.2em; gap: .55rem; font-size: .82rem; }
  .hero { padding-top: 1.2rem; }
  .cta-row .btn { flex: 1; }
}

/* ── 잠들기 모드 ─────────────────────────────────────────────
 * 실행 중 화면 전체를 덮는 어둠막. 빛 자체가 수면을 방해하므로
 * 글자도 겨우 보일 만큼만 어둡게 둔다. 라이트 테마에서도 항상 검정. */
#sleep-dim {
  position: fixed; inset: 0; z-index: 60;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  cursor: pointer;
}
#sleep-dim[hidden] { display: none; }
#sleep-dim strong {
  font-size: 2.1rem; font-weight: 600; color: #2a3140;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
#sleep-dim .micro { color: #1d222d; }
#sleep-hz-now { display: block; margin-top: .15rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}