/* Afflix — 로그인/가입/요금제/정책 공용 스타일 v1.0 (디팀 auth-policy-pages 시안 분리본) */
:root{
  --bg:#040810; --bg2:#0B1220; --bg3:#13192B;
  --surface:rgba(12,16,28,0.85); --surface2:rgba(20,28,56,0.55); --surface3:rgba(30,40,72,0.45);
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.18);
  --text1:rgba(255,255,255,0.95); --text2:rgba(255,255,255,0.65); --text3:rgba(255,255,255,0.40);
  --brand:#D7263D; --brand-700:#B81E33; --brand-100:rgba(215,38,61,0.16); --brand-50:rgba(215,38,61,0.08);
  --green:#34D399; --green-soft:rgba(52,211,153,0.12);
  --warn:#F59E0B; --warn-soft:rgba(245,158,11,0.14);
  --hero-overlay:linear-gradient(180deg,rgba(4,8,16,0.65) 0%,rgba(4,8,16,0.92) 100%);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard Variable','Pretendard',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#0E1530 0%,var(--bg) 50%) fixed,var(--bg);
  color:var(--text1);font-size:15px;line-height:1.65;letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit}

/* ===== 공용 상단 브랜드 ===== */
.auth-topbar{max-width:1280px;margin:0 auto;padding:20px 24px}
.auth-topbar a{font-size:20px;font-weight:900;color:var(--brand);letter-spacing:-0.025em}

/* ===== Common buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:10px;font-size:15px;font-weight:800;transition:.18s;letter-spacing:-0.005em;cursor:pointer;border:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(215,38,61,0.28)}
.btn-primary:hover{background:var(--brand-700);transform:translateY(-1px);box-shadow:0 12px 28px rgba(215,38,61,0.42)}
.btn-ghost{background:transparent;color:var(--text1);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--surface2);border-color:var(--text2)}
.btn-block{width:100%}
.btn-lg{height:56px;font-size:16px;padding:0 28px;border-radius:12px}

/* ===== Forms ===== */
.field{display:flex;flex-direction:column;gap:8px}
.field-lbl{font-size:12.5px;font-weight:700;color:var(--text2);letter-spacing:-0.005em}
.field-input{height:48px;padding:0 14px;background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;color:var(--text1);font-size:14.5px;transition:.15s;outline:none;font-family:inherit}
.field-input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--brand-50)}
.field-hint{font-size:11.5px;color:var(--text3);line-height:1.55}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* =====================================================================
 * P1 — Login
 * ===================================================================== */
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.auth-left{background:linear-gradient(135deg,rgba(215,38,61,0.18),rgba(11,18,32,0.95)),
  radial-gradient(ellipse at 20% 20%,rgba(52,211,153,0.18),transparent 50%);
  padding:60px 56px;display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid var(--border);min-height:100vh;position:relative;overflow:hidden}
.auth-left::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size:24px 24px;pointer-events:none}
.auth-brand{font-size:22px;font-weight:900;color:var(--brand);letter-spacing:-0.025em;position:relative}
.auth-pitch{position:relative;display:flex;flex-direction:column;gap:22px}
.auth-pitch-eyebrow{font-size:11px;font-weight:800;color:var(--green);letter-spacing:0.16em;text-transform:uppercase}
.auth-pitch-h{font-size:36px;font-weight:900;letter-spacing:-0.02em;line-height:1.3;word-break:keep-all}
.auth-pitch-h em{color:var(--brand);font-style:normal}
.auth-pitch-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text2)}
.auth-pitch-list li{display:flex;align-items:flex-start;gap:8px;line-height:1.7;word-break:keep-all}
.auth-pitch-list li::before{content:'✓';color:var(--green);font-weight:900;flex-shrink:0;margin-top:1px}
.auth-pitch-stats{display:flex;gap:32px;font-size:11.5px;color:var(--text3);font-weight:700;position:relative;padding-top:18px;border-top:1px solid var(--border)}
.auth-pitch-stats b{display:block;font-size:22px;font-weight:900;color:var(--text1);letter-spacing:-0.02em;margin-bottom:2px}

.auth-right{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;background:var(--bg)}
.auth-form{max-width:380px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.auth-form-h{font-size:28px;font-weight:900;letter-spacing:-0.02em;line-height:1.35;margin-bottom:6px}
.auth-form-sub{font-size:13.5px;color:var(--text2);line-height:1.65;margin-bottom:8px}
.auth-form-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--text2);margin:-4px 0}
.auth-form-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.auth-form-row a{color:var(--brand);font-weight:700}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:12px;margin:6px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-social-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;
  background:var(--surface2);border:1px solid var(--border);border-radius:9px;
  font-size:13.5px;font-weight:700;color:var(--text1);transition:.15s}
.auth-social-btn:hover{background:var(--surface);border-color:var(--border-strong)}
.auth-foot{font-size:13px;color:var(--text3);text-align:center;margin-top:8px}
.auth-foot a{color:var(--brand);font-weight:800}

/* =====================================================================
 * P2 — Signup / 무료체험
 * ===================================================================== */
.signup{padding:48px 24px 80px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:36px}
.signup-meta{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:18px}
.signup-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:11.5px;font-weight:800;color:var(--green);background:var(--green-soft);
  padding:5px 12px;border-radius:99px;letter-spacing:0.06em;text-transform:uppercase}
.signup-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:0.4}}
.signup-h{font-size:36px;font-weight:900;letter-spacing:-0.025em;line-height:1.25;word-break:keep-all}
.signup-h em{color:var(--brand);font-style:normal}
.signup-lead{font-size:14.5px;color:var(--text2);line-height:1.75;word-break:keep-all}
.signup-checks{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:22px 22px;display:flex;flex-direction:column;gap:14px}
.signup-checks-h{font-size:12px;font-weight:800;color:var(--green);letter-spacing:0.08em;text-transform:uppercase}
.signup-check-row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:flex-start}
.signup-check-ico{width:24px;height:24px;border-radius:50%;background:var(--green);color:#000;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}
.signup-check-text{font-size:13.5px;line-height:1.55;color:var(--text2)}
.signup-check-text b{color:var(--text1);font-weight:800;display:block;margin-bottom:2px}

.signup-form{background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:32px 32px;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 24px 60px rgba(0,0,0,0.4)}
.signup-form-h{font-size:22px;font-weight:900;letter-spacing:-0.015em;line-height:1.4}
.signup-form-sub{font-size:13px;color:var(--text2);margin-top:-8px;line-height:1.6}
.signup-agree{font-size:12.5px;color:var(--text2);line-height:1.65;display:flex;align-items:flex-start;gap:8px}
.signup-agree input{margin-top:3px}
.signup-agree b{color:var(--text1);font-weight:700;text-decoration:underline}
.signup-after{font-size:11.5px;color:var(--text3);text-align:center;line-height:1.6}

/* =====================================================================
 * P3 — 요금제 선택
 * ===================================================================== */
.plans{padding:56px 24px 80px;max-width:1280px;margin:0 auto}
.plans-head{text-align:center;max-width:680px;margin:0 auto 24px}
.plans-head-eyebrow{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:0.16em;text-transform:uppercase;margin-bottom:14px}
.plans-head-h{font-size:36px;font-weight:900;letter-spacing:-0.025em;line-height:1.25;margin-bottom:12px}
.plans-head-h em{color:var(--brand);font-style:normal}
.plans-head-sub{font-size:14.5px;color:var(--text2);line-height:1.7;word-break:keep-all}
.plans-cycle{display:flex;justify-content:center;gap:8px;margin-bottom:36px}
.plans-cycle-pill{padding:7px 14px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);
  font-size:12.5px;font-weight:700;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
.plans-cycle-pill:hover{color:var(--text1);border-color:var(--border-strong)}
.plans-cycle-pill.is-active{background:var(--brand);color:#fff;border-color:transparent}
.plans-cycle-pill em{font-style:normal;color:var(--green);font-weight:800;font-size:11px;background:var(--green-soft);padding:1px 7px;border-radius:99px}
.plans-cycle-pill.is-active em{background:rgba(255,255,255,0.22);color:#fff}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:18px;
  padding:30px 28px;display:flex;flex-direction:column;gap:14px;transition:.22s}
.plan:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(0,0,0,0.4)}
.plan.is-pop{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}
.plan.is-pop::before{content:'가장 인기';position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;padding:5px 14px;border-radius:99px;letter-spacing:0.04em}
.plan-tier{font-size:11.5px;font-weight:800;color:var(--text3);letter-spacing:0.12em;text-transform:uppercase}
.plan-name{font-size:22px;font-weight:900;letter-spacing:-0.01em}
.plan-who{font-size:13px;color:var(--text2);line-height:1.6;min-height:38px}
.plan-price{display:flex;align-items:baseline;gap:6px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.plan-price b{font-size:32px;font-weight:900;letter-spacing:-0.025em;line-height:1;font-feature-settings:'tnum'}
.plan-price span{font-size:12.5px;color:var(--text3);font-weight:700}
.plan-price em{font-size:12px;color:var(--green);font-style:normal;font-weight:800;margin-left:auto}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;flex:1}
.plan-feats li{display:flex;gap:8px;line-height:1.55;color:var(--text2)}
.plan-feats li::before{content:'✓';color:var(--green);font-weight:900;flex-shrink:0}
.plan-feats li b{color:var(--text1);font-weight:700}
.plan-feats li.is-off{color:var(--text3);text-decoration:line-through;text-decoration-color:var(--text3)}
.plan-feats li.is-off::before{content:'—';color:var(--text3);text-decoration:none}
.plan-cta{margin-top:8px}
.plans-foot{margin-top:32px;background:var(--surface2);border:1px dashed var(--border);
  border-radius:12px;padding:18px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plans-foot-row{display:flex;flex-direction:column;gap:4px}
.plans-foot-row b{font-size:13px;color:var(--text1);font-weight:800;letter-spacing:-0.005em}
.plans-foot-row span{font-size:12px;color:var(--text2);line-height:1.55}
.plans-disc{margin-top:18px;font-size:12px;color:var(--text3);text-align:center;line-height:1.6;letter-spacing:-0.005em}

/* =====================================================================
 * P4-P6 — 정책 문서
 * ===================================================================== */
.doc{display:grid;grid-template-columns:240px 1fr;max-width:1100px;margin:0 auto;padding:56px 24px 80px;gap:40px;min-height:100vh}
.doc-toc{position:sticky;top:24px;align-self:start;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:18px 18px}
.doc-toc-label{font-size:10.5px;font-weight:800;color:var(--text3);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px}
.doc-toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.doc-toc-list li{font-size:13px;color:var(--text2);padding:7px 10px;border-radius:6px;cursor:pointer;line-height:1.4}
.doc-toc-list li:hover{background:var(--surface2);color:var(--text1)}
.doc-toc-list li.is-active{background:var(--brand-100);color:var(--text1);font-weight:700}
.doc-toc-list li b{display:inline-block;width:24px;color:var(--text3);font-weight:700;font-feature-settings:'tnum'}
.doc-toc-list li.is-active b{color:var(--brand)}
.doc-body{max-width:680px}
.doc-eyebrow{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:12px}
.doc-h1{font-size:36px;font-weight:900;letter-spacing:-0.025em;line-height:1.25;margin-bottom:14px}
.doc-meta{display:flex;gap:14px;font-size:12.5px;color:var(--text3);padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:30px;flex-wrap:wrap}
.doc-meta b{color:var(--text2);font-weight:700}
.doc-sec{margin-bottom:36px;scroll-margin-top:80px}
.doc-sec-h{font-size:18px;font-weight:800;letter-spacing:-0.01em;line-height:1.4;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:10px}
.doc-sec-h b{color:var(--brand);font-weight:900;font-size:14px;font-feature-settings:'tnum'}
.doc-p{font-size:14px;color:var(--text2);line-height:1.95;margin-bottom:12px;word-break:keep-all}
.doc-p b{color:var(--text1);font-weight:700}
.doc-p a{color:var(--brand);font-weight:700;text-decoration:underline}
.doc-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.doc-list li{font-size:13.5px;color:var(--text2);line-height:1.7;padding-left:18px;position:relative;word-break:keep-all}
.doc-list li::before{content:'';position:absolute;left:4px;top:11px;width:5px;height:5px;background:var(--brand);border-radius:50%}
.doc-list li b{color:var(--text1);font-weight:700}
.doc-tbl{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:13px}
.doc-tbl th,.doc-tbl td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;line-height:1.55}
.doc-tbl th{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;background:var(--surface2)}
.doc-tbl td b{color:var(--text1);font-weight:700}
.doc-note{padding:14px 16px;background:var(--brand-50);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;
  font-size:12.5px;color:var(--text2);line-height:1.7;margin:14px 0}
.doc-note b{color:var(--brand);font-weight:800}

/* ===== Responsive ===== */
@media (max-width:980px){
  .auth{grid-template-columns:1fr}
  .auth-left{padding:36px 24px;min-height:auto}
  .auth-right{padding:36px 24px}
  .auth-pitch-h{font-size:28px}
  .signup{grid-template-columns:1fr;padding:36px 18px}
  .signup-meta{position:static}
  .signup-h{font-size:28px}
  .signup-form{padding:24px 22px}
  .plans{padding:36px 18px 60px}
  .plans-head-h{font-size:28px}
  .plans-grid{grid-template-columns:1fr}
  .plans-foot{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr;padding:36px 18px;gap:24px}
  .doc-toc{position:static}
  .doc-h1{font-size:28px}
  .field-row{grid-template-columns:1fr}
}