/* glass-ui tokens — ~/.agents/skills/glass-ui/tokens.css
   붙이는 법: 화면 파일 옆에 복사해 <link rel="stylesheet" href="tokens.css"> 또는 <style> 에 인라인.
   값은 고치지 않고 변수만 쓴다. 저장소 고유 색은 이 파일 뒤에 :root { --accent: ... } 로 덮어쓴다.
   외부 요청 없음. 글꼴은 시스템 설치 Pretendard → 시스템 글꼴 순(SKILL.md "글꼴"). */

/* ───────────── 1. 변수 ───────────── */
:root {
  color-scheme: light;

  /* 글꼴 */
  --font-sans: "Pretendard Variable", Pretendard, "Segoe UI Variable Text", "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* 글자 크기 단계 — 큰 숫자 하나가 먼저 */
  --fs-hero: 3.5rem;      /* 56px  화면의 답 하나 */
  --fs-display: 2.5rem;   /* 40px  두 번째 숫자 */
  --fs-title: 1.5rem;     /* 24px  카드 제목(문장) */
  --fs-lead: 1.25rem;     /* 20px  요약 문장 */
  --fs-body: 1.0625rem;   /* 17px  본문 */
  --fs-small: 0.9375rem;  /* 15px  보조 줄 */
  --fs-caption: 0.8125rem;/* 13px  기준·시각 */
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-hero: -0.02em;

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --content-max: 1280px;   /* 본문 최대 폭 — 넓은 화면에서 줄이 너무 길어지지 않게 */

  /* 반경 */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* 전환 */
  --t-fast: 160ms;   /* 눌림·호버 */
  --t-base: 240ms;   /* 펼침·색 */
  --t-slow: 360ms;   /* 패널 떠오름 */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);

  /* 사이드바(앱 꼴일 때) — 떠 있는 것 층. 색은 아래 --accent-soft·--row-hover 를 그대로 쓴다 */
  --sb-w: 272px;             /* 펼친 폭 — 라벨 한 줄 + 배지가 들어가는 가장 좁은 폭 */
  --sb-w-collapsed: 72px;    /* 접힌 폭 — 아이콘 40px + 양쪽 여백 */
  --sb-gap: 16px;            /* 창 가장자리·본문과의 띄움 — 사방에 바탕이 보여야 "떠 있다" */
  --sb-item-h: 40px;         /* 항목 최소 높이(라벨이 길면 줄을 바꿔 자란다) */
  --sb-collapse-below: 1280px; /* 이보다 좁은 창은 접는다 — 본문 폭 960px 을 지키려고(272+48+960) */
  --t-sidebar: var(--t-base);  /* 접힘·펼침 폭 전환 */

  /* 폰(4절) — 미디어 쿼리는 변수를 못 읽으므로 기준 폭 599px 은 4절에 글자로 적혀 있다. 여기 값은 넓은 화면 기본값 */
  --touch: 44px;               /* 누르는 것의 최소 한 변 — 폰에서만 강제(4절), 넓은 화면은 마우스라 40 도 된다 */
  --tab-h: 56px;               /* 폰 하단 유리 탭바 높이(safe-area 제외) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 색 — 라이트 */
  --bg-base: #f3f5f9;
  --bg-blob-1: rgba(49, 130, 246, 0.22);   /* 파랑 */
  --bg-blob-2: rgba(173, 120, 255, 0.20);  /* 보라 */
  --bg-blob-3: rgba(46, 200, 160, 0.16);   /* 민트 */
  --fg: #191f28;
  --fg-2: #4e5968;
  --fg-3: #8b95a1;
  --accent: #3182f6;
  --accent-fg: #ffffff;
  --accent-soft: rgba(49, 130, 246, 0.12);
  --ok: #1aa672;
  --warn: #e8890c;
  --danger: #f04452;
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --row-hover: rgba(25, 31, 40, 0.04);
  --divider: rgba(25, 31, 40, 0.06);     /* 카드 안 행 사이에만 — 카드 테두리로 쓰지 않는다 */

  /* 유리 층 */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-highlight: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(16, 24, 40, 0.12);
  --glass-blur: 24px;
  --glass-saturate: 160%;
  /* 사이드바 유리 — 일반 유리보다 짙고 테두리·그림자가 또렷해 바탕과 갈린다(옅은 유리는 라이트 바탕과 갈리지 않아 올린 값, 10-19) */
  --sb-glass-bg: rgba(255, 255, 255, 0.72);
  --sb-glass-border: rgba(16, 24, 40, 0.08);
  --sb-glass-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 40px rgba(16, 24, 40, 0.16);
  --scrim: rgba(16, 24, 40, 0.28);
}

/* 다크 — 시스템을 따를 때 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-base: #0f1218;
    --bg-blob-1: rgba(49, 130, 246, 0.22);
    --bg-blob-2: rgba(150, 100, 255, 0.18);
    --bg-blob-3: rgba(46, 200, 160, 0.12);
    --fg: #eef1f5;
    --fg-2: #aab2bd;
    --fg-3: #717b88;
    --accent: #4593fc;
    --accent-fg: #0b1220;
    --accent-soft: rgba(69, 147, 252, 0.18);
    --ok: #34c58d;
    --warn: #f5a524;
    --danger: #ff6b76;
    --card-bg: rgba(28, 32, 40, 0.72);
    --card-border: rgba(255, 255, 255, 0.07);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --row-hover: rgba(255, 255, 255, 0.05);
    --divider: rgba(255, 255, 255, 0.07);
    --glass-bg: rgba(28, 32, 40, 0.55);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --sb-glass-bg: rgba(36, 41, 52, 0.74);
    --sb-glass-border: rgba(255, 255, 255, 0.14);
    --sb-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.5);
  }
}
/* 다크 — data-theme 로 강제할 때(위 블록과 같은 값) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0f1218;
  --bg-blob-1: rgba(49, 130, 246, 0.22);
  --bg-blob-2: rgba(150, 100, 255, 0.18);
  --bg-blob-3: rgba(46, 200, 160, 0.12);
  --fg: #eef1f5;
  --fg-2: #aab2bd;
  --fg-3: #717b88;
  --accent: #4593fc;
  --accent-fg: #0b1220;
  --accent-soft: rgba(69, 147, 252, 0.18);
  --ok: #34c58d;
  --warn: #f5a524;
  --danger: #ff6b76;
  --card-bg: rgba(28, 32, 40, 0.72);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --row-hover: rgba(255, 255, 255, 0.05);
  --divider: rgba(255, 255, 255, 0.07);
  --glass-bg: rgba(28, 32, 40, 0.55);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --sb-glass-bg: rgba(36, 41, 52, 0.74);
  --sb-glass-border: rgba(255, 255, 255, 0.14);
  --sb-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.5);
}

/* ───────────── 2. 조리법 클래스(.gl-*) ─────────────
   변수만으로 유리를 만들려면 backdrop-filter·그림자·하이라이트를 매번 조합해야 해서
   자주 쓰는 조합을 클래스로 둔다. 모두 변수만 참조한다. */

/* 바탕 — 유리가 살 그라데이션 얼룩. body 에 붙인다. */
.gl-bg {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
.gl-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% 8%, var(--bg-blob-1), transparent 70%),
    radial-gradient(50vw 45vh at 88% 18%, var(--bg-blob-2), transparent 70%),
    radial-gradient(55vw 50vh at 55% 95%, var(--bg-blob-3), transparent 70%);
}

/* 본문 폭 */
.gl-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-8);
}

/* 유리 층 — 떠 있는 것에만(상단 바·버튼·패널). 카드에는 쓰지 않는다. */
.gl-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}

/* 떠 있는 상단 바 */
.gl-float {
  position: sticky;
  top: var(--sp-4);
  z-index: 10;
  max-width: var(--content-max);
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.gl-float .gl-spacer { flex: 1; }

/* 카드 — 메시지 하나. 테두리 대신 바탕 대비와 그림자. */
.gl-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  padding: var(--sp-6);
}
/* 세로 리듬 — 본문 직계 자식 사이는 --sp-5 (카드끼리 붙지 않게). 격자 안에서는 gap 이 대신한다 */
.gl-page > * + * { margin-top: var(--sp-5); }
.gl-card-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.gl-card-sub { margin: 0 0 var(--sp-4); color: var(--fg-2); font-size: var(--fs-small); }

/* 큰 숫자 */
.gl-hero {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
}
.gl-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
}
.gl-lead { font-size: var(--fs-lead); color: var(--fg-2); margin: 0; }
.gl-caption { font-size: var(--fs-caption); color: var(--fg-3); }
.gl-muted { color: var(--fg-2); }

/* 카드 안 행 — 선은 행 사이에만, 눌리면 살짝 눌린다 */
.gl-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  margin: 0 calc(-1 * var(--sp-2));
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.gl-row + .gl-row { border-top: 1px solid var(--divider); }
.gl-row[role="button"], .gl-row[tabindex] { cursor: pointer; }
.gl-row[role="button"]:hover { background: var(--row-hover); }
.gl-row[role="button"]:active { transform: scale(0.995); }
.gl-row .gl-grow { flex: 1; min-width: 0; }     /* 줄바꿈 허용 — nowrap 금지 */
.gl-row .gl-when { color: var(--fg-3); font-size: var(--fs-small); white-space: normal; }

/* 상태 점 */
.gl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); vertical-align: middle; margin-right: var(--sp-2); }
.gl-dot.ok { background: var(--ok); }
.gl-dot.warn { background: var(--warn); }
.gl-dot.danger { background: var(--danger); }

/* 버튼 — 떠 있는 것(유리) 또는 강조 */
.gl-btn {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--fg);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-base) var(--ease-out);
}
.gl-btn:active { transform: scale(0.97); }
.gl-btn.primary { background: var(--accent); color: var(--accent-fg); border: 1px solid transparent; }
.gl-btn.soft { background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; }

/* 펼치기 — 높이가 자란다(display 토글 금지) */
.gl-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease-out); margin: 0 calc(-1 * var(--sp-2)); }
.gl-expand > * { overflow: hidden; min-height: 0; padding: 0 var(--sp-2); }   /* 안의 .gl-row 음수 여백이 가로로 넘치지 않게 */
.gl-expand.open { grid-template-rows: 1fr; }

/* 떠오르는 패널 — 상세는 아래에서 위로 */
.gl-scrim {
  position: fixed; inset: 0; z-index: 20;
  background: var(--scrim);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow) var(--ease-out);
}
.gl-panel {
  position: fixed; z-index: 21;
  left: 50%; bottom: var(--sp-6);
  width: min(720px, calc(100vw - 2 * var(--sp-6)));
  max-height: calc(100vh - 2 * var(--sp-6));
  overflow: auto;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transform: translate(-50%, 32px);
  opacity: 0; pointer-events: none;
  transition: transform var(--t-slow) var(--ease-spring), opacity var(--t-slow) var(--ease-out);
}
.gl-panel.open, .gl-scrim.open { opacity: 1; pointer-events: auto; }
.gl-panel.open { transform: translate(-50%, 0); }


/* ───────────── 3. 사이드바 조리법 — 앱 꼴(탐색 + 오른쪽 상세)일 때 ─────────────
   사이드바가 .gl-float 상단 바를 대신한다(같이 쓰지 않는다). 떠 있는 유리 판은 사이드바 포함 3개까지(SKILL 원칙 7). 상세는 유리가 아니라 본문의 카드다.
   <div class="gl-shell" data-sidebar="expanded|collapsed"> <nav class="gl-sidebar gl-glass"> … </nav> <main class="gl-main"> … </main> </div> */
.gl-shell {
  display: grid;
  grid-template-columns: var(--sb-w) minmax(0, 1fr);
  gap: var(--sb-gap);
  padding: var(--sb-gap);
  min-height: 100vh;
  box-sizing: border-box;
  transition: grid-template-columns var(--t-sidebar) var(--ease-out);
}
.gl-shell[data-sidebar="collapsed"] { grid-template-columns: var(--sb-w-collapsed) minmax(0, 1fr); }

/* 사이드바 — 창 가장자리에서 --sb-gap 만큼 띄운 둥근 유리. 본문과 같이 스크롤하지 않는다 */
.gl-sidebar {
  position: sticky;
  top: var(--sb-gap);
  align-self: start;
  height: calc(100vh - 2 * var(--sb-gap));
  box-sizing: border-box;
  overflow: hidden;              /* 스크롤은 .gl-sb-body 만 — 머리·발치는 늘 보인다 */
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  z-index: 10;
  background: var(--sb-glass-bg);           /* .gl-glass 위에 사이드바 값 — 바탕과 더 갈리게 */
  border-color: var(--sb-glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--sb-glass-shadow);
}
.gl-sb-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); scrollbar-width: thin; scrollbar-color: var(--fg-3) transparent; }   /* 창이 낮으면 묶음만 가늘게 스크롤 */
.gl-sb-head { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sb-item-h); padding: 0 var(--sp-2) 0 var(--sp-3); }
.gl-sb-brand { flex: 1; min-width: 0; font-size: var(--fs-lead); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.gl-sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-3); font-size: var(--fs-caption); color: var(--fg-3); }

/* 묶음 제목 — 선 대신 간격과 작은 글자로 구획 */
.gl-nav-group { display: flex; flex-direction: column; gap: 2px; }
.gl-nav-title { padding: 0 var(--sp-3) var(--sp-2); font-size: var(--fs-caption); color: var(--fg-3); font-weight: var(--fw-medium); }

/* 항목 — 선택은 채운 pill 하나뿐(aria-current="page"). 호버는 바탕, 누르면 눌린다 */
.gl-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--sb-item-h);
  box-sizing: border-box;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.gl-nav-item:hover { background: var(--row-hover); color: var(--fg); }
.gl-nav-item:active { transform: scale(0.98); }
.gl-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semibold); }
.gl-nav-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.gl-nav-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gl-nav-avatar { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-bold); display: grid; place-items: center; }
.gl-nav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }   /* 라벨은 줄바꿈 — nowrap 금지 */
.gl-nav-bar { height: 4px; border-radius: var(--r-pill); background: var(--divider); overflow: hidden; }
.gl-nav-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }

/* 건수 배지 — 자리 맞춤 숫자, 톤은 상태 색 */
.gl-badge {
  flex: none;
  min-width: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--row-hover);
  color: var(--fg-2);
  box-sizing: border-box;
}
.gl-badge.warn { background: var(--warn); color: var(--accent-fg); }
.gl-badge.danger { background: var(--danger); color: var(--accent-fg); }
.gl-badge.accent { background: var(--accent); color: var(--accent-fg); }

/* 접힘 — 아이콘만 남고 건수는 점이 된다. 라벨은 display 로 숨겨 잘림 스크립트에 걸리지 않게 한다 */
.gl-shell[data-sidebar="collapsed"] .gl-sb-head { justify-content: center; padding: 0; }
.gl-shell[data-sidebar="collapsed"] .gl-sb-brand,
.gl-shell[data-sidebar="collapsed"] .gl-nav-title,
.gl-shell[data-sidebar="collapsed"] .gl-nav-text,
.gl-shell[data-sidebar="collapsed"] .gl-badge,
.gl-shell[data-sidebar="collapsed"] .gl-sb-foot > :not(.gl-sb-keep) { display: none; }
.gl-shell[data-sidebar="collapsed"] .gl-nav-item { justify-content: center; padding: var(--sp-2); }
.gl-shell[data-sidebar="collapsed"] .gl-sb-foot { align-items: center; padding: 0; }
.gl-shell[data-sidebar="collapsed"] .gl-nav-item[data-count]:not([data-count="0"])::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.gl-shell[data-sidebar="collapsed"] .gl-nav-item[data-tone="warn"]::after { background: var(--warn); }
.gl-shell[data-sidebar="collapsed"] .gl-nav-item[data-tone="danger"]::after { background: var(--danger); }

/* 아이콘 버튼(접기·닫기) — 유리 위에 두는 작은 버튼 */
.gl-icon-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); border: 0; background: none; color: var(--fg-2); cursor: pointer; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.gl-icon-btn:hover { background: var(--row-hover); color: var(--fg); }
.gl-icon-btn:active { transform: scale(0.95); }
.gl-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 본문 — 사이드바 오른쪽. 넓으면 가운데, 좁으면 꽉 */
.gl-main { width: min(100%, var(--content-max)); justify-self: center; min-width: 0; padding: var(--sp-5) var(--sp-5) var(--sp-8); box-sizing: border-box; }
.gl-main > * + *, .gl-view > * + * { margin-top: var(--sp-5); }

/* 본문 화면 전환 — 요약 ↔ 상세는 같은 자리에서 바뀐다. 들어오는 화면은 아래에서 떠오른다 */
.gl-view[hidden] { display: none; }
.gl-view.enter { animation: gl-rise var(--t-slow) var(--ease-out) both; }
@keyframes gl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.gl-view-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.gl-view-head h1 { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; }

/* 접근성 — 움직임을 줄인 사용자는 전환 없이 */
@media (prefers-reduced-motion: reduce) {
  .gl-row, .gl-btn, .gl-expand, .gl-scrim, .gl-panel, .gl-shell, .gl-nav-item, .gl-icon-btn, .gl-sidebar { transition: none; }
  .gl-view.enter { animation: none; }
}
/* 투명도를 줄인 사용자는 유리를 불투명하게 */
@media (prefers-reduced-transparency: reduce) {
  .gl-glass { background: var(--card-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* ───────────── 4. 폰 — 약 360~430px(기준 390×844). 원칙은 그대로, 값만 한 단계 줄이고 사이드바는 하단 탭바가 된다 ─────────────
   기준 폭 599px 은 미디어 쿼리가 변수를 못 읽어 글자로 적는다(Material 3 compact 와 같은 값 — 폰 세로·작은 폰 가로까지).
   600~1279 는 접힌 사이드바(3절), 그 이상은 펼친 사이드바. 폰에서 쓰려면 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. */
/* "더보기" 탭(.gl-tab-more)은 폰에서만 — 넓은 화면의 사이드바에는 없다(아래 미디어 쿼리가 다시 켠다) */
.gl-tab-more { display: none; }

@media (max-width: 599px) {
  :root {
    /* 글자 — 큰 숫자는 두 단계 내리고 본문은 한 단계. 위계(원칙 1)는 그대로다 */
    --fs-hero: 2.5rem;        /* 40px */
    --fs-display: 1.875rem;   /* 30px */
    --fs-title: 1.25rem;      /* 20px */
    --fs-lead: 1.125rem;      /* 18px */
    --fs-body: 1rem;          /* 16px */
    --fs-small: 0.875rem;     /* 14px */
    --fs-caption: 0.75rem;    /* 12px */
    /* 간격 — 카드 안 24·카드 사이 20. 1~4 단계는 손대지 않는다 */
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 48px;
    /* 반경 — 창이 좁으면 28 은 둔해 보인다. 동심 규칙(바깥 − 여백 = 안쪽)은 20 − 8 = 12 로 유지 */
    --r-md: 16px;
    --r-lg: 20px;
    /* 사이드바 항목은 손가락 크기 */
    --sb-item-h: var(--touch);
  }

  /* 본문 — 가로 여백 16, 아래는 탭바 자리까지 */
  .gl-page { padding: calc(var(--sp-5) + var(--safe-top)) var(--sp-4) calc(var(--sp-7) + var(--safe-bottom)); }

  /* 떠 있는 상단 바(보고서 꼴) — 가장자리에서 16 띄우고 노치 아래로 */
  .gl-float { top: calc(var(--sp-2) + var(--safe-top)); margin: calc(var(--sp-2) + var(--safe-top)) var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; border-radius: var(--r-lg); }   /* 두세 줄로 접히므로 pill 이 아니라 --r-lg */

  /* 누르는 것은 한 변 44 이상 — 모든 버튼·행·아이콘 버튼(페이지 고유 버튼도 포함) */
  button, [role="button"], .gl-btn { min-height: var(--touch); }
  .gl-btn { padding: var(--sp-2) var(--sp-5); flex: none; }    /* 머리 줄에서 눌려 두 줄이 되지 않게 */
  .gl-icon-btn { width: var(--touch); height: var(--touch); }
  .gl-row[role="button"], .gl-row[tabindex] { box-sizing: border-box; }
  .gl-row { flex-wrap: wrap; }                                   /* 긴 글 + 시각은 두 줄로 — 잘림 0. 점은 첫 줄에(baseline 그대로) */
  .gl-row .gl-when { flex-basis: 100%; }

  /* 떠오르는 패널(보고서 꼴) — 폰에선 아래에 붙는 시트. 아래에서 위로 올라오는 건 같다 */
  .gl-panel {
    left: 0; right: 0; bottom: 0; width: auto;
    max-height: calc(100vh - var(--sp-7) - var(--safe-top));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
    transform: translateY(100%);
  }
  .gl-panel.open { transform: none; }

  /* ── 사이드바 → 하단 유리 탭바 + 위로 자라는 시트 ──
     같은 .gl-sidebar 하나가 폰에선 창 아래에 떠 있는 탭바다. .gl-sb-body 의 첫 묶음이 탭(가로)이 되고,
     머리·나머지 묶음·발치는 숨었다가 .gl-shell[data-sheet="open"] 이면 탭바가 위로 자라 시트가 된다(유리는 여전히 하나).
     "더보기" 탭은 페이지가 첫 묶음 끝에 .gl-tab-more 로 둔다(넓은 화면에선 숨는다). */
  .gl-shell { display: block; padding: 0 0 calc(var(--tab-h) + 2 * var(--sb-gap) + var(--safe-bottom)); min-height: 100vh; }
  .gl-shell[data-sidebar] { grid-template-columns: none; }
  .gl-main { width: 100%; padding: calc(var(--sp-5) + var(--safe-top)) var(--sp-4) var(--sp-6); }

  .gl-sidebar {
    position: fixed; top: auto; left: var(--sb-gap); right: var(--sb-gap);
    bottom: calc(var(--sb-gap) + var(--safe-bottom));
    height: auto; max-height: var(--tab-h);
    padding: 0 0 var(--tab-h);                                   /* 아래 --tab-h 는 탭 줄 자리 */
    border-radius: var(--r-pill);
    gap: var(--sp-4);
    z-index: 30;
    transition: max-height var(--t-slow) var(--ease-out), border-radius var(--t-slow) var(--ease-out), padding var(--t-slow) var(--ease-out);
  }
  /* 접힘 상태(data-sidebar="collapsed")는 폰에서 뜻이 없다 — 3절의 숨김을 되돌린다 */
  .gl-shell[data-sidebar="collapsed"] .gl-sb-brand, .gl-shell[data-sidebar="collapsed"] .gl-nav-title,
  .gl-shell[data-sidebar="collapsed"] .gl-nav-text, .gl-shell[data-sidebar="collapsed"] .gl-badge { display: revert; }
  .gl-shell[data-sidebar="collapsed"] .gl-nav-item { justify-content: flex-start; padding: var(--sp-2) var(--sp-3); }
  .gl-shell[data-sidebar="collapsed"] .gl-nav-item::after { display: none; }
  .gl-shell[data-sidebar="collapsed"] .gl-sb-head { justify-content: flex-start; padding: 0 var(--sp-2) 0 var(--sp-3); }
  .gl-shell[data-sidebar="collapsed"] .gl-sb-foot { align-items: stretch; padding: 0 var(--sp-3); }
  .gl-shell[data-sidebar="collapsed"] .gl-sb-foot > :not(.gl-sb-keep) { display: revert; }
  .gl-sb-head .gl-icon-btn[data-collapse] { display: none; }    /* 접기 버튼은 폰에서 숨고, 시트 닫기는 .gl-tab-more 가 겸한다 */

  /* 탭바(닫힘) — 머리·발치·둘째 묶음부터는 숨는다 */
  .gl-sidebar > .gl-sb-head, .gl-sidebar > .gl-sb-foot,
  .gl-sb-body > :not(.gl-nav-group:first-child) { display: none; }
  .gl-sb-body { gap: var(--sp-4); }

  /* 첫 묶음 = 탭 줄. 유리 안 맨 아래에 가로로 — 항목은 아이콘 위, 라벨 아래, 각각 44 이상 */
  .gl-sb-body > .gl-nav-group:first-child {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--tab-h);
    flex-direction: row; align-items: stretch; gap: 0; padding: var(--sp-1) var(--sp-2);
    box-sizing: border-box;
  }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-title { display: none; }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-item {
    flex: 1 1 0; min-width: var(--touch); min-height: var(--touch);
    flex-direction: column; justify-content: center; gap: 2px;
    padding: var(--sp-1); border-radius: var(--r-sm);
    font-size: var(--fs-caption); line-height: 1.2; text-align: center;
  }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-item .gl-nav-icon { width: 24px; height: 24px; }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-item .gl-nav-icon svg { width: 22px; height: 22px; }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-item .gl-nav-text { flex: none; align-items: center; }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-item .gl-nav-bar { display: none; }
  .gl-sb-body > .gl-nav-group:first-child > .gl-nav-item .gl-badge {
    position: absolute; top: 2px; left: calc(50% + 6px);        /* 아이콘 오른쪽 위 — iOS 탭 배지 자리 */
    min-width: 18px; line-height: 16px; padding: 0 5px; font-size: 11px;
  }
  .gl-tab-more { display: flex; }                               /* 넓은 화면에선 아래(미디어 쿼리 밖)에서 숨긴다 */

  /* 시트(열림) — 탭바가 위로 자라고 머리·묶음·발치가 보인다. 묶음만 스크롤, 탭 줄은 그대로 아래 */
  .gl-shell[data-sheet="open"] .gl-sidebar {
    max-height: calc(100vh - var(--sp-7) - var(--safe-top) - var(--sb-gap) - var(--safe-bottom));
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-3) var(--tab-h);
  }
  .gl-shell[data-sheet="open"] .gl-sidebar > .gl-sb-head,
  .gl-shell[data-sheet="open"] .gl-sidebar > .gl-sb-foot { display: flex; }
  .gl-shell[data-sheet="open"] .gl-sb-body > .gl-nav-group:not(:first-child) { display: flex; }
  .gl-shell[data-sheet="open"] .gl-sb-body > :not(.gl-nav-group) { display: revert; }
  .gl-shell[data-sheet="open"] .gl-sb-foot { padding-bottom: var(--sp-3); }
  .gl-shell[data-sheet="open"] .gl-tab-more[aria-expanded="true"] { background: var(--row-hover); color: var(--fg); }
  .gl-shell[data-sheet="open"] .gl-scrim { opacity: 1; pointer-events: auto; }   /* 시트 뒤 스크림 — 페이지가 .gl-scrim 하나를 둔다 */

  /* 상세는 전체 화면 밀어 넣기 — 아래에서 떠오르는 대신 오른쪽에서 들어온다(iOS push). "← 요약으로" 가 되돌린다 */
  .gl-view.enter { animation-name: gl-push; }
  @keyframes gl-push { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
}