/* Re:Leaf — 본문: 카페24 써라운드 에어 / 굵은 글씨: 카페24 써라운드 (상업용 무료, OFL) */
@font-face { font-family: 'ReleafSurround'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'ReleafSurround'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --ivory: #F7F5EE; --paper: #FFFFFF; --mist: #EEF1EA; --sage: #E3E8DD;
  --green: #1F4D3A; --green-d: #143326; --leaf: #3F6B4F; --leaf-l: #B9D3BF;
  --ink: #1E2A23; --muted: #4A5A50; --line: #DDE3D6;
  --warn: #8A5112; --warn-bg: #FBF1E4; --alert: #9A2F1A; --alert-bg: #FBE9E4;
  --r: 16px; --font: 'ReleafSurround', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; word-break: keep-all; }
img { max-width: 100%; display: block; }
a { color: var(--green); }
a:hover { color: var(--green-d); }
h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.leaf { width: 24px; height: 24px; color: var(--green); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--leaf); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.wrap-row { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; border: 1.5px solid var(--green); background: var(--green); color: #fff; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--green-d); color: #fff; }
.btn.ghost { background: transparent; color: var(--green); }
.btn.ghost:hover { background: var(--sage); }
.btn.kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn.block { width: 100%; }
.btn.danger { background: transparent; color: var(--alert); border-color: #E2B8AC; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; color: var(--green); font: inherit; text-decoration: underline; cursor: pointer; padding: 6px 0; min-height: 44px; }

/* 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--sage); color: var(--green); font-size: 13px; }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.alert { background: var(--alert-bg); color: var(--alert); }

/* 카드 */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.card.flat { border: 0; }
.section { padding: 44px 0; }
.section.alt { background: var(--paper); }
.section.dark { background: var(--green); color: var(--ivory); }
.section.dark .eyebrow { color: var(--leaf-l); }
.section-title { font-size: 24px; margin: 6px 0 18px; }

/* 폼 */
label.f { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.input, select.input, textarea.input { width: 100%; min-height: 48px; border: 1.5px solid #C9D2C3; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 16px; background: var(--paper); color: var(--ink); }
textarea.input { min-height: 88px; resize: vertical; }
.input:focus, .chip:focus-visible, .btn:focus-visible, select:focus { outline: 3px solid #9FC3AC; outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; min-height: 32px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--green); }
input[type=range] { width: 100%; accent-color: var(--green); height: 32px; }
.field { margin-bottom: 18px; }

/* 상단바 */
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(247,245,238,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar .inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; color: var(--green); text-decoration: none; }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; opacity: 0; pointer-events: none; transition: .25s; z-index: 100; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 라이트박스 */
.lightbox { position: fixed; inset: 0; background: rgba(15,25,20,.88); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 86vh; max-width: 100%; border-radius: 8px; }
.lightbox .close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 24px; border: 0; background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; }
.lightbox .cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; }

/* 막대 */
.bar { position: relative; height: 12px; border-radius: 6px; background: var(--mist); overflow: visible; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.bar > i.prev { background: #B7CDBD; }
.bar > i.now { background: var(--green); }
.bar > b { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--warn); }

.notice { font-size: 13px; line-height: 1.7; color: var(--muted); }
.disclaimer { background: var(--mist); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.demo-banner { background: var(--warn-bg); color: var(--warn); font-size: 13px; text-align: center; padding: 8px 12px; }
.hidden { display: none !important; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}