/* 제니뷰티 - KRDS 토큰, 모바일 우선 600px 단일 컬럼, 터치 44px 이상, 인라인 스타일 없음(CSP) */
@font-face { font-family: 'JennySans'; font-weight: 400; font-display: swap; src: url('/fonts/JennySans-Regular.subset.woff2') format('woff2'); }
@font-face { font-family: 'JennySans'; font-weight: 700; font-display: swap; src: url('/fonts/JennySans-Bold.subset.woff2') format('woff2'); }

:root {
  --krds-primary: #246BEB;
  --krds-primary-dark: #0B50D0;
  --krds-secondary: #003675;
  --krds-danger: #EB003B;
  --krds-warning: #FFB724;
  --krds-success: #008A1E;
  --krds-gray-90: #1E2124;
  --krds-gray-70: #464C53;
  --krds-gray-50: #8A949E;
  --krds-gray-30: #CDD1D5;
  --krds-gray-10: #F4F5F6;
  --krds-white: #fff;
  --radius-card: 8px;
  --radius-input: 4px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--krds-gray-10); color: var(--krds-gray-90);
  font-family: 'JennySans', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; word-break: keep-all;
}
.page { max-width: 600px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--krds-white); display: flex; flex-direction: column; }
.pad { padding-left: var(--gutter); padding-right: var(--gutter); }

h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
p { margin: 0; }
a { color: var(--krds-primary-dark); }

:focus-visible { outline: 3px solid var(--krds-primary); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--krds-white); padding: 12px 16px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* 상단바 */
.appbar { display: flex; align-items: center; gap: 8px; min-height: 56px; border-bottom: 1px solid var(--krds-gray-30); background: var(--krds-white); }
.appbar .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--krds-gray-90); text-decoration: none; min-height: 44px; }
.appbar .brand img { width: 32px; height: 32px; border-radius: 8px; }
.appbar .spacer { flex: 1; }
.appbar a.back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--krds-gray-70); text-decoration: none; font-weight: 700; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 44px; padding: 0 20px; border-radius: var(--radius-card);
  border: 1px solid var(--krds-primary); background: var(--krds-primary); color: var(--krds-white);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--krds-primary-dark); }
.btn.secondary { background: var(--krds-white); color: var(--krds-primary-dark); border-color: var(--krds-primary); }
.btn.secondary:hover { background: #EEF3FD; }
.btn.block { width: 100%; }
.btn.large { min-height: 56px; font-size: 18px; }
.btn[disabled] { background: var(--krds-gray-30); border-color: var(--krds-gray-30); color: var(--krds-gray-70); cursor: not-allowed; }
.btn svg, .icon-btn svg { width: 22px; height: 22px; flex: none; }

/* 랜딩 */
.hero { padding: 40px var(--gutter) 24px; background: linear-gradient(180deg, #EEF3FD 0%, var(--krds-white) 100%); }
.hero .eyebrow { color: var(--krds-primary-dark); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.hero h1 { margin-bottom: 16px; }
.hero p.lead { color: var(--krds-gray-70); font-size: 17px; margin-bottom: 24px; }
.section { padding: 24px var(--gutter); }
.section > h2 { margin-bottom: 12px; }
.card { border: 1px solid var(--krds-gray-30); border-radius: var(--radius-card); padding: 16px; background: var(--krds-white); }
.card + .card { margin-top: 12px; }
.card h3 { font-size: 17px; margin-bottom: 4px; }
.card p { color: var(--krds-gray-70); font-size: 15px; }
.privacy { border-color: var(--krds-primary); background: #F5F8FE; }
.privacy .badge { display: inline-block; background: var(--krds-primary-dark); color: var(--krds-white); font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 999px; margin-bottom: 8px; }
.privacy strong { display: block; font-size: 19px; margin-bottom: 8px; }
.list { margin: 8px 0 0; padding-left: 20px; color: var(--krds-gray-70); font-size: 15px; }
.list li + li { margin-top: 4px; }
.footer { margin-top: auto; padding: 24px var(--gutter); color: var(--krds-gray-70); font-size: 13px; border-top: 1px solid var(--krds-gray-30); }

/* 카메라 */
.stage { position: relative; background: var(--krds-gray-90); }
.stage canvas { display: block; width: 100%; height: auto; max-height: 50vh; max-height: 50svh; object-fit: contain; margin: 0 auto; background: var(--krds-gray-90); }
.stage canvas[hidden] { display: none; }
.offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.intro { padding: 24px var(--gutter); color: var(--krds-white); display: flex; flex-direction: column; gap: 12px; min-height: 320px; justify-content: center; }
.intro[hidden] { display: none; }
.intro h2 { font-size: 20px; }
.intro p { color: #E5E8EB; font-size: 15px; }
.intro .btn.secondary { background: transparent; color: var(--krds-white); border-color: var(--krds-white); }
.intro .btn.secondary:hover { background: rgba(255, 255, 255, 0.12); }
.countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 700; color: var(--krds-white); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); pointer-events: none; }
.countdown[hidden] { display: none; }
.badge-compare { position: absolute; left: 12px; top: 12px; background: rgba(30, 33, 36, 0.8); color: var(--krds-white); font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.badge-compare[hidden] { display: none; }

.status { min-height: 24px; padding: 8px var(--gutter) 0; font-size: 14px; color: var(--krds-gray-70); }
.status.error { color: var(--krds-danger); font-weight: 700; }

.controls { padding: 12px var(--gutter) 8px; display: flex; flex-direction: column; gap: 16px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .label { padding: 0; font-size: 14px; font-weight: 700; color: var(--krds-gray-70); margin-bottom: 8px; display: block; }

/* 라디오를 칩/카드로: input 은 시각적으로 숨기되 포커스 가능 */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input, .preset input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.chip label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 56px; padding: 0 14px; border: 1px solid var(--krds-gray-30); border-radius: var(--radius-card); background: var(--krds-white); font-weight: 700; color: var(--krds-gray-70); }
.chip input:checked + label { background: var(--krds-primary); border-color: var(--krds-primary); color: var(--krds-white); }
.chip input:focus-visible + label, .preset input:focus-visible + label { outline: 3px solid var(--krds-primary); outline-offset: 2px; }
.chip input:disabled + label { opacity: 0.5; }

.presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.preset { position: relative; }
.preset label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px; border: 2px solid var(--krds-gray-30); border-radius: var(--radius-card); background: var(--krds-white); font-weight: 700; font-size: 14px; color: var(--krds-gray-90); }
.preset input:checked + label { border-color: var(--krds-primary); background: #EEF3FD; color: var(--krds-primary-dark); }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--krds-gray-30); background: #D9DCE0; }
.swatch.off { background: linear-gradient(135deg, #fff 0 50%, #D9DCE0 50% 100%); }
.swatch.natural { background: #E8D3C0; }
.swatch.peach { background: #FFC9B5; }
.swatch.warm { background: #FFD08A; }
.swatch.soft { background: #F3E3EC; }
.swatch.other { background: #CBD7F2; }

.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-row input[type=range] { flex: 1; min-height: 44px; accent-color: var(--krds-primary); }
.slider-row output { min-width: 48px; text-align: right; font-weight: 700; }
.hint { font-size: 13px; color: var(--krds-gray-70); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--krds-primary); }
select { min-height: 48px; padding: 0 12px; border: 1px solid var(--krds-gray-50); border-radius: var(--radius-input); font: inherit; background: var(--krds-white); }

/* 하단 고정 액션바 */
.actionbar { position: sticky; bottom: 0; z-index: 5; margin-top: auto; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--krds-white); border-top: 1px solid var(--krds-gray-30); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.actionbar .side { display: flex; gap: 8px; }
.actionbar .side.right { justify-content: flex-end; }
.icon-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 56px; padding: 4px 8px; border: 1px solid var(--krds-gray-30); border-radius: var(--radius-card); background: var(--krds-white); color: var(--krds-gray-90); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.icon-btn:hover { background: var(--krds-gray-10); }
.icon-btn[aria-pressed=true] { background: var(--krds-primary); border-color: var(--krds-primary); color: var(--krds-white); }
.icon-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--krds-primary); background: var(--krds-white); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.shutter::after { content: ''; width: 52px; height: 52px; border-radius: 50%; background: var(--krds-primary); }
.shutter:hover::after { background: var(--krds-primary-dark); }
.shutter[disabled] { border-color: var(--krds-gray-30); cursor: not-allowed; }
.shutter[disabled]::after { background: var(--krds-gray-30); }
.shutter.cancel::after { border-radius: 8px; width: 28px; height: 28px; background: var(--krds-danger); }
.result-actions { padding: 12px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.result-actions .full { grid-column: 1 / -1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

@media (min-width: 601px) {
  .page { box-shadow: 0 0 0 1px var(--krds-gray-30); }
  .hero { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* 새 버전 안내 바(서비스 워커 갱신) */
.update-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--krds-secondary); color: var(--krds-white); font-weight: 700; }
.update-bar .btn { min-height: 44px; background: var(--krds-white); color: var(--krds-secondary); border-color: var(--krds-white); }