/* Hallmark · shape: app screen · genre: playful · theme: Squeeze (deal 2/3, seed prompt-6bf9·d2e63dde·2026-10-26·r0)
 * nav: top bar, wordmark and two links · signature: the next two weeks as date tiles, the seats as leaf-name tiles · states: idle, loading, available, unavailable, stale, error, too many
 * axes: mid/geometric-sans/warm · posture: drenched · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, fonts swapped to 둥근미소 + Nunito by the owner's request (theme faces Gabarito/Manrope have no Hangul) */
/* waive 38 · fonts: owner fixed Hakgyoansim Dunggeunmiso + Nunito; Nunito carries figures and Latin, 둥근미소 carries Hangul */
/* 토큰·기본 규칙도 이 파일 안에 둠 (따로 불러오면 차례로 받느라 화면 전환 전에 0.4초쯤 멈췄음) */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
  --text-display-s: 1.44rem; --text-display: 1.728rem; --text-section: 1.2rem; --text-title: 1rem; --text-lead: 1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(41% 0.100 154); --color-paper-2: oklch(47% 0.105 154); --color-paper-3: oklch(34% 0.090 156);
  --color-ink: oklch(99% 0.005 90); --color-ink-2: oklch(94% 0.020 120); --color-muted: oklch(90% 0.030 150); --color-rule: oklch(55% 0.100 154);
  --color-accent: oklch(83% 0.115 56); --color-accent-2: oklch(74% 0.150 46); --color-accent-ink: oklch(30% 0.070 40); --color-focus: oklch(88% 0.14 85);
  --color-card: oklch(97% 0.012 85); --color-card-ink: oklch(24% 0.05 160);
  --font-display: "Gabarito", ui-sans-serif, system-ui, sans-serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: var(--font-display);
  --radius-card: 24px; --radius-control: 16px; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px;
  --shadow-card: 0 14px 32px -16px oklch(22% 0.05 160 / 0.5);
  --tracking-display: -0.025em; --display-weight: 800;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 45%, transparent); color: var(--color-card-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: natural vib=12 con=4 */
[data-slot] > img { filter: saturate(1.06) contrast(1.04); }

/* 글꼴만 바꾼다: 숫자·영문은 Nunito, 한글은 둥근미소 (Nunito에 한글이 없어 저절로 나뉨) */
@font-face { font-family: "Dunggeunmiso"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Dunggeunmiso"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
:root {
  --font-display: "Nunito", "Dunggeunmiso", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Nunito", "Dunggeunmiso", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 800;
  --container: 720px;
}
body { word-break: keep-all; }

/* 머리말: 모든 화면 같은 크기(첫 화면 기준, ipary.css .site-top 과 같은 값 — 이 화면은 ipary.css 를 안 불러서 따로 씀) */
.site-top { position: relative; z-index: 40; padding: env(safe-area-inset-top, 0px) 0 6px; } /* 언어 목록이 아래에 가리지 않게(ipary.css 와 같음) */
.site-top-in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.site-top .logo { display: inline-flex; }
.site-top .logo img, .site-top .logo .logo-anim { height: 40px; width: auto; }
.site-top nav { display: flex; align-items: center; gap: 6px; }
.site-top nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .site-top nav a:hover { background: var(--color-paper-3); } }
@media (max-width: 430px) { .site-top nav { gap: 4px; } .site-top nav a { padding: 0 10px; font-size: 13px; } }
.container { max-width: 1120px; padding-inline: clamp(16px, 4vw, 40px); } /* 본문 폭·양옆은 머리말과 같게(모든 화면 같은 선에서 시작) */
/* 언어 고르기 메뉴 (assets/langmenu.js) — ipary.css 와 같은 모양, 이 화면 색 이름으로 */
.site-top .lang { position: relative; display: inline-flex; }
.lmenu { position: relative; display: inline-flex; }
.lmenu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 12px 0 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--color-paper-2); color: var(--color-ink); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .lmenu-btn:hover { background: var(--color-paper-3); } }
.lmenu-globe { flex: none; }
.lmenu-label { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lmenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; margin: 0; padding: 6px; list-style: none;
  background: var(--color-card); color: var(--color-card-ink); border-radius: 16px; box-shadow: 0 16px 36px -14px rgba(10, 16, 8, .45), 0 0 0 1px var(--color-rule); }
.lmenu-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 13px 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; }
.lmenu-list li small { font-weight: 500; font-size: 12px; opacity: .7; white-space: nowrap; }
.lmenu-list li[aria-selected="true"] { background: var(--color-paper-2); color: var(--color-ink); }
.lmenu-list li:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) { .lmenu-list:not([hidden]) { animation: lmenu-in 160ms cubic-bezier(.2, .8, .2, 1); } @keyframes lmenu-in { from { opacity: 0; transform: translateY(-4px); } }
  .lmenu-list.closing { animation: lmenu-out 140ms cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; } @keyframes lmenu-out { to { opacity: 0; transform: translateY(-4px); } } }
@media (hover: hover) and (pointer: fine) { .lmenu-list li:hover { background: var(--color-paper-3); color: var(--color-ink); } }
@media (max-width: 430px) { .lmenu-btn { padding: 0 9px 0 8px; font-size: 13px; } }
/* 움직이는 로고(/assets/loader.js, DESIGN.md '로고') */
.logo-anim { display: inline-block; aspect-ratio: 364 / 224; line-height: 0; flex: none; }
.logo-anim svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); font-weight: 700; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }

.head { padding-block: 8px var(--space-lg); } /* 제목 위·크기는 다른 화면과 같게(머리말 아래 8, 32px·태블릿 38px) */
.head h1 { max-width: none; font-size: 32px; line-height: 1.2; }
@media (min-width: 600px) and (pointer: coarse) { .head h1 { font-size: 38px; } }
.head .lead { margin-top: 4px; color: var(--color-muted); font-size: var(--text-md); }

/* 몰잎 / 대관 */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-lg); }

.group { margin-bottom: var(--space-lg); }
.group h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }

/* 날짜 칠판: 앞으로 2주를 큰 숫자 타일로 */
.dates { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; gap: var(--space-xs); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2xs); scrollbar-width: none; }
.dates::-webkit-scrollbar { display: none; }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-xs); align-items: center; }

/* 타일: 바탕보다 한 단 밝은 초록, 고르면 한 단 깊게 + 복숭아 고리 */
.tile { appearance: none; border: 0; cursor: pointer; color: var(--color-ink); background: var(--color-paper-2); border-radius: var(--radius-control);
  min-height: 56px; padding: var(--space-xs); display: grid; place-items: center; gap: var(--space-3xs); text-align: center;
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), translate var(--dur-micro) var(--ease-out); }
.tile[aria-pressed="true"] { background: var(--color-paper-3); box-shadow: inset 0 0 0 3px var(--color-accent); }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile:active { translate: 0 1px; }
/* 고르기 칸 이름 아래 작은 뜻 (몰잎 → 종일권, 대관 → 공간 통째로) */
.tile-sub { display: block; font-size: 12px; font-weight: 500; color: var(--color-ink-2, currentColor); opacity: .75; line-height: 1.2; }
/* 누르는 카드 호버는 ipary.css .tap-card 와 같은 값: 한 단 깊은 바탕 + 3px 떠오름 + 옅은 그림자 (이 화면은 ipary.css 를 안 불러서 따로 씀) */
.tile { transition: transform 200ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease, box-shadow 200ms cubic-bezier(.23, 1, .32, 1), translate 120ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .tile:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--color-paper-2) 80%, var(--color-ink)); transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(16, 40, 4, .35); } }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none !important; } }
.kinds .tile { min-height: 64px; font: var(--display-weight) var(--text-xl)/1 var(--font-display); }
.seats .tile { font: var(--display-weight) var(--text-lg)/1 var(--font-display); }
.dates .tile { scroll-snap-align: start; min-height: 84px; }
.dates .d { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.dates .w { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.dates .tile[aria-pressed="true"] .w { color: var(--color-ink); }

/* 기본 화살표는 오른쪽 끝에 붙어 여백이 짝짝이라, 지우고 같은 여백에 둥근 화살표를 그린다 */
.sel { position: relative; display: block; min-width: 0; }
.sel::after { content: ""; position: absolute; right: var(--space-md); top: 50%; width: 14px; height: 14px; margin-top: -7px; background: currentColor; color: var(--color-ink); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; padding-inline: var(--space-md) calc(var(--space-md) + 14px + var(--space-xs)); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-control);
  background: var(--color-paper-3); color: var(--color-ink); font-weight: 700; font-size: var(--text-md); }
select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* 확인 버튼: 복숭아 하나 */
.btn { width: 100%; min-height: 56px; border: var(--rule-bar) solid var(--color-accent); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink);
  font: 800 var(--text-lg)/1 var(--font-body); cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { cursor: progress; }
.limit { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.msg { margin-top: var(--space-sm); color: var(--color-msg); font-weight: 700; }
.msg:empty { display: none; }

/* 결과: 한 장뿐인 따뜻한 흰 카드 */
.card { margin-block: var(--space-lg) var(--space-2xl); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); color: var(--color-card-ink); box-shadow: var(--shadow-card); }
.card .answer { font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.card .what { margin-top: var(--space-sm); font-size: var(--text-lg); font-weight: 700; }
.card .asof { margin-top: var(--space-2xs); font-size: var(--text-sm); }
.card .note { margin-top: var(--space-md); }
.card.no .answer { color: var(--color-card-warn); }
/* 몰잎인데 대관 시간만 빼고 가능한 날: 대관 시간·이용 가능 시간 두 줄 */
.card .split { display: grid; gap: var(--space-2xs); margin: var(--space-md) 0 0; }
.card .split div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-xs); align-items: baseline; }
.card .split dt { font-size: var(--text-sm); font-weight: 700; opacity: .75; }
.card .split dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 가능할 때 카드 맨 아래 바로 예약 버튼 */
.card-book { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--space-md); padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; text-decoration: none; transition: background-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1); }
.card-book:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .card-book:hover { background: var(--color-accent-2); } }

footer { padding-block: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 40rem) {
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- emil-design-eng 다듬기 (hallmark 위에 덧붙임) ---- */
/* 버튼 hover는 마우스일 때만 (터치에선 누른 뒤 색이 남지 않게) */
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .btn:hover:not(:disabled) { background: var(--color-accent-2); border-color: var(--color-accent-2); } }
/* 버튼 글자 바뀔 때 두 글자가 겹쳐 보이지 않게 흐림으로 이어 줌, 폭은 그대로 */
.btn span { display: inline-block; transition: opacity var(--dur-micro) var(--ease-out), filter var(--dur-micro) var(--ease-out); }
.btn span.swap { opacity: 0; filter: blur(3px); }
/* 결과 카드: 아래에서 8px 떠오르며 흐림이 걷힘 (250ms), 줄마다 40ms 차이 */
.card:not([hidden]) { transition: opacity 250ms var(--ease-out), translate 250ms var(--ease-out), filter 250ms var(--ease-out); }
@starting-style { .card:not([hidden]) { opacity: 0; translate: 0 8px; filter: blur(4px); } }
.card > * { animation: lab-in 260ms var(--ease-out) both; }
.card > :nth-child(2) { animation-delay: 40ms; } .card > :nth-child(3) { animation-delay: 80ms; } .card > :nth-child(4) { animation-delay: 120ms; }
@keyframes lab-in { from { opacity: 0; translate: 0 6px; } }
/* 다시 확인할 때 이전 카드는 빠르게 사라짐 (나갈 땐 들어올 때보다 빨리) */
.card.leaving { opacity: 0; filter: blur(3px); transition: opacity 120ms var(--ease-out), filter 120ms var(--ease-out); }

/* ---- 색: 이파리서재 디자이너 팔레트로 (대표님 요청) ----
 * Ipary Green #52a026 · Light Green #7fbd57 · Pale Green #cce2b1 · Deep Green #204a09 · Pale Lime #eaf1c1
 * Squeeze의 푸른 초록(차가움)과 복숭아 버튼 대신, 노란 기가 도는 이파리 초록끼리. 구조(타일·한 장 카드·버튼 하나)는 Squeeze 그대로 */
:root {
  --ipary-green: #52a026; --light-green: #7fbd57; --pale-green: #cce2b1; --deep-green: #204a09; --pale-lime: #eaf1c1;
  /* 밝은 화면: 연한 라임 바탕, 연한 초록 타일, 진한 초록 글자, 버튼은 진한 초록 */
  --color-paper: var(--pale-lime); --color-paper-2: var(--pale-green); --color-paper-3: color-mix(in oklab, var(--pale-green) 55%, var(--light-green));
  --color-ink: var(--deep-green); --color-ink-2: color-mix(in oklab, var(--deep-green) 85%, var(--pale-lime)); --color-muted: color-mix(in oklab, var(--deep-green) 72%, var(--pale-lime));
  --color-rule: color-mix(in oklab, var(--light-green) 70%, var(--pale-lime));
  --color-accent: var(--deep-green); --color-accent-2: color-mix(in oklab, var(--deep-green) 85%, black); --color-accent-ink: var(--pale-lime);
  --color-ring: color-mix(in oklab, var(--ipary-green) 70%, var(--deep-green)); --color-focus: color-mix(in oklab, var(--ipary-green) 70%, var(--deep-green));
  --color-card: #fbfcf2; --color-card-ink: var(--deep-green);
  --color-msg: #a4462a; --color-card-warn: #a4462a;
  --shadow-card: 0 14px 32px -18px color-mix(in oklab, var(--deep-green) 45%, transparent);
  color-scheme: light;
}
/* 어두운 화면: 진한 초록 바탕(Squeeze처럼 꽉 채움), 라임 글자, 버튼은 밝은 초록
 * 기기 설정을 따르되, 비교용으로 ?scheme=light|dark 로 고정할 수 있게 */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --color-paper: var(--deep-green); --color-paper-2: color-mix(in oklab, var(--deep-green) 84%, var(--light-green)); --color-paper-3: color-mix(in oklab, var(--deep-green) 80%, black);
    --color-ink: var(--pale-lime); --color-ink-2: var(--pale-green); --color-muted: color-mix(in oklab, var(--pale-green) 80%, var(--deep-green));
    --color-rule: color-mix(in oklab, var(--deep-green) 60%, var(--light-green));
    --color-accent: var(--light-green); --color-accent-2: color-mix(in oklab, var(--light-green) 85%, var(--pale-lime)); --color-accent-ink: var(--deep-green);
    --color-ring: var(--light-green); --color-focus: var(--pale-lime);
    --color-card: var(--pale-lime); --color-card-ink: var(--deep-green);
    --color-msg: #f0a07c;
    color-scheme: dark;
  }
}
:root[data-scheme="dark"] {
    --color-paper: var(--deep-green); --color-paper-2: color-mix(in oklab, var(--deep-green) 84%, var(--light-green)); --color-paper-3: color-mix(in oklab, var(--deep-green) 80%, black);
    --color-ink: var(--pale-lime); --color-ink-2: var(--pale-green); --color-muted: color-mix(in oklab, var(--pale-green) 80%, var(--deep-green));
    --color-rule: color-mix(in oklab, var(--deep-green) 60%, var(--light-green));
    --color-accent: var(--light-green); --color-accent-2: color-mix(in oklab, var(--light-green) 85%, var(--pale-lime)); --color-accent-ink: var(--deep-green);
    --color-ring: var(--light-green); --color-focus: var(--pale-lime);
    --color-card: var(--pale-lime); --color-card-ink: var(--deep-green);
    --color-msg: #f0a07c;
    color-scheme: dark;
  }
/* 고른 타일의 고리는 이파리 초록 (버튼 색과 따로) */
.tile[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--color-ring); }

/* ---- 날짜: 칠판 대신 달력 (대표님 요청) ---- */
.cal { background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-sm); }
.cal-nav svg { margin: auto; }
.cal-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; text-align: center; margin-bottom: var(--space-xs); }
.cal-head strong { font: var(--display-weight) var(--text-lg)/1 var(--font-display); }
.cal-nav { appearance: none; border: 0; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink);
  font: 800 var(--text-lg)/1 var(--font-body); cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.cal-nav:active:not(:disabled) { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .cal-nav:hover:not(:disabled) { background: color-mix(in oklab, var(--color-paper-3) 70%, var(--color-ink)); } } /* 호버: 한 단 깊게 */
.cal-nav:disabled { background: transparent; color: var(--color-muted); cursor: default; }
.cal-nav:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs); }
.cal-wd span { text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); padding-block: var(--space-3xs); }
.cal .day { min-height: 44px; padding: 0; background: transparent; font: var(--display-weight) var(--text-md)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.cal .day.today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 2px var(--color-rule); }
.cal .day:disabled { background: transparent; color: color-mix(in oklab, var(--color-muted) 55%, var(--color-paper-2)); cursor: default; }
.cal .day[aria-pressed="true"] { background: var(--color-paper-3); }

#ts:empty { display: none; }

/* 다른 화면과 같은 화면 바꾸기 효과 (assets/ipary.css 참고) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  a.logo { view-transition-name: ipary-logo; }
  ::view-transition-group(ipary-logo) { animation: none; }
  ::view-transition-old(ipary-logo) { display: none; }
  ::view-transition-new(ipary-logo) { animation: none; } /* 로고는 새 화면 것만 제자리에(ipary.css 와 같음) */
  .site-top { view-transition-name: ipary-head; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-in 300ms cubic-bezier(.23, 1, .32, 1) both; mix-blend-mode: normal; }
  ::view-transition-group(ipary-head) { animation-duration: 200ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  ::view-transition-old(ipary-head), ::view-transition-new(ipary-head) { animation-duration: 200ms; }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
}