/* 개별 화면: 승인 대기, 로그인·가입, 오류 등 */
/* === me === */
/* ---------- 마이페이지 · 예약 이력 · 알림 ---------- */
.me-home > .eyebrow { margin-bottom: 16px; }
.me-home .hello { margin-bottom: 0; }
.me-home .hello p { font-weight: 500; }
.me-home .resv-main .st-note { margin: 6px 0 0; }
.me-home .tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* 바로가기가 홀수(교사 5개)면 마지막 한 장이 혼자 남는다 → 맨 앞 장(승인 대기)을 한 줄 가득 */
.me-home .tiles > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
/* 티켓 사이: 펀칭 둘레(16px)가 위아래 장끼리 닿아 구슬처럼 보이지 않게 공통 12px 보다 넓힌다 */
.me-home .resv-list, .me-history .resv-list { gap: 18px; }

/* 긴 특별실 이름: 이름만 줄바꿈하고 분류 점은 첫 줄 왼쪽, 배지는 오른쪽 위에 남긴다 (공통 .resv-title 은 통째로 줄바꿈해 점이 혼자 남는다) */
.me-home .resv-title, .me-history .resv-title { flex-wrap: nowrap; align-items: flex-start; }
.me-home .resv-title .cat-dot, .me-history .resv-title .cat-dot { margin-top: 6px; }
.me-home .resv-title a, .me-history .resv-title a { flex: 1 1 auto; min-width: 0; }

/* 이력: 탭 아래 바로 묶음 머리가 오므로 탭의 아래 여백을 줄인다 */
.me-history .filter-tabs { margin-bottom: 0; gap: 2px; }
/* 두 글자 탭은 글자 너비(28px)만으로는 손가락에 좁다: 좌우 여백을 탭 안으로 넣어 누르는 너비를 44px 이상으로.
   첫 탭은 제목과 왼쪽 선을 맞추려고 왼쪽 여백 없이, 밑줄은 어느 탭이든 글자 너비만큼만.
   간격은 390px 화면에서 마지막 탭(노쇼)이 흐린 가장자리에 반쯤 걸려 "옆에 더 있다"가 보이는 값이다 */
.me-history .filter-tabs a { min-width: var(--tap); justify-content: center; padding: 0 9px; }
.me-history .filter-tabs a:first-child { justify-content: flex-start; padding: 0 16px 0 0; }
.me-history .filter-tabs a.active::after { left: 9px; right: 9px; }
.me-history .filter-tabs a:first-child.active::after { left: 0; right: 16px; }
.me-history .group-h { margin-top: 24px; }
.me-history .resv-list + .group-h { margin-top: 36px; }
.me-history .panel.empty { margin-top: 24px; }
.me-history .resv-main .st-note { margin: 8px 0 0; }
/* 아래 줄: 왼쪽에 "지금 어떤 상태인지" 한 줄, 오른쪽에 조용한 취소 */
.me-history .resv-actions { justify-content: space-between; gap: 8px 12px; margin-top: 0; }
.me-history .resv-actions .st-note { flex: 1 1 160px; min-width: 0; }
.me-history .resv-actions form { margin-left: auto; }   /* 좁아서 줄이 바뀌어도 취소는 오른쪽 아래에 */
.me-history .resv[data-status="APPROVED"] .resv-actions .st-note { color: var(--st-approved-fg); font-weight: 600; }

.me-alerts .group-h { margin-top: 24px; }
.me-alerts .page-head + .group-h { margin-top: 0; }
.me-alerts .panel { padding: 24px 28px; }
/* 읽는 순서는 유형(승인·거절) > 내용 > 시각. 안 읽은 줄을 통째로 굵게 하면 휴대폰에서 네 줄짜리 검은 덩어리가 된다 →
   굵기는 한 단계만 올리고, 가장 중요한 낱말인 유형을 상태색으로 키운다. 점은 동작·링크가 아니므로 코발트 대신 코랄 */
.me-alerts .alerts .kind > span { font-size: var(--fs-small); }
.me-alerts .type-APPROVED .kind > span { color: var(--st-approved-fg); }
.me-alerts .type-REJECTED .kind > span, .me-alerts .type-AUTO_REJECTED .kind > span, .me-alerts .type-CANCELED_BY_ADMIN .kind > span { color: var(--st-rejected-fg); }
.me-alerts .type-CALENDAR_CONFLICT .kind > span { color: var(--st-pending-fg); }
.me-alerts .alerts li.unread .msg { font-weight: 500; }
.me-alerts .alerts li.unread .kind::after { background: var(--coral-deep); }

/* 빈 상태의 3D 본관 정지 이미지 (마이페이지·예약 이력·승인 대기가 같이 쓴다). 작고 살짝 옅게 — 주인공은 아래 문구와 버튼이다.
   이미지를 못 받으면 onerror 가 hidden 을 붙이고, 그때는 바로 뒤의 동그란 아이콘이 원래대로 나온다 */
.empty .empty-art { width: 176px; margin: -6px auto 12px; opacity: .9; }
.empty .empty-art[hidden] { display: none; }
.empty .empty-art:not([hidden]) + .empty-ico { display: none; }

@media (max-width: 767px) {
    .me-home .section-head { margin-top: 32px; }
    .me-history .page-head { margin-bottom: 16px; }
    .me-alerts .panel { padding: 18px; }
}
/* === /me === */

/* === teacher === */
/* ---------- 교사 대시보드 ---------- */
.tch-dash .section-head { margin-top: 0; }
.tch-range { font-size: var(--fs-small); color: var(--ink-3); text-align: right; }
.tch-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tch-rooms li {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    transition: background-color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.tch-dash .resv-title { flex-wrap: nowrap; align-items: flex-start; }
.tch-dash .resv-title .cat-dot { margin-top: 6px; }
.tch-dash .resv-title .cat-dot + span { flex: 1 1 auto; min-width: 0; }
/* 티켓 사이: 펀칭 둘레가 위아래 장끼리 닿지 않게 (me 쪽 목록과 같은 값). 동작 둘은 같은 무게의 채운 버튼 — 중립 왼쪽, 위험 오른쪽 */
.tch-dash .resv-list { gap: 18px; }
.tch-dash .resv-actions { gap: 8px; }
/* PC 의 넓은 티켓: 동작만 있는 빈 줄(50px)을 두지 않고 신청자 줄의 오른쪽 끝에 버튼을 올린다 */
@media (min-width: 1024px) {
    .tch-dash .resv-actions { margin-top: -44px; }
    .tch-dash .resv:has(.resv-actions) .resv-meta { padding-right: 220px; }
}
/* 목록 줄 hover 는 그 실의 분류색으로 (탐색 화면의 특별실 줄과 같은 말투) */
@media (hover: hover) {
    .tch-rooms li:hover { background: var(--cat-bg); border-color: transparent; box-shadow: 0 0 0 1.5px var(--cat-fg); }
    .tch-rooms li:hover .btn { background: var(--surface); }
}
.tch-room { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; color: var(--ink); }
.tch-room:hover { text-decoration: none; }
.tch-room-main { min-width: 0; display: grid; gap: 1px; }
.tch-room-main strong { font-size: 16px; letter-spacing: -.015em; line-height: 1.35; }
.tch-room-main span { font-size: var(--fs-small); color: var(--ink-3); }
.tch-edit-help { margin: -8px 0 0; }

/* ---------- 승인 대기 (S-09) ---------- */
/* 경합 비교 막대의 선명한 단색(흰 시각 글자가 4.5:1 이상 읽히는 값)과, 아래 신청 카드 머리글자 칸의 짝 색 */
.pq {
    --pq-c1: var(--accent);  --pq-c1-bg: #DDE1FA; --pq-c1-fg: #1B2A9C;
    --pq-c2: #C4562F;        --pq-c2-bg: #FBE0C7; --pq-c2-fg: #7A3D0B;
    --pq-c3: #24803E;        --pq-c3-bg: #D5EBDA; --pq-c3-fg: #1C5E2E;
    --pq-c4: #A2336F;        --pq-c4-bg: #F2DAE5; --pq-c4-fg: #7F1D4E;
    --pq-pad: 28px; --pq-label: 84px;
}
.pq-group { padding: 24px var(--pq-pad) var(--pq-pad); margin-bottom: 20px; overflow: hidden; }
.pq-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; margin-bottom: 20px; }
.pq-head h2 { min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; }
.pq-room { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.pq-when { font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pq-head .pill { height: 28px; padding: 0 12px; font-size: var(--fs-small); gap: 7px; }
.pq-head .pill.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st-pending-dot); }

/* 겹치는 신청을 한 시간축에 나란히 놓고 비교한다 */
.cmp { margin: 0 0 4px; padding: 16px 28px 10px 18px; border-radius: var(--r-md); background: var(--paper-2); }
.cmp-row { display: grid; grid-template-columns: var(--pq-label) minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 6px; --pq-lane: var(--ink-2); }
.cmp-row:nth-child(1) { --pq-lane: var(--pq-c1); }
.cmp-row:nth-child(2) { --pq-lane: var(--pq-c2); }
.cmp-row:nth-child(3) { --pq-lane: var(--pq-c3); }
.cmp-row:nth-child(4) { --pq-lane: var(--pq-c4); }
.cmp-who { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-track { position: relative; height: 26px; border-radius: 8px; background: var(--paper-3); }
.cmp-track i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; border-radius: 8px; background: var(--pq-lane); font-style: normal; container-type: inline-size; }
.cmp-track b { padding: 0 10px; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 막대가 글자보다 짧으면 시각을 막대 밖 옆자리에 잉크색으로 쓴다 — 한 줄만 시각이 빠지면 고장 난 표처럼 읽힌다.
   오른쪽이 기본, 남은 자리가 왼쪽이 더 넓으면(is-late, 템플릿이 계산) 왼쪽 */
@container (max-width: 92px) {
    .cmp-track b { position: absolute; left: 100%; padding: 0 0 0 7px; color: var(--ink-2); }
    .cmp-track i.is-late b { left: auto; right: 100%; padding: 0 7px 0 0; }
}
.cmp-axis { position: relative; height: 24px; margin: 4px 0 0 calc(var(--pq-label) + 12px); font-size: var(--fs-micro); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 눈금 글자는 모두 그 시각의 한가운데에 둔다 (양 끝만 안쪽으로 당기면 간격이 달라 보인다). 끝 글자는 상자의 안쪽 여백 안에 들어온다 */
.cmp-axis span { position: absolute; top: 0; padding-top: 7px; transform: translateX(-50%); white-space: nowrap; }
.cmp-axis span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: var(--line-2); }

/* 신청 카드: 테두리 상자 대신 세로 실선으로 나눈 단. 바깥쪽(첫 단의 왼쪽, 첫 줄의 위) 선은 패널이 잘라 낸다 */
.pq-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 12px calc(var(--pq-pad) * -1) calc(var(--pq-pad) * -1); }
.pq-req { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: -1px 0 0 -1px; padding: 24px var(--pq-pad) var(--pq-pad); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.is-single .pq-reqs { margin-top: 0; }
.is-single .pq-req { padding-top: 0; border-top: 0; }
.pq-info, .pq-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pq-side { flex: 1; }
.pq-time { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.pq-time strong { flex: 1 0 100%; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pq-time > span { font-size: 12.5px; color: var(--ink-3); }
/* 칩(22px)이 접수 줄(약 19px)을 키우면 첫 단만 아래 내용이 2px 내려가 단끼리 기준선이 어긋난다 */
.pq-time .chip { align-self: center; margin-block: -3px; }
.is-single .pq-when-time { display: none; }
.pq-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pq-who > div { min-width: 0; }
.pq-ini { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font-weight: 700; font-size: 15px; line-height: 1; }
.is-contested .pq-req:nth-child(1) .pq-ini { background: var(--pq-c1-bg); color: var(--pq-c1-fg); }
.is-contested .pq-req:nth-child(2) .pq-ini { background: var(--pq-c2-bg); color: var(--pq-c2-fg); }
.is-contested .pq-req:nth-child(3) .pq-ini { background: var(--pq-c3-bg); color: var(--pq-c3-fg); }
.is-contested .pq-req:nth-child(4) .pq-ini { background: var(--pq-c4-bg); color: var(--pq-c4-fg); }
.pq-who b { display: block; font-size: 15.5px; line-height: 1.35; letter-spacing: -.015em; }
.pq-who b + span { display: block; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.45; }
.pq-purpose { margin: 0; padding: 1px 0 1px 12px; border-left: 3px solid var(--ink); color: var(--ink); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.pq-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.pq-stats div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.pq-stats dt { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); line-height: 1.4; }
.pq-stats dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pq-stats dd.is-bad { color: var(--danger); }
.pq-members { margin: -8px 0; }
.pq-members summary { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.pq-members summary::-webkit-details-marker { display: none; }
.pq-members summary:hover { color: var(--ink); }
.pq-members summary .icon { transition: transform var(--t-fast) var(--ease); }
.pq-members[open] summary .icon { transform: rotate(90deg); }
.pq-members ul { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--line); }
.pq-members li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sub); }
.pq-members li .num { color: var(--ink-3); }

/* 승인(넓게) + 거절(조용히). 거절을 누르면 아래 줄에 사유 칸이 펼쳐진다 */
.pq-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.pq-acts > form { flex: 1.7 1 0; margin: 0; }
.pq-acts > form .btn { width: 100%; }
.pq-acts > details { flex: 1 1 0; min-width: 0; }
.pq-acts summary { display: block; list-style: none; cursor: pointer; border-radius: var(--r-md); }
.pq-acts summary::-webkit-details-marker { display: none; }
.pq-reject-open { display: flex; width: 100%; }
.pq-reject-head { display: none; }
.pq-acts > details[open] { flex: 1 1 100%; padding: 4px 14px 14px; border-radius: var(--r-md); background: var(--danger-wash); }
.pq-acts > details[open] .pq-reject-open { display: none; }
.pq-acts > details[open] .pq-reject-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); font-size: var(--fs-small); color: var(--st-rejected-fg); }
.pq-reject-close { font-weight: 600; color: var(--ink-2); }
.pq-acts summary:hover .pq-reject-close { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pq-reject-form { display: grid; gap: 8px; margin: 0; }
.pq-reject-form .input { margin-top: 0; background: var(--surface); border-color: rgba(185, 50, 33, .28); }
.pq-reject-form .btn-danger { background: var(--surface); }

@media (min-width: 768px) {
    /* 단독 신청은 한 장이 가로로 길다: 왼쪽에 누가·언제·왜, 오른쪽에 참고 수치와 동작 */
    .is-single .pq-req { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: 48px; align-items: start; }
    .is-single .pq-reject-form { grid-template-columns: minmax(0, 1fr) auto; }
    /* 네 건이면 3+1 로 떨어지지 않게 2×2 */
    .pq-reqs:has(> .pq-req:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .pq { --pq-pad: 18px; --pq-label: 60px; }
    .pq-group { padding-top: 18px; }
    .pq-head { grid-template-columns: auto minmax(0, 1fr); margin-bottom: 16px; }
    .pq-head h2 { flex-direction: column; align-items: flex-start; }
    .pq-head .pill { grid-column: 1 / -1; justify-self: start; }
    .pq-room { font-size: 20px; }
    .pq-when { font-size: var(--fs-sub); }
    /* 제목 옆에 대시보드 버튼을 올리고 비교표를 낮춰, 첫 승인 버튼이 첫 화면(하단 탭 위)에 들어오게 한다 */
    .pq .page-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 16px; }
    .pq .page-head > .btn { justify-self: end; }
    .cmp { padding: 10px 24px 2px 12px; }
    .cmp-row { gap: 10px; margin-bottom: 5px; }
    .cmp-track { height: 22px; border-radius: 7px; }
    .cmp-track i { border-radius: 7px; }
    .cmp-axis { margin-left: calc(var(--pq-label) + 10px); }
    .cmp-track b { padding: 0 8px; font-size: 11px; }
    /* 눈금이 여섯 개를 넘으면 하나 건너 하나만 보여 준다 (글자가 서로 닿는다) */
    .cmp-axis:has(span:nth-child(6)) span:nth-child(even) { visibility: hidden; }
    .pq-req { padding-top: 20px; gap: 14px; }
    .tch-range { display: none; }
    /* 담당 특별실: 카드 대신 괘선 줄로 낮춘다 (관리자는 열 곳이 넘는다) */
    .tch-rooms { gap: 0; margin-top: -6px; }      /* 위 선은 섹션 머리의 잉크 괘선이 맡는다 */
    .tch-rooms li, .tch-rooms li:hover { padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
    .tch-rooms .cat-tile { width: 36px; height: 36px; border-radius: 11px; }
    .tch-rooms .cat-tile .icon { width: 18px; height: 18px; }
    .tch-room { gap: 12px; }
    .tch-room-main strong { font-size: 15px; }
    .tch-edit .form .actions.end .btn-primary { width: 100%; }
}
/* 한 단으로 쌓일 때는 날마다 보는 예약이 먼저, 담당 특별실은 그 아래 (PC 는 왼쪽 좁은 단이 특별실) */
@media (max-width: 960px) {
    .tch-dash .grid-side > .tch-col:first-child { order: 2; margin-top: 16px; }
}
/* === /teacher === */

/* === admin === */
/* 관리자 화면. 촘촘한 표·폼이어도 학생 화면과 같은 가족이어야 한다: 종이 위의 잉크, 그림자 없는 카드, 큰 숫자만 Hahmlet.
   클래스는 전부 adm- 로 시작한다. 공통 부품(.table .btn .panel …)은 .adm-table 처럼 부모를 좁혀서만 손댄다. */

/* ---- 관리자 홈: 숫자가 먼저 읽히는 타일 ---- */
.adm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.adm-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.adm-tile {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: start;
    grid-template-areas: "ico . go" "label label label" "num num num" "sub sub sub";
    min-height: 196px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink);
    transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.adm-tile:hover { border-color: var(--ink); text-decoration: none; }
.adm-tile:active { transform: scale(.99); background: var(--paper); }
.adm-tile:focus-visible { border-radius: var(--r-lg); }
.adm-tile-ico { grid-area: ico; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
.adm-tile-ico .icon { width: 22px; height: 22px; vertical-align: 0; }
.adm-tile-go { grid-area: go; align-self: start; margin-top: 12px; color: var(--ink-4); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.adm-tile:hover .adm-tile-go { color: var(--ink); transform: translateX(3px); }
.adm-tile-label { grid-area: label; margin-top: 20px; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-2); line-height: 1.4; }
.adm-tile-num { grid-area: num; display: flex; align-items: baseline; height: 52px; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--ink-3); line-height: 52px; white-space: nowrap; }
.adm-tile-num b { margin-right: 3px; font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: inherit; }
.adm-tile-num.is-text { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.adm-tile-sub { grid-area: sub; margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
/* 확인할 것이 생겼을 때만 호박색 */
.adm-tile.attn .adm-tile-ico { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.adm-tile.attn .adm-tile-sub { color: var(--st-pending-fg); font-weight: 600; }
.adm-tile.attn .adm-tile-label::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--st-pending-dot); vertical-align: 2px; }
/* 위의 두 장은 가로로 눕힌다: 아이콘 · 이름/설명 · 큰 숫자 */
.adm-tiles-2 .adm-tile { grid-template-columns: 52px minmax(0, 1fr) auto 20px; grid-template-areas: "ico label num go" "ico sub num go"; align-content: center; align-items: center; column-gap: 16px; min-height: 108px; padding: 20px 24px; }
.adm-tiles-2 .adm-tile-ico { width: 52px; height: 52px; border-radius: 16px; }
.adm-tiles-2 .adm-tile-ico .icon { width: 25px; height: 25px; }
.adm-tiles-2 .adm-tile-label { margin-top: 0; align-self: end; font-size: 16px; color: var(--ink); }
.adm-tiles-2 .adm-tile-sub { margin-top: 2px; align-self: start; }
.adm-tiles-2 .adm-tile-num { margin-top: 0; }
.adm-tiles-2 .adm-tile-num b { font-size: 44px; }
.adm-tiles-2 .adm-tile-go { margin-top: 0; align-self: center; }

/* ---- 한 번만 보이는 임시 비밀번호 ---- */
.adm-secret { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--accent-wash); }
.adm-secret-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-ink); }
.adm-secret-title { margin: 0 0 6px; font-size: 16px; line-height: 1.9; }
.adm-secret-title .temp-pw { margin-left: 6px; font-size: 18px; vertical-align: 0; }
.adm-secret-note { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }

/* ---- 계정 발급: PC 에서는 표 위의 한 줄짜리 폼 ---- */
.adm-issue { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 12px; align-items: end; }
.form.adm-issue label { margin: 0; min-width: 0; }
.adm-issue .btn { min-height: 48px; min-width: 88px; }
.adm-issue-help { grid-column: 1 / -1; margin: 0; }

/* ---- 표 ---- */
.adm-table td { height: 64px; }
.adm-table.compact td { height: 56px; }
.adm-who, .adm-room { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.adm-room { min-height: var(--tap); }
.adm-room:hover { text-decoration: none; }
.adm-room:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.adm-who strong, .adm-room strong { display: block; line-height: 1.35; }
.adm-who-sub { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 아이디·도면 영역 ID 도 표의 나머지와 같은 Pretendard + 고정폭 숫자 (고정폭 글꼴은 가입 코드·임시 비밀번호에만) */
.table td code.adm-id { display: inline-block; white-space: nowrap; padding: 3px 8px; border-radius: var(--r-xs); background: var(--paper-2); color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.adm-chip-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.adm-table .badge + .badge { margin-left: 4px; }
.table tr.inactive .avatar, .table tr.inactive .cat-tile { opacity: .55; }
/* 동작 버튼: 채운 중립 버튼, 사이는 8px. 정지·삭제는 paper-2 위의 빨간 글자 (공통 표 규칙은 바탕을 지운다) */
.table.adm-table td.c-act { text-align: right; }
.table.adm-table td.c-act > * + * { margin-left: 8px; }
.table.adm-table .btn-sm { min-height: 40px; }
.table.adm-table .btn-sm.btn-danger { background: var(--paper-2); padding: 4px 14px; }
.table.adm-table .btn-sm.btn-danger:hover { background: var(--danger-wash); box-shadow: inset 0 0 0 1.5px rgba(185, 50, 33, .35); }
.adm-foot-note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
.adm-foot-note .icon { margin-right: 4px; }

/* ---- 가입 코드 ---- */
.adm-roster { font-variant-numeric: tabular-nums; }
.form textarea.adm-roster { min-height: 208px; }
.adm-steps { list-style: none; margin: 0; padding: 0; counter-reset: adm-step; }
.adm-steps li { counter-increment: adm-step; position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--line); font-size: var(--fs-sub); line-height: 1.6; color: var(--ink-2); }
.adm-steps li:first-child { padding-top: 0; }
.adm-steps li:first-child::before { top: -1px; }
.adm-steps li:last-child { border-bottom: 0; }
.adm-steps li::before { content: counter(adm-step); position: absolute; left: 0; top: 11px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.adm-print-head { display: none; }
/* "코드 목록" 은 앞에 인쇄용 머리가 있어 공통의 .panel > h2:first-child 에 안 걸린다 → 같은 패널 제목 크기로 맞춘다 */
.adm-print-head + h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); margin: 0 0 16px; }
/* 두 패널의 아래 끝을 맞추고, "코드 목록 인쇄"는 패널 바닥에 붙인다 */
.grid-2.adm-even { align-items: stretch; }
.adm-howto { display: flex; flex-direction: column; }
.adm-howto .actions { margin-top: auto; padding-top: 24px; }
.adm-danger-text code { padding: 0; background: none; font-weight: 600; }      /* 괄호 안에서 칩 여백이 "( … )"처럼 벌어져 보였다 */
.adm-danger-text { max-width: 62em; font-size: var(--fs-sub); line-height: 1.65; color: var(--ink-2); }
.adm-reset .input { width: 200px; }

/* ---- 특별실 폼 ---- */
.adm-room-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.adm-form .adm-sub { display: flex; align-items: center; gap: 10px; margin: 32px 0 16px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.adm-form .adm-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.adm-help-after { margin: -8px 0 8px; }
/* 긴 폼의 끝: 왼쪽에 돌아가는 길, 오른쪽에 넉넉한 저장 */
.form .actions.adm-form-actions { gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.form .actions.adm-form-actions .btn-primary { min-width: 128px; }

/* ---- 학사일정 ---- */
.adm-conflicts.has-conflict { background: linear-gradient(var(--st-pending-dot), var(--st-pending-dot)) top / 100% 4px no-repeat, var(--surface); }
.adm-panel-lead { margin: -6px 0 16px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-3); }
.adm-allclear { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper); color: var(--ink-2); font-size: var(--fs-sub); }
.adm-allclear .icon { color: var(--st-approved-dot); }
.adm-gap { margin-top: 20px; }
/* 패널 안의 예약 티켓: 카드 속 카드(모서리 두 겹·펀칭)가 되지 않게 괘선 목록으로 편다. 날짜는 종이색 타일, 상태는 배지가 말한다 */
.adm-resv { gap: 0; }
.adm-resv .resv { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; -webkit-mask: none; mask: none; clip-path: none; padding: 16px 0; }
.adm-resv .resv:first-child { border-top: 0; padding-top: 0; }
.adm-resv .resv:last-child { padding-bottom: 0; }
.adm-resv .date-block { align-self: start; padding: 12px 0; border-right: 0; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.adm-resv .date-block::before, .adm-resv .date-block::after { display: none; }
.adm-resv .date-block .m + b { font-size: 26px; }
.adm-resv .resv-main { padding: 2px 0 0 16px; }
.adm-resv .resv-actions { padding: 8px 0 0 16px; }
.grid-side .empty p { max-width: 20em; margin-left: auto; margin-right: auto; text-wrap: balance; }

@media (max-width: 960px) {
    .adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-issue { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .adm-issue .btn { grid-column: 1 / -1; }
    /* 학사일정이 한 단이 되면: 관리자 홈이 "지금 확인"이라고 알린 충돌이 등록 폼 아래에 묻히지 않게 맨 위로 올린다 */
    .adm-cal-side { display: contents; }
    .adm-cal-side > .panel { margin: 0; }
    .adm-cal-side > .adm-conflicts.has-conflict { order: -1; }
}
@media screen and (max-width: 767px) {
    .adm-tiles { gap: 10px; }
    .adm-tiles-2 { grid-template-columns: minmax(0, 1fr); margin-bottom: 10px; }
    .adm-tile { min-height: 0; padding: 16px; }
    .adm-tile-ico { width: 40px; height: 40px; border-radius: 12px; }
    .adm-tile-label { margin-top: 14px; font-size: 14px; }
    .adm-tile-num { height: 44px; line-height: 44px; }
    .adm-tile-num b { font-size: 34px; }
    .adm-tile-num.is-text { font-size: 19px; }
    .adm-tile-sub { font-size: 12.5px; }
    .adm-tiles-2 .adm-tile { grid-template-columns: 44px minmax(0, 1fr) auto 18px; grid-template-areas: "ico label num go" "ico sub num go"; column-gap: 12px; min-height: 84px; padding: 16px 14px 16px 16px; }
    .adm-tiles-2 .adm-tile-ico { width: 44px; height: 44px; border-radius: 13px; }
    .adm-tiles-2 .adm-tile-label { font-size: 15px; }
    .adm-tiles-2 .adm-tile-num b { font-size: 36px; }
    .adm-tiles-2 .adm-tile-go { width: 18px; height: 18px; }      /* 휴대폰에서도 "누르면 넘어간다"는 표시는 남긴다 */
    .adm-secret { padding: 16px; gap: 12px; }
    .adm-secret-ico { width: 40px; height: 40px; }
    .adm-issue { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .adm-reset .input { width: 100%; }
    .adm-reset label, .adm-reset .btn { width: 100%; }
    /* 짧은 짝(건물+층, 시작+종료)은 휴대폰에서도 두 칸 — 150px 면 날짜·시각이 들어간다. 아주 좁은 화면만 한 칸 */
    .form .row.adm-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .form .row.adm-pair input, .form .row.adm-pair select { padding-left: 12px; padding-right: 10px; }
    .form .row.adm-pair select { padding-right: 34px; }
    /* 저장은 가로로 넓게, 목록으로는 그 왼쪽에 (공통 규칙은 저장을 한 줄 통째로 차지하게 한다) */
    .form .actions.adm-form-actions { flex-wrap: nowrap; }
    .form .actions.adm-form-actions .btn { min-height: 52px; }
    .form .actions.adm-form-actions .btn-primary { flex: 1 1 auto; min-width: 0; }
    .adm-resv .resv-main { padding-left: 14px; }
    .adm-resv .resv-actions { padding-left: 14px; }

    /* 표를 옆으로 미는 대신 한 줄을 카드처럼 쌓는다: 이름 → 사실들 → 동작. 휴대폰에서 동작 버튼이 화면 밖에 숨지 않게 */
    .table-wrap .table.adm-stack, .adm-stack tbody { display: block; width: 100%; min-width: 0; }
    .adm-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .adm-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .adm-stack tr::before { content: ""; order: 1; flex: 0 0 100%; height: 0; }      /* 이름 줄 뒤에서 줄을 끊는다 */
    .adm-stack tbody tr:first-child { padding-top: 4px; }
    /* 마지막 줄 버튼(38px)의 누르는 영역(44px)이 아래로 3px 삐져나와 목록 안에 세로 스크롤이 하나 더 생겼다 → 그만큼 받쳐 준다 */
    .adm-stack tbody tr:last-child { border-bottom: 0; padding-bottom: 4px; }
    /* 쌓은 표는 옆으로 밀 일이 없다. overflow-x:auto 가 세로까지 auto 로 만들어 손가락이 안쪽에 걸리던 것을 없앤다 */
    .table-wrap:has(.adm-stack) { overflow: visible; }
    .table-wrap .table.adm-stack td { display: block; height: auto; max-width: none; padding: 0; border: 0; background: none; text-align: left; }
    .adm-stack td.c-main { order: 0; flex: 1 1 0; min-width: 0; }
    .table-wrap .table.adm-stack td.c-inline, .table-wrap .table.adm-stack td.c-row, .table-wrap .table.adm-stack td.c-act { margin-top: 8px; }
    .table-wrap .table.adm-stack td.c-main { font-size: 14.5px; font-weight: 600; color: var(--ink); }
    .adm-stack td.c-side { order: 0; flex: none; margin-left: auto; }
    /* 이름표는 옅고 가늘게, 값은 잉크로 굵게 — "담당 김음악"이 한 덩어리로 뭉치지 않게 */
    .table-wrap .table.adm-stack td.c-inline { order: 2; flex: none; font-size: 13.5px; font-weight: 600; color: var(--ink); }
    .table-wrap .table.adm-stack tr.inactive td.c-inline { color: var(--ink-3); }
    .adm-stack td.c-inline[data-label]::before { content: attr(data-label); margin-right: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
    .adm-stack td.c-inline .muted { font-weight: 500; }
    .adm-stack td.c-inline .chip + .muted { margin-left: 4px; }
    /* 칩·배지는 한 줄에서 같은 높이(24px)로. 내부 식별자(아이디·도면 영역)는 칩을 벗겨 조용한 글자로 */
    .adm-stack .chip { height: 24px; }
    .table.adm-stack td.c-tech code.adm-id { padding: 0; background: none; color: var(--ink-3); font-size: 12.5px; }
    .table.adm-users td.c-tech code.adm-id { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }      /* 아이디는 관리자가 찾는 값이라 한 단계 진하게 */
    .adm-stack td.c-inline[data-label] { margin-right: 6px; }
    .adm-stack td.c-row { order: 3; flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
    .table-wrap .table.adm-stack td.c-act { order: 4; flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; text-align: right; }
    .table.adm-table td.c-act > * + * { margin-left: 0; }
    /* 보이는 높이는 38px, 누르는 영역은 공통 ::after 가 44px 로 넓힌다 */
    .table.adm-table .btn-sm, .table.adm-table .btn-sm.btn-danger { min-height: 38px; padding-left: 12px; padding-right: 12px; }

    /* 계정 목록: 학생 수백 명을 넘겨 봐야 한다 → 한 사람에 두 줄(이름·역할 / 아이디·상태·동작), 100px 안팎 */
    .table-wrap .table.adm-users td.c-inline, .table-wrap .table.adm-users td.c-act { margin-top: 6px; }
    .table-wrap .table.adm-users td.c-act { flex-wrap: nowrap; }
    .adm-users td.c-act .muted { white-space: normal; text-align: right; }

    /* 등록된 일정: 날짜 / 유형·메모 두 줄, 삭제는 오른쪽 가운데 */
    .table-wrap .table.adm-days tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date date act" "kind note act"; align-items: center; gap: 4px 8px; padding: 10px 0; }
    .table-wrap .table.adm-days tr::before { display: none; }
    .table-wrap .table.adm-days td.c-main { grid-area: date; font-variant-numeric: tabular-nums; }
    .table-wrap .table.adm-days td.c-side { grid-area: kind; margin: 0; }
    .table-wrap .table.adm-days td.c-row { grid-area: note; margin: 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .table-wrap .table.adm-days td.c-act { grid-area: act; margin: 0; }
}
@media (max-width: 339px) {
    .form .row.adm-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media print {
    /* 가입 코드 인쇄물: 머리말 + 표만. 줄마다 점선이라 잘라서 나눠 줄 수 있다 */
    .adm-print-head { display: block; margin-bottom: 10pt; padding-bottom: 8pt; border-bottom: 1.5pt solid #000; }
    .adm-print-head strong { display: block; font-size: 14pt; margin-bottom: 3pt; }
    .adm-print-head span { font-size: 9.5pt; }
    .adm-codes > h2 { display: none; }
    .adm-codes .table td { height: 26pt; border-bottom: 1px dashed #888; }
    .adm-codes .table tbody tr:last-child td { border-bottom: 1px dashed #888; }
    .adm-codes .table td code.temp-pw { font-size: 13pt; font-weight: 700; letter-spacing: .1em; }
}
/* === /admin === */

/* === auth === */
/* 로그인·가입·비밀번호 변경 + 오류 화면. PC 는 둘로 나뉜 카드(왼쪽 하늘 패널 · 오른쪽 폼), 휴대폰은 하늘 띠 아래 한 단.
   하늘색은 3D 무대(viewer.css)와 같은 값이다 — 로그인 전에도 같은 학교에 온 느낌이 나게. */
.auth { width: 100%; display: grid; place-items: center; padding: 48px var(--gutter) 72px; }
.auth-card {
    width: 100%; max-width: 960px; min-height: 600px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.auth-side {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 36px 0; overflow: hidden;
    background: radial-gradient(circle at 92% 6%, rgba(255, 214, 170, .55), rgba(255, 214, 170, 0) 46%), linear-gradient(180deg, #DCE4FF 0%, #EEF0FB 54%, #FBF3E8 100%);
}
.auth-word { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--ink); }
.auth-word:hover { text-decoration: none; }
.auth-word-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; line-height: 1; }
.auth-welcome { max-width: 9.5em; margin: 44px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.35; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.auth-sub { max-width: 21em; margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.auth-scene { margin: auto -8px; padding: 28px 0; }      /* 남는 높이의 가운데에 뜬다 — 가입처럼 긴 카드에서도 아래로 처지지 않게 */
.auth-art, .auth-motif { display: block; width: 100%; height: auto; }
/* 3D 본관 정지 이미지(투명 배경). 패널 여백 쪽으로 조금 키우고, 하늘에 떠 보이게 보랏빛 그림자를 아래에 깐다.
   aspect-ratio 로 받기 전에도 자리를 잡아 둔다 (문구가 밀리지 않게) */
.auth-art { width: calc(100% + 24px); max-width: none; margin: 0 -12px; aspect-ratio: 1200 / 767; filter: drop-shadow(0 18px 20px rgba(98, 107, 187, .2)); }
.auth-art[hidden] { display: none; }                          /* display: block 이 hidden 을 이기지 않게 */
.auth-art:not([hidden]) + .auth-motif { display: none; }      /* 정지 이미지가 있으면 그림은 물러난다 */
.auth-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 48px 56px; }
.auth-head { margin-bottom: 28px; }
.auth-head h1 { margin: 0; }
.auth-head > p:not(.eyebrow) { margin: 10px 0 0; color: var(--ink-2); }
.auth-main .form > label:last-of-type { margin-bottom: 24px; }
.auth-links { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-sub); color: var(--ink-2); }
.auth-links p { margin: 0 0 6px; }
.auth-links p a { display: inline-flex; align-items: center; min-height: var(--tap); margin: -12px 0; padding: 0 2px; }
.auth-foot { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-3); }
/* 회원가입으로 가는 길: 글자 링크 대신 한 줄짜리 카드 (코발트 버튼은 "로그인" 하나로 남긴다) */
.auth-next { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; margin-bottom: 14px; padding: 10px 14px 10px 12px; border-radius: var(--r-md); background: var(--paper); color: var(--ink); transition: background-color var(--t-fast); }
.auth-next:hover { background: var(--paper-2); text-decoration: none; }
.auth-next:active { background: var(--paper-3); }
.auth-next:focus-visible { border-radius: var(--r-md); }
.auth-next-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.auth-next strong { display: block; font-size: 15px; letter-spacing: -.01em; line-height: 1.4; }
.auth-next small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.auth-next > .icon { color: var(--ink-3); }
.auth-privacy { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper); color: var(--ink-3); }
.auth-privacy .icon { margin-top: 1px; color: var(--ink-3); }
.auth-privacy p { margin: 0; font-size: 12.5px; line-height: 1.6; }
/* 가입 코드: 종이에 적힌 코드를 그대로 옮겨 적는 칸 — 크게, 띄엄띄엄 */
.form input.code-input { min-height: 56px; font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; }
.form input.code-input::placeholder { font-weight: 600; letter-spacing: .14em; }

/* 오류 화면: 하늘 위 작은 섬에 선 큰 숫자 */
.err-page { padding: 24px 0 8px; text-align: center; }
.err-stage {
    position: relative; display: grid; place-items: center; max-width: 440px; height: 216px; margin: 0 auto 32px; overflow: hidden; border-radius: var(--r-xl);
    background: radial-gradient(circle at 90% 8%, rgba(255, 214, 170, .6), rgba(255, 214, 170, 0) 48%), linear-gradient(180deg, #DCE4FF 0%, #EEF0FB 56%, #FBF3E8 100%);
}
.err-stage::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 30px; height: 42px; border-radius: 50%; background: #F6EFDF; box-shadow: 0 -2px 0 #fff, 0 7px 0 #D5CBF2, 0 12px 0 #B9ACE6; }
.err-code { position: relative; z-index: 1; margin-bottom: 34px; font-family: var(--font-display); font-weight: 700; font-size: 104px; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.err-code.is-text { font-size: 56px; }
.err-page h1 { margin-bottom: 12px; }
.err-msg { margin: 0 auto 4px; color: var(--ink-2); text-wrap: balance; }
.err-hint { margin: 0 auto; font-size: var(--fs-sub); color: var(--ink-3); text-wrap: balance; }
.err-page .actions { margin-top: 28px; }

@media (max-width: 960px) {
    .auth-main { padding: 40px 36px; }
    .auth-side { padding: 28px 28px 0; }
    .auth-welcome { font-size: 26px; }
}
@media (max-width: 767px) {
    /* 휴대폰: 카드를 풀고, 하늘은 위쪽 띠로. 워드마크는 상단 바에 이미 있다 */
    .auth { display: block; padding: 0; }
    .auth-card { display: block; min-height: 0; max-width: none; border: 0; border-radius: 0; background: none; }
    .auth-side { flex-direction: row; align-items: flex-end; gap: 8px; min-height: 136px; padding: 20px 8px 0 var(--gutter); border-bottom: 1px solid var(--line); }
    .auth-word, .auth-sub { display: none; }
    .auth-next, .auth-privacy { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
    .auth-next-ico { background: var(--paper); box-shadow: none; }
    .auth-welcome { flex: 1; max-width: none; margin: 0 0 22px; font-size: 21px; line-height: 1.4; }
    .auth-scene { flex: none; width: 46%; max-width: 190px; margin: 0; padding: 0 0 10px; }
    .auth-art { width: 100%; margin: 0; filter: drop-shadow(0 8px 10px rgba(98, 107, 187, .2)); }
    .auth-main { display: block; max-width: 520px; margin: 0 auto; padding: 28px var(--gutter) 40px; }
    .auth-head { margin-bottom: 24px; }
    .err-page { padding-top: 8px; }
    .err-stage { height: 184px; margin-bottom: 28px; }
    .err-code { font-size: 88px; margin-bottom: 30px; }
    .err-code.is-text { font-size: 48px; }
    .err-msg, .err-hint { max-width: 19em; }      /* 한 단어만 남는 끝줄이 생기지 않게 폭을 좁혀 고르게 나눈다 */
    .err-page .actions .btn { flex: 1; }
}
/* === /auth === */