/* 전유진 연구소 공통 색·글꼴·움직임
   낮(기본) = 팬덤 컬러 화이트·아이보리, 밤 = 남청 녹음실.
   오늘의 주파수(잔잔한·뭉클한·설레는)에 따라 바탕 빛깔과 포인트 색이 함께 바뀐다. */
:root{
  --f-display:'Nanum Myeongjo','Noto Serif KR',serif;
  --f-body:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --e-back:cubic-bezier(.34,1.4,.64,1);
  --gutter-l:max(20px,env(safe-area-inset-left,0px)); --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --ok:#2F7A4F; --bad:#B23A30;
}
html[data-theme="day"]{
  color-scheme:light;
  --bg:#F6F1E7; --bg-2:#EEE5D3; --card:#FFFDF9; --card-2:#F7F1E6; --glass:rgba(255,253,249,.8);
  --text:#1F2333; --soft:#3C3F52; --muted:#5F5C6D; --line:rgba(31,35,51,.12); --line-2:rgba(31,35,51,.24);
  --paper:#FFFDF9; --paper-ink:#1F2333; --paper-muted:#5F5C6D;
  --sh:60,44,18; --disc-a:#F3EDE2; --disc-b:#E3D9C7; --photo-frame:#FFFFFF;
  --accent:#C9973F; --accent-text:#8A5E17; --accent-ink:#1F2333; --wash:#EFE0C0;
}
html[data-theme="day"][data-mood="tears"]{--bg:#F8F0EE; --bg-2:#F0DFDB; --card-2:#FAF0EE; --accent:#D9867B; --accent-text:#9E4339; --wash:#F1D3CC}
html[data-theme="day"][data-mood="flutter"]{--bg:#EFF4F9; --bg-2:#DFE8F2; --card-2:#EEF3F9; --accent:#86AEDA; --accent-text:#2B5F94; --wash:#D3E3F4}
html[data-theme="night"]{
  color-scheme:dark;
  --bg:#0C1020; --bg-2:#141A2E; --card:#141A2E; --card-2:#1B2340; --glass:rgba(12,16,32,.8);
  --text:#ECE5D8; --soft:#CFC8BB; --muted:#A8A4B6; --line:rgba(236,229,216,.13); --line-2:rgba(236,229,216,.3);
  --paper:#ECE5D8; --paper-ink:#151526; --paper-muted:#55526A;
  --sh:0,0,0; --disc-a:#1A2138; --disc-b:#0E1324; --photo-frame:#ECE5D8;
  --accent:#E9B872; --accent-text:#E9B872; --accent-ink:#0C1020; --wash:#2A2414;
}
html[data-theme="night"][data-mood="tears"]{--bg:#130E19; --bg-2:#1E1626; --card:#1E1626; --card-2:#2A1F33; --accent:#EE9C8C; --accent-text:#EE9C8C; --wash:#3A1F22}
html[data-theme="night"][data-mood="flutter"]{--bg:#0A1222; --bg-2:#121D35; --card:#121D35; --card-2:#1A2848; --accent:#9CC3EA; --accent-text:#9CC3EA; --wash:#16294A}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .9s var(--e-io),color .6s}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.mono{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.accent{color:var(--accent-text);transition:color .8s var(--e-io)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.15}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15.5px;position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--accent);color:var(--accent-ink);background:var(--accent);cursor:pointer;white-space:nowrap;transition:color .4s var(--e-out),background .8s var(--e-io),border-color .8s var(--e-io)}
.pill::before{content:"";position:absolute;inset:0;background:var(--text);transform:translateY(101%);transition:transform .5s var(--e-out);z-index:-1}
.pill:hover{color:var(--bg)}
.pill:hover::before{transform:none}
.pill.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.pill.ghost::before{background:var(--accent)}
.pill.ghost:hover{color:var(--accent-ink)}
.pill:disabled{opacity:.5;cursor:default}
.pill:disabled::before{display:none}

.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 78px);transform:translate(-50%,-12px);z-index:90;background:var(--text);color:var(--bg);font-size:15px;font-weight:700;padding:11px 20px;border-radius:999px;box-shadow:0 14px 30px rgba(var(--sh),.3);opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--e-out);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:#fff}

/* 주파수·낮밤 전환: 누른 자리에서 새 빛깔이 원으로 번진다 */
html.vt-wash::view-transition-old(root){animation:none}
html.vt-wash::view-transition-new(root){animation:washIn 1.05s var(--e-io) both}
@keyframes washIn{from{clip-path:circle(0 at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(var(--vr,150vmax) at var(--vx,50%) var(--vy,50%))}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}