/* =====================================================================
   Legacy Archive — 컴포넌트 스타일 (applestyle.md 의 component 명세를 구현)
   목차: 1.기본 2.타이포 3.레이아웃·타일 4.내비 5.버튼·링크 6.카드·칩·태그
        7.폼 8.오버레이 9.포털 섹션 10.강의방 11.강의 모드 12.관리자 13.반응형
   ===================================================================== */

/* 1. 기본 ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--h-sub-nav) + 12px); }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; font-weight: 400;
  color: var(--color-ink); background: var(--color-canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  word-break: keep-all; overflow-wrap: anywhere;
}
img, svg { display: block; max-width: 100%; }
:where(svg[aria-hidden="true"]) { width: 1.1em; height: 1.1em; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }

/* 2. 타이포그래피 ----------------------------------------------------- */
.t-hero { font-family: var(--font-display); font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -0.28px; margin: 0; }
.t-display-lg { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.4px; margin: 0; }
.t-display-md { font-family: var(--font-display); font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -0.374px; margin: 0; }
.t-lead { font-size: 28px; line-height: 1.24; font-weight: 400; letter-spacing: 0.196px; margin: 0; }
.t-lead-airy { font-size: 24px; line-height: 1.5; font-weight: 300; letter-spacing: 0; margin: 0; }
.t-tagline { font-family: var(--font-display); font-size: 21px; line-height: 1.24; font-weight: 600; letter-spacing: 0.231px; margin: 0; }
.t-body-strong { font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -0.374px; margin: 0; }
.t-body { font-size: 17px; line-height: 1.47; margin: 0; }
.t-caption { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; margin: 0; }
.t-caption-strong { font-size: 14px; line-height: 1.29; font-weight: 600; letter-spacing: -0.224px; margin: 0; }
.t-fine { font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; margin: 0; }
.t-micro { font-size: 10px; line-height: 1.3; letter-spacing: -0.08px; margin: 0; }
.t-muted { color: var(--color-ink-muted-80); }
.t-faint { color: var(--color-ink-muted-48); }
.t-num { font-variant-numeric: tabular-nums; }
.eyebrow { display: block; font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -0.374px; color: var(--color-ink-muted-48); margin: 0 0 var(--space-xs); }
.is-dark .eyebrow, .is-dark .t-muted { color: var(--color-body-muted); }
.is-dark .t-faint { color: var(--color-ink-muted-48); }
.pre-line { white-space: pre-line; }
/* 관리자 화면의 여러 줄 입력칸(사이트 설정·강의방 카드 설명·이력 요약·자료 설명)에서 넣은 줄바꿈을 그대로 보여 줌 */
[data-text], .room-card__summary, .legacy-card__summary, .res-card__desc { white-space: pre-line; }

/* 3. 레이아웃 · 타일 --------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--w-text) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.tile { padding: var(--space-section) 0; position: relative; }
.tile--light { background: var(--color-canvas); color: var(--color-ink); }
.tile--parchment { background: var(--color-canvas-parchment); color: var(--color-ink); }
.tile--dark { background: var(--color-surface-tile-1); color: var(--color-on-dark); }
.tile--dark-2 { background: var(--color-surface-tile-2); color: var(--color-on-dark); }
.tile--dark-3 { background: var(--color-surface-tile-3); color: var(--color-on-dark); }
.tile--black { background: var(--color-surface-black); color: var(--color-on-dark); }
.tile--tight { padding: var(--space-xxl) 0; }
.tile-head { text-align: center; margin: 0 auto var(--space-xxl); max-width: 760px; }
.tile-head .t-lead, .tile-head .t-tagline { margin-top: var(--space-xs); }
.tile-head--left { text-align: left; margin-left: 0; max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.stack > * + * { margin-top: var(--space-md); }
.row-flex { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.center-row { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; gap: 20px; }
.grid-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* 4. 내비게이션 ------------------------------------------------------- */
.gnav { background: var(--color-surface-black); color: var(--color-on-dark); height: var(--h-global-nav); position: relative; z-index: 60; }
.gnav__inner { height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.gnav__brand { display: flex; align-items: center; gap: var(--space-xs); font-size: 14px; font-weight: 600; letter-spacing: -0.224px; white-space: nowrap; }
.gnav__brand svg { width: 18px; height: 18px; }
.gnav__links { display: flex; gap: 6px; margin: 0 auto; padding: 0; list-style: none; }
.gnav__links a { display: block; padding: 0 12px; line-height: var(--h-global-nav); font-size: 12px; letter-spacing: -0.12px; color: rgba(255, 255, 255, 0.8); }
.gnav__links a:hover, .gnav__links a[aria-current="page"] { color: var(--color-on-dark); }
.gnav__right { display: flex; align-items: center; gap: var(--space-xs); }
.gnav__icon { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: rgba(255, 255, 255, 0.85); border-radius: var(--rounded-sm); cursor: pointer; }
.gnav__icon svg { width: 17px; height: 17px; }
.gnav__icon:active { transform: var(--press-scale); }
.gnav__menu-btn { display: none; }
.gnav-tray { position: absolute; top: var(--h-global-nav); left: 0; right: 0; background: var(--color-surface-black); padding: var(--space-sm) var(--gutter) var(--space-xl); z-index: 59; }
.gnav-tray a { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.6; color: var(--color-on-dark); }

.subnav { position: sticky; top: 0; z-index: 50; height: var(--h-sub-nav); background: var(--color-parchment-80); -webkit-backdrop-filter: var(--blur-frosted); backdrop-filter: var(--blur-frosted); border-bottom: 1px solid var(--color-hairline-alpha); }
.subnav__inner { height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.subnav__title { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: 0.231px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.subnav__links { display: flex; gap: var(--space-lg); margin-left: auto; align-items: center; }
.subnav__links a { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-80); white-space: nowrap; }
.subnav__links a:hover, .subnav__links a.is-active { color: var(--color-primary); }
.subnav__actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.subnav__links + .subnav__actions { margin-left: 0; }
.subnav--dark { background: rgba(29, 29, 31, 0.72); border-bottom-color: var(--color-hairline-on-dark); color: var(--color-on-dark); }
.subnav--dark .subnav__links a { color: var(--color-body-muted); }
.subnav--dark .subnav__links a:hover { color: var(--color-on-dark); }

/* 5. 버튼 · 링크 ------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; text-align: center; white-space: nowrap; transition: transform 0.12s var(--ease), background-color 0.2s var(--ease), opacity 0.2s; -webkit-tap-highlight-color: transparent; }
.btn:active:not(:disabled) { transform: var(--press-scale); }
.btn:disabled { opacity: 0.42; cursor: default; }
.btn svg { width: 1em; height: 1em; flex: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-dark); font-size: 17px; line-height: 1.18; border-radius: var(--rounded-pill); padding: 11px 22px; min-height: 44px; }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); font-size: 17px; line-height: 1.18; border-radius: var(--rounded-pill); padding: 10px 21px; min-height: 44px; }
.is-dark .btn-secondary { color: var(--color-primary-on-dark); border-color: var(--color-primary-on-dark); }
.btn-hero { background: var(--color-primary); color: var(--color-on-dark); font-size: 18px; font-weight: 300; line-height: 1; border-radius: var(--rounded-pill); padding: 14px 28px; }
.btn-dark { background: var(--color-ink); color: var(--color-on-dark); font-size: 14px; line-height: 1.29; letter-spacing: -0.224px; border-radius: var(--rounded-sm); padding: 8px 15px; }
.is-dark .btn-dark { background: rgba(255, 255, 255, 0.14); }
.btn-pearl { background: var(--color-surface-pearl); color: var(--color-ink-muted-80); font-size: 14px; line-height: 1.29; letter-spacing: -0.224px; border: 3px solid var(--color-divider-soft); border-radius: var(--rounded-md); padding: 6px 12px; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--color-chip-translucent); color: var(--color-ink); }
.btn-icon svg { width: 18px; height: 18px; }
.btn-sm { min-height: 34px; padding: 6px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.link { color: var(--color-primary); display: inline-flex; align-items: center; gap: 2px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.link:hover { text-decoration: underline; }
.is-dark .link { color: var(--color-primary-on-dark); }
.link .chev { font-size: 0.9em; transform: translateY(0.02em); }

/* 6. 카드 · 칩 · 태그 -------------------------------------------------- */
.card { background: var(--color-canvas); color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--rounded-lg); padding: var(--space-lg); display: flex; flex-direction: column; min-width: 0; }
.card--link { transition: border-color 0.2s var(--ease); cursor: pointer; }
.card--link:hover { border-color: var(--color-ink-muted-48); }
.card--dark { background: var(--color-surface-tile-2); color: var(--color-on-dark); border-color: var(--color-hairline-on-dark); }
.card--dark.card--link:hover { border-color: rgba(255, 255, 255, 0.32); }
.card__foot { margin-top: auto; padding-top: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }

.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-canvas); color: var(--color-ink); border: 1px solid var(--color-hairline); border-radius: var(--rounded-pill); padding: 8px 16px; font-size: 14px; line-height: 1.29; letter-spacing: -0.224px; cursor: pointer; white-space: nowrap; transition: transform 0.12s var(--ease); }
.chip:active { transform: var(--press-scale); }
.chip.is-selected, .chip[aria-pressed="true"], .chip[aria-selected="true"] { border: 2px solid var(--color-primary-focus); padding: 7px 15px; }
.chip .count { color: var(--color-ink-muted-48); font-variant-numeric: tabular-nums; }
.is-dark .chip { background: transparent; color: var(--color-on-dark); border-color: var(--color-hairline-on-dark); }
.is-dark .chip.is-selected, .is-dark .chip[aria-pressed="true"] { border-color: var(--color-primary-on-dark); }
.chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.filter-rows { display: grid; gap: var(--space-xs); justify-items: end; }
.filter-rows > .chips:empty { display: none; }

.tag { display: inline-block; font-size: 12px; line-height: 1.5; letter-spacing: -0.12px; padding: 1px 8px; border-radius: var(--rounded-xs); background: var(--color-canvas-parchment); color: var(--color-ink-muted-80); white-space: nowrap; }
.is-dark .tag, .card--dark .tag { background: rgba(255, 255, 255, 0.08); color: var(--color-body-muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-80); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink-muted-48); }
.status--live::before { background: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16); animation: pulse 2s infinite; }
.is-dark .status, .card--dark .status { color: var(--color-body-muted); }
.is-dark .status--live::before { background: var(--color-primary-on-dark); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(0, 102, 204, 0); } }

.glyph { width: 44px; height: 44px; border-radius: var(--rounded-sm); background: var(--color-canvas-parchment); display: grid; place-items: center; font-size: 22px; flex: none; color: var(--color-primary); }
.glyph svg { width: 22px; height: 22px; }
.is-dark .glyph, .card--dark .glyph { background: rgba(255, 255, 255, 0.08); color: var(--color-primary-on-dark); }

.empty { text-align: center; padding: var(--space-xxl) var(--space-lg); color: var(--color-ink-muted-80); border: 1px dashed var(--color-hairline); border-radius: var(--rounded-lg); }
.is-dark .empty { color: var(--color-body-muted); border-color: var(--color-hairline-on-dark); }
.skeleton { background: linear-gradient(90deg, var(--color-canvas-parchment), var(--color-divider-soft), var(--color-canvas-parchment)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--rounded-lg); min-height: 180px; border: 0; }
.is-dark .skeleton { background: rgba(255, 255, 255, 0.06); animation: none; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 7. 폼 ---------------------------------------------------------------- */
.search { position: relative; display: flex; align-items: center; width: 100%; max-width: 420px; }
.search svg { position: absolute; left: 16px; width: 15px; height: 15px; color: var(--color-ink-muted-48); pointer-events: none; }
.search input { width: 100%; height: 44px; border-radius: var(--rounded-pill); border: 1px solid var(--color-hairline-alpha); background: var(--color-canvas); padding: 0 20px 0 40px; font-size: 17px; color: var(--color-ink); outline: none; }
.search input:focus { border-color: var(--color-primary-focus); box-shadow: 0 0 0 1px var(--color-primary-focus); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; color: var(--color-ink); }
.field__hint { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-48); }
.field__error { font-size: 12px; color: var(--color-ink); font-weight: 600; }
.field.has-error .input { border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink); }
.input { width: 100%; min-height: 44px; border: 1px solid var(--color-hairline); border-radius: var(--rounded-sm); background: var(--color-canvas); padding: 10px 14px; font-size: 17px; line-height: 1.3; color: var(--color-ink); outline: none; }
.input:focus { border-color: var(--color-primary-focus); box-shadow: 0 0 0 1px var(--color-primary-focus); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.47; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.input-row { display: flex; gap: var(--space-xs); align-items: stretch; }
.input-row .input { flex: 1; }
.switch { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none; font-size: 17px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { width: 51px; height: 31px; border-radius: var(--rounded-pill); background: var(--color-hairline); position: relative; transition: background 0.2s var(--ease); flex: none; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--color-canvas); transition: transform 0.2s var(--ease); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 1px rgba(0, 0, 0, 0.06); }
.switch input:checked + .switch__track { background: var(--color-primary); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--color-divider-soft); border-radius: var(--rounded-sm); padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font-size: 14px; letter-spacing: -0.224px; cursor: pointer; color: var(--color-ink-muted-80); }
.seg button[aria-pressed="true"] { background: var(--color-canvas); color: var(--color-ink); font-weight: 600; }
.upload-row { display: flex; gap: var(--space-xs); align-items: center; }
.upload-row .input { flex: 1; }
.thumb-preview { width: 64px; height: 44px; border-radius: var(--rounded-sm); object-fit: cover; background: var(--color-canvas-parchment); flex: none; }

/* 8. 오버레이 — 모달 · 토스트 · 스티키 바 ------------------------------ */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; padding: var(--space-lg); animation: fade 0.18s var(--ease); }
.modal { background: var(--color-canvas); color: var(--color-ink); border-radius: var(--rounded-lg); width: 100%; max-width: 680px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; animation: rise 0.24s var(--ease); }
.modal--sm { max-width: 440px; }
.modal--lg { max-width: 860px; }
.modal__head { padding: var(--space-lg) var(--space-lg) var(--space-sm); display: flex; align-items: flex-start; gap: var(--space-sm); }
.modal__head .t-tagline { flex: 1; }
.modal__body { padding: var(--space-sm) var(--space-lg) var(--space-lg); overflow: auto; }
.modal__foot { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-hairline); display: flex; gap: var(--space-xs); justify-content: flex-end; align-items: center; background: var(--color-surface-pearl); }
.modal__close { width: 32px; height: 32px; }
.modal__close svg { width: 14px; height: 14px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

.toast-wrap { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; pointer-events: none; }
.toast { background: rgba(29, 29, 31, 0.92); color: var(--color-on-dark); font-size: 14px; letter-spacing: -0.224px; border-radius: var(--rounded-pill); padding: 10px 20px; animation: rise 0.2s var(--ease); max-width: calc(100vw - 32px); text-align: center; -webkit-backdrop-filter: var(--blur-frosted); backdrop-filter: var(--blur-frosted); }

.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; min-height: 64px; background: var(--color-parchment-80); -webkit-backdrop-filter: var(--blur-frosted); backdrop-filter: var(--blur-frosted); border-top: 1px solid var(--color-hairline-alpha); }
.sticky-bar__inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: 10px; padding-bottom: 10px; }
.has-sticky-bar { padding-bottom: 64px; }

/* 9. 포털 섹션 -------------------------------------------------------- */
.hero { text-align: center; padding: 96px 0 var(--space-section); }
.hero .t-hero { white-space: pre-line; }
.hero .t-lead { color: var(--color-ink-muted-80); max-width: 720px; margin: var(--space-md) auto 0; font-size: 24px; line-height: 1.4; }
.hero .center-row { margin-top: var(--space-xl); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 880px; margin: 72px auto 0; }
.stat { padding: 0 var(--space-md); text-align: center; border-left: 1px solid var(--color-hairline); }
.stat:first-child { border-left: 0; }
.stat__num { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.28px; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 14px; letter-spacing: -0.224px; color: var(--color-ink-muted-80); margin-top: var(--space-xs); }

.room-card .room-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-bottom: var(--space-md); }
.room-card .t-tagline { margin-bottom: var(--space-xs); }
.room-card .room-card__summary { color: var(--color-ink-muted-80); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.room-card .room-card__meta { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-48); display: flex; align-items: center; gap: 4px; }
.room-card .room-card__meta svg { width: 12px; height: 12px; }
.pin-badge { font-family: var(--font-display); font-weight: 600; letter-spacing: 2px; font-variant-numeric: tabular-nums; color: var(--color-ink); }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 64px; animation: marquee 40s linear infinite; padding: var(--space-xs) 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.374px; white-space: nowrap; color: var(--color-on-dark); display: flex; align-items: center; gap: 64px; }
.marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-muted-48); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee { -webkit-mask-image: none; mask-image: none; } }

.timeline { display: grid; gap: var(--space-xxl); }
.timeline__year { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.timeline__label { position: sticky; top: calc(var(--h-sub-nav) + 24px); font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.timeline__label small { display: block; font-family: var(--font-text); font-size: 14px; font-weight: 400; letter-spacing: -0.224px; color: var(--color-ink-muted-48); margin-top: var(--space-xs); }
.timeline__items { display: grid; gap: var(--space-md); }
.legacy-card { flex-direction: row; gap: var(--space-lg); align-items: flex-start; }
.legacy-card__thumb { width: 168px; aspect-ratio: 4 / 3; border-radius: var(--rounded-sm); object-fit: cover; flex: none; background: var(--color-canvas-parchment); }
.legacy-card__ph { width: 168px; aspect-ratio: 4 / 3; border-radius: var(--rounded-sm); flex: none; background: var(--color-surface-tile-1); color: var(--color-on-dark); display: flex; align-items: flex-end; padding: var(--space-sm); font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -0.374px; overflow: hidden; }
.legacy-card__body { min-width: 0; flex: 1; }
.legacy-card__meta { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-48); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.legacy-card__kind { color: var(--color-ink); font-weight: 600; }
.legacy-card__org { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; color: var(--color-ink-muted-80); }
.legacy-card .t-tagline { margin: 2px 0 var(--space-xs); }
.legacy-card__summary { font-size: 14px; line-height: 1.5; letter-spacing: -0.224px; color: var(--color-ink-muted-80); margin: 0 0 var(--space-sm); }

.work-card { padding: 0; overflow: hidden; }
.work-card__media { aspect-ratio: 16 / 10; background: var(--color-surface-tile-3); position: relative; overflow: hidden; display: block; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-ink-muted-48); }
.work-card__ph svg { width: 44px; height: 44px; }
.work-card__ph span { position: absolute; left: var(--space-md); bottom: var(--space-sm); font-size: 12px; color: var(--color-ink-muted-48); }
.work-card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.work-card__title { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.374px; margin: 0 0 4px; }
.work-card__by { font-size: 12px; letter-spacing: -0.12px; color: var(--color-body-muted); margin: 0 0 var(--space-xs); }
.work-card__desc { font-size: 14px; letter-spacing: -0.224px; color: var(--color-body-muted); margin: 0 0 var(--space-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-card__stats { display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; color: var(--color-body-muted); font-variant-numeric: tabular-nums; }
.like-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: inherit; font-size: 12px; }
.like-btn svg, .work-card__stats svg { width: 15px; height: 15px; }
.link > svg { width: 18px; height: 18px; }
.like-btn[aria-pressed="true"] { color: var(--color-primary-on-dark); }
.like-btn[aria-pressed="true"] svg path { fill: currentColor; }
.like-btn:active { transform: var(--press-scale); }
.light-works .work-card__by, .light-works .work-card__desc, .light-works .work-card__stats { color: var(--color-ink-muted-80); }
.light-works .work-card__media { background: var(--color-canvas-parchment); }
.light-works .like-btn[aria-pressed="true"] { color: var(--color-primary); }

.tool-card { flex-direction: row; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.tool-card__name { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; line-height: 1.24; }
.tool-card__sum { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-80); margin-top: 2px; }
.tool-card .ext { margin-left: auto; color: var(--color-ink-muted-48); width: 14px; height: 14px; flex: none; }

.notice { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: 14px; letter-spacing: -0.224px; color: var(--color-ink-muted-80); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--rounded-lg); padding: var(--space-md) var(--space-lg); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--color-ink-muted-48); }

.footer { background: var(--color-canvas-parchment); color: var(--color-ink-muted-80); padding: 64px 0 var(--space-xl); font-size: 12px; }
.footer__cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-hairline); }
.footer h4 { font-size: 14px; font-weight: 600; letter-spacing: -0.224px; color: var(--color-ink); margin: 0 0 var(--space-xs); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a, .footer li button { font-size: 14px; line-height: 2.2; color: var(--color-ink-muted-80); background: none; border: 0; padding: 0; cursor: pointer; }
.footer li a:hover, .footer li button:hover { color: var(--color-ink); text-decoration: underline; }
.footer__legal { padding-top: var(--space-md); display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; color: var(--color-ink-muted-48); }
.footer__legal a { color: var(--color-ink-muted-80); }
.footer__legal-end { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: baseline; }

/* 10. 강의방 ---------------------------------------------------------- */
.gate { min-height: calc(100vh - var(--h-global-nav)); min-height: calc(100dvh - var(--h-global-nav)); display: grid; place-items: center; text-align: center; padding: var(--space-xxl) var(--gutter); }
.gate__inner { width: 100%; max-width: 420px; }
.gate .t-display-lg { margin: var(--space-xs) 0 var(--space-sm); }
.gate__hint { color: var(--color-body-muted); font-size: 17px; }
.pin-dots { display: flex; justify-content: center; gap: 18px; margin: var(--space-xl) 0 var(--space-sm); }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); transition: background 0.12s; }
.pin-dots span.on { background: var(--color-on-dark); border-color: var(--color-on-dark); }
.pin-dots.shake { animation: shake 0.42s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.gate__msg { min-height: 24px; font-size: 14px; color: var(--color-body-muted); margin-bottom: var(--space-md); }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 18px 26px; justify-content: center; }
.key { width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--color-on-dark); font-family: var(--font-display); font-size: 32px; font-weight: 400; cursor: pointer; display: grid; place-items: center; transition: background 0.12s, transform 0.12s; -webkit-tap-highlight-color: transparent; }
.key:active, .key.is-pressed { background: rgba(255, 255, 255, 0.32); transform: var(--press-scale); }
.key--text { background: transparent; font-family: var(--font-text); font-size: 14px; letter-spacing: -0.224px; }
.key--text:active { background: rgba(255, 255, 255, 0.12); }
.key--go { background: var(--color-primary); font-size: 14px; font-family: var(--font-text); letter-spacing: -0.224px; }
.gate__back { margin-top: var(--space-xl); }

.room-hero { padding: 88px 0 72px; }
.room-hero .t-hero { margin: var(--space-xs) 0 var(--space-md); }
.room-hero .t-lead { max-width: 820px; font-size: 24px; line-height: 1.4; }
.room-hero__meta { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); font-size: 14px; letter-spacing: -0.224px; }
.room-hero__meta div span { display: block; font-size: 12px; color: var(--color-ink-muted-48); }
.is-dark .room-hero__meta div span { color: var(--color-body-muted); }
.room-hero .row-flex { margin-top: var(--space-xl); }
.room-hero__desc { margin-top: var(--space-lg); max-width: 760px; color: var(--color-ink-muted-80); }
.is-dark .room-hero__desc { color: var(--color-body-muted); }
.res-group + .res-group { margin-top: var(--space-xxl); }
.res-group__head { display: flex; align-items: baseline; gap: 4px var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
.res-group__head h2 { white-space: nowrap; }
.res-card { gap: var(--space-md); }
.res-card__top { display: flex; align-items: center; gap: var(--space-sm); }
.res-card__kind { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-48); }
.res-card__title { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.374px; margin: 0; }
.res-card__desc { font-size: 14px; letter-spacing: -0.224px; color: var(--color-ink-muted-80); margin: 0; }
.res-card--featured { background: var(--color-surface-tile-1); color: var(--color-on-dark); border-color: transparent; }
.res-card--featured .res-card__kind, .res-card--featured .res-card__desc { color: var(--color-body-muted); }
.res-card--featured .glyph { background: rgba(255, 255, 255, 0.08); color: var(--color-primary-on-dark); }
.res-card--featured .link { color: var(--color-primary-on-dark); }

/* 11. 강의 모드(프로젝터) ---------------------------------------------- */
.present { min-height: 100vh; min-height: 100dvh; background: var(--color-surface-black); color: var(--color-on-dark); display: flex; flex-direction: column; padding: 40px 56px; gap: 32px; }
.present__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); }
.present__title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 1.05; font-weight: 600; letter-spacing: -0.5px; margin: 6px 0 0; }
.present__main { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; }
.present__qr { background: var(--color-canvas); border-radius: var(--rounded-lg); padding: 24px; width: clamp(240px, 28vw, 380px); box-shadow: var(--shadow-product); }
.present__qr svg { width: 100%; height: auto; }
.present__label { font-size: 21px; font-weight: 600; color: var(--color-body-muted); margin: 0 0 var(--space-xs); }
.present__url { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.3px; word-break: break-all; margin: 0 0 48px; }
.present__pin { display: flex; gap: 16px; }
.present__pin span { width: clamp(72px, 7vw, 120px); aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: var(--rounded-lg); background: var(--color-surface-tile-2); font-family: var(--font-display); font-size: clamp(56px, 6vw, 104px); font-weight: 600; font-variant-numeric: tabular-nums; }
.present__bottom { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.present__bottom .chip { background: rgba(255, 255, 255, 0.08); border-color: transparent; color: var(--color-on-dark); }
.present__stat { margin-left: auto; font-size: 17px; color: var(--color-body-muted); }
.present__stat b { color: var(--color-on-dark); font-variant-numeric: tabular-nums; }

/* 12. 관리자 ---------------------------------------------------------- */
.admin-body { background: var(--color-canvas-parchment); min-height: 100vh; }
.admin-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: var(--rounded-pill); font-size: 14px; letter-spacing: -0.224px; color: var(--color-ink-muted-80); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.admin-tabs button[aria-selected="true"] { background: var(--color-ink); color: var(--color-on-dark); }
.admin-tabs .badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--color-primary); color: var(--color-on-dark); font-size: 11px; display: inline-grid; place-items: center; padding: 0 5px; font-variant-numeric: tabular-nums; }
.admin-main { padding-top: var(--space-xxl); padding-bottom: var(--space-section); }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.admin-head p { color: var(--color-ink-muted-80); margin-top: 6px; font-size: 14px; letter-spacing: -0.224px; }
.panel { background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--rounded-lg); overflow: hidden; }
.panel + .panel, .panel + .admin-head { margin-top: var(--space-xl); }
.panel__head { padding: var(--space-md) var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); border-bottom: 1px solid var(--color-hairline); flex-wrap: wrap; }
.panel__head .t-body-strong { flex: 1; }
.panel__body { padding: var(--space-lg); }
.list-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-divider-soft); min-width: 0; }
.list-row:first-child { border-top: 0; }
.list-row__main { flex: 1; min-width: 0; }
.list-row__title { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; line-height: 1.3; display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.list-row__sub { font-size: 12px; letter-spacing: -0.12px; color: var(--color-ink-muted-48); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.list-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.list-row__order { display: flex; flex-direction: column; gap: 2px; }
.list-row__order button { width: 26px; height: 20px; border: 0; background: var(--color-canvas-parchment); border-radius: 5px; cursor: pointer; display: grid; place-items: center; color: var(--color-ink-muted-80); }
.list-row__order button:disabled { opacity: 0.3; cursor: default; }
.list-row__order svg { width: 10px; height: 10px; }
.list-row.is-muted .list-row__title { color: var(--color-ink-muted-48); }
.pill-label { font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 2px 8px; border-radius: var(--rounded-pill); border: 1px solid var(--color-hairline); color: var(--color-ink-muted-80); white-space: nowrap; }
.pill-label--blue { border-color: var(--color-primary); color: var(--color-primary); }
.pill-label--ink { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.stat-card { padding: var(--space-lg); }
.stat-card__num { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.stat-card__label { font-size: 14px; letter-spacing: -0.224px; color: var(--color-ink-muted-80); margin-top: var(--space-xs); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.two-col > .panel + .panel { margin-top: 0; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px var(--space-md); font-size: 14px; letter-spacing: -0.224px; }
.kv dt { color: var(--color-ink-muted-48); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-all; }
.glyph--date { width: auto; min-width: 64px; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.diff { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--color-ink-muted-80); }
.diff code { font-family: var(--font-mono); font-size: 11px; background: var(--color-canvas-parchment); border-radius: 4px; padding: 1px 5px; }
.login-card { max-width: 420px; margin: 12vh auto 0; text-align: center; padding: var(--space-xxl) var(--space-xl); }
.login-card .t-display-md { margin: var(--space-xs) 0 var(--space-xs); }
.login-card form { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); }
.login-card .input { text-align: center; border-radius: var(--rounded-pill); padding: 10px 20px; }
.res-editor-row { display: grid; grid-template-columns: 26px 44px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-top: 1px solid var(--color-divider-soft); }
.res-editor-row:first-child { border-top: 0; }
.drop-hint { font-size: 12px; color: var(--color-ink-muted-48); }

/* 13. 반응형 ---------------------------------------------------------- */
@media (max-width: 1068px) {
  .t-hero { font-size: 40px; line-height: 1.1; }
  .grid-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat__num { font-size: 44px; }
  .present__main { gap: 40px; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 833px) {
  .gnav__links { display: none; }
  .gnav__menu-btn { display: grid; }
  .gnav__inner { justify-content: space-between; }
  .grid-rooms, .grid-3, .grid-works, .grid-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subnav__links { display: none; }
  .timeline__year { grid-template-columns: 1fr; gap: var(--space-md); }
  .timeline__label { position: static; font-size: 34px; }
  .timeline__label small { display: inline; margin-left: var(--space-xs); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .present { padding: 28px; }
  .present__main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .present__pin { justify-content: center; }
}
@media (max-width: 734px) {
  .subnav--admin .subnav__title { display: none; }
  .subnav--admin .admin-tabs { margin-left: 0; }
  .tile { padding: var(--space-xxl) 0; }
  .hero { padding: 64px 0 var(--space-xxl); }
  .t-display-lg { font-size: 32px; }
  .t-display-md { font-size: 28px; }
  .t-lead, .hero .t-lead, .room-hero .t-lead { font-size: 19px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); margin-top: var(--space-xxl); }
  .stat:nth-child(3) { border-left: 0; }
  .legacy-card { flex-direction: column; }
  .legacy-card__thumb, .legacy-card__ph { width: 100%; aspect-ratio: 16 / 7; }
  .form-grid { grid-template-columns: 1fr; }
  .list-row { flex-wrap: wrap; }
  .list-row__actions { width: 100%; justify-content: flex-start; }
  .marquee__item { font-size: 24px; gap: 40px; }
  .marquee__track { gap: 40px; }
  .room-hero { padding: 56px 0 48px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: var(--space-xs); }
}
@media (max-width: 640px) {
  .t-hero { font-size: 34px; }
  .grid-rooms, .grid-3, .grid-works { grid-template-columns: 1fr; }
  .grid-tools { grid-template-columns: 1fr; }
  .stat__num { font-size: 40px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { max-height: 92vh; border-radius: var(--rounded-lg) var(--rounded-lg) 0 0; }
  .keypad { grid-template-columns: repeat(3, 72px); gap: 16px 22px; }
  .key { width: 72px; height: 72px; }
  .sticky-bar__inner .t-caption { font-size: 12px; }
  .tile-head--left { flex-direction: column; align-items: stretch; }
  .filter-rows { justify-items: start; }
}
@media (max-width: 419px) {
  .t-hero { font-size: 28px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}