/* 레이아웃: 자두빛 밤 히어로 → 블러시 본문. 로즈 하나만 강조색, 핵심 숫자는 골드. 하단 고정 CTA */
:root{
  --plum:#1E0618; --plum-2:#3A0C2C; --rose:#FF4D8D; --rose-2:#FF86B2; --rose-ink:#4C0526;
  --gold:#FFC95C; --gold-ink:#3A2600;
  --paper:#FFF3F7; --card:#FFFFFF; --line:#F2D9E4;
  --fg:#22101B; --muted:#7A5F6D; --good:#17A277; --bad:#D83A52;
  --f-disp:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-body:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-num:"Archivo","Gothic A1",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#130410; --card:#250C1E; --line:#44152F; --fg:#F8E9F0; --muted:#C09CAE;
  --plum:#0C0209; --plum-2:#2A0820; --good:#2FD3A0; --bad:#FF7A8C; color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#130410; --card:#250C1E; --line:#44152F; --fg:#F8E9F0; --muted:#C09CAE;
  --plum:#0C0209; --plum-2:#2A0820; --good:#2FD3A0; --bad:#FF7A8C; color-scheme:dark }

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--fg); font-family:var(--f-body); line-height:1.62;
  padding-bottom:84px; -webkit-font-smoothing:antialiased}
.wrap{max-width:720px; margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,.disp{font-family:var(--f-disp); font-weight:800; letter-spacing:-.025em; margin:0; text-wrap:balance; line-height:1.3}
p{margin:0}
img{display:block; max-width:100%}

/* ── 히어로 ── */
.hero{position:relative; overflow:hidden; color:#FFEAF3;
  background:radial-gradient(125% 95% at 50% -10%, var(--plum-2) 0%, var(--plum) 62%)}
.hero::after{content:""; position:absolute; inset:auto -25% -48% -25%; height:72%;
  background:radial-gradient(60% 100% at 50% 50%, rgba(255,77,141,.5), transparent 70%); pointer-events:none}
.hero .wrap{position:relative; z-index:1; padding-block:clamp(26px,6vw,46px) clamp(30px,7vw,52px)}
.verify{display:inline-flex; align-items:center; gap:7px; background:rgba(255,77,141,.18); border:1px solid rgba(255,134,178,.5);
  border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; color:#FFC2D9}
.verify b{color:#fff}
h1{font-size:clamp(27px,7vw,42px); line-height:1.24; margin-top:16px}
.payline{margin-top:12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.payline .lbl{font-size:clamp(16px,4vw,21px); font-weight:700; color:#E8A8C4}
.payline .num{font-family:var(--f-num); font-weight:800; font-size:clamp(40px,11vw,68px); line-height:1; color:var(--gold);
  text-shadow:0 0 34px rgba(255,201,92,.5); font-variant-numeric:tabular-nums}
.payline .won{font-family:var(--f-num); font-weight:800; font-size:clamp(22px,5.5vw,34px); color:var(--gold)}
.payfine{margin-top:9px; font-size:13px; color:#C98FAC}
.heroart{position:relative; margin-top:22px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,134,178,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.5); background:var(--plum-2); aspect-ratio:4/3; isolation:isolate}
.heroart img{width:100%; height:100%; object-fit:cover; transform-origin:58% 52%; animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.015)}to{transform:scale(1.11)}}
.heroart canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.heroart .sweep{position:absolute; inset:-40% -60%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(104deg, transparent 42%, rgba(255,214,235,.30) 50%, transparent 58%);
  animation:sw 7.5s ease-in-out infinite}
@keyframes sw{0%{transform:translateX(-62%)}55%,100%{transform:translateX(62%)}}
.heroart .vig{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 108%, rgba(30,6,24,.72), transparent 58%)}
@media (prefers-reduced-motion: reduce){
  .heroart img{animation:none; transform:none}
  .heroart .sweep{animation:none; opacity:0}
  .heroart canvas{display:none}
}
.hchips{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.hchip{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17); border-radius:10px;
  padding:7px 12px; font-size:13.5px; font-weight:600; color:#FBDCE9}
.hchip b{color:var(--gold)}

/* ── 섹션 ── */
section .wrap{padding-block:clamp(30px,6vw,46px)}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--rose)}
h2{font-size:clamp(21px,5.2vw,30px); margin-top:8px}
.sub{color:var(--muted); margin-top:10px; font-size:14.5px; max-width:36em}

.grid{display:grid; gap:11px; margin-top:20px}
@media(min-width:600px){ .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} }
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:17px; min-width:0;
  box-shadow:0 1px 2px rgba(34,16,27,.05)}
.card .ico{width:38px; height:38px; border-radius:11px; background:var(--rose); display:grid; place-items:center;
  color:#fff; font-family:var(--f-disp); font-weight:800; font-size:17px}
.card .t{font-family:var(--f-disp); font-weight:800; font-size:17.5px; margin-top:12px}
.card .b{font-size:14px; color:var(--muted); margin-top:5px}
.shot{border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--card)}
.shot img{width:100%; height:100%; object-fit:cover}

/* ── 비교표 ── */
.tablebox{margin-top:20px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card)}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{padding:13px 11px; text-align:center; font-size:14px; border-bottom:1px solid var(--line)}
th{font-size:13px; font-weight:800; background:var(--paper); color:var(--muted)}
th.us{background:var(--rose); color:#fff; font-size:14px}
td.rowh{text-align:left; font-weight:700; font-size:13.5px}
td.rowh small{display:block; font-weight:400; color:var(--muted); font-size:11.5px}
td.them{color:var(--muted)}
td.us{font-family:var(--f-num); font-weight:800; font-size:19px; color:var(--rose)}
td.us small{display:block; font-family:var(--f-body); font-size:11.5px; font-weight:600; color:var(--good)}
tr:last-child th,tr:last-child td{border-bottom:0}

.tiers{display:grid; gap:9px; margin-top:14px}
.tier{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:15px 17px}
.tier .l .h{font-family:var(--f-disp); font-weight:800; font-size:16px}
.tier .l .s{font-size:12.5px; color:var(--muted)}
.tier .r{text-align:right}
.tier .r .big{font-family:var(--f-num); font-weight:800; font-size:clamp(21px,5.4vw,27px); font-variant-numeric:tabular-nums}
.tier .r .s{font-size:12px; color:var(--muted)}
.tier.top{border-color:var(--gold); background:linear-gradient(100deg, rgba(255,201,92,.18), transparent 70%)}

.fine{margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.75}
.fine b{color:var(--fg)}
.fees{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.fee{border:1px solid var(--line); background:var(--card); border-radius:11px; padding:9px 12px; font-size:13px; font-variant-numeric:tabular-nums}
.fee b{font-family:var(--f-num); font-weight:800; margin-left:5px}
.fee.zero{border-color:var(--good)} .fee.zero b{color:var(--good)}

.quote{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--rose);
  border-radius:0 14px 14px 0; padding:16px 17px}
.quote .who{font-size:12.5px; color:var(--muted); font-weight:700}
.quote .q{font-family:var(--f-disp); font-weight:800; font-size:16.5px; margin-top:6px}
.quote .b{font-size:14px; color:var(--muted); margin-top:7px}

details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-top:9px}
summary{cursor:pointer; font-family:var(--f-disp); font-weight:800; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--rose); font-size:20px; line-height:1}
details[open] summary::after{content:"−"}
details p{font-size:14px; color:var(--muted); margin-top:10px}

.notice{border:1px solid var(--bad); border-radius:16px; padding:17px; margin-top:20px; background:var(--card)}
.notice h3{font-size:16.5px; color:var(--bad)}
.notice ul{margin:10px 0 0; padding-left:18px; font-size:13.5px; color:var(--muted)}
.notice li{margin-top:6px} .notice b{color:var(--fg)}

.bar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:transparent;
  padding-bottom:env(safe-area-inset-bottom,0px); pointer-events:none}
.bar a{pointer-events:auto}   /* 배경 투명(2026-11-07) — 버튼 사이 빈 곳은 뒤 화면이 눌리게 */
/* 하단 버튼 B안 (2026-11-07): 동그란 카톡 + 큰 알약 가입 버튼 */
.bar .wrap{display:flex; gap:10px; align-items:center; padding-block:10px}
.bar a{text-decoration:none; -webkit-tap-highlight-color:transparent}
.bar .k{flex:none; width:54px; height:54px; border-radius:50%; background:#FEE500; display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,.3)}
.bar .k svg{width:26px; height:26px}
.bar .j{flex:1; min-width:0; height:54px; border-radius:99px; display:flex; align-items:center; justify-content:space-between;
  padding:0 7px 0 22px; color:#fff; font-family:var(--f-disp); font-weight:800; font-size:16.5px; line-height:1.25;
  background:linear-gradient(90deg,var(--rose),var(--rose-2)); box-shadow:0 8px 22px rgba(255,77,141,.45)}
.bar .j small{display:block; font-family:var(--f-body); font-size:11.5px; font-weight:600; opacity:.88}
.bar .j .go{flex:none; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--rose); display:grid; place-items:center;
  transition:transform .2s}
.bar .j .go svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.bar .j:active .go{transform:translateX(3px)}
footer .wrap{padding-block:22px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line)}

.js .rv{opacity:.25; transform:translateY(13px); transition:opacity .5s ease, transform .5s ease}
.js .rv.on{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .js .rv{opacity:1; transform:none; transition:none} }
:focus-visible{outline:3px solid var(--rose-2); outline-offset:3px; border-radius:8px}

/* ───────── 서브 페이지 전용 ───────── */
.shero{background:radial-gradient(130% 100% at 50% -20%, var(--plum-2) 0%, var(--plum) 70%); color:#FFEAF3; position:relative; overflow:hidden}
.shero::after{content:""; position:absolute; inset:auto -30% -60% -30%; height:80%;
  background:radial-gradient(60% 100% at 50% 50%, rgba(255,77,141,.42), transparent 70%); pointer-events:none}
.shero .wrap{position:relative; z-index:1; padding-block:clamp(18px,4vw,28px) clamp(26px,6vw,42px)}
.bc{font-size:12.5px; color:#C98FAC; font-weight:600}
.bc a{color:#FFC2D9; text-decoration:none} .bc a:hover{text-decoration:underline}
.shero h1{font-size:clamp(24px,6.2vw,37px); margin-top:14px}
.shero .lead{margin-top:13px; font-size:15px; color:#E8C4D6; max-width:34em}
.shero .hchips{margin-top:18px}

/* 가로 스크롤 비교표 */
.scroller{margin-top:20px; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow-x:auto; -webkit-overflow-scrolling:touch}
.scroller table{min-width:560px}
.scroller td.rowh{min-width:132px; position:sticky; left:0; background:var(--card); z-index:1}
.scroller th:first-child{position:sticky; left:0; background:var(--paper); z-index:2; text-align:left; min-width:132px}
.scroller tr.mine td{background:rgba(255,77,141,.07)}
.scroller tr.mine td.rowh{background:rgba(255,77,141,.07); font-weight:800; color:var(--rose)}
.swipe{font-size:12px; color:var(--muted); margin-top:8px; text-align:right}
td.ok{color:var(--good); font-weight:700} td.no{color:var(--bad); font-weight:700}

/* 체크 / 경고 리스트 */
.checks{margin-top:18px; display:grid; gap:9px}
.chk{display:flex; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 16px}
.chk .n{flex:none; width:27px; height:27px; border-radius:9px; background:var(--rose); color:#fff;
  display:grid; place-items:center; font-family:var(--f-num); font-weight:800; font-size:14px}
.chk.warn .n{background:var(--bad)}
.chk .t{font-family:var(--f-disp); font-weight:800; font-size:16px}
.chk .b{font-size:14px; color:var(--muted); margin-top:5px}

/* 금액 강조 박스 */
.hl{margin-top:18px; border:1px solid var(--gold); border-radius:16px; padding:17px;
  background:linear-gradient(100deg, rgba(255,201,92,.17), transparent 72%)}
.hl .k{font-size:13px; font-weight:800; color:var(--muted)}
.hl .v{font-family:var(--f-num); font-weight:800; font-size:clamp(26px,7vw,38px); margin-top:4px; font-variant-numeric:tabular-nums}
.hl .b{font-size:13.5px; color:var(--muted); margin-top:7px}

/* 타임라인 */
.tl{margin-top:20px; display:grid; gap:0}
.tl .s{display:grid; grid-template-columns:94px 1fr; gap:14px; padding-bottom:18px; position:relative}
.tl .s::before{content:""; position:absolute; left:47px; top:26px; bottom:0; width:2px; background:var(--line)}
.tl .s:last-child{padding-bottom:0} .tl .s:last-child::before{display:none}
.tl .tm{font-family:var(--f-num); font-weight:800; font-size:13px; white-space:nowrap; color:var(--rose); padding-top:3px; text-align:right}
.tl .c{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.tl .c .t{font-family:var(--f-disp); font-weight:800; font-size:16px}
.tl .c .b{font-size:14px; color:var(--muted); margin-top:5px}

/* 관련 페이지 */
.rel{display:grid; gap:10px; margin-top:20px}
@media(min-width:600px){.rel{grid-template-columns:repeat(2,1fr)}}
.rel a{display:block; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--line); border-radius:15px; padding:16px; transition:border-color .2s, transform .2s}
.rel a:hover{border-color:var(--rose); transform:translateY(-2px)}
.rel .t{font-family:var(--f-disp); font-weight:800; font-size:16.5px}
.rel .t::after{content:" →"; color:var(--rose)}
.rel .b{font-size:13.5px; color:var(--muted); margin-top:5px}

/* 본문 단락 */
.prose{margin-top:16px; font-size:15px; color:var(--fg)}
.prose p{margin-top:12px} .prose p:first-child{margin-top:0}
.prose b{font-weight:800}
h3.sh{font-size:17.5px; margin-top:30px}
.srcs{margin-top:22px; font-size:12px; color:var(--muted); line-height:1.8}
.srcs a{color:var(--muted)}

/* ── 서브 히어로 그림 (2026-11-07) ── */
.sheroart{position:relative; margin:20px auto 0; max-width:620px; aspect-ratio:16/10;
  border-radius:20px; overflow:hidden; isolation:isolate; background:var(--plum-2);
  border:1px solid rgba(255,134,178,.38); box-shadow:0 18px 50px rgba(0,0,0,.5)}
.sheroart img{width:100%; height:100%; object-fit:cover; transform-origin:54% 50%;
  animation:skb 24s ease-in-out infinite alternate}
@keyframes skb{from{transform:scale(1.015)} to{transform:scale(1.10)}}
.sheroart .vig{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(118% 82% at 50% 106%, rgba(30,6,24,.5), transparent 62%)}
.sheroart .sweep{position:absolute; inset:-40% -60%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(104deg, transparent 42%, rgba(255,214,235,.24) 50%, transparent 58%);
  animation:ssw 7.5s ease-in-out infinite}
@keyframes ssw{0%{transform:translateX(-62%)} 55%,100%{transform:translateX(62%)}}
@media (prefers-reduced-motion: reduce){
  .sheroart img{animation:none; transform:none}
  .sheroart .sweep{animation:none; opacity:0}
}

/* 스크롤바 숨김 (2026-11-07) — 스크롤 동작은 그대로, 막대만 안 보이게 */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}

/* 폰에서 표 → 카드 (2026-11-07) — 가로로 넘길 일이 없게. PC 는 표 그대로 */
.swipe{display:none}
.scroller.fit table{min-width:0}
@media(max-width:640px){
 .tcard{border:0; background:none; overflow:visible; border-radius:0}
 .tcard table{min-width:0}
 .tcard table,.tcard tbody,.tcard tr,.tcard td{display:block; width:auto}
 .tcard tr:first-child{display:none}
 .tcard tr{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-top:10px;
   display:grid; grid-template-columns:1fr 1fr; gap:8px 14px}
 .tcard tr:first-child+tr{margin-top:0}
 .tcard tr.mine{border-color:var(--rose); background:rgba(255,77,141,.06); box-shadow:0 6px 18px rgba(255,77,141,.13)}
 .tcard td,.tcard tr.mine td{padding:0; border:0; text-align:left; font-size:14px; background:none; min-width:0}
 .tcard td.rowh,.tcard tr.mine td.rowh{grid-column:1/-1; position:static; background:none; min-width:0; font-size:16px;
   padding-bottom:7px; border-bottom:1px dashed var(--line)}
 .tcard td.rowh small{display:inline; margin-left:6px}
 .tcard td:not(.rowh)::before{content:attr(data-label); display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:1px}
}

/* 제목이 단어 중간에서 줄바뀜되지 않게 (2026-11-07) */
h1,h2,h3{word-break:keep-all}

/* 하단 회사 정보 (2026-11-07) */
footer .wrap{line-height:1.7} footer .wrap p{margin:0} footer b{color:var(--fg); font-weight:700}
footer .brand{font-weight:800; color:var(--fg); font-size:13.5px; margin-bottom:6px!important} footer .fine{margin-top:8px!important; font-size:11.5px}