/* 이파리서재 공통 디자인 (2026-10-26 대표 결정)
 * hallmark 테마 Squeeze의 구조(꽉 채운 초록 바탕, 한 단 밝은 타일, 버튼 하나, 한 장 카드)
 * + 디자이너 팔레트 다섯 색 + 글꼴 학교안심 둥근미소(한글)·Nunito(숫자·영문)
 * + emil 다듬기(누를 때 반응, 마우스일 때만 hover, 강한 ease-out, 움직임 줄이기 존중)
 * 각 페이지의 <style> 뒤에 불러서 덮어쓴다. 예전 변수 이름(--bg, --card, --leaf…)도 여기서 새 색으로 이어 준다. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800&display=swap");
@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 {
  --ipary-green: #52a026; --light-green: #7fbd57; --pale-green: #cce2b1; --deep-green: #204a09; --pale-lime: #eaf1c1;
  --font: "Nunito", "Dunggeunmiso", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms; --dur-state: 250ms; --dur-enter: 300ms;
  --radius-control: 16px; --radius-card: 22px; --radius-pill: 999px;

  /* 글자 크기 단계 (휴대폰 기준, 태블릿에서 한 단 키움) */
  --text-sm: 14px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-display: clamp(34px, 8vw, 64px);
  /* 간격 단계 */
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px;
  /* 누르는 것의 최소 크기: 휴대폰 44px, 태블릿 56px */
  --tap: 44px; --gutter: 16px; --container: 1120px;
  /* 간격 규칙 세 가지 (2026-10-26): 같은 종류끼리는 어느 화면에서든 같은 간격
     --gap-card: 차례로·나란히 놓인 카드(타일) 사이 / --pad-card: 카드 안쪽 / --gap-section: 큰 구역 사이 */
  --gap-card: 12px; --pad-card: 20px; --gap-section: clamp(64px, 8vw, 96px);

  /* 밝은 화면 */
  --color-paper: var(--pale-lime);
  --color-surface: #f7f9e6;
  --color-tile: var(--pale-green);
  --color-tile-on: color-mix(in oklab, var(--pale-green) 55%, var(--light-green));
  --color-ink: var(--deep-green);
  --color-muted: color-mix(in oklab, var(--deep-green) 72%, var(--pale-lime));
  --color-line: color-mix(in oklab, var(--pale-green) 70%, var(--light-green));
  --color-ring: color-mix(in oklab, var(--ipary-green) 70%, var(--deep-green));
  --color-btn: var(--deep-green); --color-btn-ink: var(--pale-lime);
  --color-mine: var(--ipary-green); --color-mine-ink: #fff;
  --color-taken: color-mix(in oklab, var(--pale-green) 70%, var(--deep-green) 12%);
  --color-warn: #a4462a; --color-warn-soft: #f4dccb;
  --color-rent: #b3862c; --color-done: color-mix(in oklab, var(--light-green) 60%, var(--pale-green));
  --shadow-float: 0 14px 32px -18px color-mix(in oklab, var(--deep-green) 45%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: var(--deep-green);
    --color-surface: color-mix(in oklab, var(--deep-green) 88%, var(--light-green));
    --color-tile: color-mix(in oklab, var(--deep-green) 80%, var(--light-green));
    --color-tile-on: color-mix(in oklab, var(--deep-green) 80%, black);
    --color-ink: var(--pale-lime);
    --color-muted: color-mix(in oklab, var(--pale-green) 80%, var(--deep-green));
    --color-line: color-mix(in oklab, var(--deep-green) 62%, var(--light-green));
    --color-ring: var(--light-green);
    --color-btn: var(--light-green); --color-btn-ink: var(--deep-green);
    --color-mine: var(--light-green); --color-mine-ink: var(--deep-green);
    --color-taken: color-mix(in oklab, var(--deep-green) 40%, var(--light-green));
    --color-warn: #f0a07c; --color-warn-soft: #4a2a1c;
    --color-rent: #d2b072; --color-done: color-mix(in oklab, var(--deep-green) 55%, var(--light-green));
    color-scheme: dark;
  }
}

/* 예전 변수 이름 → 새 색 (시간표·관리자 화면이 그대로 따라오게) */
:root {
  --bg: var(--color-paper); --card: var(--color-surface); --ink: var(--color-ink); --muted: var(--color-muted); --line: var(--color-line);
  --leaf: var(--color-mine); --leaf-soft: var(--color-tile); --taken: var(--color-taken);
  --warn: var(--color-warn); --warn-soft: var(--color-warn-soft); --rent: var(--color-rent); --done: var(--color-done);
}

body { font-family: var(--font); background: var(--color-paper); color: var(--color-ink); }
button, input, select, textarea { font-family: inherit; }
::selection { background: color-mix(in oklab, var(--light-green) 45%, transparent); }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
h1, h2, h3, strong, b { font-weight: 800; }

/* 카드: 테두리 없이 한 단 밝은 면 */
.card { border: 0 !important; border-radius: var(--radius-card); background: var(--color-surface); }

/* 누르는 카드(카드 전체가 링크·버튼): 마우스를 올리면 한 단 깊은 바탕 + 3px 떠오름 + 옅은 그림자, 누르면 0.98.
   카드에 class="tap-card"만 붙이면 돼요. 바탕이 흰 칸(surface)인 카드는 --tap-bg 로 한 단 깊은 색을 따로 줘요.
   움직임 줄이기면 떠오르지 않고 바탕만 바뀌어요. */
:root { --tap-lift: -3px; --tap-shadow: 0 10px 24px -12px rgba(16, 40, 4, .35); }
.tap-card { transition: transform 200ms var(--ease-out), background-color 160ms ease, box-shadow 200ms var(--ease-out); }
.tap-card:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .tap-card:hover { background: var(--tap-bg, var(--color-tile-on)); transform: translateY(var(--tap-lift)); box-shadow: var(--tap-shadow); }
  .tap-card:hover:active { transform: translateY(var(--tap-lift)) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) { .tap-card:hover, .tap-card:active, .tap-card:hover:active { transform: none; } }

/* 버튼 하나: 진한 초록(어두운 화면은 밝은 초록) */
.primary { background: var(--color-btn) !important; color: var(--color-btn-ink) !important; border: 0; border-radius: var(--radius-control) !important; font-weight: 800; }
/* 누르면 살짝 눌림 (emil), 바뀌는 건 transform·색만 */
button { touch-action: manipulation; transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
button:active:not(:disabled) { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .primary:hover:not(:disabled) { background: color-mix(in oklab, var(--color-btn) 88%, black) !important; } }

/* 고르는 칩·탭: 고르면 깊은 타일 + 초록 고리 */
.chip { background: var(--color-tile) !important; color: var(--color-ink) !important; border: 0 !important; border-radius: 999px; font-weight: 700; }
.chip[aria-pressed=true] { background: var(--color-tile-on) !important; color: var(--color-ink) !important; box-shadow: inset 0 0 0 3px var(--color-ring); }
.pill { background: var(--color-tile); color: var(--color-ink); }

/* 언어 고르기 메뉴 (assets/langmenu.js). 단추 색은 놓인 자리에서 --lm-bg·--lm-ink 로 바꾼다 */
.lmenu { position: relative; display: inline-flex; }
.lmenu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--lm-h, 44px); min-width: var(--lm-h, 44px); padding: 0 12px 0 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--lm-bg, var(--color-tile)); color: var(--lm-ink, var(--color-ink)); font: 700 14px/1 var(--font); cursor: pointer; white-space: nowrap; }
.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-surface); color: var(--color-ink); border-radius: 16px; box-shadow: 0 16px 36px -14px rgba(10, 16, 8, .45), 0 0 0 1px var(--color-line); }
.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: 700 15px/1.2 var(--font); }
.lmenu-list li small { font-weight: 500; font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.lmenu-list li[aria-selected="true"] { background: var(--color-tile); }
.lmenu-list li:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .lmenu-list li:hover { background: var(--color-tile-on); } }
@media (prefers-reduced-motion: no-preference) { .lmenu-list:not([hidden]) { animation: lmenu-in 160ms var(--ease-out); } @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); } } }

/* 태블릿 (앱의 주 무대: 매장 태블릿·TWA). 손가락으로 쓰는 큰 화면이면 글자·누르는 곳을 한 단 키운다 */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
}
@media (min-width: 760px) {
  :root { --gap-card: 16px; --pad-card: 24px; }
}
@media (min-width: 600px) and (pointer: coarse) {
  :root { --tap: 56px; --text-sm: 15px; --text-md: 19px; --text-lg: 23px; --text-xl: 28px; --text-2xl: 38px; --space-md: 20px; --space-lg: 28px; }
  html { -webkit-text-size-adjust: 100%; }
}
@media (min-width: 1200px) { :root { --gutter: 40px; } }
/* 안전 영역(노치·홈 막대)과 길게 눌러 선택되는 것 막기 */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
button, .chip, .pill { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (prefers-reduced-motion: reduce) {
  button { transition: background-color 120ms ease, color 120ms ease; }
  button:active:not(:disabled) { transform: none; }
}

/* 화면 사이 이동: 브라우저 기본 '화면 바꾸기 효과'(View Transitions).
   - 내용: 이전 화면은 그대로 두고 새 화면이 그 위로 살짝 아래에서 떠오르며 덮어요(사이에 빈 바탕이 안 보여 깜빡이지 않음)
   - 머리말(ipary-head): 모든 화면이 같은 크기라 제자리에 그대로, 오른쪽 버튼만 바뀌면 살짝 겹쳐 바뀜
   - 로고(ipary-logo): 제자리에 그대로(아래)
   지원하지 않는 브라우저는 그냥 바로 바뀜. 움직임 줄이기를 켠 사람은 효과 없음. 몰잎·대관 확인은 check/style.css 에 같은 값. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  a.logo { view-transition-name: ipary-logo; }
  .site-top, .site-head { view-transition-name: ipary-head; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-in 300ms var(--ease-out) both; mix-blend-mode: normal; } /* 겹칠 때 밝아지지 않게 */
  ::view-transition-group(ipary-head) { animation-duration: 200ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(ipary-head), ::view-transition-new(ipary-head) { animation-duration: 200ms; }
  /* 로고는 모든 화면에서 같은 자리·크기·박자라 움직일 것이 없어요: 이전 로고(멈춘 사진)는 감추고, 새 화면의 살아 있는
     로고만 처음부터 제자리에 보여요. (이전 로고를 같이 두면 멈춘 글자와 들썩이는 글자가 겹쳐 두 겹으로 보였어요) */
  ::view-transition-group(ipary-logo) { animation: none; }
  ::view-transition-old(ipary-logo) { display: none; }
  ::view-transition-new(ipary-logo) { animation: none; }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
}

/* 사진 크게 보기 (assets/viewer.js). 어두운 무채색 바탕(사진 색이 그대로 보이게), 단추는 반투명 둥근 단추 */
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 8, 5, calc(.96 * var(--fade, 1))); color: #f3f6ec; overflow: hidden; }
.viewer::backdrop { background: transparent; }
.viewer-open, .viewer-open body { overflow: hidden; }
.viewer-stage { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.viewer.zoomed .viewer-stage { cursor: grab; }
.viewer-stage img { max-width: 100vw; max-height: 100svh; width: auto; height: auto; object-fit: contain; transform-origin: center; will-change: transform; -webkit-touch-callout: none; }
.viewer-bar { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); pointer-events: none; }
.viewer-count { font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.viewer-btn { pointer-events: auto; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: rgba(20, 24, 18, .55); color: #f3f6ec; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.viewer-btn:active { transform: scale(.94); }
.viewer-btn:focus-visible { outline: 2px solid var(--color-light-green, #7fbd57); outline-offset: 2px; }
.viewer-prev, .viewer-next { position: absolute; top: 50%; margin-top: -24px; }
.viewer-prev { left: max(12px, env(safe-area-inset-left)); }
.viewer-next { right: max(12px, env(safe-area-inset-right)); }
.viewer-btn[hidden] { display: none; }
/* 손가락 기기에선 옆으로 밀어 넘기니 화살표를 숨기고, 확대 중엔 사진만 */
@media (hover: none) and (pointer: coarse) { .viewer-prev, .viewer-next { display: none; } }
.viewer.zoomed .viewer-prev, .viewer.zoomed .viewer-next { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: viewer-in 220ms var(--ease-out); }
  .viewer.closing { animation: viewer-out 140ms ease-in forwards; }
  @keyframes viewer-in { from { opacity: 0; } }
  .viewer[open] .viewer-stage img { animation: viewer-pop 260ms var(--ease-out); }
  @keyframes viewer-pop { from { scale: .94; } }
  @keyframes viewer-out { to { opacity: 0; } }
}

/* 로딩 (DESIGN.md '로딩'): 데이터는 로고 로딩(loader.js), 사진은 스켈레톤(.sk). 둘을 섞어 쓰지 않아요. */
.loader { display: grid; justify-items: center; gap: 4px; padding: 32px 0 40px; color: var(--color-muted); text-align: center; animation: loader-in var(--dur-state) var(--ease-out) both; }
.loader-art { width: min(52vw, 220px); aspect-ratio: 3 / 2; }
.loader-art svg { display: block; width: 100%; height: 100%; }
.loader-label { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.loader-label:empty { display: none; }
.loader-sm { padding: 4px 0 8px; }
.loader-sm .loader-art { width: 120px; }
.loader.out { opacity: 0; transition: opacity 180ms var(--ease-out); }
@keyframes loader-in { from { opacity: 0; } }
/* 스켈레톤: 칸 모양 그대로 옅은 바탕 + 왼쪽에서 오른쪽으로 지나가는 빛. 사진이 오면 sk가 빠지며 사진이 서서히 떠요 */
.sk { position: relative; overflow: hidden; background: var(--color-tile); }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--color-surface) 55%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: sk-sweep 1.4s var(--ease-in-out) infinite; pointer-events: none; }
.sk img { opacity: 0; }
:where(.sk-host) img { transition: opacity var(--dur-enter) var(--ease-out); }
@keyframes sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; transform: none; opacity: .5; }
  .loader { animation: none; }
}
/* 머리말 움직이는 로고(loader.js): 원래 로고 그림과 같은 높이, 폭은 그림 비율대로 */
.logo-anim { display: inline-block; height: var(--logo-h, 34px); aspect-ratio: 364 / 224; line-height: 0; flex: none; }
.logo-anim svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 머리말(모든 화면 같은 크기, 첫 화면 기준): 폭 1120 · 양옆 clamp(16px, 4vw, 40px) · 줄 높이 56(로고 위·아래 8) · 로고 높이 40 ·
   오른쪽 링크는 40px 둥근 칸. 화면을 옮겨도 로고·버튼 크기와 자리가 그대로라 화면 바꾸기 효과에서 튀지 않아요.
   <header class="site-top"><div class="site-top-in"><a class="logo">…</a><nav>…</nav></div></header> 를 페이지 .wrap 밖에 둬요.
   첫 화면(.site-head)은 사진 위에 떠 있는 같은 크기의 머리말. */
.site-top { position: relative; z-index: 40; padding: env(safe-area-inset-top, 0px) 0 6px; } /* 아래 6 + 제목 위 8 = 로고 아래에서 제목까지 22. z-index: 화면 전환 이름(view-transition-name)이 머리말을 따로 층으로 만들어서, 언어 목록이 아래 탭·칸에 가리지 않게 머리말 층을 위로 */
.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-tile); 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-tile-on); } }
.site-top .lang { position: relative; display: inline-flex; --lm-h: 40px; }
@media (max-width: 430px) {
  .site-top nav { gap: 4px; }
  .site-top nav a { padding: 0 10px; font-size: 13px; }
  .site-top .lang .lmenu-btn { padding: 0 9px 0 8px; gap: 6px; font-size: 13px; }
}

/* 본문 폭: 모든 화면이 머리말과 같은 선에서 시작하게 첫 화면과 같은 폭(1120)·양옆(clamp(16px, 4vw, 40px)).
   글이 긴 칸은 각 화면에서 글 폭(max-width: 40em 등)으로 따로 줄여요. */
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* 누르는 작은 것들의 호버 (모든 화면 공통, 마우스일 때만). 카드 전체가 눌리는 것은 위 .tap-card(떠오름),
   그 밖에 누르는 것은 떠오르지 않고 바탕만 반 단 깊어져요(--color-tile-hover). 이미 고른 것(aria-pressed·selected·current)은 그대로.
   - 칩·탭·자리 탭·언어 버튼·머리말 링크: 바탕 반 단 깊게
   - 주 버튼(진한 초록): 조금 더 진하게 (.primary, .now-book)
   - 글 속 링크: 밑줄이 굵어짐 */
:root { --color-tile-hover: color-mix(in oklab, var(--color-tile) 45%, var(--color-tile-on)); }
.lmenu-btn, [role="tab"], .seat-tabs a, .now-book { transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):hover { background: var(--color-tile-hover) !important; }
  [role="tab"]:not([aria-selected="true"]):hover, .seat-tabs a:not([aria-current="true"]):hover { background: var(--color-tile-hover); }
  .lmenu-btn:hover { background: var(--lm-bg-hover, var(--color-tile-hover)); }
  .now-book:hover { background: color-mix(in oklab, var(--color-btn) 88%, black); }
  main p a:hover, .small a:hover { text-decoration-thickness: 2px; }
}