/* ============================================================
   KARIS — Apple Human Interface Guidelines Design System
   ------------------------------------------------------------
   https://developer.apple.com/kr/design/human-interface-guidelines/

   원칙 3가지를 코드로 옮긴 것:
   · 계층(Hierarchy) — 제어기는 물러나고 콘텐츠가 앞에 선다
   · 조화(Harmony)   — 시스템 컬러 / SF 타이포 스케일 / 4pt 그리드
   · 일관성(Consistency) — 모든 값은 이 파일의 토큰에서만 나온다

   라이트 모드 전용. 다크모드 미지원(의도된 결정).
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 아카이브 ↔ 월간캘린더: 셀 높이를 바꾸지 않는 독립 표식 */
.ars-calendar-link,.ars-post-link{display:block;color:var(--accent);font-size:var(--t-footnote);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
.ars-calendar-link{margin-bottom:var(--s4);padding:var(--s3);background:var(--accent-soft);border-radius:var(--r-sm);}
.ars-post-link{margin-top:var(--s2);padding:var(--s2) 0;}
.ars-post-link span{display:block;color:var(--label2);font-size:var(--t-caption1);}
.ars-calendar-link:hover,.ars-post-link:hover{text-decoration:underline;}
.ars-calendar-link:focus-visible,.ars-post-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.ars-records{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--separator);}
.ars-records h4{font-size:var(--t-subhead);margin:0;}
.ars-records p,.ars-notice{color:var(--label2);font-size:var(--t-caption1);margin:var(--s2) 0;word-break:keep-all;}

/* ============================================================
   §1  TOKENS — 단일 진실 소스
   ============================================================ */
:root {
  /* ---- Apple System Colors (Light) ---- */
  --blue:   #007AFF;
  --green:  #34C759;
  --indigo: #5856D6;
  --orange: #FF9500;
  --purple: #AF52DE;
  --pink:   #FF2D55;
  --red:    #FF3B30;
  --teal:   #30B0C7;
  --yellow: #FFCC00;
  --brown:  #A2845E;
  --gray:   #8E8E93;

  --blue-dark:  #0051D5;   /* pressed 상태 */
  --accent:      var(--blue);
  --accent-soft: rgba(0,122,255,.10);

  /* ---- Backgrounds (HIG: Grouped Background) ---- */
  --bg:          #FFFFFF;
  --bg2:         #F2F2F7;
  --bg3:         #FFFFFF;
  --grouped-bg:  #F2F2F7;
  --grouped-bg2: #FFFFFF;

  /* ---- Labels (HIG 4단계 레이블) ---- */
  --label:  #000000;
  --label2: rgba(60,60,67,.60);
  --label3: rgba(60,60,67,.30);
  --label4: rgba(60,60,67,.18);

  /* ---- Separators / Fills ---- */
  --separator:        rgba(60,60,67,.29);
  --separator-opaque: #C6C6C8;
  --fill:  rgba(120,120,128,.20);
  --fill2: rgba(120,120,128,.16);
  --fill3: rgba(120,120,128,.12);
  --fill4: rgba(120,120,128,.08);

  /* ---- Materials (HIG Liquid Glass) ---- */
  --glass:        rgba(255,255,255,.72);
  --glass-thick:  rgba(255,255,255,.86);
  --glass-thin:   rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.55);
  --blur:      saturate(180%) blur(20px);
  --blur-thick:saturate(180%) blur(30px);

  /* ---- Elevation (HIG: 그림자는 얕게) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,.06), 0 0 0 .5px rgba(0,0,0,.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.05);

  /* ---- Typography — SF Pro 스케일 (HIG 고정값) ---- */
  --t-large-title:34px; --lh-large-title:41px;
  --t-title1:28px;      --lh-title1:34px;
  --t-title2:22px;      --lh-title2:28px;
  --t-title3:20px;      --lh-title3:25px;
  --t-headline:17px;    --lh-headline:22px;   /* weight 600 */
  --t-body:17px;        --lh-body:22px;
  --t-callout:16px;     --lh-callout:21px;
  --t-subhead:15px;     --lh-subhead:20px;
  --t-footnote:13px;    --lh-footnote:18px;
  --t-caption1:12px;    --lh-caption1:16px;
  --t-caption2:11px;    --lh-caption2:13px;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Pretendard',
          'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---- Spacing — 4pt 그리드 ---- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --s12:48px; --s16:64px; --s20:80px;
  --margin:16px;          /* HIG 기본 여백 */
  --tap:44px;             /* HIG 최소 탭 타깃 */
  --content-max:1180px;

  /* ---- Radii (HIG continuous corner) ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --r-xl:22px; --r-card:18px; --r-pill:999px;

  /* ---- Motion ---- */
  --ease:  cubic-bezier(.25,.1,.25,1);
  --spring:cubic-bezier(.32,.72,0,1);
  --d-fast:.2s; --d-base:.3s; --d-slow:.45s;

  /* ---- 이벤트 타입 → Apple 시스템 컬러 매핑 ---- */
  --ev-regular: var(--blue);
  --ev-worship: var(--green);
  --ev-officer: var(--orange);
  --ev-break:   var(--purple);
  --ev-special: var(--red);
  --ev-school:  var(--gray);

  /* ---- 레거시 별칭 (기존 페이지 호환) ---- */
  --primary: var(--blue);
  --primary-dark: var(--blue-dark);
  --primary-light: #5AC8FA;
  --primary-pale: var(--accent-soft);
  --success: var(--green);
  --danger:  var(--red);
  --warning: var(--orange);
  --white:#fff;
  --gray-50:#F2F2F7;  --gray-100:#F2F2F7; --gray-200:#E5E5EA;
  --gray-300:#D1D1D6; --gray-400:#C7C7CC; --gray-500:var(--gray);
  --gray-600:rgba(60,60,67,.60); --gray-700:#3A3A3C;
  --gray-800:#1C1C1E; --gray-900:#000;
  --radius-sm:var(--r-sm); --radius-md:var(--r-md);
  --radius-lg:var(--r-lg); --radius-xl:var(--r-xl);
}

/* ============================================================
   §2  RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--label);
  background:var(--grouped-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
}
img,svg,video { display:block; max-width:100%; }
a { color:var(--accent); text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4,h5,h6,p,figure { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ============================================================
   §3  TYPOGRAPHY — HIG 텍스트 스타일
   ============================================================ */
.t-large-title{ font-size:var(--t-large-title); line-height:var(--lh-large-title); font-weight:700; letter-spacing:-.022em; }
.t-title1    { font-size:var(--t-title1);  line-height:var(--lh-title1);  font-weight:700; letter-spacing:-.021em; }
.t-title2    { font-size:var(--t-title2);  line-height:var(--lh-title2);  font-weight:700; letter-spacing:-.018em; }
.t-title3    { font-size:var(--t-title3);  line-height:var(--lh-title3);  font-weight:600; letter-spacing:-.016em; }
.t-headline  { font-size:var(--t-headline);line-height:var(--lh-headline);font-weight:600; letter-spacing:-.012em; }
.t-body      { font-size:var(--t-body);    line-height:var(--lh-body);    font-weight:400; }
.t-callout   { font-size:var(--t-callout); line-height:var(--lh-callout); font-weight:400; }
.t-subhead   { font-size:var(--t-subhead); line-height:var(--lh-subhead); font-weight:400; }
.t-footnote  { font-size:var(--t-footnote);line-height:var(--lh-footnote);font-weight:400; }
.t-caption   { font-size:var(--t-caption1);line-height:var(--lh-caption1);font-weight:400; }
.t-caption2  { font-size:var(--t-caption2);line-height:var(--lh-caption2);font-weight:400; }

/* 레거시 타이포 별칭 */
.k-display,.k-h1{ font-size:var(--t-large-title); line-height:var(--lh-large-title); font-weight:700; letter-spacing:-.022em; }
.k-h2,.section-title{ font-size:var(--t-title1); line-height:var(--lh-title1); font-weight:700; letter-spacing:-.021em; }
.k-h3{ font-size:var(--t-title2); line-height:var(--lh-title2); font-weight:700; letter-spacing:-.018em; }
.k-h4{ font-size:var(--t-title3); line-height:var(--lh-title3); font-weight:600; }
.k-body{ font-size:var(--t-body); line-height:var(--lh-body); }
.k-body-sm,.text-sm{ font-size:var(--t-subhead); line-height:var(--lh-subhead); }
.k-meta,.text-xs{ font-size:var(--t-footnote); line-height:var(--lh-footnote); color:var(--label2); }
.k-eyebrow{
  font-size:var(--t-caption2); line-height:var(--lh-caption2);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--label2);
}
.k-cite,.k-scripture{ font-size:var(--t-callout); line-height:1.7; color:var(--label2); }
.text-muted{ color:var(--label2); }
.text-primary{ color:var(--accent); }
.text-center{ text-align:center; }
.fw-700{ font-weight:700; }
.section-subtitle{ font-size:var(--t-callout); line-height:var(--lh-callout); color:var(--label2); }

/* ============================================================
   §4  LAYOUT
   ============================================================ */
.container    { width:100%; max-width:var(--content-max); margin-inline:auto; padding-inline:var(--s5); }
.container-sm { max-width:720px; margin-inline:auto; }
.container-lg { max-width:1180px; margin-inline:auto; }
.page-wrapper { min-height:60vh; }
.section      { padding-block:var(--s16); }
.section-header{ margin-bottom:var(--s8); }

.flex{ display:flex; } .flex-1{ flex:1; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-wrap   { flex-wrap:wrap; }
.gap-8{ gap:var(--s2); } .gap-12{ gap:var(--s3); } .gap-16{ gap:var(--s4); }
.grid-2,.grid-3,.grid-4{ display:grid; gap:var(--s4); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.mt-8{margin-top:var(--s2)} .mt-16{margin-top:var(--s4)} .mt-24{margin-top:var(--s6)} .mt-32{margin-top:var(--s8)}
.mb-8{margin-bottom:var(--s2)} .mb-16{margin-bottom:var(--s4)} .mb-24{margin-bottom:var(--s6)} .mb-32{margin-bottom:var(--s8)}
.hidden{ display:none!important; }
.divider{ height:1px; background:var(--separator); border:0; margin-block:var(--s6); }
.rounded{ border-radius:var(--r-card); }
.shadow{ box-shadow:var(--shadow-2); }

/* ============================================================
   §5  NAVIGATION BAR — HIG: 물러나는 제어기 + 머티리얼
   ============================================================ */
.navbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  height:52px; padding-inline:var(--s5);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-bottom:.5px solid var(--separator);
}
.nav-left,.nav-center,.nav-right{ display:flex; align-items:center; gap:var(--s2); }
.nav-center{ flex:1; justify-content:center; }
.nav-logo{ display:flex; align-items:center; }
.nav-logo-img{ height:22px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:var(--s1); }
.nav-link{
  display:inline-flex; align-items:center; height:32px; padding-inline:var(--s3);
  font-size:var(--t-subhead); font-weight:500; color:var(--label2);
  border-radius:var(--r-sm); transition:color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.nav-link:hover{ color:var(--label); background:var(--fill4); }
.nav-link.active{ color:var(--accent); font-weight:600; background:var(--accent-soft); }

/* ── 데스크톱 호버 드롭다운 ── */
.nav-item-group{ position:relative; display:flex; align-items:center; }
.nav-dropdown{
  position:absolute; top:100%; left:50%;
  min-width:176px; padding:var(--s2);
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg); border-radius:var(--r-md);
  box-shadow:var(--shadow-2); border:.5px solid var(--separator);
  /* 버튼과 패널 사이에 틈이 없어야 커서를 옮기는 중 닫히지 않는다. */
  margin-top:0;
  opacity:0; visibility:hidden; transform:translate(-50%,-4px);
  transition:opacity var(--d-fast) var(--ease),
             transform var(--d-fast) var(--ease),
             visibility 0s linear var(--d-fast);
  z-index:110;
}
.nav-item-group:hover .nav-dropdown,
.nav-item-group:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translate(-50%,0);
  transition:opacity var(--d-fast) var(--ease),
             transform var(--d-fast) var(--ease),
             visibility 0s linear 0s;
}
.nav-sub-link{
  display:block; padding:9px var(--s3);
  font-size:var(--t-subhead); color:var(--label);
  border-radius:var(--r-sm); white-space:nowrap;
  transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.nav-sub-link:hover{ background:var(--accent-soft); color:var(--accent); }
@media (prefers-reduced-motion:reduce){
  .nav-dropdown{ transition:none; }
}
.nav-toggle{
  display:none; width:var(--tap); height:var(--tap);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer; color:var(--label);
}
.nav-toggle span{
  display:block; width:18px; height:1.5px; border-radius:1px;
  background:currentColor;
  transition:transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
/* 열린 상태: 햄버거 → X (가운데 줄은 사라지고 위아래가 교차) */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.nav-mobile{
  /* nav 아래로 떠 있는 오버레이 — 문서 흐름에 끼어들지 않으므로
     본문을 밀어내지 않고, sticky nav 를 따라 항상 화면에 보인다. */
  display:flex; flex-direction:column; gap:var(--s1);
  position:absolute; top:100%; left:0; right:0;
  max-height:calc(100dvh - 52px); overflow-y:auto;
  padding:var(--s3) var(--s5) var(--s5);
  /* 흐름에서 빠져 본문 위에 겹치므로 불투명 배경이 필요하다.
     반투명(--glass-thick)이면 아래 콘텐츠가 비쳐 글자가 읽히지 않는다. */
  background:var(--bg);
  box-shadow:var(--shadow-2);
  border-bottom:.5px solid var(--separator);
  /* display 는 트랜지션되지 않으므로 visibility/opacity/transform 으로 여닫는다.
     닫힘 상태에서는 visibility:hidden 이라 클릭도 통과한다. */
  visibility:hidden; opacity:0;
  transform:translateY(-8px);
  transition:opacity var(--d-base) var(--spring),
             transform var(--d-base) var(--spring),
             visibility 0s linear var(--d-base);
}
.nav-mobile.open{
  visibility:visible; opacity:1;
  transform:translateY(0);
  transition:opacity var(--d-base) var(--spring),
             transform var(--d-base) var(--spring),
             visibility 0s linear 0s;
}
/* 드로어 텍스트는 완전 블랙 — 반투명 배경 위에서 회색은 잘 읽히지 않는다. */
.nav-mobile .nav-link{
  height:var(--tap); font-size:var(--t-body);
  color:#000; font-weight:500;
}
.nav-mobile .nav-link.active{ color:var(--accent); font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .nav-mobile, .nav-mobile.open{ transition:none; transform:none; }
}
/* 데스크톱에서는 드로어 자체를 렌더링하지 않는다. */
@media (min-width:861px){
  .nav-mobile{ display:none; }
}
@media (max-width:860px){
  .nav-center{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ============================================================
   §6  BUTTONS — HIG: 44pt 탭 타깃, 필/캡슐 형태
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s5);
  font-size:var(--t-headline); font-weight:600; letter-spacing:-.012em;
  border:0; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap;
  background:var(--fill3); color:var(--label);
  transition:transform var(--d-fast) var(--spring), background var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.btn:active{ transform:scale(.96); }
.btn:hover{ background:var(--fill2); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-success{ background:var(--green); color:#fff; }
.btn-danger { background:var(--red);   color:#fff; }
.btn-outline{ background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px currentColor; }
.btn-outline:hover{ background:var(--accent-soft); }
.btn-ghost{ background:transparent; color:var(--accent); }
.btn-ghost:hover{ background:var(--accent-soft); }
.btn-white{ background:#fff; color:var(--label); box-shadow:var(--shadow-1); }
.btn-sm{ min-height:32px; padding:0 var(--s3); font-size:var(--t-subhead); }
.btn-lg{ min-height:50px; padding:0 var(--s6); font-size:var(--t-body); }
.btn:disabled{ opacity:.35; pointer-events:none; }

/* ============================================================
   §7  CARDS & MATERIALS
   ============================================================ */
.card{
  background:var(--grouped-bg2);
  border-radius:var(--r-card);
  padding:var(--s5);
  box-shadow:var(--shadow-1);
  transition:transform var(--d-base) var(--spring), box-shadow var(--d-base) var(--ease);
}
.card-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent); font-size:20px;
}
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:.5px solid var(--glass-border);
  border-radius:var(--r-card);
}

/* ============================================================
   §8  LISTS — HIG Inset Grouped List (핵심 패턴)
   ============================================================ */
.list-group{
  background:var(--grouped-bg2);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.list-row{
  display:flex; align-items:center; gap:var(--s3);
  min-height:var(--tap); padding:var(--s3) var(--s4);
  position:relative;
}
.list-row + .list-row::before{
  content:''; position:absolute; top:0; left:var(--s4); right:0;
  height:.5px; background:var(--separator);
}
.list-row-title{ font-size:var(--t-body); font-weight:400; }
.list-row-value{ margin-left:auto; color:var(--label2); font-size:var(--t-body); }
.list-header{
  font-size:var(--t-footnote); font-weight:400; text-transform:uppercase;
  letter-spacing:.04em; color:var(--label2);
  padding:var(--s5) var(--s4) var(--s2);
}

/* ============================================================
   §9  BADGES / TAGS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:var(--t-caption1); line-height:var(--lh-caption1); font-weight:600;
  background:var(--fill3); color:var(--label2);
  white-space:nowrap;
}
.badge-primary{ background:var(--accent-soft); color:var(--accent); }
.badge-success{ background:rgba(52,199,89,.14);  color:#248A3D; }
.badge-warning{ background:rgba(255,149,0,.14);  color:#C93400; }
.badge-danger { background:rgba(255,59,48,.14);  color:#D70015; }
.badge-gray   { background:var(--fill3); color:var(--label2); }

/* ============================================================
   §10  FORMS — HIG: 최소 44pt, 채워진 필드
   ============================================================ */
.form-group{ margin-bottom:var(--s4); }
.form-label{
  display:block; margin-bottom:var(--s2);
  font-size:var(--t-subhead); font-weight:600; color:var(--label);
}
.form-input,.form-select,.form-textarea{
  width:100%; min-height:var(--tap);
  padding:var(--s3) var(--s4);
  font-size:var(--t-body);
  background:var(--grouped-bg2); color:var(--label);
  border:.5px solid var(--separator); border-radius:var(--r-md);
  transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.form-input::placeholder,.form-textarea::placeholder{ color:var(--label3); }
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3.5px var(--accent-soft);
}
.form-textarea{ min-height:96px; resize:vertical; line-height:var(--lh-body); }
.form-select{ appearance:none; padding-right:var(--s8);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233C3C43' fill-opacity='.6'%3E%3Cpath d='M4.2 6.3 8 10.1l3.8-3.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s4) center; background-size:14px; }
.form-hint{ margin-top:var(--s1); font-size:var(--t-footnote); color:var(--label2); }

/* ============================================================
   §11  SEGMENTED CONTROL (탭) — HIG 표준 구성요소
   ============================================================ */
.tabs,.period-tabs,.finance-tabs{
  display:inline-flex; gap:2px; padding:2px;
  background:var(--fill3); border-radius:var(--r-sm);
}
.tab-btn{
  flex:1; min-height:30px; padding:0 var(--s4);
  font-size:var(--t-subhead); font-weight:500; color:var(--label);
  background:transparent; border:0; border-radius:6px; cursor:pointer; white-space:nowrap;
  transition:background var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.tab-btn.active{ background:var(--bg); font-weight:600; box-shadow:var(--shadow-1); }
.tab-content{ display:none; }
/* 세그먼티드 컨트롤과 그 아래 내용이 붙지 않도록 간격 확보 */
.tab-content.active{ display:block; margin-top:var(--s4); animation:fade var(--d-base) var(--ease); }
@keyframes fade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* ============================================================
   §12  ALERTS — HIG: 색은 신호일 뿐, 의미는 텍스트가 전달
   ============================================================ */
.alert{
  display:flex; gap:var(--s3);
  padding:var(--s4); border-radius:var(--r-md);
  font-size:var(--t-subhead); line-height:var(--lh-subhead);
  background:var(--fill4); color:var(--label);
}
.alert-info   { background:var(--accent-soft);       color:#0040A0; }
.alert-success{ background:rgba(52,199,89,.12);      color:#1D7A34; }
.alert-warning{ background:rgba(255,149,0,.12);      color:#A34700; }
.alert-danger { background:rgba(255,59,48,.12);      color:#B80012; }

/* ============================================================
   §13  MODAL / SHEET — HIG Sheet 패턴
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center; padding:var(--s5);
  background:rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal-overlay.open,.modal-overlay.active{ display:flex; }
.modal{
  width:100%; max-width:520px; max-height:86vh; overflow:auto;
  background:var(--bg); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);
  animation:sheet var(--d-base) var(--spring);
}
@keyframes sheet{ from{opacity:0; transform:translateY(24px) scale(.97)} to{opacity:1; transform:none} }
.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s5); border-bottom:.5px solid var(--separator);
}
.modal-title{ font-size:var(--t-headline); font-weight:600; }
.modal-close{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:var(--fill3); color:var(--label2); border:0; border-radius:var(--r-pill);
  cursor:pointer; font-size:15px; line-height:1;
}
.modal-close:hover{ background:var(--fill2); }

/* ============================================================
   §14  TABLES
   ============================================================ */
.table-wrapper,.fin-table-wrap{
  overflow-x:auto; background:var(--grouped-bg2);
  border-radius:var(--r-md); box-shadow:var(--shadow-1);
}
table,.fin-table{ width:100%; border-collapse:collapse; font-size:var(--t-subhead); }
th{
  text-align:left; padding:var(--s3) var(--s4); font-weight:600;
  color:var(--label2); font-size:var(--t-footnote); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:.5px solid var(--separator); white-space:nowrap;
}
td{ padding:var(--s3) var(--s4); border-bottom:.5px solid var(--separator); word-break:keep-all; overflow-wrap:break-word; }
/* 이름·상태처럼 짧고 끊기면 안 되는 칸: 좁은 폭에서도 한 줄 유지 */
td:first-child, td:last-child{ white-space:nowrap; }
tbody tr:last-child td{ border-bottom:0; }

/* ============================================================
   §15  PAGE HEADER — HIG: 큰 제목(Large Title), 장식 없음
   ============================================================ */
.page-header{
  padding:var(--s12) 0 var(--s8);
  background:var(--grouped-bg2);
  border-bottom:.5px solid var(--separator);
}
.page-header > *{ width:100%; max-width:var(--content-max); margin-inline:auto; padding-inline:var(--s5); }
.breadcrumb{
  display:flex; align-items:center; gap:var(--s1);
  font-size:var(--t-footnote); color:var(--label2); margin-bottom:var(--s2);
}
.breadcrumb span + span::before{ content:'›'; margin-right:var(--s1); color:var(--label3); }
.page-header h1{
  font-size:var(--t-large-title); line-height:var(--lh-large-title);
  font-weight:700; letter-spacing:-.022em; color:var(--label);
}
.page-header p{ margin-top:var(--s2); font-size:var(--t-callout); color:var(--label2); }

/* ============================================================
   §16  STATS
   ============================================================ */
.stat-card{
  background:var(--grouped-bg2); border-radius:var(--r-card);
  padding:var(--s5); box-shadow:var(--shadow-1); text-align:center;
}
.stat-value{ font-size:var(--t-title1); line-height:var(--lh-title1); font-weight:700; letter-spacing:-.021em; color:var(--label); }
.stat-label{ margin-top:var(--s1); font-size:var(--t-footnote); color:var(--label2); }

/* ============================================================
   §17  STATUS (출석)
   ============================================================ */
.attendance-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:var(--t-caption1); font-weight:600;
}
.status-present{ background:rgba(52,199,89,.14); color:#248A3D; }
.status-late   { background:rgba(255,149,0,.14); color:#C93400; }
.status-absent { background:rgba(255,59,48,.14); color:#D70015; }
.status-excused{ background:var(--fill3);        color:var(--label2); }

/* ============================================================
   §18  PROGRESS
   ============================================================ */
.progress-bar{ height:6px; background:var(--fill3); border-radius:var(--r-pill); overflow:hidden; }
.progress-fill{ height:100%; background:var(--accent); border-radius:inherit; transition:width var(--d-slow) var(--ease); }

/* ============================================================
   §19  EMPTY STATE — HIG: 다음 행동을 안내
   ============================================================ */
.empty-state{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  padding:var(--s16) var(--s5); text-align:center; color:var(--label2);
}
.empty-state strong{ font-size:var(--t-headline); font-weight:600; color:var(--label); }

/* ============================================================
   §20  FOOTER
   ============================================================ */
.footer{
  padding:var(--s8) 0 var(--s6);
  background:var(--grouped-bg2);
  border-top:.5px solid var(--separator);
  color:var(--label2); font-size:var(--t-footnote);
}
.footer .container{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); text-align:center; }
.footer-logo-img{ height:20px; opacity:.5; }
.footer-social{ display:flex; gap:var(--s4); margin-block:calc(-1 * var(--s2)); }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap);
  color:var(--label2); transition:color var(--d-fast) var(--ease);
}
.footer-social a svg{ width:22px; height:22px; flex:none; }
.footer-social a:hover{ color:var(--accent); }
.footer-copy,.footer-sub{ color:var(--label3); font-size:var(--t-caption1); }

/* ============================================================
   §21  TIMELINE
   ============================================================ */
.timeline{ display:flex; flex-direction:column; gap:var(--s4); }
.timeline-item{ display:flex; gap:var(--s4); align-items:flex-start; }
.timeline-date{
  flex:0 0 68px; font-size:var(--t-footnote); font-weight:600;
  color:var(--accent); padding-top:2px;
}
.timeline-content{
  flex:1; background:var(--grouped-bg2); border-radius:var(--r-md);
  padding:var(--s4); box-shadow:var(--shadow-1);
}

/* ============================================================
   §22  ACCORDION (Disclosure) — HIG
   ============================================================ */
.accordion-item{
  background:var(--grouped-bg2); border-radius:var(--r-md);
  box-shadow:var(--shadow-1); overflow:hidden; margin-bottom:var(--s2);
}
.accordion-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  min-height:var(--tap); padding:var(--s3) var(--s4); cursor:pointer;
}
.accordion-header:hover{ background:var(--fill4); }
.accordion-title{ font-size:var(--t-headline); font-weight:600; }
.accordion-icon{ color:var(--label3); transition:transform var(--d-base) var(--spring); }
.accordion-item.open .accordion-icon{ transform:rotate(90deg); }
.accordion-body{ display:none; padding:0 var(--s4) var(--s4); }
.accordion-item.open .accordion-body{ display:block; }

/* ============================================================
   §23  GALLERY
   ============================================================ */
.gallery-grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.gallery-item{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-md); background:var(--fill4);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease); }
.gallery-item:hover img{ transform:scale(1.04); }
.gallery-overlay{
  position:absolute; inset:auto 0 0 0; padding:var(--s3);
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent); color:#fff;
}
.gallery-caption{ font-size:var(--t-footnote); font-weight:500; }

/* ============================================================
   §24  RESPONSIVE — HIG: 모든 크기에 적응
   ============================================================ */
@media (max-width:640px){
  :root{ --t-large-title:30px; --lh-large-title:36px; --t-title1:24px; --lh-title1:30px; }
  .container{ padding-inline:var(--margin); }
  .section{ padding-block:var(--s10); }
  .page-header{ padding:var(--s8) 0 var(--s6); }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}