:root{
  --paper: #F4EBDA;
  --paper-2: #EFE3CC;
  --card: #FBF6EB;
  --card-hi: #FFFBF2;
  --ink: #2A211A;
  --ink-2: #5C4F40;
  --ink-3: #8A7A65;
  --line: #E4D6BC;
  --line-2: #D6C4A3;
  --terracotta: #C67D5E;
  --terracotta-2: #A9634A;
  --sage: #8B9D7B;
  --honey: #D4A574;
  --blush: #E4B8A8;
  --sea-deep: #2A3F5A;
  --sea-mid: #4A6B8A;
  --sea-light: #7A99B8;
  --sea-foam: #D8E4EC;
  --emo-joy:    #E8B84C;
  --emo-calm:   #8BB39B;
  --emo-sad:    #6B87A8;
  --emo-anger:  #C87560;
  --emo-anxious:#B899C4;
  --emo-love:   #E4A5A5;
  --emo-tired:  #9C9086;
  --emo-hope:   #D8B98C;
  --shadow: 0 1px 0 rgba(90,70,40,0.04), 0 8px 24px -12px rgba(90,70,40,0.14);
  --header-bg: rgba(244, 235, 218, 0.72);
  --header-border: rgba(214, 196, 163, 0.4);
  --glow-1: rgba(212,165,116,0.16);
  --glow-2: rgba(198,125,94,0.10);
  --glow-3: rgba(139,157,123,0.05);
  --grain-opacity: .5;
  --theme-color: #C67D5E;
}

[data-theme="dark"]{
  --paper: #1A1714;
  --paper-2: #221E19;
  --card: #252019;
  --card-hi: #2E2820;
  --ink: #F0E6D4;
  --ink-2: #C9B9A0;
  --ink-3: #9A8A74;
  --line: #3A3228;
  --line-2: #4A4034;
  --terracotta: #D49274;
  --terracotta-2: #C07A5A;
  --sage: #9AAF8A;
  --honey: #DDB484;
  --blush: #E4B8A8;
  --sea-deep: #152033;
  --sea-mid: #3A5878;
  --sea-light: #6A8AA8;
  --sea-foam: #D8E4EC;
  --shadow: 0 1px 0 rgba(0,0,0,0.2), 0 8px 24px -12px rgba(0,0,0,0.45);
  --header-bg: rgba(26, 23, 20, 0.82);
  --header-border: rgba(58, 50, 40, 0.7);
  --glow-1: rgba(212,165,116,0.08);
  --glow-2: rgba(198,125,94,0.07);
  --glow-3: rgba(139,157,123,0.04);
  --grain-opacity: .22;
  --theme-color: #1A1714;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'Pretendard','Instrument Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv01";
  letter-spacing:-0.01em;
}
body{
  background-image:
    radial-gradient(1200px 700px at 85% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, var(--glow-2), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, var(--glow-3), transparent 70%);
  background-attachment: fixed;
  min-height:100vh;
  transition: background-color .25s ease, color .25s ease;
}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5, 0 0 0 0 0.4, 0 0 0 0 0.3, 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:var(--grain-opacity);mix-blend-mode:multiply;
}

.app-header{
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

#root{position:relative;z-index:1}

button{font-family:inherit;color:inherit}
::selection{background:var(--honey);color:var(--ink)}

.serif{font-family:'Instrument Serif','Pretendard',serif;font-weight:400;letter-spacing:-0.015em}
.serif-i{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}

.screen-enter{animation:screenIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes screenIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.fade-in{animation:fadeIn .35s ease-out both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.rise{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;border-radius:6px}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--paper)}
*::-webkit-scrollbar-track{background:transparent}

a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0;margin:0}

@keyframes hugPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.2)}
  100%{transform:scale(1)}
}
.hug-anim{animation:hugPulse .6s ease-out}

@keyframes flicker{
  0%,100%{opacity:.9;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}

.letter-shadow{box-shadow:
  0 1px 0 rgba(90,70,40,.04),
  0 30px 60px -30px rgba(90,70,40,.25),
  0 8px 20px -10px rgba(90,70,40,.15);
}

/* PWA standalone */
html, body {
  min-height: 100%;
  min-height: 100dvh;
}
body {
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}
@media (display-mode: standalone) {
  .app-header {
    padding-top: env(safe-area-inset-top, 0);
  }
}