/* 태권에듀 공개 페이지 디자인 (소개 · 요금 · 결제) — 요즘 앱처럼: 깊은 남색 바탕, 은은한 빛, 유리 같은 카드, 둥근 알약 단추, 큰 글씨
   배치: 위에 떠 있는 유리 메뉴 → 큰 제목 + 폰 모양 맛보기 → 숫자 타일 → 구역마다 작은 머리말 → 요금 3단 카드 → 접히는 질문 */
:root{
  --bg:#070b16; --bg2:#0c1326; --ink:#f3f6fc; --ink-dim:#9aa7c2; --ink-faint:#6b7894;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --gold:#f2b93b; --gold-2:#ffd36a; --gold-ink:#1d1403; --blue:#6f9bff; --mint:#3ddc97; --bad:#ff6b5e;
  --grad-gold:linear-gradient(135deg,#ffd978 0%,#f2b93b 45%,#e08f17 100%);
  --grad-ink:linear-gradient(120deg,#ffffff 0%,#c9d6ff 100%);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  /* 예전 이름 — 스크립트가 만드는 글에서 쓰는 색 */
  --ground:var(--bg); --panel:#141d36; --panel-3:#101831; --good:var(--mint);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;overscroll-behavior-x:none}
body{margin:0;max-width:100%;overflow-x:clip;overscroll-behavior-x:none;color:var(--ink);font-family:var(--font);line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(88,130,255,.20), transparent 62%),
    radial-gradient(760px 480px at 96% 4%, rgba(242,185,59,.13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(61,220,151,.07), transparent 60%),
    var(--bg);
  background-attachment:fixed}
a{color:var(--gold-2);text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.dim{color:var(--ink-dim);font-size:15.5px}
.err{color:var(--bad);font-size:15.5px;min-height:20px;margin:10px 0 0}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:8px}

@supports not (overflow-x:clip){ body{overflow-x:hidden} }
/* ---------- 메뉴 ---------- */
.top{position:sticky;top:calc(10px + env(safe-area-inset-top, 0px));z-index:40;display:flex;align-items:center;gap:10px;margin-top:calc(10px + env(safe-area-inset-top, 0px));padding:8px 10px 8px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(10,15,30,.72);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.home{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.mark{flex:none;width:34px;height:34px;border-radius:11px;background:var(--grad-gold);display:grid;place-items:center;color:var(--gold-ink);font-weight:900;box-shadow:0 6px 18px -6px rgba(242,185,59,.7)}
.home b{font-size:18px;letter-spacing:-.02em;white-space:nowrap} .home small{display:block;font-size:12.5px;color:var(--ink-faint);letter-spacing:.14em;white-space:nowrap}
.top nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.top nav a.link{color:var(--ink-dim);text-decoration:none;font-size:16px;padding:9px 13px;border-radius:999px;white-space:nowrap}
.top nav a.link:hover{color:var(--ink);background:var(--glass-2)}

/* ---------- 단추 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);background:var(--glass-2);color:var(--ink);border-radius:14px;padding:12px 20px;font-size:17px;font-weight:600;
  text-decoration:none;cursor:pointer;font-family:inherit;min-height:50px;touch-action:manipulation;transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;letter-spacing:-.01em}
.btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.pri{background:var(--grad-gold);border-color:transparent;color:var(--gold-ink);font-weight:800;box-shadow:0 12px 28px -12px rgba(242,185,59,.85), inset 0 1px 0 rgba(255,255,255,.45)}
.btn.pri:hover{box-shadow:0 16px 34px -12px rgba(242,185,59,.95), inset 0 1px 0 rgba(255,255,255,.55)}
.btn.sm{padding:8px 15px;font-size:15.5px;min-height:40px;border-radius:999px}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* ---------- 첫 화면 ---------- */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;padding:64px 0 34px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--glass);border-radius:999px;padding:6px 14px 6px 8px;font-size:15.5px;color:var(--ink-dim);margin:0 0 20px}
.chip i{font-style:normal;background:var(--grad-gold);color:var(--gold-ink);font-weight:800;font-size:13.5px;border-radius:999px;padding:2px 9px;letter-spacing:.02em}
.kicker{font-size:14.5px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin:0 0 10px;font-weight:700}
h1{font-size:clamp(34px,5.6vw,64px);line-height:1.1;margin:0 0 18px;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
h1 span{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,1.9vw,19px);color:var(--ink-dim);margin:0 0 26px;max-width:540px;line-height:1.7}
.lead b{color:var(--ink);font-weight:600}
.cta{display:flex;gap:10px;flex-wrap:wrap}
/* 폰 모양 맛보기 */
.try{position:relative;border-radius:38px;padding:14px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03));box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.08) inset;max-width:430px;width:100%;margin-left:auto}
.try:before{content:"";position:absolute;inset:-24px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side, rgba(111,155,255,.28), transparent 70%);filter:blur(10px)}
.try .screen{border-radius:28px;background:linear-gradient(180deg,#131c36,#0c1326);border:1px solid var(--line);padding:22px 18px 18px;overflow:hidden}
.try .hd{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;color:var(--ink-dim);margin-bottom:10px;gap:8px}
.try .hd span:last-child{background:var(--glass-2);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums;color:var(--ink)}
.try .q{text-align:center;padding:18px 0 8px}
.try .q b{display:block;font-size:clamp(38px,6vw,54px);line-height:1.1;letter-spacing:-.03em;font-weight:800}
.try .q small{color:var(--ink-dim);font-size:15.5px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.opts button{min-height:60px;border-radius:16px;border:1px solid var(--line-2);background:var(--glass);color:var(--ink);font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;touch-action:manipulation;padding:8px;transition:transform .12s ease, background .12s ease}
.opts button:hover{background:var(--glass-2);transform:translateY(-1px)}
.opts button.ok{background:var(--mint);border-color:var(--mint);color:#04261a} .opts button.no{background:rgba(255,107,94,.2);border-color:var(--bad)}
.try .msg{min-height:26px;text-align:center;font-size:16px;margin-top:12px;color:var(--gold-2);font-weight:600}
.try .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:14.5px;color:var(--ink-dim)}

/* ---------- 숫자 타일 ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 8px}
.nums div{border:1px solid var(--line);background:var(--glass);border-radius:var(--r-md);padding:18px 18px 16px}
.nums b{display:block;font-size:clamp(28px,4vw,40px);line-height:1;letter-spacing:-.04em;font-weight:800;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.nums span{display:block;font-size:15px;color:var(--ink-dim);margin-top:8px}

/* ---------- 구역 ---------- */
.eyebrow{display:block;font-size:14.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:88px 0 10px}
h2{font-size:clamp(26px,3.8vw,40px);margin:0 0 8px;letter-spacing:-.035em;line-height:1.18;font-weight:800;text-wrap:balance}
.sub{color:var(--ink-dim);margin:0 0 26px;max-width:640px;font-size:17.5px}
.center{text-align:center} .center .sub{margin-left:auto;margin-right:auto}

.who{display:inline-flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--glass)}
.who button{border:0;background:transparent;color:var(--ink-dim);border-radius:999px;padding:10px 20px;font-size:16.5px;font-family:inherit;font-weight:600;cursor:pointer;min-height:44px;transition:background .15s ease,color .15s ease}
.who button[aria-pressed="true"]{background:#fff;color:#0a1022;box-shadow:0 6px 16px -8px rgba(255,255,255,.6)}
.role{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;box-shadow:var(--shadow)}
.role h3{grid-column:1/-1;margin:0 0 4px;font-size:22px;letter-spacing:-.02em} .role p.say{grid-column:1/-1;margin:0 0 10px;color:var(--ink-dim)}
.role ul{margin:0;padding:0;list-style:none} .role li{margin:0;padding:9px 0 9px 30px;font-size:17px;position:relative;border-top:1px solid var(--line)}
.role li:before{content:"";position:absolute;left:2px;top:13px;width:18px;height:18px;border-radius:50%;background:rgba(61,220,151,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.6' fill='none' stroke='%233ddc97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

.wordrow{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:none} .wordrow::-webkit-scrollbar{display:none}
.word{flex:0 0 200px;scroll-snap-align:start;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;cursor:pointer;text-align:left;color:var(--ink);font-family:inherit;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.word:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--glass-2)}
.word b{display:block;font-size:20px;letter-spacing:-.02em} .word em{display:block;font-style:normal;color:var(--gold-2);font-weight:700;margin-top:6px} .word small{color:var(--ink-faint);font-size:14.5px}

.value{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 22px;text-align:center;background:linear-gradient(160deg,rgba(111,155,255,.16),rgba(242,185,59,.08) 60%,rgba(255,255,255,.03))}
.value .m{font-size:14.5px;letter-spacing:.22em;color:var(--gold);font-weight:700} .value .w{font-size:clamp(36px,7vw,68px);font-weight:800;margin:8px 0 4px;letter-spacing:-.04em;line-height:1.05} .value .s{font-size:19px;margin:0} .value .k{color:var(--ink-dim);margin:4px 0 18px}

.join{max-width:620px;background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.join label{display:block;font-size:15px;color:var(--ink-dim);margin:12px 0 5px}
.join input,.join select{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-sm);padding:13px;font-size:17px;font-family:inherit}
.join input:focus,.join select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,185,59,.18)}
.join .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join .chk{display:flex;gap:8px;align-items:flex-start;font-size:15.5px;color:var(--ink);margin-top:12px} .join .chk input{width:auto;margin-top:4px}

/* ---------- 요금 ---------- */
.seg{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--glass);margin:0 auto 26px}
.seg button{border:0;background:transparent;color:var(--ink-dim);border-radius:999px;padding:9px 18px;font-size:16px;font-family:inherit;font-weight:600;cursor:pointer;min-height:42px;display:inline-flex;align-items:center;gap:7px}
.seg button[aria-pressed="true"]{background:#fff;color:#0a1022}
.seg button i{font-style:normal;font-size:13.5px;font-weight:800;border-radius:999px;padding:1px 8px;background:rgba(61,220,151,.18);color:var(--mint)}
.seg button[aria-pressed="true"] i{background:#0a1022;color:var(--mint)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;text-align:left}
.plan{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px 24px;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease}
.plan:hover{transform:translateY(-3px);border-color:var(--line-2)}
.plan.on{border-color:transparent;background:linear-gradient(180deg,#18223f,#0f1730) padding-box, linear-gradient(160deg,#ffd978,#f2b93b 35%,rgba(111,155,255,.7) 100%) border-box;border:1.5px solid transparent;box-shadow:0 30px 70px -30px rgba(242,185,59,.45)}
.plan .tag{position:absolute;top:-13px;left:24px;background:var(--grad-gold);color:var(--gold-ink);font-size:14px;font-weight:800;border-radius:999px;padding:4px 12px;box-shadow:0 8px 18px -8px rgba(242,185,59,.9)}
.plan h3{margin:0;font-size:20px;letter-spacing:-.02em} .plan .who{all:unset;display:block;color:var(--ink-dim);font-size:15.5px;margin:4px 0 20px;min-height:22px}
.plan .amt{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan .amt small{font-size:16px;font-weight:500;color:var(--ink-dim);letter-spacing:0}
.plan .amt.tbd{font-size:30px;color:var(--ink-dim)}
.plan .per{font-size:15.5px;color:var(--ink-dim);margin:10px 0 20px;min-height:22px} .plan .per b{color:var(--mint);font-weight:700}
.plan .btn{width:100%;margin-bottom:22px}
.plan ul{list-style:none;margin:0;padding:18px 0 0;font-size:16px;flex:1;border-top:1px solid var(--line)} .plan ul .hd{padding:0 0 6px;color:var(--ink-faint);font-size:14.5px;letter-spacing:.04em}
.plan ul .hd:before{display:none}
.plan li{padding:6px 0 6px 28px;position:relative;color:#dbe3f5}
.plan li:before{content:"";position:absolute;left:0;top:8px;width:18px;height:18px;border-radius:50%;background:rgba(61,220,151,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.6' fill='none' stroke='%233ddc97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.assure{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.assure span{border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:7px 14px;font-size:15.5px;color:var(--ink-dim)}

.plans.p4{grid-template-columns:repeat(4,1fr);gap:14px} .plans.p4 .plan{padding:26px 20px 22px} .plans.p4 .plan .amt{font-size:36px}
@media (max-width:1080px){ .plans.p4{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .plans.p4{grid-template-columns:1fr} }
/* ---------- 질문 ---------- */
.qa{display:grid;gap:10px;max-width:820px}
.qa details{border:1px solid var(--line);background:var(--glass);border-radius:var(--r-md);padding:0 20px;transition:border-color .15s ease,background .15s ease}
.qa details[open]{border-color:var(--line-2);background:var(--glass-2)}
.qa summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-weight:700;font-size:17.5px;position:relative;letter-spacing:-.015em} .qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--ink-dim);transition:transform .2s ease}
.qa details[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.qa p{margin:0;padding:0 0 18px;color:var(--ink-dim);font-size:17px}

footer{border-top:1px solid var(--line);margin-top:96px;padding:28px 0 54px;font-size:15px;color:var(--ink-faint)}
footer .links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px} footer a{color:var(--ink-dim);text-decoration:none} footer a:hover{color:var(--ink)}

/* ---------- 폰 ---------- */
.dock{display:none}
@media (max-width:900px){ .hero{grid-template-columns:1fr;gap:30px;padding:40px 0 20px} .try{margin:0 auto} .role{grid-template-columns:1fr;padding:22px} .nums{grid-template-columns:repeat(2,1fr)} .plans{grid-template-columns:1fr} .plan.on{order:-1} }
@media (max-width:760px){
  .top nav .hide{display:none} .home small{display:none}
  .top{padding:7px 8px 7px 10px} .top .btn.sm{min-height:44px;padding:8px 16px;font-size:16px} .home{min-height:44px}
  .try:before{inset:0}                                          /* 빛이 화면 밖으로 나가 화면이 옆으로 밀리던 것 */
  .wrap{padding:0 16px}
  .dock{display:flex;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;padding:8px;border:1px solid var(--line-2);border-radius:22px;background:rgba(10,15,30,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 40px -16px rgba(0,0,0,.9)}
  .dock .btn{flex:1;min-height:50px;font-size:16.5px;padding:10px 8px}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .cta .btn{flex:1 1 100%} .eyebrow{margin-top:64px} .join .two{grid-template-columns:1fr} .who{display:flex;border-radius:22px} .who button{flex:1;padding:10px 8px}
}
@media (pointer:coarse){ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:17px!important} input[type=checkbox]{min-width:22px;min-height:22px} .btn.sm{min-height:44px} .seg button,.who button{min-height:44px} }
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both} .rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s}
  @keyframes rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn,.plan,.word{transition:none} }

/* 로고 — 블루울프 문장 */
.mark.logo{width:40px;height:40px;border-radius:50%;background:none;box-shadow:0 4px 14px -6px rgba(0,0,0,.6);overflow:hidden;padding:0}.mark.logo img{width:100%;height:100%;display:block;border-radius:50%}