/* HWP 변환기 — Notion 풍 디자인 + 한국어 가독성(Pretendard, line-height 1.6+) */

:root {
  /* 구조 색 */
  --canvas-soft: #f6f5f4;   /* 따뜻한 종이빛 캔버스 */
  --surface: #ffffff;
  --ink: #1a1a1a;           /* near-black (true black 95%) */
  --ink-secondary: #31302e;
  --ink-muted: #615d59;
  --ink-faint: #a39e98;
  --hairline: #e6e6e6;

  /* 단 하나의 구조 액센트 — Notion 블루 */
  --primary: #0075de;
  --primary-active: #005bab;
  --secondary: #213183;     /* 딥 인디고 (단 한 번의 dark 모먼트) */

  /* 장식 전용 스티커 팔레트 */
  --sky: #62aef0;
  --purple: #d6b6f6;
  --pink: #ff64c8;
  --orange: #dd5b00;
  --teal: #2a9d99;
  --green: #1aae39;

  /* 모서리 */
  --r-xs: 4px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* 그림자 — 거의 안 보이는 다층 */
  --shadow-1: 0 0.175px 1.041px rgba(0,0,0,0.01), 0 0.8px 2.925px rgba(0,0,0,0.02),
              0 2.025px 7.847px rgba(0,0,0,0.027), 0 4px 18px rgba(0,0,0,0.04);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.03), 0 6px 16px rgba(0,0,0,0.06), 0 23px 52px rgba(0,0,0,0.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas-soft);
  color: var(--ink);
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    system-ui, 'Segoe UI', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.6;            /* 한국어 가독성 — 최소 150% 권장 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.numerals { font-feature-settings: 'tnum' 1; }

/* ───────── 레이아웃 ───────── */
.container { max-width: 980px; margin: 0 auto; padding: 0 24px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,245,244,0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); }
.wordmark .glyph {
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
}
.nav-hint { font-size: 13.5px; color: var(--ink-muted); }

/* ───────── 히어로 ───────── */
.hero { padding: 64px 0 24px; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1px;
  padding: 5px 12px; border-radius: var(--r-full);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-1);
}
.hero h1 {
  font-size: 48px; font-weight: 700; line-height: 1.12; letter-spacing: -1.6px;
  margin: 20px auto 14px; max-width: 18ch; color: var(--ink);
}
.hero p.sub {
  font-size: 17px; color: var(--ink-muted); line-height: 1.65;
  max-width: 30ch; margin: 0 auto 28px;
}
.dots { display: inline-flex; gap: 7px; margin-bottom: 18px; }
.dots i { width: 9px; height: 9px; border-radius: var(--r-full); display: inline-block; }

/* ───────── 드롭존 ───────── */
.dropzone {
  background: var(--surface);
  border: 1.5px dashed var(--hairline);
  border-radius: var(--r-xl);
  padding: 44px 28px;
  max-width: 620px; margin: 0 auto;
  cursor: pointer; transition: border-color 140ms, background 140ms, box-shadow 140ms;
  box-shadow: var(--shadow-1);
}
.dropzone:hover { border-color: var(--primary); }
.dropzone.drag {
  border-color: var(--primary); background: #f3f9ff;
  box-shadow: 0 0 0 4px rgba(0,117,222,0.10), var(--shadow-1);
}
.dropzone .dz-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: var(--r-lg);
  background: #eaf4ff; color: var(--primary); display: grid; place-items: center;
}
.dropzone .dz-title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 6px; }
.dropzone .dz-sub { font-size: 13.5px; color: var(--ink-faint); }
.dropzone .dz-cta {
  display: inline-block; margin-top: 18px;
  background: var(--primary); color: #fff; font-weight: 500; font-size: 15px;
  padding: 11px 22px; border-radius: var(--r-full); transition: background 120ms, transform 80ms;
}
.dropzone:hover .dz-cta { background: var(--primary-active); }
.reassure { margin-top: 18px; font-size: 13px; color: var(--ink-faint); }

/* ───────── 기능 카드 ───────── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 56px 0 24px; }
.fcard {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
}
.fcard .band { height: 8px; }
.fcard .body { padding: 22px 20px; }
.fcard h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 8px; }
.fcard p { font-size: 14px; color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* ───────── 결과 화면 ───────── */
.result { display: none; padding: 32px 0 40px; }
.result.show { display: block; }

.filebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 18px;
}
.filebar .meta { min-width: 0; }
.filebar .fname { font-weight: 600; font-size: 16px; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filebar .fmeta { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }
.badge {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--ink-secondary);
  background: var(--canvas-soft); border: 1px solid var(--hairline);
  padding: 2px 9px; border-radius: var(--r-full); margin-left: 6px;
}
.btn-util {
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: background 120ms;
}
.btn-util:hover { background: var(--canvas-soft); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 0; }
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--ink-muted);
  padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.panel { display: none; }
.panel.show { display: block; }

.toolbar { display: flex; align-items: center; gap: 8px; padding: 14px 0; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 500;
  border: none; border-radius: var(--r-full); padding: 9px 18px; cursor: pointer;
  transition: background 120ms, transform 80ms;
}
.btn-pill:hover { background: var(--primary-active); }
.btn-pill:active { transform: scale(0.97); }
.btn-pill.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.btn-pill.ghost:hover { background: var(--canvas-soft); }

/* 콘텐츠 패널 박스 */
.viewbox {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
}

/* 원본(rhwp SVG) */
#origScroll { max-height: 76vh; overflow: auto; background: #f2f1ef; padding: 22px; }
#origPages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
#origPages .page { background: #fff; box-shadow: var(--shadow-1); }
#origPages .page svg { display: block; max-width: 100%; height: auto; }
#origPages .page img { display: block; max-width: 100%; height: auto; }
/* PDF·오피스 원본 — 브라우저 내장 / MS Office Online 뷰어 */
#origPages .pdf-frame,
#origPages .office-frame { width: 100%; height: 72vh; border: 0; background: #fff; box-shadow: var(--shadow-1); }
.zoomctl { display: inline-flex; align-items: center; gap: 4px; }
.zoomctl button {
  width: 30px; height: 30px; border: 1px solid var(--hairline); background: var(--surface);
  border-radius: var(--r-md); cursor: pointer; font-size: 16px; color: var(--ink-secondary);
}
.zoomctl button:hover { background: var(--canvas-soft); }
.zoomctl .lvl { min-width: 46px; text-align: center; font-size: 13px; color: var(--ink-muted); }

/* 마크다운 코드 */
#mdText {
  margin: 0; padding: 22px; max-height: 76vh; overflow: auto;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; color: var(--ink-secondary);
  white-space: pre-wrap; word-break: break-word;
}

/* HTML 미리보기 */
#htmlPrev { padding: 28px 32px; max-height: 76vh; overflow: auto; }
#htmlPrev :is(h1,h2,h3,h4) { letter-spacing: -0.4px; line-height: 1.35; }
#htmlPrev table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
#htmlPrev th, #htmlPrev td { border: 1px solid var(--hairline); padding: 8px 10px; text-align: left; vertical-align: top; }
#htmlPrev th { background: var(--canvas-soft); font-weight: 600; }
#htmlPrev img { max-width: 100%; height: auto; }
#htmlPrev p { line-height: 1.7; }

/* 상태/로딩 */
.state { text-align: center; padding: 60px 20px; color: var(--ink-muted); }
.spinner {
  width: 26px; height: 26px; border: 3px solid var(--hairline); border-top-color: var(--primary);
  border-radius: var(--r-full); animation: spin 0.8s linear infinite; margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state .big { font-size: 16px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.note {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff8ec; border: 1px solid #f3e2bf; color: #7a5b16;
  border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; margin: 14px 0 0;
}

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; font-size: 14px; padding: 11px 18px; border-radius: var(--r-full);
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity 180ms, transform 180ms; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ───────── 푸터 ───────── */
.footer { background: var(--canvas-soft); border-top: 1px solid var(--hairline); margin-top: 48px; }
.footer-inner { padding: 28px 0; font-size: 13px; color: var(--ink-muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 반응형 */
@media (max-width: 760px) {
  .hero { padding: 44px 0 16px; }
  .hero h1 { font-size: 34px; letter-spacing: -1px; }
  .hero p.sub { font-size: 16px; }
  .features { grid-template-columns: 1fr; }
  .filebar { flex-direction: column; align-items: flex-start; }
  .nav-hint { display: none; }
}