/* ════════════════════════════════════════════════════════════════
   KOREA GLOW · skin.css — 피부 진단 페이지
   style.css의 디자인 토큰(--burgundy / --gold / --dusty-pink 등)을
   그대로 이어받아, "무료로 받아보는 피부 리포트"처럼 보이게 한다.
   ════════════════════════════════════════════════════════════════ */

.sk-header{ padding-bottom:30px; }
.sk-back-link{ display:inline-block; margin-top:14px; color:var(--dusty-pink); font-size:13px;
  text-decoration:none; position:relative; z-index:1; letter-spacing:0.2px; }
.sk-back-link:hover{ text-decoration:underline; }

#skinApp{ max-width:720px; margin:0 auto; padding:0 16px 44px; }

/* 화면이 바뀔 때 부드럽게 올라오도록 */
@keyframes skEnter{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes skPop{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.sk-enter{ animation:skEnter 0.32s cubic-bezier(0.22,0.8,0.3,1) both; }
@media (prefers-reduced-motion:reduce){
  .sk-enter, .sk-opt{ animation:none !important; }
}

/* ── 인트로 ────────────────────────────────────────────────── */
.sk-intro{ position:relative; overflow:hidden; background:var(--white); border-radius:22px;
  margin-top:-18px; padding:34px 24px 28px; box-shadow:var(--shadow); text-align:center; z-index:2; }
.sk-intro-glow{ position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:280px; height:180px; background:radial-gradient(ellipse, rgba(201,161,90,0.20) 0%, transparent 70%);
  pointer-events:none; }
.sk-intro-emoji{ font-size:42px; line-height:1; margin-bottom:14px; position:relative; }
.sk-title{ font-size:24px; font-weight:700; color:var(--burgundy-dark); line-height:1.38; position:relative; }
.sk-rule{ width:44px; height:2px; background:var(--gold); margin:16px auto 0; border-radius:2px; }
.sk-sub{ margin-top:14px; font-size:14px; line-height:1.75; color:var(--ink-soft); }
.sk-intro-list{ list-style:none; text-align:left; margin:24px 0 26px; display:flex; flex-direction:column; gap:10px; }
.sk-intro-list li{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.65;
  color:var(--ink); background:var(--ivory); border-radius:14px; padding:13px 15px; }
.sk-num{ flex-shrink:0; width:21px; height:21px; border-radius:50%; background:var(--burgundy); color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.sk-intro-list b{ color:var(--burgundy-dark); font-weight:700; }
.sk-start{ width:100%; }
.sk-note{ margin-top:13px; font-size:11.5px; color:var(--ink-soft); }
.sk-mission{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(125,42,69,0.10);
  font-size:11.5px; line-height:1.8; color:var(--ink-soft); }

/* ── 설문 ──────────────────────────────────────────────────── */
.sk-quiz{ background:var(--white); border-radius:22px; margin-top:-18px; padding:24px 20px 26px;
  box-shadow:var(--shadow); position:relative; z-index:2; }
.sk-progress{ height:5px; background:var(--dusty-pink); border-radius:100px; overflow:hidden; }
.sk-progress-bar{ height:100%; border-radius:100px; transition:width 0.3s cubic-bezier(0.22,0.8,0.3,1);
  background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%); }
.sk-progress-text{ margin-top:9px; font-size:11.5px; color:var(--ink-soft); font-weight:700; letter-spacing:1px; }
.sk-q{ margin-top:18px; font-family:'Noto Serif KR',serif; font-size:20px; font-weight:600;
  line-height:1.5; color:var(--ink); letter-spacing:-0.2px; }
.sk-q-hint{ margin-top:9px; font-size:12px; color:var(--burgundy); font-weight:600; }
.sk-opts{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.sk-opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--ivory); border:1.5px solid transparent; border-radius:15px; padding:15px 16px;
  font-family:inherit; font-size:14.5px; line-height:1.5; color:var(--ink);
  transition:border-color 0.14s, background 0.14s, transform 0.1s;
  animation:skPop 0.3s cubic-bezier(0.22,0.8,0.3,1) both; }
.sk-opt:hover{ border-color:rgba(125,42,69,0.32); background:#fff; }
.sk-opt:active{ transform:scale(0.985); }
.sk-opt-mark{ flex-shrink:0; width:24px; height:24px; border-radius:50%;
  border:1.5px solid rgba(125,42,69,0.22); background:var(--white); color:var(--ink-soft);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.sk-opt-text{ flex:1; }
.sk-opt.on{ background:var(--dusty-pink); border-color:var(--burgundy); }
.sk-opt.on .sk-opt-mark{ border-color:var(--burgundy); background:var(--burgundy); color:#fff; font-size:0; }
.sk-opt.on .sk-opt-mark::after{ content:"✓"; font-size:12px; font-weight:700; }
.sk-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.sk-btn-ghost{ background:none; border:1.5px solid rgba(125,42,69,0.25); color:var(--burgundy);
  border-radius:100px; padding:11px 22px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.sk-btn-ghost:hover{ background:var(--dusty-pink); }
.sk-btn-next{ flex:1; max-width:240px; }

/* ── 결과 ──────────────────────────────────────────────────── */
.sk-result{ margin-top:-18px; position:relative; z-index:2; }

.sk-type-card{ position:relative; overflow:hidden; color:#fff; border-radius:22px;
  padding:30px 22px 26px; text-align:center; box-shadow:var(--shadow);
  background:linear-gradient(152deg, var(--burgundy) 0%, var(--burgundy-dark) 100%); }
.sk-type-card::after{ content:""; position:absolute; right:-50px; top:-60px; width:200px; height:200px;
  background:radial-gradient(circle, rgba(201,161,90,0.28) 0%, transparent 70%); pointer-events:none; }
.sk-type-label{ font-size:11px; letter-spacing:1.6px; color:var(--dusty-pink); font-weight:700;
  text-transform:uppercase; position:relative; }
.sk-type-code{ font-family:'Noto Serif KR',serif; font-size:46px; font-weight:700; letter-spacing:5px;
  margin:8px 0 2px; position:relative; text-shadow:0 2px 12px rgba(0,0,0,0.18); }
.sk-type-rule{ width:38px; height:2px; background:var(--gold); margin:10px auto; border-radius:2px; position:relative; }
.sk-type-name{ font-size:15.5px; font-weight:600; color:rgba(255,255,255,0.94); position:relative; }

.sk-h3{ margin:30px 0 13px; font-size:17px; font-weight:700; color:var(--burgundy-dark);
  display:flex; align-items:center; gap:10px; }
.sk-h3::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(201,161,90,0.55), transparent); }
.sk-sub-note{ margin:-7px 0 14px; font-size:12.5px; color:var(--ink-soft); line-height:1.65; }

.sk-axes{ background:var(--white); border-radius:18px; padding:20px 18px 10px;
  box-shadow:0 2px 12px rgba(90,30,51,0.06); }
.sk-axis{ margin-bottom:20px; }
.sk-axis-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.sk-axis-name{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.sk-axis-val{ font-size:13.5px; color:var(--burgundy); font-weight:700; }
.sk-axis-track{ position:relative; height:6px; border-radius:100px;
  background:linear-gradient(90deg, var(--dusty-pink) 0%, var(--gold) 100%); }
.sk-axis-dot{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  background:var(--burgundy); border:3px solid var(--white); transform:translate(-50%,-50%);
  box-shadow:0 1px 6px rgba(90,30,51,0.4); }
.sk-axis-ends{ display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color:var(--ink-soft); }

.sk-reading{ background:var(--white); border-radius:18px; padding:20px 18px;
  box-shadow:0 2px 12px rgba(90,30,51,0.06); }
.sk-reading p{ font-size:13.5px; line-height:1.85; color:var(--ink); }
.sk-reading p + p{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(125,42,69,0.09); }

.sk-caution{ margin-top:16px; background:#FFF6E8; border:1px solid #E8D3A8; border-radius:16px; padding:16px 17px; }
.sk-caution-title{ font-size:13.5px; font-weight:700; color:#8A5A15; margin-bottom:8px; }
.sk-caution p{ font-size:12.5px; line-height:1.8; color:#6B4A18; }

.sk-uv-note{ margin-top:14px; background:var(--dusty-pink); border-radius:16px; padding:15px 17px;
  font-size:12.5px; line-height:1.75; color:var(--burgundy-dark); font-weight:500; }

/* 가격 우선 토글 */
.sk-budget{ display:flex; align-items:center; gap:9px; background:var(--white); border-radius:100px;
  padding:11px 16px; margin-bottom:14px; font-size:12.5px; color:var(--ink); cursor:pointer;
  box-shadow:0 2px 8px rgba(90,30,51,0.05); border:1px solid rgba(125,42,69,0.10); }
.sk-budget input{ width:17px; height:17px; accent-color:var(--burgundy); cursor:pointer; flex-shrink:0; }

/* 루틴 — 왼쪽에 세로선을 그어 순서가 보이게 */
.sk-steps{ display:flex; flex-direction:column; gap:14px; position:relative; }
.sk-step{ background:var(--white); border-radius:18px; padding:16px; box-shadow:0 2px 12px rgba(90,30,51,0.06);
  border-left:3px solid var(--dusty-pink); }
.sk-step-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.sk-step-name{ font-size:14.5px; font-weight:700; color:var(--burgundy); }
.sk-step-time{ background:var(--ivory); color:var(--burgundy-dark); border:1px solid rgba(201,161,90,0.45);
  border-radius:100px; padding:2px 9px; font-size:10.5px; font-weight:700; }
.sk-step-note{ width:100%; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }

.sk-p-card{ display:flex; gap:13px; align-items:flex-start; }
.sk-p-card.alt{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(125,42,69,0.09); }
.sk-p-thumb{ flex-shrink:0; width:92px; height:92px; border-radius:14px; overflow:hidden;
  background:var(--ivory); display:block; }
.sk-p-card.alt .sk-p-thumb{ width:64px; height:64px; border-radius:11px; }
.sk-p-thumb img{ width:100%; height:100%; object-fit:contain; }
.sk-p-body{ flex:1; min-width:0; }
.sk-p-brand{ font-size:10.5px; color:var(--ink-soft); font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.sk-p-name{ display:block; margin-top:3px; font-size:14px; font-weight:600; line-height:1.45;
  color:var(--ink); text-decoration:none; }
.sk-p-card.alt .sk-p-name{ font-size:12.5px; }
.sk-p-name:hover{ text-decoration:underline; }
.sk-why{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.sk-why-chip{ background:var(--dusty-pink); color:var(--burgundy-dark); border-radius:100px;
  padding:3px 10px; font-size:10.5px; font-weight:700; }
.sk-p-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.sk-p-price{ font-size:15px; font-weight:700; color:var(--burgundy-dark); }
.sk-p-price .kip{ font-size:11px; font-weight:500; }
.sk-add{ flex-shrink:0; background:var(--burgundy); color:#fff; border:none; border-radius:100px;
  padding:9px 17px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background 0.15s; }
.sk-add:hover{ background:var(--burgundy-dark); }
.sk-add.done{ background:var(--success); }

.sk-alts{ margin-top:10px; }
.sk-alts summary{ cursor:pointer; font-size:12px; color:var(--burgundy); font-weight:700;
  list-style:none; padding:7px 0; }
.sk-alts summary::-webkit-details-marker{ display:none; }
.sk-alts summary::before{ content:"▸ "; }
.sk-alts[open] summary::before{ content:"▾ "; }

.sk-empty{ background:var(--ivory); border-radius:14px; padding:18px; font-size:12.5px;
  color:var(--ink-soft); text-align:center; }

.sk-add-all{ width:100%; margin-top:16px; }
.sk-add-all.done{ background:var(--success); }

.sk-extra-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.sk-extra-grid .sk-p-card{ background:var(--white); border-radius:16px; padding:14px;
  box-shadow:0 2px 10px rgba(90,30,51,0.05); }
.sk-extra-grid .sk-p-thumb{ width:70px; height:70px; border-radius:12px; }
.sk-extra-grid .sk-p-name{ font-size:13px; }

.sk-share-btn{ width:100%; margin-top:26px; background:var(--white); color:var(--burgundy);
  border:1.5px solid rgba(125,42,69,0.28); border-radius:100px; padding:14px;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.15s; }
.sk-share-btn:hover{ background:var(--dusty-pink); }
.sk-share-btn.done{ background:var(--success); color:#fff; border-color:var(--success); }

.sk-share-hint{ margin-top:12px; font-size:12px; color:var(--ink-soft); text-align:center; line-height:1.65; }
.sk-result-actions{ display:flex; gap:10px; margin-top:16px; }
.sk-result-actions .sk-btn-ghost{ flex:1; }
.sk-btn-catalog{ flex:1; text-align:center; text-decoration:none; display:flex;
  align-items:center; justify-content:center; }
.sk-disclaimer{ margin-top:24px; font-size:11px; line-height:1.85; color:var(--ink-soft);
  background:var(--ivory); border-radius:14px; padding:15px 16px; }

/* ── PC ────────────────────────────────────────────────────── */
@media (min-width:760px){
  .sk-title{ font-size:29px; }
  .sk-q{ font-size:22px; }
  .sk-extra-grid{ grid-template-columns:1fr 1fr; }
  .sk-type-code{ font-size:58px; }
  .sk-intro, .sk-quiz{ padding-left:34px; padding-right:34px; }
}

/* ── index.html에 얹는 진단 배너 ─────────────────────────────── */
.skin-cta{ display:flex; align-items:center; gap:14px; margin:14px 16px 0; padding:16px 18px;
  background:linear-gradient(140deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  border-radius:18px; color:#fff; text-decoration:none; box-shadow:var(--shadow);
  position:relative; overflow:hidden; transition:transform 0.15s; }
.skin-cta::after{ content:""; position:absolute; right:-40px; top:-50px; width:160px; height:160px;
  background:radial-gradient(circle, rgba(201,161,90,0.28) 0%, transparent 70%); pointer-events:none; }
.skin-cta:hover{ transform:translateY(-1px); }
.skin-cta-emoji{ font-size:30px; flex-shrink:0; position:relative; }
.skin-cta-text{ flex:1; min-width:0; position:relative; }
.skin-cta-title{ display:block; font-size:15px; font-weight:700; }
.skin-cta-sub{ display:block; font-size:11.5px; color:var(--dusty-pink); margin-top:3px; line-height:1.5; }
.skin-cta-arrow{ flex-shrink:0; font-size:20px; color:var(--dusty-pink); position:relative; }
/* 두 배너가 같은 색이면 둘 다 안 눌린다 — 성분 사전은 아이보리/골드 쪽으로 구분한다 */
.ing-cta-banner{ margin-top:9px; background:linear-gradient(140deg, #6B4A2F 0%, #4A3220 100%); }
.ing-cta-banner::after{ background:radial-gradient(circle, rgba(201,161,90,0.34) 0%, transparent 70%); }
.ing-cta-banner .skin-cta-sub{ color:#E8D3A8; }
.ing-cta-banner .skin-cta-arrow{ color:#E8D3A8; }