:root{
    --bg:             #fbfaf7;
    --sidebar-bg:     #f3efe4;
    --surface:        #ffffff;
    --surface-hover:  #f6f2e9;
    --border:         #e6e0d1;
    --border-strong:  #d7cdb2;
    --ink:            #1c1a16;
    --ink-soft:       #6e6656;
    --ink-faint:      #a39c88;

    --accent:         #b23a2e;   /* 벽돌(인주)색 — 주요 액센트 */
    --accent-ink:     #7c2a20;   /* 액센트 위 텍스트 / hover */
    --accent-soft:    #f3e0db;   /* 옅은 벽돌 워시 — 활성 상태 배경 */
    --accent-shadow:  rgba(178,58,46,.16);

    --badge-a:        #b23a2e; --badge-a-bg:#f6e1dc;  /* 쇼핑몰 시작하기 */
    --badge-b:        #97671c; --badge-b-bg:#f2e6c9;  /* 운영 도구 */
    --badge-c:        #4c6b49; --badge-c-bg:#e2ecdd;  /* 자료실 */
    --badge-d:        #6b3a5e; --badge-d-bg:#eee0ec;  /* 세팅 대행 */

    --gradient:       linear-gradient(135deg,var(--accent) 0%,var(--badge-b) 100%);
    --radius:         14px;
    --radius-sm:      10px;
    --sidebar-w:      252px;
    --topbar-h:        60px;
    --maxw-narrow:    720px;
    --f-display:'Space Grotesk','IBM Plex Sans KR',sans-serif;
    --f-body:'IBM Plex Sans KR',-apple-system,'Malgun Gothic',sans-serif;
    --f-mono:'JetBrains Mono','SFMono-Regular',monospace;
  }
  *{box-sizing:border-box;}
  /* 클래스에 display 값을 지정한 요소(.ws-field 등)는 브라우저 기본
     [hidden]{display:none} UA 스타일보다 author 스타일이 우선 적용돼
     hidden 속성이 무시된다 — 항상 hidden이 이기도록 명시적으로 고정한다
     (로그인/회원가입 모달의 "비밀번호 확인" 필드가 이 문제로 로그인
     모드에서도 계속 보이던 버그의 원인). */
  [hidden]{display:none !important;}
  html{scroll-behavior:auto;}
  body{background:var(--bg); color:var(--ink); font-family:var(--f-body); line-height:1.65; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:var(--f-body); font-weight:800; text-wrap:balance; margin:0; letter-spacing:-.01em; color:var(--ink);}
  p{margin:0 0 1em; color:var(--ink-soft); max-width:66ch;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none; margin:0; padding:0;}
  button{font-family:var(--f-body);}
  ::selection{background:var(--accent-soft); color:var(--accent-ink);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  input:focus, textarea:focus, select:focus{outline:none; box-shadow:0 0 0 3px var(--accent-soft);}

  html{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;}
  html::-webkit-scrollbar{width:3px; height:3px;}
  html::-webkit-scrollbar-track{background:transparent;}
  html::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px;}

  .narrow{max-width:var(--maxw-narrow); margin-inline:auto;}
  .grad-text{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--badge-a-bg); padding:.35rem .8rem; border-radius:99px; margin-bottom:1.2rem;}
  .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}

  /* ---------------- shell: sidebar + topbar ---------------- */
  .app-shell{display:flex; min-height:100vh; min-height:100dvh;}
  .scrim{position:fixed; inset:0; background:rgba(28,26,22,.32); z-index:75; opacity:0; pointer-events:none; transition:opacity .2s ease;}
  .scrim.show{opacity:1; pointer-events:auto;}

  .sidebar{width:var(--sidebar-w); flex:0 0 auto; background:var(--sidebar-bg); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:1.3rem .9rem 1.4rem; position:sticky; top:0; align-self:flex-start; height:100vh; height:100dvh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;}
  .sidebar::-webkit-scrollbar{width:3px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px;}
  .sidebar .logo{display:flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; padding:.5rem .6rem 1.3rem;}
  .sidebar .logo .dot{width:10px; height:10px; border-radius:3px; background:var(--gradient); flex:0 0 auto;}

  .profile-card{display:flex; align-items:center; gap:.7rem; padding:.5rem .6rem; margin-bottom:.7rem; cursor:pointer;}
  .profile-avatar{position:relative; width:36px; height:36px; border-radius:50%; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:.95rem; flex:0 0 auto;}
  .profile-avatar .pulse-dot{position:absolute; right:-1px; bottom:-1px; border:2px solid var(--sidebar-bg);}
  .profile-name{font-size:.88rem; font-weight:700; color:var(--ink);}
  .profile-day{font-family:var(--f-mono); font-size:.68rem; color:var(--ink-faint); margin-top:.1rem;}
  .progress-mini{padding:0 .6rem 1.1rem; border-bottom:1px solid var(--border); margin-bottom:.7rem;}
  .pm-head{display:flex; justify-content:space-between; font-size:.74rem; color:var(--ink-soft); margin-bottom:.4rem;}
  .pm-head b{font-weight:700; color:var(--accent);}
  .pm-bar{height:6px; border-radius:99px; background:var(--border); overflow:hidden;}
  .pm-fill{height:100%; width:0%; background:var(--gradient); border-radius:99px; transition:width .35s ease;}

  .side-nav{display:flex; flex-direction:column; gap:.15rem;}
  .side-nav a{position:relative; display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600; color:var(--ink-soft); transition:background .15s, color .15s;}
  .side-nav a svg{width:18px; height:18px; flex:0 0 auto;}
  .side-nav a:hover{background:var(--surface-hover); color:var(--ink);}
  .side-nav a.nav-current{background:var(--accent-soft); color:var(--accent-ink);}
  .side-nav a.nav-current::before{content:""; position:absolute; left:-.9rem; top:.5rem; bottom:.5rem; width:3px; border-radius:0 3px 3px 0; background:var(--accent);}

  .side-nav-foot{margin-top:auto; padding-top:.9rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.1rem;}
  .side-nav-foot a{font-size:.8rem; color:var(--ink-faint); padding:.5rem .7rem; border-radius:var(--radius-sm); transition:background .15s, color .15s;}
  .side-nav-foot a:hover{color:var(--ink-soft); background:var(--surface-hover);}

  @media (max-width:960px){
    .sidebar{position:fixed; left:0; top:0; z-index:80; transform:translateX(-100%); transition:transform .22s ease; box-shadow:none;}
    .sidebar.open{transform:translateX(0); box-shadow:24px 0 48px -24px rgba(28,26,22,.35);}
  }

  .app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
  .topbar{height:var(--topbar-h); flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-inline:1.6rem; border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:40;}
  .topbar-left{display:flex; align-items:center; gap:.8rem; min-width:0;}
  .crumb{font-size:.86rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .menu-btn{display:none; flex-direction:column; justify-content:center; gap:4px; width:34px; height:34px; border-radius:9px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; flex:0 0 auto;}
  .menu-btn span{display:block; width:14px; height:1.6px; background:var(--ink); margin-inline:auto;}
  @media (max-width:960px){ .menu-btn{display:flex;} }

  /* ---------------- shared buttons ---------------- */
  .btn{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-body); font-weight:700; font-size:.86rem; padding:.62rem 1.1rem; border-radius:99px; border:1px solid transparent; transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-ink);}
  .btn-ghost{background:var(--surface); border-color:var(--border-strong); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft);}
  .btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px -14px var(--accent-shadow);}
  .btn-sm{padding:.55rem .95rem; font-size:.82rem;}

  /* ---------------- views ---------------- */
  .content{flex:1; padding:2rem 1.6rem 3.2rem; max-width:1080px; width:100%;}
  .view.fade-in{animation:viewIn .25s cubic-bezier(.22,.61,.36,1);}
  @keyframes viewIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion:reduce){ .view.fade-in{animation:none;} }

  /* ---------------- staggered entrance for grid/list items ---------------- */
  .stagger-in{animation:staggerIn .3s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--stagger-i,0) * 50ms);}
  @keyframes staggerIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion:reduce){ .stagger-in{animation:none;} }

  /* ---------------- online/live pulse dot ---------------- */
  .pulse-dot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--badge-c); flex:0 0 auto;}
  .pulse-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--badge-c); opacity:.4; animation:pulseDot 1.8s ease-out infinite;}
  @keyframes pulseDot{ 0%{transform:scale(.6); opacity:.5;} 100%{transform:scale(1.9); opacity:0;} }
  @media (prefers-reduced-motion:reduce){ .pulse-dot::after{animation:none; display:none;} }

  /* ---------------- empty state ---------------- */
  .empty-state{text-align:center; padding:3.2rem 1rem; color:var(--ink-faint);}
  .empty-state .es-icon{font-size:2rem; margin-bottom:.8rem;}
  .empty-state p{font-size:.9rem; margin-bottom:1.1rem; color:var(--ink-soft);}

  /* ---------------- toast ---------------- */
  .toast-stack{position:fixed; right:1.2rem; bottom:1.2rem; z-index:120; display:flex; flex-direction:column; gap:.6rem; align-items:flex-end; pointer-events:none;}
  .toast{display:flex; align-items:center; gap:.5rem; background:var(--ink); color:#fff; font-size:.85rem; font-weight:600; padding:.75rem 1.1rem; border-radius:10px; box-shadow:0 16px 32px -12px rgba(28,26,22,.4); transform:translateX(24px); opacity:0; transition:transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s ease;}
  .toast.show{transform:none; opacity:1;}
  .toast.success{background:var(--badge-c);}
  @media (prefers-reduced-motion:reduce){ .toast{transition:opacity .22s ease;} }

  /* ---------------- home dashboard ---------------- */
  .dash-head h1{font-size:clamp(1.5rem,3.2vw,1.95rem);}
  .dash-head p{margin-top:.55rem; font-size:.98rem;}

  .dash-grid{display:grid; grid-template-columns:1.7fr 1fr; gap:1.3rem; margin-top:1.9rem; align-items:stretch;}
  @media (max-width:860px){ .dash-grid{grid-template-columns:1fr;} }

  .dash-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
  .dash-panel-head{padding:1.05rem 1.3rem; font-size:.96rem; font-weight:700; border-bottom:1px solid var(--border);}

  .row-text{flex:1; min-width:0;}
  .row-text h3{font-size:.97rem; font-weight:700; margin-bottom:.12rem;}
  .row-text p{font-size:.82rem; margin:0;}
  .row-progress{margin-top:.5rem; height:4px; border-radius:99px; background:var(--border); overflow:hidden; max-width:220px;}
  .row-progress-fill{height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .35s ease;}

  .tone-b{background:var(--badge-b-bg); color:var(--badge-b);}
  .tone-c{background:var(--badge-c-bg); color:var(--badge-c);}
  .tone-d{background:var(--badge-d-bg); color:var(--badge-d);}

  .see-all{font-size:.85rem; font-weight:600; color:var(--accent-ink); white-space:nowrap; flex:0 0 auto;}
  .see-all:hover{color:var(--accent);}

  /* ---------------- start index (chapter list) ---------------- */
  .page-head{padding:.4rem 0 .2rem;}
  .page-head h1{font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.25;}
  .page-lead{font-size:1rem; margin-top:1rem;}

  .card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem;}
  @media (max-width:900px){ .card-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }

  .cc-top{display:flex; align-items:center; justify-content:space-between;}
  .cc-num{font-family:var(--f-mono); font-size:1.5rem; font-weight:600; color:var(--ink-faint);}
  .cc-badges{display:flex; align-items:center; gap:.4rem;}
  .cc-badge{font-family:var(--f-mono); font-size:.62rem; font-weight:700; letter-spacing:.03em; padding:.2rem .55rem; border-radius:99px; white-space:nowrap;}
  .cc-badge.free{background:var(--badge-c-bg); color:var(--badge-c);}
  .cc-badge.paid{background:var(--accent-soft); color:var(--accent-ink);}
  .cc-check{width:19px; height:19px; border-radius:50%; background:var(--badge-c); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .cc-check svg{width:11px; height:11px;}
  .cc-points{display:flex; flex-direction:column; gap:.28rem; margin:0;}
  .cc-points li{font-size:.78rem; color:var(--ink-soft); padding-left:.85rem; position:relative; list-style:none;}
  .cc-points li::before{content:"•"; position:absolute; left:0; color:var(--ink-faint);}

  /* ---------------- guide-card: expandable chapter card (/start index) ---------------- */
  .guide-card{position:relative; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;}
  .guide-card:hover{transform:translateY(-2px); border-color:var(--border-strong); box-shadow:0 16px 32px -22px var(--accent-shadow);}
  .guide-card.open{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
  .gc-head{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.4rem 1.4rem 1.1rem; display:flex; flex-direction:column; gap:.55rem; font-family:var(--f-body); color:inherit;}
  .gc-head h2{font-size:1rem; font-weight:700; color:var(--ink); margin:0;}
  .gc-head p{font-size:.85rem; margin:0; color:var(--ink-soft);}
  .gc-chev{color:var(--ink-faint); transition:transform .18s ease; align-self:flex-end; margin-top:-.3rem;}
  .guide-card.open .gc-chev{transform:rotate(180deg); color:var(--accent);}
  .gc-body{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .guide-card.open .gc-body{max-height:240px;}
  .gc-body-inner{padding:0 1.4rem 1.3rem;}
  .gc-link{display:inline-block; margin-top:.75rem; font-size:.85rem; font-weight:700; color:var(--accent-ink);}
  .guide-card:hover .gc-link{color:var(--accent);}

  .start-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin:1.7rem 0 1.2rem;}
  @media (max-width:640px){ .start-stats{grid-template-columns:1fr;} }
  .start-stats div{background:var(--surface); padding:.9rem 1rem;}
  .start-stats .ss-label{font-size:.71rem; color:var(--ink-faint); margin-bottom:.3rem;}
  .start-stats .ss-value{font-family:var(--f-mono); font-weight:700; font-size:1.08rem; color:var(--ink);}

  .progress-detail{border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.3rem; margin-bottom:1.5rem; background:var(--surface);}
  .pd-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.65rem;}
  .pd-head span{font-size:.92rem; font-weight:700; color:var(--ink);}
  .pd-head b{font-family:var(--f-mono); font-size:1.08rem; color:var(--accent);}
  .pd-bar{height:8px; border-radius:99px; background:var(--border); overflow:hidden;}
  .pd-fill{height:100%; width:0%; background:var(--gradient); border-radius:99px; transition:width .35s ease;}
  .pd-legend{display:flex; gap:1.2rem; margin-top:.65rem; font-size:.78rem; color:var(--ink-soft);}
  .pd-legend span{display:inline-flex; align-items:center; gap:.4rem;}
  .pd-dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
  .pd-dot.done{background:var(--badge-c);}
  .pd-dot.left{background:var(--border-strong);}

  .filter-tabs{display:flex; gap:.5rem; margin-bottom:1.3rem;}
  .filter-tab{padding:.5rem 1.05rem; border-radius:99px; border:1px solid var(--border-strong); background:var(--surface); font-family:var(--f-body); font-size:.84rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:background .15s, color .15s, border-color .15s;}
  .filter-tab.active{background:var(--accent); color:#fff; border-color:var(--accent);}
  .filter-tab:not(.active):hover{background:var(--surface-hover);}

  .sub-banner{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.3rem 1.5rem; margin-top:1.8rem;}
  .sub-banner .sb-title{font-size:1.02rem; font-weight:700; margin-bottom:.3rem;}
  .sub-banner .sb-desc{font-size:.85rem; color:rgba(255,255,255,.7);}
  .sub-banner .btn-primary{flex:0 0 auto;}

  .sub-banner-float{position:fixed; left:calc(var(--sidebar-w) + 1.6rem); right:1.6rem; bottom:1.1rem; z-index:55; max-width:1032px; margin:0 auto; box-shadow:0 18px 40px -12px rgba(28,26,22,.45); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
  .sub-banner-float.show{opacity:1; transform:none; pointer-events:auto;}
  @media (max-width:960px){ .sub-banner-float{left:1rem; right:1rem;} }
  @media (max-width:640px){ .sub-banner-float{flex-direction:column; align-items:stretch; text-align:center;} .sub-banner-float .btn-primary{width:100%; justify-content:center;} }

  /* ---------------- chapter body ---------------- */
  .breadcrumb{display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.75rem; color:var(--ink-faint); margin-bottom:1.1rem;}
  .breadcrumb a{color:var(--ink-soft); transition:color .15s;}
  .breadcrumb a:hover{color:var(--accent-ink);}

  .chapter-body{padding-top:1.5rem;}
  h2.section-h{font-size:1.24rem; font-weight:700; margin:2.6rem 0 1.05rem;}
  h2.section-h:first-child{margin-top:0;}

  .callout{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:1.3rem 1.5rem; margin:1.3rem 0;}
  .callout p{margin-bottom:.55rem; font-size:.94rem;}
  .callout p:last-child{margin-bottom:0;}
  .callout strong{color:var(--ink);}

  .stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin:1.5rem 0 .7rem;}
  .stat-strip.cols-2{grid-template-columns:repeat(2,1fr);}
  .stat-strip div{background:var(--surface); padding:1.05rem 1rem;}
  .stat-strip .v{font-family:var(--f-display); font-weight:700; font-size:1.42rem; color:var(--accent); font-variant-numeric:tabular-nums;}
  .stat-strip .l{font-size:.73rem; color:var(--ink-faint); margin-top:.28rem;}
  @media (max-width:560px){ .stat-strip{grid-template-columns:1fr;} }
  .stat-note{font-size:.78rem; color:var(--ink-faint); margin-top:0;}

  /* ---------------- info cards & tables (chapter content) ---------------- */
  .info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin:1.4rem 0;}
  .info-grid.cols-2{grid-template-columns:repeat(2,1fr);}
  @media (max-width:860px){ .info-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .info-grid{grid-template-columns:1fr;} }
  .info-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.15rem 1.2rem; display:flex; flex-direction:column; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;}
  .info-card:hover{transform:translateY(-2px); border-color:var(--border-strong); box-shadow:0 14px 28px -20px var(--accent-shadow);}
  .photo-chip{display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; margin-top:auto; padding:.34rem .7rem; border-radius:99px; border:1px solid var(--border-strong); background:var(--surface-hover); font-family:var(--f-body); font-size:.78rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:border-color .15s, color .15s, background .15s;}
  .info-card ul{margin-bottom:.5rem;}
  .photo-chip:hover{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft);}
  .photo-chip svg{width:14px; height:14px;}

  .lightbox{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:2.2rem; background:rgba(28,26,22,.6); opacity:0; pointer-events:none; transition:opacity .18s ease;}
  .lightbox.open{opacity:1; pointer-events:auto;}
  .lightbox-inner{position:relative; max-width:min(720px,92vw); max-height:88vh;}
  .lightbox-inner img{display:block; width:100%; height:100%; max-height:88vh; object-fit:contain; border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
  .lightbox-close{position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; border:none; font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(28,26,22,.35);}
  /* ---------------- login modal ---------------- */
  .modal{position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:1.4rem; opacity:0; pointer-events:none; transition:opacity .18s ease;}
  .modal.open{opacity:1; pointer-events:auto;}
  .modal-backdrop{position:absolute; inset:0; background:rgba(28,26,22,.55);}
  .modal-panel{position:relative; width:100%; max-width:380px; background:var(--surface); border-radius:var(--radius); padding:2rem 1.8rem 1.8rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.35);}
  .modal-close{position:absolute; top:1rem; right:1rem; width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); cursor:pointer;}
  .modal-head{text-align:center; margin-bottom:1.5rem;}
  .modal-head .logo-mini{font-family:var(--f-display); font-weight:700; font-size:1rem; display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1rem;}
  .modal-head .logo-mini .dot{width:8px; height:8px; border-radius:3px; background:var(--gradient);}
  .modal-head h2{font-size:1.2rem;}
  .modal-head p{font-size:.85rem; margin-top:.4rem;}
  #loginForm{display:flex; flex-direction:column; gap:1rem;}
  .modal-divider{display:flex; align-items:center; gap:.8rem; margin:1.3rem 0; font-size:.76rem; color:var(--ink-faint);}
  .modal-divider::before, .modal-divider::after{content:""; flex:1; height:1px; background:var(--border);}
  .modal-social{display:flex; flex-direction:column; gap:.7rem;}
  .modal-foot{text-align:center; font-size:.82rem; color:var(--ink-soft); margin-top:1.4rem;}
  .modal-foot a{color:var(--accent-ink); font-weight:600;}
  .modal-notice{text-align:center;}
  .modal-notice p{font-size:.9rem; color:var(--ink);}

  .info-card h4{font-size:.92rem; font-weight:700; margin-bottom:.5rem; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;}
  .info-card .tag{font-family:var(--f-mono); font-size:.64rem; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); padding:.1rem .45rem; border-radius:4px; letter-spacing:.02em;}
  .info-card p{font-size:.84rem; margin:0;}
  .info-card ul{margin-top:.6rem; display:flex; flex-direction:column; gap:.32rem;}
  .info-card li{font-size:.81rem; color:var(--ink-soft); padding-left:1.05rem; position:relative;}
  .info-card li.good::before{content:"✓"; position:absolute; left:0; color:var(--badge-c); font-weight:700;}
  .info-card li.caution::before{content:"!"; position:absolute; left:0; color:var(--badge-b); font-weight:700;}

  .versus{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; margin:1.5rem 0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
  .versus .side{padding:1.2rem 1.3rem; background:var(--surface);}
  .versus .side.rec{background:var(--accent-soft);}
  .versus .vs{display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-faint); background:var(--sidebar-bg); padding:0 .6rem;}
  .versus h4{font-size:.94rem; margin-bottom:.5rem;}
  .versus small{display:block; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.2rem;}
  .versus ul{display:flex; flex-direction:column; gap:.35rem;}
  .versus li{font-size:.82rem; color:var(--ink-soft); padding-left:1.05rem; position:relative;}
  .versus li.good::before{content:"✓"; position:absolute; left:0; color:var(--badge-c); font-weight:700;}
  .versus li.bad::before{content:"✕"; position:absolute; left:0; color:var(--ink-faint); font-weight:700;}
  @media (max-width:640px){ .versus{grid-template-columns:1fr;} .versus .vs{padding:.4rem 0;} }

  .checklist-block{border:1px solid var(--border); border-radius:var(--radius); margin:1.6rem 0; background:var(--surface); overflow:hidden;}
  .cl-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1.2rem; border-bottom:1px solid var(--border); background:var(--sidebar-bg);}
  .cl-head .title{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
  .cl-head .count{font-family:var(--f-mono); font-size:.82rem; color:var(--accent); font-weight:700; white-space:nowrap;}
  .cl-group{padding:.9rem 1.2rem; border-bottom:1px solid var(--border);}
  .cl-group:last-child{border-bottom:none;}
  .cl-group .g-label{font-size:.75rem; color:var(--ink-faint); margin-bottom:.5rem; font-weight:700;}
  .cl-row{display:flex; align-items:center; gap:.6rem; padding:.3rem 0; cursor:pointer; user-select:none;}
  .cl-row input{position:absolute; opacity:0; width:1px; height:1px;}
  .cl-box{width:16px; height:16px; border:1.5px solid var(--border-strong); border-radius:4px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;}
  .cl-box::after{content:""; width:8px; height:8px; border-radius:2px; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity .12s, transform .12s;}
  .cl-row input:checked + .cl-box{border-color:var(--accent); background:var(--accent-soft);}
  .cl-row input:checked + .cl-box::after{opacity:1; transform:scale(1);}
  .cl-row .label{font-size:.87rem; color:var(--ink-soft); transition:color .15s;}
  .cl-row input:checked ~ .label{color:var(--ink-faint); text-decoration:line-through;}
  .cl-row:focus-within .cl-box{outline:2px solid var(--accent); outline-offset:2px;}
  .cl-note{padding:.8rem 1.2rem; font-size:.76rem; color:var(--ink-faint); background:var(--sidebar-bg); border-top:1px solid var(--border);}

  /* ---------------- tab switcher ---------------- */
  .tabs{border:1px solid var(--border); border-radius:var(--radius); margin:1.5rem 0; overflow:hidden; background:var(--surface);}
  .tab-bar{display:flex; flex-wrap:wrap; background:var(--sidebar-bg); border-bottom:1px solid var(--border);}
  .tab-btn{flex:1 1 auto; min-width:80px; padding:.75rem .6rem; font-family:var(--f-body); font-size:.84rem; font-weight:600; color:var(--ink-faint); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:color .15s, border-color .15s;}
  .tab-btn:hover{color:var(--ink-soft);}
  .tab-btn.active{color:var(--accent-ink); border-bottom-color:var(--accent); background:var(--surface);}
  .tab-panel{display:none; padding:1.3rem 1.4rem;}
  .tab-panel.active{display:block;}
  .tab-panel h4{font-size:.94rem; font-weight:700; margin-bottom:.5rem;}
  .tab-panel p{font-size:.86rem; margin:0;}
  .tab-panel img{width:100%; max-height:280px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:1rem; display:block;}
  .tab-panel .img-note{font-size:.72rem; color:var(--ink-faint); margin:-.7rem 0 .9rem;}

  /* ---------------- diagnostic tool ---------------- */
  .diag{border:1px solid var(--border); border-radius:var(--radius); margin:1.5rem 0; overflow:hidden; background:var(--surface);}
  .diag-head{padding:.95rem 1.3rem; background:var(--sidebar-bg); border-bottom:1px solid var(--border); font-size:.86rem; color:var(--ink-soft);}
  .diag-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border);}
  @media (max-width:560px){ .diag-grid{grid-template-columns:1fr;} }
  .diag-btn{background:var(--surface); border:none; padding:1.1rem 1.3rem; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; transition:background .15s;}
  .diag-btn:hover{background:var(--surface-hover);}
  .diag-btn.active{background:var(--accent-soft);}
  .diag-btn .dt{font-size:.9rem; font-weight:700; color:var(--ink);}
  .diag-btn .dd{font-size:.78rem; color:var(--ink-faint);}
  .diag-result{padding:1.3rem 1.4rem; border-top:1px solid var(--border); background:var(--accent-soft); display:none;}
  .diag-result.show{display:block;}
  .diag-result .dr-label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; margin-bottom:.5rem;}
  .diag-result p{font-size:.88rem; margin:0; color:var(--ink);}
  .diag-result ul{margin-top:.55rem; display:flex; flex-direction:column; gap:.3rem;}
  .diag-result li{font-size:.85rem; color:var(--ink-soft); padding-left:1rem; position:relative;}
  .diag-result li::before{content:"—"; position:absolute; left:0; color:var(--ink-faint);}

  /* ---------------- day timeline (ch07) ---------------- */
  .day-timeline{margin:1.6rem 0;}
  .dt-item{display:grid; grid-template-columns:3.6rem 1.6rem 1fr; column-gap:0; padding-bottom:1.3rem;}
  .dt-item:last-child{padding-bottom:0;}
  .dt-time{grid-column:1; text-align:right; padding-right:.7rem; padding-top:.15rem; font-family:var(--f-mono); font-size:.72rem; font-weight:700; color:var(--accent-ink); white-space:nowrap;}
  .dt-rail{grid-column:2; position:relative;}
  .dt-rail::before{content:""; position:absolute; top:0; bottom:-1.3rem; left:50%; width:2px; background:var(--border-strong); transform:translateX(-50%);}
  .dt-item:last-child .dt-rail::before{display:none;}
  .dt-rail::after{content:""; position:absolute; top:.32rem; left:50%; width:9px; height:9px; border-radius:50%; background:var(--accent); transform:translateX(-50%); z-index:1;}
  .dt-content{grid-column:3; padding-left:.9rem;}
  .dt-content h4{font-size:.92rem; font-weight:700; margin-bottom:.25rem;}
  .dt-content p{font-size:.85rem; margin:0;}

  /* ---------------- journey chart (ch08) ---------------- */
  .journey{margin:1.8rem 0; border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.2rem .6rem; background:var(--surface);}
  .journey svg{width:100%; height:auto; display:block;}
  .journey-milestones{display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-top:.6rem;}
  @media (max-width:640px){ .journey-milestones{grid-template-columns:repeat(2,1fr);} }
  .jm{font-size:.72rem; color:var(--ink-soft); text-align:center;}
  .jm b{display:block; font-size:.78rem; color:var(--ink); margin-bottom:.15rem;}

  /* ---------------- accordion (자료실 설정 가이드) ---------------- */
  .accordion{border:1px solid var(--border); border-radius:var(--radius); margin:1.5rem 0; overflow:hidden; background:var(--surface);}
  .acc-item{border-bottom:1px solid var(--border);}
  .acc-item:last-child{border-bottom:none;}
  .acc-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--f-body);}
  .acc-head:hover{background:var(--surface-hover);}
  .acc-head .at{font-size:.94rem; font-weight:700; color:var(--ink);}
  .acc-head .as{font-size:.78rem; color:var(--ink-faint); margin-top:.15rem;}
  .acc-chev{color:var(--ink-faint); flex:0 0 auto; transition:transform .18s ease;}
  .acc-item.open .acc-chev{transform:rotate(180deg); color:var(--accent);}
  .acc-body{max-height:0; overflow:hidden; transition:max-height .22s ease;}
  .acc-item.open .acc-body{max-height:900px;}
  .acc-body-inner{padding:0 1.3rem 1.2rem;}

  .steps{display:flex; flex-direction:column; gap:0; counter-reset:step;}
  .step{display:flex; gap:.8rem; padding:.55rem 0;}
  .step::before{counter-increment:step; content:counter(step); flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--f-mono); font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:.05rem;}
  .step-text{font-size:.85rem; color:var(--ink-soft); padding-top:.1rem;}
  .step-text strong{color:var(--ink);}

  /* ---------------- margin calculator (ch03) ---------------- */
  .calc-box{border:1px solid var(--border); border-radius:var(--radius); margin:1.5rem 0; background:var(--surface); overflow:hidden;}
  .calc-in{padding:1.2rem 1.3rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;}
  .calc-in label{font-size:.86rem; font-weight:700; color:var(--ink); flex:0 0 auto;}
  .calc-in .calc-field{position:relative; flex:1 1 160px; min-width:140px;}
  .calc-in input{width:100%; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg); padding:.55rem 2.4rem .55rem .7rem; font-family:var(--f-mono); font-size:.92rem; color:var(--ink);}
  .calc-in input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .calc-in .calc-unit{position:absolute; right:.7rem; top:50%; transform:translateY(-50%); font-size:.8rem; color:var(--ink-faint);}
  .calc-out{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border);}
  @media (max-width:560px){ .calc-out{grid-template-columns:1fr;} }
  .calc-out div{background:var(--surface); padding:1rem 1.1rem;}
  .calc-out .co-label{font-size:.72rem; color:var(--ink-faint); margin-bottom:.3rem;}
  .calc-out .co-value{font-family:var(--f-mono); font-size:1.15rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;}
  .calc-out .co-value.muted{color:var(--ink-faint); font-weight:600;}

  .tbl-wrap{overflow-x:auto; margin:1.4rem 0; border:1px solid var(--border); border-radius:var(--radius-sm);}
  table{border-collapse:collapse; width:100%; font-size:.85rem; min-width:460px;}
  thead th{font-family:var(--f-mono); font-size:.67rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); text-align:left; padding:.62rem .9rem; border-bottom:1px solid var(--border-strong); background:var(--sidebar-bg); white-space:nowrap;}
  tbody td{padding:.6rem .9rem; border-bottom:1px solid var(--border); color:var(--ink-soft); vertical-align:top;}
  tbody tr:last-child td{border-bottom:none;}
  tbody td strong{color:var(--ink); font-weight:600;}
  td.num, th.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right;}

  .timeline{position:relative; margin:1.5rem 0; padding-left:1.8rem;}
  .timeline::before{content:""; position:absolute; left:.4rem; top:.3rem; bottom:.3rem; width:1px; background:var(--border-strong);}
  .t-item{position:relative; padding-bottom:1.5rem;}
  .t-item:last-child{padding-bottom:0;}
  .t-item::before{content:""; position:absolute; left:-1.8rem; top:.3rem; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--bg);}
  .t-item h3{font-size:.96rem; font-weight:700; margin-bottom:.28rem;}
  .t-item p{font-size:.88rem; margin-bottom:0;}

  .creator-byline{display:flex; align-items:center; gap:.85rem; margin:1.3rem 0 1.5rem;}
  .creator-avatar{width:42px; height:42px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.05rem; flex:0 0 auto;}
  .creator-name{font-weight:700; font-size:.94rem;}
  .creator-role{font-size:.77rem; color:var(--ink-faint);}

  .trust-list{display:flex; flex-direction:column; gap:.6rem; margin:1.4rem 0;}
  .trust-list li{display:flex; gap:.6rem; font-size:.9rem; color:var(--ink);}
  .trust-list li::before{content:"✓"; color:var(--accent); font-weight:700; flex:0 0 auto;}

  .pull-quote{margin:1.9rem 0; padding-left:1.3rem; border-left:2px solid var(--badge-b);}
  .pull-quote p{font-family:var(--f-display); font-size:1.12rem; font-weight:500; color:var(--ink); line-height:1.55; margin-bottom:0;}

  .chapter-nav{display:flex; justify-content:space-between; align-items:stretch; gap:1rem; margin-top:2.8rem; padding-top:1.8rem; border-top:1px solid var(--border);}
  .chapter-nav a{flex:1; display:flex; flex-direction:column; gap:.35rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.05rem 1.25rem; transition:border-color .15s, background .15s;}
  .chapter-nav a:hover{border-color:var(--border-strong); background:var(--surface-hover);}
  .chapter-nav a.next{text-align:right; align-items:flex-end;}
  .chapter-nav .cn-label{font-family:var(--f-mono); font-size:.67rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
  .chapter-nav .cn-title{font-size:.92rem; font-weight:600;}
  @media (max-width:560px){ .chapter-nav{flex-direction:column;} .chapter-nav a.next{text-align:left; align-items:flex-start;} }

  .chapter-check{margin-top:2.6rem; padding:1.1rem 1.3rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
  .chapter-check .cl-row{padding:0;}
  .chapter-check-note{font-size:.74rem; color:var(--ink-faint); margin-top:.5rem;}

  /* ---------------- worksheet (ch01) ---------------- */
  .worksheet{margin-top:2.6rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden;}
  .worksheet-head{padding:1rem 1.3rem; background:var(--sidebar-bg); border-bottom:1px solid var(--border);}
  .worksheet-head .at{font-size:.94rem; font-weight:700; color:var(--ink);}
  .worksheet-head .as{font-size:.78rem; color:var(--ink-faint); margin-top:.15rem;}
  .worksheet-body{display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1.2rem 1.3rem;}
  @media (max-width:560px){ .worksheet-body{grid-template-columns:1fr;} }
  .ws-field{display:flex; flex-direction:column; gap:.4rem;}
  .ws-field label{font-size:.8rem; font-weight:700; color:var(--ink-soft);}
  .ws-field input{border:1px solid var(--border-strong); border-radius:8px; background:var(--bg); padding:.6rem .8rem; font-family:var(--f-body); font-size:.88rem; color:var(--ink);}
  .ws-field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .worksheet-note{padding:.75rem 1.3rem; font-size:.74rem; color:var(--ink-faint); border-top:1px solid var(--border); background:var(--sidebar-bg);}

  /* ---------------- tools dashboard (/tools) ---------------- */
  .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.6rem;}
  @media (max-width:900px){ .kpi-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .kpi-grid{grid-template-columns:1fr;} }
  .kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.3rem; transition:transform .16s ease, box-shadow .16s ease;}
  .kpi-card:hover{transform:translateY(-2px); box-shadow:0 14px 28px -20px var(--accent-shadow);}
  .kpi-head{display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--ink-faint); margin-bottom:.6rem;}
  .kpi-value{font-family:var(--f-display); font-weight:700; font-size:1.6rem; color:var(--ink); font-variant-numeric:tabular-nums;}
  .kpi-delta{font-size:.78rem; margin-top:.4rem;}
  .kpi-delta.up{color:var(--badge-c);}
  .kpi-delta.down{color:var(--accent);}
  .kpi-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  @media (max-width:700px){ .kpi-grid.cols-3{grid-template-columns:1fr;} }

  /* ---------------- resource cards (자료실) ---------------- */
  .resource-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem;}
  @media (max-width:900px){ .resource-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .resource-grid{grid-template-columns:1fr;} }
  .resource-card{display:flex; flex-direction:column; gap:.6rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;}
  .resource-card:hover{transform:translateY(-2px); border-color:var(--border-strong); box-shadow:0 14px 28px -20px var(--accent-shadow);}
  .resource-card.soon{opacity:.7;}
  .rc-top{display:flex; align-items:center; justify-content:space-between;}
  .rc-icon{font-size:1.3rem;}
  .resource-card h3{font-size:.98rem; font-weight:700;}
  .resource-card p{font-size:.83rem; margin:0;}
  .rc-action{margin-top:auto; font-size:.84rem; font-weight:700; color:var(--accent-ink); align-self:flex-start; background:none; border:none; cursor:pointer; font-family:var(--f-body); padding:0;}
  .resource-card:hover .rc-action:not(.soon-tag){color:var(--accent);}
  .rc-action.soon-tag{font-family:var(--f-mono); font-size:.68rem; font-weight:700; color:var(--ink-faint); background:var(--sidebar-bg); padding:.35rem .75rem; border-radius:99px; cursor:default;}

  .tools-grid{display:grid; grid-template-columns:1fr 320px; gap:1.3rem; margin-top:1.6rem; align-items:start;}
  @media (max-width:960px){ .tools-grid{grid-template-columns:1fr;} }
  .tools-main{display:flex; flex-direction:column; gap:1.3rem;}
  .tools-row2{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;}
  @media (max-width:700px){ .tools-row2{grid-template-columns:1fr;} }
  .tools-side{display:flex; flex-direction:column; gap:1.3rem;}

  .areachart-wrap{display:flex; gap:.8rem; padding:1.2rem 1.3rem;}
  .areachart-yaxis{height:190px; padding:20px 0; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; font-family:var(--f-mono); font-size:.66rem; color:var(--ink-faint); text-align:right;}
  .areachart-plot{flex:1; min-width:0;}
  .areachart-plot svg{width:100%; height:190px; display:block;}
  .areachart-months{display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-faint); margin-top:.5rem; padding-left:2px;}

  .donut-wrap{display:flex; align-items:center; gap:1.4rem; padding:1.2rem 1.3rem; flex-wrap:wrap;}
  .donut-wrap svg{width:110px; height:110px; flex:0 0 auto;}
  .donut-legend{display:flex; flex-direction:column; gap:.5rem; flex:1; min-width:140px;}
  .donut-legend li{display:flex; align-items:center; gap:.55rem; font-size:.84rem; color:var(--ink-soft);}
  .donut-legend .dot{width:9px; height:9px; border-radius:2px; flex:0 0 auto;}
  .donut-legend b{margin-left:auto; color:var(--ink); font-family:var(--f-mono);}

  .roas-list{display:flex; flex-direction:column; gap:1rem; padding:1.2rem 1.3rem;}
  .roas-row{display:flex; align-items:center; gap:.8rem;}
  .roas-row .rr-label{font-size:.82rem; color:var(--ink-soft); flex:0 0 76px;}
  .roas-row .rr-bar{flex:1; height:8px; border-radius:99px; background:var(--border); overflow:hidden;}
  .roas-row .rr-fill{height:100%; border-radius:99px;}
  .roas-row .rr-value{font-family:var(--f-mono); font-size:.82rem; font-weight:700; color:var(--ink); flex:0 0 40px; text-align:right;}

  .order-list{display:flex; flex-direction:column;}
  .order-row{display:flex; align-items:center; gap:1rem; padding:.9rem 1.3rem; border-top:1px solid var(--border);}
  .order-row:first-child{border-top:none;}
  .order-name{font-size:.9rem; font-weight:700; color:var(--ink);}
  .order-meta{font-size:.76rem; color:var(--ink-faint); margin-top:.1rem;}
  .order-price{font-family:var(--f-mono); font-size:.86rem; color:var(--ink); flex:0 0 auto; white-space:nowrap; margin-left:auto;}
  .order-status{font-family:var(--f-mono); font-size:.68rem; font-weight:700; padding:.25rem .6rem; border-radius:99px; flex:0 0 auto; white-space:nowrap;}
  .order-status.shipping{background:var(--badge-b-bg); color:var(--badge-b);}
  .order-status.done{background:var(--badge-c-bg); color:var(--badge-c);}
  .order-status.pending{background:var(--badge-a-bg); color:var(--badge-a);}

  .gauge-wrap{position:relative; text-align:center; margin:.4rem 0 1.2rem;}
  .gauge-wrap svg{width:100%; max-width:190px;}
  .gauge-value{font-family:var(--f-display); font-weight:700; font-size:1.6rem; color:var(--ink); margin-top:-2.1rem;}
  .gauge-sub{font-size:.79rem; color:var(--ink-faint); margin-top:.2rem;}
  .gauge-tag{display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:700; padding:.3rem .8rem; border-radius:99px; margin-top:.6rem;}
  .gauge-tag.good{background:var(--badge-c-bg); color:var(--badge-c);}
  .gauge-tag.mid{background:var(--badge-b-bg); color:var(--badge-b);}
  .gauge-tag.low{background:var(--badge-a-bg); color:var(--badge-a);}

  .saved-calc-list{display:flex; flex-direction:column;}
  .saved-calc-row{display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.8rem 1.3rem; border-top:1px solid var(--border); font-size:.83rem;}
  .saved-calc-row:first-child{border-top:none;}
  .saved-calc-row .scr-date{font-size:.72rem; color:var(--ink-faint); margin-top:.1rem;}
  .saved-calc-clear{display:block; width:100%; text-align:center; font-size:.78rem; color:var(--ink-faint); padding:.7rem; border-top:1px solid var(--border); background:none; border-left:none; border-right:none; border-bottom:none; cursor:pointer; font-family:var(--f-body);}
  .saved-calc-clear:hover{color:var(--ink-soft);}

  /* ---------------- setup service (/services/setup) ---------------- */
  .setup-steps{display:flex; align-items:center; justify-content:center; gap:.6rem; margin:1.8rem 0 2.2rem;}
  .setup-step-item{display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--ink-faint); font-weight:600;}
  .setup-step-item .setup-step-num{width:24px; height:24px; border-radius:50%; background:var(--border); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.78rem; font-weight:700; flex:0 0 auto;}
  .setup-step-item.active{color:var(--ink);}
  .setup-step-item.active .setup-step-num{background:var(--accent); color:#fff;}
  .setup-step-item.done .setup-step-num{background:var(--badge-c); color:#fff;}
  .setup-step-line{width:36px; height:1px; background:var(--border-strong);}
  @media (max-width:480px){ .setup-step-label{display:none;} .setup-step-line{width:20px;} }

  .setup-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:.5rem;}
  @media (max-width:820px){ .setup-plans{grid-template-columns:1fr;} }
  .setup-plan{position:relative; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.4rem; cursor:pointer; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;}
  .setup-plan:hover{transform:translateY(-2px); border-color:var(--border-strong);}
  .setup-plan.selected{border-color:var(--accent); background:linear-gradient(180deg, var(--accent-soft), var(--surface) 55%); box-shadow:0 16px 32px -20px var(--accent-shadow);}
  .sp-tag{position:absolute; top:-11px; right:1.1rem; font-family:var(--f-mono); font-size:.66rem; font-weight:700; padding:.25rem .7rem; border-radius:99px;}
  .sp-tag.popular{background:var(--badge-c-bg); color:var(--badge-c);}
  .sp-tag.rec{background:var(--accent); color:#fff;}
  .sp-tag.full{background:var(--badge-b-bg); color:var(--badge-b);}
  .sp-icon{font-size:1.6rem; margin-bottom:.7rem;}
  .setup-plan h3{font-size:1.02rem; margin-bottom:.5rem;}
  .sp-price{font-family:var(--f-display); font-size:1.5rem; font-weight:700; color:var(--ink); margin-bottom:1rem;}
  .sp-features{display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem;}
  .sp-features li{font-size:.85rem; color:var(--ink-soft); padding-left:1.3rem; position:relative;}
  .sp-features li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700;}
  .sp-duration{font-size:.78rem; color:var(--ink-faint); margin-bottom:.6rem;}
  .sp-picked{display:none; font-size:.82rem; font-weight:700; color:var(--accent-ink);}
  .setup-plan.selected .sp-picked{display:block;}

  .setup-cta-bar{display:flex; width:100%; justify-content:center; margin-top:1.8rem; padding:1rem; font-size:.98rem;}

  .setup-summary{display:flex; align-items:center; gap:1rem; background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:1.8rem;}
  .setup-summary-icon{font-size:1.5rem;}
  .setup-summary-text{flex:1;}
  .setup-summary-name{font-weight:700; font-size:.96rem;}
  .setup-summary-meta{font-size:.82rem; color:var(--ink-faint); margin-top:.1rem;}
  .setup-summary-change{background:none; border:none; font-size:.82rem; font-weight:700; color:var(--accent-ink); cursor:pointer; font-family:var(--f-body);}

  .setup-form-title{font-weight:700; font-size:1rem; margin-bottom:1.1rem;}
  .setup-form-actions{display:flex; gap:.8rem;}
  .setup-form-actions .btn{flex:1; justify-content:center;}

  .setup-complete{text-align:center; padding:2rem 0;}
  .setup-complete-emoji{font-size:2.6rem; margin-bottom:1rem;}
  .setup-complete h2{font-size:1.4rem; margin-bottom:.8rem;}
  .setup-complete p{max-width:46ch; margin-inline:auto;}
  .setup-summary-box{max-width:340px; margin:1.6rem auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; text-align:left; display:flex; flex-direction:column; gap:.5rem;}
  .setup-summary-box div{display:flex; justify-content:space-between; font-size:.86rem;}
  .setup-summary-box span{color:var(--ink-faint);}
  .setup-summary-box b{color:var(--ink);}

  /* ---------------- coming soon ---------------- */
  .coming-soon{padding:4.4rem 0; text-align:center;}
  .coming-soon h1{font-size:clamp(1.3rem,2.8vw,1.7rem);}
  .coming-soon p{margin:.9rem auto 0;}
  .coming-soon .btn{margin-top:1.6rem;}

  /* ---------------- footer ---------------- */
  footer{border-top:1px solid var(--border); padding:1.8rem 0 .4rem; margin-top:2.4rem;}
  .footer-row{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.1rem; font-size:.82rem; color:var(--ink-soft);}
  .footer-row a:hover{color:var(--ink);}
  .footer-sep{color:var(--border-strong);}
  .footer-meta{font-size:.75rem; color:var(--ink-faint); margin-top:.8rem; line-height:1.8;}

  /* ---------------- resume banner (home) ---------------- */
  .resume-banner{display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.5rem 1.7rem; margin-bottom:1.4rem;}
  .rb-label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:.4rem;}
  .resume-banner h2{color:#fff; font-size:1.28rem; margin-bottom:.35rem;}
  .rb-sub{font-size:.85rem; color:rgba(255,255,255,.65); margin-bottom:.7rem;}
  .rb-bar{width:100%; max-width:320px; height:6px; border-radius:99px; background:rgba(255,255,255,.15); overflow:hidden;}
  .rb-bar-fill{height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .35s ease;}
  .rb-right{display:flex; align-items:center; gap:1.3rem; flex:0 0 auto;}
  .rb-ring{position:relative; width:64px; height:64px; flex:0 0 auto;}
  .rb-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
  .rb-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-weight:700; font-size:.86rem; color:#fff;}
  @media (max-width:640px){ .resume-banner{flex-direction:column; align-items:stretch;} .rb-right{justify-content:space-between;} }

  /* ---------------- home: highlighted service + preview list ---------------- */
  .service-highlight{position:relative; display:block; background:var(--accent-soft); border:1px solid var(--badge-a-bg); border-radius:var(--radius); padding:1.3rem 1.4rem; margin:1.1rem 1.3rem 0;}
  .sh-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;}
  .sh-badge{font-family:var(--f-mono); font-size:.66rem; font-weight:700; letter-spacing:.03em; color:#fff; background:var(--accent); padding:.22rem .6rem; border-radius:99px; flex:0 0 auto;}
  .sh-icon{font-size:1.4rem; margin-bottom:.5rem;}
  .service-highlight h3{font-size:1.02rem; font-weight:700; margin-bottom:.15rem;}
  .service-highlight p{font-size:.83rem; margin:0 0 .8rem;}
  .sh-link{font-size:.84rem; font-weight:700; color:var(--accent-ink); display:inline-block; margin-top:.55rem;}
  .service-highlight:hover .sh-link{color:var(--accent);}

  .guide-preview-list{display:flex; flex-direction:column; padding:.5rem 1.3rem 0;}
  .gp-row{display:flex; align-items:center; gap:.8rem; padding:.75rem 0; border-bottom:1px solid var(--border);}
  .gp-row:last-child{border-bottom:none;}
  .gp-check{width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--border); color:transparent;}
  .gp-check.done{background:var(--badge-c); color:#fff;}
  .gp-check svg{width:12px; height:12px;}
  .gp-icon{font-size:1.1rem; flex:0 0 auto;}
  .gp-text{flex:1; min-width:0;}
  .gp-text .gp-title{font-size:.9rem; font-weight:600; color:var(--ink);}
  .gp-text .gp-time{font-size:.74rem; color:var(--ink-faint); margin-top:.1rem;}
  .gp-see-all{display:block; text-align:center; padding:.9rem 1.3rem 1.2rem; font-size:.85rem; font-weight:600; color:var(--accent-ink);}
  .gp-see-all:hover{color:var(--accent);}

  /* ---------------- home: right column ---------------- */
  .quick-row-list{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
  .quick-row{display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--border); color:var(--ink);}
  .quick-row:last-child{border-bottom:none;}
  .quick-row:hover{background:var(--surface-hover);}
  .quick-row .qr-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1rem;}
  .quick-row .qr-text{flex:1; min-width:0;}
  .quick-row .qr-title{font-size:.88rem; font-weight:700;}
  .quick-row .qr-sub{font-size:.75rem; color:var(--ink-faint); margin-top:.05rem;}
  .quick-row .qr-chev{color:var(--ink-faint); flex:0 0 auto;}

  .tip-box{background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.1rem 1.2rem;}
  .tip-box .tb-label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:#ffd27a; margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem;}
  .tip-box p{color:rgba(255,255,255,.82); font-size:.85rem; margin:0;}

  .quick-access{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
  .qa-head{padding:.9rem 1.1rem .5rem; font-size:.78rem; font-weight:700; color:var(--ink-faint);}
  .qa-item{display:flex; align-items:center; gap:.7rem; padding:.7rem 1.1rem; color:var(--ink);}
  .qa-item:hover{background:var(--surface-hover);}
  .qa-item .qa-title{font-size:.86rem; font-weight:600;}
  .qa-item .qa-sub{font-size:.73rem; color:var(--ink-faint); margin-top:.05rem;}

  /* ---------------- 운영도구: page-level tabs ---------------- */
  .tools-tab-bar{display:flex; gap:.5rem; margin:1.4rem 0 1.6rem; flex-wrap:wrap;}
  .tools-tab-btn{display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.1rem; border-radius:99px; border:1px solid var(--border-strong); background:var(--surface); font-family:var(--f-body); font-size:.86rem; font-weight:700; color:var(--ink-soft); cursor:pointer; transition:background .15s, color .15s, border-color .15s;}
  .tools-tab-btn.active{background:var(--badge-b); color:#fff; border-color:var(--badge-b);}
  .tools-tab-btn:not(.active):hover{background:var(--surface-hover);}
  .tools-pane{display:none;}
  .tools-pane.active{display:block;}

  /* ---------------- 수익 시뮬레이터 ---------------- */
  .sim-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; align-items:start;}
  @media (max-width:860px){ .sim-grid{grid-template-columns:1fr;} }
  .sim-panel{padding:1.2rem 1.3rem;}
  .sim-out-list{display:flex; flex-direction:column;}
  .sim-out-row{display:flex; justify-content:space-between; align-items:center; padding:.7rem 1.3rem; border-bottom:1px solid var(--border); font-size:.86rem; color:var(--ink-soft);}
  .sim-out-row:last-child{border-bottom:none;}
  .sim-out-row b{font-family:var(--f-mono); color:var(--ink); font-variant-numeric:tabular-nums;}
  .sim-out-row.warn b{color:var(--accent);}
  .sim-result-box{margin:1rem 1.3rem 1.2rem; background:var(--badge-c-bg); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; text-align:center;}
  .sim-result-box .srl{font-size:.78rem; color:var(--badge-c); margin-bottom:.3rem;}
  .sim-result-box .srv{font-family:var(--f-display); font-weight:700; font-size:1.6rem; color:var(--badge-c);}
  .sim-result-box .srs{font-size:.78rem; color:var(--ink-soft); margin-top:.2rem;}
  .sim-roadmap{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem;}
  @media (max-width:700px){ .sim-roadmap{grid-template-columns:1fr;} }
  .sim-road-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem;}
  .sim-road-card .src-month{font-family:var(--f-mono); font-size:.72rem; color:var(--ink-faint); margin-bottom:.4rem;}
  .sim-road-card .src-goal{font-size:1.02rem; font-weight:700; margin-bottom:.3rem;}
  .sim-road-card .src-desc{font-size:.8rem; color:var(--ink-soft); margin-bottom:.6rem;}
  .sim-road-card .src-budget{font-family:var(--f-mono); font-size:.78rem; color:var(--accent-ink); background:var(--accent-soft); display:inline-block; padding:.2rem .55rem; border-radius:6px;}

  /* ---------------- 광고 기록 ---------------- */
  .adlog-head{display:flex; justify-content:space-between; align-items:center;}
  .adlog-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem;}
  @media (max-width:700px){ .adlog-summary{grid-template-columns:1fr;} }
  .adlog-sum-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem;}
  .adlog-sum-card .al-label{font-size:.76rem; color:var(--ink-faint); margin-bottom:.4rem;}
  .adlog-sum-card .al-value{font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--ink);}
  .adlog-empty{padding:2rem 1.3rem; text-align:center; color:var(--ink-faint); font-size:.86rem;}
  .adlog-channel{font-family:var(--f-mono); font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:5px; color:#fff;}
  .roas-good{color:var(--badge-c); font-weight:700;}
  .roas-mid{color:var(--badge-b); font-weight:700;}
  .roas-low{color:var(--accent); font-weight:700;}
  .adlog-del{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:.9rem; padding:.2rem;}
  .adlog-del:hover{color:var(--accent);}
  .adlog-form{display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1.2rem 1.3rem; border:1px solid var(--accent-soft); border-radius:var(--radius); background:var(--accent-soft); margin-bottom:1.3rem;}
  @media (max-width:640px){ .adlog-form{grid-template-columns:1fr;} }
  .adlog-channel-picker{display:flex; gap:.5rem; flex-wrap:wrap;}
  .adlog-chan-btn{padding:.5rem .9rem; border-radius:99px; border:1px solid var(--border-strong); background:var(--surface); font-family:var(--f-body); font-size:.82rem; font-weight:600; color:var(--ink-soft); cursor:pointer;}
  .adlog-chan-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
  .adlog-form-actions{grid-column:1/-1; display:flex; gap:.6rem;}