/* 캐슬업! 소개 사이트 — 공통 스타일
   색은 게임 코드(ui_theme.gd·title_menu.gd·balance.gd 속성 색)의 값에서 왔다. 게임처럼 늘 어둡다. */
[hidden]{display:none!important}
img{max-width:100%;height:auto}
.nw{white-space:nowrap}

@font-face{
  font-family:"CU Head";
  src:url(/assets/head.woff2?v=57c2c095) format("woff2");
  font-weight:400;font-display:swap;
}

:root{
  --bg:#171B2B;             /* 게임 화면 바탕 */
  --bg-2:#1B2033;           /* 게임 창 바탕 */
  --card:#222842;           /* 게임 판 */
  --btn:#283052;            /* 게임 버튼 */
  --ink:#E8ECF8;            /* 게임 글자 */
  --ink-2:#B9C0D6;
  --muted:#9AA3BF;          /* 게임 보조 글자 */
  --line:rgba(232,236,248,.13);
  --gold:#FFD24A;           /* 고른 칸·강조 테두리 */
  --gold-soft:#FFE9A8;      /* 고른 글자 */
  --cream:#FFF2DD;          /* 첫 화면 한 줄 소개 글자 */
  --red:#B8392E;            /* 캠페인 단추 */
  --red-deep:#7E2219;
  --ink-dark:#1E2233;       /* 스킬 그림 잉크 */
  /* 속성 6 (balance.gd ELEMENT_COLORS) */
  --phys:#E9DCC3;--fire:#FF7448;--ice:#8FD8FF;--bolt:#FFE15A;--holy:#FFF6C8;--dark:#B98CFF;
  --r:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --t:.22s;
  --head:"CU Head","Black Han Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic","Segoe UI",sans-serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  word-break:keep-all;overflow-wrap:break-word;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.28;margin:0;letter-spacing:0}
h3{font-family:var(--body);font-weight:800;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink-dark);padding:10px 14px;border-radius:10px;z-index:50}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 단추: 주(캠페인 빨강) · 게임 버튼 · 선 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 22px;border-radius:14px;border:0;
  font:800 16px/1.2 var(--body);text-decoration:none;cursor:pointer;
  transition:transform var(--t) var(--ease),background-color var(--t),box-shadow var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.96)}
.btn-main{background:var(--red);color:var(--cream);box-shadow:inset 0 0 0 2px rgba(255,210,74,.55),0 4px 0 var(--red-deep)}
.btn-main:active{box-shadow:inset 0 0 0 2px rgba(255,210,74,.55),0 1px 0 var(--red-deep);transform:translateY(3px)}
.btn-soft{background:var(--btn);color:var(--ink)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}

/* ── 머리줄 ── */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:16px;min-height:48px}
.brand img{width:32px;height:32px;border-radius:9px}
.lang{color:var(--ink);font-size:15px;text-decoration:none;min-height:48px;min-width:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);background:rgba(23,27,43,.4)}

/* ── 첫 화면: 노을 하늘(앱 아이콘 하늘) ── */
.hero{
  position:relative;color:var(--ink);overflow:hidden;isolation:isolate;
  padding-top:62px;padding-bottom:36px;
  background:linear-gradient(180deg,#2A1D4E 0%,#4A2556 34%,#7A3448 62%,var(--bg) 100%);
}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.28;mix-blend-mode:luminosity}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 8%,rgba(255,179,71,.28),transparent 70%),linear-gradient(180deg,transparent 55%,var(--bg) 100%)}
.hero-col{max-width:560px;margin:0 auto;text-align:center;padding-left:16px;padding-right:16px}
.hero-logo{display:block;width:132px;height:auto;margin:0 auto 4px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.logo-text{display:block;font-family:var(--head);font-size:44px;line-height:1.1;color:var(--gold-soft);text-shadow:0 3px 0 #5C3A1E,0 6px 18px rgba(0,0,0,.45);margin:4px 0 6px}
.hero h1{font-size:clamp(21px,5.4vw,30px);margin-bottom:6px;color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero-sub{color:var(--ink-2);font-size:16px;margin:0 auto 8px;max-width:30em}
.hero-status{margin-top:16px;font-size:15px;color:var(--ink-2)}
.hero-status b{color:var(--ink)}
.hero-status a{color:var(--gold);text-underline-offset:3px;display:inline-block;padding:12px 4px;margin:-12px 0}
@media (min-width:900px){
  .hero{padding-top:80px;padding-bottom:56px}
  .hero-logo{width:230px}
  .logo-text{font-size:60px}
}

/* ── 맛보기: 보스 약점 맞히기 ── */
.demo{margin-top:14px;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;text-align:center}
.demo-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14.5px;color:#DCE0EE;margin-bottom:8px}
.demo-head b{color:var(--gold-soft);font-weight:800}
.demo-sound{min-height:48px;padding:0 12px;font-size:14px;gap:6px;display:inline-flex;align-items:center}
.demo-sound svg{width:18px;height:18px}
.demo-sound .off,.demo-sound[aria-pressed="false"] .on{display:none}
.demo-sound[aria-pressed="false"] .off{display:inline}
.demo-sound[aria-pressed="false"]{color:var(--muted)}
.stage{
  position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#3A2A3A;
  box-shadow:0 0 0 2px rgba(255,210,74,.35),0 18px 40px rgba(0,0,0,.45);contain:layout paint;
}
.st-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%}
/* 게임 성(탑): 파란 비늘 지붕 + 나무 방 + 돌 받침, 층 바닥은 희귀도 색 */
.tw{position:absolute;left:6%;bottom:4%;width:21%;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.tw-roof{position:relative;display:block;width:122%;aspect-ratio:1/.62;clip-path:polygon(50% 0,100% 100%,0 100%);
  background:repeating-linear-gradient(180deg,#4C6EA3 0 7px,#34527F 7px 9px)}
.tw-roof::before{content:"";position:absolute;left:50%;top:-34%;width:2px;height:40%;background:#2B2F4A}
.tw-fl{position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%;aspect-ratio:1/.62;
  background:linear-gradient(180deg,#F0B66A,#D98E45);box-shadow:inset 3px 0 0 #8B5A2B,inset -3px 0 0 #8B5A2B,inset 0 -3px 0 var(--rc)}
.tw-fl::before{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:38%;background:repeating-linear-gradient(90deg,#B66F33 0 6px,#A5622B 6px 7px)}
.tw-fl img{position:absolute;left:50%;bottom:3px;height:90%;width:auto;max-width:none;transform:translateX(-50%)}
.tw-base{display:block;width:118%;height:16px;border-radius:3px 3px 0 0;background:repeating-linear-gradient(90deg,#B9B4AA 0 14px,#8F8A80 14px 16px);box-shadow:inset 0 3px 0 #D2CEC6}
.tw-flag{display:none}
.st-flash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:3}
.st-name{position:absolute;left:10px;right:10px;top:8px;display:flex;align-items:center;gap:8px;z-index:2;font-size:13px;font-weight:800;color:#FFF;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.st-name b{white-space:nowrap}
.hp{flex:1;height:10px;border-radius:6px;background:rgba(10,8,20,.7);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);overflow:hidden}
.hp i{display:block;height:100%;background:linear-gradient(180deg,#FF7A6A,#D13A2E);transform-origin:left center;transition:transform .3s var(--ease)}
.boss{position:absolute;right:5%;top:30%;width:36%;transition:top .33s cubic-bezier(.55,0,1,.45),transform .33s;z-index:1}
.boss img{display:block;width:100%;height:auto;animation:fly 1.8s ease-in-out infinite;transform-origin:50% 60%}
@keyframes fly{50%{transform:translateY(-6%)}}
.boss.is-groggy img{animation:wobble .5s ease-in-out infinite}
@keyframes wobble{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.boss.is-down{top:50%}
.boss.is-down img{animation:none;transform:rotate(-12deg) scale(.96)}
.boss.is-groggy::after{content:"✦ ✦ ✦";position:absolute;left:0;right:0;top:-2%;text-align:center;color:#FFE15A;font-size:14px;letter-spacing:4px;animation:spin 1s linear infinite;text-shadow:0 0 6px rgba(0,0,0,.6)}
@keyframes spin{50%{transform:translateX(6px)}}
.boss.is-dead img{animation:die 1.2s var(--ease) forwards}
@keyframes die{30%{transform:scale(1.08) rotate(-8deg);filter:brightness(2)}100%{transform:translateY(30%) scale(.6) rotate(-30deg);opacity:0}}
.chain-wrap{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);display:flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:999px;background:rgba(13,13,31,.66);white-space:nowrap}
.boss.is-groggy .chain-wrap,.boss.is-dead .chain-wrap{opacity:0}
.chain-wrap{transition:opacity .2s}
.chain-lbl{font-size:12px;font-weight:800;color:#FFE9A8}
.chain{display:flex;align-items:center;gap:2px}
.ch{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(31,31,51,.85);color:var(--c);opacity:.6}
.ch svg{width:19px;height:19px}
.ch-done{background:var(--c);color:var(--ink-dark);opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent)}
.ch-next{background:rgba(20,20,41,.92);box-shadow:inset 0 0 0 3px var(--c),0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent);opacity:1;animation:chnext .7s ease-in-out infinite alternate}
@keyframes chnext{to{box-shadow:inset 0 0 0 3px var(--c),0 0 0 8px color-mix(in srgb,var(--c) 45%,transparent)}}
.ch.is-pop{animation:chpop .3s ease-out}
@keyframes chpop{50%{transform:scale(1.5)}}
.ch-arr{width:0;height:0;border-left:6px solid rgba(255,255,255,.3);border-top:5px solid transparent;border-bottom:5px solid transparent;margin:0 2px}
.ch-arr.on{border-left-color:rgba(255,255,255,.8)}
.ch-timer{position:absolute;inset:-6px;width:42px!important;height:42px!important;transform:rotate(-90deg);pointer-events:none}
.ch-timer circle{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:113.1;stroke-dashoffset:calc(113.1 * (1 - var(--left,1)))}
.fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.ftext{position:absolute;z-index:4;pointer-events:none;font-family:var(--head);white-space:nowrap;transform:translate(-50%,-50%);
  text-shadow:0 2px 0 rgba(30,34,51,.9),0 0 3px rgba(30,34,51,.9),2px 0 0 rgba(30,34,51,.9),-2px 0 0 rgba(30,34,51,.9),0 -2px 0 rgba(30,34,51,.9)}
.ftext.big{letter-spacing:.02em}
.demo-tip{margin-top:10px;min-height:48px;font-size:15px;line-height:1.45;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0 6px}

/* 스킬 단추(게임 스킬 판처럼: 속성 색 카드, 다음 칸이면 '다음!') */
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.sk{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:86px;padding:12px 4px 8px;border:0;border-radius:14px;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,var(--card)),var(--card));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent),0 3px 0 #10131F;
  font:800 14px/1.2 var(--body);overflow:visible;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ease),box-shadow var(--t);touch-action:manipulation;
}
.sk:active{transform:translateY(2px) scale(.97)}
.sk .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--ink-dark)}
.sk .ic svg{width:22px;height:22px}
.sk small{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.sk-next{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:1px 9px;border-radius:999px;background:var(--gold);color:var(--ink-dark);font:400 13px/1.5 var(--head);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.sk-now{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:1px 9px;border-radius:999px;background:#FFE15A;color:var(--ink-dark);font:400 13px/1.5 var(--head);white-space:nowrap;opacity:0;pointer-events:none}
.sk.is-any .sk-now{opacity:1}
.sk.is-any{box-shadow:inset 0 0 0 3px #FFE15A,0 3px 0 #10131F}
.sk:disabled{opacity:.55;cursor:default}
.sk.is-next{box-shadow:inset 0 0 0 3px var(--gold),0 3px 0 #10131F,0 0 16px rgba(255,210,74,.35)}
.sk.is-next .sk-next{opacity:1}
.is-nudge .sk-now{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:1px 9px;border-radius:999px;background:#FFE15A;color:var(--ink-dark);font:400 13px/1.5 var(--head);white-space:nowrap;opacity:0;pointer-events:none}
.sk.is-any .sk-now{opacity:1}
.sk.is-any{box-shadow:inset 0 0 0 3px #FFE15A,0 3px 0 #10131F}
.sk:disabled{opacity:.55;cursor:default}
.sk.is-next{animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:inset 0 0 0 3px var(--gold),0 3px 0 #10131F,0 0 26px rgba(255,210,74,.7)}}
.sk::after{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(10,12,22,.62);transform-origin:bottom;transform:scaleY(0);pointer-events:none}
.sk.is-cool::after{animation:cool 1s linear forwards}
@keyframes cool{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.demo-done{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:min(330px,92%);background:var(--bg-2);border-radius:22px;padding:22px 20px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 0 0 2px var(--gold);z-index:6;
}
.demo-done h2{font-size:26px;color:var(--gold)}
.demo-done p{color:var(--ink);font-size:15px;margin:8px 0 14px}
.demo-done .btn{width:100%}
.demo-done .btn + .btn{margin-top:8px}
@media (min-width:600px){.sk{font-size:15px}.sk small{font-size:12.5px}}

/* ── 소개 칸 공통: 칸 사이 성벽 톱니 ── */
.sec{padding-top:72px;padding-bottom:72px;position:relative}
.sec-alt{background:var(--bg-2)}
.sec-alt::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:var(--bg-2);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 30px,transparent 30px 52px);mask:repeating-linear-gradient(90deg,#000 0 30px,transparent 30px 52px)}
.sec-head{max-width:660px;margin-bottom:28px}
.sec-head h2{font-size:clamp(26px,6vw,40px);color:var(--cream)}
.sec-head p{margin-top:12px;color:var(--ink-2)}
.eyebrow{display:block;font-size:14px;font-weight:800;color:var(--gold);margin-bottom:8px;letter-spacing:.04em}

/* 실제 화면 */
.real{display:grid;gap:28px}
.phone{position:relative;width:min(270px,68vw);margin:0 auto;border-radius:34px;padding:8px;background:#0B0E1A;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 2px rgba(255,210,74,.25)}
.phone video,.phone img{display:block;width:100%;height:auto;aspect-ratio:600/1066;border-radius:27px;background:var(--bg);object-fit:cover}
.phone-cap{text-align:center;font-size:14px;color:var(--muted);margin-top:12px}
.shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;margin:0 -20px;scrollbar-width:thin;overscroll-behavior-x:contain}
.shot{flex:0 0 auto;width:200px;scroll-snap-align:center;margin:0}
.shot img{display:block;width:100%;aspect-ratio:600/1067;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.35);background:var(--card)}
.shot figcaption{font-size:14px;line-height:1.45;margin-top:10px;color:var(--ink-2)}
.shot figcaption b{display:block;color:var(--ink);font-size:15px}
@media (min-width:900px){
  .real{grid-template-columns:320px minmax(0,1fr);align-items:start}
  .shots{margin:0;padding:4px 4px 14px}
}

/* 보스전: 규칙 넷 */
.rules{display:grid;gap:12px}
@media (min-width:760px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rule{background:var(--card);border-radius:var(--r);padding:18px 20px;box-shadow:inset 0 0 0 1.5px var(--line)}
.rule h3{font-size:18px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.rule h3 i{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;background:var(--btn);color:var(--gold)}
.rule h3 i svg{width:20px;height:20px}
.rule p{color:var(--ink-2);font-size:16px;margin-top:8px}
.rule-order{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.rule-order .ch{opacity:1;width:32px;height:32px}
/* 연계 14 */
.combos{margin-top:28px}
.combos h3{font-size:19px;color:var(--ink)}
.combos > p{color:var(--ink-2);font-size:15px;margin-top:6px}
.combo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.combo-list li{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:8px 10px;font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.combo-list .pair{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.combo-list .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--ink-dark)}
.combo-list .dot svg{width:14px;height:14px}
.combo-list .arr{color:var(--muted);font-size:11px}
/* 보스 줄 */
.bosses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
@media (min-width:760px){.bosses{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bossc{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);margin:0;isolation:isolate;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end}
.bossc .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 85%;z-index:-2;opacity:.75}
.bossc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(23,27,43,0) 30%,rgba(23,27,43,.92) 78%)}
.bossc .art{display:block;width:72%;margin:10px auto 0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.bossc figcaption{padding:4px 14px 12px}
.bossc b{display:block;font-size:16px}
.bossc span{display:block;font-size:13px;color:var(--ink-2)}
.weak{display:inline-flex!important;align-items:center;gap:5px;margin-top:6px;font-size:12.5px!important;font-weight:800;color:var(--ink)!important;background:rgba(13,13,31,.7);border-radius:999px;padding:2px 9px 2px 3px}
.weak i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--ink-dark)}
.weak i svg{width:12px;height:12px}
.boss-note{margin-top:14px;font-size:15px;color:var(--ink-2);max-width:720px}

/* 성 키우기 */
.grow{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.grow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tower{position:relative;background:radial-gradient(70% 60% at 50% 60%,rgba(255,179,71,.18),transparent 70%),linear-gradient(180deg,#2A1D4E,#1B2033);border-radius:24px;padding:18px 16px 16px;box-shadow:inset 0 0 0 1.5px var(--line);text-align:center}
.tower-img{height:300px;display:flex;align-items:flex-end;justify-content:center}
.tower-img img{max-height:100%;width:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.tower-img img.is-drop{animation:drop .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{0%{transform:translateY(-16px) scale(1.04);opacity:.4}60%{transform:translateY(3px) scaleY(.97)}100%{transform:none;opacity:1}}
.tower-name{margin-top:10px;font-family:var(--head);font-size:24px;color:var(--gold-soft)}
.tower-meta{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tower-ctrl{display:flex;align-items:center;gap:10px;margin-top:12px}
.tower-ctrl button{flex:0 0 auto;width:48px;height:48px;border-radius:14px;border:0;background:var(--btn);color:var(--ink);font-size:20px;cursor:pointer}
.tower-ctrl input{flex:1;accent-color:var(--gold);height:48px;margin:0}
.grow-text ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.grow-text li{background:var(--card);border-radius:var(--r);padding:14px 18px;box-shadow:inset 0 0 0 1.5px var(--line)}
.grow-text li b{display:block;font-size:17px;color:var(--ink)}
.grow-text li span{display:block;font-size:15.5px;color:var(--ink-2);margin-top:2px}
.heroes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:32px}
@media (min-width:760px){.heroes{grid-template-columns:repeat(8,minmax(0,1fr))}}
.heroc{margin:0;text-align:center;background:var(--card);border-radius:16px;padding:10px 4px 8px;box-shadow:inset 0 0 0 1.5px var(--line)}
.heroc img{display:block;width:100%;height:84px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.heroc b{display:block;font-size:13px;line-height:1.3;margin-top:6px}
.heroc span{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.heroc[data-r="4"]{box-shadow:inset 0 0 0 2px #FFB347}
.heroc[data-r="3"]{box-shadow:inset 0 0 0 2px #C59BFF}
.heroc[data-r="b"]{box-shadow:inset 0 0 0 2px #FF6B6B}
.heroes-note{margin-top:12px;font-size:14px;color:var(--muted)}
.shots.three{margin-top:32px}
@media (min-width:760px){.shots.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;margin:32px 0 0;padding:0}.shots.three .shot{width:auto;max-width:300px}}

/* 손을 놓아도 */
.idle{display:grid;gap:12px}
@media (min-width:760px){.idle{grid-template-columns:repeat(2,minmax(0,1fr))}}
.idle-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:inset 0 0 0 1.5px var(--line)}
.idle-item .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--btn);color:var(--gold)}
.idle-item .ic svg{width:24px;height:24px}
.idle-item h3{font-size:17.5px}
.idle-item p{color:var(--ink-2);font-size:15.5px;margin-top:2px}
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
.num{background:var(--card);border-radius:var(--r);padding:16px 16px 14px;box-shadow:inset 0 0 0 1.5px var(--line)}
.num b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(30px,7.5vw,42px);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--gold-soft)}
.num span{display:block;font-size:15px;color:var(--ink);margin-top:4px;line-height:1.45}
.num small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
@media (min-width:900px){.nums{grid-template-columns:repeat(4,minmax(0,1fr))}}
.modes{display:grid;gap:12px;margin-top:12px}
@media (min-width:760px){.modes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mode{background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:inset 0 0 0 1.5px var(--line)}
.mode h3{font-size:17.5px;color:var(--gold-soft)}
.mode p{font-size:15.5px;color:var(--ink-2);margin-top:4px}
.src{font-size:13px;color:var(--muted);margin-top:14px}

/* 돈 */
.money{display:grid;gap:14px}
@media (min-width:900px){.money{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcard{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:inset 0 0 0 1.5px var(--line)}
.mcard h3{font-size:19px;margin-bottom:10px}
.mcard ul{margin:0;padding:0;list-style:none}
.mcard li{position:relative;padding-left:22px;font-size:16px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.mcard li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--muted)}
.mcard.free{box-shadow:inset 0 0 0 2.5px var(--gold)}
.mcard.free li::before{background:var(--gold)}
.mcard .tag{display:inline-block;font-size:13px;font-weight:800;color:var(--ink-2);margin-top:12px;padding:3px 10px;border-radius:999px;background:var(--btn)}
.money-note{margin-top:16px;font-size:15px;color:var(--ink-2);max-width:720px}

/* 자주 묻는 질문 */
.faq{max-width:760px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:12px 0;font-weight:800;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg) translateY(-3px);transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq details p{padding:0 0 18px;color:var(--ink-2)}

/* 끝: 노을 칸 */
.end{padding-top:76px;padding-bottom:40px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--bg) 0%,#2A1D4E 60%,#3B2150 100%)}
.end-bg{position:absolute;inset:0;z-index:-1}
.end-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.22;mix-blend-mode:luminosity}
.end-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(23,27,43,.3) 45%,rgba(42,29,78,.6))}
.end h2{font-size:clamp(26px,6vw,40px);color:var(--cream)}
.end-lead{color:var(--ink-2);margin-top:12px;max-width:620px}
.end-steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px;max-width:620px}
.end-steps li{display:flex;gap:12px;align-items:center;font-size:16px}
.end-steps i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;background:var(--btn);color:var(--muted)}
.end-steps li.is-now i{background:var(--gold);color:var(--ink-dark)}
.end-steps li.is-now{color:var(--ink);font-weight:800}
.end-steps li:not(.is-now){color:var(--muted)}
.end-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.end-acts .btn-line{color:var(--ink)}
.mail-note{font-size:14px;color:var(--ink-2);margin-top:10px}
.btn-copy{font:inherit;font-size:14px;color:var(--ink);background:var(--btn);border:0;border-radius:10px;min-height:48px;min-width:44px;padding:0 12px;margin-left:4px;cursor:pointer}

/* 루멘랩으로 가는 탑: 보이면 층마다 불이 켜지고 깃발이 오른다 */
.lumen{
  display:flex;align-items:center;gap:16px;margin-top:48px;max-width:520px;padding:12px 18px 12px 12px;min-height:88px;
  border-radius:22px;background:rgba(27,32,51,.85);box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--ink);text-decoration:none;transition:box-shadow var(--t),transform var(--t) var(--ease);
}
.lumen:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.lumen:active{transform:scale(.98)}
.lumen svg{flex:0 0 auto;width:64px;height:80px;overflow:visible}
.lumen b{display:block;font-size:16px}
.lumen span{display:block;font-size:14px;color:var(--ink-2)}
.lumen .arr{margin-left:auto;font-size:20px;transition:transform var(--t) var(--ease)}
.lumen:hover .arr{transform:translateX(4px)}
.l-win{fill:#2B2F4A;transition:fill .25s}
.lumen.is-lit .l-win{fill:var(--gold)}
.lumen.is-lit .l-win.w2{transition-delay:.25s}
.lumen.is-lit .l-win.w3{transition-delay:.5s}
.l-flag{transform:translateY(22px);transition:transform .6s var(--ease) .7s}
.lumen.is-lit .l-flag{transform:none}
.l-glow{opacity:0;transition:opacity .6s .7s}
.lumen.is-lit .l-glow{opacity:1}

.foot{background:#12152A;color:var(--muted);font-size:14px;padding-top:28px;padding-bottom:36px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.foot a{color:var(--ink);display:inline-flex;align-items:center;min-height:48px;min-width:48px;justify-content:center;padding:0 4px;text-underline-offset:3px}
.foot p{flex-basis:100%;line-height:1.55}

/* 나타나기 */
.js-motion .rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-motion .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .boss img{animation:none!important}
}

/* 첫 화면 시안 2(영상 먼저)·3(성 키우기 먼저) */
.v2-grid{display:grid;gap:22px;align-items:center;text-align:center}
.v2-text .hero-logo{margin-bottom:6px}
.v2-acts{margin-top:14px}
.hero-v2 .phone{width:min(230px,58vw)}
@media (min-width:900px){
  .v2-grid{grid-template-columns:minmax(0,1fr) 300px;text-align:left;gap:48px}
  .v2-text .hero-logo{margin-left:0}
  .hero-v2 .hero-sub{margin-left:0}
  .hero-v2 .phone{width:290px}
}
.v3-tower .tower-img{height:min(42vh,340px)}
.v3-tower .tower-name{margin-top:6px}

/* 시안 1: 넓은 화면은 왼쪽 글, 오른쪽 맛보기 */
.v1-sub{display:none}
@media (min-width:1000px){
  .hero-col.v1-grid{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:56px;align-items:center;text-align:left}
  .v1-text .hero-logo{margin-left:0}
  .v1-text h1{font-size:36px}
  .v1-sub{display:block;margin:12px 0 0;font-size:17px}
}

/* 첫 화면 칩 줄과 실제 화면 연결 */
.chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.chips li{font-size:13px;font-weight:700;color:var(--ink);background:rgba(23,27,43,.55);box-shadow:inset 0 0 0 1px rgba(255,233,168,.35);border-radius:999px;padding:2px 9px}
.real-link{display:flex;align-items:center;gap:12px;margin-top:14px;padding:8px 14px 8px 8px;min-height:64px;border-radius:16px;text-align:left;text-decoration:none;color:var(--ink);background:rgba(23,27,43,.6);box-shadow:inset 0 0 0 1.5px var(--line)}
.real-link:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.real-link img{flex:0 0 auto;width:40px;height:71px;object-fit:cover;border-radius:8px}
.real-link b{display:block;color:var(--gold);font-size:15.5px}
.real-link span{font-size:13.5px;color:var(--ink-2);line-height:1.4}
@media (min-width:1000px){.v1-text .chips{justify-content:flex-start}}

.combo-more{margin-top:8px}
.combo-more summary{cursor:pointer;display:inline-flex;align-items:center;min-height:48px;font-weight:800;font-size:15px;color:var(--gold);list-style:none}
.combo-more summary::-webkit-details-marker{display:none}
.combo-more summary::after{content:"";width:9px;height:9px;margin-left:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.combo-more[open] summary::after{transform:rotate(225deg)}
.combo-more .combo-list{margin-top:4px}
.sub-h{font-size:19px;margin-top:40px;color:var(--ink)}
.sub-h + .nums{margin-top:14px}
@media (max-width:359px){.hero-logo{width:104px}.hero h1{font-size:19px}.chips li{font-size:12px}}