/* ── T. M. Riddle's Diary ─────────────────────────────────────── */

:root{
  --paper:      #e3d6b4;
  --paper-warm: #d8c69c;
  --paper-edge: #b49f70;
  --ink:        #1c2740;   /* 내가 쓰는 잉크 */
  --ink-riddle: #14161f;   /* 일기장이 쓰는 잉크 */
  --leather:    #14100e;
  --gold:       #b99552;
  --desk:       #241812;

  --hand-me:    'Caveat','Gaegu',cursive;          /* 나 — 편하게 쓴 학생 글씨 */
  --hand-riddle:'Italianno','Nanum Brush Script',cursive;   /* 리들 — 가늘게 흘려 쓴 필기체 */
  --serif:      'IM Fell English',serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  background:
    radial-gradient(120% 90% at 50% 0%, #3a281d 0%, #1d130e 55%, #0b0705 100%);
  color:var(--ink);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 책상 나뭇결 */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(96deg,
      rgba(0,0,0,.20) 0 2px, rgba(255,255,255,.02) 2px 5px,
      rgba(0,0,0,.10) 5px 9px, rgba(255,255,255,.015) 9px 14px);
  mix-blend-mode:overlay;
}

/* 촛불 */
.candle{
  position:fixed; left:50%; top:-28vh; width:150vmax; height:150vmax;
  transform:translate(-50%,0);
  background:radial-gradient(circle,
    rgba(255,196,110,.30) 0%, rgba(255,168,80,.12) 26%, rgba(255,140,60,0) 58%);
  pointer-events:none; mix-blend-mode:screen;
  animation:flicker 5.5s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ opacity:.92; transform:translate(-50%,0) scale(1); }
  17%    { opacity:1;   transform:translate(-50.6%,-.4%) scale(1.02); }
  34%    { opacity:.84; transform:translate(-49.5%,.3%) scale(.99); }
  52%    { opacity:.97; transform:translate(-50.3%,0) scale(1.015); }
  71%    { opacity:.88; transform:translate(-50%,-.2%) scale(1); }
}
.vignette{
  position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.85) 100%);
}

#desk{
  position:relative; z-index:2;
  height:100%; display:grid; place-items:center; padding:3vmin;
}

/* ── 표지 ─────────────────────────────────────────────────────── */
#cover{
  display:grid; justify-items:center; gap:26px;
  animation:riseIn 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(22px) scale(.98);} to{ opacity:1; } }

.book{
  position:relative; width:min(46vh,300px); aspect-ratio:.71;
  cursor:pointer; border-radius:3px 8px 8px 3px;
  transform:rotate(-1.4deg);
  transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .7s;
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.7));
}
.book:hover,.book:focus-visible{ transform:rotate(-1.4deg) translateY(-8px) scale(1.02); outline:none; }
.book.opening{ transform:rotate(-1.4deg) scale(1.35); filter:drop-shadow(0 0 60px rgba(255,180,90,.35)); opacity:0; transition:all .9s ease-in; }

.leather{
  position:absolute; inset:0; border-radius:3px 8px 8px 3px; overflow:hidden;
  background:
    linear-gradient(115deg, #241c17 0%, #100c0a 40%, #1a1310 70%, #0a0706 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,220,170,.06),
    inset 0 0 44px rgba(0,0,0,.9),
    inset -8px 0 22px rgba(0,0,0,.6);
  display:grid; align-content:center; justify-items:center; gap:20px; padding:12%;
}
.leather::after{ /* 가죽 결 */
  content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rule{ width:64%; height:1px; background:linear-gradient(90deg,transparent,rgba(185,149,82,.55),transparent); }
.emboss{ text-align:center; }
.initials{
  font-family:var(--serif); font-size:clamp(13px,3.2vh,19px);
  letter-spacing:.30em; color:#a98c52; padding-left:.3em;
  text-shadow:0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,220,160,.12);
}
.sheen{
  position:absolute; inset:0;
  background:linear-gradient(118deg, rgba(255,225,180,.10) 0%, rgba(255,225,180,0) 32%, rgba(255,225,180,.04) 60%, rgba(255,225,180,0) 78%);
  pointer-events:none;
}
.pages-edge{
  position:absolute; right:-6px; top:8px; bottom:8px; width:7px; border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(180deg, #cbb98f 0 2px, #a89263 2px 3px);
  box-shadow:inset -2px 0 4px rgba(0,0,0,.4);
}
.spine-cover{
  position:absolute; left:0; top:0; bottom:0; width:13px; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg, rgba(0,0,0,.75), rgba(255,220,170,.05) 60%, rgba(0,0,0,.5));
}

.hint-open{
  font-family:var(--serif); font-size:13px; letter-spacing:.22em;
  color:rgba(226,204,164,.42); animation:breathe 3.6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.34} 50%{opacity:.85} }

/* ── 펼친 면 ──────────────────────────────────────────────────── */
#spread{
  display:grid; grid-template-columns:1fr 26px 1fr;
  width:min(1080px,94vw); height:min(700px,88vh);
  border-radius:4px;
  box-shadow:0 40px 70px rgba(0,0,0,.75), 0 4px 0 rgba(0,0,0,.5);
  animation:openBook 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes openBook{
  from{ opacity:0; transform:perspective(1600px) rotateX(24deg) scale(.9); }
  to  { opacity:1; transform:none; }
}

.page{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 45% at 34% 18%, rgba(255,248,224,.38), rgba(0,0,0,0) 70%),
    radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,0) 42%, rgba(122,86,38,.28) 82%, rgba(96,64,24,.46) 100%),
    linear-gradient(163deg, #e9ddbc 0%, #ddcda2 42%, #cdb684 78%, #bda471 100%);
  box-shadow:
    inset 0 0 90px rgba(112,78,32,.34),
    inset 0 -34px 60px rgba(88,58,20,.20),
    inset 0 0 0 1px rgba(255,255,255,.12);
  transition:box-shadow 2.6s ease;
}
.page::after{ /* 종이 결 */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.46; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .14 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.page-left {
  border-radius:4px 0 0 4px;
  box-shadow:
    inset 0 0 90px rgba(112,78,32,.34), inset 0 -34px 60px rgba(88,58,20,.20),
    inset 0 0 0 1px rgba(255,255,255,.12),
    -3px 0 0 rgba(206,188,146,.85), -6px 0 0 rgba(178,156,113,.8), -9px 1px 0 rgba(146,124,84,.7);
}
.page-right{
  border-radius:0 4px 4px 0;
  box-shadow:
    inset 0 0 90px rgba(112,78,32,.34), inset 0 -34px 60px rgba(88,58,20,.20),
    inset 0 0 0 1px rgba(255,255,255,.12),
    3px 0 0 rgba(206,188,146,.85), 6px 0 0 rgba(178,156,113,.8), 9px 1px 0 rgba(146,124,84,.7);
}

/* 접힘 그늘 — 종이가 끊기지 않고 안으로 말려 들어가도록 */
.gutter{
  background:
    linear-gradient(90deg,
      rgba(60,40,18,.10) 0%, rgba(60,40,18,.46) 30%, rgba(26,15,4,.78) 50%,
      rgba(60,40,18,.46) 70%, rgba(60,40,18,.10) 100%),
    linear-gradient(163deg, #d9c79c, #c2aa78);
}

/* 얼룩 */
.foxing{ position:absolute; border-radius:50%; pointer-events:none; mix-blend-mode:multiply; filter:blur(6px); }
.f1{ width:120px; height:90px;  left:12%;  top:16%; background:radial-gradient(circle,rgba(138,96,40,.26),transparent 68%); }
.f2{ width:190px; height:150px; right:8%;  bottom:10%; background:radial-gradient(circle,rgba(130,90,38,.22),transparent 68%); }
.f3{ width:160px; height:130px; left:-4%;  bottom:22%; background:radial-gradient(circle,rgba(138,96,40,.24),transparent 68%); }

/* 왼쪽: 지워진 흔적 */
.ghosts{
  position:absolute; inset:9% 12% 16% 12%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  pointer-events:none;
}
.ghost{
  opacity:0;
  font-family:var(--hand-me); font-size:17px; line-height:1.35;
  color:rgba(28,39,64,.9); filter:blur(.6px);
  transform:rotate(-.5deg); transition:opacity 1.4s ease;
}
.ghost.r{ font-family:var(--hand-riddle); font-size:15px; transform:rotate(.35deg); padding-left:1.2em; }
.ghost span{ display:block; }

.ownership{
  position:absolute; left:0; right:0; bottom:6%;
  display:grid; justify-items:center; gap:2px;
  font-family:var(--serif); font-style:italic;
  color:rgba(28,39,64,.20); font-size:12px; letter-spacing:.16em;
}
.own-name{ font-size:15px; letter-spacing:.10em; }

/* 오른쪽: 쓰는 면 */
.surface{
  position:absolute; inset:12% 11% 14% 11%;
  display:grid; grid-template-areas:'stack'; align-content:start;
}
.surface > *{ grid-area:stack; }

#input, .ink-layer{
  font-family:var(--hand-me);
  font-size:clamp(22px,2.9vh,30px);
  line-height:1.62;
  color:var(--ink);
  letter-spacing:.005em;
  word-break:break-word;
}

#input{
  width:100%; min-height:1.62em; resize:none; border:0; outline:none;
  background:transparent; overflow:hidden; padding:0;
  /* 글자는 겹쳐 그린 손글씨 층(.live)이 보여준다. 여기서는 캐럿만 남긴다. */
  color:transparent; caret-color:var(--ink);
}
.ink-layer.live{ pointer-events:none; }
#input::selection{ background:rgba(28,39,64,.18); }

.ink-layer{ pointer-events:none; white-space:pre-wrap; }
.ink-layer.riddle{
  font-family:var(--hand-riddle);
  color:var(--ink-riddle);
  font-size:clamp(24px,3.05vh,32px);
  line-height:1.68;
}

/* 글자 —— --rot/--dy 는 글자마다 조금씩 다르게 심어 두는 손글씨의 흔들림.
   모든 keyframe이 이 값을 그대로 유지하므로 글자는 나타나고 사라지는 내내 제자리에 있는다. */
.w{ display:inline-block; white-space:nowrap; }
/* 글자마다 기울기(--rot) · 기준선(--dy) · 크기(--sc) · 잉크 농도(--op)가 조금씩 다르다.
   네 값 모두 나타날 때부터 사라질 때까지 그대로 유지된다. */
.c{ display:inline-block; opacity:0; --rot:0deg; --dy:0px; --sc:1; --op:1; }
.c.set{ opacity:var(--op); transform:translateY(var(--dy)) rotate(var(--rot)) scale(var(--sc)); }

/* 나타남 — 젖은 잉크가 종이 위에서 또렷해지는 것처럼, 번짐만 걷힌다 */
/* both — 지연 구간에는 0% 키프레임(투명)을 쓰고, 끝난 뒤에는 마지막 상태를 유지한다 */
.c.in{ animation:inkIn .8s cubic-bezier(.4,.02,.55,1) both; }
/* filter를 쓰지 않는다. filter가 걸린 요소는 별도 레이어로 합성되면서
   서브픽셀 안티에일리어싱이 꺼져 글자가 계속 물러 보인다 — blur(0)이어도 그렇다. */
/* 스밈(soak)을 그대로 뒤집은 곡선 — 잉크가 옅게 배어나기 시작해 천천히 차오른다 */
@keyframes inkIn{
  0%  { opacity:0; }
  55% { opacity:calc(var(--op) * .38); }
  100%{ opacity:var(--op); }
}

/* 스밈 — 잉크는 아래로 떨어지지도 작아지지도 않는다. 번지면서 옅어진다 */
/* both — 앞쪽 지연 구간도 0% 키프레임으로 채운다.
   forwards만 주면 지연 동안 .c 기본값(opacity:0)으로 떨어져 한 번 깜빡인다. */
.c.soak{ animation:soak 1s cubic-bezier(.4,.02,.55,1) both; }
@keyframes soak{
  0%  { opacity:var(--op); filter:blur(0);
        transform:translateY(var(--dy)) rotate(var(--rot)) scale(var(--sc)); }
  45% { opacity:calc(var(--op) * .62); filter:blur(1.1px);
        transform:translateY(var(--dy)) rotate(var(--rot)) scale(calc(var(--sc) * 1.02)); }
  100%{ opacity:0; filter:blur(3.2px);
        transform:translateY(var(--dy)) rotate(var(--rot)) scale(calc(var(--sc) * 1.07)); }
}


/* 잉크가 스밀 때 종이에 번지는 자국 */
.ink-layer.soaking{ animation:soakGlow 1.3s ease-out; }
@keyframes soakGlow{
  0%{ filter:none; } 40%{ filter:contrast(1.06) sepia(.08); } 100%{ filter:none; }
}

.hint-write{
  font-family:var(--hand-me); font-size:clamp(20px,2.6vh,27px); line-height:1.62;
  color:rgba(28,39,64,.22); pointer-events:none; transition:opacity .5s;
}
.hint-write.gone{ opacity:0; }

/* 오래 걸릴 때만 — 펜촉 아래 잉크가 맺히는 자국 하나 */
.ink-layer.pending{ display:flex; align-items:center; height:1.7em; }
.ink-layer.pending i{
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, rgba(20,22,31,.55), rgba(20,22,31,0) 70%);
  animation:well 2.4s ease-in-out infinite;
}
@keyframes well{
  0%,100%{ opacity:.16; transform:scale(.7); }
  50%    { opacity:.5;  transform:scale(1.25); }
}

/* 일기장이 깨어날수록 */
#spread.awake .page{ box-shadow:inset 0 0 90px rgba(70,45,15,.42), inset 0 0 0 1px rgba(255,255,255,.08); }
#spread.awake .ink-layer.riddle{ color:#0a0b10; }

/* 기억 장면 */
#spread.memory .page{ filter:brightness(1.22) saturate(.55) contrast(.95); transition:filter 1.6s ease; }
#spread.memory .ink-layer.riddle{ color:rgba(20,22,31,.62); font-style:italic; }

/* ── 조작 ─────────────────────────────────────────────────────── */
.controls{ position:fixed; right:14px; bottom:14px; z-index:5; display:flex; gap:8px; }
.ctl{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(226,204,164,.16);
  background:rgba(0,0,0,.28); color:rgba(226,204,164,.42);
  font-size:13px; cursor:pointer; transition:.25s; backdrop-filter:blur(4px);
}
.ctl:hover{ color:rgba(226,204,164,.9); border-color:rgba(226,204,164,.4); }
.ctl[aria-pressed="true"]{ color:var(--gold); border-color:rgba(185,149,82,.5); }

/* 일기장의 목소리 상태 — 켜지면 잉크가 살아 있다 */
.dot{
  align-self:center; width:7px; height:7px; margin-right:2px; border-radius:50%;
  background:rgba(226,204,164,.18); transition:background .6s, box-shadow .6s;
}
.dot.live{ background:var(--gold); box-shadow:0 0 8px rgba(185,149,82,.8); }
.dot.faint{ background:rgba(226,204,164,.13); box-shadow:none; }

/* ── 좁은 화면 ────────────────────────────────────────────────── */
@media (max-width:760px){
  #spread{ grid-template-columns:1fr; height:min(88vh,760px); width:96vw; }
  .page-left,.gutter{ display:none; }
  .page-right{ border-radius:4px; }
  .surface{ inset:10% 9% 12% 9%; }
}
@media (prefers-reduced-motion:reduce){
  .candle{ animation:none; }
  #spread,#cover{ animation:none; }
}