*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0f1e;--bg2:#111827;--bg3:#1a2235;--border:#1e2d45;
  --t1:#f1f5f9;--t2:#94a3b8;--t3:#475569;
  --p1:#6366f1;--p2:#8b5cf6;--cyan:#06b6d4;--emerald:#10b981;
}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--t1);
  min-height:100vh;overflow-x:hidden;
}

/* ── 네비게이션 ── */
.landing-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;
  background:rgba(10,15,30,.6);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(30,45,69,.5);
  transition:background .3s;
}
.landing-nav.scrolled{background:rgba(10,15,30,.92)}
.nav-left{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-logo-img{width:32px;height:32px;border-radius:8px}
.nav-brand{font-size:.92rem;font-weight:700;color:var(--t1)}
.nav-links{display:flex;align-items:center;gap:2px;margin:0 auto;overflow-x:auto}
.nav-link{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;color:var(--t2);text-decoration:none;font-size:.75rem;font-weight:500;transition:all .15s;white-space:nowrap}
.nav-link:hover{color:var(--t1);background:rgba(99,102,241,.08)}
.nav-link.active{color:#818cf8}
.nav-link i{font-size:.7rem;color:var(--t3)}
.nav-link:hover i,.nav-link.active i{color:#818cf8}
.nav-hamburger{background:none;border:1px solid var(--border);color:var(--t2);font-size:1rem;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .15s;display:none;align-items:center}
.nav-hamburger:hover{color:var(--t1);border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.08)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── 사이드바 드로어 ── */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:800;opacity:0;pointer-events:none;transition:opacity .3s}
.sidebar-backdrop.open{opacity:1;pointer-events:auto}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--bg2);border-right:1px solid var(--border);z-index:810;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow-y:auto}
.sidebar.open{transform:translateX(0)}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:1.1rem;padding:4px;margin-left:auto;transition:color .15s}
.sidebar-close:hover{color:var(--t1)}
.sidebar-user{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.sidebar-user img{width:40px;height:40px;border-radius:50%;border:2px solid rgba(99,102,241,.3)}
.sidebar-user-info .su-name{font-weight:700;font-size:.88rem}
.sidebar-user-info .su-email{font-size:.72rem;color:var(--t3)}
.sidebar-user-info .su-type{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:6px;display:inline-block;margin-top:2px}
.sidebar-section{padding:12px 12px 4px}
.sidebar-label{font-size:.68rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;padding:0 8px 6px;margin-bottom:2px}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--t2);text-decoration:none;font-size:.84rem;font-weight:500;transition:all .15s;margin-bottom:2px}
.sidebar-link:hover{color:var(--t1);background:rgba(99,102,241,.08)}
.sidebar-link.active{color:#818cf8;background:rgba(99,102,241,.1);font-weight:600}
.sidebar-link i{width:18px;text-align:center;font-size:.8rem;color:var(--t3)}
.sidebar-link:hover i,.sidebar-link.active i{color:#818cf8}
.sidebar-actions{padding:12px;border-top:1px solid var(--border)}
.sidebar-action{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--t2);text-decoration:none;font-size:.82rem;cursor:pointer;transition:all .15s;border:none;background:none;width:100%;font-family:inherit;margin-bottom:2px}
.sidebar-action:hover{color:var(--t1);background:rgba(99,102,241,.08)}
.sidebar-action i{width:18px;text-align:center;font-size:.8rem;color:var(--t3)}
.sidebar-action.danger{color:#f87171}
.sidebar-action.danger i{color:#f87171}
.sidebar-action.danger:hover{background:rgba(239,68,68,.08)}
.sidebar-footer{padding:16px 20px;margin-top:auto;border-top:1px solid var(--border);font-size:.68rem;color:var(--t3);flex-shrink:0}
[data-theme="light"] .sidebar{background:#fff;border-color:#e2e8f0}
[data-theme="light"] .sidebar-link:hover,.sidebar-link.active{background:rgba(99,102,241,.06)}
.nav-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:8px;border:none;
  cursor:pointer;font-size:.8rem;font-weight:600;
  transition:all .18s;font-family:inherit;
}
.nav-login{background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);color:#a5b4fc}
.nav-login:hover{background:rgba(99,102,241,.22)}
.nav-signup{background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff}
.nav-signup:hover{opacity:.85;transform:translateY(-1px)}
.nav-user{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);color:#818cf8;text-decoration:none}
.nav-user:hover{background:rgba(99,102,241,.2)}
.nav-settings{
  width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);
  border-radius:8px;color:#818cf8;cursor:pointer;font-size:.85rem;
  transition:all .18s;
}
.nav-settings:hover{background:rgba(99,102,241,.22)}
.nav-admin{
  width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
  border-radius:8px;color:#f87171;cursor:pointer;font-size:.85rem;
  text-decoration:none;transition:all .18s;
}
.nav-admin:hover{background:rgba(239,68,68,.2)}
.nav-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid rgba(99,102,241,.3)}
.nav-name{font-size:.8rem;font-weight:600;color:var(--t1)}
.nav-type{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:8px}
.nav-type-free{background:rgba(100,116,139,.12);color:#94a3b8}
.nav-type-paid{background:rgba(245,158,11,.12);color:#fbbf24}
.nav-type-admin{background:rgba(239,68,68,.12);color:#f87171}
.nav-logout{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171}
.nav-logout:hover{background:rgba(239,68,68,.18)}

/* ── 배경 ── */
.bg-fixed{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(99,102,241,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.04) 1px,transparent 1px);
  background-size:64px 64px;
}
.bg-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.7}
.o1{width:600px;height:600px;background:rgba(99,102,241,.12);top:-150px;left:-100px}
.o2{width:500px;height:500px;background:rgba(139,92,246,.10);top:40%;right:-120px}
.o3{width:400px;height:400px;background:rgba(6,182,212,.07);bottom:-100px;left:20%}

/* ── HERO ── */
.hero{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding:130px 24px 80px;text-align:center;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);
  color:#a5b4fc;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  padding:6px 16px;border-radius:20px;margin-bottom:32px;
  animation:fadeInDown .6s ease both;
}
.badge i{color:#6366f1}
.hero-title{
  font-size:clamp(2.4rem,7vw,4.5rem);font-weight:900;line-height:1.12;
  margin-bottom:20px;animation:fadeInDown .7s .1s ease both;
  background:linear-gradient(135deg,#e0e7ff 0%,#c4b5fd 30%,#67e8f9 60%,#a78bfa 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:fadeInDown .7s .1s ease both,shimmer 6s ease infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-typing{
  font-size:clamp(1.1rem,3vw,1.5rem);color:var(--cyan);font-weight:600;
  margin-bottom:12px;min-height:2em;
  animation:fadeInDown .7s .15s ease both;
}
.hero-typing .cursor{display:inline-block;width:2px;height:1.1em;background:var(--cyan);margin-left:2px;vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-sub{
  font-size:clamp(.95rem,2.5vw,1.15rem);color:var(--t2);max-width:640px;
  line-height:1.7;margin-bottom:36px;animation:fadeInDown .7s .2s ease both;
}
.hero-cta{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-bottom:52px;animation:fadeInDown .7s .25s ease both;
}
.cta-primary{
  padding:15px 36px;border:none;border-radius:14px;
  background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;
  font-size:1rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 20px rgba(99,102,241,.4),0 0 40px rgba(99,102,241,.15);
  transition:all .25s;display:flex;align-items:center;gap:8px;font-family:inherit;
}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.5),0 0 60px rgba(99,102,241,.2)}
.cta-secondary{
  padding:15px 30px;border:1px solid rgba(99,102,241,.3);border-radius:14px;
  background:rgba(99,102,241,.08);color:#a5b4fc;
  font-size:1rem;font-weight:600;cursor:pointer;
  transition:all .25s;display:flex;align-items:center;gap:8px;font-family:inherit;text-decoration:none;
}
.cta-secondary:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.5);transform:translateY(-2px)}
.hero-stats{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;
  margin-bottom:64px;animation:fadeInDown .7s .3s ease both;
}
.stat{text-align:center;padding:18px 24px;background:rgba(17,24,39,.5);border:1px solid rgba(99,102,241,.12);border-radius:14px;min-width:120px;backdrop-filter:blur(8px);transition:all .25s}
.stat:hover{border-color:rgba(99,102,241,.35);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.stat-num{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-lbl{font-size:.72rem;color:var(--t3);margin-top:6px;letter-spacing:.05em}

/* ── CEO 한줄 배너 ── */
.ceo-banner{
  position:relative;z-index:1;
  max-width:900px;margin:0 auto 60px;padding:0 24px;
}
.ceo-ticker{
  display:flex;gap:20px;overflow:hidden;
  padding:16px 0;
}
.ceo-chip{
  flex-shrink:0;display:flex;align-items:center;gap:10px;
  background:rgba(17,24,39,.6);border:1px solid var(--border);
  border-radius:12px;padding:12px 18px;
  animation:scrollLeft 25s linear infinite;
}
.ceo-chip-name{font-size:.78rem;font-weight:700;color:var(--t1);white-space:nowrap}
.ceo-chip-quote{font-size:.75rem;color:var(--t2);white-space:nowrap;font-style:italic}
@keyframes scrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ── PREVIEW CARDS ── */
.preview-section{
  position:relative;z-index:1;
  padding:0 24px 80px;
}
.preview-title{
  text-align:center;font-size:1.1rem;color:var(--t2);margin-bottom:40px;
  letter-spacing:.05em;
}
.preview-title span{color:var(--t1);font-weight:700}
.cards-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;max-width:1100px;margin:0 auto;
}
.pcard{
  background:rgba(17,24,39,.7);border:1px solid rgba(99,102,241,.15);
  border-radius:16px;padding:28px 24px;
  backdrop-filter:blur(12px);
  transition:all .25s;position:relative;overflow:hidden;
}
.pcard::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.06),transparent);
  opacity:0;transition:opacity .25s;
}
.pcard:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.35);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.pcard:hover::before{opacity:1}
.pcard-icon{font-size:1.8rem;margin-bottom:14px}
.pcard-title{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:8px}
.pcard-desc{font-size:.8rem;color:var(--t2);line-height:1.6}
.pcard-tag{display:inline-block;font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:8px;margin-top:10px}
.pcard-tag.free{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.2)}
.pcard-tag.paid{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}

/* ── TEASER LIST ── */
.teaser-section{
  position:relative;z-index:1;
  padding:0 24px 80px;max-width:800px;margin:0 auto;
}
.teaser-title{text-align:center;font-size:1.5rem;font-weight:800;margin-bottom:12px}
.teaser-sub{text-align:center;font-size:.88rem;color:var(--t2);margin-bottom:40px}
.teaser-list{display:flex;flex-direction:column;gap:12px}
.titem{
  display:flex;align-items:center;gap:14px;
  background:rgba(17,24,39,.6);border:1px solid var(--border);
  border-radius:12px;padding:16px 20px;
  transition:border-color .2s;
}
.titem:hover{border-color:rgba(99,102,241,.3)}
.titem-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.titem-text{flex:1}
.titem-name{font-size:.9rem;font-weight:700;color:var(--t1);margin-bottom:3px}
.titem-desc{font-size:.76rem;color:var(--t2)}
.titem-badge{
  font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:10px;
  white-space:nowrap;flex-shrink:0;
}
.tb-new{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.25)}
.tb-hot{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.tb-pro{background:rgba(99,102,241,.15);color:#a5b4fc;border:1px solid rgba(99,102,241,.25)}

/* ── 잠금 카드 ── */
.lock-overlay{
  position:relative;z-index:1;
  padding:0 24px 100px;
}
.lock-card{
  max-width:480px;margin:0 auto;
  background:rgba(17,24,39,.85);
  border:1px solid rgba(99,102,241,.25);
  border-radius:24px;padding:48px 40px 40px;
  backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.1);
  text-align:center;
}
.lock-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:20px;font-size:2rem;
  background:linear-gradient(135deg,var(--p1),var(--p2));
  box-shadow:0 8px 24px rgba(99,102,241,.4);
  margin-bottom:20px;
}
.lock-title{font-size:1.3rem;font-weight:800;margin-bottom:8px}
.lock-desc{font-size:.83rem;color:var(--t2);margin-bottom:28px;line-height:1.6}

.form-label{display:block;font-size:.75rem;font-weight:600;color:var(--t2);margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.input-wrap{position:relative;margin-bottom:18px}
.pw-input{
  width:100%;padding:14px 48px 14px 18px;
  background:rgba(10,15,30,.7);
  border:1px solid var(--border);border-radius:12px;
  color:var(--t1);font-size:1rem;letter-spacing:.15em;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.pw-input::placeholder{letter-spacing:.05em;color:var(--t3);font-size:.88rem}
.pw-input:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.pw-input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.pw-toggle{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--t3);cursor:pointer;font-size:.95rem;padding:4px;transition:color .2s;
}
.pw-toggle:hover{color:var(--t2)}

.text-input{
  width:100%;padding:14px 18px;
  background:rgba(10,15,30,.7);
  border:1px solid var(--border);border-radius:12px;
  color:var(--t1);font-size:1rem;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.text-input::placeholder{color:var(--t3);font-size:.88rem}
.text-input:focus{border-color:var(--p1);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.text-input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
/* ── OpenClaw 프로모션 ── */
.promo-section{position:relative;z-index:1;padding:0 24px 80px;max-width:800px;margin:0 auto}
.promo-card{
  background:linear-gradient(135deg,rgba(255,64,64,.06),rgba(99,102,241,.06));
  border:1px solid rgba(255,64,64,.2);
  border-radius:20px;padding:36px 32px;
  position:relative;overflow:hidden;
}
.promo-card::before{
  content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,64,64,.08),transparent 70%);
  pointer-events:none;
}
.promo-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,64,64,.12);border:1px solid rgba(255,64,64,.25);
  color:#ff6b6b;font-size:.72rem;font-weight:700;
  padding:4px 14px;border-radius:20px;margin-bottom:16px;letter-spacing:.04em;
}
.promo-title{font-size:1.6rem;font-weight:900;margin-bottom:10px;line-height:1.2;
  background:linear-gradient(135deg,#ff6b6b,#ffa500,#ff6b6b);background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 4s ease infinite;
}
.promo-sub{font-size:.9rem;color:var(--t2);line-height:1.6;margin-bottom:24px}
.promo-sub strong{color:var(--t1)}
.promo-features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.promo-feat{display:flex;align-items:flex-start;gap:10px;padding:12px;background:rgba(10,15,30,.4);border-radius:10px;border:1px solid rgba(255,64,64,.1)}
.promo-feat-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.promo-feat strong{font-size:.82rem;color:var(--t1);display:block;margin-bottom:2px}
.promo-feat span{font-size:.72rem;color:var(--t3)}
.promo-stats{display:flex;justify-content:space-around;padding:16px 0;margin-bottom:16px;border-top:1px solid rgba(255,64,64,.1);border-bottom:1px solid rgba(255,64,64,.1)}
.promo-stat{text-align:center}
.promo-stat strong{display:block;font-size:1.3rem;font-weight:800;color:#ff6b6b}
.promo-stat span{font-size:.68rem;color:var(--t3)}
.promo-quote{font-size:.82rem;color:var(--t2);font-style:italic;text-align:center;margin-bottom:20px;padding:12px;background:rgba(255,64,64,.05);border-radius:8px;border-left:3px solid rgba(255,64,64,.3)}
.promo-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.promo-btn-primary{padding:12px 28px;background:linear-gradient(135deg,#ff4040,#ff6b6b);color:#fff;border-radius:12px;text-decoration:none;font-size:.88rem;font-weight:700;transition:all .2s;display:flex;align-items:center;gap:6px;box-shadow:0 4px 16px rgba(255,64,64,.3)}
.promo-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,64,64,.4)}
.promo-btn-secondary{padding:12px 24px;background:rgba(255,64,64,.08);border:1px solid rgba(255,64,64,.25);color:#ff6b6b;border-radius:12px;text-decoration:none;font-size:.88rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:6px}
.promo-btn-secondary:hover{background:rgba(255,64,64,.15)}
@media(max-width:640px){.promo-features{grid-template-columns:1fr}.promo-card{padding:28px 20px}}

/* ── 블로그 섹션 ── */
.blog-section{position:relative;z-index:1;padding:0 24px 80px;max-width:800px;margin:0 auto}
.blog-grid{display:flex;flex-direction:column;gap:14px}
.blog-card{
  display:flex;align-items:center;gap:16px;
  background:rgba(17,24,39,.6);border:1px solid var(--border);
  border-radius:14px;padding:20px 22px;
  text-decoration:none;color:inherit;
  transition:all .25s;
}
.blog-card:hover{border-color:rgba(99,102,241,.4);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.blog-icon{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;
}
.blog-info{flex:1}
.blog-name{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:4px}
.blog-desc{font-size:.8rem;color:var(--t2);line-height:1.5}
.blog-arrow{color:var(--t3);font-size:.8rem;flex-shrink:0;transition:color .2s}
.blog-card:hover .blog-arrow{color:var(--p1)}

/* ── 인증 탭 ── */
.auth-tabs{display:flex;margin-bottom:24px;border-bottom:1px solid var(--border)}
.auth-tab{flex:1;padding:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--t3);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
.auth-tab:hover{color:var(--t2)}
.auth-tab.on{color:#818cf8;border-bottom-color:var(--p1)}
.auth-panel{animation:fadeInDown .3s ease}
.auth-switch{text-align:center;font-size:.78rem;color:var(--t3);margin-top:16px}
.auth-link{background:none;border:none;color:#818cf8;cursor:pointer;font-weight:600;font-size:.78rem;font-family:inherit;text-decoration:underline}
.auth-link:hover{color:#a5b4fc}
.form-hint{font-size:.72rem;color:var(--t3);margin:-10px 0 16px;line-height:1.4}
.success-msg{display:none;align-items:center;gap:6px;font-size:.78rem;color:#34d399;padding:10px 14px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:8px;margin-bottom:14px;text-align:left}
.text-input.valid{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12)}

.step-section{animation:fadeInDown .4s ease}

/* ── Google 버튼 ── */
.google-btn{
  width:100%;padding:14px 20px;
  background:#fff;border:1px solid #dadce0;border-radius:12px;
  color:#3c4043;font-size:.92rem;font-weight:600;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:inherit;
}
.google-btn:hover{background:#f8f9fa;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.google-btn:active{background:#f1f3f4}
.google-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── 사용자 프로필 ── */
.user-preview{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;margin-bottom:20px;
  background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);
  border-radius:12px;text-align:left;
}
.user-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(99,102,241,.3)}
.user-name{font-weight:700;font-size:.9rem}
.user-email{font-size:.75rem;color:var(--t3)}

.error-msg{
  display:none;align-items:center;gap:6px;
  font-size:.78rem;color:#f87171;margin-bottom:14px;
  padding:10px 14px;background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.2);border-radius:8px;text-align:left;
}
.error-msg.show{display:flex}

.enter-btn{
  width:100%;padding:15px;
  background:linear-gradient(135deg,var(--p1),var(--p2));
  border:none;border-radius:12px;
  color:#fff;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 16px rgba(99,102,241,.35);
}
.enter-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(99,102,241,.45)}
.enter-btn:active{transform:translateY(0)}
.enter-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.enter-btn .spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.enter-btn.loading .btn-text{display:none}
.enter-btn.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 애니메이션 ── */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shake .4s ease}
@keyframes fadeOut{to{opacity:0;transform:scale(.97)}}
.fade-out{animation:fadeOut .4s ease forwards}

/* ── 구분선 ── */
.divider{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:16px;
  max-width:600px;margin:0 auto 60px;padding:0 24px;
}
.divider-line{flex:1;height:1px;background:var(--border)}
.divider-txt{font-size:.72rem;color:var(--t3);white-space:nowrap;letter-spacing:.08em}

/* ── 푸터 ── */
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:20px 20px 16px}
.duon-footer-inner{max-width:860px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:8px}
.duon-footer-brand{font-size:.82rem;color:var(--t2);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.duon-footer-brand a{color:var(--t1);text-decoration:none;font-weight:600}
.duon-footer-brand a:hover{color:var(--p1)}
.duon-footer-sep{color:var(--border)}
.duon-footer-info{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:.71rem;color:var(--t3)}
.duon-footer-info a{color:var(--t3);text-decoration:none}
.duon-footer-info a:hover{color:var(--p1)}
.duon-footer-bank{font-size:.72rem;color:var(--t3)}
.duon-footer-bank strong{color:var(--t2)}
.duon-footer-social{display:flex;justify-content:center;gap:10px;padding:4px 0}
.duon-footer-social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--t3);font-size:.85rem;transition:all .2s;border:1px solid var(--border)}
.duon-footer-social a:hover{color:#fff;border-color:transparent}
.duon-footer-social a[title="유튜브"]:hover{background:#ff0000}
.duon-footer-social a[title="인스타그램"]:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.duon-footer-social a[title="페이스북"]:hover{background:#1877f2}
.duon-footer-social a[title*="X"]:hover{background:#000}
.duon-footer-social a[title*="카카오"]:hover{background:#fee500;color:#3c1e1e}
.duon-footer-social a[title="고객센터"]:hover{background:var(--p1)}
.duon-footer-copy{font-size:.68rem;color:var(--t3)}

/* ── 후기 섹션 ── */
.review-section{position:relative;z-index:1;padding:0 24px 80px;max-width:800px;margin:0 auto}
.review-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.review-card{background:rgba(17,24,39,.6);border:1px solid var(--border);border-radius:14px;padding:20px;transition:border-color .2s}
.review-card:hover{border-color:rgba(99,102,241,.3)}
.review-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(99,102,241,.2)}
.review-avatar-placeholder{width:40px;height:40px;border-radius:50%;background:rgba(99,102,241,.15);display:flex;align-items:center;justify-content:center;color:#818cf8;font-size:.9rem}
.review-user-info{flex:1}
.review-user-name{font-weight:700;font-size:.88rem}
.review-user-date{font-size:.7rem;color:var(--t3)}
.review-stars{color:#fbbf24;font-size:.9rem;letter-spacing:2px}
.review-stars .off{color:var(--border)}
.review-text{font-size:.85rem;color:var(--t2);line-height:1.65}
.review-empty{text-align:center;color:var(--t3);font-size:.85rem;padding:32px 0}

/* 후기 작성 */
.review-write{background:rgba(17,24,39,.5);border:1px solid rgba(99,102,241,.2);border-radius:14px;padding:22px;margin-top:16px}
.review-write-title{font-size:.92rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.review-rating{display:flex;gap:6px;margin-bottom:14px}
.review-rating .star{font-size:1.6rem;color:var(--border);cursor:pointer;transition:color .15s}
.review-rating .star.active{color:#fbbf24}
.review-rating .star:hover{color:#fbbf24}
.review-textarea{width:100%;padding:14px;background:rgba(10,15,30,.7);border:1px solid var(--border);border-radius:10px;color:var(--t1);font-size:.88rem;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s}
.review-textarea:focus{border-color:var(--p1)}
.review-write-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.review-charcount{font-size:.72rem;color:var(--t3)}
.review-submit-btn{padding:10px 22px;background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;border:none;border-radius:10px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:6px;font-family:inherit}
.review-submit-btn:hover{opacity:.85;transform:translateY(-1px)}
.review-login-msg{text-align:center;color:var(--t3);font-size:.82rem;padding:16px;background:rgba(17,24,39,.4);border:1px solid var(--border);border-radius:10px;margin-top:16px}

/* ── 프로필 수정 모달 ── */
.profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:950;display:none;align-items:center;justify-content:center}
.profile-overlay.open{display:flex}
.profile-modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;width:min(420px,90vw);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.profile-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.profile-header h3{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px}
.profile-body{padding:22px}
.profile-avatar-wrap{display:flex;justify-content:center;margin-bottom:18px}
.profile-avatar-wrap img{width:64px;height:64px;border-radius:50%;border:3px solid rgba(99,102,241,.3)}
[data-theme="light"] .review-card{background:rgba(255,255,255,.7);border-color:#e2e8f0}
[data-theme="light"] .review-write{background:rgba(255,255,255,.6);border-color:#e2e8f0}
[data-theme="light"] .review-textarea{background:#f8fafc;border-color:#e2e8f0;color:#0f172a}
[data-theme="light"] .review-login-msg{background:rgba(255,255,255,.5);border-color:#e2e8f0}
[data-theme="light"] .profile-modal{background:#fff}

/* ── 설정 패널 ── */
.ls-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:900;display:none;align-items:flex-start;justify-content:flex-end;padding:60px 20px 0 0}
.ls-overlay.open{display:flex}
.ls-panel{background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:min(300px,88vw);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.ls-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.ls-header h3{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:6px}
.ls-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:1rem;padding:4px}
.ls-close:hover{color:var(--t1)}
.ls-group{padding:14px 18px;border-bottom:1px solid rgba(30,45,69,.5)}
.ls-group:last-child{border-bottom:none}
.ls-label{font-size:.7rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ls-options{display:flex;gap:5px}
.ls-btn{flex:1;padding:7px 5px;border:1px solid var(--border);border-radius:8px;background:none;color:var(--t2);cursor:pointer;font-size:.74rem;font-weight:500;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px;font-family:inherit}
.ls-btn:hover{border-color:rgba(99,102,241,.4);color:var(--t1)}
.ls-btn.on{background:rgba(99,102,241,.15);color:#818cf8;border-color:rgba(99,102,241,.5)}

/* ── 라이트 테마 (랜딩) ── */
[data-theme="light"]{--bg:#f8fafc;--bg2:#ffffff;--bg3:#f1f5f9;--border:#e2e8f0;--t1:#0f172a;--t2:#475569;--t3:#94a3b8}
[data-theme="light"] .bg-grid{background-image:linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px)}
[data-theme="light"] .bg-orb{opacity:.3}
[data-theme="light"] .landing-nav{background:rgba(248,250,252,.7)}
[data-theme="light"] .landing-nav.scrolled{background:rgba(248,250,252,.95)}
[data-theme="light"] .pcard{background:rgba(255,255,255,.8);border-color:#e2e8f0}
[data-theme="light"] .pcard:hover{box-shadow:0 16px 40px rgba(99,102,241,.1)}
[data-theme="light"] .titem{background:rgba(255,255,255,.7);border-color:#e2e8f0}
[data-theme="light"] .lock-card{background:rgba(255,255,255,.9);border-color:#e2e8f0;box-shadow:0 30px 80px rgba(0,0,0,.1)}
[data-theme="light"] .blog-card{background:rgba(255,255,255,.7);border-color:#e2e8f0}
[data-theme="light"] .promo-card{background:linear-gradient(135deg,rgba(255,64,64,.04),rgba(99,102,241,.04));border-color:rgba(255,64,64,.2)}
[data-theme="light"] .promo-sub{color:#334155}
[data-theme="light"] .promo-sub strong{color:#0f172a}
[data-theme="light"] .promo-feat{background:rgba(241,245,249,.8);border-color:rgba(255,64,64,.12)}
[data-theme="light"] .promo-feat strong{color:#0f172a}
[data-theme="light"] .promo-feat span{color:#475569}
[data-theme="light"] .promo-quote{color:#334155;background:rgba(255,64,64,.04);border-left-color:rgba(255,64,64,.4)}
[data-theme="light"] .promo-stat span{color:#475569}
[data-theme="light"] .promo-stats{border-color:rgba(255,64,64,.12)}
[data-theme="light"] .ls-panel{background:#fff}
[data-theme="light"] .ceo-chip{background:rgba(255,255,255,.7);border-color:#e2e8f0}
[data-theme="light"] .stat{background:rgba(255,255,255,.6);border-color:#e2e8f0}
[data-theme="light"] footer{border-color:#e2e8f0}
[data-theme="light"] .hero-title{background:linear-gradient(135deg,#1e293b,#6366f1,#0891b2);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="light"] .text-input,.form-input{background:rgba(241,245,249,.8);border-color:#e2e8f0;color:#0f172a}
[data-theme="light"] .auth-tab{color:var(--t3)}
[data-theme="light"] .auth-tab.on{color:#4f46e5}

/* ── 레이아웃 모드 (랜딩) ── */
[data-layout="mobile"] .hero{padding:90px 16px 50px}
[data-layout="mobile"] .cards-grid{grid-template-columns:1fr !important;max-width:400px}
[data-layout="mobile"] .hero-stats{gap:12px}
[data-layout="mobile"] .stat{min-width:80px;padding:12px}
[data-layout="mobile"] .promo-features{grid-template-columns:1fr}
[data-layout="pc"] .cards-grid{grid-template-columns:repeat(3,1fr) !important}

/* ── 글자 크기 (랜딩) ── */
[data-font="small"]{font-size:13px}
[data-font="medium"]{font-size:16px}
[data-font="large"]{font-size:19px}

/* ── 포커스 ── */
*:focus-visible{outline:2px solid #818cf8;outline-offset:2px;border-radius:4px}

/* ── 모션 감소 ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* ── 태블릿 ── */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .sidebar{width:260px}
}
/* ── 모바일 ── */
@media(max-width:640px){
  .hero{padding:90px 20px 60px}
  .hero-stats{gap:16px}
  .stat{min-width:100px;padding:14px 16px}
  .lock-card{padding:36px 24px 32px;margin:0 16px}
  .cards-grid{grid-template-columns:1fr}
  .landing-nav{padding:10px 16px}
  .nav-btn span{display:none}
  .nav-name{display:none}
  .nav-link span{display:none}
  .nav-links{gap:0}
  .blog-card{padding:16px}
  .promo-features{grid-template-columns:1fr}
  .promo-card{padding:28px 20px}
}

/* ── Skip Link ── */
.skip-link{position:absolute;top:-100px;left:16px;background:var(--p1);color:#fff;padding:8px 16px;border-radius:8px;z-index:9999;font-size:.85rem;text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px}