/* ==========================================================================
   Lined Notebook 3D Page Flip - Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Outfit:wght@400;600&display=swap');

@font-face {
  font-family: 'IsYun';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

:root {
  /* 일기장(노트) 안의 글자는 전부 이 폰트로 통일 */
  --font-note-title: 'IsYun', cursive;
  --font-note-body: 'IsYun', cursive;
  --font-ui: 'Noto Sans KR', 'Outfit', sans-serif;

  --bg-desk: radial-gradient(circle at center, #2d3748 0%, #1a202c 100%);
  --paper-bg: #fffdfa;
  --paper-lines: #e2e8f0;
  --paper-margin-line: #522424;
  --paper-text: #2d3748;
  --paper-border: #cbd5e0;

  --book-width: 960px;
  --book-height: 620px;
  /* Sticker-tab slide timing - kept in sync with the turn.js `duration`
     option in script.js, so the bookmark tab lands exactly when the real
     page-turn animation does. */
  --flip-dur: 0.6s;
  --flip-ease: ease-in-out;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-note-body);
  background: var(--bg-desk);
  color: var(--paper-text);
  user-select: none;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* --- Header Bar --- */
.header-bar {
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(26, 32, 44, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  font-size: 1.5rem;
}

.brand-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.1rem;
  color: #f7fafc;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-ui {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #edf2f7;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-ui:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.btn-ui.active {
  background: #ecc94b;
  color: #1a202c;
  font-weight: 600;
}

/* 첫/마지막 페이지에서는 이전·다음 넘김 버튼을 완전히 숨김 (자리만 유지) */
.bottom-controls .btn-ui:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Top Sticky Bookmark Tabs (상단 책갈피 스티커 탭) ---
   지나간 페이지의 탭은 왼쪽 페이지 위, 아직 안 읽은 페이지의 탭은 오른쪽 페이지 위에
   쌓입니다 (script.js layoutStickerTabs). 모든 탭은 같은 밑선(바닥 위치)에 나란히
   있습니다 - 뜨는 탭은 없습니다. 대신 책 페이지(#flipbook)와 z-index를 직접 겨뤄서,
   현재 페이지가 아닌 탭은 책 뒤로 가려지고 현재 탭만 책 앞으로 나옵니다. 활성 표시는
   위치 이동이 아니라 살짝 커지는 것(scale)으로만 합니다.

   .sticker-tabs-container 자체에는 z-index를 주지 않습니다 - 그래야 안의 탭들이
   새 스태킹 컨텍스트에 갇히지 않고, 형제 요소인 #flipbook과 직접 비교됩니다.
   페이지가 넘어가면서 탭이 왼쪽/오른쪽 그룹을 바꿀 때는 슬라이드하지 않고 그
   자리에서 사라졌다가 새 자리에서 나타납니다 (script.js 참고). */
.sticker-tabs-container {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 44px;
  pointer-events: none;
}

.sticker-tab {
  position: absolute;
  top: 0;
  width: 96px;
  height: 44px;
  padding: 8px 6px 4px;
  border-radius: 8px 8px 0 0;
  font-family: var(--font-note-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: #2d3748;
  cursor: pointer;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.18s ease, transform 0.2s ease, background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: auto;
  /* turn.js's `acceleration:true` puts a CSS transform directly on #flipbook,
     which makes it establish its own stacking context at the z-index:0/auto
     level - and ANY positive z-index always paints above an auto-level
     context regardless of the number, so z-index:1 was never actually
     "behind" it. Only a NEGATIVE z-index lands in the group that paints
     before it. */
  z-index: -1;
  /* behind #flipbook's pages by default */
}

.sticker-tab.active {
  transform: scale(1.1);
  box-shadow: 0 -6px 15px rgba(0, 0, 0, 0.3);
  z-index: 200;
  /* positive - in front of #flipbook's pages */
}

/* Mid-move: script.js adds this right before jumping `left` to the new slot,
   fading the tab out; removed right after, fading it back in. No sliding. */
.sticker-tab.tab-moving {
  opacity: 0;
}

/* Sticker Tab Pastel Colors */
.sticker-tab[data-target="0"] {
  background-color: #fef08a;
  /* Yellow */
  border: 1px solid #fde047;
}

.sticker-tab[data-target="1"] {
  background-color: #a7f3d0;
  /* Mint */
  border: 1px solid #6ee7b7;
}

.sticker-tab[data-target="2"] {
  background-color: #fbcfe8;
  /* Pink */
  border: 1px solid #f472b6;
}

/* --- Viewport & Notebook Stage --- */
.viewport-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 30px 20px;
}

.notebook-shadow {
  position: absolute;
  width: calc(var(--book-width) + 30px);
  height: calc(var(--book-height) + 15px);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 75%);
  bottom: 8%;
  filter: blur(14px);
  transform: scaleY(0.4);
  pointer-events: none;
}

/* --- Notebook Container --- */
.notebook {
  width: var(--book-width);
  height: var(--book-height);
  position: relative;
  /* Explicit z-index (even 0) - unlike the default `auto` - makes this
     element establish its OWN stacking context, containing the sticker
     tabs' negative z-index (see .sticker-tab) so "behind the book" means
     behind #flipbook specifically, not behind the whole notebook and
     everything further back (the desk background, etc). */
  z-index: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

/* ==========================================================================
   Page-turn mechanics - handed off to turn.js (vendor/turn), the real
   library, which owns positioning, the drag-curl interaction, and the
   flip animation itself (see script.js `$('#flipbook').turn({...})`).
   We only style what our own content looks like inside each page; turn.js
   sizes/positions the elements itself, so no position/width/height rules
   of ours here - just background, padding, borders.
   ========================================================================== */
.flipbook {
  width: var(--book-width);
  height: var(--book-height);
}

/* Dummy page 1 - never actually shown (script.js keeps navigation from ever
   going below page 2), it only exists so turn.js's odd/even pairing makes
   page 2+3 (our real 01+02) the first visible spread, with no lone cover. */
.page-blank {
  background: var(--paper-bg);
}

/* This element is what turn.js directly resizes/positions/folds - it must
   have NO padding or border of its own. turn.js's internal pixel math
   assumes the classic content-box model; with our global box-sizing:
   border-box reset, padding/border here would shrink the actual content
   area turn.js thinks it's rendering, so the folding page piece ends up a
   different size than the book's real page slot ("사이즈가 안맞아"). All
   visual styling (padding, border, background) lives in .note-page-content
   instead, a plain 100%-sized child - no conflict, since it isn't managed
   by turn.js directly. */
.note-page {
  height: 100%;
  overflow: hidden;
}

.note-page-content {
  width: 100%;
  height: 100%;
  color: var(--paper-text);
  background-color: var(--paper-bg);
  padding: 40px 36px 40px 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--paper-border);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.03);
  /* Lined Paper Gradient Pattern (no red margin line) */
  background-image:
    repeating-linear-gradient(transparent, transparent 31px, var(--paper-lines) 31px, var(--paper-lines) 32px);
}

/* Right-facing pages: spine on the left, rounded outer edge on the right */
.note-page-right .note-page-content {
  border-radius: 0 6px 6px 0;
  box-shadow: inset -10px 0 20px -10px rgba(0, 0, 0, 0.1);
}

/* Left-facing pages: spine on the right, rounded outer edge on the left */
.note-page-left .note-page-content {
  border-radius: 6px 0 0 6px;
  padding: 40px 60px 40px 36px;
  box-shadow: inset 10px 0 20px -10px rgba(0, 0, 0, 0.1);
}

/* --- Curled Corner Button (하단 말린 모서리 버튼) --- */
.curled-corner {
  position: absolute;
  bottom: 0;
  width: 75px;
  height: 75px;
  cursor: pointer;
  z-index: 40;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Normal state lets the mouse pass straight through to the page underneath,
     so turn.js's own corner drag/peel works at the bottom corners exactly
     like it already does at the top (which has no overlay at all). Only the
     boundary .disabled state below turns interception back on - that one
     needs it to swallow the hover-preview glitch. */
  pointer-events: none;
}

/* Right/Left corner click targets - purely functional now, no fold graphic
   of our own (turn.js already renders its own page-corner fold, so ours was
   just duplicating/clashing with it). Just an invisible hit area + label. */
.curled-corner.bottom-right {
  right: 0;
}

.curled-corner.bottom-left {
  left: 0;
}

.curled-corner:not(.disabled):hover {
  width: 90px;
  height: 90px;
}

/* Invisible but still catches the mouse (pointer-events stays on) - script.js
   uses hovering over this dead zone to temporarily disable turn.js's own
   corner-hover-peel preview, which otherwise doesn't know page 1 (blank) /
   past the last page are off-limits and shows a "you can flip here" curl
   at the very first/last spread anyway. Sized to 120px (bigger than turn.js's
   own default 100px corner hotspot) and z-index above the flipbook so it
   physically sits over that whole hotspot and intercepts the hover before
   turn.js's own page-bound listener ever sees it - the disable() call in
   script.js is then just a belt-and-braces backup. */
.curled-corner.disabled {
  width: 120px;
  height: 120px;
  opacity: 0;
  cursor: default;
  z-index: 500;
  pointer-events: auto;
}

.corner-label {
  position: absolute;
  bottom: 24px;
  font-family: var(--font-note-title);
  font-size: 1.05rem;
  color: #78350f;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
}

.bottom-right .corner-label {
  right: 22px;
}

.bottom-left .corner-label {
  left: 22px;
}


/* --- Note Content Styling --- */
.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  line-height: 1;
}

.note-date {
  font-family: var(--font-note-title);
  font-size: 1.4rem;
  color: #4a5568;
}

.note-page-tag {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.06);
  padding: 3px 10px;
  border-radius: 12px;
  color: #4a5568;
}

.note-title {
  font-family: var(--font-note-title);
  font-size: 2.1rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 12px;
  line-height: 1.2;
}

.note-body {
  flex: 1;
  font-size: 1.5rem;
  line-height: 32px;
  /* Fits exactly with 32px notebook grid lines! */
  color: #2d3748;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 32px;
}

.checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #4a5568;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.checkbox-custom.checked::after {
  content: '✓';
  position: absolute;
  top: -4px;
  left: 2px;
  font-size: 16px;
  color: #e53e3e;
  font-weight: bold;
}

.sticky-note-inline {
  background: #fef08a;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.12);
  transform: rotate(-1.5deg);
  font-size: 1.3rem;
  margin: 10px 0;
  border-left: 4px solid #f6e05e;
}

/* --- Floating Bottom Navigation Bar --- */
.bottom-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(26, 32, 44, 0.85);
  backdrop-filter: blur(16px);
  padding: 8px 24px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.page-indicator {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: #edf2f7;
  min-width: 140px;
  text-align: center;
}

/* ==========================================================================
   Mobile Portrait Stack View (수첩 모드) - 화면이 세로로 길 때는 turn.js 책
   펼침 대신, A4 용지를 여러 장 쌓아둔 것처럼 보여줍니다. 책갈피 탭은 위가
   아니라 오른쪽 옆구리에 붙고, 맨 위 장을 탭으로 고르거나 아래로 끌어 빼내면
   (script.js drag 로직) 다음 장이 드러납니다. 내용은 script.js가 #flipbook
   안의 실제 페이지에서 복제해 이 뷰를 채웁니다 - 여기 아래는 순전히 겉모습만.
   ========================================================================== */
.stack-notebook {
  display: none;
  position: relative;
  width: min(84vw, 380px);
  height: min(76vh, 640px);
}

.stack-pages {
  position: relative;
  width: 100%;
  height: 100%;
}

.stack-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--paper-bg);
  color: var(--paper-text);
  border: 1px solid var(--paper-border);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.03);
  padding: 28px 22px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-image:
    repeating-linear-gradient(transparent, transparent 25px, var(--paper-lines) 25px, var(--paper-lines) 26px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.stack-sheet:active {
  cursor: grabbing;
}

/* Mid-drag / mid-reorder: script.js turns this off so the sheet follows the
   pointer 1:1 instead of chasing it through the 0.35s transition above. */
.stack-sheet.no-transition {
  transition: none;
}

/* Only the front sheet (stackOrder[0] in script.js) is ever draggable, but
   every sheet still needs the smaller mobile-tuned type sizes below. */
.stack-notebook .note-title {
  font-size: 1.5rem;
}

.stack-notebook .note-body {
  font-size: 1.05rem;
  line-height: 26px;
  /* matches the .stack-sheet paper-line pitch above */
}

.stack-tabs {
  position: absolute;
  top: 24px;
  right: -2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}

.stack-tab {
  writing-mode: vertical-rl;
  padding: 14px 7px;
  border-radius: 0 8px 8px 0;
  font-family: var(--font-note-title);
  font-size: 1rem;
  font-weight: 700;
  color: #2d3748;
  cursor: pointer;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stack-tab.active {
  transform: translateX(6px);
  box-shadow: 6px 4px 14px rgba(0, 0, 0, 0.35);
}

.stack-tab[data-target="0"] {
  background-color: #fef08a;
  border: 1px solid #fde047;
}

.stack-tab[data-target="1"] {
  background-color: #a7f3d0;
  border: 1px solid #6ee7b7;
}

.stack-tab[data-target="2"] {
  background-color: #fbcfe8;
  border: 1px solid #f472b6;
}

/* Responsive */
@media (max-width: 1000px) {
  :root {
    --book-width: 92vw;
    --book-height: 65vh;
  }

  .note-body {
    font-size: 1.25rem;
  }
}

/* 화면이 가로보다 세로로 길면 (세워 든 휴대폰 등) turn.js 책 펼침 뷰 대신
   위의 수첩(스택) 뷰로 통째로 바꿔치기합니다. .notebook은 display:none이 아니라
   화면 밖으로 밀어내기만 하는데 - script.js가 여전히 notebookEl.offsetWidth/
   offsetHeight로 turn.js 크기를 계산하기 때문에, display:none으로 완전히
   지워버리면 그 값이 0이 되어 초기화가 깨집니다. */
@media (orientation: portrait) {
  .notebook {
    position: absolute;
    top: -9999px;
    left: -9999px;
    pointer-events: none;
  }

  .stack-notebook {
    display: block;
  }
}