:root {
  --ink: #111419;
  --muted: #6e737c;
  --line: #dfe2e7;
  --paper: #f7f8f7;
  --white: #fff;
  --lime: #d6ff51;
  --cyan: #50dfe8;
  --purple: #a799ff;
  --orange: #ff8f6b;
  --navy: #0b2e31;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(20,24,30,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; color: var(--ink); background: var(--paper); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 999; padding: 12px 16px; color: #fff; background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 950; letter-spacing: -.04em; }
.brand-mark { width: 25px; height: 25px; padding: 5px; display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; background: var(--ink); border-radius: 50%; }
.brand-mark i { width: 3px; display: block; background: var(--lime); border-radius: 2px; }
.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:13px}.brand-mark i:nth-child(3){height:9px}
.btn { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--ink); border-radius: 9px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 850; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(17,20,25,.13); }
.btn-primary { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.btn-secondary { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 12px; }
.btn-block { width: 100%; }
.link { font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #52631e; background: #f2ffd1; border-radius: 20px; font-size: 10px; font-weight: 900; }
.badge::before { content:""; width: 6px; height: 6px; background: #75b828; border-radius: 50%; }
.badge.gray { color: #6f747b; background: #eff1f2; }.badge.gray::before { background:#a5abb1; }

/* Auth */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr); background: #fff; }
.auth-main { min-height: 100vh; padding: 34px clamp(28px, 6vw, 90px); display: flex; flex-direction: column; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-top > span { color: var(--muted); font-size: 12px; }
.auth-card { width: min(100%, 430px); margin: auto; padding: 60px 0; }
.auth-kicker { margin: 0 0 16px; color: #858a91; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.auth-card h1 { margin: 0; font-size: clamp(38px, 4vw, 54px); line-height: 1.05; letter-spacing: -.06em; }
.auth-card > p { margin: 17px 0 34px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.form-grid { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: 12px; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; color: var(--ink); background: #fff; border: 1px solid #d7dade; border-radius: 9px; outline: 0; }
.field textarea { min-height: 104px; padding-block: 13px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,20,25,.07); }
.field-help { color: #92979e; font-size: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: #575c64; }.check input { accent-color: var(--ink); }
.auth-switch { margin-top: 24px; color: var(--muted); font-size: 12px; text-align: center; }.auth-switch a { color: var(--ink); font-weight: 900; }
.auth-visual { position: relative; isolation: isolate; min-height: 100vh; padding: clamp(40px,6vw,90px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; color: #fff; background: var(--ink); }
.auth-visual::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:72px 72px; }
.auth-visual h2 { max-width: 650px; margin: 0 0 35px; font-size: clamp(46px,5vw,76px); line-height: 1; letter-spacing: -.07em; }.auth-visual h2 span { color: var(--lime); }
.auth-flow { max-width: 600px; display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 12px; }
.auth-demo { padding: 25px; background: #fff; color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); }.auth-demo small { color:#8a9097;font-size:9px;font-weight:900;letter-spacing:.1em}.auth-demo strong { margin-top:18px; display:block; font-size:18px; }.auth-demo p { margin:8px 0 0;color:var(--muted);font-size:11px}.auth-arrow { color:var(--lime);font-size:28px;text-align:center}.auth-result { border:2px solid var(--lime); }.auth-result b { float:right;font-size:27px}.auth-result b small { color:#767c84; }

/* Application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0,1fr); }
.app-sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px; display: flex; flex-direction: column; color: #d4d7da; background: var(--ink); }
.app-sidebar .brand { padding: 0 10px 28px; color:#fff; }.app-sidebar .brand-mark { background:#fff; }
.side-label { margin: 18px 12px 8px; color:#666d76; font-size:9px; font-weight:900; letter-spacing:.15em; }
.side-nav { display:grid;gap:4px}.side-nav a { min-height:44px; padding:0 13px; display:flex; align-items:center; gap:11px; border-radius:9px; color:#8e949d; font-size:13px;font-weight:750}.side-nav a:hover,.side-nav a.active{color:var(--ink);background:var(--lime)}.nav-icon { width:22px;text-align:center;font-size:15px}.side-project { margin-top:auto; padding:16px; background:#20242a;border:1px solid #2c3138;border-radius:12px}.side-project small{color:#777f88;font-size:9px}.side-project strong{margin-top:7px;display:block;color:#fff;font-size:12px}.side-project span{margin-top:10px;display:block;color:#8e959d;font-size:10px}
.app-content { min-width:0; }
.app-topbar { min-height:72px; padding:0 34px; display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(247,248,247,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}.breadcrumbs{color:#858a91;font-size:11px}.breadcrumbs b{color:var(--ink)}.top-actions{display:flex;align-items:center;gap:12px}.notification{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff}.user-chip{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800}.user-avatar{width:34px;height:34px;display:grid;place-items:center;background:var(--purple);border-radius:50%;font-size:11px;font-weight:950}.mobile-app-nav{display:none}
.page-main { width:min(1220px,calc(100% - 68px)); margin:0 auto; padding:54px 0 80px; }
.page-head { margin-bottom:34px; display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.page-head h1{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.055em}.page-head p{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.7}.page-head-actions{display:flex;gap:9px;flex-shrink:0}
.panel { min-width:0; background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 30px rgba(20,24,30,.035); }.panel-pad{padding:28px}.panel-head{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:17px;letter-spacing:-.035em}.panel-head p{margin:6px 0 0;color:var(--muted);font-size:11px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stack{display:grid;gap:16px}
.stat-card { padding:22px;background:#fff;border:1px solid var(--line);border-radius:15px}.stat-card > span{color:var(--muted);font-size:10px;font-weight:800}.stat-card strong{margin-top:14px;display:block;font-size:32px;letter-spacing:-.05em}.stat-card small{margin-top:9px;display:block;color:#4b7a31;font-size:9px}.stat-card.accent{background:var(--lime);border-color:#c3e35e}.stat-card.dark{color:#fff;background:var(--ink);border-color:var(--ink)}.stat-card.dark > span,.stat-card.dark small{color:#9ba1aa}

/* Projects */
.project-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.project-card{min-height:245px;padding:24px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:17px;transition:transform .2s,box-shadow .2s}.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.project-card.new{align-items:center;justify-content:center;border-style:dashed;background:transparent;text-align:center}.new-icon{width:48px;height:48px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%;font-size:24px}.project-card.new strong{margin-top:16px;font-size:14px}.project-card.new p{margin:8px 0 0;color:var(--muted);font-size:11px}.project-card-top{display:flex;justify-content:space-between;gap:12px}.project-card h2{margin:34px 0 8px;font-size:20px;letter-spacing:-.04em}.project-card p{margin:0;color:var(--muted);font-size:11px}.project-meta{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;border-top:1px solid #eceef0;color:#777d85;font-size:10px}.project-actions{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.project-actions a{min-height:36px;display:grid;place-items:center;background:#f2f3f4;border-radius:7px;font-size:10px;font-weight:800}.project-actions a:first-child{background:var(--ink);color:#fff}

/* Statistics */
.chart-panel{padding:26px}.chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.chart-toolbar h2{margin:0;font-size:17px}.chart-toolbar select{min-height:36px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:10px}.bar-chart{height:290px;margin-top:30px;padding:10px 5px 0;display:flex;align-items:flex-end;gap:clamp(8px,3vw,28px);border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 57px,#eef0f1 58px)}.bar-column{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9px}.bar-column i{width:min(42px,72%);height:var(--h);display:block;background:var(--ink);border-radius:6px 6px 0 0}.bar-column.active i{background:var(--lime);border:1px solid #bfdd5a}.bar-column span{margin-bottom:-24px;color:#868c93;font-size:9px}.question-table{width:100%;border-collapse:collapse}.question-table th,.question-table td{padding:15px 18px;text-align:left;border-bottom:1px solid #eceef0;font-size:11px}.question-table th{color:#8c9198;font-size:9px;letter-spacing:.06em}.question-table td:first-child{width:48px;font-weight:900}.question-table td:last-child{text-align:right;font-weight:900}.question-table tr:last-child td{border-bottom:0}.question-table em{padding:4px 7px;color:#5e7028;background:#f2ffd5;border-radius:10px;font-size:8px;font-style:normal;font-weight:900}

/* Payment */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.plan-card{position:relative;padding:28px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px}.plan-card.recommended{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--lime)}.recommend-label{position:absolute;top:0;right:20px;padding:7px 10px;color:var(--ink);background:var(--lime);border-radius:0 0 8px 8px;font-size:9px;font-weight:900}.plan-card h2{margin:4px 0 10px;font-size:20px}.plan-card > p{min-height:40px;margin:0;color:var(--muted);font-size:11px;line-height:1.6}.price{margin:28px 0;display:flex;align-items:baseline;gap:4px}.price strong{font-size:38px;letter-spacing:-.06em}.price span{color:var(--muted);font-size:10px}.plan-list{margin:0 0 30px;padding:20px 0 0;display:grid;gap:13px;border-top:1px solid var(--line);list-style:none}.plan-list li{font-size:11px}.plan-list li::before{content:"✓";margin-right:8px;font-weight:900}.plan-card .btn{margin-top:auto}.billing-row{padding:22px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px}.billing-row + .billing-row{border-top:1px solid var(--line)}.billing-row strong{display:block;font-size:13px}.billing-row span{margin-top:6px;display:block;color:var(--muted);font-size:10px}

/* Settings / connect / customize / share */
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}.settings-section{padding:26px}.settings-section + .settings-section{border-top:1px solid var(--line)}.settings-title{margin:0 0 22px;font-size:16px}.avatar-setting{display:flex;align-items:center;gap:16px}.avatar-large{width:68px;height:68px;display:grid;place-items:center;background:var(--purple);border-radius:50%;font-size:22px;font-weight:950}.form-actions{margin-top:24px;display:flex;justify-content:flex-end;gap:8px}.info-list{display:grid;gap:0}.info-row{padding:15px 0;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #eceef0;font-size:11px}.info-row:last-child{border-bottom:0}.info-row span{color:var(--muted)}
.steps-line{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.setup-step{padding:18px;background:#f5f6f5;border-radius:12px}.setup-step span{width:26px;height:26px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%;font-size:9px;font-weight:900}.setup-step strong{margin-top:30px;display:block;font-size:12px}.setup-step p{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.code-field{padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f2f3f4;border:1px solid #e2e4e6;border-radius:9px}.code-field code{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.code-field button{flex-shrink:0;border:0;background:transparent;font-size:10px;font-weight:900;cursor:pointer}.host-preview{min-height:310px;padding:22px;color:#fff;background:var(--ink);border-radius:15px}.host-preview-top{display:flex;align-items:center;justify-content:space-between}.host-preview-top strong{font-size:13px}.host-question{margin-top:15px;padding:15px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:9px;font-size:10px}.host-question:first-of-type{margin-top:28px;background:#f5ffd7}.host-question b:last-child{font-size:16px}
.color-options{display:flex;gap:10px}.color-radio{position:relative}.color-radio input{position:absolute;opacity:0}.color-radio span{width:38px;height:38px;display:block;background:var(--color);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #ccd0d3;cursor:pointer}.color-radio input:checked + span{box-shadow:0 0 0 3px var(--ink)}.preview-phone{max-width:330px;margin:auto;padding:12px;background:var(--ink);border-radius:28px;box-shadow:var(--shadow)}.preview-screen{min-height:520px;padding:25px 18px;background:#f7f8f7;border-radius:20px}.preview-notch{width:70px;height:7px;margin:-12px auto 30px;background:var(--ink);border-radius:10px}.preview-screen h3{margin:0;font-size:18px}.preview-screen > p{margin:9px 0 24px;color:var(--muted);font-size:10px}.preview-ask{padding:16px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:10px}.preview-submit{width:100%;min-height:42px;margin-top:10px;border:0;border-radius:8px;background:var(--preview,var(--lime));font-size:11px;font-weight:900}.preview-note{margin-top:25px;padding:16px;background:#fff;border-radius:10px;font-size:9px;color:var(--muted)}
.share-hero{padding:30px;display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:center}.share-hero h2{margin:0 0 12px;font-size:27px;letter-spacing:-.05em}.share-hero p{margin:0 0 25px;color:var(--muted);font-size:12px;line-height:1.6}.share-actions{display:flex;gap:8px}.qr{width:190px;height:190px;padding:14px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:3px;background:#fff;border:1px solid var(--line);border-radius:12px}.qr i{background:#fff}.qr i:nth-child(3n),.qr i:nth-child(4n+1),.qr i:nth-child(7n+2){background:var(--ink)}.qr i:nth-child(1),.qr i:nth-child(2),.qr i:nth-child(7),.qr i:nth-child(8),.qr i:nth-child(9),.qr i:nth-child(43),.qr i:nth-child(44),.qr i:nth-child(49){background:var(--ink)}
.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.channel-card{padding:20px;border:1px solid var(--line);border-radius:13px;background:#fff}.channel-icon{width:40px;height:40px;display:grid;place-items:center;background:#eef0f1;border-radius:11px;font-weight:950}.channel-card strong{margin-top:18px;display:block;font-size:13px}.channel-card p{min-height:34px;margin:7px 0 18px;color:var(--muted);font-size:10px;line-height:1.6}

.toast { position:fixed;right:24px;bottom:24px;z-index:100;padding:13px 17px;color:#fff;background:var(--ink);border-radius:9px;box-shadow:var(--shadow);font-size:11px;font-weight:800;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}

@media (max-width:1024px){
  .auth-page{grid-template-columns:1fr 1fr}.auth-main{padding:28px 40px}.auth-visual{padding:50px}.auth-flow{grid-template-columns:1fr}.auth-arrow{transform:rotate(90deg)}
  .app-shell{grid-template-columns:210px minmax(0,1fr)}.app-sidebar{padding-inline:14px}.page-main{width:min(100% - 40px,1220px)}
  .project-grid,.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card:last-child{grid-column:1/-1}.settings-layout{grid-template-columns:1fr 290px}
}
@media (max-width:768px){
  .auth-page{display:block}.auth-main{min-height:100vh;padding:24px}.auth-visual{display:none}.auth-card{padding:60px 0 30px}.auth-top>span{display:none}
  .app-shell{display:block}.app-sidebar{display:none}.app-topbar{min-height:64px;padding:0 18px}.breadcrumbs{display:none}.mobile-app-nav{display:block;position:relative}.mobile-app-nav summary{width:40px;height:40px;display:grid;place-content:center;gap:5px;list-style:none;cursor:pointer}.mobile-app-nav summary::-webkit-details-marker{display:none}.mobile-app-nav summary i{width:20px;height:2px;background:var(--ink)}.mobile-nav-panel{position:fixed;top:64px;left:0;right:0;padding:18px;display:grid;gap:6px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.mobile-nav-panel a{min-height:42px;padding:0 12px;display:flex;align-items:center;border-radius:8px;font-size:12px;font-weight:800}.mobile-nav-panel a.active{background:var(--lime)}.user-chip>span:not(.user-avatar){display:none}
  .page-main{width:min(100% - 28px,1220px);padding:38px 0 65px}.page-head{align-items:flex-start;flex-direction:column}.page-head-actions{width:100%}.page-head-actions .btn{flex:1}.grid-3{grid-template-columns:1fr 1fr}.project-grid,.plan-grid{grid-template-columns:1fr}.plan-card:last-child{grid-column:auto}.settings-layout{grid-template-columns:1fr}.steps-line{grid-template-columns:1fr}.share-hero{grid-template-columns:1fr}.qr{margin:auto}.channel-grid{grid-template-columns:1fr 1fr}.bar-chart{gap:8px}.question-table{min-width:600px}.table-scroll{overflow-x:auto}.form-row{grid-template-columns:1fr}
}
@media (max-width:430px){
  .page-main{width:min(100% - 22px,1220px)}.page-head h1{font-size:36px}.page-head-actions{flex-direction:column}.grid-2,.grid-3{grid-template-columns:1fr}.panel-pad,.settings-section,.chart-panel{padding:20px}.project-card{min-height:225px}.stat-card strong{font-size:28px}.top-actions .notification{display:none}.channel-grid{grid-template-columns:1fr}.share-hero{padding:22px}.share-actions{flex-direction:column}.billing-row{align-items:flex-start;flex-direction:column}.form-options{align-items:flex-start;flex-direction:column}.auth-card h1{font-size:38px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}