:root{
  --paper:#f7f1e7;
  --paper-2:#fbf7ef;
  --ink:#3d332b;
  --muted:#5f544b;
  --olive:#747d59;
  --olive-dark:#636c4b;
  --hair:#c4a37d;
  --device:#11110f;
  --leather:#b68a58;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#efe7da;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Helvetica Neue",Arial,sans-serif}
button{font:inherit}
button:focus-visible{outline:3px solid rgba(85,96,61,.38);outline-offset:3px}
.stage{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 25% 14%,rgba(255,244,225,.18),transparent 26%),
    repeating-linear-gradient(90deg,rgba(70,44,23,.035) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(2deg,rgba(70,44,23,.022) 0 1px,transparent 1px 11px),
    linear-gradient(115deg,#9a7558,#7b5b44 66%,#8f694d);
}
.device-preview{
  position:relative;
  width:360px;
  height:710px;
  border:7px solid var(--device);
  border-radius:45px;
  background:var(--device);
  box-shadow:0 18px 42px rgba(37,24,14,.30),0 2px 9px rgba(0,0,0,.20);
}
.preview-notch{
  position:absolute;z-index:20;top:-7px;left:50%;width:122px;height:26px;transform:translateX(-50%);
  border-radius:0 0 18px 18px;background:var(--device)
}
.notebook{position:absolute;inset:9px 9px 9px 15px;border-radius:32px 34px 34px 30px}
.cover-edge{
  position:absolute;z-index:0;left:-6px;top:4px;bottom:4px;width:14px;border-radius:16px 0 0 16px;
  background:linear-gradient(90deg,#8c6a49,#b68a58 48%,#d0aa77 70%,#8f6844);
  box-shadow:-2px 0 4px rgba(55,35,18,.22),inset -1px 0 rgba(69,42,21,.22)
}
.page-stack{
  position:absolute;z-index:1;right:-4px;top:12px;bottom:12px;width:8px;border-radius:0 20px 20px 0;
  background:repeating-linear-gradient(90deg,#d2c0a2 0 1px,#f2e6d2 1px 2px);opacity:.92
}
.pen{
  position:absolute;z-index:4;left:-21px;top:14%;width:21px;height:69%;object-fit:cover;object-position:center;
  border-radius:8px 0 0 8px;filter:drop-shadow(0 2px 2px rgba(54,33,18,.22))
}
.page{
  position:relative;z-index:2;width:100%;height:100%;overflow:hidden;border-radius:26px 30px 30px 24px;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.88),transparent 24%),
    radial-gradient(circle at 74% 78%,rgba(199,163,116,.08),transparent 34%),
    repeating-linear-gradient(1deg,rgba(106,78,48,.020) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(91deg,rgba(125,94,62,.012) 0 1px,transparent 1px 5px),
    linear-gradient(96deg,#fbf8f1 0%,var(--paper) 58%,#f0e5d5 100%);
  box-shadow:inset -1px 0 rgba(128,91,56,.18),inset 0 0 24px rgba(91,60,31,.04),0 1px 3px rgba(55,36,20,.12)
}
.page::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:
    radial-gradient(circle at 11% 18%,rgba(114,85,52,.06) 0 .5px,transparent .8px),
    radial-gradient(circle at 72% 37%,rgba(114,85,52,.045) 0 .45px,transparent .76px),
    radial-gradient(circle at 44% 76%,rgba(114,85,52,.04) 0 .5px,transparent .8px);
  background-size:18px 17px,23px 21px,31px 29px;mix-blend-mode:multiply
}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(85,58,30,.03),transparent 8%,transparent 92%,rgba(85,58,30,.052));mix-blend-mode:multiply}
.date-row{
  position:absolute;z-index:3;top:8.2%;left:12.6%;right:11.2%;display:flex;justify-content:space-between;align-items:flex-start
}
.date-block{display:grid;line-height:.98;color:#3d352e}
.date-block strong{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-size:18px;font-weight:560;letter-spacing:.10px}
.date-block span{margin-top:4px;font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-size:10.8px;font-weight:560;letter-spacing:.34px}
.sprig{display:block;mix-blend-mode:multiply;opacity:.73}
.sprig-top{width:42px;height:auto;margin-top:-1px}
.today-copy{position:absolute;z-index:3;top:26.2%;left:13.2%;width:73%}
.today-copy h1{
  margin:0;
  font-family:"AppleMyungjo","Songti KR","Noto Serif KR","Apple SD Gothic Neo",sans-serif;
  font-size:31px;line-height:1.08;font-weight:600;letter-spacing:.035em
}
.today-copy p{
  margin:19px 0 0;
  font-family:"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:15.5px;line-height:1.52;font-weight:410;letter-spacing:-.015em;color:#51473f
}
.reading-ref{
  font-family:"AppleMyungjo","Songti KR","Noto Serif KR","Apple SD Gothic Neo",sans-serif;
  font-weight:600;letter-spacing:-.01em;color:#463b33
}
.paper-note{
  position:absolute;z-index:3;top:46.3%;left:10.8%;width:78.5%;height:21.0%;display:flex;align-items:center;justify-content:center;
  padding:16px 48px 16px 25px;transform:rotate(-.38deg);
  clip-path:polygon(1% 4%,9% 2.7%,18% 4%,30% 2.1%,41% 3.5%,53% 1.8%,64% 3.3%,76% 1.5%,88% 3.2%,99% 2.5%,98% 96%,89% 97.4%,78% 95.6%,67% 98%,55% 96.3%,44% 98.1%,33% 96%,21% 97.8%,10% 96%,2% 97.2%);
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.31),transparent 22%),
    repeating-linear-gradient(1deg,rgba(120,88,50,.023) 0 1px,transparent 1px 3px),
    linear-gradient(105deg,#f2dfbd 0%,#ecd4aa 56%,#f2dfba 100%);
  border:1px solid rgba(141,103,63,.12);box-shadow:0 7px 13px rgba(84,53,24,.18),0 1px 2px rgba(77,45,18,.07)
}
.paper-note::before{content:"";position:absolute;left:8px;right:8px;top:7px;border-top:1px dashed rgba(126,94,58,.25)}
.paper-note p{
  margin:0;text-align:center;
  font-family:"AppleMyungjo","Songti KR","Noto Serif KR","Apple SD Gothic Neo",sans-serif;
  font-size:20.5px;line-height:1.42;font-weight:570;letter-spacing:.01em
}
.paper-note strong{font-weight:650}
.paper-note span{font-weight:560}
.paperclip{position:absolute;z-index:4;left:50%;top:-13px;width:8px;height:29px;transform:translateX(-50%) rotate(10deg);border:2px solid #a97c48;border-bottom:0;border-radius:7px 7px 0 0;opacity:.90}
.sprig-note{position:absolute;right:8px;bottom:5px;width:47px;height:auto;opacity:.68}
.corner-fold{position:absolute;top:0;right:0;width:27px;height:25px;background:linear-gradient(225deg,rgba(171,132,83,.22) 0 47%,rgba(255,255,255,.52) 48% 51%,transparent 52%);opacity:.72}
.actions{position:absolute;z-index:3;top:69.2%;left:18%;width:64%;display:grid;gap:9px}
.actions button{
  width:100%;min-height:48px;border-radius:7px;cursor:pointer;
  font-family:"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:15.5px;line-height:1;letter-spacing:-.015em;
  transition:transform .08s ease,filter .15s ease
}
.actions button:active{transform:translateY(1px)}
.primary{border:1px solid #626a4c;background:linear-gradient(#7e8864,#707958);color:#fff;font-weight:520;box-shadow:0 2px 6px rgba(65,69,48,.13)}
.secondary{border:1px solid rgba(151,113,72,.43);background:rgba(252,248,241,.50);color:#4a4038;font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.sprig-bottom{position:absolute;z-index:3;right:8.5%;top:84.8%;width:58px;height:auto;mix-blend-mode:multiply;opacity:.73}
@media (max-width:559px){
  html,body{background:var(--paper)}
  .stage{display:block;padding:0;background:var(--paper)}
  .device-preview{width:100vw;height:100dvh;border:0;border-radius:0;background:var(--paper);box-shadow:none}
  .preview-notch{display:none}
  .notebook{inset:0;border-radius:0}
  .cover-edge{display:none}
  .page-stack{right:0;top:0;bottom:0;width:5px;border-radius:0}
  .pen{left:0;top:14%;width:11px;height:69%;border-radius:0 4px 4px 0;opacity:.92}
  .page{border-radius:0;height:100dvh;min-height:100dvh}
  .date-row{top:max(8.2%,calc(env(safe-area-inset-top) + 24px))}
  .today-copy{top:26.4%}
  .paper-note{top:46.4%;left:11.2%;width:77.5%;height:20.5%}
  .actions{top:69.1%;left:18.5%;width:63%}
  .sprig-bottom{top:84.5%;right:8.3%}
}
@media (prefers-reduced-motion:reduce){.actions button{transition:none}}
@media (prefers-contrast:more){.secondary,.paper-note{border-color:#715a43}.today-copy p{color:#40372f}}