/* ====================================================
   CraftOn — Premium Brand AI Workspace
   Design System v4.0  |  Toss Blue + ChatGPT White
   www.craft-on.co.kr  |  support@craft-on.co.kr
   ==================================================== */

/* ── DESIGN TOKENS v4.0 ── */
:root {
  /* Backgrounds — ChatGPT White */
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-soft: #F7F8FA;
  --card:         #F7F8FA;
  --card-soft:    #F0F2F5;
  --card-hover:   #EBEEf3;

  /* Accent — Toss Blue */
  --accent:       #3182F6;
  --accent-dark:  #1C6FEB;
  --accent-soft:  rgba(49,130,246,.10);
  --accent-mid:   rgba(49,130,246,.18);
  --accent-border:rgba(49,130,246,.25);

  /* Text */
  --text-1:  #191F28;
  --text-2:  #4E5968;
  --text-3:  #8B95A1;

  /* Borders */
  --border:    #E5E8EB;
  --border-h:  #D1D6DB;

  /* Semantic */
  --success:  #16A34A;
  --warn:     #F59E0B;
  --error:    #EF4444;
  --info:     #3182F6;

  /* AI platform colours */
  --gpt:    #10A37F;
  --gemini: #4285F4;
  --perp:   #20B8CD;
  --google: #EA4335;
  --claude: #C89650;
  --naver:  #03C75A;

  /* Spacing & Shape */
  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow:    0 2px 8px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10), 0 8px 32px rgba(0,0,0,.06);

  /* Typography — Design System v4.0 */
  --font: 'Pretendard','Noto Sans KR','Inter',-apple-system,sans-serif;
  --tr:   .18s ease;

  /* Font scale tokens */
  --fs-display:  clamp(36px, 4vw, 52px);
  --fs-section:  28px;
  --fs-card:     20px;
  --fs-subtitle: 17px;
  --fs-body:     16px;
  --fs-small:    13px;
  --fs-badge:    12px;
  --lh-tight:    1.35;
  --lh-body:     1.65;
  --fw-black:    800;
  --fw-bold:     700;
  --fw-semi:     600;
  --fw-normal:   400;

  /* Sidebar */
  --sidebar-w:   240px;
  --sidebar-col: #F7F8FA;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--text-1);
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: keep-all;
}
img, video, iframe { max-width: 100%; height: auto; }
* { min-width: 0; }
a { text-decoration:none; color:inherit }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:var(--surface-soft) }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:rgba(49,130,246,.35) }

/* ── TOP BAR ── */
.top-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
}
.top-bar-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(20px,3vw,40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}
.top-bar-link {
  color: var(--accent);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--tr);
}
.top-bar-link:hover { color: var(--accent-dark) }

/* ── HEADER ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(20px,3vw,40px);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0 }
.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #fff;
}
.logo-text { font-size:16px; font-weight:700; letter-spacing:-.3px; color:var(--text-1) }
.logo-accent { color:var(--accent) }
.logo-sub { font-size:11px; font-weight:400; color:var(--text-3); margin-left:4px }

/* ── MAIN NAV ── */
.main-nav { display:flex; align-items:center; gap:2px; flex:1; margin-left:20px }
.nav-link {
  padding: 7px 13px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.nav-link i { font-size:13px }
.nav-link:hover { color:var(--text-1); background:var(--surface-soft) }
.nav-link.active { color:var(--accent); background:var(--accent-soft); font-weight:600 }

/* ── HEADER AUTH ── */
.header-auth { display:flex; align-items:center; gap:8px; margin-left:auto }

/* Toss-style unified button height */
.btn-auth-login,
.btn-auth-signup,
.btn-mypage,
.user-chip,
.logout-btn {
  height: 44px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  transition: all var(--tr);
  white-space: nowrap;
}
.btn-auth-login {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.btn-auth-login:hover { border-color:var(--border-h); color:var(--text-1) }
.btn-auth-signup {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.btn-auth-signup:hover { background:var(--accent-dark); border-color:var(--accent-dark) }
.btn-mypage {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}
.btn-mypage:hover { background:var(--accent-mid) }
.user-chip {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-1);
}
.user-chip:hover { border-color:var(--border-h) }
.logout-btn {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.logout-btn:hover { border-color:var(--error); color:var(--error) }

/* auth.js 동적 생성 로그아웃 버튼 — .btn-auth-logout */
.btn-auth-logout {
  height: 44px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  transition: all var(--tr);
  white-space: nowrap;
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.btn-auth-logout:hover {
  border-color: var(--error);
  color: var(--error);
  background: rgba(239,68,68,.04);
}

/* ── WORKSPACE LAYOUT — 3 COLUMN GRID ── */
.workspace-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 320px;
  gap: 0;
  max-width: 1800px;
  margin: 0 auto;
  min-height: calc(100vh - 58px);
  align-items: start;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-col);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
  overflow-y: auto;
  flex-shrink: 0;
}
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 0 8px;
  margin-bottom: 6px;
  margin-top: 16px;
}
.sidebar-section-label:first-child { margin-top: 0 }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--tr);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font);
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.sidebar-link i { font-size:13px; flex-shrink:0; width:16px; text-align:center }
.sidebar-link:hover { color:var(--text-1); background:var(--card-soft) }
.sidebar-link.active { color:var(--accent); background:var(--accent-soft); font-weight:600 }
.sidebar-divider { border:none; border-top:1px solid var(--border); margin:10px 0 }

/* ── CONTENT AREA ── */
.content-area {
  min-width: 0;
  padding: 32px 32px;
  max-width: none;
  border-right: 1px solid var(--border);
}
.content-area-full {
  min-width: 0;
  padding: 32px 32px;
}

/* Content grid — fills available width */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* ── RIGHT PANEL ── */
.right-panel {
  width: 320px;
  flex-shrink: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  position: sticky;
  top: 58px;
  align-self: start;
  height: calc(100vh - 58px);
  overflow-y: auto;
}

/* ── RIGHT PANEL CARDS ── */
.rp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.rp-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rp-card-title i { color:var(--accent) }
.rp-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.5;
}
.rp-item:last-child { border-bottom: none }
.rp-item-icon { font-size:12px; color:var(--accent); flex-shrink:0; margin-top:2px }
.rp-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  margin: 2px 2px 2px 0;
}
.rp-memory-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-soft);
  margin-bottom: 6px;
  font-size: 13px;
}
.rp-memory-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.rp-memory-dot.inactive { background:var(--text-3) }
.rp-action-btn {
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all var(--tr);
  margin-top: 6px;
}
.rp-action-btn:hover { background:var(--accent-mid) }

/* ── HERO MAIN (index) ── */
.hero {
  background: linear-gradient(160deg, rgba(49,130,246,.06) 0%, var(--bg) 55%);
  border-bottom: 1px solid var(--border);
  padding: 80px clamp(20px,5vw,60px) 64px;
  text-align: center;
}
.hero-inner { max-width:720px; margin:0 auto }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 22px;
}
.hero-title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.8px;
  margin-bottom: 18px;
  color: var(--text-1);
}
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc { color:var(--text-2); font-size:16px; line-height:1.75; margin-bottom:36px }
.hero-stats { display:flex; justify-content:center; gap:40px; flex-wrap:wrap }
.stat { display:flex; flex-direction:column; align-items:center }
.stat-num { font-size:28px; font-weight:800; color:var(--accent); line-height:1 }
.stat-label { font-size:13px; color:var(--text-3); margin-top:3px }

/* ── HERO 2-STEP FLOW ── */
.hero-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hero-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  min-width: 210px;
  max-width: 260px;
  flex: 1;
  transition: border-color var(--tr), box-shadow var(--tr);
  box-shadow: var(--shadow-sm);
}
.hero-flow-step:hover { border-color:var(--border-h); box-shadow:var(--shadow) }
.flow-step-dim { opacity:.75 }
.flow-step-dim:hover { opacity:1 }
.flow-step-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 2px 10px;
  border-radius: 20px;
}
.flow-step-dim .flow-step-num { color:var(--text-3); background:var(--surface-soft); border-color:var(--border) }
.flow-step-body { display:flex; align-items:center; gap:12px; width:100% }
.flow-step-icon {
  width: 38px;
  height: 38px;
  background: var(--accent-soft);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.flow-step-dim .flow-step-icon { background:var(--surface-soft); color:var(--text-3) }
.flow-step-text { text-align:left }
.flow-step-text strong { display:block; font-size:14px; font-weight:700; color:var(--text-1); margin-bottom:2px }
.flow-step-text span { font-size:13px; color:var(--text-3) }
.flow-step-dim .flow-step-text strong { color:var(--text-2) }
.flow-btn {
  font-size: 14px;
  padding: 9px 18px;
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-arrow {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--text-3);
  font-size: 16px;
  flex-shrink: 0;
  align-self: center;
}
.hero-flow-hint { font-size:13px; color:var(--text-3); margin-bottom:32px; display:flex; align-items:center; justify-content:center; gap:5px }
.hero-flow-hint i { color:var(--accent); font-size:12px }
@media(max-width:600px){
  .hero-flow { flex-direction:column; align-items:center }
  .flow-arrow { transform:rotate(90deg); padding:4px 0 }
  .hero-flow-step { max-width:100%; width:100% }
}

/* ── PAGE HERO ── */
.page-hero {
  background: linear-gradient(160deg, rgba(49,130,246,.06) 0%, var(--bg) 65%);
  padding: 52px 24px 40px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.page-hero-inner { max-width:580px; margin:0 auto }
.page-hero h1 {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.4px;
  margin-bottom: 10px;
}
.page-hero p { color:var(--text-2); font-size:15px }
.hero-eyebrow-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ── FEATURE CARDS ── */
.features-section { padding: 64px clamp(20px,4vw,40px) }
.features-inner { max-width: 1200px; margin: 0 auto }
.section-title { text-align:center; font-size:var(--fs-section); font-weight:700; margin-bottom:36px; letter-spacing:-.3px; color:var(--text-1) }
.feature-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
@media(max-width:760px){ .feature-cards { grid-template-columns:1fr } }
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: all var(--tr);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.feature-card:hover { border-color:var(--border-h); box-shadow:var(--shadow) }
.feature-card-primary { border-color:var(--accent-border) }
.feature-icon {
  width: 44px;
  height: 44px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 18px;
}
.feature-card h3 { font-size:var(--fs-card); font-weight:700; margin-bottom:8px; letter-spacing:-.2px }
.feature-card p { color:var(--text-2); font-size:15px; line-height:1.7; flex:1 }
.feature-cta { display:flex; align-items:center; gap:5px; color:var(--accent); font-weight:600; font-size:14px; margin-top:18px }
.feature-step-badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.feature-step-badge-2 {
  background: rgba(49,130,246,.08);
  border-color: rgba(49,130,246,.20);
  color: var(--accent-dark);
}

/* ── PLATFORM BADGES ── */
.platforms-section {
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px;
  text-align: center;
}
.platforms-inner { max-width:800px; margin:0 auto }
.platforms-label { font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px }
.platform-badges { display:flex; justify-content:center; gap:8px; flex-wrap:wrap }
.badge { padding:5px 12px; border-radius:20px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:5px }
.badge-gpt    { background:rgba(16,163,127,.10); color:var(--gpt);    border:1px solid rgba(16,163,127,.25) }
.badge-gemini { background:rgba(66,133,244,.10); color:var(--gemini); border:1px solid rgba(66,133,244,.25) }
.badge-perp   { background:rgba(32,184,205,.10); color:var(--perp);   border:1px solid rgba(32,184,205,.25) }
.badge-google { background:rgba(234,67,53,.10);  color:var(--google); border:1px solid rgba(234,67,53,.25) }
.badge-claude { background:rgba(200,150,80,.10); color:var(--claude); border:1px solid rgba(200,150,80,.25) }
.badge-naver  { background:rgba(3,199,90,.10);   color:var(--naver);  border:1px solid rgba(3,199,90,.25) }

/* ── MAIN WRAPPER ── */
.main-wrapper { max-width:1200px; margin:0 auto; padding:40px clamp(20px,3vw,40px) 72px }

/* ── STEP SECTIONS ── */
.step-section { animation:fadeUp .35s ease forwards }
.step-section.hidden { display:none }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.step-header { margin-bottom:28px }
.step-badge {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  margin-bottom: 10px;
}
.step-title { font-size:var(--fs-card); font-weight:700; letter-spacing:-.3px; margin-bottom:6px; line-height:var(--lh-tight) }
.step-sub { color:var(--text-2); font-size:15px }

/* ── FORM ── */
.input-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
.form-group { display:flex; flex-direction:column; gap:6px; position:relative }
.form-group.span2 { grid-column:span 2 }
.form-group label { font-size:13px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:5px }
.form-group label i { color:var(--accent); font-size:12px }
.required { color:var(--error) }
.field-hint { font-size:12px; color:var(--text-3) }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-3) }
.form-group select option { background:var(--surface) }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.form-actions { margin-top:24px; display:flex; justify-content:center }

/* ── SUGGEST PANEL ── */
.suggest-wrap { position:relative }
.suggest-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-sm);
  padding: 12px;
  z-index: 100;
  box-shadow: var(--shadow-md);
  margin-top: 4px;
}
.suggest-label { font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; display:flex; align-items:center; gap:4px }
.suggest-tags { display:flex; flex-wrap:wrap; gap:6px }
.suggest-tag {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--tr);
  font-family: var(--font);
}
.suggest-tag:hover,
.suggest-tag.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent) }
.suggest-tag-full { border-radius:var(--radius-xs); padding:7px 12px; font-size:14px; text-align:left; width:100% }

/* ── GAP COUNTS ── */
.gap-counts-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 20px;
}
.gap-counts-title { font-size:15px; font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:7px }
.gap-counts-sub { font-size:13px; color:var(--text-2); margin-bottom:14px }
.gap-counts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.gap-counts-grid--single { grid-template-columns:1fr }
@media(max-width:600px){ .gap-counts-grid { grid-template-columns:repeat(2,1fr) } }
.gap-counts-grid--single .gap-count-item {
  display: grid;
  grid-template-columns: 1fr 120px;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.gap-counts-grid--single .gap-count-item label { flex-direction:column; align-items:flex-start; gap:1px }
.gap-counts-grid--single .gap-count-item input { width:100%; min-width:0 }
.gap-count-item { display:flex; flex-direction:column; gap:5px }
.gap-count-item label { font-size:12px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:4px }
.gap-count-item input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 15px;
  padding: 8px 11px;
  outline: none;
  text-align: center;
}
.gap-count-item input:focus { border-color:var(--accent) }
.cnt-label-hint { font-size:11px; color:var(--text-3); font-weight:400 }

/* ── BUTTONS ── */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  height: 44px;
  padding: 0 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.btn-primary:hover { background:var(--accent-dark) }
.btn-primary:active { transform:scale(.98) }
.btn-xl { padding:0 40px; font-size:17px; height:52px; border-radius:var(--radius-sm) }
.btn-full { width:100%; justify-content:center }
.btn-outline {
  background: transparent;
  border: 1px solid var(--accent-border);
  color: var(--accent);
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.btn-outline:hover { background:var(--accent-soft) }
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.btn-ghost:hover { border-color:var(--border-h); color:var(--text-1); background:var(--surface-soft) }
.btn-sm { height:36px; padding:0 14px; font-size:13px; border-radius:var(--radius-xs) }
.btn-lg { height:52px; padding:0 36px; font-size:17px }
.btn-export {
  background: rgba(49,130,246,.08);
  color: var(--info);
  border: 1px solid rgba(49,130,246,.22);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.btn-export:hover { background:rgba(49,130,246,.15) }
.btn-copy-all {
  background: var(--surface-soft);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.btn-copy-all:hover { border-color:var(--border-h); color:var(--text-1) }
.btn-save {
  background: rgba(45,181,93,.10);
  color: var(--success);
  border: 1px solid rgba(45,181,93,.25);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--tr);
}
.btn-save:hover { background:rgba(45,181,93,.18) }
.btn-save:disabled { opacity:.45; cursor:not-allowed }
.btn-copy {
  background: var(--surface-soft);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--tr);
}
.btn-copy:hover { border-color:var(--border-h); color:var(--accent) }
.btn-copy-sm {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  transition: all var(--tr);
}
.btn-copy-sm:hover { background:var(--accent-mid) }
.btn-danger {
  background: rgba(239,68,68,.08);
  color: var(--error);
  border: 1px solid rgba(239,68,68,.20);
  border-radius: var(--radius-xs);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all var(--tr);
}
.btn-danger:hover { background:rgba(239,68,68,.15) }
.btn-gap-gen {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all var(--tr);
  text-decoration: none;
}
.btn-gap-gen:hover { background:var(--accent-mid) }
.step-actions { margin-top:28px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

/* ── TOPICS ── */
.topics-container { display:flex; flex-direction:column; gap:14px }
.topic-auto-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.topic-auto-icon {
  width: 56px;
  height: 56px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
}
.topic-auto-info h3 { font-size:var(--fs-card); font-weight:700 }
.topic-auto-info p { color:var(--text-2); font-size:15px; line-height:1.7 }
.topic-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  gap: 18px;
  cursor: pointer;
  transition: all var(--tr);
  box-shadow: var(--shadow-sm);
}
.topic-card:hover { border-color:var(--border-h); box-shadow:var(--shadow) }
.topic-rank { display:flex; flex-direction:column; align-items:center; flex-shrink:0; gap:4px }
.rank-num {
  width: 28px;
  height: 28px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
}
.rank-label { display:none }
.topic-body { flex:1; min-width:0 }
.topic-title { font-size:16px; font-weight:700; margin-bottom:6px; letter-spacing:-.2px; line-height:1.4 }
.topic-reason { font-size:14px; color:var(--text-2); line-height:1.6; margin-bottom:5px }
.topic-intent { font-size:13px; color:var(--accent); display:flex; align-items:center; gap:5px; font-weight:600; margin-bottom:8px }
.topic-tags { display:flex; flex-wrap:wrap; gap:5px }
.topic-tag {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.topic-meta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0 }
.ai-prob { display:flex; flex-direction:column; align-items:center; text-align:center }
.prob-val { font-size:20px; font-weight:800; line-height:1 }
.prob-label { font-size:10px; color:var(--text-3); margin-top:2px; font-weight:600; text-transform:uppercase }
.prob-high { color:var(--success) }
.prob-mid  { color:var(--warn) }
.prob-low  { color:var(--error) }
.topic-cta-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.platform-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px }
.ptag { padding:2px 7px; border-radius:10px; font-size:12px; font-weight:600 }
.ptag-gpt    { background:rgba(16,163,127,.10); color:var(--gpt) }
.ptag-gemini { background:rgba(66,133,244,.10); color:var(--gemini) }
.ptag-perp   { background:rgba(32,184,205,.10); color:var(--perp) }
.ptag-google { background:rgba(234,67,53,.10);  color:var(--google) }
.ptag-claude { background:rgba(200,150,80,.10); color:var(--claude) }

/* ── OUTPUT TABS ── */
.output-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--tr);
  white-space: nowrap;
}
.tab-btn:hover { border-color:var(--border-h); color:var(--text-1) }
.tab-btn.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); font-weight:600 }
.tab-panel { animation:fadeUp .3s ease forwards }
.tab-panel.hidden { display:none }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 9px 13px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.panel-header span { font-size:14px; font-weight:600; display:flex; align-items:center; gap:5px; color:var(--text-2) }
.panel-actions { display:flex; justify-content:flex-end; margin-bottom:10px }

/* ── OUTPUT BLOCKS ── */
.output-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}
.prose h1 { font-size:22px; font-weight:800; margin-bottom:10px; letter-spacing:-.3px }
.prose h2 { font-size:18px; font-weight:700; margin:24px 0 8px; color:var(--text-1); border-bottom:1px solid var(--border); padding-bottom:6px }
.prose h3 { font-size:15px; font-weight:700; margin:16px 0 6px; color:var(--text-2) }
.prose p { font-size:15px; color:var(--text-2); line-height:1.8; margin-bottom:10px }
.prose strong { color:var(--text-1); font-weight:600 }
.prose ul,.prose ol { padding-left:18px; margin-bottom:10px }
.prose li { font-size:15px; color:var(--text-2); line-height:1.7; margin-bottom:4px }
.prose hr { border:none; border-top:1px solid var(--border); margin:20px 0 }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 10px 16px;
  margin: 12px 0;
  background: var(--accent-soft);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 14px;
  color: var(--text-2);
}
.ai-summary-block {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 14px 0;
}
.ai-summary-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.ai-summary-text { font-size:14px; color:var(--text-2); line-height:1.7 }
.ai-summary-text span { display:block; margin-bottom:3px }
.entity-grid-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.entity-tag { padding:4px 10px; border-radius:20px; font-size:13px; font-weight:600 }
.et-brand   { background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-border) }
.et-product { background:rgba(49,130,246,.08); color:var(--info); border:1px solid rgba(49,130,246,.20) }
.et-keyword { background:rgba(245,166,35,.10); color:var(--warn); border:1px solid rgba(245,166,35,.22) }
.et-target  { background:rgba(239,68,68,.10);  color:var(--error); border:1px solid rgba(239,68,68,.20) }
.compare-table-wrap { overflow-x:auto; margin:12px 0 }
.compare-table { width:100%; border-collapse:collapse; font-size:14px }
.compare-table th {
  background: var(--surface-soft);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 11px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table td { padding:9px 11px; color:var(--text-2); border-bottom:1px solid var(--border) }
.compare-table tr:hover td { background:var(--surface-soft) }
.highlight-col { color:var(--text-1)!important; font-weight:600 }
.meta-item {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.meta-item-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.meta-item-value { font-size:14px; color:var(--text-2); line-height:1.6 }
.faq-item { border-bottom:1px solid var(--border); padding:16px 0 }
.faq-item:last-child { border-bottom:none }
.faq-q { font-size:15px; font-weight:700; color:var(--text-1); margin-bottom:6px; display:flex; gap:7px; align-items:flex-start }
.faq-q-icon { color:var(--accent); flex-shrink:0; margin-top:2px; font-size:13px }
.faq-a { font-size:14px; color:var(--text-2); line-height:1.75; padding-left:20px }
.schema-label { font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; display:flex; align-items:center; gap:4px }
.schema-label::before { content:'{ }'; font-family:monospace; margin-right:3px }
.code-block { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px }
.code-block pre {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-1);
  overflow-x: auto;
  font-family: 'Menlo','Courier New',monospace;
  white-space: pre;
}
.extras-group { margin-bottom:20px }
.extras-group-title { font-size:11px; font-weight:700; color:var(--accent); margin-bottom:8px; display:flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.5px }
.extras-list { list-style:none; display:flex; flex-direction:column; gap:6px }
.extras-list li,.extras-list-item {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.alt-code { background:var(--accent-soft); padding:2px 6px; border-radius:4px; font-size:12px; color:var(--accent); font-family:monospace }
.tag-list { display:flex; gap:6px; flex-wrap:wrap }
.extra-tag { background:var(--accent-soft); border:1px solid var(--accent-border); color:var(--accent); padding:4px 10px; border-radius:20px; font-size:13px; font-weight:600 }

/* ── NAVER BLOG PREVIEW ── */
.naver-blog-preview {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  color: #191919;
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #EAEAEA;
  box-shadow: var(--shadow-sm);
}
.naver-post-title { font-size:22px; font-weight:800; color:#191919; margin-bottom:24px; padding-bottom:14px; border-bottom:2px solid #f1f1f1; line-height:1.4 }
.naver-section { margin-bottom:28px }
.naver-h2 { font-size:17px; font-weight:700; color:#191919; margin-bottom:10px; padding-left:10px; border-left:4px solid #03C75A }
.naver-body { font-size:14px; line-height:2; color:#333; margin-bottom:14px }
.naver-img-placeholder {
  background: #f8f8f8;
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.naver-hashtags { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; padding-top:14px; border-top:1px solid #f1f1f1 }
.naver-tag { background:#f8f8f8; color:#03C75A; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid rgba(3,199,90,.2) }
.hashtag-box { display:flex; flex-wrap:wrap; gap:7px; background:var(--surface-soft); border-radius:var(--radius-sm); padding:14px; border:1px solid var(--border) }
.blog-text-pre {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  font-family: 'Consolas',monospace;
  font-size: 12px;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 500px;
  overflow-y: auto;
  line-height: 1.6;
}

/* ── CONTENT BODY ── */
.content-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-1);
  max-height: 500px;
  overflow-y: auto;
}
.content-body .content-h2 { font-size:18px; font-weight:700; color:var(--accent); margin:18px 0 8px; padding-top:8px; border-top:1px solid var(--border) }
.content-body .content-h3 { font-size:15px; font-weight:700; color:var(--text-1); margin:13px 0 6px }
.meta-box { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px }
.meta-row { padding:11px 0; border-bottom:1px solid var(--border) }
.meta-row:last-child { border-bottom:none }
.meta-row strong { font-size:12px; font-weight:700; color:var(--text-3); display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px }
.meta-row p { font-size:14px; color:var(--text-1); line-height:1.6 }
.faq-list { display:flex; flex-direction:column; gap:12px }
.faq-item-block {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.faq-q-block { font-size:15px; font-weight:600; color:var(--text-1); margin-bottom:7px }
.faq-a-block { font-size:14px; color:var(--text-2); line-height:1.7; padding-left:14px }
.schema-code {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  font-family: 'Consolas','Monaco',monospace;
  font-size: 12px;
  color: var(--text-1);
  overflow-x: auto;
  line-height: 1.5;
  white-space: pre;
  max-height: 420px;
  overflow-y: auto;
}
.list-box { display:flex; flex-direction:column; gap:7px }
.list-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.core-item { border-color:var(--accent-border); background:var(--accent-soft) }
.list-num { width:20px; height:20px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; margin-top:1px }
.entity-narrative {
  background: var(--surface-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 8px;
}
.entity-narrative p { font-size:14px; color:var(--text-2); line-height:1.7; margin-bottom:7px }
.entity-narrative p:last-child { margin-bottom:0 }
.quality-warning {
  background: rgba(245,166,35,.08);
  border: 1px solid rgba(245,166,35,.25);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 14px;
  color: var(--warn);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mt16 { margin-top:16px }

/* ── IMAGE SECTION ── */
.image-section {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.image-section.hidden { display:none }
.image-section-header { text-align:center; margin-bottom:20px }
.image-section-header h3 { font-size:17px; font-weight:700; margin-bottom:5px }
.image-section-header p { font-size:14px; color:var(--text-2) }
.image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px }
.img-card {
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--tr);
}
.img-card:hover { border-color:var(--border-h) }
.img-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.img-wrap { position:relative; aspect-ratio:400/280; overflow:hidden }
.img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.img-card:hover .img-wrap img { transform:scale(1.03) }
.img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(49,130,246,.50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  opacity: 0;
  transition: opacity var(--tr);
}
.img-card.selected .img-overlay { opacity:1 }
.img-caption { font-size:12px; color:var(--text-3); padding:7px 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden }
.img-download-btn {
  width: 100%;
  background: var(--accent-soft);
  border: none;
  border-top: 1px solid var(--border);
  color: var(--accent);
  padding: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all var(--tr);
}
.img-download-btn:hover { background:var(--accent-mid) }

/* ── GAP ANALYSIS DASHBOARD ── */
.gap-score-section { margin-bottom:18px }
.gap-score-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  box-shadow: var(--shadow-sm);
}
.score-ring { width:100px; height:100px; position:relative; flex-shrink:0 }
.score-svg { width:100%; height:100% }
.score-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center }
.score-num { font-size:22px; font-weight:800; line-height:1; color:var(--text-1) }
.score-lbl { font-size:10px; font-weight:700; margin-top:3px; color:var(--text-3) }
.score-info { flex:1; min-width:0 }
.score-info h3 { font-size:16px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:5px }
.score-info>p { font-size:13px; color:var(--text-2); margin-bottom:12px }
.score-vs-grid { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap }
.score-vs-item { display:flex; flex-direction:column; align-items:center; min-width:50px }
.score-vs-num { font-size:24px; font-weight:800; line-height:1; color:var(--text-1) }
.score-vs-lbl { font-size:10px; color:var(--text-3); font-weight:600; margin-top:2px }
.score-vs-divider { font-size:18px; color:var(--text-3); font-weight:300; align-self:center }
.score-type-bars { display:flex; flex-direction:column; gap:5px }
.score-type-bar-item { display:flex; align-items:center; gap:7px }
.score-type-bar-label { font-size:12px; color:var(--text-3); width:84px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.score-type-bar-track { flex:1; height:5px; background:var(--surface-soft); border-radius:3px; overflow:hidden }
.score-type-bar-fill { height:5px; border-radius:3px; transition:width .6s cubic-bezier(.4,0,.2,1); background:var(--accent) }
.score-type-bar-nums { font-size:11px; color:var(--text-2); white-space:nowrap; min-width:40px; text-align:right }
.score-type-bar-nums strong { color:var(--text-1); font-weight:700 }
.score-type-bar-sep { color:var(--text-3); margin:0 1px }

/* gap-section 공통 */
.gap-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.gap-section-title { font-size:15px; font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:7px; color:var(--text-1) }
.gap-section-title i { color:var(--accent) }
.gap-section-sub { font-size:13px; color:var(--text-3); margin-bottom:14px }

/* 현황 테이블 */
.gap-table-wrap { overflow-x:auto; margin-top:12px }
.gap-table { width:100%; border-collapse:collapse; font-size:14px }
.gap-table th {
  background: var(--surface-soft);
  color: var(--text-3);
  font-size:11px;
  font-weight:700;
  padding:8px 12px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
.gap-table td { padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle }
.gap-table tr:last-child td { border-bottom:none }
.gap-table tr:hover td { background:var(--surface-soft) }
.type-cell { font-weight:600; font-size:14px; white-space:nowrap; color:var(--text-1) }
.purpose-cell { font-size:13px; color:var(--text-2); max-width:180px }
.count-cell { text-align:center; font-weight:700; font-size:15px; color:var(--text-1) }
.gap-cell { text-align:center; font-weight:700; font-size:14px }
.gap-need { color:var(--error) }
.gap-ok   { color:var(--success) }
.pct-bar-wrap { display:flex; align-items:center; gap:5px; width:100%; max-width:130px; min-width:0 }
.pct-bar-track { flex:1; min-width:0; background:var(--surface-soft); border-radius:3px; height:5px; overflow:hidden }
.pct-bar { height:5px; border-radius:3px; max-width:100%; transition:width .5s cubic-bezier(.4,0,.2,1); background:var(--accent) }
.pct-bar.pct-over100 { background:var(--success); animation:pctPulse 2s ease-in-out infinite }
@keyframes pctPulse { 0%,100%{opacity:1} 50%{opacity:.65} }
.pct-text { font-size:12px; font-weight:700; color:var(--text-2); white-space:nowrap; flex-shrink:0 }
.pct-text.pct-over100 { color:var(--success) }
.urgency-badge { font-size:12px; font-weight:700; padding:3px 9px; border-radius:8px; white-space:nowrap }
.urgency-high   { background:rgba(239,68,68,.10); color:var(--error); border:1px solid rgba(239,68,68,.20) }
.urgency-medium { background:rgba(245,166,35,.10); color:var(--warn); border:1px solid rgba(245,166,35,.20) }
.urgency-low    { background:rgba(45,181,93,.10);  color:var(--success); border:1px solid rgba(45,181,93,.20) }

/* 우선 발행 추천 */
.gap-priorities-wrap { display:flex; flex-direction:column; gap:18px; margin-top:14px }
.gap-priority-group { display:flex; flex-direction:column; gap:7px }
.gap-priority-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-left: 3px solid;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--surface-soft);
  margin-bottom: 3px;
}
.gap-priority-group-badge { font-size:11px; font-weight:800; padding:2px 9px; border-radius:8px; border:1px solid }
.gap-priority-group-count { font-size:13px; color:var(--text-3) }
.gap-priority-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: all var(--tr);
  box-shadow: var(--shadow-sm);
}
.gap-priority-card:hover { border-color:var(--border-h); background:var(--surface-soft) }
.priority-high   { border-left:3px solid var(--error) }
.priority-medium { border-left:3px solid var(--warn) }
.priority-low    { border-left:3px solid var(--success) }
.priority-rank { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0 }
.priority-rank-high   { background:rgba(239,68,68,.10); color:var(--error) }
.priority-rank-medium { background:rgba(245,166,35,.10); color:var(--warn) }
.priority-rank-low    { background:rgba(45,181,93,.10);  color:var(--success) }
.priority-body { flex:1; min-width:0 }
.priority-type-row { display:flex; align-items:center; gap:5px; margin-bottom:3px; flex-wrap:wrap }
.priority-type-label { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px }
.priority-gap-badge { font-size:11px; font-weight:700; padding:1px 5px; border-radius:4px; background:rgba(239,68,68,.10); color:var(--error) }
.priority-ai-badge  { font-size:11px; font-weight:700; padding:1px 5px; border-radius:4px; background:var(--accent-soft); color:var(--accent) }
.priority-title  { font-size:14px; font-weight:600; margin-bottom:3px; color:var(--text-1); line-height:1.45 }
.priority-reason { font-size:12px; color:var(--text-3); line-height:1.5 }
.priority-cta {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 7px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--tr);
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
}
.priority-cta:hover { background:var(--accent-mid) }

/* ─── 체크리스트 ─── */
.checklist-header { margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.checklist-summary-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.checklist-score { font-size:14px; font-weight:700; color:var(--text-2); white-space:nowrap }
.checklist-status-badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:7px; border:1px solid; white-space:nowrap }
.checklist-bar-wrap { display:flex; align-items:center; gap:7px; flex:1; max-width:240px }
.checklist-bar-track { flex:1; height:6px; background:var(--surface-soft); border-radius:3px; overflow:hidden }
.checklist-bar-fill { height:6px; border-radius:3px; transition:width .7s ease; background:var(--accent) }
.checklist-pct { font-size:13px; font-weight:700; white-space:nowrap; min-width:34px; text-align:right; color:var(--text-2) }
.checklist-list { display:flex; flex-direction:column; gap:5px }
.checklist-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  border: 1px solid var(--border);
  transition: border-color .2s;
  min-height: 38px;
}
.checklist-item.todo { border-left:3px solid var(--accent-border) }
.checklist-item.done { opacity:.5; border-left:3px solid rgba(45,181,93,.3) }
.checklist-seq {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .3px;
  min-width: 34px;
  text-align: center;
}
.checklist-icon { font-size:13px; flex-shrink:0; line-height:1 }
.checklist-text { font-size:13px; color:var(--text-2); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; flex-shrink:0 }
.checklist-item.done .checklist-text { text-decoration:line-through; color:var(--text-3) }
.checklist-inline-bar { flex:1; height:5px; background:var(--surface-soft); border-radius:3px; overflow:hidden; min-width:28px }
.checklist-inline-bar-fill { height:5px; border-radius:3px; transition:width .8s ease }
.checklist-item-pct { font-size:12px; font-weight:700; white-space:nowrap; flex-shrink:0; min-width:30px; text-align:right; color:var(--text-3) }

/* 다음 발행 추천 */
.next-content-recommendation { display:flex; flex-direction:column; gap:8px }
.next-content-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.next-content-body { flex:1 }
.next-content-type { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px }
.next-content-body h4 { font-size:14px; font-weight:700; margin:3px 0; line-height:1.4 }
.next-content-body p { font-size:13px; color:var(--text-2) }

/* ── TYPE PURPOSE BAR ── */
.type-purpose-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--accent-dark);
  font-weight: 500;
  transition: all var(--tr);
  animation: fadeInDown .2s ease;
}
.type-purpose-bar i { color:var(--accent); flex-shrink:0 }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display:none }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.modal-xl { max-width:700px }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--surface-soft);
  border: none;
  color: var(--text-3);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--tr);
}
.modal-close:hover { color:var(--text-1); background:var(--card-soft) }
.modal-header { text-align:center; margin-bottom:22px }
.modal-logo {
  width: 48px;
  height: 48px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  margin: 0 auto 12px;
}
.modal-header h2 { font-size:20px; font-weight:700; margin-bottom:4px }
.modal-header p  { font-size:14px; color:var(--text-2) }
.modal-form { display:flex; flex-direction:column; gap:14px }
.modal-switch { text-align:center; font-size:14px; color:var(--text-3); margin-top:4px }
.modal-switch a { color:var(--accent); font-weight:600 }
.modal-body { padding:0 0 18px; font-size:15px; line-height:1.7; max-height:50vh; overflow-y:auto }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border) }
.pw-wrap { position:relative }
.pw-wrap input { padding-right:42px; width:100% }
.pw-toggle { position:absolute; right:11px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-3); cursor:pointer; padding:3px }
.pw-toggle:hover { color:var(--text-1) }
.form-error {
  display: none;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.22);
  color: var(--error);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 2px;
  animation: errFadeIn .2s ease;
}
@keyframes errFadeIn { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }
.pw-match-hint { display:block; font-size:13px; font-weight:600; min-height:16px; margin-top:4px; transition:color .2s }
.pw-match-hint.match-ok   { color:var(--success) }
.pw-match-hint.match-fail { color:var(--error) }

/* ── MYPAGE ── */
.empty-state { text-align:center; padding:56px 20px }
.empty-icon { width:64px; height:64px; background:var(--surface-soft); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 18px; color:var(--text-3) }
.empty-state h2 { font-size:20px; font-weight:700; margin-bottom:8px }
.empty-state p { color:var(--text-2); font-size:15px; margin-bottom:18px }
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.profile-avatar {
  width: 56px;
  height: 56px;
  background: var(--accent-soft);
  border: 2px solid var(--accent-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent);
  flex-shrink: 0;
}
.profile-info { flex:1 }
.profile-info h2 { font-size:20px; font-weight:700; margin-bottom:3px }
.profile-info p { font-size:14px; color:var(--text-2) }
.mypage-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px }
.mypage-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-icon { width:40px; height:40px; background:var(--accent-soft); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:16px }
.stat-val  { font-size:28px; font-weight:800; color:var(--text-1) }
.stat-lbl  { font-size:13px; color:var(--text-3); font-weight:600 }
.mypage-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.mypage-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.mypage-section-header h3 { font-size:16px; font-weight:700; display:flex; align-items:center; gap:7px }
.mypage-filter { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px }
.filter-btn {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--tr);
}
.filter-btn:hover { border-color:var(--border-h); color:var(--text-1) }
.filter-btn.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent) }
.contents-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }
.content-card {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all var(--tr);
}
.content-card:hover { border-color:var(--border-h); background:var(--card-soft) }
.content-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px }
.content-type-badge { font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-border); padding:2px 7px; border-radius:8px }
.status-badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:7px; display:flex; align-items:center; gap:3px }
.status-pub   { background:rgba(45,181,93,.10); color:var(--success) }
.status-draft { background:rgba(245,166,35,.10); color:var(--warn) }
.content-card-title { font-size:14px; font-weight:700; margin-bottom:7px; color:var(--text-1); line-height:1.4 }
.content-card-meta { display:flex; gap:10px; font-size:12px; color:var(--text-3); margin-bottom:5px }
.content-card-meta span { display:flex; align-items:center; gap:3px }
.content-card-kw { font-size:12px; color:var(--text-3); margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.content-card-actions { display:flex; gap:5px }
.btn-publish {
  background: rgba(45,181,93,.10);
  border: 1px solid rgba(45,181,93,.22);
  color: var(--success);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:var(--font);
  display:inline-flex;
  align-items:center;
  gap:3px;
  transition:all var(--tr);
}
.btn-publish:hover { background:rgba(45,181,93,.18) }
.btn-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:var(--font);
  display:inline-flex;
  align-items:center;
  gap:3px;
  transition:all var(--tr);
}
.btn-delete:hover { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22); color:var(--error) }
.empty-state-sm { padding:36px; text-align:center; color:var(--text-3); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:15px }
.loading-sm { padding:36px; text-align:center; color:var(--text-3); font-size:15px; display:flex; align-items:center; justify-content:center; gap:7px }
.detail-meta { display:flex; flex-wrap:wrap; gap:10px; background:var(--surface-soft); border-radius:var(--radius-sm); padding:12px; margin-bottom:12px; font-size:14px }
.detail-meta span { color:var(--text-2) }
.detail-meta strong { color:var(--text-1) }
.detail-keywords { font-size:13px; color:var(--text-3); margin-bottom:14px; padding:7px 11px; background:var(--surface-soft); border-radius:var(--radius-xs); display:flex; align-items:center; gap:5px }
.detail-section { margin-bottom:14px }
.detail-section h4 { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:7px; text-transform:uppercase; letter-spacing:.5px }
.detail-pre { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-xs); padding:12px; font-size:12px; font-family:monospace; color:var(--text-2); white-space:pre-wrap; max-height:300px; overflow-y:auto }
.detail-body-text { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-xs); padding:12px; font-size:14px; line-height:1.8; color:var(--text-2); max-height:250px; overflow-y:auto }

/* Gap history cards (mypage.js 렌더링 호환) */
.gap-history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  cursor: pointer;
  transition: all var(--tr);
  box-shadow: var(--shadow-sm);
}
.gap-history-card:hover { border-color:var(--border-h); background:var(--surface-soft) }

/* ── LOADING ── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-overlay.hidden { display:none }
.loading-box { text-align:center; padding:40px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); max-width:320px; width:100%; box-shadow:var(--shadow-md) }
.loading-spinner { width:44px; height:44px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 16px }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-text { font-size:16px; font-weight:600; margin-bottom:20px; color:var(--text-1) }
.loading-steps { display:flex; flex-direction:column; gap:7px; text-align:left }
.ls-item { font-size:14px; color:var(--text-3); padding:5px 11px; border-radius:var(--radius-xs); transition:all .3s }
.ls-item.active { color:var(--accent); background:var(--accent-soft); font-weight:600 }
.ls-item.done { color:var(--text-3); text-decoration:line-through; opacity:.5 }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
.toast.hidden { display:none }

/* ── FOOTER ── */
.site-footer { background:var(--surface); border-top:1px solid var(--border); padding:36px clamp(20px,3vw,40px) 24px }
.footer-inner { max-width:1800px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:20px }
.footer-logo { font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; margin-bottom:6px; color:var(--text-1) }
.footer-logo i { color:var(--accent) }
.footer-desc { font-size:13px; color:var(--text-3); margin-top:3px }
.footer-info { display:flex; flex-direction:column; gap:7px }
.footer-info p { font-size:14px; color:var(--text-2); display:flex; align-items:center; gap:6px }
.footer-info a { color:var(--text-2); transition:color var(--tr) }
.footer-info a:hover { color:var(--accent) }
.footer-bottom { max-width:1800px; margin:0 auto; padding-top:16px; border-top:1px solid var(--border); text-align:center; font-size:13px; color:var(--text-3) }

/* ── LOGIN GATE ── */
.login-gate { display:flex; align-items:center; justify-content:center; min-height:55vh; padding:56px 24px }
.login-gate.hidden { display:none }
.login-gate-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 52px 44px;
  text-align: center;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow);
}
.login-gate-icon {
  width: 64px;
  height: 64px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--accent);
  margin: 0 auto 20px;
}
.login-gate-box h2 { font-size:22px; font-weight:700; margin-bottom:8px }
.login-gate-box p { font-size:15px; color:var(--text-2); margin-bottom:24px; line-height:1.7 }
.login-gate-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

/* ── CONTENT TYPE GRID ── */
.content-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:4px }
.type-radio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  cursor: pointer;
  transition: all var(--tr);
  position: relative;
  user-select: none;
}
.type-radio-card input[type=radio] { position:absolute; opacity:0; width:0; height:0 }
.type-radio-card:hover { border-color:var(--border-h); background:var(--surface-soft) }
.type-radio-card.selected,
.type-radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(49,130,246,.08);
}
.type-radio-header { display:flex; align-items:center; gap:7px; width:100% }
.type-radio-icon { font-size:16px; line-height:1; color:var(--text-2); flex-shrink:0 }
.type-radio-card.selected .type-radio-icon,
.type-radio-card:has(input:checked) .type-radio-icon { color:var(--accent) }
.type-radio-label { font-size:14px; font-weight:600; color:var(--text-2); line-height:1.3 }
.type-radio-desc  { font-size:12px; color:var(--text-3); line-height:1.4 }
.type-radio-card.selected .type-radio-label,
.type-radio-card:has(input:checked) .type-radio-label { color:var(--accent-dark) }

/* ── AI SUGGEST PANEL ── */
.ai-suggest-panel {
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  overflow: hidden;
  transition: all var(--tr);
}
.ai-suggest-panel.hidden { display:none }
.ai-suggest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  gap: 7px;
}
.ai-suggest-badge {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 5px;
}
.ai-suggest-close { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:12px; padding:2px 5px; border-radius:3px; transition:color var(--tr); flex-shrink:0 }
.ai-suggest-close:hover { color:var(--text-1) }
.ai-suggest-body { padding:11px 13px; display:flex; gap:14px; flex-wrap:wrap }
.ai-suggest-section { flex:1; min-width:180px }
.ai-suggest-section-title { font-size:12px; font-weight:700; color:var(--text-2); margin-bottom:7px; display:flex; align-items:center; gap:4px }
.suggest-empty-hint { font-size:13px; color:var(--text-3); font-style:italic }
.ai-suggest-panel-inline {
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 100%;
  min-height: 100px;
  box-sizing: border-box;
}
.ai-suggest-panel-inline .ai-suggest-body { padding:9px 11px; display:flex; flex-direction:column; gap:9px }
.ai-suggest-panel-inline .ai-suggest-section { flex:none }
#ai-suggest-wrap label .ai-suggest-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 5px;
}

/* ── GAP LOAD BANNER ── */
.gap-load-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
  animation: fadeInDown .3s ease;
}
.gap-load-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:7px }
.gap-load-title { font-size:14px; font-weight:700; color:var(--accent-dark); display:flex; align-items:center; gap:6px }
.gap-load-hint { font-size:13px; color:var(--text-3) }
.gap-load-body { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.gap-load-select {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
}
.gap-load-select:focus { border-color:var(--accent) }
.btn-gap-load {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all var(--tr);
}
.btn-gap-load:hover { background:var(--accent-dark) }
.gap-load-info { margin-top:10px; font-size:13px; color:var(--accent-dark); background:var(--surface); border-radius:var(--radius-xs); padding:8px 11px; border:1px solid var(--accent-border) }

/* ── UPLOAD SECTION ── */
.upload-section {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 18px;
}
.upload-row { display:flex; align-items:flex-start; gap:16px; padding:12px 0 }
.upload-row-top { align-items:flex-start }
.upload-row + .upload-row { border-top:1px solid var(--border) }
.upload-row-label { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--text-2); min-width:130px; flex-shrink:0; padding-top:9px }
.upload-row-label i { color:var(--accent); font-size:13px }
.upload-right { flex:1 }
.upload-desc { font-size:13px; color:var(--text-3); margin-bottom:10px; line-height:1.6 }
.upload-example-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px }
.upload-ex-tag { background:var(--surface); border:1px solid var(--border); color:var(--text-3); padding:3px 9px; border-radius:10px; font-size:12px; font-weight:500; display:flex; align-items:center; gap:4px }
.upload-dropzone {
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.upload-dropzone:hover { border-color:var(--accent-border); background:var(--accent-soft) }
.upload-dropzone.drag-over { border-color:var(--accent); background:var(--accent-soft) }
.upload-dropzone-inner { display:flex; flex-direction:column; align-items:center; gap:6px }
.upload-drop-icon { font-size:24px; color:var(--accent) }
.upload-drop-main { font-size:14px; font-weight:600; color:var(--text-2) }
.upload-drop-sub { font-size:12px; color:var(--text-3) }
.upload-drop-limit { font-size:12px; color:var(--text-3) }
.upload-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 4px;
  transition: all var(--tr);
}
.upload-btn:hover { background:var(--accent-mid) }
.upload-error-msg { color:var(--error); font-size:13px; margin-top:6px }
.upload-file-list { display:flex; flex-direction:column; gap:6px; margin-top:10px }
.upload-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 7px 10px;
  font-size: 13px;
}
.upload-file-icon { color:var(--accent); flex-shrink:0 }
.upload-file-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-1) }
.upload-file-size { color:var(--text-3); flex-shrink:0 }
.btn-remove-file { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; padding:2px; flex-shrink:0; transition:color var(--tr) }
.btn-remove-file:hover { color:var(--error) }
.upload-analysis-result {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
}
.upload-analysis-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 8px;
}
.upload-analysis-badge {
  background: var(--accent);
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.upload-analysis-body { font-size:13px; color:var(--accent-dark); line-height:1.7 }
.product-link-wrap { flex:1 }
.product-link-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--tr);
}
.product-link-input:focus { border-color:var(--accent) }
.upload-divider { border:none; border-top:1px solid var(--border); margin:0 }
.badge-optional-sm { background:var(--surface-soft); border:1px solid var(--border); color:var(--text-3); padding:1px 6px; border-radius:7px; font-size:11px; font-weight:600; margin-left:4px }

/* ── CHANNEL URL SECTION ── */
.channel-url-section { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; margin-top:18px }
.channel-url-title { font-size:15px; font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:7px }
.channel-url-sub { font-size:13px; color:var(--text-3); margin-bottom:14px }
.channel-url-own-wrap { margin-bottom:10px }
.channel-url-own-label { font-size:13px; font-weight:600; color:var(--text-2); white-space:nowrap; display:flex; align-items:center; gap:5px }
.channel-url-input-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.channel-url-input-wrap input { flex:1; min-width:180px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-1); font-family:var(--font); font-size:14px; padding:9px 12px; outline:none; transition:border-color var(--tr) }
.channel-url-input-wrap input:focus { border-color:var(--accent) }
.btn-fetch-url { background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font); white-space:nowrap; display:flex; align-items:center; gap:5px; transition:all var(--tr) }
.btn-fetch-url:hover { background:var(--accent-dark) }
.url-fetch-status { font-size:13px; color:var(--text-2) }
.url-fetch-status.hidden { display:none }
.own-manual-form { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; margin-top:10px }
.own-manual-notice { font-size:13px; color:var(--warn); margin-bottom:10px; display:flex; align-items:center; gap:5px }
.own-manual-fields { display:flex; flex-direction:column; gap:8px }
.own-manual-fields input, .own-manual-fields textarea { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-1); font-family:var(--font); font-size:14px; padding:9px 12px; outline:none; resize:vertical; transition:border-color var(--tr) }
.own-manual-fields input:focus, .own-manual-fields textarea:focus { border-color:var(--accent) }
.btn-own-manual-save { background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); display:flex; align-items:center; gap:5px; transition:all var(--tr) }
.btn-own-manual-save:hover { background:var(--accent-dark) }
.channel-collect-notice { margin-top:10px; display:flex; flex-direction:column; gap:6px }
.channel-collect-row { display:flex; align-items:flex-start; gap:7px; font-size:13px; color:var(--text-2); line-height:1.5; padding:7px 10px; border-radius:var(--radius-xs) }
.channel-collect-ok  { background:rgba(45,181,93,.07); color:var(--success) }
.channel-collect-no  { background:rgba(239,68,68,.06); color:var(--error) }
.url-collected-info { background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:12px 14px; margin-top:10px }
.url-collected-header { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; color:var(--accent-dark); margin-bottom:8px }
.btn-clear-collected { background:none; border:none; color:var(--text-3); font-size:13px; cursor:pointer; font-family:var(--font) }
.url-collected-body { font-size:13px; color:var(--accent-dark); line-height:1.7 }

/* ── NAVER CONTENT SECTION ── */
.naver-content-section { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; margin-top:14px }
.naver-content-title { font-size:15px; font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:7px }
.naver-content-sub { font-size:13px; color:var(--text-3); margin-bottom:12px }
.naver-url-grid { display:grid; gap:12px }
.naver-url-grid--single { grid-template-columns:1fr }
.naver-url-item label { font-size:13px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:5px; margin-bottom:7px }
.blog-ai-panel { background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:12px 14px; margin-top:8px; font-size:13px; color:var(--accent-dark) }
.badge-optional { background:var(--surface-soft); border:1px solid var(--border); color:var(--text-3); padding:1px 7px; border-radius:7px; font-size:11px; font-weight:600; margin-left:6px }

/* ── ENTITY GRID (브랜드 엔티티) ── */
.badge-entity { background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-border); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; margin-left:7px; vertical-align:middle }
.entity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px }
.entity-item { display:flex; flex-direction:column; gap:5px }
.entity-label { font-size:11px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:4px; text-transform:uppercase; letter-spacing:.3px }
.entity-item input { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-1); font-family:var(--font); font-size:13px; padding:8px 11px; outline:none; transition:border-color var(--tr) }
.entity-item input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.entity-item input::placeholder { color:var(--text-3); font-size:12px }

/* ── GAP ANALYSIS CARDS ── */
.gap-analyses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }
.gap-analysis-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all var(--tr);
  box-shadow: var(--shadow-sm);
}
.gap-analysis-card:hover { border-color:var(--border-h) }
.gap-analysis-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.gap-analysis-brand { font-size:15px; font-weight:700; color:var(--text-1) }
.gap-analysis-score { font-size:22px; font-weight:800; color:var(--accent) }
.gap-analysis-meta { font-size:13px; color:var(--text-3) }

/* ── MISC COMPONENTS ── */
.brand-memory-panel { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; margin-bottom:16px }
.brand-memory-title { font-size:13px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:5px }
.narrative-badge { display:inline-flex; align-items:center; gap:5px; background:var(--accent-soft); border:1px solid var(--accent-border); color:var(--accent-dark); padding:4px 10px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:12px }
.quality-score-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:13px; font-weight:700 }
.qs-high   { background:rgba(45,181,93,.10); color:var(--success); border:1px solid rgba(45,181,93,.22) }
.qs-mid    { background:rgba(245,166,35,.10); color:var(--warn);    border:1px solid rgba(245,166,35,.22) }
.qs-low    { background:rgba(239,68,68,.10);  color:var(--error);   border:1px solid rgba(239,68,68,.20) }
.sns-summary-card { background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; font-size:15px; color:var(--text-1); line-height:1.7 }
.sns-summary-label { font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:7px; display:flex; align-items:center; gap:4px }

/* ── STEP ACTIONS ── */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   1200px / 992px / 768px / 480px
══════════════════════════════════════════════ */

/* ── ≤ 1200px: 우측 패널 축소 + Tablet 타이포 ── */
@media(max-width:1200px){
  :root {
    --fs-section:  24px;
    --fs-card:     18px;
    --fs-subtitle: 16px;
    --fs-body:     15px;
  }
  .workspace-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 280px;
  }
  .right-panel { width:280px }
}

/* ── ≤ 992px: 우측 패널 아래 이동 (2컬럼) ── */
@media(max-width:992px){
  .workspace-layout {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .right-panel {
    grid-column: 1 / -1;
    width: 100%;
    position: static;
    height: auto;
    border-top: 1px solid var(--border);
    padding: 20px 24px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .rp-card { flex: 1; min-width: 240px }
  .content-area { border-right: none }
}

/* ── ≤ 768px: 1컬럼 + 사이드바 collapse + Mobile 타이포 ── */
@media(max-width:768px){
  :root {
    --fs-section:  20px;
    --fs-card:     16px;
    --fs-subtitle: 15px;
    --fs-body:     14px;
    --fs-small:    12px;
  }
  .workspace-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px 16px;
    flex-wrap: nowrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-section-label { display:none }
  .sidebar-link { white-space:nowrap; padding:7px 11px }
  .sidebar-divider { display:none }
  .content-area,
  .content-area-full { padding:24px 20px }
  .main-wrapper { padding:28px 20px 56px }
  .right-panel {
    grid-column: 1;
    width: 100%;
    position: static;
    height: auto;
  }
  .form-grid { grid-template-columns:1fr }
  .form-grid .form-group.span2 { grid-column:span 1 }
  .entity-grid { grid-template-columns:1fr 1fr }
  .feature-cards { grid-template-columns:1fr }
  .mypage-stats { grid-template-columns:repeat(2,1fr) }
  .header-inner { padding:0 20px }
  .main-nav { display:none }
  .gap-score-card { flex-direction:column }
  .gap-counts-grid { grid-template-columns:repeat(2,1fr) }
}

/* ── ≤ 480px: 모바일 최적화 ── */
@media(max-width:480px){
  .workspace-layout { gap:0 }
  .content-area,
  .content-area-full { padding:16px 16px }
  .hero { padding:48px 16px 40px }
  .hero-title { font-size:clamp(28px,7vw,38px) }
  .hero-desc { font-size:15px }
  .features-section { padding:40px 16px }
  .main-wrapper { padding:20px 16px 48px }
  .mypage-stats { grid-template-columns:repeat(2,1fr) }
  .content-grid { grid-template-columns:1fr }
  .gap-counts-grid { grid-template-columns:1fr }
  .modal-box { padding:24px 20px }
  .login-gate-box { padding:36px 24px }
  .header-inner { padding:0 16px }
  .footer-inner { padding:0 }
}