/* 레주매틱(resumatic) — styles.css
 * 시각 단일 진실원천 = projects/resumatic/DESIGN.md frontmatter.
 * 프로페셔널·차분(뉴트럴 + 절제된 잉크 액센트). 미리보기 이력서는 '인쇄용 종이'.
 * 양 블록 :root[data-theme="light|dark"] = DESIGN.md themes.light/dark 1:1 미러.
 * base :root = 라이트(1차 모드) no-JS 폴백 + 공유 구조 토큰.
 */

/* ===== 공유 구조 토큰 (색 외 — 모드 무관) ===== */
:root {
  --font-body: Inter, Pretendard, system-ui, -apple-system, sans-serif;
  --font-display: "Source Serif 4", Pretendard, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-display: 26px; --lh-display: 1.12; --fw-display: 600;
  --fs-h1: 20px; --fw-h1: 600;
  --fs-h2: 15px; --fw-h2: 600;
  --fs-body: 15px; --lh-body: 1.6;
  --fs-small: 13px; --lh-small: 1.5;
  --fs-micro: 11px; --lh-micro: 1.3;

  --sp-xs: 6px; --sp-sm: 10px; --sp-md: 16px; --sp-lg: 22px; --sp-xl: 36px;
  --r-base: 12px; --r-sm: 8px; --r-pill: 999px;

  --t-fast: 120ms; --t-base: 180ms;
  --ease: cubic-bezier(.2,.9,.25,1);

  --shell-max: 1180px;
  --editor-w: 460px;
  --paper-w: 820px;     /* A4 비율 근사 (210mm) */

  /* === 라이트 1차 모드 팔레트 (no-JS 폴백) === */
  --bg: #eef1f5; --surface: #ffffff; --surface-2: #f4f6f9;
  --ink: #16202e; --muted: #5d6b82; --faint: #97a2b5; --line: #dde3ec;
  --accent: #2b5fd7; --accent-deep: #1f47ad; --accent-soft: #e7eefa; --accent-ink: #ffffff;
  --ok: #2f9e6b; --warn: #c08a1e; --danger: #d23b3b;

  /* 인쇄용 종이 (양 모드 동일 — 인쇄는 항상 하얀 종이) */
  --paper-bg: #ffffff; --paper-ink: #16202e; --paper-ink-soft: #4a5668; --paper-line: #d4dae3; --paper-accent: #16202e;

  --shadow-card: 0 1px 2px rgba(22,32,46,.06), 0 0 0 1px var(--line);
  --shadow-lift: 0 10px 30px -18px rgba(22,32,46,.45);
  --shadow-paper: 0 16px 40px -24px rgba(22,32,46,.30), 0 0 0 1px var(--line);

  /* 스위처 브릿지 */
  --i18n-switch-bg: var(--surface-2); --i18n-switch-border: var(--line);
  --i18n-switch-fg: var(--ink); --i18n-switch-active-bg: var(--accent-soft);
  --i18n-switch-active-fg: var(--accent); --i18n-switch-menu-bg: var(--surface);
  --i18n-switch-menu-border: var(--line); --i18n-switch-radius: var(--r-sm);
  --theme-switch-bg: var(--surface-2); --theme-switch-border: var(--line);
  --theme-switch-fg: var(--muted); --theme-switch-active-bg: var(--accent);
  --theme-switch-active-fg: var(--accent-ink); --theme-switch-radius: var(--r-sm);
}

/* ===== LIGHT — 1차 (DESIGN.md themes.light 1:1) ===== */
:root[data-theme="light"] {
  --bg: #eef1f5; --surface: #ffffff; --surface-2: #f4f6f9;
  --ink: #16202e; --muted: #5d6b82; --faint: #97a2b5; --line: #dde3ec;
  --accent: #2b5fd7; --accent-deep: #1f47ad; --accent-soft: #e7eefa; --accent-ink: #ffffff;
  --ok: #2f9e6b; --warn: #c08a1e; --danger: #d23b3b;
  --shadow-lift: 0 10px 30px -18px rgba(22,32,46,.45);
}

/* ===== DARK (DESIGN.md themes.dark 1:1) ===== */
:root[data-theme="dark"] {
  --bg: #11151d; --surface: #181d27; --surface-2: #1e2430;
  --ink: #e7ecf4; --muted: #9aa6bb; --faint: #69748a; --line: #2a3140;
  --accent: #7aa2ff; --accent-deep: #5b86e8; --accent-soft: #1f2a44; --accent-ink: #0c1018;
  --ok: #4cc38a; --warn: #e0b25a; --danger: #ef6b6b;
  --shadow-lift: 0 12px 34px -18px rgba(0,0,0,.65);
  --shadow-paper: 0 16px 44px -20px rgba(0,0,0,.7), 0 0 0 1px var(--line);
}

/* ===== Reset / base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font-family: inherit; }

/* ===== Topbar / brand ===== */
.topbar {
  max-width: var(--shell-max); margin: 0 auto; padding: 22px clamp(16px,4vw,28px) 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  color: var(--accent-ink);
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  box-shadow: 0 8px 22px -12px var(--accent);
}
.brand h1 { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-display); margin: 0; line-height: 1.1; }
.brand p { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.brand .sub { color: var(--accent); }
.switchers { display: flex; align-items: center; gap: 8px; }

/* ===== Badges ===== */
.badges { max-width: var(--shell-max); margin: 0 auto; padding: 4px clamp(16px,4vw,28px) 0; display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); padding: 5px 10px; border-radius: var(--r-pill);
}

/* ===== Mobile tabs (hidden on wide screens) ===== */
.tabs { display: none; }

/* ===== Shell: editor | preview ===== */
.shell {
  max-width: var(--shell-max); margin: 14px auto 0; padding: 0 clamp(16px,4vw,28px) 40px;
  display: grid; grid-template-columns: var(--editor-w) 1fr; gap: 22px; align-items: start;
}
.editor { display: flex; flex-direction: column; gap: 14px; }

/* ===== Toolbar ===== */
.toolbar { display: flex; align-items: center; gap: 8px; }
.toolbar .grow { flex: 1; }

/* ===== Cards / fields ===== */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-base);
  padding: 16px; box-shadow: var(--shadow-card); display: grid; gap: 12px;
}
.card > legend, .card-title {
  font-size: var(--fs-h2); font-weight: var(--fw-h2); color: var(--ink); padding: 0 4px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full, .field[class~="full"] { grid-column: 1 / -1; }
.field > span { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
input[type=text], input[type=email], input[type=tel], textarea, select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font-family: inherit; font-size: 14px; padding: 10px 11px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 44px; line-height: 1.5; }

/* ===== Repeating items (work / education) ===== */
.repeat { display: flex; flex-direction: column; gap: 12px; }
.repeat:empty::after {
  content: attr(data-empty); display: block; padding: 18px; text-align: center;
  color: var(--faint); font-size: var(--fs-small); border: 1px dashed var(--line); border-radius: var(--r-sm);
}
.item {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px;
  display: grid; gap: 10px;
}
.item-head { display: flex; align-items: center; gap: 6px; }
.item-head .idx { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); }
.item-head .item-actions { margin-left: auto; display: flex; gap: 4px; }
.item .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item .row-date { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.present-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.present-check input { width: auto; }

/* ===== Buttons ===== */
.btn-primary {
  border: 0; cursor: pointer; color: var(--accent-ink);
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: var(--r-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 6px 16px -10px var(--accent);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--accent); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.export { background: linear-gradient(150deg, var(--ink), var(--accent-deep)); box-shadow: var(--shadow-lift); }
.btn-ghost {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost.danger { color: var(--danger); }
.btn-ghost.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn-icon {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 13px; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.btn-icon.danger:hover { color: var(--danger); }
.btn-add {
  border: 1px dashed var(--line); background: transparent; color: var(--accent); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 10px; border-radius: var(--r-sm); transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-add:hover { background: var(--accent-soft); border-color: var(--accent); }
.autosave { font-size: var(--fs-micro); color: var(--faint); margin: -2px 2px; }
.action-bar { display: flex; gap: 10px; position: sticky; bottom: 12px; }
.action-bar .btn-primary { flex: 1; }

/* ===== Preview pane ===== */
.preview-pane { position: sticky; top: 14px; }
.preview-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; flex-wrap: wrap; }
.preview-head > span:first-child { font-size: var(--fs-h2); font-weight: var(--fw-h2); color: var(--muted); }
.note-print { font-size: var(--fs-micro); color: var(--faint); }

.resume {
  background: var(--paper-bg); color: var(--paper-ink);
  width: 100%; max-width: var(--paper-w); margin: 0 auto; padding: 48px 56px;
  border-radius: var(--r-base); box-shadow: var(--shadow-paper);
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; min-height: 600px;
}
.r-head { text-align: center; border-bottom: 2px solid var(--paper-accent); padding-bottom: 12px; margin-bottom: 16px; }
.r-name { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.r-headline { margin: 4px 0 0; font-size: 14px; color: var(--paper-ink-soft); font-weight: 500; }
.r-contact { margin: 6px 0 0; font-size: 12px; color: var(--paper-ink-soft); word-break: break-word; }
.r-section { margin-bottom: 14px; }
.r-section:empty, .r-section.is-empty { display: none; }
.r-section > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-accent); margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--paper-line);
}
.r-summary { margin: 0; white-space: pre-wrap; }
.r-skills { margin: 0; }
.r-entry { margin-bottom: 12px; }
.r-entry:last-child { margin-bottom: 0; }
.r-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.r-entry-title { font-weight: 700; font-size: 14px; }
.r-entry-org { font-weight: 600; color: var(--paper-ink-soft); }
.r-entry-date { font-size: 12px; color: var(--paper-ink-soft); white-space: nowrap; font-family: var(--font-mono); }
.r-bullets { margin: 6px 0 0; padding-left: 18px; }
.r-bullets li { margin-bottom: 3px; }
.r-edu-line { margin-bottom: 6px; }
.r-edu-line:last-child { margin-bottom: 0; }
.r-edu-main { font-weight: 700; }
.r-edu-sub { color: var(--paper-ink-soft); }
.r-empty-hint { color: var(--paper-ink-soft); font-style: italic; }

/* ===== Info / FAQ ===== */
.info { max-width: var(--shell-max); margin: 0 auto; padding: 8px clamp(16px,4vw,28px) 40px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.info h2 { font-size: var(--fs-h2); color: var(--ink); margin: 22px 0 8px; }
.info > h2:first-child { margin-top: 0; }
.info p { margin: 0 0 8px; }
.faq { margin: 4px 0 0; }
.faq dt { color: var(--ink); font-weight: 600; margin-top: 12px; }
.faq dd { margin: 4px 0 0; }

/* ===== Footer ===== */
.foot { max-width: var(--shell-max); margin: 0 auto; padding: 0 clamp(16px,4vw,28px) 80px; text-align: center; }
.foot a { color: var(--muted); font-size: 12px; text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  padding: 11px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity var(--t-base), transform var(--t-base);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  :root { --editor-w: 1fr; }
  .shell { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
  .tabs {
    display: flex; gap: 6px; max-width: var(--shell-max); margin: 8px auto 0;
    padding: 0 clamp(16px,4vw,28px);
  }
  .tab {
    flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    font-size: 14px; font-weight: 600; padding: 9px; border-radius: var(--r-pill); cursor: pointer; transition: all var(--t-fast);
  }
  .tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .shell[data-view="preview"] .editor { display: none; }
  .shell:not([data-view="preview"]) .preview-pane { display: none; }
}
@media (max-width: 540px) {
  .grid2, .item .row2, .item .row-date { grid-template-columns: 1fr; }
  .resume { padding: 32px 24px; }
  .r-name { font-size: 22px; }
}

/* ===== PRINT / PDF (@media print) =====
 * 미리보기 이력서만 단일컬럼 실제 텍스트로 인쇄 → 무워터마크, ATS 파싱 가능.
 * 화면 UI(편집기/헤더/FAB/탭)는 모두 숨김.
 */
@media print {
  @page { size: A4; margin: 14mm 14mm; }
  html, body { background: #ffffff !important; }
  body * { visibility: hidden; }
  .resume, .resume * { visibility: visible; }
  .resume {
    position: absolute; left: 0; top: 0; width: 100%; max-width: none;
    margin: 0; padding: 0; box-shadow: none; border-radius: 0;
    color: #16202e; font-size: 11pt; line-height: 1.4;
  }
  .r-name { color: #16202e; }
  .r-headline, .r-contact, .r-entry-org, .r-entry-date, .r-edu-sub, .r-summary, .r-skills { color: #4a5668; }
  .r-section > h3, .r-head { border-color: #16202e; color: #16202e; }
  .r-section > h3 { border-bottom: 1px solid #d4dae3; }
  .pmp-fab, .toast, .topbar, .badges, .tabs, .info, .foot, .preview-head { display: none !important; }
  .r-section { page-break-inside: avoid; }
  .r-entry { page-break-inside: avoid; }
}