/* 하루다움 브랜드 공통 */
:root{
  --paper:#F7F7F6;
  --surface:#FFFFFF;
  --ink:#111111;
  --soft:#7A7A7A;
  --line:#E6E6E4;
  --accent:#111111;
  --accent-ink:#FFFFFF;
  --accent-soft:#F0F0EE;
  --blush:#F0F0EE;
  --danger:#C23B2A;
  --ok:#2F7A55;
  --serif:'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
  --sans:'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --r:10px;
  color-scheme: light;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button, input, select, textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wordmark{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
.wordmark img{ display:block; height:24px; width:auto; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:12px 22px; font-weight:500; font-size:15px; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s ease, transform .1s ease; }
.btn:hover{ background:#000; }
.btn:active{ transform:translateY(1px); }
.btn.accent{ background:var(--accent); }
.btn.accent:hover{ background:#000000; }
.btn.ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:#c9c9c4; }
.btn.sm{ padding:8px 14px; font-size:13px; }
.btn.wide{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:default; }
.link{ background:none; border:0; padding:0; color:var(--soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:13px; }

.input{ width:100%; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:10px 12px; font-size:15px; min-width:0; }
.input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
textarea.input{ resize:vertical; min-height:96px; line-height:1.7; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font-size:13px; color:var(--soft); }
.muted{ color:var(--soft); }
.hint{ font-size:12.5px; color:var(--soft); margin:0; }
.err{ color:var(--danger); font-size:13px; min-height:1.2em; margin:0; }

.modal-bg{ position:fixed; inset:0; z-index:100; background:rgba(20,21,26,.45); display:grid; place-items:center; padding:16px; overflow:auto; }
.modal{ width:100%; max-width:440px; background:var(--surface); border-radius:16px; padding:28px 24px 24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 60px rgba(0,0,0,.18); }
.modal h1{ font-family:var(--serif); font-size:24px; margin:0; font-weight:700; }
.modal p{ margin:0; }
.modal .link{ align-self:center; }

.toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:200; background:var(--ink); color:#fff; font-size:13.5px; padding:10px 18px; border-radius:999px; max-width:calc(100vw - 32px); box-shadow:0 8px 24px rgba(0,0,0,.2); }