:root{
  --bg:#060609;--bg2:#0c0c14;--bg3:#11111e;
  --glass:rgba(255,255,255,.04);--glass2:rgba(255,255,255,.07);--glass3:rgba(255,255,255,.1);
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --text:#eeeef4;--text2:#7e809a;--text3:#44465a;
  --p:#6366f1;--p2:#818cf8;--p3:rgba(99,102,241,.15);
  --gold:#e8b84b;--gold2:rgba(232,184,75,.12);
  --green:#22c98a;--red:#f05070;--blue:#38b0ff;
  --grad:linear-gradient(135deg,#6366f1 0%,#a78bfa 100%);
  --grad-g:linear-gradient(135deg,#e8b84b,#f5d68a);
  --grad-card:linear-gradient(160deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 100%);
  --card:rgba(255,255,255,.06);
  --card-border:rgba(255,255,255,.1);
  --indigo:#818cf8;
  --shadow:0 2px 20px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5);
  --glow:0 0 30px rgba(99,102,241,.2);
  --sidebar:240px;
  --r:14px;--rlg:20px;--rsm:9px;
  /* Design Bible §21/§26 Foundation-Alignment: named motion tokens — durations
     unchanged from existing usage (150-220ms range), consolidated here so future
     rules reference one source instead of repeating literal values. No bounce/
     spring easing exists anywhere in this file (verified) and none should be added. */
  --motion-fast:150ms ease;
  --motion-standard:220ms ease;
  /* Atlas Redesign Phase 1 — Component System Foundation. Additive only: no
     existing literal values were mass-replaced, these are named tokens for
     new/redesigned rules going forward (Design Bible Typography Philosophy;
     UI Intelligence §2 "type carries hierarchy through role, not many sizes"). */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --fs-caption:11px;--fs-body:13px;--fs-heading:17px;
  /* Two legitimate, deliberate button-geometry families coexist by design
     (UI Intelligence §2 "geometry as a deliberate signal, not a default") —
     do not unify them into one shape:
     1) App-chrome actions (.btn-save, .btn-sec, .r-btn-*, .btn-danger, Settings/
        Dashboard/History buttons) use the --r/--rsm radius family.
     2) Hero-moment CTAs (.btn-hero-primary, .btn-price, .cv-gen-btn) and all
        Brand-Pack-scoped Studio buttons (.ts-btn, .sps-btn, .al-btn) use a
        100px pill — reserved for a single prominent action or the user's own
        brand content, never app chrome. */

  /* ══════════════════════════════════════════════════════════════════════
     Atlas Visual Redesign v2 — Phase R0: Design System Foundation.
     Namespaced "--a2-*" so it coexists with every existing --bg/--text/etc.
     token above without touching any screen that hasn't been re-skinned
     yet (Phases R1-R8 migrate one screen at a time). Light-mode-first, per
     the reference image — a deliberate reversal of the earlier dark-mode
     concept artifact, since the reference is unambiguously light. Neutrals
     carry a faint cool-slate bias toward the accent rather than pure grey;
     accent is a calm indigo-violet, same family as the existing --p but
     independently chosen, not inherited from it. Semantic color (success/
     warning/danger) is kept separate from the accent, per house convention.
     ══════════════════════════════════════════════════════════════════════ */
  --a2-bg:#f7f7f9;
  --a2-surface:#ffffff;
  --a2-surface-hover:#f2f2f6;
  --a2-border:rgba(20,22,30,.07);
  --a2-shadow-sm:0 1px 2px rgba(20,22,30,.04),0 1px 3px rgba(20,22,30,.05);
  --a2-shadow-md:0 6px 20px rgba(20,22,30,.07),0 2px 6px rgba(20,22,30,.04);
  --a2-shadow-lg:0 16px 40px rgba(20,22,30,.11);
  --a2-text:#16171c;
  --a2-text-muted:#6b6d78;
  --a2-text-faint:#9a9ca6;
  --a2-accent:#5b56e8;
  --a2-accent-hover:#4d47dd;
  --a2-accent-soft:rgba(91,86,232,.09);
  --a2-accent-contrast:#ffffff;
  --a2-success:#1a9d6c;--a2-success-soft:rgba(26,157,108,.1);
  --a2-warning:#b8790a;--a2-warning-soft:rgba(184,121,10,.1);
  --a2-danger:#d84559;--a2-danger-soft:rgba(216,69,89,.1);
  --a2-r-sm:10px;--a2-r:14px;--a2-r-lg:20px;
  --a2-fs-display:28px;
  /* Quick-action icon-chip palette — wayfinding color, distinct from the
     accent so the accent stays reserved for the single primary action per
     screen (Design Bible accent-scarcity; UI Intelligence §2). */
  --a2-chip-violet-bg:#efeafd;--a2-chip-violet-fg:#7c5cf0;
  --a2-chip-blue-bg:#e8f1fd;--a2-chip-blue-fg:#2f78bd;
  --a2-chip-green-bg:#e6f7ef;--a2-chip-green-fg:#1f9d6c;
  --a2-chip-amber-bg:#fdf3e2;--a2-chip-amber-fg:#b8790a;
}

/* Atlas Visual Redesign v2 — component primitives (additive, unused by any
   existing screen until its own re-skin phase lands). */
.a2-card{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r);box-shadow:var(--a2-shadow-sm);transition:box-shadow var(--motion-standard)}
.a2-card:hover{box-shadow:var(--a2-shadow-md)}
.a2-icon-chip{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.a2-icon-chip.violet{background:var(--a2-chip-violet-bg);color:var(--a2-chip-violet-fg)}
.a2-icon-chip.blue{background:var(--a2-chip-blue-bg);color:var(--a2-chip-blue-fg)}
.a2-icon-chip.green{background:var(--a2-chip-green-bg);color:var(--a2-chip-green-fg)}
.a2-icon-chip.amber{background:var(--a2-chip-amber-bg);color:var(--a2-chip-amber-fg)}

/* ══════════════════════════════════════════════════════════════════════
   ATLAS UI KIT v2 — the single reusable component library every Phase
   R1-R8 screen must consume (not invent screen-specific styles from).
   Still fully additive/inert: no existing selector is modified, and none
   of these classes are referenced by any live screen until that screen's
   own re-skin phase applies them. Namespaced "a2-" throughout.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- z-index scale (new — nothing used a shared scale before) ---- */
:root{--a2-z-dropdown:60;--a2-z-overlay:200;--a2-z-modal:210;--a2-z-toast:300}

/* ---- Buttons ---- */
.a2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:var(--fs-body);font-weight:600;padding:9px 16px;border-radius:var(--a2-r-sm);border:1px solid transparent;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),opacity var(--motion-fast);white-space:nowrap}
.a2-btn:focus-visible{outline:2px solid var(--a2-accent);outline-offset:2px}
.a2-btn-sm{padding:6px 12px;font-size:var(--fs-caption)}
.a2-btn-primary{background:var(--a2-accent);color:var(--a2-accent-contrast)}
.a2-btn-primary:hover{background:var(--a2-accent-hover)}
.a2-btn-secondary{background:var(--a2-surface);color:var(--a2-text);border-color:var(--a2-border);box-shadow:var(--a2-shadow-sm)}
.a2-btn-secondary:hover{background:var(--a2-surface-hover)}
.a2-btn-ghost{background:transparent;color:var(--a2-text-muted)}
.a2-btn-ghost:hover{background:var(--a2-surface-hover);color:var(--a2-text)}
.a2-btn-danger{background:var(--a2-danger-soft);color:var(--a2-danger)}
.a2-btn-danger:hover{background:var(--a2-danger);color:#fff}
.a2-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.a2-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--a2-r-sm);border:1px solid transparent;background:transparent;color:var(--a2-text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.a2-icon-btn:hover{background:var(--a2-surface-hover);color:var(--a2-text)}

/* ---- Cards ---- */
.a2-card-header{padding:18px 20px;border-bottom:1px solid var(--a2-border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.a2-card-body{padding:20px}
.a2-card-footer{padding:14px 20px;border-top:1px solid var(--a2-border)}
.a2-card.interactive{cursor:pointer}
.a2-card.interactive:hover{box-shadow:var(--a2-shadow-md);transform:translateY(-1px)}
.a2-card.selected{border-color:var(--a2-accent);box-shadow:0 0 0 1px var(--a2-accent)}

/* ---- Forms / Inputs ---- */
.a2-field{display:flex;flex-direction:column;gap:6px}
.a2-label{font-size:var(--fs-caption);font-weight:600;color:var(--a2-text-muted)}
.a2-input,.a2-textarea,.a2-select{font-family:inherit;font-size:var(--fs-body);color:var(--a2-text);background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);padding:10px 12px;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.a2-textarea{resize:vertical;min-height:96px;line-height:1.6}
.a2-input:focus,.a2-textarea:focus,.a2-select:focus{outline:none;border-color:var(--a2-accent);box-shadow:0 0 0 3px var(--a2-accent-soft)}
.a2-input::placeholder,.a2-textarea::placeholder{color:var(--a2-text-faint)}
.a2-hint{font-size:var(--fs-caption);color:var(--a2-text-faint)}
.a2-field.error .a2-input,.a2-field.error .a2-textarea,.a2-field.error .a2-select{border-color:var(--a2-danger)}
.a2-field.error .a2-hint{color:var(--a2-danger)}

/* ---- Dropdowns ---- */
.a2-dropdown{position:relative;display:inline-block}
.a2-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);box-shadow:var(--a2-shadow-lg);padding:6px;z-index:var(--a2-z-dropdown)}
.a2-dropdown-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:var(--fs-body);color:var(--a2-text);cursor:pointer;background:transparent;border:none;width:100%;text-align:left}
.a2-dropdown-item:hover{background:var(--a2-surface-hover)}
.a2-dropdown-item.danger{color:var(--a2-danger)}

/* ---- Tabs ---- */
.a2-tabs{display:flex;gap:4px;border-bottom:1px solid var(--a2-border)}
.a2-tab{padding:10px 4px;margin-right:20px;font-size:var(--fs-body);font-weight:600;color:var(--a2-text-faint);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color var(--motion-fast),border-color var(--motion-fast)}
.a2-tab:hover{color:var(--a2-text-muted)}
.a2-tab.active{color:var(--a2-accent);border-color:var(--a2-accent)}

/* ---- Modals / Dialogs ---- */
.a2-overlay{position:fixed;inset:0;background:rgba(20,22,30,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:var(--a2-z-overlay);padding:20px}
.a2-modal{background:var(--a2-surface);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-lg);max-width:440px;width:100%;z-index:var(--a2-z-modal)}
.a2-modal-header{padding:20px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.a2-modal-header h3{font-size:var(--fs-heading);font-weight:700;color:var(--a2-text)}
.a2-modal-body{padding:14px 24px 20px;font-size:var(--fs-body);color:var(--a2-text-muted);line-height:1.6}
.a2-modal-footer{padding:0 24px 24px;display:flex;gap:10px;justify-content:flex-end}

/* ---- Chips (small tag pills — distinct from the 40px icon-chip above) ---- */
.a2-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);font-weight:600;padding:4px 11px;border-radius:100px;background:var(--a2-surface-hover);color:var(--a2-text-muted)}
.a2-chip.accent{background:var(--a2-accent-soft);color:var(--a2-accent)}

/* ---- Badges ---- */
.a2-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.a2-badge-neutral{background:var(--a2-surface-hover);color:var(--a2-text-muted)}
.a2-badge-accent{background:var(--a2-accent-soft);color:var(--a2-accent)}
.a2-badge-success{background:var(--a2-success-soft);color:var(--a2-success)}
.a2-badge-warning{background:var(--a2-warning-soft);color:var(--a2-warning)}
.a2-badge-danger{background:var(--a2-danger-soft);color:var(--a2-danger)}

/* ---- Empty states (reuses the same information shape as the existing
   .empty-state component — Empty stays ONE canonical pattern app-wide,
   just re-skinned here for the new visual system) ---- */
.a2-empty{text-align:center;padding:56px 20px;color:var(--a2-text-muted)}
.a2-empty-icon{width:44px;height:44px;margin:0 auto 16px;color:var(--a2-text-faint)}
.a2-empty-title{font-size:var(--fs-heading);font-weight:700;color:var(--a2-text);margin-bottom:6px}
.a2-empty-sub{font-size:var(--fs-body);margin-bottom:20px}

/* ---- Loading states ---- */
.a2-spinner{width:16px;height:16px;border:2px solid var(--a2-border);border-top-color:var(--a2-accent);border-radius:50%;animation:a2-spin .7s linear infinite;flex-shrink:0}
@keyframes a2-spin{to{transform:rotate(360deg)}}
.a2-loading-inline{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);color:var(--a2-text-muted)}
.a2-skeleton{background:linear-gradient(90deg,var(--a2-surface-hover) 25%,var(--a2-border) 37%,var(--a2-surface-hover) 63%);background-size:400% 100%;border-radius:6px;animation:a2-shimmer 1.4s ease infinite}
@keyframes a2-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.a2-spinner,.a2-skeleton{animation:none}}

/* ---- Error / Success states ---- */
.a2-error-text{font-size:var(--fs-caption);color:var(--a2-danger)}
.a2-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--a2-r-sm);font-size:var(--fs-body)}
.a2-banner svg{flex-shrink:0;margin-top:1px}
.a2-banner-error{background:var(--a2-danger-soft);color:var(--a2-danger)}
.a2-banner-success{background:var(--a2-success-soft);color:var(--a2-success)}
.a2-banner-warning{background:var(--a2-warning-soft);color:var(--a2-warning)}
.a2-banner-info{background:var(--a2-accent-soft);color:var(--a2-accent)}

/* ---- Toasts ---- */
.a2-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--a2-r-sm);background:var(--a2-text);color:#fff;font-size:var(--fs-body);font-weight:600;box-shadow:var(--a2-shadow-lg);opacity:0;pointer-events:none;transition:opacity var(--motion-standard),transform var(--motion-standard);z-index:var(--a2-z-toast)}
.a2-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.a2-toast-success{background:var(--a2-success)}
.a2-toast-error{background:var(--a2-danger)}

/* ---- Progress ---- */
.a2-progress{height:4px;background:var(--a2-border);border-radius:100px;overflow:hidden}
.a2-progress-fill{height:100%;background:var(--a2-accent);border-radius:100px;transition:width var(--motion-standard)}
.a2-progress-circle{transform:rotate(-90deg)}
.a2-progress-circle .track{stroke:var(--a2-border)}
.a2-progress-circle .fill{stroke:var(--a2-accent);stroke-linecap:round;transition:stroke-dashoffset var(--motion-standard)}
.a2-steps{display:flex;align-items:center;gap:6px}
.a2-step-dot{width:8px;height:8px;border-radius:50%;background:var(--a2-border);transition:background var(--motion-fast)}
.a2-step-dot.done,.a2-step-dot.active{background:var(--a2-accent)}
.a2-step-dot.active{box-shadow:0 0 0 3px var(--a2-accent-soft)}

/* ---- Tables ---- */
.a2-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.a2-table th{text-align:left;font-size:var(--fs-caption);font-weight:700;color:var(--a2-text-faint);text-transform:uppercase;letter-spacing:.04em;padding:0 12px 10px;border-bottom:1px solid var(--a2-border)}
.a2-table td{padding:13px 12px;border-bottom:1px solid var(--a2-border);color:var(--a2-text)}
.a2-table tbody tr{transition:background var(--motion-fast)}
.a2-table tbody tr:hover{background:var(--a2-surface-hover)}
.a2-table tbody tr:last-child td{border-bottom:none}

/* ---- Navigation components ---- */
.a2-nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--a2-r-sm);font-size:var(--fs-body);font-weight:600;color:var(--a2-text-muted);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;transition:background var(--motion-fast),color var(--motion-fast)}
.a2-nav-item svg{flex-shrink:0}
.a2-nav-item:hover{background:var(--a2-surface-hover);color:var(--a2-text)}
.a2-nav-item.active{background:var(--a2-accent-soft);color:var(--a2-accent)}
.a2-nav-item:focus-visible{outline:2px solid var(--a2-accent);outline-offset:-2px}
.a2-tabbar{display:flex;align-items:center;justify-content:space-around;background:var(--a2-surface);border-top:1px solid var(--a2-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.a2-tabbar-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--a2-text-faint);background:none;border:none;padding:6px 10px;border-radius:10px;min-width:56px}
.a2-tabbar-item.active{color:var(--a2-accent)}
/* #mobile-tabbar: the live App Shell's bottom nav. Fixed + hidden by default;
   only becomes visible (and the .main-content bottom padding it needs) inside
   the ≤768px mobile media query below (Phase R1 mobile correction #8). */
#mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Pretendard',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font-family:inherit;cursor:pointer}
textarea{resize:vertical}

/* ─── PAGE SYSTEM ─── */
.page{display:none}.page.active{display:block}
#pg-auth.active{display:flex}

/* ════════════════════════════════
   LANDING
════════════════════════════════ */
#pg-landing{position:relative;z-index:60;overflow-x:hidden}
#pg-auth{position:relative;z-index:60}

/* NAV */
.lnav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:66px;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(6,6,9,.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.lnav-logo{display:flex;align-items:center;gap:10px}
.lnav-logo-icon{
  width:34px;height:34px;border-radius:9px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 4px 14px rgba(99,102,241,.45);
  flex-shrink:0;
}
.lnav-logo-text{font-size:13px;font-weight:800;color:var(--text);line-height:1.3;letter-spacing:-.2px}
.lnav-logo-text em{font-style:normal;color:var(--p2)}
.lnav-links{display:flex;align-items:center;gap:28px}
.lnav-link{font-size:13px;color:var(--text2);font-weight:500;transition:color .2s}
.lnav-link:hover{color:var(--text)}
.lnav-actions{display:flex;gap:8px}
.btn-nav-ghost{padding:8px 18px;background:transparent;border:1px solid var(--border2);border-radius:8px;font-size:13px;font-weight:600;color:var(--text2);transition:all .2s}
.btn-nav-ghost:hover{border-color:rgba(255,255,255,.25);color:var(--text);background:var(--glass)}
.btn-nav-cta{
  padding:9px 22px;background:var(--grad);border:none;border-radius:8px;
  font-size:13px;font-weight:700;color:#fff;
  box-shadow:0 4px 16px rgba(99,102,241,.4);
  transition:all .25s;
}
.btn-nav-cta:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 8px 24px rgba(99,102,241,.55)}

/* HERO */
.lhero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 24px 80px;text-align:center;
  position:relative;overflow:hidden;
}
.lhero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(99,102,241,.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 60%, rgba(167,139,250,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 10%, rgba(232,184,75,.06) 0%, transparent 60%);
}
.lhero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
}
.lhero-inner{position:relative;z-index:1;max-width:900px}
.lhero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);
  padding:8px 20px;border-radius:100px;
  font-size:12px;color:var(--p2);font-weight:600;
  margin-bottom:36px;letter-spacing:.2px;
}
.lhero-dot{width:6px;height:6px;background:var(--p);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.lhero-h1{
  font-family:'Noto Serif KR',serif;
  font-size:clamp(38px,6vw,72px);font-weight:900;
  line-height:1.1;margin-bottom:28px;
  word-break:keep-all;letter-spacing:-1.5px;
}
.lhero-h1 .accent{
  background:linear-gradient(135deg,#818cf8,#c4b5fd,#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lhero-sub{
  font-size:clamp(15px,2.2vw,20px);color:var(--text2);
  line-height:1.85;max-width:580px;margin:0 auto 52px;
  word-break:keep-all;font-weight:400;
}
.lhero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.btn-hero-primary{
  padding:17px 48px;background:var(--grad);border:none;border-radius:100px;
  font-size:16px;font-weight:800;color:#fff;letter-spacing:-.2px;
  box-shadow:0 8px 30px rgba(99,102,241,.5),inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .3s;
}
.btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(99,102,241,.65)}
.btn-hero-outline{
  padding:16px 44px;background:transparent;
  border:1.5px solid var(--border2);border-radius:100px;
  font-size:15px;font-weight:600;color:var(--text2);transition:all .3s;
}
.btn-hero-outline:hover{border-color:rgba(255,255,255,.3);color:var(--text);background:var(--glass)}
.lhero-note{font-size:12px;color:var(--text3);letter-spacing:.2px}

/* HERO STATS */
.lhero-stats{
  display:flex;gap:0;justify-content:center;flex-wrap:wrap;
  margin-top:72px;padding-top:48px;
  border-top:1px solid var(--border);
  position:relative;z-index:1;width:100%;max-width:640px;
}
.lstat{text-align:center;padding:0 40px;border-right:1px solid var(--border)}
.lstat:last-child{border-right:none}
.lstat-num{font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-1px;background:var(--grad-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lstat-label{font-size:12px;color:var(--text2);margin-top:6px;font-weight:500}

/* HOW IT WORKS */
.lsec{padding:110px 24px}
.lsec-inner{max-width:1080px;margin:0 auto}
.lsec-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--p);margin-bottom:16px;text-align:center}
.lsec-title{font-family:'Noto Serif KR',serif;font-size:clamp(28px,4vw,48px);font-weight:900;text-align:center;margin-bottom:16px;word-break:keep-all;letter-spacing:-.6px;line-height:1.2}
.lsec-sub{font-size:16px;color:var(--text2);text-align:center;margin-bottom:64px;word-break:keep-all;line-height:1.8}

/* STEPS */
.lsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;position:relative}
.lstep{
  background:var(--bg2);padding:44px 36px;position:relative;overflow:hidden;
  transition:all .35s;border:1px solid var(--border);
}
.lstep:first-child{border-radius:var(--rlg) 0 0 var(--rlg)}
.lstep:last-child{border-radius:0 var(--rlg) var(--rlg) 0}
.lstep:hover{background:var(--bg3);border-color:rgba(99,102,241,.25);z-index:1;transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.lstep-num{
  position:absolute;top:28px;right:28px;
  font-size:64px;font-weight:900;
  color:rgba(99,102,241,.06);line-height:1;
  font-family:'Noto Serif KR',serif;
}
.lstep-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--p3);border:1px solid rgba(99,102,241,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:22px;
}
.lstep-title{font-size:18px;font-weight:800;margin-bottom:12px;letter-spacing:-.3px}
.lstep-desc{font-size:14px;color:var(--text2);line-height:1.8}

/* FEATURES */
.lfeat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.lfeat{
  background:var(--bg2);padding:36px 28px;
  transition:all .3s;
}
.lfeat:hover{background:var(--bg3)}
.lfeat-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:18px;
  box-shadow:0 4px 14px rgba(99,102,241,.3);
}
.lfeat-title{font-size:15px;font-weight:800;margin-bottom:10px;letter-spacing:-.2px}
.lfeat-desc{font-size:13px;color:var(--text2);line-height:1.8}

/* PRICING */
.lprice-wrap{
  max-width:520px;margin:0 auto;
  background:var(--grad-card);
  border:1px solid rgba(99,102,241,.2);
  border-radius:var(--rlg);padding:48px 44px;
  text-align:left;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(99,102,241,.1),0 40px 80px rgba(0,0,0,.3);
}
.lprice-wrap::before{
  content:'';position:absolute;top:-100px;right:-100px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.1),transparent);
  pointer-events:none;
}
.lprice-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--p3);border:1px solid rgba(99,102,241,.25);
  padding:6px 16px;border-radius:100px;
  font-size:11px;font-weight:700;color:var(--p2);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:20px;
}
.lprice-name{font-size:13px;font-weight:700;color:var(--text2);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.lprice-amount{font-size:clamp(40px,6vw,64px);font-weight:900;letter-spacing:-2px;margin-bottom:8px;line-height:1}
.lprice-period{font-size:14px;color:var(--text3);margin-bottom:32px}
.lprice-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.lprice-features li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text2)}
.lprice-features li::before{content:'✓';color:var(--green);font-weight:800;font-size:13px;flex-shrink:0}
.btn-price{
  display:block;width:100%;padding:16px;
  background:var(--grad);border:none;border-radius:12px;
  font-size:15px;font-weight:800;color:#fff;text-align:center;
  box-shadow:0 8px 26px rgba(99,102,241,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:all .3s;letter-spacing:-.2px;
}
.btn-price:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 14px 36px rgba(99,102,241,.6)}

/* TESTIMONIALS */
.ltesti-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ltcard{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:30px;transition:all .3s;
}
.ltcard:hover{border-color:rgba(99,102,241,.2);transform:translateY(-3px)}
.lt-stars{font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:16px}
.lt-text{font-size:14px;color:var(--text);line-height:1.9;margin-bottom:20px;word-break:keep-all}
.lt-profile{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--border)}
.lt-av{width:40px;height:40px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 3px 10px rgba(99,102,241,.3)}
.lt-name{font-size:13px;font-weight:700}
.lt-role{font-size:11px;color:var(--text3);margin-top:2px}

/* CTA */
.lcta{
  padding:120px 24px;text-align:center;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-top:1px solid var(--border);
  position:relative;overflow:hidden;
}
.lcta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(99,102,241,.08),transparent);
  pointer-events:none;
}
.lcta-inner{position:relative;z-index:1}
.lcta-title{font-family:'Noto Serif KR',serif;font-size:clamp(30px,5vw,56px);font-weight:900;margin-bottom:20px;word-break:keep-all;letter-spacing:-.6px;line-height:1.15}
.lcta-sub{font-size:17px;color:var(--text2);margin-bottom:48px;line-height:1.8}

.lfooter{background:var(--bg);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text3);border-top:1px solid var(--border)}
.lfooter a{color:var(--text2);transition:color .2s}.lfooter a:hover{color:var(--text)}

/* ════════════════════════════════
   AUTH
════════════════════════════════ */
/* 2026-08-14: 사용자 지시로 로그인 화면을 나머지 앱 화면(Atlas Visual
   Redesign v2, --a2-* 라이트 SaaS 테마)과 통일했다. 이 화면만 옛 다크
   테마(--bg/--text/--grad 등, 랜딩 페이지 전용 토큰)에 남아 있어서 앱에
   들어온 뒤 보는 화면들과 톤이 어긋나 보였던 것 — 실제 원인이었다. */
#pg-auth{
  min-height:100vh;align-items:center;justify-content:center;
  background:var(--a2-bg);padding:24px;
  position:relative;overflow:hidden;
}
#pg-auth::before{
  content:'';position:absolute;
  width:800px;height:800px;border-radius:50%;
  background:radial-gradient(circle,var(--a2-accent-soft),transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.auth-box{
  background:var(--a2-surface);
  border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);
  padding:52px 48px;width:100%;max-width:440px;
  position:relative;z-index:1;
  box-shadow:var(--a2-shadow-lg);
}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:40px;justify-content:center}
.auth-logo-icon{width:40px;height:40px;background:var(--a2-accent);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 16px var(--a2-accent-soft)}
.auth-logo-text{font-size:14px;font-weight:800;color:var(--a2-text);letter-spacing:-.2px;line-height:1.3}
.auth-logo-text em{font-style:normal;color:var(--a2-accent)}
.auth-tabs{display:flex;gap:0;background:var(--a2-bg);border:1px solid var(--a2-border);border-radius:12px;padding:4px;margin-bottom:32px}
.auth-tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:700;color:var(--a2-text-muted);border-radius:9px;border:none;background:transparent;transition:all .25s;letter-spacing:-.1px}
.auth-tab.active{background:var(--a2-accent);color:#fff;box-shadow:0 4px 14px var(--a2-accent-soft)}
.auth-title{font-size:22px;font-weight:900;margin-bottom:8px;letter-spacing:-.4px;color:var(--a2-text)}
.auth-sub{font-size:13px;color:var(--a2-text-muted);margin-bottom:28px;line-height:1.7}
.auth-form{display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-label{font-size:12px;font-weight:600;color:var(--a2-text-muted);letter-spacing:.2px}
.form-input{
  padding:13px 16px;background:var(--a2-bg);
  border:1px solid var(--a2-border);border-radius:11px;
  font-size:14px;color:var(--a2-text);outline:none;transition:all .2s;
}
.form-input:focus{border-color:var(--a2-accent);background:var(--a2-surface);box-shadow:0 0 0 3px var(--a2-accent-soft)}
.form-input::placeholder{color:var(--a2-text-faint)}
.btn-auth{
  padding:14px;background:var(--a2-accent);border:none;border-radius:12px;
  font-size:15px;font-weight:800;color:#fff;
  box-shadow:0 6px 22px var(--a2-accent-soft);
  transition:all .25s;margin-top:4px;letter-spacing:-.2px;
}
.btn-auth:hover{background:var(--a2-accent-hover);transform:translateY(-1px);box-shadow:0 10px 30px var(--a2-accent-soft)}
.auth-err{background:var(--a2-danger-soft);border:1px solid rgba(216,69,89,.25);border-radius:9px;padding:10px 14px;font-size:12px;color:var(--a2-danger);display:none}
.auth-back{display:block;text-align:center;font-size:12px;color:var(--a2-text-faint);margin-top:22px}
.auth-back a{color:var(--a2-accent)}
/* 2026-08-14: 이용약관/개인정보처리방침/환불정책 문서(#pg-legal) 타이포그래피.
   body{background:var(--bg);color:var(--text)}가 이미 어두운 배경+밝은
   텍스트를 기본으로 깔아주므로(랜딩/로그인 화면과 같은 톤), 여기서는 제목
   위계와 문단 여백만 추가한다. */
.legal-doc h1{font-size:26px;font-weight:900;margin-bottom:24px;letter-spacing:-.4px}
.legal-doc h2{font-size:15px;font-weight:800;margin:28px 0 8px;color:var(--p2)}
.legal-doc p{font-size:13px;line-height:1.85;color:var(--text2);margin-bottom:4px}
.legal-doc table{margin:12px 0}
.plan-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.plan-chip{padding:6px 14px;border-radius:100px;font-size:11px;font-weight:700;border:1.5px solid transparent;transition:all .2s}
.plan-chip.free{background:var(--glass);color:var(--text2);border-color:var(--border)}.plan-chip.free.sel{border-color:var(--text2);color:var(--text)}
.plan-chip.starter{background:var(--p3);color:var(--p2);border-color:rgba(99,102,241,.3)}.plan-chip.starter.sel{border-color:var(--p)}
.plan-chip.pro{background:rgba(167,139,250,.1);color:#c4b5fd;border-color:rgba(167,139,250,.3)}.plan-chip.pro.sel{border-color:#c4b5fd}

/* ════════════════════════════════
   APP
════════════════════════════════ */
.app-layout{display:flex;width:100%;min-height:100vh;overflow:hidden}
.app-page{display:none}.app-page.active{display:block;min-height:100vh}

/* SIDEBAR — Atlas Visual Redesign v2, Phase R1: App Shell now consumes the
   .a2-* UI Kit (nav items = .a2-nav-item, icon buttons = .a2-icon-btn,
   primary CTA = .a2-btn/.a2-btn-primary) and the new light-mode-first
   tokens. .sb-item/.sb-icon retired below — no other file referenced them
   (confirmed) once index.html was switched to .a2-nav-item + data-icon
   spans (js/atlas-icons.js). .main-content's own background intentionally
   stays on the OLD dark tokens for now — that's every not-yet-re-skinned
   screen's ground, re-skinned one phase at a time (Phase R2 onward), so a
   light Shell next to dark content is an expected transitional state, not
   a bug (see Phase R1 report). */
.sidebar{
  width:var(--sidebar);
  background:var(--a2-surface);
  border-right:1px solid var(--a2-border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:100;transition:transform var(--motion-standard);
}
.sb-logo{
  padding:22px 20px 18px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--a2-border);
  text-decoration:none;
}
.sb-logo-icon{
  width:32px;height:32px;background:var(--a2-accent);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  flex-shrink:0;
}
.sb-logo-text{font-size:var(--fs-caption);font-weight:800;color:var(--a2-text);line-height:1.4;letter-spacing:-.1px}
.sb-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.sb-divider{height:1px;background:var(--a2-border);margin:8px 2px}
.sb-bottom{padding:14px 12px}
.sb-user{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:transparent;
  border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);
  transition:background var(--motion-fast);
}
.sb-user:hover{background:var(--a2-surface-hover)}
.sb-av{
  width:32px;height:32px;border-radius:9px;
  background:var(--a2-accent-soft);color:var(--a2-accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sb-user-name{font-size:var(--fs-body);font-weight:700;color:var(--a2-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1px;flex:1}
.sb-user-plan{font-size:10px;color:var(--a2-text-faint);margin-top:2px}
.plan-badge{display:inline-block;font-size:9px;font-weight:800;padding:2px 8px;border-radius:100px;letter-spacing:.5px;text-transform:uppercase}
.plan-free{background:var(--a2-surface-hover);color:var(--a2-text-muted)}
.plan-starter{background:var(--a2-accent-soft);color:var(--a2-accent)}
.plan-pro{background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(236,72,153,.14));color:#8b3fa8}
.plan-admin{background:linear-gradient(135deg,rgba(232,184,75,.22),rgba(232,184,75,.12));color:#946b0a}

/* MAIN CONTENT */
.main-content{margin-left:var(--sidebar);display:block;min-height:100vh;background:var(--bg);overflow-x:hidden;box-sizing:border-box}

/* TOPBAR */
.topbar{
  height:60px;background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--a2-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;position:sticky;top:0;z-index:50;
}
.topbar-title{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--a2-text)}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* CONTENT */
.content{padding:28px 32px;box-sizing:border-box;width:100%;overflow-x:hidden}
/* Atlas Visual Redesign v2: every primary screen has now flipped to the
   light a2-* ground (Dashboard R2, Converter R3/R4, History/Settings R6) —
   the transitional-seam pattern Phase R1 used for the shell is retired,
   all four destinations are unified. Container-level color reset is
   critical on each: body's default color:var(--text) (#eeeef4, near-white,
   meant for the old dark ground) would otherwise be inherited by any bare/
   unstyled text inside these now-light screens, rendering it invisible.
   This is the safety net; specific elements still set their own
   a2-text-muted/faint tones for hierarchy. */
#app-dashboard{background:var(--a2-bg);color:var(--a2-text);min-height:calc(100vh - 60px)}
#app-dashboard .sec-head-title{color:var(--a2-text)}
#app-dashboard .sec-head-sub{color:var(--a2-text-muted)}
#app-dashboard .link-btn{color:var(--a2-accent)}
#app-dashboard .link-btn:hover{color:var(--a2-accent-hover)}
#app-converter{background:var(--a2-bg);color:var(--a2-text);min-height:calc(100vh - 60px)}
#app-history,#app-settings{background:var(--a2-bg);color:var(--a2-text);min-height:calc(100vh - 60px)}
#app-history .sec-head-title{color:var(--a2-text)}
#app-history .sec-head-sub{color:var(--a2-text-muted)}

/* CARDS — Atlas Visual Redesign v2, Phase R6: light soft-shadow surface,
   same language as .dash-workcenter/.stat-card. Settings-exclusive now
   (confirmed via grep: the only remaining consumer). */
.card{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:28px}

/* Atlas Visual Redesign v2, Phase R2 — Dashboard work-center card: the
   primary "what am I working on / what should I do next" answer, built
   entirely from real draft state (atlasGetDraftSummary in application.js).
   Light soft-shadow surface, the dominant/first element on the screen (the
   subscription status line moved below it — see .dash-status-row). Now
   consumes the UI Kit's .a2-progress for the progress bar instead of the
   old .usage-bar-wrap (that stays reserved for Settings, unchanged). */
.dash-workcenter{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:28px;margin-bottom:20px}
.dash-workcenter-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.dash-workcenter-eyebrow{font-size:var(--fs-caption);font-weight:700;color:var(--a2-accent);letter-spacing:.5px;text-transform:uppercase}
.dash-workcenter-saved{font-size:var(--fs-caption);color:var(--a2-text-faint)}
.dash-workcenter-title{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--a2-text);margin-bottom:6px;word-break:keep-all}
.dash-workcenter-stage{font-size:var(--fs-body);color:var(--a2-text-muted);margin-bottom:18px}
.dash-workcenter-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dash-workcenter-empty .dash-workcenter-title{font-size:20px;margin-bottom:8px}

/* Quiet secondary account/status row (Phase R2 correction #8) — plain text
   row, deliberately not a card/banner, sits below the work-center. */
.dash-status-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--a2-text-muted);margin-bottom:22px;padding:0 2px;flex-wrap:wrap}
.dash-status-row svg{color:var(--a2-text-faint);flex-shrink:0}

/* Quick Actions — icon-chip cards using the UI Kit's .a2-icon-chip color
   variants as a wayfinding device (each real destination gets a distinct,
   consistent color), not a decorative accent. */
.dash-quickactions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:24px}
.dash-qa-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r);box-shadow:var(--a2-shadow-sm);cursor:pointer;transition:box-shadow var(--motion-standard),transform var(--motion-standard);text-align:left;font-family:inherit}
.dash-qa-card:hover{box-shadow:var(--a2-shadow-md);transform:translateY(-1px)}
.dash-qa-label{font-size:var(--fs-body);font-weight:700;color:var(--a2-text);word-break:keep-all}

/* STAT CARDS */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:28px}
.stat-card{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r);box-shadow:var(--a2-shadow-sm);padding:20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow var(--motion-standard)}
.stat-card:hover{box-shadow:var(--a2-shadow-md)}
.stat-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stat-val{font-size:30px;font-weight:800;color:var(--a2-text);letter-spacing:-.5px;line-height:1}
.stat-label{font-size:var(--fs-caption);color:var(--a2-text-muted);font-weight:600}
.stat-caption{font-size:11px;color:var(--a2-text-faint)}
.stat-spark{display:block;color:var(--a2-accent);flex-shrink:0}
.stat-spark-fill{fill:var(--a2-accent-soft)}

/* RECENT PROJECTS — Dashboard-only card (dashProjectCard() in
   application.js), distinct from History's .ebook-card (Phase R6 scope,
   still dark/unmigrated). Cover is the visual focus; a single primary
   "열기" action plus delete, matching Phase R2 correction #7. */
.dash-projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.dash-projcard{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r);overflow:hidden;box-shadow:var(--a2-shadow-sm);cursor:pointer;transition:box-shadow var(--motion-standard),transform var(--motion-standard)}
.dash-projcard:hover{box-shadow:var(--a2-shadow-md);transform:translateY(-2px)}
.dash-projcover{height:120px;display:flex;align-items:flex-end;padding:12px;color:#fff}
.dash-projcover-title{font-family:'Noto Serif KR',serif;font-size:13px;font-weight:700;line-height:1.4;word-break:keep-all}
.dash-projbody{padding:12px 14px 14px}
.dash-projmeta{font-size:11px;color:var(--a2-text-faint);margin-bottom:4px}
.dash-projtitle{font-size:13px;font-weight:700;color:var(--a2-text);margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-projactions{display:flex;gap:6px;align-items:center}
.dash-projactions .a2-btn{flex:1}
/* "새 전자책 만들기" ghost tile — a peer of real project cards, same
   shape/grid slot, calling the exact same startNewEbookProject() action
   used everywhere else (no new capability). */
.dash-proj-new{border:1.5px dashed var(--a2-border);background:transparent;border-radius:var(--a2-r);box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:190px;color:var(--a2-text-muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:border-color var(--motion-standard),color var(--motion-standard)}
.dash-proj-new:hover{border-color:var(--a2-accent);color:var(--a2-accent)}

/* EBOOK CARDS — Atlas Visual Redesign v2, Phase R6: History-exclusive
   (confirmed via grep: Dashboard uses its own separate .dash-projcard).
   Same soft-shadow card language as Dashboard's project cards. */
.ebook-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ebook-card{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r);overflow:hidden;box-shadow:var(--a2-shadow-sm);cursor:pointer;transition:box-shadow var(--motion-standard),transform var(--motion-standard)}
.ebook-card:hover{box-shadow:var(--a2-shadow-md);transform:translateY(-2px)}
.ebook-cover{height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;position:relative;overflow:hidden}
.ebook-cover-title{font-family:'Noto Serif KR',serif;font-size:13px;font-weight:700;color:#fff;position:relative;z-index:1;line-height:1.4;word-break:keep-all}
.ebook-cover-cat{font-size:10px;color:rgba(255,255,255,.65);position:relative;z-index:1;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:4px}
.ebook-body{padding:14px 16px}
.ebook-meta{font-size:11px;color:var(--a2-text-faint);margin-bottom:5px}
.ebook-title{font-size:13px;font-weight:700;color:var(--a2-text);margin-bottom:10px;word-break:keep-all;line-height:1.4}
.ebook-tags{display:flex;gap:5px;flex-wrap:wrap}
.ebook-tag{background:var(--a2-accent-soft);border:1px solid var(--a2-border);color:var(--a2-accent);font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px}
.ebook-actions{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--a2-border)}
.ebook-act-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px;background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:8px;font-size:11px;color:var(--a2-text-muted);font-weight:600;transition:all .2s}
.ebook-act-btn:hover{background:var(--a2-surface-hover);border-color:var(--a2-accent);color:var(--a2-accent)}

/* Atlas Redesign Phase 2 — State System Foundation (js/atlas-state-system.js).
   Centralized presentation for Loading/Error/Disabled/No-Results/Validation —
   Empty reuses .a2-empty (UI Kit), Processing reuses .atlas-state-badge here,
   Success reuses the toast below. Presentation only, no trigger logic.
   Atlas Visual Redesign v2, Phase R7: full re-skin to a2 tokens (every
   consumer — ai-planner.js/image-generation-ui.js — now lives on the
   already-migrated Converter screen; .atlas-state-disabled-warn/-info were
   already self-contained light-mode colors and are unchanged). */
.atlas-state-badge{font-size:11px;font-weight:700}
.atlas-state-noresults{font-size:12px;color:var(--a2-text-muted);display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;padding:var(--sp-2) 0}
.atlas-state-error{font-size:var(--fs-caption);color:var(--a2-danger);margin-top:var(--sp-1)}
.atlas-state-disabled{font-size:var(--fs-caption);font-weight:700;border-radius:6px;padding:6px 10px}
.atlas-state-disabled-warn{color:#991b1b;background:#fef2f2;border:1px solid #fca5a5}
.atlas-state-disabled-info{color:#166534;background:#f0fdf4;border:1px solid #86efac}
.atlas-state-loading{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--a2-text-muted)}
.atlas-state-spinner{width:12px;height:12px;border:2px solid var(--a2-border);border-top-color:var(--a2-accent);border-radius:50%;animation:atlas-state-spin .7s linear infinite}
@keyframes atlas-state-spin{to{transform:rotate(360deg)}}
.atlas-state-validation{font-size:var(--fs-caption);margin-top:var(--sp-1)}
.atlas-state-validation-warn{color:#b45309}
.atlas-state-validation-error{color:var(--a2-danger)}
.atlas-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.5;z-index:9999;opacity:0;transition:opacity var(--motion-standard),transform var(--motion-standard);pointer-events:none;max-width:min(440px,92vw);text-align:center;white-space:normal;overflow-wrap:break-word;word-break:keep-all;color:#fff}
.atlas-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.atlas-toast-success{background:rgba(16,185,129,.95)}
.atlas-toast-error{background:rgba(239,68,68,.95)}
.atlas-toast-info{background:rgba(99,102,241,.95)}

/* SEC HEADER — shared by Dashboard's recent-projects shelf (#app-dashboard
   override, Phase R2) and History's page header (#app-history override,
   Phase R6, below). */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sec-head-title{font-size:var(--fs-heading);font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.sec-head-sub{font-size:12px;color:var(--text2);margin-top:3px}
.link-btn{font-size:12px;color:var(--a2-accent);font-weight:600;background:none;border:none;transition:color .2s}
.link-btn:hover{color:var(--a2-accent-hover)}

/* SETTINGS — Atlas Visual Redesign v2, Phase R6: light card sections inside
   the re-skinned .card wrapper. .btn-save/.btn-sec/.btn-danger/.toggle
   (old app-chrome buttons/switch) retired — Settings/History now use the
   UI Kit's .a2-btn-primary/-secondary/-danger directly (confirmed zero
   remaining references before removal). */
.settings-section{margin-bottom:32px}
.settings-section:last-child{margin-bottom:0}
.settings-title{font-size:var(--fs-caption);font-weight:800;margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--a2-border);letter-spacing:1px;color:var(--a2-text-muted);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--a2-border);gap:16px;flex-wrap:wrap}
.settings-row:last-child{border-bottom:none;padding-bottom:0}
.settings-label{font-size:var(--fs-body);font-weight:600;color:var(--a2-text);letter-spacing:-.1px}
.settings-desc{font-size:12px;color:var(--a2-text-muted);margin-top:3px;line-height:1.6}
.settings-input{flex:1;min-width:200px;padding:11px 14px;background:var(--a2-bg);border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);font-size:13px;color:var(--a2-text);outline:none;transition:all .2s}
.settings-input:focus{border-color:var(--a2-accent);background:var(--a2-surface);box-shadow:0 0 0 3px var(--a2-accent-soft)}
.settings-input:read-only{opacity:.6;cursor:not-allowed}

/* CONVERTER — Atlas Visual Redesign v2, Phase R3: Step 1 re-skinned to the
   light a2-* system. cv-topic-input/-label/cv-url-input/-textarea retired
   (migrated to a2-input/a2-label/a2-textarea directly in index.html —
   confirmed zero remaining references before removal). */
/* Atlas Visual Redesign v2, Phase R10 — Ebook Generation Workspace: widened
   from the old 800px cap so the workspace uses the desktop canvas like a
   real working surface instead of a centered narrow form (confirmed via
   screenshot audit: ~45% dead gray space on both sides at 1440px). Text-
   heavy panels (Step 1 forms, Title Studio edit fields) still constrain
   their own line-length via .cv-topic-wrap/.ts-edit, so widening the outer
   wrap doesn't hurt readability — it gives 2-column layouts (Step 3/4) room
   to exist. */
.converter-wrap{max-width:1120px;width:100%;container-type:inline-size}
.cv-limit-warn{background:var(--a2-warning-soft);border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);padding:12px 16px;font-size:13px;color:var(--a2-warning);margin-bottom:16px;display:none}
.input-mode-badge{display:inline-flex;align-items:center;gap:6px;background:var(--a2-success-soft);border:1px solid var(--a2-border);color:var(--a2-success);font-size:11px;font-weight:700;padding:5px 14px;border-radius:100px;margin-bottom:16px}
.input-tabs{display:flex;gap:0;background:var(--a2-bg);border:1px solid var(--a2-border);border-radius:12px;padding:4px;margin-bottom:22px}
.input-tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:700;color:var(--a2-text-muted);border-radius:9px;border:none;background:transparent;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:-.1px;font-family:inherit}
.input-tab svg{width:14px;height:14px}
.input-tab.active{background:var(--a2-accent);color:#fff;box-shadow:var(--a2-shadow-sm)}
.input-panel{display:none}.input-panel.active{display:block}
.cv-upload-area{
  border:2px dashed var(--a2-border);border-radius:var(--a2-r);
  background:var(--a2-bg);padding:56px 28px;text-align:center;
  transition:all .3s;margin-bottom:20px;position:relative;overflow:hidden;
}
.cv-upload-area:hover,.cv-upload-area.drag{border-color:var(--a2-accent);background:var(--a2-accent-soft)}
.cv-upload-area.has-file{border-color:var(--a2-accent);background:var(--a2-accent-soft)}
.cv-upload-icon{margin-bottom:16px;display:flex;justify-content:center;color:var(--a2-accent)}
.cv-upload-title{font-size:17px;font-weight:700;color:var(--a2-text);margin-bottom:8px;letter-spacing:-.2px}
.cv-upload-sub{font-size:13px;color:var(--a2-text-muted);line-height:1.7}
.cv-file-chip{display:inline-flex;align-items:center;gap:8px;background:var(--a2-accent-soft);border:1px solid var(--a2-border);padding:9px 18px;border-radius:10px;font-size:13px;color:var(--a2-accent);margin-top:12px;max-width:100%;word-break:break-all}
.cv-file-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cv-ftype{background:var(--a2-surface-hover);border:1px solid var(--a2-border);color:var(--a2-text-muted);font-size:11px;padding:4px 11px;border-radius:100px}
.cv-topic-wrap{display:flex;flex-direction:column;gap:14px}
.cv-topic-row{display:flex;flex-direction:column;gap:7px}
.url-preview{background:var(--a2-bg);border:1px solid var(--a2-border);border-radius:10px;padding:12px 16px;font-size:12px;color:var(--a2-text-muted);line-height:1.7;display:none;margin-top:8px;max-height:120px;overflow-y:auto;white-space:pre-wrap}
.url-preview.show{display:block}
.topic-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.topic-ex{background:var(--a2-accent-soft);border:1px solid var(--a2-border);color:var(--a2-accent);font-size:11px;font-weight:600;padding:5px 13px;border-radius:100px;transition:background var(--motion-fast)}
.topic-ex:hover{background:var(--a2-surface-hover)}
.cv-gen-btn{
  width:auto;max-width:400px;padding:17px 48px;background:var(--a2-accent);border:none;border-radius:100px;
  font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px;
  box-shadow:var(--a2-shadow-md);
  transition:all .3s;display:block;margin:0 auto;font-family:inherit;
}
.cv-gen-btn:hover:not(:disabled){background:var(--a2-accent-hover);transform:translateY(-2px);box-shadow:var(--a2-shadow-lg)}
.cv-gen-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* PROCESS */
/* Atlas Visual Redesign v2, Phase R4: generation-progress screen re-skinned
   to the light a2-* system — the circular + linear progress bars now use
   the UI Kit's .a2-progress-circle/.a2-progress primitives directly instead
   of a bespoke inline SVG gradient. */
.cv-process{padding:40px 20px}
.cv-process-card{max-width:520px;margin:0 auto;text-align:center;background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:32px 28px}
.cv-process-pct{font-size:26px;font-weight:800;color:var(--a2-text);line-height:1}
.cv-process-pct-label{font-size:11px;color:var(--a2-text-faint);margin-top:3px}
.cv-process-title{font-size:18px;font-weight:800;margin-bottom:4px;color:var(--a2-text)}
.cv-process-sub{font-size:13px;color:var(--a2-text-muted);margin-bottom:20px}
.cv-process-fun{margin-top:18px;font-size:12px;font-weight:600;min-height:20px}
.cv-process-saved{margin-top:10px;font-size:11px;color:var(--a2-success);opacity:0;transition:opacity .4s ease}
.cv-psteps{display:flex;flex-direction:column;gap:8px;max-width:380px;margin:24px auto 0}
.cv-pstep{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--a2-bg);border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);font-size:13px;color:var(--a2-text-muted);transition:all .4s;letter-spacing:-.1px}
.cv-pstep svg{flex-shrink:0}
.cv-pstep-dot{width:6px;height:6px;border-radius:50%;background:var(--a2-border);flex-shrink:0}
.cv-pstep-spin{display:inline-flex;color:var(--a2-accent)}
.cv-pstep-spin svg{animation:atlas-state-spin 1.1s linear infinite}
.cv-pstep.active{color:var(--a2-accent);border-color:var(--a2-accent-soft);background:var(--a2-accent-soft)}
.cv-pstep.done{color:var(--a2-success);border-color:var(--a2-success-soft);background:var(--a2-success-soft)}
.cv-pstep.failed{color:var(--a2-danger);border-color:var(--a2-danger-soft);background:var(--a2-danger-soft)}

/* RESULT ACTIONS — Atlas Visual Redesign v2, Phase R4: .r-btn/.r-btn-p/-w/-e/-g
   fully retired (confirmed zero remaining call sites) in favor of the UI
   Kit's .a2-btn/.a2-btn-primary/.a2-btn-secondary, used directly on every
   button in Steps 3-4. .result-actions itself stays — still the real
   flex-row wrapper class for these action rows. */
.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* EBOOK PREVIEW WRAP */
/* Atlas Visual Redesign v2, Phase R4: outer preview canvas (the frame AROUND
   the actual ebook page content) re-skinned to a light neutral canvas,
   matching the rest of the redesigned Converter. This does not touch the
   ebook page content itself (#cv-edoc's own typography/colors are the real
   exported product — Preview==Export stays untouched, Design Bible §invariant). */
/* 2026-08-13: 사용자 리포트(PDF 저장본 확인) — 표지뿐 아니라 서문/목차/서론
   같은 일반 본문 페이지까지도 전부 오른쪽이 잘려 나왔다(이전에는 큰 제목이
   있는 페이지만 그런 줄 알았는데, 실제로는 모든 페이지가 같은 비율로
   잘렸다). 원인 재확인: .pg(전자책 한 페이지)는 지금까지 폭을 스스로
   정하지 않고 부모(.ebook-preview-wrap)가 넓은 만큼 그대로 늘어나는
   구조였다 — 화면이 넓은 모니터에서는 책 페이지 하나가 실제로 매우
   넓어진다는 뜻이다. html2canvas는 캡처 시점의 뷰포트/캔버스 크기에 따라
   이렇게 비정형적으로 넓은 요소를 정확히 다 담지 못하고 오른쪽을 잘라내는
   경우가 있다(브라우저/캔버스 크기 제약과 얽힌 문제로 실제 host 환경마다
   재현 여부가 다르다). 화면 폭이 얼마든 항상 같은, 적당한 "책 페이지" 폭
   으로 고정하면 이 문제 자체가 원천적으로 사라진다(어떤 모니터에서도 항상
   같은 폭을 캡처하므로) — 부수적으로 아주 넓은 모니터에서 전자책 페이지가
   과도하게 늘어나 읽기 불편하던 것도 함께 개선된다. */
.ebook-preview-wrap{background:var(--a2-bg);border-radius:var(--a2-r-lg);overflow:hidden;padding:20px;border:1px solid var(--a2-border);max-width:860px;margin:0 auto}

/* 2026-08-12: 전자책 미리보기 맨 위/맨 아래 이동 버튼. position:fixed라 DOM상
   위치와 무관하게 항상 화면 우측 하단에 떠 있고, #cv-edoc(Export 캡처 대상)
   바깥의 형제 요소라 PDF 저장에는 전혀 영향을 주지 않는다. 표시 여부는
   js/application.js의 IntersectionObserver가 제어(미리보기가 실제로 화면에
   보일 때만 나타남). */
.cv-scroll-fab{position:fixed;right:28px;bottom:28px;z-index:40;display:flex;flex-direction:column;gap:8px}
.cv-scroll-fab-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--a2-border);background:var(--a2-surface);color:var(--a2-text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--a2-shadow-lg);transition:background .18s,transform .18s}
.cv-scroll-fab-btn:hover{background:var(--a2-accent-soft);color:var(--a2-accent);transform:translateY(-2px)}

/* 2026-08-10: 완성 화면에서 전자책 내용을 직접 수정하는 기능(js/application.js
   atlasToggleEbookEditMode). 편집 모드일 때만 지정된 자유 서술형 필드
   ([data-atlas-field], contentEditable=true)에 점선 아웃라인을 준다 — 표/
   체크리스트/프레임워크처럼 구조화된 박스는 편집 대상이 아니므로 이 표시가
   붙지 않는다(그대로 읽기 전용). */
#cv-edoc.atlas-edit-mode [data-atlas-field]{outline:1.5px dashed rgba(99,102,241,.4);outline-offset:3px;border-radius:4px;cursor:text}
#cv-edoc.atlas-edit-mode [data-atlas-field]:hover{outline-color:rgba(99,102,241,.7);background:rgba(99,102,241,.03)}

/* 2026-08-12: 편집모드에서만 보이는 대제목/소제목 글씨크기 A-/A+ 컨트롤
   (표지 .cvr, 챕터 오프너 .chop 공통). [data-atlas-field] 바깥의 형제
   요소라 contentEditable 저장 텍스트에 섞이지 않는다. */
.atlas-fontsize-ctl{display:none;align-items:center;gap:6px;margin-top:14px;flex-wrap:wrap}
#cv-edoc.atlas-edit-mode .atlas-fontsize-ctl{display:flex}
.afc-lbl{font-size:10px;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.5px;margin-right:2px}
.afc-lbl:not(:first-child){margin-left:8px}
.afc-btn{width:26px;height:26px;border-radius:6px;border:1px solid rgba(232,184,75,.4);background:rgba(232,184,75,.08);color:var(--gold);font-size:12px;font-weight:800;cursor:pointer;line-height:1}
.afc-btn:hover{background:rgba(232,184,75,.18)}

/* PROMPT BOX — single authoritative definition now lives with the rest of
   the ebook page CSS below (this dark-glass variant was permanently
   overridden by the later light-green rule and was dead code). */

/* EDITOR TOOLBAR */
#cv-editor-toolbar,#cv-sp-toolbar{display:none;flex-wrap:wrap;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:14px;align-items:center}
[contenteditable]:focus{outline:2px solid rgba(99,102,241,.5)!important;outline-offset:2px;border-radius:4px}

/* SIDEBAR OVERLAY */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:99;backdrop-filter:blur(4px)}
.sb-overlay.show{display:block}

/* MISC */
.cv-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.cv-option{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--rsm);padding:14px;display:flex;align-items:center;gap:12px;transition:all .2s}
.cv-option:hover{border-color:var(--border2)}
.cv-option-icon{font-size:24px;flex-shrink:0}
.cv-option-title{font-size:13px;font-weight:700;letter-spacing:-.1px}
.cv-option-desc{font-size:11px;color:var(--text2);margin-top:2px}

/* ─── EBOOK PAGE CSS — Premium Ebook Output Design (Phase 2) ───
   The generated ebook itself, not Atlas app chrome — Design Bible/Editorial
   Intelligence-governed, separate visual system from .a2-*. Icons come
   from AtlasIcons.svg() called directly in renderers.js (no emoji anywhere
   in real ebook content — this is what a paying customer reads/exports).
   Word (.docx) export is a wholly separate OOXML builder (application.js)
   and is not affected by this CSS — only the HTML preview (#cv-edoc). */
.pg{background:#fff;color:#1a1a2e;border-radius:12px;overflow:hidden;box-shadow:0 10px 34px rgba(15,15,35,.10);position:relative;margin-bottom:28px}
/* 2026-08-12: 사용자 요청 — 글씨체를 바꿀 수 있게. 이미 로드된 웹폰트
   중에서 고르며(index.html, 새 폰트 로딩 없음), js/application.js
   atlasSetEbookFont()가 이 커스텀 프로퍼티만 바꾼다 — 전자책 안의 모든
   텍스트가 이 변수를 상속해서 따라간다(.cht만 예외적으로 폰트를 고정하고
   있었어서 위에서 같이 바꿨다). */
#cv-edoc{font-family:var(--ebook-font,'Pretendard'),sans-serif}
.cv-font-btn-active{border-color:var(--a2-accent)!important;background:var(--a2-accent-soft)!important;color:var(--a2-accent)!important}
/* 2026-08-10: 사용자가 첨부한 참고 전자책(다크 네이비 + 골드 프리미엄
   에디토리얼 스타일)을 모방 — 표지/챕터 오프너를 매번 랜덤 그라디언트가
   아니라 이 하나의 고정 아이덴티티로 통일한다. 왼쪽 정렬 + 테두리 박스 안
   큰 골드 제목이라는 참고 PDF의 실제 레이아웃을 그대로 따른다(참고 PDF의
   자체 브랜딩/홍보 링크는 가져오지 않음). */
/* 2026-08-12: 중앙 워터마크 오브젝트(반짝임 아이콘 → 월계관 → 책 모양,
   전부 다시 바꿔달라는 요청을 받음)를 전부 빼고, 사용자가 최종적으로 고른
   방향대로 "오브젝트 없이 배경 장식만 더 풍부하게"로 정리했다 — 새 이미지
   자산/AI 생성 없이 순수 CSS 그라디언트/텍스처 레이어만 쌓는다(PDF는 이
   화면을 그대로 캡처하므로 Preview==Export가 자동 유지, 비용 없음). 위에서
   부터: 두 방향으로 교차하는 대각선 헤어라인(마름모 격자 텍스처) → 흩뿌린
   금색 점 7개(별자리 느낌) → 와인/보라 보조 글로우 → 우상단 메인 골드 글로우
   → 좌하단 보조 글로우 → 상단 비네트 → 와인 톤이 섞인 다색 베이스
   그라디언트. */
.cvr{min-height:640px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;background:repeating-linear-gradient(135deg,rgba(232,184,75,.035) 0px,rgba(232,184,75,.035) 1px,transparent 1px,transparent 28px),repeating-linear-gradient(45deg,rgba(232,184,75,.025) 0px,rgba(232,184,75,.025) 1px,transparent 1px,transparent 28px),radial-gradient(circle 3px at 18% 18%,rgba(232,184,75,.55),transparent 100%),radial-gradient(circle 2px at 76% 68%,rgba(232,184,75,.4),transparent 100%),radial-gradient(circle 2.5px at 42% 82%,rgba(232,184,75,.35),transparent 100%),radial-gradient(circle 1.8px at 60% 30%,rgba(232,184,75,.4),transparent 100%),radial-gradient(circle 2px at 30% 55%,rgba(232,184,75,.3),transparent 100%),radial-gradient(circle 2px at 90% 40%,rgba(232,184,75,.35),transparent 100%),radial-gradient(circle 1.6px at 55% 65%,rgba(232,184,75,.3),transparent 100%),radial-gradient(ellipse 420px 340px at 20% 90%,rgba(139,92,246,.12),transparent 65%),radial-gradient(ellipse 380px 320px at 60% 96%,rgba(157,42,90,.13),transparent 62%),radial-gradient(ellipse 620px 460px at 88% 12%,rgba(232,184,75,.19),transparent 62%),radial-gradient(ellipse 500px 420px at 6% 92%,rgba(232,184,75,.08),transparent 60%),linear-gradient(to bottom,rgba(0,0,0,.14),transparent 30%),linear-gradient(165deg,#1c1732 0%,#2a1c3a 55%,#241d40 100%);padding:64px 52px;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* 2026-08-12: 표지/챕터 오프너를 좀 더 고급스럽게 — 얇은 골드 코너 프레임.
   2026-08-12 추가 수정: 사용자 요청으로 모서리 기역자(ㄱ) 프레임 굵기를
   1px→3px로 더 굵게. */
.cvr::before,.cvr::after,.chop::before,.chop::after{content:'';position:absolute;width:34px;height:34px;border:3px solid rgba(232,184,75,.5);pointer-events:none}
.cvr::before{top:26px;left:26px;border-right:0;border-bottom:0}
.cvr::after{bottom:26px;right:26px;border-left:0;border-top:0}
.chop::before{top:22px;left:22px;border-right:0;border-bottom:0}
.chop::after{bottom:22px;right:22px;border-left:0;border-top:0}
.ccat{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:28px}
.ctit-box{border:1px solid rgba(232,184,75,.4);border-radius:4px;padding:30px 34px;margin-bottom:22px;max-width:100%;box-sizing:border-box}
.ctit{font-size:clamp(30px,4.8vw,48px);font-weight:800;color:var(--gold);line-height:1.3;letter-spacing:-.4px;word-break:keep-all}
/* 2026-08-12: 제목이 "대제목 - 소제목"으로 나뉜 경우의 두 칸 구조. 대제목(.ctit)은
   더 크게, 소제목(.ctit-sub2)은 더 작게 — 사용자 요청. */
.ctit-split{display:block}
.ctit-split .ctit{margin-bottom:10px}
.ctit-sub2{font-size:clamp(18px,2.6vw,26px);font-weight:600;color:rgba(232,184,75,.72);line-height:1.4;letter-spacing:-.2px;word-break:keep-all}
/* 2026-08-12: 사용자 요청으로 부제 글씨를 더 크게(14px→18px). */
.csub{font-size:18px;color:rgba(255,255,255,.6);line-height:1.7;max-width:480px;margin-bottom:44px}
.cvr-foot{display:flex;flex-direction:column;gap:4px}
.cyr{font-size:11px;color:rgba(255,255,255,.32)}
.cpg{background:#fafaf9;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px}
.cinn{border-top:1px solid #e2e8f0;padding-top:16px}
.clbl{font-size:10px;color:#94a3b8;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.ctxt{font-size:11px;color:#94a3b8;line-height:1.9}.ctxt p{margin-bottom:6px}.ctxt strong{color:#64748b}
.inn{padding:44px}
.ey{display:flex;align-items:center;gap:7px;font-size:10px;color:#6366f1;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.ey svg{width:13px;height:13px}
.sh{font-size:25px;font-weight:800;color:#1a1a2e;margin-bottom:24px;line-height:1.3;letter-spacing:-.3px}
/* 목차 — 참고 전자책처럼 챕터명과 페이지 번호를 점선 리더로 연결한다.
   페이지 번호(.tpg)는 renderCvEbook()이 실제 페이지 순서를 미리 계산해
   넣은 값이다(지어낸 숫자 아님). */
.ti{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid #f1f5f9}
.tn{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#6366f1;font-weight:800;letter-spacing:.4px;flex-shrink:0}
.tn svg{width:12px;height:12px;flex-shrink:0}
.tt{font-size:14.5px;color:#1a1a2e;font-weight:600;line-height:1.4;flex-shrink:0}
.tdots{flex:1;border-bottom:1px dotted #cbd5e1;margin:0 2px;align-self:center}
.tpg{font-size:13px;color:#1a1a2e;font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0}
/* V3 Phase 1B: chapter content now opens with a running header (this used
   to be the whole "chapter opener" — now the opener is its own page, see
   .chop below, and this block is the continuation header atop the body
   page, echoing the reference book's own "running header on the
   continuation page, big statement only on the opener" convention). */
.cb{margin-bottom:22px}
.cp{display:flex;align-items:center;gap:9px;font-size:11px;color:#6366f1;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:4px}
.cp svg{width:14px;height:14px}
.cl{font-size:11px;color:#94a3b8;font-weight:600;letter-spacing:.6px}
.cht{font-family:var(--ebook-font,'Pretendard'),sans-serif;font-size:30px;font-weight:700;color:#1a1a2e;line-height:1.28;margin-top:10px;padding-bottom:18px;border-bottom:2px solid #eef0fb;letter-spacing:-.4px}
.chb{font-size:14.5px;color:#374151;line-height:2.05;white-space:pre-wrap;word-break:keep-all;margin-bottom:22px}
/* 2026-08-12: 사용자 요청 — 문장(문단)마다 간격이 없어서 계속 이어져 보임.
   renderTextBlocks()가 각 문단을 별도 <p>로 쪼개 놓았지만 그 사이 여백이
   없었던 게 원인 — 문단 사이 간격을 추가한다. */
.chb p{margin:0 0 16px}
.chb p:last-child{margin-bottom:0}
/* 2026-08-12: 사용자 요청 — "1단계," "핵심 포인트:" 같은 문단 리드인을
   굵게+진한 색으로 강조(가독성). js/renderers.js renderTextBlocks()가
   실제 문단 시작에서만 감지해 감싼다. */
.chb-lead{font-weight:800;color:#111827}
/* Numbered / bulleted lines inside body or appendix text — real structure
   already present in the AI-written content, just given hanging-indent,
   two-weight typography instead of flattening into identical paragraphs. */
.chb-nrow,.chb-brow{display:flex;gap:12px;align-items:baseline;margin-bottom:13px}
.chb-nnum{flex-shrink:0;min-width:22px;font-weight:800;font-size:15.5px;color:#6366f1}
.chb-bdot{flex-shrink:0;width:5px;height:5px;border-radius:50%;background:#6366f1;margin-top:9px}
.chb-ntext{font-size:14.5px;color:#374151;line-height:1.95;word-break:keep-all}

/* Chapter opener page — its own page, minimal and centered, so a chapter
   start resets reading pace. 2026-08-10: 사용자가 첨부한 참고 전자책 스타일을
   모방하도록 다크 네이비 + 골드 뱃지(.chop-badge)로 다시 그렸다(표지 .cvr과
   같은 그라디언트 값을 공유 — 책 전체가 하나의 일관된 아이덴티티). */
.chop{min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 40px;background:repeating-linear-gradient(135deg,rgba(232,184,75,.03) 0px,rgba(232,184,75,.03) 1px,transparent 1px,transparent 28px),repeating-linear-gradient(45deg,rgba(232,184,75,.02) 0px,rgba(232,184,75,.02) 1px,transparent 1px,transparent 28px),radial-gradient(circle 2.5px at 22% 76%,rgba(232,184,75,.4),transparent 100%),radial-gradient(circle 2px at 80% 24%,rgba(232,184,75,.35),transparent 100%),radial-gradient(circle 1.8px at 65% 78%,rgba(232,184,75,.35),transparent 100%),radial-gradient(circle 2px at 30% 20%,rgba(232,184,75,.3),transparent 100%),radial-gradient(circle 2px at 88% 55%,rgba(232,184,75,.3),transparent 100%),radial-gradient(circle 1.6px at 12% 48%,rgba(232,184,75,.28),transparent 100%),radial-gradient(ellipse 420px 340px at 85% 85%,rgba(139,92,246,.1),transparent 65%),radial-gradient(ellipse 380px 320px at 15% 15%,rgba(157,42,90,.11),transparent 62%),radial-gradient(ellipse 560px 420px at 50% 30%,rgba(232,184,75,.16),transparent 65%),linear-gradient(165deg,#1c1732 0%,#2a1c3a 55%,#241d40 100%);-webkit-print-color-adjust:exact;print-color-adjust:exact;position:relative}
/* 2026-08-12: 순서는 원래대로("CHAPTER 0N" 라벨 → 큰 제목, 사용자 정정).
   max-width:560px 제한은 없앤 상태 그대로 유지(좁은 폭 때문에 들어갈 수
   있는 제목까지 여러 줄로 꺾이던 문제 해결). 2026-08-12 추가 수정: 사용자
   요청으로 대제목(.chop-title)은 더 크게, "CHAPTER 0N" 배지 테두리는 더
   굵게(1px→2.5px) 변경. */
.chop-badge{display:inline-flex;align-items:center;padding:7px 20px;border:2.5px solid rgba(232,184,75,.6);border-radius:100px;font-size:11px;color:var(--gold);font-weight:700;letter-spacing:2px;margin-bottom:26px}
.chop-title{font-size:clamp(28px,4.2vw,40px);font-weight:800;color:#fff;line-height:1.35;max-width:100%;letter-spacing:-.3px;word-break:keep-all}
/* 대제목 - 소제목으로 나뉜 챕터 오프너 제목의 소제목 줄 — 더 작은 글씨. */
.chop-title-split{display:block}
.chop-title-split .chop-title{margin-bottom:10px}
.chop-title-sub{font-size:clamp(17px,2.4vw,23px);font-weight:600;color:rgba(255,255,255,.62);line-height:1.4;letter-spacing:-.2px;max-width:100%;word-break:keep-all}

/* Bold "thesis statement" — V3 Phase 1B refinement. The reference repeats a
   single bold declarative sentence several times per book (not just once at
   the close) to punctuate a key idea, breaking the reading rhythm on
   purpose. renderText() (js/renderers.js) detects a whole line wrapped in
   "**...**" — a real markdown-emphasis signal the model sometimes already
   writes and Atlas used to silently discard — and promotes it to this
   display treatment instead of a plain paragraph. No box, no quote mark:
   just weight and space, the same device the reference uses. */
.thst{font-size:21px;font-weight:800;color:#1a1a2e;line-height:1.42;letter-spacing:-.3px;word-break:keep-all;margin:26px 0}

/* Quote / dialogue block — V3 Phase 1B refinement. The reference sets an
   illustrative quoted line (a customer's or reader's own words) apart with
   a left accent rule and italic type, distinct from the Tip box's role.
   renderText() detects a whole line wrapped in real quotation marks. */
.qtb{border-left:3px solid #c7d2fe;padding:2px 0 2px 18px;margin:20px 0;font-style:italic;color:#475569;font-size:14.5px;line-height:1.8;word-break:keep-all}

/* Running footer — V3 Phase 1B refinement: the reference's footer is a true
   3-column row (title / copyright / page number), not 2 — re-expressed
   through Atlas's own hairline-divider language already used by .chnx.
   Present on every "reading" page, absent on the cover/opener/dark art
   pages, which carry their own closing design. */
.pgft{margin-top:30px;padding-top:14px;border-top:1px solid #f1f5f9;display:flex;align-items:center;gap:10px}
.pgft-l{flex:1;font-size:10.5px;color:#94a3b8;font-weight:600;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.pgft-c{flex:1;font-size:10.5px;color:#c2c6d6;font-weight:500;letter-spacing:.2px;text-align:center;white-space:nowrap}
.pgft-r{flex:1;font-size:10.5px;color:#94a3b8;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* Target-reader callout — deliberately distinct from the Tip/Framework
   block below (outlined, quiet) since its role is "is this for you", not
   an in-chapter insight. */
.tgtb{border:1.5px solid #e0e4f7;border-radius:12px;padding:16px 20px;margin:20px 0;display:flex;gap:12px;align-items:flex-start}
.tgtb-ic{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:#f0f4ff;color:#6366f1;display:flex;align-items:center;justify-content:center}
.tgtb-ic svg{width:16px;height:16px}
.tgtb h4{font-size:11px;font-weight:700;color:#6366f1;letter-spacing:.6px;text-transform:uppercase;margin-bottom:5px}
.tgtb p{font-size:13px;color:#334155;line-height:1.8}

/* Action Box (actionBox) — the single "do this today" callout. Warm coral
   accent to feel urgent without reading as an alarm. */
.actb{background:linear-gradient(135deg,#fff7f5,#fef1ef);border:1px solid #fecdc7;border-radius:12px;padding:18px 22px;margin:20px 0}
.actb h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#dc4a30;letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px}
.actb h4 svg{width:15px;height:15px}
.actb-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:#7c2d12;line-height:1.7}
.actb-row+.actb-row{margin-top:9px}
.actb-num{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#dc4a30;color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* Warning box (warningBox) — amber caution, visually distinct from Action. */
.warnb{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:16px 20px;margin:20px 0}
.warnb h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#b45309;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.warnb h4 svg{width:14px;height:14px}
.warnb-row{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#78350f;line-height:1.7;margin-bottom:6px}
.warnb-row:last-child{margin-bottom:0}
.warnb-num{flex-shrink:0;font-weight:700;color:#b45309}

/* Tip / Insight box (keyPoints) — a genuine callout, not repurposed as a
   framework grid. Real data, its own honest role. */
.tipb{background:linear-gradient(135deg,#f0f4ff,#f5f0ff);border-left:4px solid #6366f1;border-radius:0 12px 12px 0;padding:16px 20px;margin:20px 0}
.tipb h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#6366f1;letter-spacing:.6px;text-transform:uppercase;margin-bottom:11px}
.tipb h4 svg{width:14px;height:14px}
.tipb-row{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#334155;line-height:1.7;margin-bottom:8px}
.tipb-row:last-child{margin-bottom:0}
.tipb-dot{width:5px;height:5px;border-radius:50%;background:#6366f1;margin-top:8px;flex-shrink:0}

/* Checklist (actionItems) — a real checklist, distinct from Timeline below. */
.cklist{margin:20px 0}
.cklist h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#15803d;letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px}
.cklist h4 svg{width:14px;height:14px}
.cklrow{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#166534;line-height:1.7;margin-bottom:8px}
.cklrow:last-child{margin-bottom:0}
.ckl-check{flex-shrink:0;width:18px;height:18px;border-radius:5px;border:1.5px solid #86efac;background:#f0fdf4;color:#16a34a;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ckl-check svg{width:11px;height:11px}

/* Timeline (real ch.timeline field — a genuine AI-described process/journey,
   distinct from the actionItems checklist above). Sequential real stages
   rendered as a connected vertical timeline (Editorial Intelligence: 3+
   sequential stages should default to a Timeline). */
.tlb{margin:22px 0}
.tlb h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#0e7490;letter-spacing:.6px;text-transform:uppercase;margin-bottom:16px}
.tlb h4 svg{width:14px;height:14px}
.tlrow{position:relative;padding-left:40px;padding-bottom:20px}
.tlrow:last-child{padding-bottom:0}
.tlrow::before{content:'';position:absolute;left:11px;top:26px;bottom:0;width:2px;background:#cdeef4}
.tlrow:last-child::before{display:none}
.tldot{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#ecfbfd;border:2px solid #06b6d4;color:#0e7490;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tllabel{font-size:13.5px;font-weight:700;color:#164e63;margin-bottom:3px}
.tltext{font-size:13px;color:#155e75;line-height:1.75}

/* Framework (real ch.framework field — a genuine named model/system the AI
   describes, with its own name and step titles+descriptions, not a
   restyled insight list). */
.fwb{margin:24px 0}
.fwb h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#6366f1;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.fwb h4 svg{width:14px;height:14px}
.fwb-name{font-size:17px;font-weight:800;color:#1a1a2e;margin-bottom:14px}
.fwgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.fwcard{background:linear-gradient(160deg,#f7f8ff,#f6f2ff);border:1px solid #e6e8fb;border-radius:12px;padding:16px 15px}
.fwcard-num{font-size:20px;font-weight:800;color:#a5b0f5;margin-bottom:8px}
.fwcard-title{font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:5px;line-height:1.4}
.fwcard p{font-size:12.5px;color:#3a3f5c;line-height:1.65}

/* Comparison Table (real ch.comparisonTable field). */
.ctable{margin:24px 0}
.ctable h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#9333ea;letter-spacing:.6px;text-transform:uppercase;margin-bottom:12px}
.ctable h4 svg{width:14px;height:14px}
/* 2026-08-12: 사용자 요청으로 표 색상을 더 진하게(연한 라벤더 → 진한 보라 계열). */
.ctable-scroll{overflow-x:auto;border:1px solid #ddd6fe;border-radius:12px}
.ctable table{width:100%;border-collapse:collapse;font-size:12.5px}
.ctable th{background:#ede9fe;color:#3b0764;font-weight:800;text-align:left;padding:11px 14px;border-bottom:1px solid #c4b5fd;white-space:nowrap}
.ctable td{padding:11px 14px;border-bottom:1px solid #e4e0f7;color:#1f2937;line-height:1.6}
.ctable tr:last-child td{border-bottom:none}
.ctable tr:nth-child(even) td{background:#f3f1fc}

/* Chapter Summary (real ch.summary field) — a genuine AI-written recap,
   distinct from the Tip box above; positioned at the chapter's close. */
.chsum{margin-top:26px;padding:18px 22px;background:#f8f9fc;border:1px solid #eef0fb;border-radius:12px}
.chsum h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#64748b;letter-spacing:.6px;text-transform:uppercase;margin-bottom:9px}
.chsum h4 svg{width:14px;height:14px}
.chsum p{font-size:13px;color:#374151;line-height:1.8}

/* Impact statement / quote block (the closing line) — a genuine oversized
   pull-quote treatment (Editorial Intelligence: "oversized impact
   statement... a genuinely strong, underused technique"). */
.impactb{margin-top:32px;padding:36px 28px;text-align:center;background:linear-gradient(160deg,#1a1a2e,#20264a);border-radius:16px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.impactb-mark{font-size:40px;color:#6366f1;line-height:.6;margin-bottom:6px}
.impactb p{font-size:19px;font-weight:800;color:#fff;line-height:1.5;letter-spacing:-.2px}
.impactb small{font-size:12px;color:rgba(255,255,255,.5);margin-top:10px;display:block}

.chnx{margin-top:26px;padding-top:16px;border-top:2px solid #eef0fb;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.chnx-done{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.6px;color:#6366f1}
.chnx-done svg{width:13px;height:13px}
.chnx-next{font-size:12.5px;color:#64748b}
.chnx-next b{color:#1a1a2e}
/* 2026-08-10: 사용자 지시로 "저자 소개" 페이지를 전자책 생성에서 완전히
   삭제했다(js/renderers.js renderCvEbook, js/incremental-ebook-engine.js
   authorBio 스키마 모두 제거) — 그 페이지 전용이던 .apg/.ah/.ac/.aa/.an/.ar/.ab
   규칙도 더 이상 쓰이지 않아 함께 삭제한다. */
.bkpg{padding:40px;text-align:center;background:linear-gradient(165deg,#1c1732 0%,#241d40 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;gap:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bkpg-ic{color:var(--gold)}
.bkpg h3{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.2px}.bkpg p{font-size:12px;color:rgba(255,255,255,.38);line-height:1.7;max-width:360px}
.bkc{font-size:10px;color:rgba(255,255,255,.16);letter-spacing:1.3px;border-top:1px solid rgba(255,255,255,.07);padding-top:14px;width:100%;text-align:center}
.prompt-box{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left:4px solid #16a34a;border-radius:0 10px 10px 0;padding:16px 20px;margin:20px 0}
.prompt-box-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.prompt-box-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#16a34a;letter-spacing:.8px;text-transform:uppercase}
.prompt-box-title svg{width:13px;height:13px}
/* 2026-08-14: 사용자 지시로 프롬프트를 "문장별로 나눠 보이게" 수정 — 실제
   원인은 문장이 이미 줄바꿈(\n)으로 잘 구성되어 있었지만(atlasBuildThumbnailPrompt
   등, js/application.js) 이 클래스들 자체가 CSS 정의 없이 브라우저 기본
   스타일로만 렌더링되어 줄바꿈이 전부 무시되고 있었다(진짜 버그). white-space:
   pre-line 하나로 원래 있던 줄 구조가 그대로 살아난다. */
.prompt-item{margin-bottom:16px}
.prompt-item:last-child{margin-bottom:0}
.prompt-label{font-size:12px;font-weight:700;color:#15803d;margin-bottom:8px}
.prompt-text{white-space:pre-line;background:#fff;border:1px solid #bbf7d0;border-radius:9px;padding:14px 16px;font-size:13px;line-height:1.85;color:#14532d;margin-bottom:10px;max-height:420px;overflow-y:auto}
.prompt-copy-btn{background:#16a34a;color:#fff;border:none;border-radius:7px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
.prompt-copy-btn:hover{background:#15803d}
@media(max-width:520px){.fwgrid{grid-template-columns:1fr}}

/* V3 Phase 1B: print/PDF layout. Atlas already treats each .pg as one
   editorial "page" on screen; @media print makes that literal — one .pg per
   printed page, with the components that must never be cut mid-block
   (callouts, tables, framework cards, timeline, checklist, summary, prompt
   box, chapter-opener, footer) protected by break-inside:avoid. Gradient/
   dark pages already carry -webkit-print-color-adjust:exact individually;
   this block adds the page-break strategy those declarations were missing. */
@media print{
  .pg{box-shadow:none;border-radius:0;margin-bottom:0;break-after:page;page-break-after:always}
  .pg:last-child{break-after:auto;page-break-after:auto}
  .tgtb,.actb,.warnb,.tipb,.cklist,.tlb,.fwb,.fwcard,.ctable,.chsum,.impactb,.prompt-box,.chnx,.pgft,.chop,.ac,.thst,.qtb{
    break-inside:avoid;page-break-inside:avoid}
  .chb p,.chb-nrow,.chb-brow{orphans:3;widows:3}
  .ctable-scroll{overflow-x:visible}
}

/* MOBILE */

/* ════════════════════════════════
   PC 최적화 (1200px+)
════════════════════════════════ */

/* ─── PC (1200px+) ─── */
@media(min-width:1200px){
  .lhero-h1{font-size:72px}
  .lsec-inner{max-width:1160px}
  .lsteps{grid-template-columns:repeat(3,1fr)}
  .lfeat-grid{grid-template-columns:repeat(4,1fr)}
  .ltesti-grid{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
  .ebook-grid{grid-template-columns:repeat(3,1fr)}
}

/* ─── 태블릿 (769px~1199px) ─── */
@media(min-width:769px) and (max-width:1199px){
  :root{--sidebar:200px}
  .lhero-h1{font-size:52px}
  .lsteps{grid-template-columns:repeat(3,1fr)}
  .lfeat-grid{grid-template-columns:repeat(2,1fr)}
  .ltesti-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .ebook-grid{grid-template-columns:repeat(2,1fr)}
  .lsec{padding:80px 32px}
}

/* ─── 모바일 (최대 768px) ───
   Atlas Visual Redesign v2 — Phase R1 mobile correction, plus the follow-up
   App Shell cleanup: the mobile hamburger button and sidebar drawer are
   removed outright (not just re-skinned) — once the 4 nav destinations
   moved to #mobile-tabbar, the drawer held only the logo and an account
   row, which isn't enough content to justify a full-height overlay. The
   sidebar is now desktop/tablet-only (hidden entirely below 769px);
   account/logout on mobile is reached through the existing Settings screen
   (already has a real 계정 정보/플랜/로그아웃 section — see #app-settings),
   itself reachable via #mobile-tabbar's 설정 tab. #sb-overlay stays in the
   DOM (hidden) purely so closeSidebar() — still called by showApp() on
   every navigation, a desktop/tablet-safe no-op on mobile — doesn't throw
   on a missing element. Dashboard stat cards stack in a single readable
   column instead of being squeezed into 2. Verified zero horizontal scroll
   at 320/375/390/430px. */
@media(max-width:768px){
  /* ── 사이드바: 데스크톱/태블릿 전용 — 모바일에서는 완전히 제거 (주
       내비게이션은 하단 탭바, 계정/로그아웃은 설정 화면) ── */
  :root{--sidebar:0px}
  .sidebar{display:none}
  #sb-overlay{display:none !important}

  /* ── 하단 탭바: 모바일의 주 내비게이션 ── */
  #mobile-tabbar{display:flex}
  .a2-tabbar-item{min-height:48px;justify-content:center;font-size:10.5px}

  /* ── 메인 컨텐츠: 데스크톱 축소가 아닌 전체 폭 ── */
  .main-content{margin-left:0 !important}
  .topbar{padding:0 16px;gap:8px}
  .topbar-title{font-size:16px}
  .topbar-right{flex-shrink:0}
  #topbar-new-btn{padding:9px 14px;min-height:40px}

  /* ── 앱 내부: 전체 폭 + 하단 탭바에 가리지 않도록 하단 여백 확보 ── */
  #app-dashboard,#app-history,#app-settings,#app-converter{
    width:100%;
    padding:16px 16px calc(88px + env(safe-area-inset-bottom)) !important;
    box-sizing:border-box;
  }
  /* 대시보드: 2열로 욱여넣지 않고 의도적으로 1열 스택 (Phase R2: 카드 종류가
     dash-qa-card/dash-projcard로 바뀌어도 동일한 원칙 유지) */
  .stat-grid{grid-template-columns:1fr;gap:10px}
  .dash-workcenter{padding:20px}
  .dash-workcenter-actions{flex-direction:column}
  .dash-workcenter-actions button{width:100%;min-height:44px;box-sizing:border-box}
  .dash-quickactions{grid-template-columns:1fr;gap:10px}
  .dash-projgrid{grid-template-columns:1fr}
  .dash-projactions .a2-btn{min-height:40px}
  .ebook-grid{grid-template-columns:1fr}
  .settings-row{flex-direction:column;align-items:flex-start;gap:10px}
  .settings-input{width:100%;min-width:0}
  .result-actions{gap:6px}
  .result-actions .a2-btn{min-height:40px}

  /* 랜딩 */
  .lnav{padding:0 18px;height:60px}
  .lnav-links,.lnav-actions .btn-nav-ghost{display:none}
  .lhero{padding:90px 20px 60px}
  .lhero-h1{font-size:clamp(28px,7vw,42px)}
  .lhero-sub{font-size:14px}
  .lhero-cta{flex-direction:column;align-items:center;gap:10px}
  .btn-hero-primary,.btn-hero-outline{width:100%;max-width:320px;text-align:center}
  .lhero-stats{flex-wrap:wrap;padding:24px 0;margin-top:40px}
  .lstat{padding:12px 16px;flex:1;min-width:90px}
  .lstat-num{font-size:24px}
  .lsteps{grid-template-columns:1fr;gap:8px}
  .lstep{padding:28px 22px;border-radius:var(--r) !important}
  .lfeat-grid{grid-template-columns:1fr 1fr;gap:0}
  .lfeat{padding:20px 16px}
  .ltesti-grid{grid-template-columns:1fr;gap:12px}
  .lsec{padding:56px 18px}
  .lcta{padding:72px 20px}
  .lfooter{flex-direction:column;gap:10px;text-align:center;padding:20px}

  /* 인증 */
  .auth-box{padding:32px 22px;border-radius:var(--r)}
}

/* ─── 소형 모바일 (최대 380px) ─── */
@media(max-width:380px){
  .lhero-h1{font-size:26px}
  .lhero-stats{flex-direction:column}
  .lstat{border-right:none;border-bottom:1px solid var(--border);padding:10px 0}
  .lstat:last-child{border-bottom:none}
  .lfeat-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .ebook-grid{grid-template-columns:1fr}
  #app-dashboard,#app-history,#app-settings,#app-converter{padding:12px 12px calc(88px + env(safe-area-inset-bottom)) !important}
  /* 매우 좁은 화면: 상단바 CTA를 아이콘 전용으로 축소해 겹침/줄바꿈 없이
     항상 맞도록 함 (제목·메뉴버튼과의 충돌 방지) */
  .topbar-new-label{display:none}
  #topbar-new-btn{padding:9px;width:40px}
}

/* ── Atlas v0.5 Multi-Source & Title Studio ── */
.ms-workspace{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.ms-box{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:14px;padding:16px}
.ms-box-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:10px}
.ms-drop{border:1.5px dashed rgba(99,102,241,.45);border-radius:12px;padding:22px;text-align:center;cursor:pointer;background:rgba(99,102,241,.035);transition:.2s}
.ms-drop:hover,.ms-drop.drag{border-color:var(--p);background:rgba(99,102,241,.09)}
.ms-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:270px;overflow:auto}
.ms-item{display:grid;grid-template-columns:minmax(0,1fr) 118px 32px;gap:8px;align-items:center;padding:9px 10px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:10px}
.ms-name{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-meta{font-size:10px;color:var(--text3);margin-top:2px}
.ms-role{width:100%;background:#111827;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:11px;padding:7px}
.ms-remove{border:0;background:rgba(239,68,68,.12);color:#f87171;border-radius:8px;width:30px;height:30px;cursor:pointer}
.ms-link-row{display:flex;gap:8px}
.ms-link-row input{flex:1}
.ms-status{font-size:11px;line-height:1.55;color:var(--text3);margin-top:8px}
/* Atlas Visual Redesign v2, Phase R3 — Title Studio / AI Planner / Smart
   Interview re-skinned to the light a2-* system (same soft-shadow card
   language as the Dashboard/Step 1). Shared step-header classes replace the
   repeated inline-styled eyebrow/title/sub blocks previously duplicated in
   every Converter sub-state. */
.cv-step-eyebrow{font-size:11px;font-weight:700;color:var(--a2-accent);letter-spacing:1px;text-transform:uppercase}
.cv-step-title{font-size:22px;font-weight:800;color:var(--a2-text);margin-top:6px;letter-spacing:-.3px;word-break:keep-all}
.cv-step-sub{font-size:12px;color:var(--a2-text-muted);margin-top:6px;line-height:1.6}
.title-studio{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:24px}
.ts-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}
.ts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:500px;overflow:auto;padding-right:3px}
.ts-card{border:1px solid var(--a2-border);background:var(--a2-surface);box-shadow:var(--a2-shadow-sm);border-radius:var(--a2-r);padding:14px;cursor:pointer;transition:box-shadow var(--motion-standard),transform var(--motion-standard),border-color var(--motion-standard);position:relative}
.ts-card:hover{box-shadow:var(--a2-shadow-md);transform:translateY(-1px)}
.ts-card.selected{border-color:var(--a2-accent);background:var(--a2-accent-soft);box-shadow:0 0 0 2px var(--a2-accent-soft)}
.ts-type{font-size:10px;color:var(--a2-accent);font-weight:700;letter-spacing:.6px;margin-bottom:6px;text-transform:uppercase}
.ts-title{font-size:15px;font-weight:700;color:var(--a2-text);line-height:1.45;word-break:keep-all}
.ts-sub{font-size:11px;color:var(--a2-text-faint);line-height:1.5;margin-top:6px}
.ts-score{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.ts-score span{font-size:9px;padding:4px 7px;border-radius:100px;background:var(--a2-surface-hover);color:var(--a2-text-muted);font-weight:600}
.ts-total{position:absolute;right:10px;top:10px;font-size:11px;font-weight:800;color:var(--a2-warning)}
.ts-edit{margin-top:18px;padding-top:18px;border-top:1px solid var(--a2-border)}
.ts-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.ts-analysis{font-size:12px;line-height:1.7;color:var(--a2-text-muted);background:var(--a2-bg);border:1px solid var(--a2-border);padding:12px 14px;border-radius:var(--a2-r-sm);margin-bottom:14px}
@media(max-width:760px){.ms-workspace{grid-template-columns:1fr}.ts-grid{grid-template-columns:1fr}.ts-head{flex-direction:column}.ms-item{grid-template-columns:minmax(0,1fr) 100px 30px}}
/* M3.2 Phase 1: AI Planner — docs/ATLAS_AI_ENGINE_SPECIFICATION.md 기준. title-studio와 동일한
   카드/여백 리듬을 재사용해 새 화면이 기존 Studio와 이질감 없이 보이도록 한다. */
.ai-planner{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:24px}
.aip-report{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.aip-card{font-size:12px;line-height:1.7;color:var(--a2-text-muted);background:var(--a2-bg);border:1px solid var(--a2-border);padding:14px;border-radius:var(--a2-r-sm)}
.aip-card-full{grid-column:1/-1}
.aip-card-label{font-weight:700;color:var(--a2-text);font-size:11px;letter-spacing:.3px;margin-bottom:6px}
.aip-card-value{color:var(--a2-text-muted);font-size:13px;font-weight:700}
.aip-card-caption{color:var(--a2-text-faint);font-size:10px;margin-top:6px;font-weight:400;line-height:1.6}
.aip-cautions{margin:0;padding-left:18px}
.aip-cautions li{margin-bottom:4px;font-weight:400;font-size:12px}
#aip-visual-generate-btn:disabled{opacity:.45;cursor:not-allowed}
.aip-confidence{display:flex;align-items:center;gap:8px}
.aip-confidence-bar{flex:1;height:6px;border-radius:100px;background:var(--a2-border);overflow:hidden}
.aip-confidence-fill{height:100%;background:var(--a2-accent);border-radius:100px}
.aip-confidence-pct{font-size:13px;font-weight:800;color:var(--a2-accent);min-width:38px;text-align:right}
.aip-accordion{margin-bottom:16px;border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);overflow:hidden;background:var(--a2-bg)}
.aip-accordion-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:var(--a2-text-muted);font-size:12px;font-weight:700;padding:12px 14px;cursor:pointer;font-family:inherit}
.aip-accordion-arrow{display:inline-block;transition:transform .18s ease;font-size:10px}
.aip-accordion-body{padding:0 14px 14px;font-size:12px;color:var(--a2-text-faint);line-height:1.7}
.aip-reason-section-title{font-size:11px;font-weight:700;color:var(--a2-accent);margin:10px 0 6px;letter-spacing:.3px}
.aip-reason-section-title:first-child{margin-top:0}
.aip-reason-list{margin:0;padding-left:18px}
.aip-reason-note{margin-top:6px;margin-bottom:4px;font-style:italic;color:var(--a2-text-faint)}
.aip-candidates-head{font-size:12px;font-weight:700;color:var(--a2-text);margin-bottom:10px}
.aip-candidates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.aip-candidate{border:1px solid var(--a2-border);background:var(--a2-surface);box-shadow:var(--a2-shadow-sm);border-radius:var(--a2-r);padding:14px;cursor:pointer;transition:box-shadow var(--motion-standard),transform var(--motion-standard),border-color var(--motion-standard)}
.aip-candidate:hover{box-shadow:var(--a2-shadow-md);transform:translateY(-1px)}
.aip-candidate.selected{border-color:var(--a2-accent);background:var(--a2-accent-soft);box-shadow:0 0 0 2px var(--a2-accent-soft)}
.aip-candidate-head{display:flex;justify-content:space-between;align-items:center;gap:6px}
.aip-candidate-name{font-size:14px;font-weight:700;color:var(--a2-text)}
.aip-candidate-check{font-size:10px;font-weight:700;color:var(--a2-accent)}
.aip-candidate-tagline{font-size:11px;color:var(--a2-text-faint);margin-top:4px}
.aip-swatches{display:flex;gap:5px;margin-top:10px}
.aip-swatch{width:16px;height:16px;border-radius:5px;border:1px solid var(--a2-border);display:inline-block}
.aip-candidate-meta{font-size:10px;color:var(--a2-text-faint);margin-top:6px}
@media(max-width:900px){.aip-candidates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.aip-report{grid-template-columns:1fr}}
@media(max-width:520px){.aip-candidates{grid-template-columns:1fr}}

/* V3 Phase 2 Round 26: 사용자가 첨부한 레퍼런스 그리드(테마 라벨 카드 1개 + 예시
   이미지 5장이 한 줄에 나란히, 테마마다 한 줄)를 그대로 재현한다 — Round 22의
   "카드 그리드 + 접힌 예시 보기"를 대체한다. */
.aip-theme-rows{display:flex;flex-direction:column;gap:12px}
.aip-theme-row{display:flex;border:1px solid var(--a2-border);border-radius:var(--a2-r);overflow:hidden;cursor:pointer;background:var(--a2-surface);box-shadow:var(--a2-shadow-sm);transition:box-shadow var(--motion-standard),border-color var(--motion-standard)}
.aip-theme-row:hover{box-shadow:var(--a2-shadow-md)}
.aip-theme-row.selected{border-color:var(--a2-accent);box-shadow:0 0 0 2px var(--a2-accent-soft)}
.aip-theme-row-label{flex:0 0 190px;padding:16px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,var(--a2-surface-hover),var(--a2-surface));border-right:1px solid var(--a2-border)}
.aip-theme-row-index{font-size:11px;font-weight:700;color:var(--a2-text-faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.aip-theme-row-name{font-size:15px;font-weight:800;color:var(--a2-text);margin-top:4px}
.aip-theme-row-oneliner{font-size:11px;color:var(--a2-text-muted);margin-top:6px;line-height:1.4}
.aip-theme-row-usecase{font-size:10px;color:var(--a2-text-faint);margin-top:4px;line-height:1.4}
.aip-theme-row-examples{flex:1;display:flex;gap:6px;padding:10px;overflow-x:auto}
.aip-theme-row-img{flex:1 1 0;min-width:88px;aspect-ratio:652/488;object-fit:cover;border-radius:6px;background:var(--a2-surface-hover)}
@media(max-width:760px){
  .aip-theme-row{flex-direction:column}
  .aip-theme-row-label{flex:none;border-right:0;border-bottom:1px solid var(--a2-border)}
  .aip-theme-row-img{flex:none;width:130px}
}
.ipe-theme-readout{display:flex;gap:14px;align-items:center;border:1px solid var(--a2-border);border-radius:var(--a2-r);padding:12px;background:var(--a2-surface)}
.ipe-theme-readout-img{width:96px;aspect-ratio:652/488;object-fit:cover;border-radius:8px;flex:none;background:var(--a2-surface-hover)}
.ipe-theme-readout-label{font-size:10px;color:var(--a2-text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.ipe-theme-readout-name{font-size:15px;font-weight:800;color:var(--a2-text);margin-top:2px}
.ipe-theme-readout-oneliner{font-size:12px;color:var(--a2-text-muted);margin-top:2px}
@media(max-width:520px){.ipe-theme-readout{flex-direction:column;align-items:flex-start}.ipe-theme-readout-img{width:100%}}
.smart-interview{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:24px;max-width:900px;margin:0 auto}
.si-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.si-kicker{font-size:11px;font-weight:700;color:var(--a2-accent);letter-spacing:1.2px;text-transform:uppercase}.si-title{font-size:22px;font-weight:800;color:var(--a2-text);margin-top:6px}.si-desc{font-size:12px;color:var(--a2-text-muted);line-height:1.7;margin-top:6px}.si-reason{padding:12px 14px;border-radius:var(--a2-r-sm);background:var(--a2-accent-soft);border:1px solid var(--a2-border);color:var(--a2-text-muted);font-size:13px;line-height:1.65;margin-bottom:16px}.si-list{display:grid;gap:12px}.si-card{padding:16px;border-radius:var(--a2-r);background:var(--a2-bg);border:1px solid var(--a2-border)}.si-q{font-size:14px;font-weight:700;color:var(--a2-text);margin-bottom:10px;line-height:1.5}.si-options{display:flex;gap:8px;flex-wrap:wrap}.si-opt{border:1px solid var(--a2-border);background:var(--a2-surface);color:var(--a2-text-muted);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}.si-opt:hover{background:var(--a2-surface-hover)}.si-opt.selected{background:var(--a2-accent);border-color:var(--a2-accent);color:#fff}.si-multi-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--a2-accent);background:var(--a2-accent-soft);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}.si-input{width:100%;box-sizing:border-box;border:1px solid var(--a2-border);background:var(--a2-surface);color:var(--a2-text);border-radius:var(--a2-r-sm);padding:11px 12px;font-size:13px;outline:none;font-family:inherit}.si-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.smart-progress-note{font-size:12px;color:var(--a2-text-faint);margin-top:8px;line-height:1.6}
@media(max-width:760px){.si-header{flex-direction:column}.si-actions{flex-direction:column}.si-actions button{width:100%}}



/* ── Atlas v0.6 Workspace UI ── */
/* Atlas Visual Redesign v2, Phase R3: workspace banner re-skinned to the
   light a2-* system (was a dark purple-glow gradient card). Decorative
   ::before glow removed outright — it added no clarity, only decoration
   (North Star: beauty only when it aids clarity). */
/* Atlas Visual Redesign v2, Phase R10 — Ebook Generation Workspace header:
   compacted from 7 stacked rows (kicker/title, badge, progress-text,
   progress-bar, 4 STEP pills, coach banner, 3 full-width utility buttons)
   down to 5, by folding the utility actions into a corner icon-button
   cluster (.aw-top-right, next to the badge — the same "action-in-the-
   header-corner" pattern real workspace tools use) instead of their own
   dedicated row. .aw-btn (old full-width utility button) retired —
   confirmed zero remaining references. */
.atlas-workspace{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:22px 24px;margin-bottom:20px}
.aw-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.aw-kicker{font-size:10px;letter-spacing:1.4px;color:var(--a2-accent);font-weight:700;text-transform:uppercase}
.aw-title{font-size:20px;font-weight:800;color:var(--a2-text);margin-top:5px;word-break:keep-all}
.aw-meta{font-size:11px;color:var(--a2-text-faint);margin-top:5px;line-height:1.6}
.aw-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.aw-badge{font-size:10px;font-weight:700;color:var(--a2-accent);border:none;background:var(--a2-accent-soft);padding:6px 12px;border-radius:100px;white-space:nowrap}
.aw-actions{display:flex;gap:2px}
.aw-progress-head{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:var(--fs-caption);color:var(--a2-text-muted);font-weight:600}
.aw-progress{height:6px;background:var(--a2-border);border-radius:100px;overflow:hidden;margin-top:7px}
.aw-progress>div{height:100%;width:8%;background:var(--a2-accent);border-radius:100px;transition:width .35s ease}
.aw-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:14px}
.aw-step{border:1px solid var(--a2-border);background:var(--a2-bg);border-radius:10px;padding:9px 7px;text-align:center;color:var(--a2-text-faint);min-width:0}
.aw-step .ico{display:flex;justify-content:center;margin-bottom:4px}
.aw-step .ico svg{width:14px;height:14px}
.aw-step .lbl{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-step.done{color:var(--a2-success);border-color:var(--a2-success-soft);background:var(--a2-success-soft)}
.aw-step.active{color:var(--a2-accent);border-color:var(--a2-accent-soft);background:var(--a2-accent-soft)}
.aw-coach{display:flex;gap:10px;align-items:flex-start;margin-top:14px;background:var(--a2-accent-soft);border:1px solid var(--a2-border);padding:11px 14px;border-radius:var(--a2-r-sm)}
.aw-coach-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--a2-surface);color:var(--a2-accent);border-radius:8px;flex:0 0 auto}
.aw-coach-text{font-size:12px;color:var(--a2-text-muted);line-height:1.6}
@media(max-width:760px){.aw-top{flex-direction:column}.aw-top-right{flex-direction:row-reverse;align-items:center;width:100%;justify-content:space-between}.aw-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Atlas Product Workflow Redesign (Round 12): 사용자 기본 화면 6단계
   배너(단일 진행 표시 — 예전 4단계 배지 + 7단계 상세 <details>의 중복을
   제거하고 이 하나로 통일했다). ── */
.aw-steps-simple{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px}
.aw-step-simple{border:1px solid var(--a2-border);background:var(--a2-bg);border-radius:var(--a2-r-sm);padding:12px 8px;text-align:center;color:var(--a2-text-faint);min-width:0}
.aw-step-simple .num{font-size:10px;font-weight:700;display:block;margin-bottom:4px;letter-spacing:.3px}
.aw-step-simple .lbl{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.aw-step-simple.done{color:var(--a2-success);border-color:var(--a2-success-soft);background:var(--a2-success-soft)}
.aw-step-simple.active{color:var(--a2-accent);border-color:var(--a2-accent-soft);background:var(--a2-accent-soft)}
@media(max-width:900px){.aw-steps-simple{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.aw-steps-simple{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* ── Atlas v0.8 Premium Brand & Landing UI ── */
.atlas-landing{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#050711;position:relative;overflow:hidden;padding:42px 22px;box-sizing:border-box}
.atlas-landing:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 28%,rgba(99,102,241,.20),transparent 27%),radial-gradient(circle at 78% 42%,rgba(168,85,247,.12),transparent 24%),radial-gradient(circle at 20% 72%,rgba(59,130,246,.09),transparent 22%);pointer-events:none}
.atlas-landing:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 86%);pointer-events:none}
.al-shell{width:min(1060px,100%);position:relative;z-index:2;text-align:center}
.al-brand{display:inline-flex;align-items:center;gap:15px;margin-bottom:34px;text-align:left}
.al-logo{width:64px;height:64px;border-radius:19px;background:linear-gradient(145deg,#4f46e5,#8b5cf6 58%,#c084fc);display:flex;align-items:center;justify-content:center;font-size:29px;box-shadow:0 14px 45px rgba(99,102,241,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.al-name{font-size:30px;font-weight:950;color:#fff;letter-spacing:-1.1px;line-height:1.05}.al-name b{background:linear-gradient(90deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.al-subbrand{font-size:14px;color:#94a3b8;margin-top:7px;font-weight:650;letter-spacing:.15px}
.al-badge{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:999px;border:1px solid rgba(168,85,247,.34);background:linear-gradient(135deg,rgba(79,70,229,.13),rgba(168,85,247,.11));color:#d8b4fe;font-size:13px;font-weight:850;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);margin-bottom:28px}
.al-title{font-size:clamp(38px,6.3vw,72px);font-weight:950;line-height:1.09;color:#f8fafc;letter-spacing:-3.2px;margin:0;word-break:keep-all}.al-title .grad{display:block;margin-top:8px;background:linear-gradient(90deg,#60a5fa 0%,#8b5cf6 35%,#d946ef 66%,#fbbf24 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.al-desc{font-size:clamp(15px,2vw,19px);line-height:1.75;color:#94a3b8;margin:27px auto 31px;max-width:760px;word-break:keep-all}
/* 2026-08-14: 실제 항목이 3개였을 때 5칸 grid라 여백이 남던 버그를 먼저
   고쳤다가, 이후 사용자 지시로 항목을 실제 기능 5개(전자책 생성/AI 제목
   추천/PDF·워드 저장/썸네일·상세페이지 프롬프트 제공/업로드 자료 생성)로
   늘려 다시 5칸으로 되돌렸다 — 이번엔 항목 수와 실제로 일치한다. */
.al-featurebar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1080px;margin:0 auto 30px;padding:14px 10px;border-radius:20px;border:1px solid rgba(148,163,184,.17);background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(7,11,24,.84));box-shadow:0 18px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)}
.al-feature{padding:11px 6px;border-right:1px solid rgba(148,163,184,.13);font-size:11.5px;font-weight:760;color:#dbeafe;display:flex;align-items:center;justify-content:center;text-align:center;gap:7px;line-height:1.35}.al-feature:last-child{border-right:0}.al-feature i{font-style:normal;font-size:18px;flex-shrink:0}
.al-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.al-btn{min-width:260px;border-radius:18px;padding:17px 25px;cursor:pointer;font-family:inherit;transition:.22s;text-align:center}.al-btn:hover{transform:translateY(-2px)}.al-btn-primary{border:0;color:#fff;background:linear-gradient(135deg,#4f46e5,#8b5cf6 58%,#d946ef);box-shadow:0 16px 38px rgba(99,102,241,.36)}.al-btn-secondary{color:#f8fafc;background:rgba(8,12,27,.72);border:1px solid rgba(148,163,184,.27)}.al-btn strong{display:block;font-size:16px;font-weight:900}.al-btn small{display:block;font-size:12px;margin-top:5px;color:rgba(255,255,255,.65);font-weight:560}.al-btn-secondary small{color:#94a3b8}
.al-secure{margin-top:22px;color:#475569;font-size:11px;font-weight:650}.al-version{position:absolute;right:0;bottom:-28px;font-size:10px;color:#334155;letter-spacing:1px}
.atlas-auth-brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:22px}.atlas-auth-brand .icon{width:45px;height:45px;border-radius:14px;background:linear-gradient(145deg,#4f46e5,#8b5cf6,#c084fc);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 8px 25px rgba(99,102,241,.35)}.atlas-auth-brand .txt{text-align:left;color:var(--a2-text);font-size:17px;font-weight:900;line-height:1.05}.atlas-auth-brand .txt em{font-style:normal;color:var(--a2-accent);font-size:11px;display:block;margin-top:5px;letter-spacing:.3px}
@media(max-width:760px){.atlas-landing{padding:30px 16px}.al-brand{margin-bottom:27px}.al-logo{width:53px;height:53px;border-radius:16px}.al-name{font-size:25px}.al-title{letter-spacing:-2px}.al-featurebar{grid-template-columns:repeat(2,1fr);padding:10px}.al-feature{border-right:0;border-bottom:1px solid rgba(148,163,184,.1);justify-content:flex-start;padding:12px}.al-feature:last-child{grid-column:1/-1;border-bottom:0;justify-content:center}.al-btn{width:100%;min-width:0}.al-actions{gap:10px}.al-version{display:none}}


/* Atlas Visual Redesign v2, Phase R4 — AI Quality Coach re-skinned to the
   light a2-* system (was a dark purple-gradient card). */
.atlas-final-tools{margin-top:16px;background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:20px;color:var(--a2-text)}
.aft-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.aft-kicker{font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--a2-accent);text-transform:uppercase}
.aft-title{font-size:18px;font-weight:800;margin-top:4px;color:var(--a2-text)}
.aft-score{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--a2-accent-soft);color:var(--a2-accent);font-size:18px;font-weight:800}
.aft-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.aft-metric{background:var(--a2-bg);border:1px solid var(--a2-border);border-radius:var(--a2-r-sm);padding:10px}
.aft-metric b{display:block;font-size:16px;color:var(--a2-text)}
.aft-metric span{font-size:10px;color:var(--a2-text-faint)}
.aft-note{margin-top:10px;font-size:12px;line-height:1.65;color:var(--a2-text-muted);background:var(--a2-accent-soft);border-radius:var(--a2-r-sm);padding:10px 12px}
.aft-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.aft-btn{border:1px solid var(--a2-border);background:var(--a2-surface);color:var(--a2-text-muted);border-radius:100px;padding:8px 14px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.aft-btn:hover{background:var(--a2-surface-hover)}
.aft-btn.primary{border:0;background:var(--a2-accent);color:#fff}
.aft-btn.primary:hover{background:var(--a2-accent-hover)}
/* Atlas Visual Redesign v2, Phase R4: image-production section (thumbnail/
   sales-page generation, STEP 3~4) wrapped in a light card matching the
   rest of the Converter — was a bare unstyled block. */
.ipe-section{background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);box-shadow:var(--a2-shadow-sm);padding:24px}
/* V3 Phase 2 Round 2: Thumbnail Theme gallery — real curated preview images,
   clear selected state, same aspect ratio across all cards, large enough to
   compare on mobile (per requirement: gallery must stay usable at desktop/
   tablet/mobile without shrinking cards into illegibility). */
.ipe-theme-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ipe-theme-card{display:flex;flex-direction:column;text-align:left;padding:0;border:2px solid var(--a2-border);border-radius:var(--a2-r);background:var(--a2-surface);cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;font:inherit}
.ipe-theme-card:hover{border-color:var(--a2-accent)}
.ipe-theme-card.active{border-color:var(--a2-accent);box-shadow:0 0 0 3px var(--a2-accent-soft)}
.ipe-theme-card-img{width:100%;aspect-ratio:652/488;object-fit:cover;display:block;background:var(--a2-surface-hover)}
.ipe-theme-card-body{padding:10px 12px}
.ipe-theme-card-name{font-size:13px;font-weight:800;color:var(--a2-text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ipe-theme-card-badge{font-size:9px;font-weight:800;color:var(--a2-accent-contrast);background:var(--a2-accent);border-radius:100px;padding:2px 7px;letter-spacing:.3px}
.ipe-theme-card-oneliner{font-size:11px;color:var(--a2-text-muted);margin-top:3px;line-height:1.4}
.ipe-theme-card-usecase{font-size:10px;color:var(--a2-text-faint);margin-top:4px;line-height:1.4}
@media(max-width:520px){.ipe-theme-gallery{grid-template-columns:repeat(2,1fr)}}
/* Atlas Visual Redesign v2, Phase R4: partial-regeneration modal + platform
   selector re-skinned to the light a2-* system (was a dark modal floating
   over an already-light Converter — jarring, not an intentional theme
   choice). */
.atlas-modal-bg{position:fixed;inset:0;background:rgba(20,22,30,.45);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:99999}
.atlas-modal{width:min(620px,100%);max-height:88vh;overflow:auto;background:var(--a2-surface);border:1px solid var(--a2-border);border-radius:var(--a2-r-lg);padding:24px;color:var(--a2-text);box-shadow:var(--a2-shadow-lg)}
.atlas-modal h3{margin:0 0 5px;font-size:20px;color:var(--a2-text)}
.atlas-modal p{margin:0 0 15px;color:var(--a2-text-muted);font-size:12px;line-height:1.6}
.atlas-form-row{margin-bottom:12px}
.atlas-form-row label{display:block;font-size:11px;color:var(--a2-text-muted);font-weight:700;margin-bottom:6px}
.atlas-form-row select,.atlas-form-row textarea{width:100%;box-sizing:border-box;border:1px solid var(--a2-border);background:var(--a2-surface);color:var(--a2-text);border-radius:var(--a2-r-sm);padding:10px;font-family:inherit}
.atlas-form-row textarea{min-height:105px;resize:vertical}
.atlas-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}
.atlas-platform-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.atlas-platform-row select{background:var(--a2-surface);color:var(--a2-text);border:1px solid var(--a2-border);border-radius:100px;padding:7px 11px;font-size:11px;font-weight:700}
@media(max-width:760px){.aft-grid{grid-template-columns:repeat(2,1fr)}}

/* 2026-08-10: 사용자 지시로 Thumbnail Studio(Milestone 2)/Sales Page Studio
   (Milestone 3)/Brand Pack 재스킨(.ads-scope, Milestone 3.1) CSS 전체(~430줄)를
   삭제했다 — 해당 화면들이 index.html에서 전면 삭제되어 더 이상 쓰이지 않는다. */

/* 2026-08-10: 전자책 완성 후 고정 템플릿 4종 썸네일 선택(js/thumbnail-templates.js).
   AI 이미지 생성이 아니라 지금 책의 실제 title/subtitle/category를 CSS
   템플릿에 얹어 그리는 순수 프론트엔드 기능 — 위에서 지운 AI 파이프라인과는
   무관하다. 규격은 이 프로젝트에서 이미 검증했던 Kmong 표준 652×488(4:3)을
   그대로 쓴다.
   2026-08-12: 사용자 리포트 — 카드 미리보기 영역 오른쪽에 빈 여백이 생겼다
   (스크린샷으로 확인). 원인: .thumb-tpl-preview가 고정 300×224px였는데,
   실제 카드 폭(그리드 컬럼)은 그보다 넓어서 300px 이미지 옆에 남는 공간이
   빈 여백으로 보였다. width:100%+aspect-ratio로 카드 폭에 맞게 반응형으로
   바꾸고, 내부 652×488 고정 캔버스를 실제 렌더 폭에 맞는 배율로 축소하는 건
   JS(js/application.js atlasScaleThumbnailPreviews())가 담당한다(퍼센트
   기반 transform은 CSS만으로 정확히 계산할 수 없음). */
.thumb-tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.thumb-tpl-card{border:2px solid var(--a2-border);border-radius:var(--a2-r);overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;background:var(--a2-surface)}
.thumb-tpl-card:hover{border-color:var(--a2-accent)}
.thumb-tpl-card.selected{border-color:var(--a2-accent);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.thumb-tpl-preview{position:relative;width:100%;aspect-ratio:652/488;overflow:hidden;background:#000}
.thumb-tpl-preview .thumb-tpl{transform-origin:top left;cursor:default}
.thumb-tpl-card-label{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.thumb-tpl-card-name{font-size:13px;font-weight:800;color:var(--a2-text)}
.thumb-tpl-card-desc{font-size:11px;color:var(--a2-text-faint);margin-top:2px;line-height:1.5}
.thumb-tpl-card-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--a2-border);flex-shrink:0}
.thumb-tpl-card.selected .thumb-tpl-card-check{background:var(--a2-accent);border-color:var(--a2-accent)}
/* 2026-08-12: 사용자 요청 — 썸네일 안의 제목/부제/배지/CTA를 클릭해서 바로
   수정할 수 있어야 한다(전자책 편집과 같은 철학). contentEditable 요소를
   호버하면 점선 아웃라인으로 "여기 클릭해서 수정 가능"을 알려준다(전자책
   편집모드 [data-atlas-field] 힌트와 같은 색). */
.thumb-tpl [data-atlas-thumb-field]{cursor:text}
.thumb-tpl [data-atlas-thumb-field]:hover{outline:1.5px dashed rgba(99,102,241,.75);outline-offset:3px;border-radius:3px}
.thumb-tpl [data-atlas-thumb-field]:focus{outline:1.5px solid rgba(99,102,241,.9);outline-offset:3px;border-radius:3px}
#thumb-export-stage{position:absolute;left:-9999px;top:-9999px}
/* 2026-08-11: 카드별 "AI 이미지 생성" 버튼 + 상태 텍스트(생성 중.../실패
   메시지). 카드 클릭(=선택)과 이 버튼 클릭이 겹치지 않도록 별도 행에 둔다. */
.thumb-tpl-card-actions{padding:0 12px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.thumb-ai-gen-btn{font-size:12px;padding:7px 12px}
.thumb-ai-status{font-size:11px;color:var(--a2-text-faint)}

/* 템플릿 4종 공통 골격 — 652×488 고정(Kmong 표준). 참고 이미지 4장(파일명
   BESTSELLER EDITORIAL/MARKETPLACE IMPACT/PROBLEM SOLVER/PUBLISHER PREMIUM)의
   실제 레이아웃(배지, 상품/문서 목업, 방향 그래픽, CTA 버튼)을 그대로 반영해
   테마마다 구조 자체가 다르므로, 공통 골격은 캔버스 크기/타이포 베이스만 담고
   나머지는 테마별 블록에서 배치한다. */
.thumb-tpl{width:652px;height:488px;box-sizing:border-box;position:relative;font-family:'Pretendard',sans-serif;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.thumb-tpl .tt-badge{position:absolute;top:44px;left:52px;font-size:13px;font-weight:700;padding:8px 18px;border-radius:100px;letter-spacing:.3px}
.thumb-tpl .tt-title{font-size:38px;font-weight:800;line-height:1.32;word-break:keep-all}
.thumb-tpl .tt-subtitle{font-size:16px;line-height:1.6;word-break:keep-all;margin-top:8px;max-width:420px}
.thumb-tpl .tt-cta{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;padding:11px 22px;border-radius:10px}
/* 하단 아이콘 배지 4개 — 참고 이미지에 실제로 있던 문구(T.THEME_ICONS)를
   그대로 얹는다. AI 배경 이미지가 있을 때는 어두운 스크림 위라 흰색으로,
   없을 때(flat 폴백)는 테마별 색으로 보인다(has-ai-bg 오버라이드 참고). */
.thumb-tpl .tt-icons{position:absolute;left:52px;right:52px;bottom:24px;display:flex;gap:20px;flex-wrap:wrap}
.thumb-tpl .tt-icon-chip{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700}
.thumb-tpl .tt-icon-chip svg{width:15px;height:15px;flex-shrink:0}

/* 1) 베스트셀러 에디토리얼 — 이번에 새로 만든 전자책 표지(.cvr/.ctit)와 같은
   다크 네이비+골드 톤을 그대로 재사용해 표지와 썸네일이 한 브랜드로 보인다.
   참고 이미지: 상단 골드 pill 배지 + 좌하단 굵은 흰/골드 타이틀 + 우측 골드
   점 3개가 대각선으로 흩어진 장식. */
.tt-bestseller{background:linear-gradient(165deg,#1c1732 0%,#241d40 100%);display:flex;flex-direction:column;justify-content:center;padding:56px}
.tt-bestseller .tt-badge{position:static;align-self:flex-start;background:transparent;border:1.5px solid var(--gold);color:var(--gold);margin-bottom:26px;padding:8px 18px}
.tt-bestseller .tt-title{color:#fff}
.tt-bestseller .tt-title::after{content:''}
.tt-bestseller .tt-subtitle{color:rgba(255,255,255,.5)}
.tt-bestseller .tt-dots{position:absolute;right:90px;top:150px;width:120px;height:120px}
.tt-bestseller .tt-dots span{position:absolute;border-radius:50%;background:var(--gold)}
.tt-bestseller .tt-dots span:nth-child(1){width:16px;height:16px;top:0;right:0}
.tt-bestseller .tt-dots span:nth-child(2){width:10px;height:10px;top:44px;right:44px;opacity:.75}
.tt-bestseller .tt-dots span:nth-child(3){width:7px;height:7px;top:80px;right:78px;opacity:.5}
.tt-bestseller .tt-icons{color:rgba(255,255,255,.85)}

/* 2) 마켓플레이스 임팩트 — 참고 이미지: 블루 단색 배경, 상단 크림색 pill 배지,
   우측에 흰 라운드 카드(목업 문서: 회색 라인 3개 + 골드 CTA 짧은 바), 좌하단
   굵은 흰 타이틀 + 진한 블루 CTA 버튼. */
.tt-marketplace{background:#3d5ce6}
.tt-marketplace .tt-badge{background:#fdf1dd;color:#3d5ce6}
.tt-marketplace .tt-mock{position:absolute;top:112px;right:70px;width:220px;height:210px;background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 20px 40px rgba(0,0,0,.18)}
.tt-marketplace .tt-mock-line{height:14px;border-radius:7px;background:#e8ecfb;margin-bottom:14px}
.tt-marketplace .tt-mock-line.l1{width:100%}
.tt-marketplace .tt-mock-line.l2{width:82%}
.tt-marketplace .tt-mock-line.l3{width:60%;margin-bottom:22px}
.tt-marketplace .tt-mock-cta{width:56px;height:14px;border-radius:7px;background:#f5b942}
.tt-marketplace .tt-bottom{position:absolute;left:52px;bottom:78px;max-width:320px}
.tt-marketplace .tt-title{color:#fff}
.tt-marketplace .tt-subtitle{color:rgba(255,255,255,.75)}
.tt-marketplace .tt-cta{background:#1c1732;color:#fff}
.tt-marketplace .tt-icons{color:#fff}

/* 3) 문제 해결형 — 참고 이미지: 그린 단색 배경, 상단 골드 pill 배지, 우측 상단
   흰색 대각선 화살표(문제→해결의 상승 방향) + 그 아래 둥근 사각 포인트, 좌하단
   굵은 흰 타이틀 + 골드 CTA 버튼. */
.tt-problem{background:#1c6b4a}
.tt-problem .tt-badge{background:#f5b942;color:#173a2c}
.tt-problem .tt-arrow-wrap{position:absolute;top:96px;right:96px;width:130px;height:130px}
.tt-problem .tt-arrow-box{position:absolute;left:0;bottom:0;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.14)}
.tt-problem .tt-arrow-icon{position:absolute;right:0;top:0;width:56px;height:56px}
.tt-problem .tt-arrow-icon svg{width:100%;height:100%}
.tt-problem .tt-bottom{position:absolute;left:52px;bottom:78px;max-width:340px}
.tt-problem .tt-title{color:#fff}
.tt-problem .tt-subtitle{color:rgba(255,255,255,.7)}
.tt-problem .tt-cta{background:#f5b942;color:#173a2c}
.tt-problem .tt-icons{color:#fff}

/* 4) 퍼블리셔 프리미엄 — 참고 이미지: 크림 배경, 중앙 상단에 흰색 도서 목업
   카드(가는 블루 룰 라인 + "EBOOK" 라벨 + 회색 텍스트 라인)와 그 아래 그림자
   타원, 좌하단 절제된 다크 타이틀. 배지/CTA 없이 가장 차분한 톤. */
.tt-publisher{background:#f5f1e8}
.tt-publisher .tt-card{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:150px;height:200px;background:#fff;border-radius:10px;box-shadow:0 24px 40px rgba(28,23,50,.12);padding:26px 22px;box-sizing:border-box}
.tt-publisher .tt-card-rule{width:52px;height:2px;background:#3d5ce6;margin-bottom:18px}
.tt-publisher .tt-card-ebook{font-size:12px;font-weight:800;letter-spacing:1.5px;color:#1c1732;margin-bottom:22px}
.tt-publisher .tt-card-line{height:2px;background:#e4e0d6;margin-bottom:10px}
.tt-publisher .tt-card-line.l3{width:70%}
.tt-publisher .tt-card-shadow{position:absolute;left:50%;top:280px;transform:translateX(-50%);width:170px;height:26px;border-radius:50%;background:rgba(28,23,50,.08)}
.tt-publisher .tt-bottom{position:absolute;left:52px;bottom:78px;max-width:400px}
.tt-publisher .tt-title{color:#1c1732;font-size:30px}
.tt-publisher .tt-subtitle{color:#7a7566}
.tt-publisher .tt-icons{color:#1c1732}

/* AI 배경 이미지가 생성되면 크림 배경 대신 어두운 왕관+월계관 사진 위에
   스크림이 깔린다 — 퍼블리셔 프리미엄만 원래 다크 텍스트라서 흰색으로
   뒤집어야 계속 읽힌다(다른 3개 테마는 이미 흰 텍스트라 그대로 둬도 된다). */
.tt-publisher.has-ai-bg .tt-title{color:#fff}
.tt-publisher.has-ai-bg .tt-subtitle{color:rgba(255,255,255,.75)}
.tt-publisher.has-ai-bg .tt-icons{color:#fff}