/* 공통 토큰과 기본 요소: 시야쥬 자사몰 톤. 흰 바탕, 검정 글자, 얇은 선, 각진 모서리, 작은 글자
   쇼핑몰과 같은 한 가지 밝은 화면으로 고정 (다크 모드 미적용) */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --fg:#111111; --muted:#8C8C8C; --sub:#555555; --line:#E6E6E6; --soft:#F6F6F6;
  --point:#C8402F; --hold:#A86C12;
  --paper:#FFFFFF; --paper-ink:#111111; --paper-muted:#C4C4C4; --paper-line:#E6E6E6; --paper-hatch:#F1ECE2;
  --panel:#FFFFFF;
  --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --serif:"Noto Serif KR","Times New Roman",serif;
  --display:var(--sans); --body:var(--sans); --mono:var(--sans);
  --gut:max(16px,env(safe-area-inset-left,0px)); --gutR:max(16px,env(safe-area-inset-right,0px));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:13px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{max-width:100%}
a{color:inherit;text-decoration:none}
svg.lucide{width:16px;height:16px;stroke-width:1.5;flex:0 0 auto}

button,.btn{font:inherit;cursor:pointer;border-radius:0;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,color .15s,border-color .15s}
button:hover:not(:disabled),.btn:hover{border-color:var(--fg)}
:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.primary{background:var(--fg);color:#fff;border-color:var(--fg)}
.primary:hover:not(:disabled){background:#333;border-color:#333}
button:disabled{background:#CFCFCF;border-color:#CFCFCF;color:#fff;cursor:not-allowed}
button:not(.primary):disabled{background:var(--bg);color:#BDBDBD;border-color:var(--line)}

.eyebrow{font-size:11px;color:var(--muted);margin:0 0 6px;letter-spacing:.02em}
.label{font-size:11px;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);margin:0}
.sub{color:var(--sub);margin:6px 0 0;max-width:60ch}
.count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 48px));visibility:hidden;background:var(--fg);color:#fff;padding:10px 16px;font-size:12px;z-index:80;max-width:calc(100% - 32px);display:flex;align-items:center;gap:8px;transition:transform .3s ease,visibility .3s}
.toast.show{transform:translate(-50%,0);visibility:visible}

.fade{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.fade{opacity:1;transform:none}}