/* 첫 설정(온보딩) — #/setup */
.ob-top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 12px; height: 56px; padding: 0 var(--gut); background: #fff; }
.ob-top .logo { font-size: 22px; white-space: nowrap; }
.ob-top .logo small { font-size: 8px; margin-left: 3px; }
.ob-back { width: 36px; height: 36px; margin-left: -8px; display: grid; place-items: center; color: var(--ink); }
.ob-back .ico { width: 22px; height: 22px; }
.ob-prog { height: 4px; border-radius: 2px; background: var(--gray-2); overflow: hidden; }
.ob-prog i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .35s cubic-bezier(.2, .7, .3, 1); }
.ob-skip { justify-self: end; font-size: 13px; color: var(--sub); }

.ob-body { padding: 10px var(--gut) 120px; }
.ob-body.anim { animation: obIn .32s cubic-bezier(.2, .7, .3, 1); }
@keyframes obIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-body.anim { animation: none; } .ob-prog i { transition: none; } }

.ob-q { margin: 8px 0 22px; }
.ob-no { display: inline-block; padding: 3px 9px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-d); font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; }
.ob-q h1 { margin-top: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.045em; line-height: 1.32; }
.ob-q p { margin-top: 6px; color: var(--sub); font-size: 13.5px; }

/* 선택 카드(세로 리스트) */
.ob-list { display: grid; gap: 10px; }
.ob-card { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 48px 16px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--gray-2); text-align: left; transition: box-shadow .15s, background .15s, transform .12s; }
.ob-card:active, .ob-fc:active, .ob-chip:active, .ob-seg button:active { transform: scale(.985); }
.ob-card .tx { flex: 1; min-width: 0; }
.ob-card b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.ob-card small { display: block; margin-top: 3px; color: var(--sub); font-size: 13px; line-height: 1.45; }
.ob-card em { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 6px; background: var(--gray); color: var(--sub); font-size: 11.5px; font-style: normal; font-weight: 600; }
.ob-card.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.ob-card.on em { background: #fff; color: var(--accent-d); }

.ck { position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gray-2); display: grid; place-items: center; color: transparent; background: #fff; transition: background .15s, box-shadow .15s; }
.ck .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.on > .ck { background: var(--accent); box-shadow: none; color: #fff; }

/* 눈 일러스트 */
.ob-eye { width: 66px; height: 32px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ob-eye .lid { fill: #fff; }
.ob-eye .ir { fill: #3d2c26; stroke: none; }
.ob-eye .hl { fill: #fff; stroke: none; }
.ob-eye .cr { stroke: var(--accent); stroke-width: 1.8; }

/* 퍼스널 컬러 스와치 */
.ob-sw { display: flex; flex: none; border-radius: 8px; overflow: hidden; }
.ob-sw i { display: block; width: 11px; height: 44px; }
.ob-quiz { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 16px; border-radius: 14px; background: var(--gray); }
.ob-quiz span { flex: 1; }
.ob-quiz b { display: block; font-size: 15px; font-weight: 700; }
.ob-quiz small { color: var(--sub); font-size: 13px; }
.ob-quiz .ico { width: 18px; height: 18px; color: var(--sub); }

/* 피부 고민 2열 */
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 96px; padding: 14px 14px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--gray-2); text-align: left; transition: box-shadow .15s, background .15s, transform .12s; }
.ob-chip b { font-size: 14.5px; font-weight: 700; letter-spacing: -.03em; padding-right: 22px; }
.ob-chip small { color: var(--sub); font-size: 12px; line-height: 1.45; }
.ob-chip .ck { top: 12px; right: 10px; margin-top: 0; width: 20px; height: 20px; }
.ob-chip .ck .ico { width: 13px; height: 13px; }
.ob-chip.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.ob-count { margin-top: 14px; text-align: center; color: var(--sub); font-size: 13px; }
.ob-count b { color: var(--accent-d); }

/* 얼굴형 */
.ob-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ob-fc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 6px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--gray-2); transition: box-shadow .15s, background .15s, transform .12s; }
.ob-fc b { font-size: 13.5px; font-weight: 700; letter-spacing: -.03em; }
.ob-fc .ck { top: 8px; right: 8px; margin-top: 0; width: 20px; height: 20px; }
.ob-fc .ck .ico { width: 13px; height: 13px; }
.ob-face { width: 46px; height: 56px; fill: var(--gray); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.ob-fc.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.ob-fc.on .ob-face { fill: #fff; stroke: var(--accent-d); }
.ob-note { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--gray); font-size: 13.5px; line-height: 1.55; }
.ob-note b { margin-right: 4px; }
.ob-note.mute { color: var(--mute); text-align: center; }
.ob-help { display: inline-flex; align-items: center; gap: 2px; margin-top: 12px; color: var(--sub); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ob-help .ico { width: 14px; height: 14px; }

/* 메이크업 스타일 */
.ob-sub { margin: 22px 0 10px; font-size: 14.5px; font-weight: 700; }
.ob-q + .ob-sub { margin-top: 0; }
.ob-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-seg button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--gray-2); text-align: left; transition: box-shadow .15s, background .15s, transform .12s; }
.ob-seg b { font-size: 14px; font-weight: 700; letter-spacing: -.03em; }
.ob-seg small { color: var(--sub); font-size: 11.5px; line-height: 1.4; }
.ob-seg button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }

/* 완료 */
.ob-done { text-align: center; padding: 18px 0 8px; }
.ob-badge { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; animation: obPop .45s cubic-bezier(.3, 1.5, .5, 1); }
.ob-badge .ico { width: 30px; height: 30px; stroke-width: 2.6; }
@keyframes obPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ob-done h1 { font-size: 22px; font-weight: 800; letter-spacing: -.045em; }
.ob-done p { margin-top: 4px; color: var(--sub); font-size: 13px; }
.ob-sum { margin-top: 20px; border-radius: 14px; background: var(--gray); padding: 4px 16px; }
.ob-sum li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gray-2); }
.ob-sum li:first-child { border-top: 0; }
.ob-sum span { width: 78px; flex: none; color: var(--sub); font-size: 13px; }
.ob-sum b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.ob-sum b.mute { color: var(--mute); font-weight: 500; }
.ob-sum button { flex: none; font-size: 12.5px; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
.ob-recs { margin: 26px calc(var(--gut) * -1) 0; }
.ob-recs h2 { padding: 0 var(--gut) 4px; font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.ob-foot { margin-top: 18px; text-align: center; color: var(--mute); font-size: 12px; }

/* 하단 고정 CTA */
.ob-cta { position: fixed; left: 50%; bottom: 0; z-index: 30; width: 100%; max-width: 480px; transform: translateX(-50%); padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }

/* 얼굴형별 가이드 — 실제 모델 사진 + 부위 표시 (js/shapeguide.js) */
.shape-vis.sgp { height: auto; aspect-ratio: 4 / 4.3; background: #e9e6e4; }
.shape-vis.sgp .sg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sg .sil { fill: none; stroke: #fff; stroke-opacity: .85; }
.sg .z { transition: opacity .25s; }
.sg .z-contour path { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; opacity: .62; }
.sg .z-contour path.soft { opacity: .32; }
.sg .bl { fill: url(#sgB); }
.sg .z-highlight .hl { fill: none; stroke: #fff; stroke-linecap: round; opacity: .9; }
.sg .z-highlight .hlf { fill: url(#sgH); }
.sg .z-brow path { fill: none; stroke-linecap: round; }
.sg .z-brow .bw-o { stroke: #fff; stroke-opacity: .75; }
.sg .z-brow .bw { stroke: var(--c); }
.sg .bw-d { fill: var(--c); stroke: #fff; }
.shape-vis[data-z="blush"] .z:not(.z-blush),
.shape-vis[data-z="contour"] .z:not(.z-contour),
.shape-vis[data-z="brow"] .z:not(.z-brow),
.shape-vis[data-z="highlight"] .z:not(.z-highlight) { opacity: 0; }
.shape-vis[data-z="highlight"] .z-highlight { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }
.sg-cap { padding: 12px var(--gut) 0; font-size: 13.5px; line-height: 1.55; color: var(--sub); }
.sg-cap b { margin-right: 6px; color: var(--ink); font-weight: 700; }
.sg-legend { display: flex; gap: 6px; padding: 12px var(--gut) 0; overflow-x: auto; scrollbar-width: none; }
.sg-legend button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--gray-2); font-size: 13px; color: var(--sub); background: #fff; }
.sg-legend button.on { background: var(--ink); color: #fff; box-shadow: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.dot-highlight { box-shadow: inset 0 0 0 1.5px #d9c08a; background: #fff8e6; }
.tipgrid li { cursor: pointer; transition: background .15s; }
.tipgrid li.on { background: var(--gray); margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
.tipgrid .k { display: inline-flex; align-items: center; gap: 6px; }