:root{
  --paper:#f5ecdd;
  --ink:#40362d;
  --muted:#66594d;
  --olive:#737c59;
  --device:#11110f;
  --leather:#a97e51;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#e8dfd2;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;color:inherit}
button:focus-visible{outline:3px solid rgba(91,102,67,.40);outline-offset:3px}
.stage{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 28% 14%,rgba(255,244,225,.17),transparent 28%),
    repeating-linear-gradient(90deg,rgba(70,44,23,.025) 0 1px,transparent 1px 35px),
    repeating-linear-gradient(2deg,rgba(70,44,23,.018) 0 1px,transparent 1px 12px),
    linear-gradient(115deg,#947057,#765742 68%,#876448)
}
.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,#876747,#a97e51 48%,#c69f6c 70%,#876342);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}
.room-page{
  position:relative;z-index:2;width:100%;height:100%;overflow:hidden;border-radius:26px 30px 30px 24px;background:var(--paper);
  box-shadow:inset -1px 0 rgba(128,91,56,.18),inset 0 0 22px rgba(91,60,31,.04),0 1px 3px rgba(55,36,20,.12)
}
.room-scene{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 54%;display:block;
  filter:saturate(.92) contrast(.98) brightness(1.025)
}
.room-wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(248,240,226,.90) 0%,rgba(248,240,226,.56) 13%,rgba(248,240,226,.10) 25%,transparent 41%),
    linear-gradient(to top,rgba(244,235,219,.88) 0%,rgba(244,235,219,.30) 12%,transparent 28%);
  mix-blend-mode:screen
}
.room-header{
  position:absolute;z-index:3;top:7.5%;left:7.5%;right:7.5%;display:grid;grid-template-columns:42px 1fr 42px;align-items:start
}
.back,.more{border:0;background:transparent;min-width:42px;min-height:42px;padding:0;cursor:pointer;color:rgba(62,51,42,.68)}
.back{font-size:31px;font-weight:300;line-height:1;justify-self:start}
.more{font-size:17px;letter-spacing:3px;justify-self:end;padding-top:4px}
.heading{text-align:center;padding-top:4px;text-shadow:0 1px 10px rgba(255,250,243,.80)}
.heading h1{
  margin:0;font-family:"AppleMyungjo","Songti KR","Noto Serif KR","Apple SD Gothic Neo",serif;
  font-size:25px;line-height:1.16;font-weight:600;letter-spacing:.035em;color:#3e342c
}
.heading p{
  margin:9px 0 0;font-family:"AppleMyungjo","Songti KR","Noto Serif KR","Apple SD Gothic Neo",serif;
  font-size:14.5px;line-height:1.35;font-weight:560;letter-spacing:.012em;color:#5f5145
}
.room-actions{position:absolute;z-index:3;left:10%;right:10%;bottom:7.2%;display:grid;justify-items:center;gap:13px}
.time-button{
  min-width:142px;min-height:48px;padding:0 20px;border:1px solid rgba(144,111,72,.33);border-radius:8px;
  background:rgba(250,246,238,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:"AppleMyungjo","Songti KR","Noto Serif KR","Apple SD Gothic Neo",serif;font-size:15px;font-weight:560;
  box-shadow:0 5px 16px rgba(70,48,27,.13),inset 0 1px rgba(255,255,255,.75);cursor:pointer
}
.quiet-links{display:flex;justify-content:center;gap:34px}
.quiet-links button{
  min-height:38px;padding:7px 0;border:0;border-bottom:1px solid rgba(87,70,54,.34);background:transparent;cursor:pointer;
  font-family:"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:11px;font-weight:500;color:#594c41
}
@media(max-width:559px){
  html,body{background:#efe7da}
  .stage{display:block;padding:0;background:#efe7da}
  .device-preview{width:100vw;height:100dvh;border:0;border-radius:0;background:#efe7da;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}
  .room-page{border-radius:0;height:100dvh;min-height:100dvh}
  .room-header{top:max(7.5%,calc(env(safe-area-inset-top) + 18px))}
  .room-actions{bottom:max(7.2%,calc(env(safe-area-inset-bottom) + 22px))}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(prefers-contrast:more){.time-button{border-color:#735a42;background:#fffaf2}.heading h1,.heading p{color:#2f2822}}