/* 신현대 관리비 — 화면 CSS 하나(빌드 도구 없음).
 * 값 정본: book-commerce 빅식스 콘솔 시안 A
 *   docs/engine/design-tokens.md · apps/web/src/app/providers/theme-tokens.ts(THEME·LAYOUT·BRAND)
 *   = 회색 바닥 + 흰 상자 + 어두운 사이드바, 빅식스 대표색 #1F6FD6 (상태색은 흰 바탕 AA 보정값).
 * 의도적 차이: 콘솔은 본문 14px · 버튼 32px 이지만 여기는 관리소장(60대)용이라 (2026-10-13 대표 지시로 콘솔 크기로 되돌림 — 버튼만 36px.)
 */
:root {
  --brand: #1F6FD6; --brand-l9: #EBF3FC; --brand-l8: #D6E6F8; --brand-l5: #8FB7EA; --brand-d2: #1959AB; --brand-on-dark: #6AA8F0;
  --ok: #12843C; --ok-bg: #E8F5EC; --ok-bd: #B5DCC1;
  --warn: #AC5E05; --warn-bg: #FDF3E6; --warn-bd: #F0D2A8;
  --bad: #C62828; --bad-bg: #FDECEC; --bad-bd: #F3BDBD;
  --info: #5F6673; --info-bg: #F0F1F3; --info-bd: #D5D9E0;
  --t1: #303133; --t2: #606266; --t3: #73767A;
  --line: #DCDFE6; --line2: #E4E7ED; --line3: #EBEEF5;
  --floor: #F2F3F5; --card: #FFFFFF;
  --side-w: 200px; --side-bg: #1A1F2E; --side-t: #BFCBD9; --side-on-bg: #263445; --side-sep: #2A3142;
  --head-h: 56px;
  --th-bg: #F8F8F9; --th-t: #515A6E;
  --font: Pretendard, 'Pretendard Variable', 'Noto Sans KR', 'Malgun Gothic', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  --fs: 14px;      /* 콘솔과 같음 (대표 2026-10-13: 글자 너무 큼) */
  --fs-s: 12px;    /* 보조 글자 — 콘솔과 같음 */
  --fs-title: 16px;
  --btn-h: 36px;   /* 콘솔 32, 휴대폰 손가락 고려 36 */
  --r: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: var(--fs); color: var(--t1); background: var(--floor); line-height: 1.55; }
a { color: var(--brand); }
button, input, select { font: inherit; }
h1 { font-size: 18px; font-weight: 700; margin: 0; }
h2 { font-size: var(--fs-title); font-weight: 600; margin: 0 0 12px; }
.num, td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--t3); }
.small { font-size: var(--fs-s); }

/* ---- 셸: 흰 머리띠 + 어두운 사이드바(좁으면 위쪽 가로 메뉴) ---- */
.head { height: var(--head-h); background: #fff; border-bottom: 1px solid var(--line2); display: flex; align-items: center; gap: 12px; padding: 0 16px; position: sticky; top: 0; z-index: 10; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--t1); text-decoration: none; white-space: nowrap; }
.logo i { width: 12px; height: 12px; background: var(--brand); display: inline-block; }
.head .sp { flex: 1; }
.monthpick { display: flex; align-items: center; gap: 4px; }
.monthpick label { color: var(--t2); font-size: var(--fs-s); white-space: nowrap; }
.monthpick input { height: 40px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 8px; background: #fff; color: var(--t1); font-size: 14px; font-weight: 600; width: 10.5em; }
.monthpick button { height: 40px; min-width: 40px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; color: var(--t2); }
.who { display: flex; align-items: center; gap: 8px; color: var(--t2); font-size: var(--fs-s); }
.who form { margin: 0; }
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--head-h)); }
.side { background: var(--side-bg); padding: 8px 0; }
.side a { display: flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 20px; color: var(--side-t); text-decoration: none; font-size: 14px; }
.side a:hover { background: var(--side-on-bg); color: #fff; }
.side a.on { background: var(--side-on-bg); color: var(--brand-on-dark); font-weight: 600; }
.main { padding: 20px; min-width: 0; display: flex; flex-direction: column; gap: 16px; max-width: 1280px; }
.ph { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ph .sub { color: var(--t3); font-size: var(--fs-s); }

/* ---- 상자 · 배너 ---- */
.card { background: var(--card); border-radius: var(--r); padding: 20px; min-width: 0; }
.banner { padding: 12px 16px; border-radius: var(--r); border: 1px solid; }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: #6B3A02; }
.banner.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: #7A1616; }
.banner.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--t2); }
.banner.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: #0B5A28; }

/* ---- 버튼: primary 는 화면에 하나(밖으로 나가는 쓰기) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--btn-h); padding: 0 18px; border: 1px solid var(--line); background: #fff; color: var(--t1); border-radius: var(--r); cursor: pointer; text-decoration: none; font-size: var(--fs); white-space: nowrap; }
.btn:hover { background: var(--brand-l9); color: var(--brand); border-color: var(--brand-l5); }
.btn.pri { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.pri:hover { background: var(--brand-d2); }
.btn.sm { min-height: 28px; padding: 0 12px; font-size: var(--fs-s); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.link { border: 0; background: none; color: var(--brand); padding: 0 4px; min-height: 0; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
label.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
label.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* ---- 배지: 글자가 늘 붙는다(색만으로 뜻을 싣지 않음) ---- */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r); font-size: var(--fs-s); border: 1px solid; white-space: nowrap; vertical-align: middle; line-height: 1; }
.t-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.t-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.t-bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-bd); }
.t-info { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.t-pri { color: var(--brand); background: var(--brand-l9); border-color: var(--brand-l8); }
.t-unm { color: var(--info); background: #fff; border: 1px dashed #A8ADB6; }  /* 미측정·미입력 = 점선 */

/* ---- 요약 카드(KPI) ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line2); border-radius: var(--r); padding: 14px 16px; background: #fff; min-width: 0; }
.kpi .l { font-size: var(--fs-s); color: var(--t2); font-weight: 600; }
.kpi .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v small { font-size: 12px; font-weight: 400; color: var(--t3); margin-left: 2px; }
.kpi .s { font-size: var(--fs-s); color: var(--t3); }
.kpi.warn .v { color: var(--warn); } .kpi.bad .v { color: var(--bad); } .kpi.ok .v { color: var(--ok); }

/* ---- 할 일 목록(미판정 사유별 한 번) ---- */
.todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.todo li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border: 1px solid var(--warn-bd); background: var(--warn-bg); border-radius: var(--r); }
.todo .what { flex: 1 1 260px; min-width: 0; }
.todo .what b { font-weight: 600; }
.todo .what .small { display: block; color: var(--t2); }
.todo .cnt { font-weight: 700; color: var(--warn); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- 표: 무테, 아래 줄만 ---- */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--th-bg); color: var(--th-t); font-weight: 600; text-align: left; padding: 12px; border-bottom: 1px solid var(--line3); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--line3); vertical-align: middle; }
tbody tr:hover td { background: var(--brand-l9); }
.up { color: var(--bad); } .down { color: var(--ok); }

/* 펼침 표(③): 행 = details/summary. 표 칸 대신 grid 로 같은 열을 맞춘다 */
.rows { border-top: 1px solid var(--line3); }
.rows .hd, .rows summary { display: grid; grid-template-columns: 7em minmax(6em, 1fr) 9em 9em 8em 8.5em; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line3); }
.rows .hd { background: var(--th-bg); color: var(--th-t); font-weight: 600; }
.rows summary { cursor: pointer; list-style: none; }
.rows summary::-webkit-details-marker { display: none; }
.rows summary:hover { background: var(--brand-l9); }
.rows summary .code::before { content: "▸ "; color: var(--t3); }
.rows details[open] summary .code::before { content: "▾ "; }
.rows details[open] summary { background: var(--brand-l9); }
.rows .lines { padding: 8px 12px 16px 2.5em; border-bottom: 1px solid var(--line3); background: #FAFBFC; }
.rows .lines table td { padding: 8px 12px; }
.rows .lines tr:hover td { background: transparent; }
.cell-label { display: none; color: var(--t3); font-size: var(--fs-s); }

/* ---- 폼 ---- */
.inp { height: var(--btn-h); border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; background: #fff; color: var(--t1); min-width: 0; width: 100%; }
.inp.n { text-align: right; font-variant-numeric: tabular-nums; }
.inp:focus { outline: 2px solid var(--brand-l5); border-color: var(--brand); }
.inp::placeholder { color: #A8ABB2; }

/* ② 월 입력값: 그룹별 상자 */
.vals .hd, .vals .vrow { display: grid; grid-template-columns: minmax(10em, 1.2fr) 11em minmax(8em, 1fr) minmax(8em, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line3); }
.vals .hd { color: var(--th-t); font-weight: 600; font-size: var(--fs-s); padding-top: 0; }
.vals .key { font-size: 12px; color: var(--t3); }
.vals .prev { color: var(--t2); }

/* ① 검침: 점포 카드 */
.meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.meter { background: #fff; border-radius: var(--r); padding: 16px; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 10px; }
.meter.s-undetermined { border-color: var(--bad-bd); }
.meter.s-needs_check { border-color: var(--warn-bd); }
.meter .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meter .top b { font-size: 15px; }
.meter dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; }
.meter dt { color: var(--t3); font-size: var(--fs-s); text-align: right; }
.meter dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter .inp { font-size: 18px; height: 40px; text-align: right; }
.meter .say { font-size: var(--fs); padding: 10px 12px; border-radius: var(--r); margin: 0; }
.meter .say.warn { background: var(--warn-bg); color: #6B3A02; }
.meter .say.bad { background: var(--bad-bg); color: #7A1616; }
.meter form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.meter details form { margin-top: 8px; }
.meter details label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); color: var(--t2); }

/* ---- 좁은 화면(휴대폰 390): 사이드바 → 위쪽 가로 메뉴, 표 → 카드 ---- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side { display: flex; overflow-x: auto; padding: 0; position: sticky; top: var(--head-h); z-index: 9; }
  .side a { height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; flex: none; }
  .main { padding: 12px; }
  .head { padding: 0 10px; gap: 8px; }
  .who .name { display: none; }
  .monthpick label { display: none; }
  .monthpick input { width: 8.6em; font-size: 16px; }
  .rows .hd { display: none; }
  .rows summary { grid-template-columns: 1fr auto; grid-template-areas: "code total" "trade st"; row-gap: 2px; }
  .rows summary .code { grid-area: code; font-weight: 600; }
  .rows summary .c-total { grid-area: total; font-weight: 600; }
  .rows summary .c-trade { grid-area: trade; color: var(--t2); }
  .rows summary .c-st { grid-area: st; text-align: right; }
  .rows summary .c-prev, .rows summary .c-delta { display: none; }
  .rows .lines { padding-left: 12px; }
  .vals .hd { display: none; }
  .vals .vrow { grid-template-columns: 1fr 1fr; }
  .vals .vrow .lab { grid-column: 1 / -1; }
  .meters { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .print-tbl thead { display: none; }
  .print-tbl tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--line3); }
  .print-tbl td { border: 0; padding: 4px 8px; }
  .cell-label { display: inline; }
}

.shell.solo { grid-template-columns: 1fr; }
.error { color: var(--bad); }
@media (max-width: 860px) {
  .vals .vrow > span:last-child { grid-column: 1 / -1; }
}
.rows .lines td:first-child { white-space: nowrap; }
.rows .lines td.n { white-space: normal; }
@media (max-width: 860px) {
  .head { position: static; height: auto; flex-wrap: wrap; padding: 8px 10px; row-gap: 8px; }
  .head .sp { display: none; }
  .logo { flex: 1; }
  .monthpick { order: 3; width: 100%; }
  .monthpick input { flex: 1; width: auto; }
  .side { top: 0; }
  .side a { flex: 1 0 auto; justify-content: center; padding: 0 8px; font-size: 15px; }
}

/* 층·호 격자(에이앤비 민원접수 화면의 동·층·호 고르기) */
.floors { display: flex; flex-direction: column; gap: 6px; }
.floor { display: flex; gap: 10px; align-items: flex-start; }
.floor .fl { flex: none; width: 3.5em; color: var(--t2); font-weight: 600; padding-top: 4px; }
.floor .hos { display: flex; flex-wrap: wrap; gap: 6px; }
.floor .hos a { height: 34px; padding: 0 10px; font-size: 15px; text-decoration: none; }
.meter:target, details:target > summary { outline: 3px solid var(--brand-l5); }
@media (max-width: 860px) {
  .side a { height: 48px; }
}

/* ---- 업무 순환 링 (에이앤비 BILLCOST 첫 화면 구조: 입주 → 검침 → 부과 → 고지서 → 수납) ---- */
.ring { --size: 420px; --band: 92px; position: relative; width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff calc(100% - var(--band)), var(--brand-l9) calc(100% - var(--band)) 99.5%, transparent 100%);
  box-shadow: inset 0 0 0 1px var(--brand-l8); }
.ring::after { content: ""; position: absolute; inset: var(--band); border-radius: 50%; box-shadow: 0 0 0 1px var(--brand-l8), 0 4px 16px rgba(31,111,214,.10); pointer-events: none; }
.ring .node { --r: calc(var(--size) / 2 - var(--band) / 2); position: absolute; left: 50%; top: 50%; transform-origin: 0 0;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(0, calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-l5); color: var(--t1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; font: inherit; z-index: 1; padding: 0; }
.ring .node span { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ring .node:hover { border-color: var(--brand); }
.ring .node.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(31,111,214,.35); }
.ring .node.soon { border-style: dashed; border-color: var(--line); color: var(--t3); background: #F5F6F8; }
.ring .node.soon.on { background: #8C929C; border-color: #8C929C; color: #fff; }
.ring .core { position: absolute; inset: var(--band); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; gap: 6px; }
.ring .core .big { font-size: 22px; font-weight: 700; }
.ring .core p { margin: 0; color: var(--t2); font-size: var(--fs-s); max-width: 210px; }
.ring .say { display: none; } .ring .say.on { display: block; }
.ring .arrows { display: flex; gap: 8px; margin-top: 8px; }
.ring .arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--brand-l5); background: #fff; color: var(--brand); font-size: 20px; cursor: pointer; }
.ring .arrows button:hover { background: var(--brand-l9); }


/* 탭 */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 18px; color: var(--t2); text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; margin-bottom: -1px; }
.tabs a.on { background: #fff; border-color: var(--line); color: var(--brand); font-weight: 600; }
.side .soon { display: flex; flex-direction: column; justify-content: center; height: 48px; padding: 0 20px; color: #5E6878; font-size: 14px; cursor: default; }
.side .cfg { border-top: 1px solid var(--side-sep); margin-top: 8px; }
.side .home { border-bottom: 1px solid var(--side-sep); margin-bottom: 4px; }
.tenant-tbl tfoot td { background: var(--brand-l9); font-weight: 600; }

@media (max-width: 860px) {
  .ring { --size: 340px; --band: 72px; margin: 0 auto; }
  .ring .core > p { display: none; }
  .ring .node { width: 64px; height: 64px; }
  .ring .node span { font-size: 13px; }
  .ring .core .big { font-size: 18px; }
  .side .soon { height: 48px; padding: 0 8px; flex: 1 0 auto; justify-content: center; white-space: nowrap; }
  .side .cfg, .side .home { border: 0; margin: 0; }
}

/* ① 입주: 점포 카드 폼 */
.cards2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 0; align-items: end; }
.fgrid > label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); color: var(--t2); }
.fgrid .wide { grid-column: 1 / -1; margin: 0; }
details > summary.btn { list-style: none; margin-top: 8px; }
details > summary.btn::-webkit-details-marker { display: none; }
@media (max-width: 860px) { .cards2 { grid-template-columns: 1fr; } }

/* 메뉴 트리(에이앤비): 대메뉴 굵게·누르지 않음, 하위 화면만 링크 */
.side .grp { display: block; padding: 14px 20px 4px; color: #fff; font-size: 14px; font-weight: 700; }
.side a:not(.home):not(.cfg), .side .soon { height: 34px; padding-left: 32px; font-size: 13px; }
.side .soon { color: #5E6878; }

/* 첫 화면: 지금 할 일 상자 하나 + 단계 표 하나 */
.now { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 2px solid var(--brand); background: var(--brand-l9); padding: 16px 18px; }
.now p { margin: 0; flex: 1 1 280px; font-size: 16px; }
.now .lab { color: var(--brand); font-weight: 700; margin-right: 4px; }
.steps td.c { text-align: center; width: 4em; color: var(--ok); font-weight: 700; }
.steps tr[data-href] { cursor: pointer; }
.steps tr.on td { background: var(--brand-l9); font-weight: 600; }
.steps tr.soon td { color: var(--t3); background: #F5F6F8; }
@media (max-width: 860px) {
  .side .grp { display: none; }
  .side a:not(.home):not(.cfg), .side .soon { height: 44px; padding: 0 12px; font-size: 14px; }
  .now p { font-size: 16px; }
  .now .btn { width: 100%; }
}

/* ---- 로그인: 화면 전체 폭·높이(본문 폭 규칙 예외, 사이드바 없음) ----
 * 왼쪽 55% 제목 + 한 줄 설명 + 링 · 오른쪽 45% 로그인 상자, 세로 가운데. 은은한 대표색 그라데이션 한 면.
 * 900 아래: 제목 → 로그인 상자 → 링 한 줄. 480 아래(휴대폰): 링 숨김. */
.main.full { max-width: none; padding: 0; }
body:has(.loginpage) { display: flex; flex-direction: column; min-height: 100vh; }  /* 머리줄 높이가 휴대폰에서 달라도 판이 바닥까지 */
body:has(.loginpage) .shell { flex: 1; min-height: 0; grid-template-rows: 1fr; }
.loginpage { flex: 1; display: grid; grid-template-columns: 55fr 45fr; align-items: center; gap: 48px;
  padding: 48px max(64px, calc((100% - 1152px) / 2));  /* 배경은 끝까지, 두 칸은 가운데 1152 안에 모은다(1920에서 벌어지지 않게) */
  background: linear-gradient(135deg, var(--brand-l9) 0%, #fff 55%, var(--brand-l9) 100%); }
.loginpage .intro { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.loginpage .intro h1 { font-size: 36px; line-height: 1.2; }
.loginpage .intro > p { margin: 0 0 16px; color: var(--t2); font-size: 16px; }
.loginpage .ring { --size: 480px; --band: 104px; }
.loginpage .ring .node { width: 88px; height: 88px; }
.loginpage .ring .node span { font-size: 16px; }
.loginpage .login { justify-self: center; width: 100%; max-width: 384px; padding: 32px; border: 1px solid var(--line2); box-shadow: 0 10px 24px rgba(31,111,214,.12); }
.loginpage .login h2 { font-size: 20px; margin: 0 0 24px; }
.loginpage .login p { margin: 0 0 16px; }
.loginpage .login label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.loginpage .login input:not([type=hidden]) { height: 48px; width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; font-size: 16px; font-weight: 400; }
.loginpage .login input:focus { outline: 2px solid var(--brand-l5); border-color: var(--brand); }
.loginpage .login .btn.pri { width: 100%; height: 48px; font-size: 16px; margin-top: 8px; }
@media (max-width: 900px) {
  .loginpage { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 24px; padding: 32px 16px; }
  .loginpage .intro { display: contents; }  /* 제목·설명·링을 바깥 줄에 풀어 로그인 상자를 사이에 끼운다 */
  .loginpage .intro h1, .loginpage .intro > p { order: -2; margin: 0; }
  .loginpage .intro h1 { font-size: 30px; }
  .loginpage .login { order: -1; }
  .loginpage .ring { --size: 360px; --band: 80px; }
  .loginpage .ring .node { width: 72px; height: 72px; }
}
@media (max-width: 480px) {
  .loginpage .ring { display: none; }
  .loginpage .login { padding: 24px 16px; }
}