@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");

/* ═══════════════════════════════════════════════════════
   1. 디자인 토큰 — 두 인격이 여기서 갈립니다
   ═══════════════════════════════════════════════════════ */
:root{
  --f:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
      "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:20px;
  --maxw:1120px;

  --c-studio:#4F629E;  --c-studio-l:#7B8CC9;  --c-studio-pop:#FFCE1F;
  --c-finance:#3ECFB2; --c-finance-d:#1FA88E;
  --c-vibe:#9D7BFF;    --c-vibe-d:#7A5BE0;
}
[data-theme="studio"]{
  --bg:#FFFFFF; --bg2:#F5F6F9; --surface:#FFFFFF;
  --fg:#12151C; --fg2:#4A5262; --mut:#8B93A5;
  --line:#E7E9EF;
  --accent:#4F629E; --accent-ink:#FFFFFF; --accent-soft:rgba(79,98,158,.09);
  --shadow:0 22px 48px rgba(18,21,28,.10);
  --sel:rgba(79,98,158,.18);
}
[data-theme="finance"]{
  --bg:#080B12; --bg2:#0E1420; --surface:#111827;
  --fg:#FFFFFF; --fg2:#A6B0C3; --mut:#707C92;
  --line:#1D2534;
  --accent:#3ECFB2; --accent-ink:#052E26; --accent-soft:rgba(62,207,178,.11);
  --shadow:0 22px 48px rgba(0,0,0,.5);
  --sel:rgba(62,207,178,.22);
  /* 보조 강조색 — 민트 하나로는 단조로워서 역할별로 나눕니다 */
  --a2:#F5B544; --a2-soft:rgba(245,181,68,.13);   /* 숫자·금액 강조 */
  --a3:#FF7E68; --a3-soft:rgba(255,126,104,.13);  /* 주의·놓치기 쉬운 것 */
  --a4:#8B9BFF; --a4-soft:rgba(139,155,255,.13);  /* 제도·개념 */
  --a5:#4FC3F7; --a5-soft:rgba(79,195,247,.13);   /* 정보·참고 */
  --paper:#F4F7FA; --paper-ink:#12314F;           /* 밝은 카드 면 */
}
[data-theme="studio"]{
  --a2:#E8A317; --a2-soft:rgba(232,163,23,.12);
  --a3:#E2574C; --a3-soft:rgba(226,87,76,.11);
  --a4:#6B7FD7; --a4-soft:rgba(107,127,215,.12);
  --a5:#3A9BD9; --a5-soft:rgba(58,155,217,.12);
  --paper:#F5F6F9; --paper-ink:#12151C;
}
[data-theme="vibe"]{
  --bg:#0B0913; --bg2:#131022; --surface:#181430;
  --fg:#FFFFFF; --fg2:#ADA7C9; --mut:#8A84AD;     /* mut은 surface 위 5.07:1 — 더 어둡게 낮추지 말 것 */
  --line:#242045;
  --accent:#9D7BFF; --accent-ink:#1A0E42; --accent-soft:rgba(157,123,255,.12);
  --shadow:0 22px 48px rgba(0,0,0,.5);
  --sel:rgba(157,123,255,.24);
  --a2:#F5B544; --a2-soft:rgba(245,181,68,.13);   /* 숫자·금액 강조 — finance와 같은 값 */
  --a3:#FF7E68; --a3-soft:rgba(255,126,104,.13);  /* 주의·놓치기 쉬운 것 */
  --a4:#FF8FC0; --a4-soft:rgba(255,143,192,.14);  /* 제도·개념 — 보라와 겹치지 않게 핑크 */
  --a5:#4FC3F7; --a5-soft:rgba(79,195,247,.13);   /* 정보·참고 */
  --paper:#F4F2FA; --paper-ink:#241A4F;           /* 밝은 카드 면 */
}

/* ═══════════════════════════════════════════════════════
   2. 리셋 · 기본
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);background:var(--bg);color:var(--fg);
  letter-spacing:-.022em;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .7s var(--ease),color .7s var(--ease);
  /* 한국어 줄바꿈: 어절(마디) 중간에서 끊지 않습니다 */
  word-break:keep-all;
  overflow-wrap:break-word;   /* 단, 긴 URL 등은 넘치지 않게 예외 */
}
/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게 */
h1,h2,h3,h4,.hero h1,.shead h2,.cta h2{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
::selection{background:var(--sel)}
/* 이미지는 어떤 폭에서도 원본 비율을 유지합니다 */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);
  color:var(--accent-ink);padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
/* 화면에는 안 보이고 스크린리더·검색엔진만 읽는 텍스트 */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.wrap{width:min(var(--maxw),100% - 48px);margin-inline:auto}
@media(max-width:560px){.wrap{width:calc(100% - 36px)}}
.sec{padding:clamp(72px,11vh,112px) 0}
.sec--soft{background:var(--bg2);transition:background .7s var(--ease)}
.sec--tight{padding-block:clamp(52px,7vh,74px)}

/* ═══════════════════════════════════════════════════════
   3. 내비게이션
   ═══════════════════════════════════════════════════════ */
#prog{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--accent);
  z-index:300;transition:background .7s}
.nav{position:fixed;inset:0 0 auto;z-index:250;padding:13px 0;
  transition:background .45s var(--ease),border-color .45s,box-shadow .45s;
  border-bottom:1px solid transparent}
.nav.solid{background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(180%) blur(18px);border-bottom-color:var(--line)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;flex:0 0 auto}
.brand img{height:21px;width:auto}
[data-theme="studio"] .brand img{filter:invert(1)}
.brand small{font-weight:600;font-size:12px;color:var(--mut)}

.switch{display:flex;padding:4px;background:var(--bg2);border-radius:999px;position:relative;
  transition:background .7s var(--ease)}
.switch a{position:relative;z-index:2;font-size:12.5px;font-weight:700;padding:9px 16px;
  border-radius:999px;color:var(--mut);transition:color .35s;white-space:nowrap}
.switch a[aria-current]{color:var(--accent-ink)}
.switch__thumb{position:absolute;z-index:1;top:4px;height:calc(100% - 8px);border-radius:999px;
  background:var(--accent);transition:transform .5s var(--ease),width .5s var(--ease),background .7s}
/* 스위치가 세 칸이 되면서 좁은 화면에서 줄바꿈되지 않도록 눈금을 줄입니다 */
@media(max-width:1280px){.brand small{display:none}.switch a{padding:9px 11px;font-size:11.5px}}
@media(max-width:420px){.switch a{padding:8px 8px;font-size:10.5px}}

.nav__cta{font-size:12.5px;font-weight:700;padding:10px 18px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);transition:transform .25s var(--ease),background .7s;flex:0 0 auto}
.nav__cta:hover{transform:translateY(-1px)}
.nav__menu{display:flex;gap:22px;font-size:13.5px;font-weight:600;color:var(--fg2)}
.nav__menu a{transition:color .25s}
.nav__menu a:hover,.nav__menu a[aria-current]{color:var(--accent)}
@media(max-width:1080px){.nav__menu{display:none}}
@media(max-width:720px){.nav__cta{display:none}}

/* 모바일 하단 바 */
.mobar{position:fixed;inset:auto 0 0;z-index:240;display:none;gap:8px;padding:10px 14px
  calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.mobar a{flex:1;text-align:center;font-size:13px;font-weight:700;padding:13px;border-radius:12px}
.mobar .p{background:var(--accent);color:var(--accent-ink)}
.mobar .s{background:var(--bg2);color:var(--fg2)}
/* 지금 보고 있는 페이지는 하단바에서도 표시해 줍니다 */
.mobar .s.on{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
@media(max-width:720px){.mobar{display:flex}body{padding-bottom:74px}}

/* ═══════════════════════════════════════════════════════
   4. 게이트 (첫 화면 선택)
   ═══════════════════════════════════════════════════════ */
.gate{height:100svh;min-height:640px;display:flex;position:relative;overflow:hidden;background:#080B12}
.gate__side{position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;
  transition:flex .8s var(--ease)}
.gate__side::before,.gate__side::after{content:"";position:absolute;inset:0;pointer-events:none}
.gate__side::before{transition:transform 1.1s var(--ease)}
.gate__side:hover,.gate__side:focus-within{flex:1.35}
.gate__side:hover::before{transform:scale(1.05)}

.gate__studio{background:#fff}
.gate__studio::before{background:url("/assets/img/studio-live.jpg") center 62%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0 26%,#000 48%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0 26%,#000 48%,#000 100%)}
.gate__studio::after{background:linear-gradient(180deg,transparent 34%,rgba(255,255,255,.62) 62%,#fff 92%)}

/* 가운데 칸 — 에디터 화면을 옮겨온 결(가로줄)과 보랏빛 글로우 */
.gate__vibe{background:#0B0913;border-left:1px solid rgba(140,150,175,.28)}
.gate__vibe::before{background:repeating-linear-gradient(0deg,#1D1738 0 1px,transparent 1px 30px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 72%)}
.gate__vibe::after{background:
  radial-gradient(ellipse 46% 52% at 50% 62%,rgba(157,123,255,.18),transparent 70%),
  radial-gradient(ellipse at 16% 96%,rgba(157,123,255,.12),transparent 60%)}

.gate__finance{background:#080B12;border-left:1px solid rgba(140,150,175,.28)}
.gate__finance::before{background:
  repeating-linear-gradient(90deg,#141E30 0 1px,transparent 1px 68px),
  repeating-linear-gradient(0deg,#141E30 0 1px,transparent 1px 68px);
  -webkit-mask-image:radial-gradient(ellipse at 62% 46%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse at 62% 46%,#000,transparent 74%)}
.gate__finance::after{background:
  radial-gradient(ellipse 46% 52% at 72% 62%,rgba(62,207,178,.20),transparent 70%),
  radial-gradient(ellipse at 84% 96%,rgba(62,207,178,.13),transparent 60%)}
.gate__portrait{position:absolute;z-index:2;right:0;bottom:0;height:88%;width:auto;max-width:none;
  filter:brightness(.94) contrast(1.04) saturate(.92);
  -webkit-mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.35) 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.35) 92%,transparent 100%);
  transition:transform 1.1s var(--ease)}
.gate__finance:hover .gate__portrait{transform:translateY(-10px) scale(1.02)}
@media(max-width:1180px){.gate__portrait{right:-10%;height:78%;opacity:.85}}

.gate__in{position:relative;z-index:3;padding:0 clamp(24px,4vw,58px) clamp(44px,7vh,80px);width:100%}
.gate__role{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.17em;
  padding:7px 13px;border-radius:999px;margin-bottom:20px}
.gate__studio .gate__role{background:rgba(79,98,158,.13);color:#3C4E85}
.gate__finance .gate__role{background:rgba(62,207,178,.14);color:#3ECFB2}
.gate__vibe .gate__role{background:rgba(157,123,255,.16);color:#B9A3FF}
/* 세 칸이 되면서 한 칸의 폭이 줄어 제목·본문을 한 단계 낮춥니다 */
.gate__in h2{font-size:clamp(22px,2.6vw,36px);font-weight:800;letter-spacing:-.05em;line-height:1.14}
.gate__studio h2{color:#12151C}
.gate__finance h2{color:#fff}
.gate__vibe h2{color:#fff}
.gate__in h2 span{display:block;font-size:.52em;font-weight:600;letter-spacing:-.03em;margin-top:12px;opacity:.62}
.gate__in p{margin-top:18px;font-size:13.5px;line-height:1.8;max-width:28ch;font-weight:500}
.gate__studio p{color:#4A5262}
.gate__finance p{color:#A6B0C3}
.gate__vibe p{color:#ABA4C9}
.gate__enter{margin-top:28px;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  font-weight:700;padding:14px 24px;border-radius:14px;transition:transform .3s var(--ease)}
.gate__studio .gate__enter{background:#4F629E;color:#fff;box-shadow:0 10px 26px rgba(79,98,158,.34)}
.gate__finance .gate__enter{background:#3ECFB2;color:#052E26;box-shadow:0 10px 26px rgba(62,207,178,.26)}
.gate__vibe .gate__enter{background:#9D7BFF;color:#1A0E42;box-shadow:0 10px 26px rgba(157,123,255,.28)}
.gate__side:hover .gate__enter{transform:translateY(-3px)}
.gate__enter b{transition:transform .3s var(--ease)}
.gate__side:hover .gate__enter b{transform:translateX(5px)}

/* 바이브코딩 칸 머리 — 터미널에 명령을 치는 한 줄과 깜박이는 커서 */
.gate__prompt{display:block;font-size:11.5px;font-weight:700;letter-spacing:0;color:#8F86B8;margin-bottom:14px}
.gate__prompt i{display:inline-block;width:7px;height:13px;background:#9D7BFF;margin-left:5px;
  vertical-align:-2px;animation:gcur 1.1s steps(2) infinite}
@keyframes gcur{50%{opacity:0}}

.gate__name{position:absolute;z-index:5;inset:clamp(62px,11vh,108px) 0 auto;text-align:center;
  pointer-events:none;mix-blend-mode:difference;color:#fff}
.gate__name h1.ko,.gate__name .ko{font-size:clamp(42px,7.2vw,96px);font-weight:800;letter-spacing:-.06em;line-height:.98}
.gate__name p.en,.gate__name .en{margin-top:15px;font-size:clamp(10px,1.05vw,12px);font-weight:700;
  letter-spacing:.4em;padding-left:.4em}
.gate__tip{position:absolute;z-index:5;inset:calc(clamp(62px,11vh,108px) + clamp(78px,9.5vw,132px)) 0 auto;
  text-align:center;font-size:12px;font-weight:600;color:#8C96AF;pointer-events:none}
@media(max-width:860px){
  .gate{flex-direction:column;height:auto;min-height:0}
  .gate__side{min-height:52svh}
  .gate__side:hover{flex:1}
  .gate__name{position:static;mix-blend-mode:normal;padding:92px 24px 0;color:#12151C;background:#fff}
  .gate__tip{position:static;padding:14px 24px 30px;background:#fff}
  .gate__portrait{display:none}
  /* 모바일: 사진 위 글씨가 읽히도록 흰 막을 더 두껍게 올립니다.
     패널이 66svh 로 짧아져 데스크톱용 그라데이션이 글씨까지 닿지 않습니다. */
  .gate__studio::after{background:linear-gradient(180deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.72) 34%,
    rgba(255,255,255,.94) 56%, #fff 76%)}
}

/* ═══════════════════════════════════════════════════════
   5. 히어로 · 통계
   ═══════════════════════════════════════════════════════ */
.hero{padding:clamp(120px,17vh,180px) 0 clamp(64px,9vh,96px)}
.hero .kick{font-size:12px;font-weight:800;letter-spacing:.17em;color:var(--accent);margin-bottom:22px}
.hero h1{font-size:clamp(30px,5.4vw,64px);font-weight:800;letter-spacing:-.055em;line-height:1.14;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-top:26px;max-width:48ch;font-size:clamp(15px,1.6vw,17.5px);line-height:1.88;
  color:var(--fg2);font-weight:500}
.hero .btns{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap}

.btn{font-size:14px;font-weight:700;padding:15px 26px;border-radius:14px;display:inline-flex;
  align-items:center;gap:8px;transition:transform .28s var(--ease),box-shadow .28s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn--fill{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 28px var(--accent-soft)}
.btn--line{border:1.5px solid var(--line);color:var(--fg);background:transparent}

.stats{padding:52px 0;border-block:1px solid var(--line)}
.stats__g{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat .n{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.055em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat .n em{font-style:normal;font-size:.44em;font-weight:700;margin-left:3px;color:var(--mut)}
.stat .k{margin-top:11px;font-size:12.5px;color:var(--mut);font-weight:600}
@media(max-width:720px){.stats__g{grid-template-columns:repeat(2,1fr);gap:32px 20px}}

/* ═══════════════════════════════════════════════════════
   6. 섹션 헤드 · 그리드 · 카드
   ═══════════════════════════════════════════════════════ */
.shead{margin-bottom:42px;max-width:62ch}
.shead .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.15em;
  padding:7px 13px;border-radius:999px;margin-bottom:20px;background:var(--accent-soft);color:var(--accent)}
.shead h2{font-size:clamp(25px,3.7vw,40px);font-weight:800;letter-spacing:-.05em;line-height:1.2}
.shead p{margin-top:18px;font-size:15.5px;line-height:1.88;color:var(--fg2);font-weight:500}

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.g2,.g3{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s,background .7s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
/* 카드 이미지는 정사각 틀 + 가운데 정렬.
   원본이 모두 1:1 근처라 잘려나가는 부분이 거의 없습니다.
   다른 비율을 써야 하는 카드는 .card--wide / .card--tall 로 예외 처리합니다. */
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;background:var(--bg2)}
.card--wide img{aspect-ratio:16/9}
.card--tall img{aspect-ratio:4/5}
/* 포스터처럼 잘리면 안 되는 이미지는 여백을 두고 전체를 보여줍니다 */
.card--contain img{object-fit:contain;background:#fff;padding:6%}
.card__b{padding:22px;flex:1;display:flex;flex-direction:column}
.card .k{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--accent);margin-bottom:13px}
.card .num{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--accent);opacity:.55;
  margin-bottom:14px;font-variant-numeric:tabular-nums}
.card h3{font-size:17.5px;font-weight:800;letter-spacing:-.038em;margin-bottom:9px}
.card p{font-size:13.5px;line-height:1.76;color:var(--mut);font-weight:500}
.card .meta{margin-top:auto;padding-top:16px;display:flex;gap:14px;flex-wrap:wrap;
  font-size:11.5px;color:var(--mut);font-weight:600}
.card .go{margin-top:16px;display:inline-flex;gap:6px;font-size:13px;font-weight:700;color:var(--accent)}
.card .go b{transition:transform .3s var(--ease)}
.card:hover .go b{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════
   7. 단계 레일 · 안내 박스 · 경력
   ═══════════════════════════════════════════════════════ */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.rail{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface);
  transition:background .7s,border-color .38s}
.step:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.step .no{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  font-size:13px;font-weight:800;display:grid;place-items:center;margin-bottom:15px}
.step h4{font-size:15.5px;font-weight:800;letter-spacing:-.035em;margin-bottom:8px}
.step p{font-size:13px;line-height:1.72;color:var(--mut);font-weight:500}

.notebox{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:880px){.notebox{grid-template-columns:1fr}}
.notebox > div{background:var(--surface);padding:24px;transition:background .7s}
.notebox h4{font-size:15px;font-weight:800;letter-spacing:-.035em;margin-bottom:10px}
.notebox p{font-size:13px;line-height:1.8;color:var(--mut);font-weight:500}

.crbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  transition:background .7s}
.crbox h4{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--accent);margin-bottom:18px}
.crbox li{font-size:14.5px;line-height:1.6;color:var(--fg2);font-weight:500;padding:10px 0 10px 20px;
  border-bottom:1px solid var(--line);position:relative;letter-spacing:-.025em}
.crbox li:last-child{border-bottom:0}
.crbox li::before{content:"";position:absolute;left:2px;top:18px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.55}
.crbox .more{margin-top:14px;font-size:12.5px;color:var(--mut);font-weight:600}

/* ═══════════════════════════════════════════════════════
   8. 소개 (인물)
   ═══════════════════════════════════════════════════════ */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:880px){.about{grid-template-columns:1fr;gap:28px}}
.about__ph{position:relative;border-radius:24px;overflow:hidden;transition:background .7s;
  background:radial-gradient(ellipse at 50% 34%,var(--accent-soft),transparent 68%),var(--bg2)}
.about__ph img{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%)}
.about__t h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.055em;line-height:1.1;margin:16px 0 0}
.about__t .role{margin:12px 0 22px;font-size:14.5px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.about__t > p{font-size:15.5px;line-height:1.9;color:var(--fg2);font-weight:500;margin-bottom:14px;max-width:52ch}

.tl{margin:28px 0 4px;border-left:1.5px solid var(--line);padding-left:20px}
.tl div{display:flex;gap:16px;align-items:baseline;padding:7px 0;position:relative}
.tl div::before{content:"";position:absolute;left:-25.5px;top:15px;width:8px;height:8px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--line)}
.tl div:last-child::before{background:var(--accent);border-color:var(--accent)}
.tl b{flex:0 0 46px;font-size:12.5px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tl span{font-size:14px;color:var(--fg2);font-weight:500;letter-spacing:-.02em}

.cred{margin-top:30px;padding:22px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);transition:background .7s}
.cred__h{margin-bottom:14px;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--mut)}
.cred__c{display:flex;flex-wrap:wrap;gap:7px}
.cred__c span{font-size:12.5px;font-weight:700;letter-spacing:-.02em;padding:8px 13px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent)}
.cred__n{margin-top:16px;font-size:13px;line-height:1.75;color:var(--mut)}

.stance{margin-top:26px;padding-left:18px;border-left:2px solid var(--accent);
  font-size:15px;line-height:1.85;color:var(--fg);font-weight:600}

.deflist{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.deflist li{display:flex;gap:16px;font-size:13.5px;line-height:2.1;color:var(--fg2);font-weight:500}
.deflist li span{flex:0 0 84px;color:var(--mut);font-weight:700;font-size:12.5px}

/* ═══════════════════════════════════════════════════════
   9. 계산기
   ═══════════════════════════════════════════════════════ */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:clamp(24px,3.4vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:34px;
  align-items:center;transition:background .7s}
@media(max-width:880px){.calc{grid-template-columns:1fr;gap:26px}}
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field__lab{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;
  font-weight:600;color:var(--fg2);margin-bottom:11px}
.field__lab b{font-size:16px;color:var(--fg);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:99px;
  background:var(--line);outline:0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 5px var(--accent-soft);transition:box-shadow .2s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 9px var(--accent-soft)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;
  background:var(--accent);cursor:pointer}
.result{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:18px;padding:30px;text-align:center}
.result .k{font-size:12.5px;color:var(--fg2);font-weight:600;margin-bottom:12px}
.result .v{font-size:clamp(31px,4.6vw,44px);font-weight:800;letter-spacing:-.055em;color:var(--accent);
  line-height:1;font-variant-numeric:tabular-nums}
.result .v em{font-style:normal;font-size:.44em;margin-left:4px}
.result .sub{margin-top:12px;font-size:14px;font-weight:700;color:var(--fg2);letter-spacing:-.03em}
.result .note{margin-top:15px;font-size:11.5px;color:var(--mut);line-height:1.7}
.bars{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:20px}
.bars i{flex:1;background:color-mix(in srgb,var(--accent) 32%,transparent);border-radius:3px 3px 0 0;
  transition:height .5s var(--ease)}
.bars i:last-child{background:var(--accent)}

/* ═══════════════════════════════════════════════════════
   10. 상담 결과물 미리보기
   ═══════════════════════════════════════════════════════ */
.pf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s,background .7s}
.pf:hover{transform:translateY(-6px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.pf__prev{aspect-ratio:4/3;background:var(--bg2);display:grid;place-items:center;padding:22px;
  border-bottom:1px solid var(--line);transition:background .7s}
.pf__doc{width:100%;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:0 6px 18px rgba(0,0,0,.07);
  transition:background .7s}
.pf__ttl{height:7px;width:44%;border-radius:99px;background:var(--accent);opacity:.85}
.pf__bars{display:flex;align-items:flex-end;gap:5px;flex:1;min-height:0}
.pf__bars i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--accent) 34%,transparent)}
.pf__bars i:last-child{background:var(--accent)}
.pf__rows{display:flex;flex-direction:column;gap:6px}
.pf__rows u{height:5px;width:100%;border-radius:99px;background:var(--line);display:block}
.pf__stage{display:flex;align-items:center;gap:6px;margin:4px 0}
.pf__stage span{flex:1;height:5px;border-radius:99px;background:var(--line)}
.pf__stage span.on{background:var(--accent);height:8px}
.pf__qa{display:flex;align-items:center;gap:8px}
.pf__qa b{flex:0 0 14px;height:14px;border-radius:4px;font-size:8px;font-weight:800;
  display:grid;place-items:center;background:var(--line);color:var(--mut)}
.pf__qa b.a{background:var(--accent);color:var(--accent-ink)}
.pf__qa u{height:5px;width:100%;border-radius:99px;background:var(--line);display:block}
.pf__b{padding:22px}
.pf__b h3{font-size:17.5px;font-weight:800;letter-spacing:-.038em;margin-bottom:9px}
.pf__b p{font-size:13.5px;line-height:1.76;color:var(--mut);font-weight:500}
/* 본문 속 「전 · 후」 같은 표지는 설명글보다 한 단계 밝게 */
.pf__b p b{color:var(--fg)}
/* 카드 자체가 앵커일 때 — 고정 내비에 머리가 가리지 않도록 */
.pf[id]{scroll-margin-top:96px}
.pf__note{margin-top:26px;font-size:12px;line-height:1.8;color:var(--mut);font-weight:500}

/* ═══════════════════════════════════════════════════════
   11. CTA · 반대편 안내
   ═══════════════════════════════════════════════════════ */
.cta{padding:clamp(80px,12vh,120px) 0;text-align:center}
.cta h2{font-size:clamp(26px,4.2vw,44px);font-weight:800;letter-spacing:-.05em;line-height:1.24}
.cta p{margin-top:18px;font-size:16px;color:var(--fg2);line-height:1.85;font-weight:500}
.cta .btns{margin-top:36px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.flip{padding:clamp(72px,11vh,110px) 0}
.flip__box{border:1px solid var(--line);border-radius:24px;padding:clamp(28px,4vw,46px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  position:relative;overflow:hidden;background:var(--surface);transition:background .7s}
.flip__box::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:var(--accent-soft)}
.flip__t{position:relative;z-index:2}
.flip__k{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--mut);margin-bottom:13px}
.flip__t h3{font-size:clamp(21px,2.9vw,30px);font-weight:800;letter-spacing:-.045em;line-height:1.28}
.flip__t p{margin-top:14px;font-size:14.5px;line-height:1.8;color:var(--fg2);max-width:46ch;font-weight:500}
.flip .btn{position:relative;z-index:2}
/* 세계가 셋이 되어 다른 얼굴 안내는 두 칸으로 나란히 놓습니다 */
.flip__g{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:880px){.flip__g{grid-template-columns:1fr}}
/* 세로로 세워도 justify-content:space-between 이 살아 있어
   두 칸의 글 길이가 달라도 버튼은 바닥에 나란히 섭니다 */
.flip__g .flip__box{flex-direction:column;align-items:flex-start}
.flip__box--studio::after{background:rgba(79,98,158,.10)}
.flip__box--studio .btn{background:var(--c-studio);color:#fff}
.flip__box--finance::after{background:rgba(62,207,178,.10)}
.flip__box--finance .btn{background:var(--c-finance);color:#052E26}
.flip__box--vibe::after{background:rgba(157,123,255,.12)}
.flip__box--vibe .btn{background:var(--c-vibe);color:#1A0E42}

/* ═══════════════════════════════════════════════════════
   12. 푸터
   ═══════════════════════════════════════════════════════ */
.foot{background:var(--bg2);color:var(--mut);padding:56px 0 66px;font-size:12.5px;line-height:2;
  border-top:1px solid var(--line);transition:background .7s}
.foot__top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:28px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.foot__l{display:flex;gap:20px;font-size:13px;color:var(--fg2);font-weight:600;flex-wrap:wrap}
.foot__l a:hover{color:var(--accent)}
.disclaimer{margin-bottom:22px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  font-size:11.5px;line-height:1.85;color:var(--mut);max-width:88ch}

/* ═══════════════════════════════════════════════════════
   13. 그래픽 — 아이콘 · 도해 · 데이터 표
   ═══════════════════════════════════════════════════════ */
.ico{display:block;flex:0 0 auto}
.icobox{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:16px;transition:.35s var(--ease)}
.card:hover .icobox,.step:hover .icobox{transform:translateY(-2px) scale(1.04)}
.icobox--lg{width:56px;height:56px;border-radius:16px}

/* 생애주기 곡선 */
.arcwrap{margin:0 auto;max-width:760px;color:var(--accent)}
.arc{width:100%;height:auto}
.arcwrap .cap{margin-top:14px;text-align:center;font-size:13px;color:var(--mut);font-weight:500}

.stack{width:100%;height:auto;color:var(--accent)}
.figbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;display:grid;place-items:center;transition:background .7s}

/* ── 연금 3층 구조 (HTML 컴포넌트) ─────────────────────── */
.pension{display:flex;flex-direction:column-reverse;gap:10px;width:100%}
.pension__row{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;
  border:1px solid;position:relative;transition:transform .35s var(--ease)}
.pension__row:hover{transform:translateX(4px)}
.pension__row .fl{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;font-weight:800;letter-spacing:-.03em}
.pension__row .nm{font-size:17px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.pension__row .ds{font-size:12.5px;font-weight:500;margin-top:3px;opacity:.75}
.pension__row .who{margin-left:auto;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;
  white-space:nowrap}
/* 1층 — 국민 (가장 넓고 차분) */
.pension__row.l1{background:var(--a5-soft);border-color:color-mix(in srgb,var(--a5) 38%,transparent);color:var(--a5)}
.pension__row.l1 .fl{background:color-mix(in srgb,var(--a5) 22%,transparent)}
.pension__row.l1 .who{background:color-mix(in srgb,var(--a5) 18%,transparent)}
/* 2층 — 퇴직 */
.pension__row.l2{background:var(--a4-soft);border-color:color-mix(in srgb,var(--a4) 38%,transparent);color:var(--a4);
  margin-inline:6% 0}
.pension__row.l2 .fl{background:color-mix(in srgb,var(--a4) 22%,transparent)}
.pension__row.l2 .who{background:color-mix(in srgb,var(--a4) 18%,transparent)}
/* 3층 — 개인 (가장 좁고 강조) */
.pension__row.l3{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 46%,transparent);color:var(--accent);
  margin-inline:12% 0}
.pension__row.l3 .fl{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.pension__row.l3 .who{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.pension__row .nm,.pension__row .ds{color:var(--fg)}
.pension__cap{margin-top:16px;font-size:12px;color:var(--mut);line-height:1.7;text-align:center}
@media(max-width:520px){
  .pension__row{padding:14px 15px;gap:12px}
  .pension__row.l2{margin-inline:0}.pension__row.l3{margin-inline:0}
  .pension__row .who{display:none}
}

/* ── STEP 배지 ─────────────────────────────────────────── */
.steps{display:flex;flex-direction:column;gap:14px}
.stepcard{display:grid;grid-template-columns:74px 1fr;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);transition:background .7s}
@media(max-width:560px){.stepcard{grid-template-columns:1fr}}
.stepcard__n{background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  padding:18px 8px;font-weight:800;line-height:1.25;text-align:center}
.stepcard__n small{display:block;font-size:10px;letter-spacing:.14em;opacity:.7}
.stepcard__n b{font-size:22px;letter-spacing:-.04em}
.stepcard:nth-child(2) .stepcard__n{background:var(--a4);color:#0A1030}
.stepcard:nth-child(3) .stepcard__n{background:var(--a2);color:#3A2703}
.stepcard:nth-child(4) .stepcard__n{background:var(--a5);color:#032738}
.stepcard__b{padding:20px 22px}
.stepcard__b h4{font-size:16px;font-weight:800;letter-spacing:-.035em;margin-bottom:7px}
.stepcard__b p{font-size:13.5px;line-height:1.75;color:var(--fg2);font-weight:500}

/* ── 큰 숫자 배지 ──────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.fig{text-align:center;padding:26px 16px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);transition:transform .35s var(--ease),background .7s}
.fig:hover{transform:translateY(-4px)}
.fig .dot{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  font-size:23px;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.fig:nth-child(1) .dot{background:var(--accent-soft);color:var(--accent)}
.fig:nth-child(2) .dot{background:var(--a2-soft);color:var(--a2)}
.fig:nth-child(3) .dot{background:var(--a4-soft);color:var(--a4)}
.fig:nth-child(4) .dot{background:var(--a5-soft);color:var(--a5)}
.fig .lb{font-size:13.5px;font-weight:800;letter-spacing:-.03em;margin-bottom:5px}
.fig .sb{font-size:12px;color:var(--mut);line-height:1.6;font-weight:500}

/* ── 컬러 라벨 헤딩 ────────────────────────────────────── */
.hlabel{display:inline-block;font-size:13.5px;font-weight:800;letter-spacing:-.03em;
  padding:8px 15px;border-radius:9px;margin-bottom:16px;
  background:var(--accent);color:var(--accent-ink)}
.hlabel--a2{background:var(--a2);color:#3A2703}
.hlabel--a3{background:var(--a3);color:#3A0F09}
.hlabel--a4{background:var(--a4);color:#0A1030}

/* ── 강조 박스 (좌측 컬러 바) ──────────────────────────── */
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:18px 20px;border-radius:0 12px 12px 0;font-size:14px;line-height:1.8;color:var(--fg2)}
.callout b{color:var(--fg)}
.callout--warn{border-left-color:var(--a3);background:var(--a3-soft)}
.callout--info{border-left-color:var(--a5);background:var(--a5-soft)}
.callout--tip{border-left-color:var(--a2);background:var(--a2-soft)}

/* ── 밝은 카드 면 (어두운 배경 위 대비) ────────────────── */
.paper{background:var(--paper);color:var(--paper-ink);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.paper h3,.paper h4{color:var(--paper-ink)}
.paper p,.paper li{color:#4A5568}
.paper .hlabel{background:var(--paper-ink);color:#fff}

/* 데이터 표 — 값 구간별 색 */
.dtable .lv i::after{background:var(--accent)}
.dtable tr:nth-child(2) .lv i::after{background:var(--a4)}
.dtable tr:nth-child(3) .lv i::after{background:var(--a2)}
.dtable tr:nth-child(4) .lv i::after{background:var(--a5)}
.dtable tr:nth-child(5) .lv i::after{background:var(--a4)}
.dtable tr:nth-child(6) .lv i::after{background:var(--a3)}

/* 데이터 표 */
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th,.dtable td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.dtable thead th{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--mut);
  border-bottom:1.5px solid var(--line);white-space:nowrap;padding-bottom:10px}
.dtable tbody tr{transition:background .25s}
.dtable tbody tr:hover{background:var(--accent-soft)}
.dtable .stg{font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.dtable .stg b{display:block;font-size:11px;color:var(--accent);font-weight:800;margin-bottom:3px}
.dtable .txt{color:var(--fg2);font-weight:500;line-height:1.65;min-width:190px}
.dtable .lv{display:flex;align-items:center;gap:8px;min-width:104px}
.dtable .lv i{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.dtable .lv i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0);
  border-radius:99px;background:var(--accent)}
.dtable .lv s{text-decoration:none;font-size:11px;font-weight:700;color:var(--mut);width:26px;text-align:right}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:680px}
.tnote{margin-top:16px;font-size:12px;color:var(--mut);line-height:1.75}

/* ═══════════════════════════════════════════════════════
   14. 비공개 문서
   ═══════════════════════════════════════════════════════ */
.dochead{padding:clamp(110px,16vh,170px) 0 clamp(34px,5vh,54px);border-bottom:1px solid var(--line)}
.dochead h1{font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-.05em;line-height:1.22;margin:16px 0 0}
.dochead__d{margin-top:16px;font-size:15.5px;line-height:1.85;color:var(--fg2);max-width:60ch;font-weight:500}
.docmeta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px}
.docmeta li{font-size:13px;color:var(--fg2);font-weight:600}
.docmeta li span{display:block;font-size:11px;color:var(--mut);font-weight:700;margin-bottom:3px;letter-spacing:.06em}
.docacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.docbody{padding:clamp(38px,6vh,64px) 0}
.docfoot{border-top:1px solid var(--line);padding:34px 0 clamp(60px,9vh,90px)}
.docfoot__w{font-size:13.5px;line-height:1.85;color:var(--fg2);padding:16px 18px;border-radius:12px;
  border-left:3px solid var(--a2);background:var(--a2-soft);margin-bottom:18px}
.docfoot__w b{color:var(--fg)}
.docfoot__d{font-size:11.5px;line-height:1.85;color:var(--mut);max-width:88ch}

/* 이관된 원본 문서
   문서마다 자기 CSS 와 CSS 변수를 갖고 있습니다(아임웹에서 함께 회수).
   대부분 밝은 배경 기준으로 만들어져 있어서, 문서가 정의한 --bg / --text 를
   그대로 씁니다. 정의가 없으면 사이트 값으로 떨어집니다.
   ⚠️ 예전처럼 h1/h2/table 을 강제로 덮으면 원본 디자인이 다시 깨집니다. */
.docbody .doc-inner{
  background:var(--bg, var(--paper));
  color:var(--text, #1f2933);
  border-radius:var(--r);
  padding:clamp(20px,3.4vw,40px);
  overflow-x:auto;                 /* 넓은 표가 레이아웃을 밀지 않도록 */
}
.docbody .doc-inner img{max-width:100%;height:auto}
.docbody .doc-inner table{max-width:100%}
.docbody .doc-inner :is(h1,h2,h3,h4):first-child{margin-top:0}

@media print{
  .nav,.mobar,#prog,.skip,.docacts,.foot,.docfoot__w{display:none !important}
  .dochead{padding-top:0;border-color:#ccc}
  .docbody .doc-inner{background:#fff;padding:0;border-radius:0}
  html,body{background:#fff !important;color:#000 !important}
  .dochead h1,.dochead__d,.docmeta li{color:#000 !important}
}

/* ═══════════════════════════════════════════════════════
   15. 폼
   ═══════════════════════════════════════════════════════ */
.form{max-width:760px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}
.fld{margin-bottom:24px;border:0;padding:0;min-width:0}
.fld > label,.fld legend{display:block;font-size:13.5px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em;padding:0}
.req,.opt{font-size:11px;font-weight:700;padding:3px 7px;border-radius:5px;margin-left:4px;vertical-align:1px}
.req{background:var(--accent-soft);color:var(--accent)}
.opt{background:var(--bg2);color:var(--mut)}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld textarea{
  width:100%;padding:15px 16px;border:1.5px solid var(--line);border-radius:13px;background:var(--surface);
  color:var(--fg);font-size:15px;letter-spacing:-.02em;transition:border-color .25s,background .7s}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mut)}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--accent)}
.fld textarea{resize:vertical;line-height:1.7}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt-item{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--surface);cursor:pointer;font-size:14px;font-weight:500;
  transition:border-color .25s,background .25s}
.opt-item:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.opt-item:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.opt-item input{accent-color:var(--accent);width:17px;height:17px;flex:0 0 auto}
.agree{margin:34px 0 30px;padding:22px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg2)}
.agree .opt-item{background:transparent;border:0;padding:0;font-size:14.5px}
.agree__box{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.85;color:var(--mut)}
.agree__box p{margin-bottom:6px}
.agree__box b{color:var(--fg2)}
.agree__box a{color:var(--accent);font-weight:700}
.formerr{margin-bottom:28px;padding:18px 20px;border-radius:14px;max-width:760px;
  border:1.5px solid #E2574C;background:rgba(226,87,76,.08);color:var(--fg)}
.formerr b{display:block;font-size:14px;margin-bottom:8px}
.formerr li{font-size:13.5px;line-height:1.9;color:var(--fg2);padding-left:14px;position:relative}
.formerr li::before{content:"·";position:absolute;left:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.btn{font-family:var(--f)}

/* 문서형 페이지 (약관·방침) */
.doc{max-width:76ch;font-size:14.5px;line-height:1.95;color:var(--fg2)}
.doc h3{font-size:17px;font-weight:800;color:var(--fg);letter-spacing:-.035em;margin:36px 0 12px}
.doc h3:first-child{margin-top:0}
.doc p{margin-bottom:12px}
.doc ul{margin:0 0 14px}
.doc li{padding-left:16px;position:relative;margin-bottom:5px}
.doc li::before{content:"·";position:absolute;left:4px;color:var(--accent)}
.doc table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:13.5px}
.doc th,.doc td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.doc th{background:var(--bg2);font-weight:700;color:var(--fg);white-space:nowrap}
.doc .upd{font-size:12.5px;color:var(--mut);margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}

/* ═══════════════════════════════════════════════════════
   14. 등장 애니메이션
   ═══════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}