/* ============================================================
   My Life — 내 인생  ·  flip-book report stylesheet
   Black text, white sheets. Page-by-page like a book.
   ============================================================ */
:root{
  --sheet-w:620px;
  --sheet-h:877px;          /* ≈ A4 ratio (1 : 1.414) */
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:"Times New Roman","Batang",serif;
  color:#000;
  background:#e9e9ec;
  line-height:1.6;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* ---- toolbar ---- */
.toolbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; background:#fff; border-bottom:1px solid #ccc;
}
.title-mini{ font-size:13pt; }
.ui-btn{
  font-family:Arial,sans-serif; font-size:10.5pt;
  padding:5px 13px; border:1px solid #000; background:#fff; cursor:pointer;
}
.ui-btn:hover{ background:#000; color:#fff; }

/* ---- stage ---- */
.stage{
  flex:1 1 auto; position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:0; overflow:hidden;
}
.book{
  position:relative;
  width:var(--sheet-w); height:var(--sheet-h);
  transform-origin:center center;
}

/* ---- a sheet ---- */
.page{
  position:absolute; inset:0;
  background:#fff;
  border:1px solid #cfcfcf;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:60px 60px 70px;
  font-size:12pt;
  overflow:hidden;
  opacity:0; visibility:hidden;
}
.page.active{ opacity:1; visibility:visible; }
.page.cover-page{ display:flex; flex-direction:column; justify-content:center; text-align:center; }

/* page number, bottom-right */
.folio{
  position:absolute; bottom:26px; right:60px;
  font-size:10.5pt; color:#000;
}

/* ---- title page ---- */
.title-page{ text-align:center; }
.doc-title{ font-size:24pt; font-weight:bold; margin:0 0 4px; }
.doc-title-kr{
  font-family:"Malgun Gothic","Batang",serif;
  font-size:16pt; font-weight:normal; margin:0 0 22px;
}
.epigraph{ font-style:italic; margin:22px 0; }
.doc-meta{ font-size:11pt; margin-top:18px; }
.hr{ border:none; border-top:1px solid #000; margin:24px 0; }

/* ---- contents ---- */
.toc-title{ font-size:15pt; font-weight:bold; margin:0 0 12px; }
.toc-row{
  display:flex; align-items:baseline;
  text-decoration:none; color:#000; margin:3px 0;
}
.toc-row .num{ flex:0 0 auto; min-width:40px; }
.toc-row .txt{ flex:0 1 auto; min-width:0; overflow-wrap:break-word; }
.toc-row .leader{ flex:1 1 auto; border-bottom:1px dotted #000; margin:0 5px; transform:translateY(-3px); }
.toc-row .pg{ flex:0 0 auto; }
.toc-row.lvl1{ font-weight:bold; margin-top:9px; }
.toc-row.lvl2{ padding-left:26px; font-weight:normal; }
.toc-row.lvl2 .num{ min-width:46px; }
.toc-row.lvl3{ padding-left:54px; font-weight:normal; }
.toc-row.lvl3 .num{ min-width:58px; }
/* sub-rows have no leader/page number — let the text take the rest & wrap */
.toc-row.lvl2 .txt, .toc-row.lvl3 .txt{ flex:1 1 auto; }
.toc-row .tp{ font-style:italic; font-weight:normal; }
a.toc-row:hover .txt{ text-decoration:underline; }

/* ---- chapters / narrative ---- */
.chapter-heading{ font-size:16pt; font-weight:bold; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid #000; }
.chapter-heading .ch-no{ font-weight:bold; }
.chapter-heading .tp{ font-style:italic; font-weight:normal; font-size:11pt; }
.chapter-heading .ch-kr{ font-family:"Malgun Gothic",serif; font-size:12pt; font-weight:normal; }

/* planned (not-yet-written) chapters */
.todo{ font-style:italic; color:#777; margin:0 0 18px; }
.plan-label{ font-weight:bold; font-size:11pt; margin:0 0 6px; }
.plan-line{ margin:3px 0; }
.plan-line .pnum{ display:inline-block; min-width:44px; }
.plan-line.d2{ padding-left:24px; } .plan-line.d2 .pnum{ min-width:48px; }
.plan-line.d3{ padding-left:52px; } .plan-line.d3 .pnum{ min-width:60px; }
.plan-line .tp{ font-style:italic; }

.pair{ margin:0 0 10px; }
.pair .en{ margin:0; }
.pair .ko{ margin:1px 0 0; font-family:"Malgun Gothic","Batang",serif; white-space:pre-line; }

.mini-rule{ width:60px; border-top:1px solid #999; margin:14px 0; }
.closing{ font-style:italic; text-align:center; }

/* ---- nav arrows ---- */
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid #999; background:#fff; color:#000;
  font-size:26px; line-height:1; cursor:pointer; z-index:5;
}
.nav:hover{ background:#000; color:#fff; }
.nav:disabled{ opacity:.25; cursor:default; }
.prev{ left:24px; } .next{ right:24px; }

/* ---- counter ---- */
.counter{
  flex:0 0 auto; text-align:center;
  padding:8px; background:#fff; border-top:1px solid #ccc;
  font-size:11pt;
}

/* ---- off-screen measuring area ---- */
.measure{
  position:absolute; left:-9999px; top:0;
  width:500px;                       /* = sheet content width (620 − 120) */
  font-size:12pt; visibility:hidden;
}

/* ============================================================
   PRINT  ·  every page on its own sheet, number bottom-right
   ============================================================ */
@media print{
  @page{ size:A4; margin:16mm; }
  html,body{ height:auto; overflow:visible; background:#fff; display:block; }
  .no-print{ display:none !important; }
  .stage{ display:block; overflow:visible; }
  .book{ width:auto; height:auto; transform:none !important; }
  .page{
    position:relative;                 /* anchor the folio */
    inset:auto;
    opacity:1 !important; visibility:visible !important;
    border:none; box-shadow:none;
    height:auto; min-height:262mm;      /* ≈ A4 printable height → folio sits at the very bottom */
    padding:0 0 14mm; overflow:visible;
    page-break-after:always;
  }
  .page:last-child{ page-break-after:auto; }
  .folio{
    position:absolute; bottom:0; right:0;   /* bottom-right corner of every printed page */
    margin:0; font-size:10.5pt;
  }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}