/* ============================================================
   GODGOD — 공유 디자인 시스템 (퍼블릭 페이지)
   방향 B: 라이트 럭셔리 + 데이터 비주얼라이즈드
   한국 증시 색 관례: 상승=빨강 / 하락=파랑
   ============================================================ */

/* ---- 폰트 ---- */
@font-face{font-family:"Pretendard Variable";font-display:swap;font-weight:45 920;
  src:local("Pretendard Variable")}

/* ---- 토큰 (라이트) ---- */
:root{
  --bg:#eef1f4; --surface:#ffffff; --surface2:#f5f7f9;
  --text:#12161c; --text2:#586472; --text3:#98a2ae;
  --line:#e7ebef; --hair:#f1f3f6;
  --primary:#1f5fdb; --primary-weak:#e9f0fe; --primary-ink:#143f93;
  --up:#e2231a; --up-weak:#fdeceb;        /* 상승=빨강 */
  --down:#1f5fdb;                          /* 하락=파랑 */
  --good:#0f9f78; --good-weak:#e6f7ef;     /* 무료/기부 (AA 대비 강화) */
  --amber:#ef8b09; --amber-ink:#8a4d02; --amber-weak:#fef2df; /* 정직 고지 */
  --r:22px; --r-sm:14px; --r-lg:30px;
  --shadow:0 6px 22px rgba(17,24,39,.06);
  --shadow-lg:0 18px 44px rgba(17,24,39,.13);
  --shadow-xl:0 40px 90px -30px rgba(17,24,39,.30);
  --ring:0 0 0 4px rgba(31,95,219,.28);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --grad-luxe:radial-gradient(1200px 700px at 82% -10%, #f3f7ff 0%, rgba(243,247,255,0) 55%),
              radial-gradient(900px 600px at -10% 8%, #fbf4ee 0%, rgba(251,244,238,0) 50%);
}

/* 다크: 시스템 + data-theme 둘 다 지원 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d11; --surface:#15191f; --surface2:#10141a;
    --text:#eef2f6; --text2:#aab4c0; --text3:#6c7682;
    --line:#232a33; --hair:#1a2027;
    --primary:#5d8cf0; --primary-weak:#16233b; --primary-ink:#bcd0fb;
    --up:#ff5a51; --up-weak:#3a1714;
    --down:#5d8cf0;
    --good:#2fd49e; --good-weak:#0f2a22;
    --amber:#f7ad4a; --amber-ink:#f7c98a; --amber-weak:#33240f;
    --shadow:0 6px 22px rgba(0,0,0,.4);
    --shadow-lg:0 18px 44px rgba(0,0,0,.5);
    --shadow-xl:0 40px 90px -30px rgba(0,0,0,.7);
    --grad-luxe:radial-gradient(1200px 700px at 82% -10%, #15203a 0%, rgba(21,32,58,0) 55%),
                radial-gradient(900px 600px at -10% 8%, #241b16 0%, rgba(36,27,22,0) 50%);
  }
}
[data-theme="dark"]{
  --bg:#0b0d11; --surface:#15191f; --surface2:#10141a;
  --text:#eef2f6; --text2:#aab4c0; --text3:#6c7682;
  --line:#232a33; --hair:#1a2027;
  --primary:#5d8cf0; --primary-weak:#16233b; --primary-ink:#bcd0fb;
  --up:#ff5a51; --up-weak:#3a1714;
  --down:#5d8cf0;
  --good:#2fd49e; --good-weak:#0f2a22;
  --amber:#f7ad4a; --amber-ink:#f7c98a; --amber-weak:#33240f;
  --shadow:0 6px 22px rgba(0,0,0,.4);
  --shadow-lg:0 18px 44px rgba(0,0,0,.5);
  --shadow-xl:0 40px 90px -30px rgba(0,0,0,.7);
  --grad-luxe:radial-gradient(1200px 700px at 82% -10%, #15203a 0%, rgba(21,32,58,0) 55%),
              radial-gradient(900px 600px at -10% 8%, #241b16 0%, rgba(36,27,22,0) 50%);
}

/* ---- 리셋 ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  font-feature-settings:"tnum" 1; line-height:1.6;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* ---- 레이아웃 ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,9vw,108px) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary)
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.22}
.lead{color:var(--text2);font-size:clamp(15px,1.5vw,18px);max-width:60ch}
.muted{color:var(--text2)}
.fine{color:var(--text3);font-size:12.5px;line-height:1.55}

/* ---- 브랜드 마크 (컴퍼스) ---- */
.brand{display:inline-flex;align-items:center;gap:11px}
.mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:var(--text);position:relative;flex:none;box-shadow:0 4px 14px rgba(17,24,39,.18)}
.mark::after{content:"";width:16px;height:16px;border:2.6px solid var(--surface);
  border-radius:50%;border-right-color:transparent;transform:rotate(-45deg)}
[data-theme="dark"] .mark, :root:not([data-theme="light"]) .mark{background:#f3f6fb}
[data-theme="dark"] .mark::after, :root:not([data-theme="light"]) .mark::after{border-color:#0b0d11;border-right-color:transparent}
.brand-name{font-weight:800;letter-spacing:-.02em;font-size:19px}
.mark-sm{width:30px;height:30px;border-radius:10px}
.mark-sm::after{width:11px;height:11px;border-width:2px}

/* ---- 버튼 (알약형) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15.5px;
  border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn-lg{height:56px;padding:0 30px;font-size:16.5px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 26px -8px rgba(31,95,219,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(31,95,219,.62)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-block{width:100%}

/* ---- 칩 ---- */
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border-radius:999px;font-size:13.5px;font-weight:600;background:var(--surface);
  border:1px solid var(--line);color:var(--text2);box-shadow:var(--shadow)}
.chip svg{width:15px;height:15px}
.chip-good{background:var(--good-weak);border-color:transparent;color:var(--good)}
.chip-amber{background:var(--amber-weak);border-color:transparent;color:var(--amber-ink)}
.chip-up{background:var(--up-weak);border-color:transparent;color:var(--up)}
.chip-ex{background:var(--text);color:#fff;border-color:transparent;letter-spacing:.04em;font-weight:700;height:26px;padding:0 11px;font-size:11.5px}
[data-theme="dark"] .chip-ex, :root:not([data-theme="light"]) .chip-ex{background:#eef2f6;color:#0b0d11}

/* ---- 카드 ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:26px}
.card-pad-lg{padding:clamp(26px,4vw,40px)}

/* ---- 헤더(네비) ---- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb,var(--bg) 78%, transparent);border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 90%, transparent)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-link{font-weight:600;color:var(--text2);padding:10px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav-link:hover{color:var(--text);background:var(--surface2)}
.theme-toggle{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text2);box-shadow:var(--shadow)}
.theme-toggle:hover{color:var(--text)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .ico-sun{display:none}
[data-theme="dark"] .theme-toggle .ico-sun, :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:block}
[data-theme="dark"] .theme-toggle .ico-moon, :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none}

/* ---- 스파이더맵 레이더 ---- */
.radar-wrap{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1}
.radar svg{width:100%;height:auto;overflow:visible}
.radar .grid-line{stroke:var(--line);stroke-width:1;fill:none}
.radar .grid-poly{stroke:var(--line);stroke-width:1;fill:none}
[data-theme="dark"] .radar .grid-poly,:root:not([data-theme="light"]) .radar .grid-poly{stroke:#2a323d}
.radar .data-fill{fill:var(--primary);fill-opacity:.16}
.radar .data-stroke{fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linejoin:round}
.radar .vertex{fill:var(--surface);stroke:var(--primary);stroke-width:2.2}
.radar .axis-label{font-size:12px;font-weight:700;fill:var(--text2)}
.radar .axis-val{font-size:11px;font-weight:700;fill:var(--primary)}
.radar-core{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.radar-score{display:grid;place-items:center;text-align:center;
  background:color-mix(in srgb,var(--surface) 86%, transparent);
  width:128px;height:128px;border-radius:50%;backdrop-filter:blur(4px);
  box-shadow:0 10px 30px -10px rgba(31,95,219,.45),inset 0 0 0 1px var(--line)}
.radar-score .s-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--text3)}
.radar-score .s-num{font-size:46px;font-weight:850;line-height:1;letter-spacing:-.03em;color:var(--primary)}
.radar-score .s-sub{font-size:11px;color:var(--text3);margin-top:2px}

/* ---- 점수칩 그리드 ---- */
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.score-pill{background:var(--surface2);border-radius:12px;padding:10px 12px;border:1px solid var(--hair)}
.score-pill .k{font-size:12px;color:var(--text2);font-weight:600}
.score-pill .v{font-size:20px;font-weight:800;letter-spacing:-.02em}

/* ---- 정직 고지 (앰버) ---- */
.honest{background:var(--amber-weak);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);
  border-radius:var(--r)}
.honest .honest-tag{color:var(--amber-ink);font-weight:800}

/* ---- 모션: 스크롤 리빌 ----
   원칙: 정지 상태(rest) = 최종 비주얼(항상 보임). 모션은 .in 진입 시 1회 재생.
   (opacity로 숨기지 않음 → 모션이 꺼져도/캡처돼도 콘텐츠는 항상 가시) */
@keyframes gg-rise{from{transform:translateY(30px)} to{transform:none}}
.reveal.in{animation:gg-rise .8s var(--ease) .05s}
.reveal.d1{animation-delay:.07s}.reveal.d2{animation-delay:.15s}
.reveal.d3{animation-delay:.23s}.reveal.d4{animation-delay:.31s}
.reveal.d5{animation-delay:.39s}.reveal.d6{animation-delay:.47s}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sheen{0%{background-position:-180% 0}60%,100%{background-position:220% 0}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.float{animation:floaty 6s var(--ease) infinite}
.float-2{animation:floaty 7.4s var(--ease) infinite;animation-delay:-1.6s}

/* draw-on for radar: 정지 상태는 완전히 그려진 모습. .in 시 그리기 애니메이션 재생 */
@keyframes gg-draw{from{stroke-dashoffset:var(--len,420)} to{stroke-dashoffset:0}}
@keyframes gg-pop{from{transform:scale(.4)} to{transform:scale(1)}}
.radar .data-stroke.draw{stroke-dasharray:var(--len,420);stroke-dashoffset:0}
.radar.in .data-stroke.draw{animation:gg-draw 1.5s var(--ease) .2s}
.radar .vertex{transform-box:fill-box;transform-origin:center}
.radar.in .vertex{animation:gg-pop .4s var(--ease) 1.3s}

/* ---- 푸터 ---- */
.footer{background:var(--surface2);border-top:1px solid var(--line);padding:56px 0 40px}
.footer a:hover{color:var(--primary)}

/* ---- 폼 ---- */
.field{display:block;margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:8px;color:var(--text)}
.field input[type=email],.field input[type=password],.field input[type=text]{
  width:100%;height:52px;padding:0 16px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface2);color:var(--text);
  font:inherit;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{border-color:var(--primary);background:var(--surface);box-shadow:var(--ring);outline:none}
.field input::placeholder{color:var(--text3)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important}
.form-err{min-height:20px;color:var(--up);font-size:13.5px;font-weight:600;margin:4px 0 6px}
.checks{display:grid;gap:10px;margin:8px 0 18px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text2);
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface2);
  cursor:pointer;transition:border-color .2s}
.check:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.check input{margin-top:2px;width:18px;height:18px;accent-color:var(--primary);flex:none}
.check a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.check .req{color:var(--up);font-weight:800}
.toggle-row{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text2);margin:2px 0 18px;cursor:pointer}
.toggle-row input{width:18px;height:18px;accent-color:var(--primary)}

/* ---- 인증 페이지 레이아웃 ---- */
.auth{min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-aside{position:relative;overflow:hidden;background:var(--surface);border-right:1px solid var(--line);
  padding:48px;display:flex;flex-direction:column;justify-content:space-between;background-image:var(--grad-luxe)}
.auth-main{display:grid;place-items:center;padding:48px 24px;background:var(--bg)}
.auth-card{width:100%;max-width:420px}

/* ---- 법적 문서 ---- */
.legal-head{padding:48px 0 8px}
.legal-grid{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.legal-toc{position:sticky;top:96px;font-size:14px}
.legal-toc a{display:block;padding:7px 12px;border-radius:10px;color:var(--text2);font-weight:600}
.legal-toc a:hover,.legal-toc a.active{background:var(--surface);color:var(--text)}
.legal-body .card{margin-bottom:16px}
.legal-body h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.legal-body p,.legal-body li{color:var(--text2);font-size:15px}
.legal-body ul{list-style:disc;padding-left:20px;display:grid;gap:6px}
.backlink{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-weight:600}
.backlink:hover{color:var(--primary)}

/* ---- 그리드 유틸 ---- */
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}

/* ---- 단계 번호 ---- */
.step-num{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--primary-weak);color:var(--primary);font-weight:850;font-size:16px}

/* ---- FAQ ---- */
.faq-item{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);margin-bottom:10px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;
  background:none;border:0;padding:20px 22px;text-align:left;font-weight:700;font-size:16px;color:var(--text)}
.faq-q .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;
  transition:transform .3s var(--ease),background .2s}
.faq-item.open .faq-q .pm{transform:rotate(45deg);background:var(--primary);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 22px 22px;color:var(--text2);font-size:15px}

/* ---- 반응형 ---- */
@media (max-width:880px){
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{display:none}
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
  .g-3{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .nav-link.hide-sm{display:none}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .radar .data-stroke.draw{stroke-dashoffset:0}
  .radar .data-fill,.radar .vertex{opacity:1}
}