/* 2026-10-27 Claude 후보: 수능 상세페이지 v2 — 청월당 수능 상세의 흐름(시험일 → 불안 공감 → 캐릭터 → 실력 발휘도 → 부적 → 주의사항 잠김 → 받는 풀이 → 목차 → 가격 → 묻는 것).
   page.css·customer-page.css 다음에 읽힌다. 새 칸은 전부 .v2-* 로만 만들고, 공용 칸(.mast·.button·.faq·footer·.sticky)은 이 페이지(.csat-detail-v2)에서만 덮는다. */
.csat-detail-v2{--v2-gold:#e8c977;--v2-gold-soft:rgba(232,201,119,.16);--v2-ink:#fdf7ec;--v2-text:#e6dccb;--v2-sub:#b9ae9f;--v2-night:#0c0a11;--v2-card:#17141f;--v2-red:#c8452f;--v2-paper:#efd88f;--serif:Batang,"Noto Serif KR",Georgia,serif}
.csat-detail-v2 main{background:var(--v2-night);max-width:520px}
.csat-detail-v2 .button{justify-content:center;gap:10px;text-align:center}
.v2-section{padding:64px 22px;position:relative}
.v2-section h2{margin:0 0 26px;font:400 clamp(27px,7.4vw,36px)/1.5 var(--serif);letter-spacing:-.05em;color:var(--v2-ink);text-align:center;word-break:keep-all}
.v2-section h2 mark,.v2-hero mark{background:none;color:var(--v2-gold)}
.v2-eyebrow,.v2-kicker{margin:0 0 14px;font:600 13px/1.6 var(--sans);letter-spacing:.08em;color:var(--v2-gold);text-align:center}

/* 1. 시험일 */
.v2-hero{position:relative;overflow:hidden;padding:46px 22px 40px;text-align:center;background:radial-gradient(ellipse at 50% 18%,#2a2440 0%,transparent 62%),linear-gradient(180deg,#0f0d18 0%,#0c0a11 100%)}
.v2-stars{position:absolute;inset:0;pointer-events:none;opacity:.8;background-image:radial-gradient(circle at 12% 10%,#fff7 1px,transparent 1.6px),radial-gradient(circle at 78% 16%,#fde9b588 1px,transparent 1.6px),radial-gradient(circle at 92% 46%,#fff6 1px,transparent 1.5px),radial-gradient(circle at 28% 58%,#fde9b566 1px,transparent 1.5px);background-size:170px 210px,240px 280px,310px 360px,200px 260px}
.v2-hero>*{position:relative}
.v2-date{display:flex;justify-content:center;gap:8px;margin:6px 0 26px}
.v2-date span{min-width:64px;padding:10px 10px 8px;border:1px solid rgba(232,201,119,.42);border-radius:10px;background:linear-gradient(180deg,#221d2d,#15121d);font:700 26px/1.2 var(--sans);letter-spacing:.02em;color:var(--v2-ink);box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.v2-date span:first-child{min-width:86px}
.v2-hero-word{margin:0 0 18px;font:400 clamp(64px,22vw,96px)/1.1 var(--serif);letter-spacing:.06em;color:var(--v2-ink);text-shadow:0 0 34px rgba(232,201,119,.28)}
.v2-corner{position:relative;display:inline-block;padding:10px 26px}
.v2-corner::before,.v2-corner::after{content:"";position:absolute;width:22px;height:22px;border-color:var(--v2-gold);border-style:solid}
.v2-corner::before{left:0;top:0;border-width:2px 0 0 2px}
.v2-corner::after{right:0;bottom:0;border-width:0 2px 2px 0}
.v2-hero-line{margin:0 0 22px;font:18px/1.8 var(--sans);color:var(--v2-text)}
.v2-hero-line strong{font-weight:700;color:var(--v2-ink)}
.v2-dday{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 26px;padding:8px 18px;border-radius:999px;background:var(--v2-gold-soft);border:1px solid rgba(232,201,119,.4);font:15px/1.5 var(--sans);color:var(--v2-text)}
.v2-dday b{font:800 22px/1.2 var(--sans);color:var(--v2-gold)}
.v2-cta{max-width:420px;margin:0 auto}
.v2-down{display:block;margin-top:18px;font:14px/1.6 var(--sans);color:var(--v2-sub);padding:10px 0}

/* 2. 불안 공감 */
.v2-worry{background:linear-gradient(180deg,#0c0a11,#121019)}
.v2-bubbles{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto}
.v2-bubbles p{position:relative;margin:0;max-width:82%;padding:13px 17px;border-radius:18px;font:16px/1.6 var(--sans);color:var(--v2-text);background:#211d2b;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.v2-bubbles .left{align-self:flex-start;border-bottom-left-radius:5px}
.v2-bubbles .right{align-self:flex-end;border-bottom-right-radius:5px;background:#2a2433}
.v2-bubbles .loud{align-self:center;max-width:100%;margin-top:10px;padding:16px 20px;border:1px solid rgba(200,69,47,.55);background:rgba(200,69,47,.12);font:700 19px/1.5 var(--sans);color:#ffd9cf;text-align:center}

/* 3. 김삿갓 */
.v2-meet{padding-top:30px;background:#121019}
.v2-portrait{position:relative;margin:0 -22px;overflow:hidden}
.v2-portrait img{display:block;width:100%;height:440px;object-fit:cover;object-position:50% 22%;mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 72%,transparent 100%)}
.v2-speech{position:absolute;left:22px;bottom:34px;margin:0;padding:14px 18px;border-radius:16px 16px 16px 4px;background:rgba(253,247,236,.95);color:#1e1912;font:17px/1.55 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.v2-speech strong{font-weight:800}
.v2-speech.small{left:auto;right:6px;bottom:18px;font-size:15px;border-radius:16px 16px 4px 16px}
.v2-card{margin-top:-6px;padding:22px 20px;border:1px solid rgba(232,201,119,.28);border-radius:16px;background:var(--v2-card)}
.v2-name{margin:0 0 12px;font:400 24px/1.4 var(--serif);color:var(--v2-gold)}
.v2-name span{margin-left:8px;font:13px/1.5 var(--sans);color:var(--v2-sub)}
.v2-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.v2-card li{position:relative;padding-left:20px;font:16px/1.65 var(--sans);color:var(--v2-text)}
.v2-card li::before{content:"";position:absolute;left:3px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--v2-gold)}

/* 말풍선 머리말(4·6·7) */
.v2-note-bubble{position:relative;width:fit-content;max-width:100%;margin:0 auto 26px;padding:14px 22px;border-radius:18px;background:rgba(253,247,236,.95);color:#1e1912;font:17px/1.6 var(--sans);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.v2-note-bubble::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;margin-left:-9px;background:inherit;transform:rotate(45deg);border-radius:0 0 4px 0}
.v2-note-bubble strong{font-weight:800}
.v2-note-bubble.dark{background:#2a2433;color:var(--v2-ink);border:1px solid rgba(232,201,119,.3)}
.v2-note-bubble.dark::after{border:solid rgba(232,201,119,.3);border-width:0 1px 1px 0}

/* 4. 실력 발휘도 */
.v2-gauge-section{background:radial-gradient(ellipse at 50% 40%,#231d33 0%,transparent 70%),#0e0c14}
.v2-gauge-card{max-width:400px;margin:0 auto;padding:26px 20px 22px;border:1px solid rgba(232,201,119,.3);border-radius:20px;background:linear-gradient(180deg,#1b1724,#131019);text-align:center;box-shadow:0 14px 36px rgba(0,0,0,.4)}
.v2-gauge-q{margin:0 0 14px;font:16px/1.6 var(--sans);color:var(--v2-sub)}
.v2-gauge-q strong{display:block;font:400 22px/1.5 var(--serif);color:var(--v2-ink)}
.v2-gauge{position:relative;width:min(260px,100%);margin:0 auto}
.v2-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.v2-gauge path{fill:none;stroke-width:14;stroke-linecap:round}
.v2-gauge .track{stroke:rgba(255,255,255,.09)}
.v2-gauge .fill{stroke:var(--v2-gold);filter:drop-shadow(0 0 6px rgba(232,201,119,.45));animation:v2-gauge-draw 1.6s ease-out both}
@supports (animation-timeline:view()){.v2-gauge .fill{animation:v2-gauge-draw linear both;animation-timeline:view();animation-range:entry 30% cover 50%}}
@keyframes v2-gauge-draw{from{stroke-dashoffset:86}to{stroke-dashoffset:0}}
.v2-gauge-num{position:absolute;left:0;right:0;bottom:16px;margin:0;color:var(--v2-ink)}
.v2-gauge-num b{font:800 54px/1 var(--sans);letter-spacing:-.04em}
.v2-gauge-num span{font:700 22px/1 var(--sans);margin-left:2px;color:var(--v2-gold)}
.v2-gauge-label{margin:2px 0 0;font:600 14px/1.5 var(--sans);letter-spacing:.06em;color:var(--v2-gold)}
.v2-gauge-verdict{margin:18px 0 8px;font:400 21px/1.6 var(--serif);color:var(--v2-ink)}
.v2-gauge-detail{margin:0;font:15px/1.7 var(--sans);color:var(--v2-text)}
.v2-sample-mark{margin:16px 0 0;font:12.5px/1.5 var(--sans);color:#8e8597}

/* 5. 합격 부적 */
.v2-talisman-section{background:linear-gradient(180deg,#0e0c14,#15111b)}
.v2-point{width:fit-content;margin:0 auto 12px;padding:3px 14px;border-radius:999px;background:var(--v2-gold);color:#1e1709;font:800 12px/1.6 var(--sans);letter-spacing:.14em}
.v2-talismans{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px;margin:0 auto 26px;max-width:420px}
.tal{position:relative;flex:0 0 calc((100% - 20px)/3);margin:0;display:flex;flex-direction:column;align-items:center}
.tal img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.tal figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:8px;text-align:center}
.tal figcaption b{font:400 20px/1.2 var(--serif);color:var(--v2-gold)}
.tal figcaption span{font:12.5px/1.45 var(--sans);color:var(--v2-text);word-break:keep-all}
.tal figcaption em{font:600 11px/1.4 var(--sans);letter-spacing:.08em;color:var(--v2-sub)}
/* 그림이 아직 없을 때(이미지가 지워지면) — 노란 종이에 붉은 글씨로 부적 모양을 그린다 */
.tal:not(:has(img)) figcaption{width:100%;aspect-ratio:2/3;justify-content:center;gap:6px;margin:0;padding:12px 8px;border-radius:4px;background:radial-gradient(ellipse at 50% 30%,#f7e7a8,var(--v2-paper) 60%,#d9bd62);box-shadow:inset 0 0 0 3px var(--v2-paper),inset 0 0 0 5px var(--v2-red),inset 0 0 0 8px var(--v2-paper),inset 0 0 0 9px var(--v2-red),0 8px 20px rgba(0,0,0,.45)}
.tal:not(:has(img)) figcaption b{font-size:40px;color:var(--v2-red);text-shadow:0 0 1px #7a1d10}
.tal:not(:has(img)) figcaption span{color:#5b2a17;font-size:11.5px;font-weight:700}
.tal:not(:has(img)) figcaption em{color:var(--v2-red);font-size:12px;letter-spacing:.2em}
.v2-box{max-width:400px;margin:0 auto;padding:16px 18px;border:1px dashed rgba(232,201,119,.5);border-radius:14px;background:var(--v2-gold-soft);font:16px/1.7 var(--sans);color:var(--v2-text);text-align:center}
.v2-box strong{color:var(--v2-ink);font-weight:800}

/* 6. 주의사항(잠김) */
.v2-caution-section{background:#15111b}
.v2-locked{position:relative;max-width:420px;margin:0 auto;padding:22px 20px 20px;border:1px solid rgba(200,69,47,.45);border-radius:16px;background:#1d1720;overflow:hidden}
.v2-locked-title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:800 17px/1.5 var(--sans);color:#ffb9a8}
.v2-locked-title::before{content:"!";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--v2-red);color:#fff;font-size:14px}
.v2-locked-open{margin:0;font:16px/1.85 var(--sans);color:var(--v2-text)}
.v2-locked-blur{position:relative;margin-top:2px;user-select:none;-webkit-user-select:none}
.v2-locked-blur p{margin:0;font:16px/1.85 var(--sans);color:var(--v2-text);filter:blur(5px);opacity:.75}
.v2-locked-blur::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,23,32,0) 0%,rgba(29,23,32,.85) 70%,#1d1720 100%)}
.v2-lock{position:relative;margin:6px 0 0;text-align:center;font:700 15px/1.6 var(--sans);color:var(--v2-gold)}
.v2-lock span{margin-right:4px}

/* 7. 받는 풀이 */
.v2-more{background:linear-gradient(180deg,#15111b,#0f0d15)}
.v2-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:440px;margin:0 auto}
.v2-chips span{padding:10px 14px;border:1px solid rgba(232,201,119,.3);border-radius:999px;background:#1c1825;font:14.5px/1.4 var(--sans);color:var(--v2-text)}
.v2-chips b{font-weight:800;color:var(--v2-gold)}

/* 8. 전체 목차 */
.v2-toc{background:#0f0d15}
.v2-toc ol{max-width:440px;margin:0 auto;padding:0;list-style:none;border-top:1px solid rgba(232,201,119,.22)}
.v2-toc li{padding:16px 2px;border-bottom:1px solid rgba(232,201,119,.16);font:400 19px/1.55 var(--serif);color:var(--v2-ink)}
.v2-toc li small{display:block;margin-bottom:2px;font:700 12px/1.5 var(--sans);letter-spacing:.1em;color:var(--v2-gold)}
.v2-toc li p{margin:8px 0 0;font:14px/1.75 var(--sans);color:var(--v2-sub)}

/* 9. 가격 */
.csat-detail-v2 .v2-offer{text-align:center;background:radial-gradient(ellipse at 50% 20%,#2a2238 0%,transparent 70%),#15121c}
.v2-offer-lead{margin:0;font:400 22px/1.5 var(--serif);color:var(--v2-text)}
.csat-detail-v2 .v2-offer .price{margin:10px 0 22px}
.v2-offer-portrait{position:relative;width:min(300px,86%);margin:0 auto 24px}
.v2-offer-portrait img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%;border-radius:50%;border:2px solid rgba(232,201,119,.45);box-shadow:0 0 0 8px rgba(232,201,119,.08),0 14px 34px rgba(0,0,0,.45)}
.csat-detail-v2 .v2-offer .offer-note{margin-top:14px}

/* 10. 묻는 것 */
.csat-detail-v2 .v2-faq h2{text-align:left}
.csat-detail-v2 footer p{font-family:var(--serif)}

@media (max-width:374px){
 .v2-section{padding:56px 18px}
 .v2-portrait{margin:0 -18px}
 .v2-date span{min-width:56px;font-size:23px}
 .v2-date span:first-child{min-width:76px}
 .v2-bubbles p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.v2-gauge .fill{animation:none}}
.v2-tag{margin-left:auto;padding:1px 9px;border:1px solid rgba(232,201,119,.45);border-radius:999px;font:600 11.5px/1.6 var(--sans);letter-spacing:.04em;color:var(--v2-gold)}