/* =========================================================================
   style.css — 연습장
   테마: :root(라이트) / [data-theme="dark"](다크) 토큰 스왑
   ========================================================================= */

:root {
  --bg:        #eceae5;
  --paper:     #ffffff;
  --ink:       #1c1c1e;
  --ink-soft:  #6b6b70;
  --line:      #d9d6d0;
  --rail:      #f5f3ef;
  --accent:    #2f6fb5;
  --h2-color:  #1d5c9e;   /* 제목2 짙은 파랑 */
  --tab-on:    #ffffff;
  --danger:    #c0392b;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --scroll-thumb: rgba(0,0,0,.20);
}

[data-theme="dark"] {
  --bg:        #16171a;
  --paper:     #1e2024;
  --ink:       #e6e4e0;
  --ink-soft:  #9a9aa2;
  --line:      #34363c;
  --rail:      #202226;
  --accent:    #6aa9e9;
  --h2-color:  #7fb3f0;   /* 다크에서는 밝은 파랑으로 대비 확보 */
  --tab-on:    #2a2d33;
  --danger:    #e57368;
  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --scroll-thumb: rgba(255,255,255,.22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 "Pretendard", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  transition: background .2s, color .2s;
}

/* ── 상단 바 ───────────────────────────────────────────────── */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--rail);
  border-bottom: 1px solid var(--line);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }

.picker {
  font: inherit;
  padding: 5px 8px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.btn-primary, .btn-ghost {
  font: inherit;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: filter .15s;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-ghost   { background: var(--paper); color: var(--ink); }
.btn-primary:hover, .btn-ghost:hover { filter: brightness(1.08); }

.save-state { font-size: 12.5px; color: var(--ink-soft); min-width: 62px; text-align: right; }
.save-state[data-state="dirty"]  { color: var(--danger); }
.save-state[data-state="saving"] { color: var(--accent); }

/* ── 날짜 인덱스 ───────────────────────────────────────────── */
.date-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  overflow-x: auto;
  background: var(--rail);
  border-bottom: 1px solid var(--line);

  /* 스크롤바는 감추되 스크롤(Shift+휠, 트랙패드)은 그대로 동작합니다 */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 구형 Edge */
}
.date-strip::-webkit-scrollbar { width: 0; height: 0; display: none; }

.date-tab {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 5px 9px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background .12s;
}
.date-tab:hover { background: var(--paper); }
.date-tab.active {
  color: var(--ink);
  font-weight: 700;
  background: var(--tab-on);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.date-tab.sunday   { color: #d05a5a; }
.date-tab.saturday { color: #5a7fd0; }
/* 필기가 있는 날 표시 */
.date-tab.has-note::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── 작업 영역 ─────────────────────────────────────────────── */
.workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.paper-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 28px 20px 120px;
  display: flex;
  justify-content: center;

  /* 트랙(배경) 없이 손잡이만 떠 있게 */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;   /* 썸 / 트랙 */
}

/* WebKit 계열(크롬·사파리·엣지): 트랙을 투명하게 두어 뒷배경이 그대로 비칩니다 */
.paper-wrap::-webkit-scrollbar              { width: 10px; background: transparent; }
.paper-wrap::-webkit-scrollbar-track        { background: transparent; }
.paper-wrap::-webkit-scrollbar-corner       { background: transparent; }
.paper-wrap::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 6px;
  border: 3px solid transparent;   /* 여백을 만들어 얇아 보이게 */
  background-clip: content-box;
}
.paper-wrap::-webkit-scrollbar-thumb:hover { background-clip: content-box; opacity: 1; }

/* 우측 과목 목록도 동일하게 */
.subject-rail {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.subject-rail::-webkit-scrollbar       { width: 8px; background: transparent; }
.subject-rail::-webkit-scrollbar-track { background: transparent; }
.subject-rail::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.paper {
  /* A4 실측: 210mm × 297mm, 여백 25mm/20mm */
  width: 210mm;
  min-height: 297mm;
  padding: 25mm 20mm;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: var(--shadow);
  outline: none;
  transition: background .2s;
}

/* 창이 A4보다 좁으면 가로 스크롤 대신 줄여서 보여줍니다 */
@media (max-width: 900px) {
  .paper { width: 100%; min-height: 0; padding: 24px 20px; }
}
.paper:empty::before {
  content: "여기에 필기하세요";
  color: var(--ink-soft);
  opacity: .55;
}

/* ── 제목 스타일 ───────────────────────────────────────────────
   제목1: 가운데 정렬 / 제목2~: 왼쪽 정렬
   제목2: 짙은 파랑 / 제목3: 밑줄 / 제목4~6: 크기로 구별
   ────────────────────────────────────────────────────────────── */
.paper h1, .paper h2, .paper h3,
.paper h4, .paper h5, .paper h6 {
  margin: 1.5em 0 .6em;
  line-height: 1.35;
  font-weight: 700;
}
.paper h1 { font-size: 2.00em; text-align: center; }
.paper h2 { font-size: 1.60em; text-align: left; color: var(--h2-color); }
.paper h3 { font-size: 1.34em; text-align: left; text-decoration: underline;
            text-underline-offset: 4px; }
.paper h4 { font-size: 1.18em; text-align: left; }
.paper h5 { font-size: 1.06em; text-align: left; }
.paper h6 { font-size: 0.96em; text-align: left; }

.paper p  { margin: 0 0 .55em; }
.paper ul, .paper ol { margin: 0 0 .55em; padding-left: 1.5em; }
.paper a { color: var(--accent); }

/* ── 우측 과목 인덱스 ──────────────────────────────────────── */
.subject-rail {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 8px;
  background: var(--rail);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.subject-list { display: flex; flex-direction: column; gap: 6px; }

.subject-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s;
}
.subject-tab:hover { background: var(--paper); }
.subject-tab.active {
  color: var(--ink);
  font-weight: 700;
  background: var(--tab-on);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.subject-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}
/* 더블클릭 편집 중 */
.subject-name[contenteditable="true"] {
  white-space: normal;
  overflow: visible;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 3px;
}
.subject-x {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  line-height: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
}
.subject-tab:hover .subject-x { opacity: .65; }
.subject-x:hover { opacity: 1; color: var(--danger); background: var(--bg); }

.add-subject {
  padding: 8px;
  font-size: 17px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 7px;
  cursor: pointer;
}
.add-subject:hover { color: var(--accent); border-color: var(--accent); }

/* ── 토스트 ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
  z-index: 50;
}
.toast-undo {
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}


/* =========================================================================
   인쇄 · PDF 저장 (⌘P / Ctrl+P → "PDF로 저장")
   화면 UI를 모두 숨기고 종이만 A4 한 장으로 출력합니다.
   다크 모드여도 인쇄물은 항상 흰 바탕 + 검은 글씨로 강제합니다.
   ========================================================================= */
@page { size: A4; margin: 0; }

@media print {
  :root, [data-theme="dark"] {
    --bg:       #ffffff;
    --paper:    #ffffff;
    --ink:      #000000;
    --ink-soft: #555555;
    --line:     #cccccc;
    --h2-color: #1d5c9e;
    --accent:   #1d5c9e;
    --shadow:   none;
  }

  html, body { height: auto; background: #fff; }

  .topbar, .date-strip, .subject-rail, .toast { display: none !important; }

  .workspace  { display: block; }
  .paper-wrap { display: block; overflow: visible; padding: 0; }

  .paper {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .paper:empty::before { content: none; }

  /* 제목이 페이지 맨 아래에 홀로 남지 않도록 */
  .paper h1, .paper h2, .paper h3,
  .paper h4, .paper h5, .paper h6 { break-after: avoid; page-break-after: avoid; }
  .paper p, .paper li { orphans: 2; widows: 2; }
}