/* ===================================================================
   2026년 인천 AI·SW미래채움 교육페스티벌 — 관계자 운영 포털

   기존 사이트의 인상(흰 배경 · 남색 본문 · 보라 포인트 · 둥근 카드)은
   유지하되, 홍보물이 아니라 운영 도구이므로 정보 밀도를 높였습니다.
   장식보다 상태와 숫자가 먼저 읽히게 하는 것이 목표입니다.
   =================================================================== */

:root {
  /* 바탕·글자 */
  --bg:        #FFFFFF;
  --bg-soft:   #F7F8FC;
  --bg-sink:   #F1F3F9;
  --ink:       #16203C;
  --ink-2:     #38456B;
  --muted:     #5C6989;
  --muted-2:   #7A87A6;
  --line:      #E4E8F2;
  --line-2:    #EFF2F8;

  /* 포인트 — 보라 */
  --primary:   #5B45E0;
  --primary-d: #4634BE;
  --primary-t: #F0EDFE;

  /* 상태 — 색만으로 뜻을 전하지 않고 항상 글자를 함께 씁니다 */
  --ok:      #0F7A57;  --ok-t:      #E4F5EE;
  --warn:    #9A6206;  --warn-t:    #FBF0DC;
  --danger:  #B32B3E;  --danger-t:  #FCEAEC;
  --info:    #1F5FA8;  --info-t:    #E7F0FB;
  --off:     #6B7794;  --off-t:     #EEF0F5;

  --r:    12px;
  --r-lg: 16px;
  /* 카드가 많은 화면이라 그림자가 겹치면 화면이 탁해집니다.
     떠 보이게 하는 대신 '경계가 있다' 정도만 알리는 세기입니다. */
  --sh:   0 1px 2px rgba(22, 32, 60, 0.04), 0 3px 10px -8px rgba(22, 32, 60, 0.10);

  --side-w: 232px;
  --tabbar-h: 60px;

  /* 본문 좌우 여백. 안내도를 화면 끝까지 늘릴 때 이 값만큼
     되돌려야 해서 변수로 뺐습니다. */
  --main-pad: 16px;

  /* 화면 사이 간격. 섹션은 넉넉히, 카드끼리는 촘촘히 둡니다. */
  --gap-section: 24px;
  --gap-card:    10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, system-ui, -apple-system,
               'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: var(--primary); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; background: var(--bg-sink);
  padding: 2px 6px; border-radius: 5px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: var(--primary);
  padding: 12px 20px; border-radius: 999px; font-weight: 700;
  text-decoration: none; box-shadow: var(--sh);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── 버튼 ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px;                     /* 최소 터치 영역 */
  padding: 10px 20px; border: 1px solid transparent; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
.btn--sm   { min-height: 36px; padding: 7px 14px; font-size: 13.5px; border-radius: 8px; }
.btn--full { width: 100%; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-d); }
.btn--primary:disabled { background: var(--muted-2); cursor: default; }
.btn--ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn--ghost:hover { background: var(--bg-sink); }
.btn--danger { background: #fff; color: var(--danger); border-color: #F0CFD4; }
.btn--danger:hover { background: var(--danger-t); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.iconbtn:hover { background: var(--bg-sink); color: var(--ink); }

/* ── 입력 ─────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field__req { color: var(--danger); margin-left: 2px; }

.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { resize: vertical; min-height: 92px; line-height: 1.7; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }

.check { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); flex: 0 0 auto; cursor: pointer; }

/* ── 로그인·설정 화면 ─────────────────────────────────────────── */
.gate { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 18px; }
.gate__card {
  width: 100%; max-width: 400px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 26px; box-shadow: var(--sh);
  display: flex; flex-direction: column; gap: 15px;
}
.gate__kicker { font-size: 12.5px; font-weight: 700; color: var(--primary); line-height: 1.5; }
.gate__title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.gate__date { font-size: 14px; color: var(--muted); margin-top: -6px; }
.gate__desc { font-size: 14px; line-height: 1.75; color: var(--muted); }
.gate__hint {
  font-size: 12.5px; line-height: 1.7; color: var(--muted-2);
  padding-top: 14px; border-top: 1px solid var(--line-2);
}

.alert { border-radius: 10px; padding: 11px 14px; font-size: 13.5px; line-height: 1.6; font-weight: 500; }
.alert--error { background: var(--danger-t); color: var(--danger); }
.alert--info  { background: var(--info-t);  color: var(--info); }

/* ── 앱 뼈대 ──────────────────────────────────────────────────── */
.app { min-height: 100dvh; display: flex; }

.side { display: none; }

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px; min-height: 52px;
}
.topbar__title { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; }
.topbar__clock { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.main {
  flex: 1; min-width: 0;
  padding: 18px var(--main-pad) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
}
.main:focus { outline: none; }

/* ── 하단 탭바 (모바일) ───────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h); border: none; background: none; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none;
}
.tabbar .tab__dot {
  width: 20px; height: 20px; border-radius: 7px; background: var(--bg-sink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted-2);
}
.tabbar .is-on { color: var(--primary); }
.tabbar .is-on .tab__dot { background: var(--primary-t); color: var(--primary); }
.tabbar .tab__badge {
  position: absolute; transform: translate(14px, -10px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── 페이지 공통 ──────────────────────────────────────────────── */
/* 넓은 모니터에서 본문까지 늘리면 한 줄이 길어져 눈이 줄을 잃습니다.
   폭을 여기서 묶고 가운데로 모읍니다. 화면이 더 넓어져도 이 값은
   그대로 두고, 남는 자리는 여백으로 둡니다. */
.page {
  display: flex; flex-direction: column; gap: var(--gap-section);
  width: 100%; max-width: 1120px; margin-inline: auto;
}
.page__head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page__title { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.25; }
.page__desc { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 5px; max-width: 62ch; }
.page__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh);
}
.card__pad { padding: 16px; }

/* 섹션 제목은 페이지 제목과 카드 제목 사이에 분명히 자리해야 합니다.
   셋이 비슷하면 어디서 이야기가 바뀌는지 알 수 없습니다. */
.section-title {
  font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em;
  display: flex; align-items: center; gap: 8px; margin-bottom: -4px;
}
.section-title .count { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }

.state {
  background: #fff; border: 1px dashed var(--line); border-radius: var(--r);
  padding: 28px 18px; text-align: center; font-size: 14px; color: var(--muted);
}
.state--error { border-style: solid; border-color: #F0CFD4; background: var(--danger-t); color: var(--danger); }
.state__act { margin-top: 12px; }

/* 비어 있는 화면. 행사 정보가 아직 채워지는 중이라 자주 보게 되는
   화면이라, 한 줄만 두지 않고 무엇이 들어올 자리인지 함께 알립니다.
   큰 그림이나 두꺼운 카드는 쓰지 않습니다 — 운영 도구이지
   빈 화면이 주인공은 아닙니다. */
.state--empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; background: var(--bg-soft);
}
.state__icon { display: block; width: 26px; height: 26px; color: var(--muted-2); margin-bottom: 2px; }
.state__icon svg { width: 100%; height: 100%; display: block; }
.state__title { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.state__hint { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 34ch; }

/* ── 예시 카드 ────────────────────────────────────────────────
   실제 데이터가 아직 없을 때, 그 메뉴에 무엇이 들어오는지 보여 줍니다.
   흐리게 만들지 않습니다 — 구성을 읽을 수 있어야 하기 때문입니다.
   대신 점선 테두리와 “예시” 배지로 진짜와 구분합니다. */
.sample { display: flex; flex-direction: column; gap: 12px; }
.samplenote {
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
  background: var(--bg-sink); border-radius: 10px; padding: 10px 13px;
}
.is-sample {
  border-style: dashed; box-shadow: none; cursor: default;
  background: var(--bg-soft);
}
/* 눌러서 상세까지 볼 수 있는 예시는 손 모양과 옅은 강조를 줍니다.
   요란한 움직임 없이 "누를 수 있다" 만 전합니다. */
button.is-sample { cursor: pointer; transition: border-color 130ms ease, background 130ms ease; }
button.is-sample:hover { border-color: var(--primary); background: #fff; }
.is-sample .rowcard__name,
.is-sample .notice__title,
.is-sample .req__title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.is-sample .btn:disabled { opacity: 0.55; }

/* 예시 FAQ 는 접었다 펴지 않고 질문과 답을 함께 보여 줍니다. */
.faq__q--static { cursor: default; font-weight: 600; }
.is-sample .faq__a { padding-top: 0; }

/* 화면 맨 위 한두 줄 안내 */
.pagenote {
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
  background: var(--bg-sink); border-radius: 10px; padding: 10px 13px;
}

/* ── 상태 배지 — 색 + 글자 ────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--off-t); color: var(--off);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge--ok     { background: var(--ok-t);     color: var(--ok); }
.badge--warn   { background: var(--warn-t);   color: var(--warn); }
.badge--danger { background: var(--danger-t); color: var(--danger); }
.badge--info   { background: var(--info-t);   color: var(--info); }
.badge--plain::before { display: none; }
/* 예시 표시 — 실제 상태 배지보다 한 단계 낮은 강조 */
.badge--sample { background: var(--primary-t); color: var(--primary); font-weight: 600; }

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-card); }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px; text-align: left; cursor: pointer; box-shadow: var(--sh);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 130ms ease;
}
/* 들어 올리지 않습니다. 숫자 넉 장이 동시에 들썩이면 산만합니다. */
.stat:hover { border-color: var(--primary); }
.stat__n { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.stat__l { font-size: 13.5px; font-weight: 600; color: var(--muted); }
/* 0 인 칸이 허전하지 않도록 무엇을 세는지 한 줄 */
.stat__hint { font-size: 11.5px; line-height: 1.5; color: var(--muted-2); margin-top: 2px; }
.stat--ok     .stat__n { color: var(--ok); }
.stat--warn   .stat__n { color: var(--warn); }
.stat--danger .stat__n { color: var(--danger); }
.stat--info   .stat__n { color: var(--info); }

/* 상세 드로어의 보조 줄 */
.nowcard__meta { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ── 목록 도구 (검색·필터) ────────────────────────────────────── */
.tools { display: flex; flex-direction: column; gap: 10px; }
.search { position: relative; }
.search input { padding-left: 38px; }
.search::before {
  content: '⌕'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); font-size: 17px; pointer-events: none;
}
.chiprow { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 36px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip__n { opacity: 0.75; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ── 일정 타임라인 ────────────────────────────────────────────── */
.tl { display: flex; flex-direction: column; gap: var(--gap-card); }
.tlitem {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r); padding: 13px 15px; box-shadow: var(--sh);
  display: flex; gap: 13px; flex-wrap: wrap; align-items: flex-start;
}
.tlitem--now  { border-left-color: var(--primary); background: #FCFBFF; }
.tlitem--done { opacity: 0.58; }
.tlitem--off  { border-left-color: var(--danger); }
.tlitem__time {
  min-width: 96px; font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.tlitem__body { flex: 1; min-width: min(100%, 180px); }
.tlitem__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; }
.tlitem__meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.tlitem__memo { font-size: 12.5px; color: var(--muted-2); margin-top: 5px; }
.tlitem__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ── 부스 ─────────────────────────────────────────────────────── */
.boothgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.booth {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; box-shadow: var(--sh); text-align: left; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color 130ms ease;
}
.booth:hover { border-color: var(--primary); }
.booth__top { display: flex; align-items: center; gap: 9px; }
.booth__code {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-t); padding: 3px 9px; border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
.booth__name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; }
.booth__org { font-size: 13px; color: var(--muted); }
.booth__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--bg-sink); padding: 3px 8px; border-radius: 6px;
}

/* ── 공지 ─────────────────────────────────────────────────────── */
.notice {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px; box-shadow: var(--sh); width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.notice--urgent { border-color: #F0CFD4; background: #FFFBFB; }
/* 눌러서 상세를 볼 수 있는 카드입니다. 그 사실이 보이도록 아주 옅은
   테두리·그림자 변화만 둡니다 — 목록에서 여러 장이 한꺼번에 움직이면
   읽기 어려워지므로 크기나 위치는 건드리지 않습니다. */
.notice { transition: border-color 130ms ease, box-shadow 130ms ease; }
.notice:hover { border-color: var(--primary); }
.notice--urgent:hover { border-color: var(--danger); }
.notice__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; }
.notice__body { font-size: 14px; color: var(--muted); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice__meta { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* ── 요청 ─────────────────────────────────────────────────────── */
.req {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px; box-shadow: var(--sh); width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.req__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req__title { font-size: 15px; font-weight: 700; letter-spacing: -0.025em; }
.req__meta { font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.fab {
  position: fixed; right: 16px; z-index: 45;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  min-height: 52px; padding: 14px 20px; border: none; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 6px 20px -6px rgba(91, 69, 224, 0.7); cursor: pointer;
}
.fab:hover { background: var(--primary-d); }

/* ── 연락망 · 자료실 · 행사장 ─────────────────────────────────── */
.rowcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px; box-shadow: var(--sh);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rowcard__body { flex: 1; min-width: min(100%, 160px); }
.rowcard__name { font-size: 15px; font-weight: 700; letter-spacing: -0.025em; }
.rowcard__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rowcard__act { margin-left: auto; }

.faq { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.faq__q {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px; min-height: 52px; border: none; background: none; cursor: pointer;
  text-align: left; font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
}
.faq__q span:first-child { flex: 1; }
.faq__sign { color: var(--muted-2); font-size: 18px; transition: transform 150ms ease; }
.faq.is-open .faq__sign { transform: rotate(45deg); }
.faq__a { padding: 0 15px 16px; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* ── 드로어 · 시트 ────────────────────────────────────────────── */
.drawer, .sheet { position: fixed; inset: 0; z-index: 80; }
.drawer__scrim, .sheet__scrim { position: absolute; inset: 0; background: rgba(22, 32, 60, 0.4); }

.drawer__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; display: flex; flex-direction: column;
  background: #fff; border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer__head, .sheet__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line-2);
}
.drawer__title, .sheet__title { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
/* 손가락으로 누르는 버튼이라 44px 밑으로는 내려가지 않게 합니다. */
.drawer__head .iconbtn, .sheet__head .iconbtn { width: 44px; height: 44px; flex: 0 0 auto; }
.drawer__body { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }

/* 긴급 공지는 목록에서 붉게 보였으니 상세에서도 이어 줍니다.
   같은 공지인데 열었더니 평범해 보이면 무게가 달라집니다. */
.drawer__panel--urgent .drawer__head {
  background: var(--danger-t); border-bottom-color: #F0CFD4;
}
.drawer__panel--urgent .drawer__title { color: var(--danger); }

/* 공지 본문 — 여러 문단과 줄바꿈을 적은 그대로 보여 줍니다. */
.noticebody {
  font-size: 15px; line-height: 1.85; color: var(--ink-2);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}

/* 긴 글을 다 읽고 위로 되돌아가지 않아도 되게 아래에도 닫기를 둡니다. */
.drawer__foot { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line-2); }

.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 18px 18px 0 0; padding: 0 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.sheet__nav { display: flex; flex-direction: column; }
.sheet__nav a {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 10px 4px; text-decoration: none; color: var(--ink);
  font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line-2);
}
.sheet__nav a.is-on { color: var(--primary); }

/* 상세 안의 정의 목록 */
.dl { display: grid; gap: 10px; }
.dl__row { display: flex; gap: 12px; align-items: baseline; }
.dl dt { min-width: 92px; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dl dd { flex: 1; margin: 0; font-size: 14.5px; line-height: 1.6; }


/* ── 알림 ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px); z-index: 90;
  max-width: min(92vw, 420px);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  box-shadow: 0 8px 24px -8px rgba(22, 32, 60, 0.5);
}
.toast.is-error { background: var(--danger); }

/* ═══ 태블릿 이상 ═══════════════════════════════════════════════ */
@media (min-width: 768px) {
  .statgrid { grid-template-columns: repeat(4, 1fr); }
  .boothgrid { grid-template-columns: repeat(2, 1fr); }
  :root { --main-pad: 22px; }
  .main { padding: 22px var(--main-pad) 40px; }
  .drawer__panel {
    left: auto; top: 0; bottom: 0; width: min(460px, 100%);
    max-height: none; border-radius: 0;
  }
}

/* ═══ 데스크톱 — 사이드바 운영툴 ════════════════════════════════ */
@media (min-width: 1024px) {
  .side {
    display: flex; flex-direction: column; gap: 16px;
    position: sticky; top: 0; align-self: flex-start;
    width: var(--side-w); flex: 0 0 var(--side-w); height: 100dvh;
    background: #fff; border-right: 1px solid var(--line); padding: 18px 14px;
  }
  .side__brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
  .side__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--primary); flex: 0 0 auto; }
  .side__brand b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.03em; }
  .side__brand small { display: block; font-size: 11.5px; color: var(--muted-2); }
  .side__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
  .side__nav a {
    display: flex; align-items: center; gap: 9px; min-height: 42px;
    padding: 9px 12px; border-radius: 9px; text-decoration: none;
    font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  }
  .side__nav a:hover { background: var(--bg-sink); }
  .side__nav a.is-on { background: var(--primary-t); color: var(--primary); }
  .side__nav .nav__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
  .side__who { font-size: 12.5px; color: var(--muted-2); padding: 0 6px; line-height: 1.5; }

  .topbar { display: none; }
  .tabbar { display: none; }
  .fab { bottom: 24px; right: 24px; }
  :root { --main-pad: 28px; }
  .main { padding: 26px var(--main-pad) 48px; }
  .toast { bottom: 24px; }
}

@media (min-width: 1440px) {
  .statgrid { grid-template-columns: repeat(4, 1fr); }
}


/* ═══ 현장 운영 화면 ══════════════════════════════════════════════
   일정 타임라인 · 담당 업무 · 운영 물품 · 요약 숫자.
   기존 카드 문법(흰 바탕 · 옅은 테두리 · 절제된 그림자)을 그대로
   따릅니다. 새 화면이라고 색을 더 쓰지 않습니다. ═════════════ */

/* ── 메뉴 그룹 제목 ──────────────────────────────────────────── */
.side__group {
  margin: 12px 6px 2px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted-2); text-transform: none;
}
.side__group:first-child { margin-top: 2px; }
.sheet__group {
  margin: 14px 4px 2px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--muted-2);
}
.sheet__group:first-child { margin-top: 0; }

/* ── 결과 수 ─────────────────────────────────────────────────── */
.resultline {
  margin: -2px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* ── 작은 요약 숫자 ──────────────────────────────────────────────
   대시보드의 stat 보다 한 단계 작습니다. 화면의 주인공이 목록일 때
   위쪽에서 자리를 적게 쓰면서 전체 그림만 알려 줍니다. */
.minigrid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.mini {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mini__n {
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.mini__l { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.mini--ok   .mini__n { color: var(--ok); }
.mini--info .mini__n { color: var(--primary); }
.mini--warn .mini__n { color: var(--warn); }

.mini--btn {
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color 130ms ease, background 130ms ease;
}
.mini--btn:hover { border-color: var(--primary); }
.mini--btn.is-on { border-color: var(--primary); background: var(--primary-t); }
.mini--btn.is-on .mini__n { color: var(--primary); }

/* ── 현재 시각 막대 ──────────────────────────────────────────── */
.nowbar {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 15px; box-shadow: var(--sh);
}
.nowbar__l { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.nowbar__t {
  font-size: 26px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.nowbar__tag {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--primary); background: var(--primary-t);
  padding: 4px 9px; border-radius: 999px;
}
.nowbar--live { border-color: var(--primary); }
.nowbar--live .nowbar__t { color: var(--primary); }

/* ── 타임라인 ─────────────────────────────────────────────────── */
.tml { display: flex; flex-direction: column; gap: 4px; }
.tmlgroup { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: start; }
/* 시각 기둥은 안내선입니다. 본문보다 눈에 띄면 안 됩니다. */
.tmlgroup__hour {
  position: sticky; top: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted-2);
  font-variant-numeric: tabular-nums; padding-top: 16px;
}
.tmlgroup__rows {
  display: flex; flex-direction: column; gap: var(--gap-card);
  padding: 6px 0 16px; border-left: 1px solid var(--line-2); padding-left: 14px;
  position: relative;
}

.tmlrow {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px; box-shadow: var(--sh);
  display: flex; gap: 12px; align-items: flex-start; position: relative;
}
/* 기둥 위의 점. 시각과 카드를 눈으로 잇습니다. */
.tmlgroup__rows > .tmlrow::before {
  content: ''; position: absolute; left: -19px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); border: 0;
}
.tmlrow--now::before { background: var(--primary); }
.tmlrow--done::before { background: var(--line-2); }

/* 시간이 가장 먼저 읽혀야 합니다. */
.tmlrow__time {
  flex: 0 0 auto; min-width: 52px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.45;
}
.tmlrow__to { display: block; font-weight: 500; color: var(--muted-2); font-size: 12px; }
.tmlrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tmlrow__title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.tmlrow__meta { font-size: 14px; color: var(--muted); line-height: 1.55; }
/* 메모는 보조 정보라 두 줄까지만 둡니다. */
.tmlrow__memo { font-size: 13px; color: var(--muted-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tmlrow__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 1px; }

.tmlrow--now { border-color: var(--primary); background: #FCFBFF; }
.tmlrow--done { background: var(--bg-sink); }
.tmlrow--done .tmlrow__title { color: var(--muted); }
.tmlrow--off { opacity: 0.72; }

/* 색만으로 알리지 않습니다. 글자로 한 번 더 적습니다. */
.tmlrow__live {
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-t); padding: 3px 8px; border-radius: 999px;
}
.keymark {
  font-size: 11px; font-weight: 700; color: var(--warn);
  background: var(--warn-t); padding: 2px 7px; border-radius: 6px;
}

/* 현재 시각 선 */
.nowline { display: flex; align-items: center; gap: 10px; margin: 4px 0 4px 64px; }
.nowline::after { content: ''; flex: 1; height: 2px; background: var(--danger); border-radius: 2px; }
.nowline__t {
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: var(--danger); padding: 3px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 드로어 안에서 쓰는 단순 타임라인(개인별 역할) */
.tml--plain { gap: 8px; }
.tml--plain .tmlrow { box-shadow: none; }

/* ── 보기 방식 전환 ──────────────────────────────────────────── */
.segrow {
  display: flex; gap: 4px; background: var(--bg-sink);
  border: 1px solid var(--line); border-radius: 12px; padding: 4px;
}
.seg {
  flex: 1; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em;
  transition: background 130ms ease, color 130ms ease;
}
.seg:hover { color: var(--ink-2); }
.seg.is-on { background: #fff; color: var(--primary); box-shadow: var(--sh); }

/* 켜고 끄는 칩(핵심 일정만 보기) */
.chip--toggle.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── 구역 제목 ───────────────────────────────────────────────── */
.section-title__n {
  margin-left: 7px; font-size: 12px; font-weight: 700; color: var(--muted-2);
  background: var(--bg-sink); padding: 2px 8px; border-radius: 999px;
}
.section-title__go {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--primary); padding: 4px 6px;
  border-radius: 8px;
}
.section-title__go:hover { background: var(--primary-t); }

/* ── 담당 업무 ───────────────────────────────────────────────── */
.taskgroup { display: flex; flex-direction: column; gap: 10px; }
.task {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px; box-shadow: var(--sh); width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
button.task:hover { border-color: var(--primary); }
.task__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task__time {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-t); padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.task__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; }
.task__meta { font-size: 14px; color: var(--muted); line-height: 1.55; }
.task__meta--none { color: var(--muted-2); font-style: normal; }
.task__desc { font-size: 13px; color: var(--muted); line-height: 1.65; }
.task__people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.person {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-sink); border-radius: 999px; padding: 4px 10px;
}
.person__role { font-weight: 500; color: var(--muted-2); font-size: 11.5px; }

/* 누를 수 있는 줄카드(개인별 역할 목록) */
.rowcard--btn {
  width: 100%; text-align: left; cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.rowcard--btn:hover { border-color: var(--primary); }
.rowcard__go { font-size: 19px; color: var(--muted-2); line-height: 1; }

/* ── 운영 물품 ───────────────────────────────────────────────── */
.supply {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px; box-shadow: var(--sh); width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
button.supply:hover { border-color: var(--primary); }
.supply__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.supply__name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; }
.supply__meta { font-size: 14px; color: var(--muted); }
.supply__meta--none { color: var(--muted-2); }
.supply__items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chipitem {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-sink); border-radius: 8px; padding: 4px 9px;
}
.chipitem b { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

/* 수량 표 — 드로어 안에서 씁니다. */
.qtytable { width: 100%; border-collapse: collapse; font-size: 14px; }
.qtytable th, .qtytable td {
  padding: 10px 4px; border-bottom: 1px solid var(--line-2); text-align: left;
}
.qtytable th { font-size: 12px; font-weight: 700; color: var(--muted); }
.qtytable__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qtytable tbody tr:last-child td { border-bottom: 0; }

/* ── 대시보드: 하이라이트 · 운영 안내 ────────────────────────── */
.keybox { display: flex; flex-direction: column; gap: 10px; }
.keyrow {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.keycard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 14px; box-shadow: var(--sh); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.keycard:hover { border-color: var(--primary); }
.keycard__time {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.keycard__title {
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.keycard__meta { font-size: 12.5px; color: var(--muted); }
.keycard--now { border-color: var(--primary); background: #FCFBFF; }
.keycard__now {
  align-self: flex-start; margin-top: 2px;
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--primary-t); padding: 3px 8px; border-radius: 999px;
}


/* ── 모바일 ──────────────────────────────────────────────────────
   375px 에서 시간 기둥이 본문을 너무 좁히지 않게 줄입니다. */
@media (max-width: 420px) {
  .tmlgroup { grid-template-columns: 44px 1fr; gap: 8px; }
  .tmlgroup__rows { padding-left: 11px; }
  .tmlgroup__rows > .tmlrow::before { left: -17px; }
  .tmlrow { flex-direction: column; gap: 7px; padding: 12px 13px; }
  .tmlrow__time { display: flex; align-items: baseline; gap: 6px; }
  .tmlrow__to::before { content: '– '; }
  .tmlrow__to { display: inline; }
  .nowline { margin-left: 52px; }
  .minigrid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .keyrow { grid-template-columns: 1fr; }
  .nowbar__t { font-size: 22px; }
}


/* ═══ 밀도와 위계 다듬기 ═══════════════════════════════════════════
   상자를 하나 더 만들기 전에, 글자 크기와 간격으로 먼저 해결합니다.
   흰 카드가 연달아 쌓이면 무엇이 중요한지 알 수 없게 됩니다. ═══ */

/* 한 줄 요약 — 상자 없이 글자만. 배치도와 목록 사이를 잇습니다. */
.sumline {
  margin: -6px 2px 0; font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
}
.sumline b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sumline span { color: var(--line); }

/* 필터 두 줄. 위는 자주 쓰는 것, 아래는 보조 갈래입니다.
   같은 크기로 두면 무엇을 먼저 눌러야 할지 알 수 없습니다. */
.filterline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chiprow--end { margin-left: auto; }

.chiprow--sub .chip {
  min-height: 32px; padding: 5px 11px; font-size: 13px;
  background: transparent; border-color: transparent; color: var(--muted);
}
.chiprow--sub .chip:hover { background: var(--bg-sink); color: var(--ink-2); }
.chiprow--sub .chip.is-on {
  background: var(--bg-sink); border-color: var(--line); color: var(--ink);
}
.chiprow--sub .chip__n { opacity: 0.75; }

/* 보조 배지 — 분류처럼 "참고" 에 가까운 값에 씁니다.
   상태 배지와 같은 무게로 보이면 상태가 묻힙니다. */
.tag--soft {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted-2); font-weight: 600;
}

/* 글자만 있는 보조 버튼. 카드나 테두리를 더 만들지 않습니다. */
.linkbtn {
  border: 0; background: transparent; cursor: pointer; padding: 4px 6px;
  border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--primary);
}
.linkbtn:hover { background: var(--primary-t); }
.section-title .linkbtn { margin-left: auto; }

/* 대시보드 운영 안내 — 앞 세 줄만. 나머지는 드로어에서 읽습니다. */
.noticebody.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 물품 이름이 많을 때의 "+2" */
.chipitem--more { color: var(--muted-2); background: transparent; border: 1px dashed var(--line); }

/* 주요 일정 카드는 셋이라 한 줄에 놓입니다. */
.keyrow { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* 부스 카드에서 태그 줄이 빠져 아래 여백이 남습니다. */
.booth { gap: 5px; }
.booth__org { font-size: 14px; }

/* 목록 위 결과 수는 목록에 붙여 둡니다. */
.resultline { margin: -14px 2px -6px; }

/* 검색칸과 칩 사이를 한 덩어리로 묶습니다. */
.tools { gap: 10px; }

/* ═══ 모바일 ═════════════════════════════════════════════════════
   좁은 화면에서는 보조 정보를 덜어 내고 제목·상태·시간을 남깁니다. */
@media (max-width: 420px) {
  :root { --gap-section: 18px; --gap-card: 9px; }
  .page__title { font-size: 21px; }
  .page__desc { font-size: 14px; }
  .section-title { font-size: 15.5px; }

  /* 핵심 숫자는 2열. 넉 장이 두 줄로 떨어집니다. */
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .stat__n { font-size: 26px; }

  /* 요약 숫자도 2열까지만. 다섯 칸이 한 줄에 끼면 글자가 깨집니다. */
  .minigrid { grid-template-columns: repeat(2, 1fr); }

  /* 필터는 자연스럽게 줄바꿈. 핵심 토글은 오른쪽 끝에 붙이지 않습니다. */
  .chiprow--end { margin-left: 0; }

  /* 업무·물품 목록에서 보조 줄을 한 줄로 잘라 높이를 고르게 합니다. */
  .task__meta, .supply__meta, .rowcard__meta {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .sumline { font-size: 13.5px; }
}

/* ═══ 두 칸 배치 ═══════════════════════════════════════════════════
   PC 에서 짧은 카드가 한 줄을 통째로 쓰면 화면이 휑하고 눈이 멀리
   움직입니다. 폭이 넉넉할 때만 두 칸으로 나눕니다. 세 칸은 쓰지
   않습니다 — 카드가 좁아져 제목이 두 줄로 접힙니다. */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 15px; align-items: start; }

@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 목록도 같은 규칙으로 나눕니다. tl 은 그대로 두고 tl--2 만
     바뀌므로, 한 칸을 지켜야 하는 목록은 손대지 않아도 됩니다. */
  .tl--2 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px; align-items: start;
  }
}




/* 로고는 누르는 것이라 밑줄을 빼고 초점 표시만 남깁니다. */
a.side__brand { text-decoration: none; color: inherit; border-radius: 10px; }
a.side__brand:hover b { color: var(--primary); }


/* ═══ 현장 상태 처리 ═══════════════════════════════════════════════
   카드 자체가 button 이라(누르면 상세가 열립니다) 그 안에 또 button 을
   넣을 수 없습니다. 바깥에서 한 겹 감싸고 아래에 액션 줄을 답니다.
   테두리와 그림자는 바깥이 맡고 안쪽 카드는 투명해집니다 — 상자가
   두 겹으로 보이지 않게 하려는 것입니다. */
.actcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); overflow: hidden; min-width: 0;
  transition: border-color 130ms ease;
}
.actcard:hover { border-color: var(--primary); }

.actcard > .req,
.actcard > .booth,
.actcard > .task,
.actcard > .supply {
  border: 0; box-shadow: none; border-radius: 0; background: transparent; width: 100%;
}
.actcard > .req:hover,
.actcard > .booth:hover,
.actcard > .task:hover,
.actcard > .supply:hover { border-color: transparent; box-shadow: none; }

/* 액션 줄. 카드 아래에 붙여 두고 위에 옅은 선을 그어 본문과 나눕니다. */
.actcard__act {
  display: flex; gap: 8px; padding: 0 15px 13px;
  border-top: 1px solid var(--line-2); margin-top: 2px; padding-top: 11px;
}
/* 손가락으로 누르는 자리라 좁히지 않습니다. 단추가 하나면 가로를 채우고,
   둘이면 반씩 나눠 갖습니다. */
.actcard__act .btn { flex: 1; min-height: 40px; }
@media (max-width: 560px) {
  /* 손가락으로 누르는 화면에서는 44px 아래로 내리지 않습니다. */
  .actcard__act .btn { min-height: 44px; }
}

/* 홈의 처리 현황 한 줄 */
.sumline--home { margin: -10px 2px 0; }


/* ═══ 화면별 옅은 색 ═══════════════════════════════════════════════
   흰색·남색·보라만 반복되면 메뉴를 옮겨도 같은 화면처럼 보입니다.
   화면마다 아주 옅은 색 하나를 제목 표시와 구역 표시에만 씁니다.
   상태 색(긴급 빨강 · 주의 주황 · 완료 초록)과 섞이지 않도록 숫자와
   배지에는 쓰지 않습니다. */
#view { --accent: var(--primary); --accent-t: var(--primary-t); }
#view[data-view="schedule"]  { --accent: #2F6FD6; --accent-t: #EAF1FC; }
#view[data-view="booths"]    { --accent: #0E8A86; --accent-t: #E2F3F2; }
#view[data-view="notices"]   { --accent: #B7791F; --accent-t: #FBF2E0; }
#view[data-view="requests"]  { --accent: #C2571A; --accent-t: #FCEEE4; }
#view[data-view="tasks"]     { --accent: #4B4FC7; --accent-t: #ECEDFB; }
#view[data-view="supplies"]  { --accent: #4E8A5E; --accent-t: #E9F3EC; }
#view[data-view="resources"],
#view[data-view="contacts"],
#view[data-view="venue"],
#view[data-view="faq"]       { --accent: #5A6B86; --accent-t: #EEF1F5; }

.page__title { display: flex; align-items: center; gap: 10px; }
.page__title::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 0.9em; border-radius: 4px;
  background: var(--accent, var(--primary));
}
#view .section-title::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent, var(--primary));
}
.minigrid--sum .mini { box-shadow: inset 0 3px 0 var(--accent-t, var(--primary-t)); }

/* 상태 색 */
.mini--danger .mini__n { color: var(--danger); }
.mini--task .mini__n, .stat--task .stat__n { color: #4B4FC7; }

/* ═══ 남은 일 / 끝난 일 ════════════════════════════════════════════ */
.countline { margin: -8px 2px 0; font-size: 14px; color: var(--muted); }
.countline b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.listsec { display: flex; flex-direction: column; gap: 10px; }
.allclear {
  margin: 0; padding: 14px 16px; background: #fff;
  border: 1px dashed var(--line); border-radius: var(--r); font-size: 14px; color: var(--muted);
}

.donemark {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--ok);
  background: var(--ok-t); padding: 3px 9px; border-radius: 999px;
}

/* 끝난 묶음. 흐리게 만들지 않고 아래로 내려 접어 둡니다. */
.donebox {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
.donebox__sum {
  list-style: none; cursor: pointer; min-height: 48px;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: var(--r);
}
.donebox__sum::-webkit-details-marker { display: none; }
.donebox__t { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.donebox__n {
  font-size: 12.5px; font-weight: 700; color: var(--ok);
  background: var(--ok-t); padding: 2px 9px; border-radius: 999px;
}
.donebox__open { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--primary); }
.donebox__open::after { content: '펼쳐보기'; }
.donebox[open] .donebox__open::after { content: '접기'; }
.donebox__sum:hover { background: var(--bg-soft); }
.donebox__body { padding: 4px 14px 14px; }

/* 끝난 카드: 배경만 아주 옅게 바꾸고 글자는 그대로 읽히게 둡니다. */
.req.is-done, .task.is-done, .supply.is-done { background: #FAFBFC; }

/* ═══ 부스 · 물품 · 자료 · 연락처 카드 ═══════════════════════════ */
.booth__prog {
  font-size: 13.5px; color: var(--muted-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.supply__line { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.supply__line b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.rescard, .contact {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 14px 16px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.rescard > .tag { align-self: flex-start; }
.rescard__top, .contact__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rescard__title, .contact__name {
  font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.45;
}
.rescard__desc {
  margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rescard__act { margin-top: 4px; }
.rescard__none { margin: 2px 0 0; font-size: 13px; color: var(--muted-2); }

.contact__meta { font-size: 14px; color: var(--muted); }
.contact__memo { font-size: 13.5px; color: var(--muted-2); line-height: 1.55; }
.contact__top:empty { display: none; }
.contact__phone {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2);
}
.contact__num {
  font-size: 16px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.contact__act { margin-left: auto; display: flex; gap: 6px; }

/* 선택 창의 단추가 셋이면 좁은 화면에서 줄바꿈합니다. */
.modal__foot { flex-wrap: wrap; }

@media (max-width: 560px) {
  .contact__act { margin-left: 0; width: 100%; }
  .contact__act .btn { flex: 1; min-height: 44px; }
  .rescard__act .btn { width: 100%; min-height: 44px; justify-content: center; }
  .donebox__sum { padding: 12px 14px; }
  .modal__foot .btn { flex: 1 1 auto; min-height: 44px; }
}


/* ═══ 읽기 위계 보강 ═══════════════════════════════════════════════ */

/* 제목 표시 막대를 조금 또렷하게. 색 블록이 되지 않을 만큼만. */
.page__title::before { width: 5px; height: 1em; border-radius: 3px; }

/* ── 홈 숫자 카드 ────────────────────────────────────────────────
   넉 장이 똑같이 하얘서 구분이 안 됐습니다. 윗줄 3px 하나로만 나눕니다.
   숫자와 배경은 칠하지 않습니다 — 상태 색(긴급·완료)과 섞이지 않게. */
.stat { box-shadow: var(--sh); position: relative; overflow: hidden; }
.stat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--stat-accent, var(--line));
}
.stat--req    { --stat-accent: #E08A3C; }
.stat--task   { --stat-accent: #5B5FD0; }
.stat--supply { --stat-accent: #3E9C8A; }
.stat--booth  { --stat-accent: #5B45E0; }
.stat--task .stat__n { color: var(--ink); }

/* ── 부스 카드 ───────────────────────────────────────────────────
   색은 운영기관 유형 하나에만 씁니다.
     유형  : 옅게 채운 표시 — '누가 운영하나'
     구역  : 테두리만 있는 표시 — '어디에 있나'
     번호  : 색 없는 회색 바탕
   셋이 같은 모양이면 어느 색이 무슨 뜻인지 알 수 없습니다. */
.booth__top { flex-wrap: wrap; gap: 6px; }
.booth__code {
  color: var(--ink); background: var(--bg-sink);
  font-size: 12.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px;
}
.booth__name { font-size: 16px; line-height: 1.4; }
.booth__org { font-size: 14px; color: var(--ink-2); margin-top: -2px; }
.booth__zone { margin-top: 2px; }

.orgtag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px;
  background: var(--org-bg); color: var(--org-fg);
}
.orgtag--el   { --org-bg: #EAF2FF; --org-fg: #315F9B; }
.orgtag--mid  { --org-bg: #E6F5F2; --org-fg: #26766C; }
.orgtag--high { --org-bg: #F0EBFC; --org-fg: #654CA3; }
.orgtag--org  { --org-bg: #EEF1F5; --org-fg: #596579; }
.orgtag--biz  { --org-bg: #FBF1DF; --org-fg: #91631D; }
.orgtag--etc  { --org-bg: #F1F2F4; --org-fg: #6B7280; }

.zonetag {
  display: inline-flex; align-items: center; max-width: 100%;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 필터 줄: 구역이 1차, 구분은 한 단계 작게 ─────────────────── */
.filterrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filterrow__l {
  flex: 0 0 auto; width: 30px;
  font-size: 12.5px; font-weight: 700; color: var(--muted-2);
}
.filterrow .chiprow { flex: 1; min-width: 0; }
.filterrow + .filterrow { margin-top: -14px; }

/* ── 섹션 제목: 제목 · 개수 · 펼치기가 한 줄 ─────────────────── */
.section-title { flex-wrap: nowrap; }
#view .section-title::before { width: 6px; height: 6px; opacity: 0.85; }
.section-title__n { flex: 0 0 auto; }

/* ── 운영 물품 카드: 단추가 빠진 자리를 줄입니다 ───────────────── */
.supply { gap: 5px; padding: 14px 16px; }
.supply__name { font-size: 16px; line-height: 1.4; }
.supply__meta { font-size: 13.5px; margin-top: -2px; }
.supply__line { margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.supply__top .badge { font-size: 12px; }

/* ── 자료실: 제목 먼저, 종류는 작은 글자 ───────────────────────── */
.rescard__kind { font-size: 12.5px; font-weight: 600; color: var(--muted-2); margin-top: -3px; }

/* ── 연락망: 번호 유무에 따라 높이가 들쭉날쭉하지 않게 ──────────── */
.tl--2 > .contact { align-self: stretch; }
.contact__phone { margin-top: auto; }
.contact { min-height: 132px; }

@media (max-width: 560px) {
  .filterrow { align-items: flex-start; }
  .filterrow__l { padding-top: 8px; }
  /* 구역·구분 칩은 옆으로 밀지 않고 줄을 바꿉니다. 수가 적어 두 줄이면 끝납니다. */
  .filterrow .chiprow { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .contact { min-height: 0; }
}


/* ═══ 마지막 다듬기: 덜 강조하기 ════════════════════════════════════
   요소가 모두 비슷한 무게라 무엇이 중요한지 흐려졌습니다.
   더하지 않고 줄이는 쪽으로만 고칩니다. 앞선 규칙을 여기서 덮습니다. */

/* ── 크기 체계 ─────────────────────────────────────────────────── */
:root { --side-w: 224px; }
.page__title { font-size: 22.5px; font-weight: 800; }
.page__desc { font-size: 14px; margin-top: 4px; }
.section-title { font-size: 16px; }
.booth__name, .supply__name, .task__title, .notice__title,
.rescard__title, .contact__name { font-size: 15.5px; }
.req__title { font-size: 16px; }
.req__meta, .supply__meta, .booth__org { font-size: 13.5px; }
.badge, .orgtag, .donemark { font-size: 12px; }

/* 페이지마다 겹치던 장식 줄이기: 요약 칸의 윗줄 색은 뺍니다.
   제목 막대 · 섹션 점 두 가지로 충분합니다. */
.minigrid--sum .mini { box-shadow: none; }

/* ── 행사 상태 표시 ───────────────────────────────────────────── */
.phase {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-sink); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.phase--live { background: var(--ok-t); color: var(--ok); }
.phase--done { background: var(--off-t); color: var(--off); }

/* ── 홈 숫자 카드: 한 단계 작게 ────────────────────────────────── */
.stat { padding: 14px 15px 12px; gap: 3px; min-height: 90px; justify-content: center; }
.stat__n { font-size: 25px; font-weight: 800; line-height: 1.15; }
.stat__l { font-size: 13.5px; }
.stat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* ── 두 칸 배치: 화면 폭이 아니라 카드가 들어갈 자리로 판단 ─────────
   '넓은 화면이면 두 칸' 으로 하면 사이드바가 있는 1024px 에서 카드가
   좁아집니다. 칸 하나가 최소 폭(--col-min)을 확보할 때만 두 칸이 되고,
   세 칸은 절대 되지 않게 절반 폭을 함께 겁니다. auto-fill 이라 카드가
   한 장뿐이어도 한 칸 폭을 지킵니다(auto-fit 이면 가로로 늘어납니다). */
.tl--2, .boothgrid, .grid-2 {
  --col-min: 380px;
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--col-min), calc(50% - 7px))), 1fr));
}
.boothgrid { --col-min: 350px; }
.grid-2 { --col-min: 360px; }
#view[data-view="supplies"] .tl--2,
#view[data-view="venue"] .tl--2,
#view[data-view="notices"] .tl--2 { --col-min: 360px; }
/* 예전 화면 폭 기준 규칙을 무력화합니다. */
@media (min-width: 760px) {
  .tl--2, .grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--col-min), calc(50% - 7px))), 1fr));
  }
}
@media (min-width: 768px) {
  .boothgrid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--col-min), calc(50% - 7px))), 1fr));
  }
}

/* ── 배치도: 목록을 밀어내지 않게 ─────────────────────────────────
   부스 화면은 빠른 미리보기, 행사장 화면은 조금 크게, 크게 보는 것은
   확대 창의 몫입니다. 비어 있을 때는 작은 안내 한 칸만 둡니다. */
.media--empty .media__ph {
  aspect-ratio: auto; height: 200px; min-height: 0; max-height: none; padding: 16px;
  background: var(--bg-soft);
}
.media__btn { max-height: 360px; }
#view[data-view="venue"] .media__btn { max-height: 460px; }
.media__icon { font-size: 22px; }

/* ── 빈 화면·완료 묶음: 주인공이 아니게 ─────────────────────────── */
.state { padding: 20px 16px; }
.state--empty { padding: 22px 18px; }
.allclear { padding: 11px 14px; font-size: 13.5px; }

.donebox { background: transparent; border: 1px solid var(--line-2); }
.donebox__sum { min-height: 46px; padding: 9px 14px; }
.donebox__t { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.donebox__open { font-size: 13px; }
.donebox[open] { background: #fff; }

/* ── 부스 카드: 번호는 글자, 유형만 색, 구역은 아래 작은 글자 ──── */
.booth { gap: 3px; padding: 13px 15px; }
.booth__top { justify-content: space-between; margin-bottom: 3px; }
.booth__code {
  background: none; padding: 0; border-radius: 0;
  font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.01em;
}
.booth__org { color: var(--ink-2); margin-top: 0; }
.booth__foot {
  margin-top: 4px; font-size: 12.5px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filterrow + .filterrow { margin-top: -16px; }

/* ── 운영 물품 카드: 구분선 하나 줄이기 ─────────────────────────── */
.supply { gap: 3px; }
.supply__top { margin-bottom: 3px; }
.supply__kind { font-size: 13px; color: var(--muted); }
.supply__line { border-top: 0; padding-top: 0; margin-top: 4px; }

/* ── 운영 요청 카드: 제목 · 짧은 내용이 먼저 ─────────────────────── */
.req__body {
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 연락망: 높이를 억지로 맞추지 않음 ───────────────────────────── */
.contact { min-height: 0; }
.tl--2 > .contact { align-self: start; }
.contact__phone { margin-top: 6px; }
.contact__num { font-size: 15.5px; }

/* ── 자료실: 종류는 설명 아래 작은 글자 ─────────────────────────── */
.rescard__kind { margin-top: 0; }

/* ── 검색창: PC 에서는 한 단계 낮게, 손가락 화면은 44px ─────────── */
@media (min-width: 1024px) {
  .search .input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
}

/* ── 확인창: 짧은 질문은 작은 창 ──────────────────────────────────
   '해결되었나요?' 한 줄에 입력창과 같은 폭을 쓰면 휑합니다. */
.modal__panel--sm .modal__body { padding: 14px 18px 4px; }
.modal__panel--sm .modal__desc { font-size: 14px; line-height: 1.65; }
@media (min-width: 640px) {
  .modal__panel--sm { max-width: 440px; }
}
@media (max-width: 639px) {
  .modal:has(.modal__panel--sm) { align-items: center; padding: 16px; }
  .modal__panel--sm { width: calc(100vw - 32px); border-radius: 16px; }
}

/* ── 모바일 하단 메뉴: 선 아이콘 ───────────────────────────────── */
.tabbar .tab__ico { width: 21px; height: 21px; display: block; }

@media (max-width: 420px) {
  .page__title { font-size: 20.5px; }
  .stat__n { font-size: 23px; }
  .media--empty .media__ph { height: 160px; }
  .media__btn, #view[data-view="venue"] .media__btn { max-height: 260px; }
}

/* ── 인쇄 ─────────────────────────────────────────────────────── */
@media print {
  .side, .tabbar, .topbar, .fab, .page__actions, .tools { display: none !important; }
  .card, .booth, .tlitem, .notice, .req, .rowcard { box-shadow: none; }
  .main { padding: 0; }
}

/* ═══ 공용 모달 (assets/ui.js) ═══════════════════════════════════
   모바일에서는 아래에서 올라오는 시트, 데스크톱에서는 가운데 창.
   목록 위에서 바로 편집할 수 있어야 해서 드로어와 따로 둡니다. */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal__scrim { position: absolute; inset: 0; background: rgba(22, 32, 60, 0.45); }

.modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px -12px rgba(22, 32, 60, 0.4);
  padding-bottom: env(safe-area-inset-bottom);
}

.modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line-2);
}
.modal__title { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }

.modal__body { overflow-y: auto; padding: 16px; }
.modal__desc { font-size: 14px; line-height: 1.75; color: var(--muted); }
.modal__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.modal__grid .field--wide { grid-column: 1 / -1; }
.modal__body .alert { margin-top: 14px; }

.modal__foot {
  display: flex; gap: 8px; padding: 12px 16px 16px;
  border-top: 1px solid var(--line-2);
}
.modal__foot .btn { flex: 1; }

@media (min-width: 640px) {
  .modal { align-items: center; padding: 24px; }
  .modal__panel { max-width: 560px; border-radius: 16px; }
  .modal__panel--sm { max-width: 420px; }
  .modal__grid { grid-template-columns: 1fr 1fr; }
  .modal__foot { justify-content: flex-end; }
  .modal__foot .btn { flex: 0 0 auto; min-width: 96px; }
}

/* ── 관리자 목록의 줄 액션 ────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 9px; }

.listrow {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 13px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.listrow__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 7px;
  background: var(--bg-sink); color: var(--muted);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.listrow__body { flex: 1; min-width: min(100%, 170px); }
.listrow__title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.listrow__meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.listrow__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.listrow__act { display: flex; gap: 6px; align-items: center; margin-left: auto; flex: 0 0 auto; }

@media (max-width: 520px) {
  .listrow__act { width: 100%; margin-left: 0; justify-content: flex-end; }
}


/* ── 안내도 · 배치도 ──────────────────────────────────────────
   이미지가 아직 없어도 같은 자리를 차지합니다. 나중에 그림만
   올리면 화면 구조가 그대로인 채로 채워집니다. ─────────────── */
.media { margin: 0 0 4px; }

/* 안내도·배치도는 본문 좌우 여백을 넘어 화면 폭을 꽉 채웁니다.
   배치도는 크게 볼수록 쓸모 있는 그림이라, 카드처럼 가둬 두지
   않았습니다. 여백만큼 음수 마진으로 되돌리는 방식이라 부모의
   레이아웃은 건드리지 않습니다. */
.media--bleed {
  margin-left: calc(-1 * var(--main-pad));
  margin-right: calc(-1 * var(--main-pad));
  width: calc(100% + 2 * var(--main-pad));
}

/* 자리를 미리 잡아 둡니다(aspect-ratio). 이미지가 도착하기 전까지
   높이가 0이면, 뜨는 순간 아래 내용이 아래로 밀리며 화면이 튑니다.
   그림이 실제로 뜨면 원본 비율로 바꿔 주므로(portal.js 의 fitMedia),
   위아래에 빈 띠가 남지 않고 가로를 정확히 채웁니다. */
/* 높이 제한을 두지 않습니다. 제한을 걸면 그림이 그 안에 담기면서
   좌우에 빈 띠가 생겨, 정작 "가로를 채운다"가 무너집니다.
   비율은 원본을 그대로 따르고, 자세히 볼 때는 확대를 씁니다. */
.media__btn {
  display: block; width: 100%; padding: 0; background: var(--bg-soft);
  overflow: hidden; cursor: zoom-in; position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--r);
}
.media__btn img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--bg-soft);
}

/* 화면 끝에 닿는 그림에 둥근 모서리를 두면 잘린 것처럼 보입니다.
   위아래 선만 남겨 띠처럼 보이게 합니다. */
.media--bleed .media__btn,
.media--bleed.media--empty .media__ph {
  border-radius: 0; border-left: none; border-right: none;
}

/* 부스 상세 안의 작은 사진은 그대로 카드 모양입니다. */
.media--sm .media__btn { aspect-ratio: 4 / 3; max-height: 240px; }

.media__zoom {
  position: absolute; right: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(22, 32, 60, 0.78); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
}
.media__btn:hover { border-color: var(--primary); }
.media__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 캡션은 글이라 본문 여백 안으로 되돌립니다. */
.media__cap { font-size: 12.5px; color: var(--muted); margin: 8px 2px 0; line-height: 1.6; }
.media--bleed .media__cap { margin-left: calc(var(--main-pad) + 2px); margin-right: calc(var(--main-pad) + 2px); }

/* 비어 있을 때 — 깨진 이미지도, 텅 빈 흰 상자도 아닌 모습으로 */
.media--empty .media__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center;
  /* 폭을 못 박아 둡니다. 안 그러면 아래 max-height 에서 높이가
     잘릴 때 비율을 맞추느라 폭까지 함께 줄어듭니다. */
  width: 100%;
  /* 비어 있을 때는 16:9 로 두되, 큰 화면에서 빈 상자가 화면을
     통째로 잡아먹지 않도록 높이만 적당히 묶어 둡니다.
     안내 영역과 실제 이미지가 함께 보이는 일은 없으므로,
     이 제한이 이미지 쪽 자리 잡기를 방해하지 않습니다. */
  aspect-ratio: 16 / 9; min-height: 148px; max-height: 340px; padding: 20px;
  border: 1px dashed var(--line); border-radius: var(--r);
  background:
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-sink) 100%);
}
.media__icon { font-size: 26px; color: var(--muted-2); line-height: 1; }
.media__phtitle { font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.02em; }
.media__phtext { font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 30ch; }

/* 공간 카드에 붙는 작은 사진 */
.rowcard--place { align-items: flex-start; }
.placethumb {
  flex: 0 0 auto; width: 84px; height: 64px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg-soft); cursor: zoom-in;
}
.placethumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.placethumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 이미지 크게 보기 ─────────────────────────────────────────── */
.zoom { position: fixed; inset: 0; z-index: 90; display: flex; }
.zoom__scrim { position: absolute; inset: 0; background: rgba(12, 18, 36, 0.82); }
.zoom__panel {
  position: relative; margin: auto; width: 100%; height: 100%;
  display: flex; flex-direction: column; padding: 52px 12px 16px;
}
.zoom__scroll {
  flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
}
.zoom__scroll img {
  display: block; max-width: 100%; height: auto;
  border-radius: 10px; background: #fff;
}
.zoom__cap {
  color: #E8EBF5; font-size: 13px; line-height: 1.6;
  text-align: center; margin: 12px auto 0; max-width: 60ch;
}
.zoom__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 17px; cursor: pointer;
}
.zoom__close:hover { background: rgba(255, 255, 255, 0.22); }
.zoom__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 768px) {
  .zoom__panel { padding: 60px 32px 24px; }
  .zoom__scroll img { max-height: none; }
}

/* ── 관리자: 이미지 고르는 칸 ─────────────────────────────────── */
.imgpick {
  display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px; background: var(--bg-soft);
}
.imgpick__view { border-radius: 9px; overflow: hidden; background: #fff; }
.imgpick__view img {
  display: block; width: 100%; height: auto; max-height: 240px;
  object-fit: contain; background: var(--bg-sink);
}
.imgpick__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 116px; padding: 16px; text-align: center;
  border: 1px dashed var(--line); border-radius: 9px;
  color: var(--muted); font-size: 12.5px;
}
.imgpick__icon { font-size: 22px; color: var(--muted-2); line-height: 1; }
.imgpick__acts { display: flex; gap: 7px; flex-wrap: wrap; }
.imgpick__file { cursor: pointer; margin: 0; }
.imgpick__msg { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.imgpick__msg.is-error { color: var(--danger); }
.imgpick.is-busy { opacity: 0.72; pointer-events: none; }

/* 관리자 목록에 미리 보이는 작은 이미지 */
.listrow__thumb {
  display: block; margin-top: 6px; max-width: 220px; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-sink);
}

/* ═══ 홈: 운영 브리핑 ═════════════════════════════════════════════
   다른 화면은 같은 흰 카드를 늘어놓지만, 홈은 역할이 다른 네 층으로
   나눕니다. 색이나 그림자를 더하지 않고 배치와 크기로만 구분합니다.
     1. 머리     — 카드 없이 바탕 위에. 행사명이 가장 먼저 읽힙니다.
     2. 숫자     — 흰 카드 넉 장. 누르면 해당 화면.
     3. 브리핑   — 옅은 보라 바탕 + 왼쪽 선. 홈에서 유일하게 칠한 면.
        빠른 실행 — 흰 바탕 중립. 브리핑과 같은 네모로 보이지 않게.
     4. 목록     — 한 줄짜리 행. 카드를 다시 복제하지 않습니다.
   2단 여부는 화면 폭이 아니라 본문 폭으로 정합니다. 사이드바가 있는
   1024px 은 본문이 좁아 한 칸으로 내립니다. */
.dash { container-type: inline-size; gap: 22px; }
.dash__top { display: flex; flex-direction: column; gap: 16px; }

.dash__head {
  display: flex; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap;
  padding: 2px 2px 0;
}
.dash__title { flex: 1 1 320px; min-width: 0; }
.dash__name {
  margin: 0; font-size: 23px; font-weight: 800; line-height: 1.3;
  letter-spacing: -0.04em; color: var(--ink); text-wrap: balance;
}
.dash__meta {
  margin: 4px 0 0; font-size: 14px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dash__phase { margin-left: auto; padding-top: 3px; }
.dash__phase .phase { font-size: 13px; padding: 5px 11px; }
.dash__phase .phase:not(.phase--live):not(.phase--done) { background: var(--primary-t); color: var(--primary-d); }

/* 숫자 넉 장 */
.dash__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 620px) {
  .dash__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dash .stat {
  min-height: 104px; padding: 14px 15px 12px; gap: 1px;
  justify-content: flex-start; color: var(--ink); text-decoration: none;
  box-shadow: none;
  transition: border-color 130ms ease, background-color 130ms ease;
}
.dash .stat:hover { border-color: var(--stat-accent); background: #FCFCFE; }
.dash .stat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dash .stat__n { font-size: 27px; font-weight: 800; line-height: 1.15; color: var(--ink); }
.dash .stat.is-none .stat__n { color: var(--muted-2); font-weight: 700; }
.dash .stat__l { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-top: 1px; }
.stat__sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45;
}
.stat__sub--alert { color: var(--danger); font-weight: 600; }
.stat__go { margin-left: auto; color: var(--muted-2); transition: color 130ms ease; }
.dash .stat:hover .stat__go { color: var(--stat-accent); }
.dash__ico {
  width: 17px; height: 17px; flex: none; margin-top: 4px;
  color: var(--stat-accent); opacity: 0.5;
}

/* 브리핑 + 빠른 실행 */
.dash__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
@container (min-width: 860px) {
  .dash__main { grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); }
}

.brief {
  background: #FBFAFF; border: 1px solid #E5E0FA; border-left: 3px solid var(--primary);
  border-radius: var(--r); padding: 16px 20px 18px; min-width: 0;
}
.brief p { margin: 0; }
.brief__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brief__t { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.03em; }
.brief__mode {
  font-size: 12px; font-weight: 700; color: var(--primary-d);
  padding: 2px 8px; border-radius: 999px; background: var(--primary-t);
}
.brief__head .linkbtn { margin-left: auto; }
.brief__slot { margin-top: 14px; min-width: 0; }
.brief__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.brief__slot.is-live .brief__label { color: var(--ok); }
.brief__slot.is-live .brief__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
}
.brief__after { font-weight: 600; color: var(--muted-2); }
.brief__after::before { content: "· "; }
.brief .brief__day { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.brief .brief__time {
  font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.brief .brief__label + .brief__time { margin-top: 8px; }
.brief .brief__what {
  font-size: 17px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4;
  color: var(--ink); margin-top: 4px;
}
.brief .brief__where { font-size: 14px; color: var(--muted); margin-top: 3px; }
.brief .brief__empty { font-size: 14px; color: var(--muted); margin-top: 8px; }
.brief .brief__lead { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 12px; }

.brief__split { display: grid; grid-template-columns: minmax(0, 1fr); }
.brief__split > .brief__slot + .brief__slot { border-top: 1px solid #E8E4F8; padding-top: 14px; }
@container (min-width: 520px) {
  .brief__split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .brief__split > .brief__slot + .brief__slot {
    border-top: 0; padding-top: 0; border-left: 1px solid #E8E4F8; padding-left: 20px;
  }
}

.brief__left {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; max-width: 420px;
}
.brief__leftrow {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: border-color 130ms ease;
}
.brief__leftrow b { font-variant-numeric: tabular-nums; }
.brief__leftrow:hover { border-color: var(--primary); }
.brief__leftrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.brief__arrow { margin-left: auto; color: var(--muted-2); }

.quick {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.quick__t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.02em; }
.quick__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.quick__list .btn { width: 100%; min-height: 44px; padding-inline: 12px; }
/* 한 칸으로 내려온 넓은 본문: 셋을 한 줄에. 좁으면 보고 한 줄 + 둘. */
@container (min-width: 520px) and (max-width: 859px) {
  .quick__list { grid-template-columns: 1.4fr 1fr 1fr; }
}
@container (max-width: 519px) {
  .quick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick__main { grid-column: 1 / -1; }
}

/* 공지·주요 일정 — 한 줄짜리 행 */
.dash__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 14px; }
@container (min-width: 860px) {
  .dash__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash__block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash__blockhead { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.dash__blockt { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.dash__blockhead .linkbtn { margin-left: auto; }
.dlist {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.dlist__row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--line-2);
  text-align: left; cursor: pointer; color: var(--ink);
  transition: background-color 130ms ease;
}
.dlist__row:last-child { border-bottom: 0; }
.dlist__row:hover { background: var(--bg-soft); }
.dlist__row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dlist__row .badge { flex: none; }
.dlist__title {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlist__when, .dlist__time {
  flex: none; font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.dlist__time { font-size: 13.5px; font-weight: 700; color: var(--ink-2); min-width: 42px; }

/* 운영 안내 — 가장 아래, 카드 없이 */
.dash__guide {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.dash__guide .noticebody { font-size: 14.5px; color: var(--ink-2); max-width: 72ch; }

@media (max-width: 639px) {
  .dash { gap: 18px; }
  .dash__top { gap: 14px; }
  .dash__name { font-size: 19.5px; }
  .dash__meta { font-size: 13.5px; }
  /* 좁은 화면에서는 상태를 오른쪽 끝에 붙이지 않고 날짜 아래로 */
  .dash__phase { margin-left: 0; padding-top: 0; flex-basis: 100%; }
  .dash__stats { gap: 10px; }
  .dash .stat { min-height: 100px; padding: 12px 13px 11px; }
  .dash .stat__n { font-size: 25px; }
  .dash .stat__l { font-size: 13.5px; }
  .brief { padding: 14px 16px 16px; }
  .brief .brief__time { font-size: 25px; }
  .brief .brief__what { font-size: 16px; }
  .quick { padding: 14px; gap: 10px; }
  .dlist__when { display: none; }
}
/* 업무(남색 계열 보라)와 부스가 같은 보라로 겹쳐 보여, 홈에서는 부스를 짙은 남색으로 */
.dash .stat--booth { --stat-accent: #34457A; }