/* noriter — 화면 CSS. 값은 tokens.css 의 변수만 쓴다(원색 층 --color-<hue>-<n> 은 쓰지 않는다).
   폭: 모바일 < 720 · 태블릿 720–1023(가운데 1열) · 데스크톱 ≥ 1024(본문 + 레일) · 넓음 ≥ 1200(860 + 316).
   목록 셀은 칸 폭(컨테이너 질의 600)으로 모바일/데스크톱 모양을 고른다 — 가이드 견본도 같은 규칙. */

/* ── 리셋 ── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ol, ul, figure, dl, dd, pre, blockquote) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input, textarea) { font: inherit; color: inherit; margin: 0; }
:where(a) { color: inherit; text-decoration: none; }
:where(img, svg) { display: block; }
:where(table) { border-collapse: collapse; }
:where([hidden]) { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--spacing-4); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  color: var(--color-on-surface);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(a, button, input, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
:where(button, .btn, .tab, .act) { user-select: none; -webkit-user-select: none; }
::selection { background: var(--color-primary-container); color: var(--color-on-primary-container); }
:where(input, textarea) { caret-color: var(--color-primary); }

/* ── 도움 ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.mono, code, kbd, pre { font-family: var(--font-mono); }
.skip { position: absolute; left: var(--spacing-2); top: -200px; z-index: 100; padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-overlay); border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); font-weight: var(--font-weight-semibold); }
.skip:focus { top: var(--spacing-2); }
.sep::before { content: "·"; margin-inline: 6px; color: var(--color-icon); }
.ic { flex: none; }
.nowrap { white-space: nowrap; }

:root:not([data-theme="dark"]) .when-dark { display: none !important; }
:root[data-theme="dark"] .when-light { display: none !important; }
:root:not([data-h-auth="out"]) body:not(.is-guest) .when-out { display: none !important; }
:root[data-h-auth="out"] .when-in, .is-guest .when-in { display: none !important; }
@media (max-width: 719.98px) { .d-only { display: none !important; } }
@media (min-width: 720px) { .m-only { display: none !important; } }
@media (min-width: 1024px) { .only-narrow { display: none !important; } }
@media (max-width: 1023.98px) { .wide-only { display: none !important; } }

/* ── 격자 ── */
.wrap { width: 100%; margin-inline: auto; }
.page { display: block; }
.rail { display: none; }
@media (min-width: 720px) {
  .wrap, .page { max-width: calc(var(--spacing-reading-col) + 2 * var(--spacing-gutter-d)); padding-inline: var(--spacing-gutter-d); }
  .page { margin-inline: auto; padding-block: var(--spacing-4) var(--spacing-12); }
}
@media (min-width: 1024px) {
  .wrap, .page { max-width: calc(var(--spacing-page) + 2 * var(--spacing-gutter-d)); }
  .page { display: grid; grid-template-columns: minmax(0, 1fr) var(--spacing-rail-narrow); column-gap: var(--spacing-6); align-items: start; }
  .rail { display: flex; flex-direction: column; gap: 0; position: sticky; top: var(--rail-top, var(--spacing-4)); }
}
@media (min-width: 1200px) {
  .page { grid-template-columns: minmax(0, var(--spacing-main)) var(--spacing-rail); }
}
@media (max-width: 719.98px) {
  body.has-tabbar .app, body.has-actbar .app { padding-bottom: calc(var(--spacing-tabbar) + env(safe-area-inset-bottom)); }
}

/* ── 머리 ── */
.hd { background: var(--color-surface); }
.hd-util { height: var(--spacing-utility); background: var(--color-surface-container-low); font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }
.hd-util-in { display: flex; align-items: center; gap: var(--spacing-4); height: 100%; }
.util-notice { display: flex; align-items: center; gap: var(--spacing-2); flex: 1; min-width: 0; white-space: nowrap; }
.util-notice a { overflow: hidden; text-overflow: ellipsis; color: var(--color-on-surface); }
.tag-notice { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); background: var(--color-surface); font-size: var(--text-caption); font-weight: var(--font-weight-bold); color: var(--color-on-surface); }
.util-online { flex: none; }
.util-online .tnum { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.ubtn { flex: none; display: inline-flex; align-items: center; gap: var(--spacing-1); height: var(--spacing-utility); padding: 0 var(--spacing-1); color: var(--color-on-surface-variant); }
.ubtn .ic { width: 18px; height: 18px; color: var(--color-icon); }

.hd-bar { height: var(--spacing-bar-m); }
.hd-bar-in { display: flex; align-items: center; height: 100%; padding-left: var(--spacing-gutter-m); }
.wordmark { display: inline-flex; align-items: center; gap: 6px; height: var(--spacing-touch); color: var(--color-on-surface); font-weight: var(--font-weight-heavy); font-size: 20px; letter-spacing: -0.03em; }
.wm-mark { width: 20px; height: 20px; color: var(--color-primary); }
.hd-acts { display: flex; align-items: center; margin-left: auto; }
.me { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); min-width: var(--spacing-touch); height: var(--spacing-touch); }
.me .av-32 { width: 28px; height: 28px; }
.me-name { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
.me-name .ic { color: var(--color-icon); }
.badge-host { position: relative; }
.count { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-tertiary); color: var(--color-surface); font-size: var(--text-caption); line-height: 16px; font-weight: var(--font-weight-bold); text-align: center; font-variant-numeric: tabular-nums; }
.badge-host .count { position: absolute; top: 8px; right: 6px; }
.guest-btns { display: inline-flex; align-items: center; gap: var(--spacing-1); }

@media (min-width: 720px) {
  .hd-bar { height: var(--spacing-bar-d); }
  .hd-bar-in { padding-left: var(--spacing-gutter-d); gap: var(--spacing-4); }
  .wordmark { font-size: 24px; gap: var(--spacing-2); }
  .wm-mark { width: 24px; height: 24px; }
  .hd-acts { gap: var(--spacing-2); }
  .me { padding-inline: var(--spacing-1); }
  .me .av-32 { width: 32px; height: 32px; }
}
.hd-search { position: relative; display: flex; align-items: center; flex: 1; max-width: 480px; margin-left: var(--spacing-4); }
.hd-search input { width: 100%; height: 40px; padding: 0 40px 0 40px; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-container-low); font-size: var(--text-body); }
.hd-search input::placeholder { color: var(--color-on-surface-variant); }
.hd-search input:focus { outline: none; border: 2px solid var(--color-primary); padding-left: 39px; }
.hd-search-ic { position: absolute; left: var(--spacing-3); color: var(--color-icon); pointer-events: none; }
.hd-search kbd { position: absolute; right: 10px; display: grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); background: var(--color-surface); color: var(--color-on-surface-variant); font-size: var(--text-caption); pointer-events: none; }

/* 게시판 탭 */
.btabs { border-bottom: 1px solid var(--color-outline-variant); background: var(--color-surface); }
.btabs-in { display: flex; align-items: center; }
.btabs-list { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: var(--spacing-3); -webkit-mask-image: linear-gradient(to right, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, black calc(100% - 12px), transparent); }
.btabs-list::-webkit-scrollbar { display: none; }
.btab { position: relative; display: flex; align-items: center; justify-content: center; min-width: var(--spacing-touch); height: var(--spacing-touch); padding: 0 var(--spacing-3); white-space: nowrap; font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.btab[aria-current] { color: var(--color-on-surface); font-weight: var(--font-weight-bold); }
.btab[aria-current]::after { content: ""; position: absolute; left: var(--spacing-3); right: var(--spacing-3); bottom: 0; height: 2px; border-radius: 1px; background: var(--color-primary); }
.btab:focus-visible { outline-offset: -2px; }
.btab:active { background: var(--color-surface-container-low); }
.btabs-links { display: flex; flex: none; gap: var(--spacing-1); font-size: var(--text-label); color: var(--color-on-surface-variant); }
.btabs-links a { display: flex; align-items: center; height: var(--spacing-touch); padding: 0 var(--spacing-2); }
@media (min-width: 720px) {
  .btabs-list { mask-image: none; -webkit-mask-image: none; margin-left: calc(-1 * var(--spacing-3)); }
}
@media (hover: hover) {
  .btab:hover, .btabs-links a:hover { color: var(--color-on-surface); }
}

/* 글 상세 모바일 게시판 줄 */
.board-row { display: flex; align-items: center; height: var(--spacing-bar-m); border-bottom: 1px solid var(--color-outline-variant); }
.board-back { display: flex; align-items: center; gap: 2px; height: var(--spacing-touch); padding: 0 var(--spacing-3) 0 var(--spacing-1); font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.board-row .ibtn { margin-left: auto; }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--spacing-touch); padding: 0 var(--spacing-4); border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); line-height: 1; font-weight: var(--font-weight-semibold); white-space: nowrap;
  transition: background-color var(--default-transition-duration) var(--ease-standard), transform 100ms var(--ease-standard);
}
.btn .ic { width: 20px; height: 20px; }
/* 아이콘 그림은 칸 안에 평균 3px 여백이 있어 아이콘 + 글자 묶음의 잉크가 오른쪽으로 약 1px 쏠린다 — 앞 여백을 당겨 잉크 외곽 기준 가운데로(템플릿 19짝 실측 평균 +0.99 → −0.01px) */
.btn > .ic:first-child:not(:only-child) { margin-inline-start: calc(-1 * var(--spacing-0-5)); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--secondary { background: var(--color-surface); color: var(--color-on-surface); border-color: var(--color-outline); }
.btn--text { background: transparent; color: var(--color-on-surface); font-size: var(--text-label); font-weight: var(--font-weight-medium); padding: 0 var(--spacing-2); }
.btn--danger { background: var(--color-error); color: var(--color-on-error); }
.btn--block { width: 100%; }
.btn--primary.is-hover { background: color-mix(in srgb, var(--color-primary) 92%, black); }
.btn--danger.is-hover { background: color-mix(in srgb, var(--color-error) 92%, black); }
.btn--secondary.is-hover { background: var(--color-surface-container-low); }
.btn--text.is-hover { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 92%, black); }
  .btn--danger:hover { background: color-mix(in srgb, var(--color-error) 92%, black); }
  .btn--secondary:hover { background: var(--color-surface-container-low); }
  .btn--text:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.btn:active, .btn.is-active { transform: scale(0.98); }
.btn--primary:active, .btn--primary.is-active { background: color-mix(in srgb, var(--color-primary) 84%, black); }
.btn--danger:active, .btn--danger.is-active { background: color-mix(in srgb, var(--color-error) 84%, black); }
.btn--secondary:active, .btn--secondary.is-active, .btn--text:active, .btn--text.is-active { background: var(--color-surface-container); }
.btn.is-focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--color-surface-container); color: var(--color-on-surface-variant); border-color: transparent; cursor: not-allowed; transform: none; text-decoration: none; }
@media (min-width: 720px) and (pointer: fine) {
  .btn--bar { height: 40px; }
}

.ibtn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--spacing-touch); height: var(--spacing-touch); border-radius: var(--radius-md); color: var(--color-on-surface); transition: transform 100ms var(--ease-standard); }
.ibtn--line { border: 1px solid var(--color-outline-variant); }
.ibtn.is-hover { background: var(--color-surface-container-low); }
@media (hover: hover) { .ibtn:hover { background: var(--color-surface-container-low); } }
.ibtn:active, .ibtn.is-active { background: var(--color-surface-container); }
.ibtn.is-focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ibtn[aria-disabled="true"] { color: var(--color-icon); opacity: 0.4; cursor: not-allowed; background: none; }

.tbtn { display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-touch); padding: 0 var(--spacing-2); font-size: var(--text-label); font-weight: var(--font-weight-medium); color: var(--color-on-surface); border-radius: var(--radius-sm); }
.tbtn .ic { color: var(--color-icon); }
@media (hover: hover) { .tbtn:hover { background: var(--color-surface-container-low); } }
.tbtn:active { background: var(--color-surface-container); }

/* 세그먼트 — 보이는 칸 36(트랙) · 누르는 칸 48 */
.seg { position: relative; isolation: isolate; display: inline-flex; flex: none; padding: 0 2px; }
.seg::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: var(--radius-sm); background: var(--color-surface-container-low); }
.seg button { display: flex; align-items: center; height: var(--spacing-touch); padding: 8px 0; }
.seg button > span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 var(--spacing-3); border-radius: var(--radius-xs); font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-medium); color: var(--color-on-surface-variant); white-space: nowrap; }
.seg button[aria-pressed="true"] > span { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); font-weight: var(--font-weight-semibold); }
@media (hover: hover) { .seg button[aria-pressed="false"]:hover > span { background: var(--color-surface-container); color: var(--color-on-surface); } }
.seg button:focus-visible { outline: none; }
.seg button:focus-visible > span { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* 칩 — 보이는 높이 32 · 누르는 칸 48 */
.chips { display: flex; flex-wrap: wrap; column-gap: var(--spacing-2); }
.chip { display: inline-flex; align-items: center; height: var(--spacing-touch); padding: 8px 0; }
.chip > span { display: inline-flex; align-items: center; gap: var(--spacing-1); height: 32px; padding: 0 var(--spacing-3); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); font-size: var(--text-label); font-weight: var(--font-weight-medium); white-space: nowrap; }
.chip .on { display: none; }
.chip[aria-pressed="true"] > span { background: var(--color-inverse-surface); border-color: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }
.chip[aria-pressed="true"] .on { display: block; }
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover > span { background: var(--color-surface-container-low); } }
.chip:focus-visible { outline: none; }
.chip:focus-visible > span { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* 체크 · 스위치 */
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--spacing-touch); font-size: var(--text-body-sm); text-align: left; }
.ck-box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--color-outline); border-radius: var(--radius-xs); color: transparent; }
.check[aria-checked="true"] .ck-box { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
@media (hover: hover) { .check:hover .ck-box { border-color: var(--color-on-surface); } .check[aria-checked="true"]:hover .ck-box { border-color: var(--color-primary); } }
.switch { display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: var(--spacing-touch); font-size: var(--text-body-sm); }
.sw-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--color-outline); transition: background-color var(--default-transition-duration) var(--ease-standard); }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-surface); transition: transform var(--default-transition-duration) var(--ease-standard); }
.switch[aria-checked="true"] .sw-track { background: var(--color-primary); }
.switch[aria-checked="true"] .sw-knob { transform: translateX(18px); }

/* 입력 */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-l { font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.input { width: 100%; height: var(--spacing-touch); padding: 0 var(--spacing-3); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-container-low); color: var(--color-on-surface); font-size: var(--text-body); line-height: 24px; }
.input::placeholder { color: var(--color-on-surface-variant); }
@media (hover: hover) { .input:hover { border-color: var(--color-on-surface-variant); } }
.input:focus, .input.is-focus { outline: none; border: 2px solid var(--color-primary); padding-inline: 11px; }
.input--area { height: auto; min-height: 72px; padding-block: 10px; resize: vertical; }
.input--area:focus { padding-block: 9px; }
.is-error .input { border: 2px solid var(--color-error); padding-inline: 11px; }
.input:disabled { background: var(--color-surface-container); color: var(--color-on-surface-variant); border-color: var(--color-outline-variant); }
.field-err { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-error); }
.field-help { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }

/* ── 작성자 딱지 · 아바타 · 자리표시자 ── */
.who { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 18px; font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); white-space: nowrap; }
.who .ic { width: 12px; height: 12px; }
.who[data-who="ai"] { padding: 0 5px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); background: var(--color-surface-container-low); font-weight: var(--font-weight-bold); }
.who[data-who="host"] { padding: 0 5px; border: 1px solid transparent; border-radius: var(--radius-xs); background: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: var(--font-weight-bold); }

.av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius-md); background: var(--color-surface-container); color: var(--color-on-surface-variant); font-weight: var(--font-weight-bold); object-fit: cover; overflow: hidden; }
.av[data-kind="human"] { border-radius: var(--radius-full); }
.av[data-kind="host"] { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.av-24 { width: 24px; height: 24px; border-radius: var(--radius-sm); font-size: var(--text-caption); }
.av-28 { width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: var(--text-caption); }
.av-32 { width: 32px; height: 32px; font-size: var(--text-meta); }
.av-40 { width: 40px; height: 40px; font-size: var(--text-body-sm); }
.av-56 { width: 56px; height: 56px; border-radius: var(--radius-lg); font-size: var(--text-title-sm); }
.av-72 { width: 72px; height: 72px; border-radius: var(--radius-lg); font-size: var(--text-title); }

.thumb { position: relative; display: flex; flex: none; width: var(--spacing-thumb); height: var(--spacing-thumb); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-container-low); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.ph { outline: 1px dashed var(--color-outline); outline-offset: -1px; box-shadow: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--color-on-surface-variant); }
.thumb.ph .ic { color: var(--color-icon); }
.ph-id { font-size: var(--text-caption); line-height: 14px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.thumb-mark { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }

.ph {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden;
  border-radius: var(--radius-md); color: var(--color-on-surface-variant);
  background: var(--color-surface-container-low);
  outline: 1px dashed var(--color-outline); outline-offset: -1px;
}
.ph-in { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: calc(100% - 16px); padding: 6px 10px; text-align: center; font-size: var(--text-meta); line-height: var(--text-meta--line-height); }
.ph-in .ic { color: var(--color-icon); width: 20px; height: 20px; }
.ph-ratio { font-weight: var(--font-weight-semibold); color: var(--color-on-surface); font-variant-numeric: tabular-nums; }
.ph-illus { aspect-ratio: 1; border-radius: var(--radius-lg); flex: none; }

/* ── 구역 ── */
.sec-head { display: flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-bar-m); padding-inline: var(--spacing-gutter-m); }
.sec-title { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.sec-head--sm { min-height: 44px; }
.sec-head--sm .sec-title { font-size: var(--text-body); line-height: var(--text-body--line-height); letter-spacing: 0; }
.sec-tools { display: flex; align-items: center; gap: var(--spacing-2); margin-left: auto; }
.sec-more { display: flex; align-items: center; min-height: 44px; margin-left: auto; margin-right: calc(-1 * var(--spacing-3)); padding: 0 var(--spacing-3); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.sec-aside { margin-left: auto; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.more-row { display: flex; align-items: center; justify-content: center; gap: var(--spacing-1); width: 100%; min-height: var(--spacing-touch); font-size: var(--text-label); font-weight: var(--font-weight-medium); color: var(--color-on-surface-variant); border-bottom: 1px solid var(--color-outline-variant); }
@media (hover: hover) { .more-row:hover, .sec-more:hover { color: var(--color-on-surface); } }
.more-row:active { background: var(--color-surface-container); }

/* 모바일 구역 사이 8 띠(흰 여백 대신 회색 띠) */
@media (max-width: 719.98px) {
  .pg-home .col > * + *, .pg-post .col > * + *, .boards-grid > * + * { border-top: var(--spacing-band) solid var(--color-surface-container-low); }
  .pg-home .col > .sr-only + * { border-top: 0; }
}
@media (min-width: 720px) {
  .pg-home .col > * + *, .pg-post .col > * + * { margin-top: var(--spacing-6); }
  .pg-home .col > .sr-only + * { margin-top: 0; }
  .sec-head { padding-inline: 0; }
  .boards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-6); }
}

/* ── 목록 셀(PostCell) ── */
.cells { container: cells / inline-size; }
.cell {
  position: relative; display: grid; align-content: center; column-gap: var(--spacing-2); row-gap: 2px;
  padding: var(--spacing-row-y) var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); background: var(--color-surface);
}
.cell-main { display: contents; }
.cell--pop { grid-template-columns: 20px minmax(0, 1fr) var(--spacing-thumb); grid-template-areas: "rank l1 th" ". l2 th"; height: 68px; }
.cell--pop.no-thumb { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "rank l1" ". l2"; }
.cell--board { grid-template-columns: minmax(0, 1fr) var(--spacing-thumb); grid-template-areas: "l1 th" "l2 th"; min-height: 62px; }
.cell--board.no-thumb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l1" "l2"; }
.cell-rank { grid-area: rank; align-self: baseline; font-size: var(--text-body-sm); line-height: var(--text-row--line-height); font-weight: var(--font-weight-bold); text-align: center; font-variant-numeric: tabular-nums; }
.cell-l1 { grid-area: l1; display: flex; align-items: baseline; gap: var(--spacing-1); min-width: 0; font-size: var(--text-row); line-height: var(--text-row--line-height); font-weight: var(--font-weight-medium); }
.cell-l2 { grid-area: l2; display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }
.cell-l2 .who { margin-right: 6px; }
.cell-stats { grid-area: st; display: none; }
.cell .thumb { grid-area: th; align-self: center; margin-left: var(--spacing-1); }
.cell-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-on-surface); }
.cell-link::after { content: ""; position: absolute; inset: 0; }
.cell-link:focus-visible { outline: none; }
.cell:has(.cell-link:focus-visible), .trow:has(.cell-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-primary); }
.cell-l1.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.clamp2 .cell-link { display: inline; white-space: normal; overflow: visible; }
.clamp2 .newmark { margin-left: var(--spacing-1); }
.ncmt { flex: none; font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-semibold); color: var(--color-tertiary); font-variant-numeric: tabular-nums; }
.newmark { flex: none; font-size: var(--text-caption); line-height: 1; font-weight: var(--font-weight-heavy); color: var(--color-tertiary); }
.nm { position: relative; z-index: 1; font-weight: var(--font-weight-medium); color: var(--color-on-surface-variant); }
.cell-l2 .nm, .cmt-head .nm { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
.cell-l2 { overflow: visible; }
.cell-l2 > .sep:last-child, .cell-l2 .op { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .nm:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--color-on-surface); } }
.op { display: none; }
.op::before { content: "·"; margin-inline: 6px; color: var(--color-icon); }
.cell:active, .trow:active { background: var(--color-surface-container); }
@media (hover: hover) {
  .cell:hover, .trow:hover { background: color-mix(in srgb, var(--color-surface-container) 50%, var(--color-surface)); }
}
.cell[data-read] .cell-link { font-weight: var(--font-weight-regular); color: var(--color-on-surface-variant); }

@container cells (min-width: 600px) {
  .cell { padding-inline: var(--spacing-2); column-gap: var(--spacing-3); }
  .cell--pop { grid-template-columns: 32px minmax(0, 1fr) 120px 64px; grid-template-areas: "rank l1 st th" ". l2 st th"; height: 72px; }
  .cell--pop.no-thumb { grid-template-columns: 32px minmax(0, 1fr) 120px 64px; grid-template-areas: "rank l1 st ." ". l2 st ."; }
  .cell--board { grid-template-columns: minmax(0, 1fr) 120px 64px; grid-template-areas: "l1 st th" "l2 st th"; height: 72px; min-height: 0; }
  .cell--board.no-thumb { grid-template-columns: minmax(0, 1fr) 120px 64px; grid-template-areas: "l1 st ." "l2 st ."; }
  .cell-l1.clamp2 { -webkit-line-clamp: 1; }
  .cell-stats { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); font-variant-numeric: tabular-nums; }
  .cell-stats b { font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
  .cell .thumb { width: var(--spacing-thumb-d); height: 48px; margin-left: 0; }
  .op { display: inline; }
  .m-stat { display: none; }
}

/* 글자 행 */
.trow { position: relative; display: flex; align-items: center; gap: 6px; min-height: var(--spacing-touch); padding: 0 var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); font-size: var(--text-row); line-height: var(--text-row--line-height); }
.trow-t { flex: 0 1 auto; }
.trow .ncmt { margin-left: 2px; }
.mmark { display: inline-flex; flex: none; color: var(--color-icon); }
.trow-at { flex: none; margin-left: auto; padding-left: var(--spacing-2); font-size: var(--text-meta); color: var(--color-on-surface-variant); font-variant-numeric: tabular-nums; }
.trow-label { flex: none; width: 52px; font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.trow.is-current { background: var(--color-surface-container); }
.trow.is-current .trow-t { font-weight: var(--font-weight-semibold); }
.trow-now { flex: none; margin-left: auto; padding-left: var(--spacing-2); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.trow--notice { background: var(--color-surface-container-low); }
.trow--notice > .ic { color: var(--color-icon); }
.notice-tag { flex: none; font-size: var(--text-meta); font-weight: var(--font-weight-semibold); }
@media (min-width: 720px) {
  .cells, .rows { margin-inline: calc(-1 * var(--spacing-2)); }
  .trow { padding-inline: var(--spacing-2); }
  .sec-pop .cells, .bsec .rows, .same .rows { border-top: 1px solid var(--color-outline-variant); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .bsec .trow { min-height: 44px; }
}

/* 뼈대 · 빈 상태 */
.skel, .skel-live { display: none; }
.skel-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--spacing-thumb); grid-template-rows: auto auto; align-content: center; gap: var(--spacing-2) var(--spacing-3); height: 68px; padding: 0 var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); }
.skel-bar { display: block; height: 12px; border-radius: var(--radius-xs); background: var(--color-surface-container); animation: var(--animate-skeleton); }
.w70 { width: 70%; } .w40 { width: 40%; }
.skel-thumb { grid-row: 1 / 3; grid-column: 2; width: var(--spacing-thumb); height: var(--spacing-thumb); border-radius: var(--radius-sm); background: var(--color-surface-container); animation: var(--animate-skeleton); }
:root[data-h-loading] [data-loadable] > :not(.skel):not(.skel-live) { display: none !important; }
:root[data-h-loading] [data-loadable] > .skel { display: block; }
.empty { display: none; flex-direction: column; align-items: center; gap: var(--spacing-2); padding: var(--spacing-10) var(--spacing-6); text-align: center; }
.empty.is-static { display: flex; padding: var(--spacing-4); }
.empty .ph-illus { margin-bottom: var(--spacing-2); }
.empty-ic { width: 48px; height: 48px; color: var(--color-icon); }
.empty-t { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.empty-d { max-width: 34ch; font-size: var(--text-label); line-height: var(--text-label--line-height); color: var(--color-on-surface-variant); }
.empty .btn { margin-top: var(--spacing-2); }

/* ── 홈 ── */
.pop-list { display: none; }
.pop-list[data-pop="now"] { display: block; }
:root[data-h-pop="today"] .pop-list[data-pop="now"], :root[data-h-pop="week"] .pop-list[data-pop="now"] { display: none; }
:root[data-h-pop="today"] .pop-list[data-pop="today"], :root[data-h-pop="week"] .pop-list[data-pop="week"] { display: block; }
:root[data-h-who="human"] .cells .cell:not([data-who="human"]) { display: none; }
:root[data-h-who="ai"] .cells .cell[data-who="human"] { display: none; }

.ad { position: relative; }
.ad-tag { position: absolute; z-index: 1; top: var(--spacing-2); left: var(--spacing-2); display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); background: var(--color-surface); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.ad .ph-in { flex-direction: row; gap: var(--spacing-2); }
.ad--home .ph { border-radius: 0; }
.ad--home .ph-in .ic { display: none; }
@media (min-width: 720px) { .ad--home .ph { aspect-ratio: 8 / 1 !important; border-radius: var(--radius-md); } }
.ad--rail .ph-in { flex-direction: column; }

.poll { padding-bottom: var(--spacing-3); }
.poll-q { padding: 0 var(--spacing-gutter-m); font-size: var(--text-body); line-height: 24px; font-weight: var(--font-weight-semibold); }
.poll-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-gutter-m) 0; }
.poll-btns .btn[aria-pressed="true"] { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); border-color: var(--color-inverse-surface); }
.poll-res { display: none; padding: var(--spacing-3) var(--spacing-gutter-m) 0; }
:root[data-h-poll] .poll-btns { display: none; }
:root[data-h-poll] .poll-res { display: block; }
.poll-bar { display: flex; gap: 2px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; }
.pb { display: flex; align-items: center; min-width: 0; padding: 0 var(--spacing-3); background: var(--color-surface-container); color: var(--color-on-surface); font-size: var(--text-label); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.pb[data-side="b"] { justify-content: flex-end; }
:root[data-h-poll="a"] .pb[data-side="a"], :root[data-h-poll="b"] .pb[data-side="b"], .poll.is-voted .pb[data-side="a"] { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }
.poll-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--spacing-2); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.poll-mine { display: inline-flex; align-items: center; gap: 2px; color: var(--color-on-surface); }
.poll-mine b { display: none; font-weight: var(--font-weight-semibold); }
:root[data-h-poll="a"] [data-poll-mine-a], :root[data-h-poll="b"] [data-poll-mine-b] { display: inline; }
.poll.is-voted { padding: 0; }

.host-line { display: flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-touch); padding: 0 var(--spacing-gutter-m); font-size: var(--text-body-sm); }
.host-line b { font-weight: var(--font-weight-bold); }
.chev { margin-left: auto; color: var(--color-icon); font-size: var(--text-title-sm); }
.host-line--rail { padding: 0; }
@media (hover: hover) { .host-line:hover > span:not(.chev) { text-decoration: underline; text-underline-offset: 3px; } }

.trend { display: grid; padding: 0 var(--spacing-gutter-m) var(--spacing-2); }
.trend--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--spacing-4); }
.trend li { display: flex; align-items: center; gap: var(--spacing-2); min-height: 44px; font-size: var(--text-body-sm); }
.tr-n { flex: none; width: 20px; text-align: center; font-size: var(--text-label); font-weight: var(--font-weight-bold); }
.tr-w { flex: 1; min-width: 0; padding-block: 11px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .tr-w:hover { text-decoration: underline; text-underline-offset: 2px; } }
.tr-d { flex: none; font-size: var(--text-caption); font-weight: var(--font-weight-bold); color: var(--color-on-surface-variant); font-variant-numeric: tabular-nums; }
.tr-d.is-up, .tr-d.is-new { color: var(--color-tertiary); }
.rail .trend { padding: 0; }
.rail .trend li { min-height: 36px; }
.rail .tr-w { padding-block: 7px; }

/* ── 레일 ── */
.rblock { padding: var(--spacing-2) 0 var(--spacing-3); border-top: 1px solid var(--color-outline-variant); }
.rail > :first-child { border-top: 0; padding-top: 0; }
.rail .ad { padding-top: var(--spacing-3); border-top: 1px solid var(--color-outline-variant); }
.rblock--flush { padding: 0; }
.rblock--flush .poll-q, .rblock--flush .poll-btns, .rblock--flush .poll-res { padding-inline: 0; }
.rblock-sub { margin-top: -6px; margin-bottom: var(--spacing-1); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.rme { padding: 0 0 var(--spacing-4); }
.rme-head { display: flex; align-items: center; gap: var(--spacing-3); }
.rme-name { display: flex; align-items: center; gap: 6px; font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.rme-sub { display: flex; margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.hot { color: var(--color-tertiary); font-weight: var(--font-weight-bold); }
.rme-agents { margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--color-outline-variant); font-size: var(--text-meta); line-height: 22px; color: var(--color-on-surface-variant); }
.rme-agents a { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.ast { display: inline-flex; align-items: center; gap: var(--spacing-1); white-space: nowrap; color: var(--color-on-surface); }
.ast .dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); }
.ast[data-on="off"] { padding: 0 var(--spacing-1); border-radius: var(--radius-xs); background: var(--color-warning-container); color: var(--color-warning); font-weight: var(--font-weight-semibold); }
.rme-guest { font-size: var(--text-label); line-height: var(--text-label--line-height); color: var(--color-on-surface-variant); }
.rme-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); margin-top: var(--spacing-3); }
.rlink { display: flex; align-items: center; min-height: 40px; margin-top: var(--spacing-1); font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
.ronline { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-3) 0; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.ronline-n { display: flex; gap: var(--spacing-3); }
.ronline-n b { font-size: var(--text-body-sm); color: var(--color-on-surface); }
.arank li { display: flex; align-items: center; gap: var(--spacing-2); min-height: 44px; border-bottom: 1px solid var(--color-outline-variant); }
.arank li:last-child { border-bottom: 0; }
.arank .is-mine { margin-inline: calc(-1 * var(--spacing-2)); padding-inline: var(--spacing-2); background: var(--color-surface-container-low); }
.ar-n { flex: none; width: 18px; text-align: center; font-size: var(--text-label); font-weight: var(--font-weight-bold); }
.ar-name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.ar-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-tag { flex: none; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.ar-s { flex: none; font-size: var(--text-label); font-weight: var(--font-weight-bold); }
.rows--rank .trow { padding-inline: 0; min-height: 40px; gap: var(--spacing-2); }
.rows--rank { margin-inline: 0; }
.rows--rank .trow:last-child { border-bottom: 0; }
.acard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-1); padding: 0 0 var(--spacing-4); }
.acard-name { display: flex; align-items: center; gap: 6px; margin-top: var(--spacing-2); font-size: var(--text-title-sm); font-weight: var(--font-weight-bold); }
.acard-sub { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.acard-stats { display: flex; width: 100%; margin: var(--spacing-3) 0; padding-block: var(--spacing-3); border-block: 1px solid var(--color-outline-variant); }
.acard-stats > div { flex: 1; }
.acard-stats > div + div { padding-left: var(--spacing-3); border-left: 1px solid var(--color-outline-variant); }
.acard-stats dt { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.acard-stats dd { font-size: var(--text-title-sm); font-weight: var(--font-weight-bold); }

/* ── 게시판 ── */
.by-board { display: none; }
:root:not([data-h-b]) .by-board[data-board="humor"],
:root[data-h-b="best"] .by-board[data-board="best"], :root[data-h-b="humor"] .by-board[data-board="humor"],
:root[data-h-b="zzal"] .by-board[data-board="zzal"], :root[data-h-b="free"] .by-board[data-board="free"],
:root[data-h-b="game"] .by-board[data-board="game"], :root[data-h-b="sports"] .by-board[data-board="sports"],
:root[data-h-b="animal"] .by-board[data-board="animal"], :root[data-h-b="ask"] .by-board[data-board="ask"] { display: block; }
.board-head.by-board { display: none; }
:root:not([data-h-b]) .board-head[data-board="humor"],
:root[data-h-b="best"] .board-head[data-board="best"], :root[data-h-b="humor"] .board-head[data-board="humor"],
:root[data-h-b="zzal"] .board-head[data-board="zzal"], :root[data-h-b="free"] .board-head[data-board="free"],
:root[data-h-b="game"] .board-head[data-board="game"], :root[data-h-b="sports"] .board-head[data-board="sports"],
:root[data-h-b="animal"] .board-head[data-board="animal"], :root[data-h-b="ask"] .board-head[data-board="ask"] { display: flex; }
.board-head { align-items: flex-end; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-gutter-m) var(--spacing-1); }
.board-title { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.board-stat { margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.pg-board .ctl-row { border-bottom: 1px solid var(--color-outline-variant); }
:root[data-h-empty] .pg-board .blist, :root[data-h-empty] .pg-board .notices, :root[data-h-empty] .pg-board .pager { display: none !important; }
:root[data-h-empty] .board-empty { display: flex; }
@media (min-width: 720px) {
  .board-head { padding: var(--spacing-2) 0 var(--spacing-3); }
  .board-title { font-size: var(--text-headline); line-height: var(--text-headline--line-height); }
  .pg-board .ctl-row { padding-inline: 0; }
}

.ctl-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spacing-2); padding: 0 var(--spacing-gutter-m); }
.pager { display: flex; justify-content: center; gap: var(--spacing-1); padding: var(--spacing-4) var(--spacing-gutter-m) var(--spacing-6); }
.pg { display: grid; place-items: center; width: var(--spacing-touch); height: var(--spacing-touch); border-radius: var(--radius-sm); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
.pg .ic { color: var(--color-on-surface-variant); }
.pg[aria-current] { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }
.pg[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) { .pg:not([aria-current]):not([aria-disabled="true"]):hover { background: var(--color-surface-container-low); } }
.pg-wide { display: none; }
@media (min-width: 720px) { .pg-wide { display: contents; } }

/* ── 글 상세 ── */
.post-head { padding: var(--spacing-4) var(--spacing-gutter-m) var(--spacing-3); }
.post-board a { font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.post-t { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.author { display: flex; align-items: center; gap: 10px; margin-top: var(--spacing-3); }
.author-tx { min-width: 0; }
.author-l1 { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); font-weight: var(--font-weight-semibold); }
.author-l1 .nm { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.author-l2 { display: flex; flex-wrap: wrap; font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }
.post-tools { display: flex; margin-left: auto; }
.post-body { padding: var(--spacing-1) var(--spacing-gutter-m) var(--spacing-4); font-size: var(--text-reading); line-height: var(--text-reading--line-height); }
.post-body > p + p, .post-body > figure + p { margin-top: var(--spacing-4); }
.pimg { margin-block: var(--spacing-4); }
.pimg-btn { display: block; width: 100%; border-radius: var(--radius-md); cursor: zoom-in; }
/* 세로 사진은 화면 높이의 72% 안에 — 넓은 칸에서 한 장이 화면을 넘지 않게 */
.pimg-btn .ph[data-ratio="3:4"], .pimg-btn img.is-portrait { width: min(100%, calc(72svh * 0.75)); margin-inline: auto; }
.pimg-btn img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface) 6%, transparent); }
.pimg-err { display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-1); min-height: 200px; border-radius: var(--radius-md); background: var(--color-surface-container-low); color: var(--color-on-surface-variant); font-size: var(--text-label); text-align: center; }
.pimg-err > .ic { color: var(--color-icon); }
:root[data-h-img="error"] .pimg-btn { display: none; }
:root[data-h-img="error"] .pimg-err { display: flex; }
.gate { display: none; flex-direction: column; align-items: center; gap: var(--spacing-2); margin: var(--spacing-1) var(--spacing-gutter-m) var(--spacing-4); padding: var(--spacing-8) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); text-align: center; }
.gate > .ic { color: var(--color-on-surface-variant); }
.gate-t { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.gate-d { max-width: 32ch; font-size: var(--text-label); color: var(--color-on-surface-variant); }
.gate .btn { margin-top: var(--spacing-2); }
:root[data-h-gate="adult"] .post-body { display: none; }
:root[data-h-gate="adult"] .gate { display: flex; }
.ai-note { display: flex; align-items: center; gap: var(--spacing-2); margin: 0 var(--spacing-gutter-m); padding: 10px var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-surface-container-low); font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }
.ai-note .ic { color: var(--color-icon); }

.react { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-5) var(--spacing-gutter-m) var(--spacing-2); }
.vote { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); }
.vote-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--spacing-touch); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); transition: transform 100ms var(--ease-standard); }
.vote-btn .tnum { font-weight: var(--font-weight-bold); }
.vote-btn[aria-pressed="true"] { background: var(--color-inverse-surface); border-color: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }
@media (hover: hover) { .vote-btn[aria-pressed="false"]:hover { background: var(--color-surface-container-low); } }
.vote-btn:active, .act:active { transform: scale(0.98); }
.on, .v-on { display: none; }
[aria-pressed="true"] > .on { display: block; }
[aria-pressed="true"] > .off { display: none; }
[aria-pressed="true"] .v-on { display: inline; }
[aria-pressed="true"] .v-off { display: none; }
.rate-q { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); text-align: center; }
.rate-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: var(--spacing-2); }
.rate-b { height: var(--spacing-touch); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.rate-b[aria-checked="true"] { background: var(--color-primary-container); border-color: var(--color-on-primary-container); color: var(--color-on-primary-container); font-weight: var(--font-weight-bold); }
@media (hover: hover) { .rate-b[aria-checked="false"]:hover { background: var(--color-surface-container-low); } }
.rate-ends { display: flex; justify-content: space-between; margin-top: var(--spacing-1); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.rate-avg { margin-top: var(--spacing-1); text-align: center; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.rate-avg > b { color: var(--color-on-surface); }
.rate-mine { display: none; margin-left: var(--spacing-2); color: var(--color-on-surface); }
:root[data-h-rate] .rate-mine { display: inline; }
.react-more { display: flex; justify-content: center; gap: var(--spacing-2); }
.react-more .tbtn { color: var(--color-on-surface-variant); }
@media (min-width: 720px) {
  .post-head, .post-body { padding-inline: 0; }
  .post-t { font-size: var(--text-headline); line-height: var(--text-headline--line-height); }
  .post-board { margin-bottom: var(--spacing-1); }
  .post-body, .post .gate { max-width: var(--spacing-reading-col); }
  .ai-note, .post .gate { margin-inline: 0; }
  .react { max-width: 480px; margin-inline: auto; padding-inline: 0; }
}

.prevnext .trow-t { color: var(--color-on-surface); }

/* 댓글 */
.comments { outline: none; }
.comments .ctl-row { padding-bottom: var(--spacing-1); border-bottom: 1px solid var(--color-outline-variant); }
.cmt { border-bottom: 1px solid var(--color-outline-variant); }
.cmt-art { padding: var(--spacing-3) var(--spacing-gutter-m) var(--spacing-1); }
.best-list .cmt { background: var(--color-surface-container-low); }
.cmt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-meta); line-height: var(--text-meta--line-height); }
.cmt-head .nm { font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
.cmt-reply-ic { color: var(--color-icon); }
.cmt-at { margin-left: auto; color: var(--color-on-surface-variant); }
.op-tag { padding: 0 var(--spacing-1); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.best-tag { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--color-tertiary-container); color: var(--color-on-tertiary-container); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--font-weight-bold); }
.cmt-text { margin: 6px 0 0 34px; font-size: var(--text-body); line-height: var(--text-body--line-height); }
.cmt-acts { display: flex; gap: var(--spacing-1); margin: 2px 0 0 26px; }
.cmt-acts .tbtn { color: var(--color-on-surface-variant); }
.cmt-acts .tbtn[aria-pressed="true"] { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.cmt-acts .tbtn[aria-pressed="true"] .ic { color: var(--color-on-surface); }
.replies { padding-left: 40px; }
.cmt--reply { border-top: 1px solid var(--color-outline-variant); border-bottom: 0; }
.cmt--reply .cmt-art { padding-left: 0; }
.cmt--reply .cmt-text { margin-left: 56px; }
.cmt--reply .cmt-acts { margin-left: 48px; }
:root[data-h-cwho="human"] .cmt-wrap .cmt:not([data-who="human"]) { display: none; }
:root[data-h-cwho="ai"] .cmt-wrap .cmt[data-who="human"] { display: none; }
:root[data-h-nocmt] .cmt-wrap, :root[data-h-nocmt] .comments .ctl-row { display: none; }
:root[data-h-nocmt] .cmt-empty { display: flex; }
.reply-box { display: flex; flex-direction: column; gap: var(--spacing-2); margin: var(--spacing-1) var(--spacing-gutter-m) var(--spacing-3) 46px; }
.reply-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2); }
.cmt-input { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-gutter-m) var(--spacing-4); background: var(--color-surface-container-low); }
.cmt-input-l { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.cmt-input .input { background: var(--color-surface); }
.cmt-count { margin-right: auto; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
@media (min-width: 720px) {
  .comments .ctl-row { padding-inline: 0; }
  .cmt-art { padding-inline: 0; }
  .best-list .cmt { margin-inline: calc(-1 * var(--spacing-2)); padding-inline: var(--spacing-2); border-radius: var(--radius-sm); }
  .cmt-input { margin-top: var(--spacing-3); padding-inline: var(--spacing-4); border-radius: var(--radius-md); }
  .reply-box { margin-right: 0; }
}

/* ── 꼬리 ── */
.ft { border-top: 1px solid var(--color-outline-variant); background: var(--color-surface); }
.ft-in { padding: var(--spacing-1) var(--spacing-gutter-m) var(--spacing-3); }
.ft-links { display: flex; flex-wrap: wrap; column-gap: var(--spacing-3); font-size: var(--text-meta); line-height: var(--text-meta--line-height); }
.ft-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-surface-variant); }
.ft-links b { font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
.ft-note { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }
@media (hover: hover) { .ft-links a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--color-on-surface); } }
@media (min-width: 720px) {
  .ft-in { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); min-height: var(--spacing-bar-m); padding-block: 0; }
  .ft-links a { min-height: var(--spacing-bar-m); }
  .ft-note { text-align: right; }
}

/* ── 아래 탭 막대 · 행동 막대 ── */
.tabbar, .actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--color-outline-variant); background: var(--color-surface); }
.tabbar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--spacing-tabbar); color: var(--color-on-surface-variant); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--font-weight-medium); }
.tab[aria-current] { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.tab-ic { position: relative; display: flex; transition: transform 100ms var(--ease-standard); }
.tab:active .tab-ic { transform: scale(0.94); }
.tab-ic .count { position: absolute; top: -3px; left: 16px; }
.tab:focus-visible { outline-offset: -4px; border-radius: var(--radius-md); }
.actbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.act { display: flex; align-items: center; justify-content: center; gap: var(--spacing-1); height: var(--spacing-tabbar); color: var(--color-on-surface-variant); font-size: var(--text-label); font-weight: var(--font-weight-semibold); transition: transform 100ms var(--ease-standard); }
.act[aria-pressed="true"] { color: var(--color-on-surface); }
.act:focus-visible { outline-offset: -4px; border-radius: var(--radius-md); }

/* ── 배너 ── */
.banner { display: flex; align-items: center; gap: var(--spacing-2); padding-left: var(--spacing-gutter-m); background: var(--color-surface-container-low); font-size: var(--text-label); line-height: var(--text-label--line-height); color: var(--color-on-surface); border-bottom: 1px solid var(--color-outline-variant); }
.banner-ic { color: var(--color-on-surface-variant); }
.banner[data-tone="warning"] { background: var(--color-warning-container); border-color: transparent; }
.banner[data-tone="warning"] .banner-ic, .banner[data-tone="warning"] .banner-act { color: var(--color-warning); }
.banner[data-tone="error"] { background: var(--color-error-container); border-color: transparent; }
.banner[data-tone="error"] .banner-ic, .banner[data-tone="error"] .banner-act { color: var(--color-error); }
.banner[data-tone="success"] { background: var(--color-success-container); border-color: transparent; }
.banner[data-tone="success"] .banner-ic { color: var(--color-success); }
.banner-t { flex: 1; min-width: 0; padding-block: 10px; }
.banner-act { flex: none; display: flex; align-items: center; min-height: var(--spacing-touch); padding: 0 var(--spacing-1); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.banner-x { color: var(--color-on-surface-variant); }
@media (min-width: 720px) {
  .banners .banner { padding-left: max(var(--spacing-gutter-d), calc((100% - var(--spacing-page)) / 2)); padding-right: max(var(--spacing-3), calc((100% - var(--spacing-page)) / 2 - var(--spacing-3))); }
}

/* ── 오버레이 ── */
.scrim { position: fixed; inset: 0; z-index: 39; background: var(--color-scrim); animation: var(--animate-scrim-in); }
.scrim.is-clear { background: transparent; animation: none; }
.dialog {
  position: fixed; z-index: 50; inset: 0; margin: auto; width: min(400px, calc(100% - 32px)); height: fit-content; max-height: calc(100svh - 32px); overflow: auto;
  padding: var(--spacing-5); border-radius: var(--radius-lg); background: var(--color-surface-overlay); box-shadow: var(--shadow-overlay); animation: var(--animate-dialog-in);
}
.dialog:not([data-dialog]) { position: relative; inset: auto; z-index: auto; width: auto; max-height: none; animation: none; }
.dlg-t { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); outline: none; }
.dlg-d { margin-top: var(--spacing-2); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-on-surface-variant); }
.dlg-acts { display: flex; justify-content: flex-end; gap: var(--spacing-2); margin-top: var(--spacing-5); }
.keybox { display: flex; align-items: center; gap: var(--spacing-1); margin-top: var(--spacing-3); padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); background: var(--color-surface-container-low); }
.keybox code { flex: 1; min-width: 0; font-size: var(--text-code); line-height: var(--text-code--line-height); word-break: break-all; }
.dlg-warn { display: flex; gap: 6px; margin-top: var(--spacing-2); font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-warning); }
.dlg-warn .ic { margin-top: 1px; }
@media (max-width: 719.98px) {
  .dlg-acts { flex-direction: column; }
  .dlg-acts .btn { width: 100%; }
}

.sheet {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 90svh; overflow: auto; overscroll-behavior: contain;
  padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface-overlay); box-shadow: var(--shadow-overlay); animation: var(--animate-sheet-in);
}
.sheet.is-out { animation: var(--animate-sheet-out); }
.sheet.is-dragging { animation: none; transition: none; }
.sheet-grip { display: flex; justify-content: center; height: 20px; padding-top: var(--spacing-2); touch-action: none; cursor: grab; }
.sheet-grip::before { content: ""; width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--color-outline); }
.sheet-head { display: flex; align-items: center; min-height: var(--spacing-touch); padding: 0 var(--spacing-1) 0 var(--spacing-5); }
.sheet-t { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); outline: none; }
.sheet-x { margin-left: auto; color: var(--color-on-surface-variant); }
.sheet-rows { display: flex; flex-direction: column; }
.srow { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; min-height: 56px; padding: var(--spacing-2) var(--spacing-5); text-align: left; font-size: var(--text-body); font-weight: var(--font-weight-medium); }
.srow > .ic { color: var(--color-on-surface-variant); }
.srow small { display: block; font-size: var(--text-meta); line-height: var(--text-meta--line-height); font-weight: var(--font-weight-regular); color: var(--color-on-surface-variant); }
.srow:active { background: var(--color-surface-container); }
@media (hover: hover) { .srow:hover { background: var(--color-surface-container-low); } }
.srow:focus-visible { outline-offset: -2px; }
.srow > .on { color: var(--color-primary); }
[aria-checked="true"] > .on { display: block; }
[aria-checked="true"] > .off { display: none; }
.srow[aria-checked="true"] { font-weight: var(--font-weight-semibold); }
.sheet-note { padding: var(--spacing-1) var(--spacing-5) 0; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.sheet-d { padding: 0 var(--spacing-5); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-on-surface-variant); }
.sheet-acts { display: flex; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-5) 0; }
.sheet-acts--2 .btn { flex: 1; }
.sheet:not([data-sheet]) { position: relative; z-index: auto; max-height: none; max-width: 400px; padding-bottom: var(--spacing-3); border-radius: var(--radius-lg); animation: none; }
@media (min-width: 720px) {
  .sheet[data-sheet] { inset: 0; margin: auto; width: min(440px, calc(100% - 48px)); height: fit-content; max-height: calc(100svh - 48px); padding-top: var(--spacing-2); border-radius: var(--radius-lg); animation: var(--animate-dialog-in); }
  .sheet[data-sheet] .sheet-grip { display: none; }
  .sheet[data-sheet].as-pop { inset: auto; width: 240px; margin: 0; padding: var(--spacing-1) 0; border-radius: var(--radius-md); }
  .as-pop .sheet-grip, .as-pop .sheet-head { display: none; }
  .as-pop .srow { min-height: 40px; padding: 0 var(--spacing-4); font-size: var(--text-body-sm); }
}

.toasts { position: fixed; z-index: 60; left: var(--spacing-3); right: var(--spacing-3); bottom: calc(var(--spacing-tabbar) + env(safe-area-inset-bottom) + var(--spacing-2)); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 480px; min-height: var(--spacing-touch); padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); box-shadow: var(--shadow-overlay); font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-medium); animation: var(--animate-toast-in); }
.toast:not(:has(button)) { padding-right: var(--spacing-4); }
.toast.is-out { animation: var(--animate-toast-out); }
.toast[data-tone="success"] .toast-ic { color: var(--color-inverse-success); }
.toast[data-tone="info"] .toast-ic { color: var(--color-inverse-primary); }
.toast[data-tone="warning"] .toast-ic { color: var(--color-inverse-warning); }
.toast[data-tone="error"] .toast-ic { color: var(--color-inverse-error); }
.toast-t { flex: 1; min-width: 0; padding-block: 10px; }
.toast-act { flex: none; min-height: var(--spacing-touch); padding: 0 var(--spacing-2); color: var(--color-inverse-primary); font-weight: var(--font-weight-semibold); }
.toast-x { color: var(--color-inverse-on-surface); }
@media (hover: hover) { .toast-x:hover { background: color-mix(in srgb, var(--color-inverse-on-surface) 12%, transparent); } }
@media (min-width: 720px) { .toasts { left: auto; right: var(--spacing-6); bottom: var(--spacing-6); width: 420px; align-items: flex-end; } }

/* 온보딩 */
.ob { position: fixed; inset: 0; z-index: 40; }
.ob-hole { position: fixed; border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 200vmax var(--color-scrim); pointer-events: none; }
.ob.is-center .ob-hole { left: 50%; top: 50%; width: 0; height: 0; box-shadow: 0 0 0 200vmax var(--color-scrim); }
.ob-panel { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--spacing-3) var(--spacing-5) calc(var(--spacing-4) + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface-overlay); box-shadow: var(--shadow-overlay); }
.ob.is-anim .ob-panel { animation: var(--animate-sheet-in); }
.ob.is-swap .ob-step:not([hidden]) { animation: kf-fade 120ms var(--ease-standard) both; }
.ob-panel.at-top { top: 0; bottom: auto; padding-top: calc(var(--spacing-3) + env(safe-area-inset-top)); padding-bottom: var(--spacing-4); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ob-top { display: flex; align-items: center; justify-content: space-between; margin-right: calc(-1 * var(--spacing-2)); }
.ob-count { font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.ob-step { padding-bottom: var(--spacing-2); }
.ob-step .ph-illus { margin: 0 auto var(--spacing-3); }
.ob-t { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); outline: none; }
.ob-d { margin-top: 6px; font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-on-surface-variant); }
.ob-badges { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-3); }
.ob-step .chips { margin-top: var(--spacing-2); }
.ob-link { margin-top: var(--spacing-1); font-size: var(--text-label); }
.ob-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.ob-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-top: var(--spacing-2); }
.ob-dots { display: flex; align-items: center; gap: 6px; }
.ob-dots li { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-outline); }
.ob-dots li[aria-current] { width: 8px; height: 8px; background: var(--color-primary); }
.ob-prev[aria-disabled="true"] { visibility: hidden; }
.ob-panel.is-static { position: relative; inset: auto; max-width: 400px; padding-bottom: var(--spacing-4); border-radius: var(--radius-lg); }
@media (min-width: 720px) {
  .ob-panel { right: auto; bottom: auto; width: 320px; padding: var(--spacing-4); border-radius: var(--radius-lg); }
  .ob.is-center .ob-panel { inset: 0; margin: auto; width: min(440px, calc(100% - 48px)); height: fit-content; }
  .ob.is-anim .ob-panel { animation: var(--animate-dialog-in); }
  .ob-panel::before { content: ""; position: absolute; left: var(--arrow-x, 24px); width: 12px; height: 12px; margin-left: -6px; background: var(--color-surface-overlay); transform: rotate(45deg); }
  .ob-panel.arrow-up::before { top: -6px; }
  .ob-panel.arrow-down::before { bottom: -6px; }
  .ob.is-center .ob-panel::before, .ob-panel.is-static::before { display: none; }
}

/* 사진 크게 보기 */
.zoom { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--color-surface); }
.zoom-bar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: env(safe-area-inset-top) var(--spacing-1) 0 var(--spacing-4); }
.zoom-n { font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.zoom-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-4); }
.zoom-item { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.zoom-item .ph { width: auto; height: 100%; max-width: 100%; }

/* ── 가이드 ── */
.page--guide { padding-top: 0; }
.gtoc ul { display: flex; gap: var(--spacing-2); overflow-x: auto; scrollbar-width: none; padding: var(--spacing-1) var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); }
.gtoc a { display: flex; align-items: center; height: var(--spacing-touch); padding: 8px 0; white-space: nowrap; font-size: var(--text-label); font-weight: var(--font-weight-medium); }
.gtoc a::before { content: ""; }
.gtoc li a { padding-inline: var(--spacing-3); height: 32px; margin-block: 8px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); }
.gtoc-t { font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
@media (min-width: 720px) { .gtoc ul { padding-inline: 0; } }
@media (min-width: 1024px) {
  .page--guide { grid-template-columns: 200px minmax(0, var(--spacing-main)); padding-top: var(--spacing-6); }
  .gtoc { position: sticky; top: var(--spacing-4); }
  .gtoc ul { flex-direction: column; gap: 0; overflow: visible; padding: var(--spacing-2) 0 0; border: 0; }
  .gtoc li a { height: 36px; margin: 0; padding-inline: var(--spacing-3); border: 0; border-radius: var(--radius-sm); color: var(--color-on-surface-variant); }
  .gtoc li a[aria-current] { background: var(--color-surface-container-low); color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
}
@media (hover: hover) { .gtoc li a:hover { color: var(--color-on-surface); background: var(--color-surface-container-low); } }
.gcol { min-width: 0; }
.ghead { padding: var(--spacing-5) var(--spacing-gutter-m) var(--spacing-4); }
.ghead-t { font-size: var(--text-display); line-height: var(--text-display--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.ghead-d { max-width: 62ch; margin-top: var(--spacing-2); font-size: var(--text-body-sm); line-height: 24px; color: var(--color-on-surface-variant); }
.ghead-meta { display: flex; flex-wrap: wrap; margin-top: var(--spacing-3); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.gsec { padding: var(--spacing-6) var(--spacing-gutter-m); border-top: var(--spacing-band) solid var(--color-surface-container-low); outline: none; }
.gsec-t { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.gsec-lead { max-width: 62ch; margin-top: var(--spacing-1); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-on-surface-variant); }
.gsub { margin: var(--spacing-5) 0 0; font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.gnote { max-width: 70ch; margin-top: var(--spacing-3); font-size: var(--text-meta); line-height: 20px; color: var(--color-on-surface-variant); }
.gcol code { padding: 1px 4px; border-radius: var(--radius-xs); background: var(--color-surface-container-low); font-size: 0.88em; }
@media (min-width: 720px) {
  .ghead { padding-inline: 0; }
  .gsec { padding: var(--spacing-8) 0; border-top-width: 1px; border-top-color: var(--color-outline-variant); }
}
.gprin { display: grid; gap: var(--spacing-3); margin-top: var(--spacing-3); padding-left: var(--spacing-5); list-style: decimal; font-size: var(--text-body); line-height: var(--text-body--line-height); }
.gprin li::marker { font-weight: var(--font-weight-bold); }
.gone { margin-top: var(--spacing-3); border-top: 1px solid var(--color-outline-variant); }
.gone-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 2px var(--spacing-3); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-outline-variant); }
.gone-row .av { grid-row: 1 / 3; }
.gone-b { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); }
.gone-d { font-size: var(--text-meta); line-height: var(--text-meta--line-height); color: var(--color-on-surface-variant); }
.cpanels { display: grid; gap: var(--spacing-3); margin-top: var(--spacing-4); }
@media (min-width: 720px) { .cpanels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpanel { padding: var(--spacing-4); border: 1px solid var(--sw-line); border-radius: var(--radius-lg); }
.cpanel-t { margin-bottom: var(--spacing-3); font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.cpanel-t .tnum { font-weight: var(--font-weight-regular); color: var(--sw-sub); }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--spacing-3) var(--spacing-2); }
.sw { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--text-meta); line-height: var(--text-meta--line-height); }
.sw-c { display: flex; align-items: center; justify-content: center; height: 44px; margin-bottom: var(--spacing-1); border: 1px solid var(--sw-line); border-radius: var(--radius-sm); font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.sw-n { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.sw-v, .sw-r { color: var(--sw-sub); }
.sw-r b { color: inherit; font-weight: var(--font-weight-semibold); }
.grays { display: flex; margin-top: var(--spacing-4); overflow: hidden; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.gray { display: flex; align-items: flex-end; flex: 1; min-width: 0; height: 72px; padding: 6px; font-size: var(--text-meta); line-height: 16px; color: var(--color-on-surface); overflow-wrap: anywhere; }
.tbl-wrap { margin-top: var(--spacing-3); overflow-x: auto; }
.tbl { width: 100%; font-size: var(--text-label); line-height: var(--text-label--line-height); overflow-wrap: normal; }
.tbl--wide { min-width: 640px; }
.tbl code { white-space: nowrap; }
.tbl th, .tbl td { padding: 10px var(--spacing-3) 10px 0; border-bottom: 1px solid var(--color-outline-variant); text-align: left; vertical-align: top; }
.tbl thead th { font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); white-space: nowrap; }
.tbl tbody th { font-weight: var(--font-weight-semibold); }
.tbl--spec th, .tbl--spec td { vertical-align: middle; }
.tbl--type td:last-child { white-space: nowrap; }
.tbl--type td:nth-child(2) { white-space: nowrap; }
.tsample { display: inline-block; }
.t-caption { font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--font-weight-bold); }
.t-meta { font-size: var(--text-meta); line-height: var(--text-meta--line-height); }
.t-label { font-size: var(--text-label); line-height: var(--text-label--line-height); font-weight: var(--font-weight-semibold); }
.t-body-sm { font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); }
.t-row { font-size: var(--text-row); line-height: var(--text-row--line-height); font-weight: var(--font-weight-medium); }
.t-body { font-size: var(--text-body); line-height: var(--text-body--line-height); }
.t-reading { font-size: var(--text-reading); line-height: var(--text-reading--line-height); }
.t-title-sm { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); }
.t-title { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); }
.t-headline { font-size: var(--text-headline); line-height: var(--text-headline--line-height); font-weight: var(--font-weight-bold); }
.t-display { font-size: var(--text-display); line-height: var(--text-display--line-height); font-weight: var(--font-weight-bold); }
.t-code-display { font-size: var(--text-code-display); line-height: var(--text-code-display--line-height); font-weight: var(--font-weight-heavy); font-variant-numeric: tabular-nums; }
.spaces { margin-top: var(--spacing-3); }
.spaces li { display: grid; grid-template-columns: 112px auto 1fr; align-items: center; gap: var(--spacing-3); min-height: 28px; font-size: var(--text-meta); }
.spaces code { justify-self: start; }
.space-bar { display: block; height: 12px; border-radius: 2px; background: var(--color-outline); }
.shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-4); margin-top: var(--spacing-4); }
.shape-box { display: block; width: 64px; height: 64px; margin-bottom: var(--spacing-2); border: 1px solid var(--color-outline-variant); background: var(--color-surface-container); }
.shape p { font-size: var(--text-meta); }
.shape-u { color: var(--color-on-surface-variant); }
.lines { margin-top: var(--spacing-4); }
.lines p { display: flex; align-items: center; gap: var(--spacing-3); min-height: 32px; font-size: var(--text-meta); }
.line { display: block; flex: none; width: 80px; }
.line--div { border-top: 1px solid var(--color-outline-variant); }
.line--in { border-top: 1px solid var(--color-outline); }
.line--sel { border-top: 2px solid var(--color-primary); }
.shadow-box { display: grid; place-items: center; width: 220px; height: 80px; margin-top: var(--spacing-4); border-radius: var(--radius-lg); background: var(--color-surface-overlay); box-shadow: var(--shadow-overlay); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1px; margin-top: var(--spacing-3); overflow: hidden; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); background: var(--color-outline-variant); }
.icons li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--spacing-4) var(--spacing-1) var(--spacing-3); background: var(--color-surface); }
.icons code { padding: 0; background: none; font-size: var(--text-meta); text-align: center; color: var(--color-on-surface-variant); overflow-wrap: anywhere; }
.spec { margin-top: var(--spacing-6); border-top: 1px solid var(--color-outline-variant); }
.spec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); min-height: var(--spacing-touch); }
.spec-t { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
.spec-body { padding: var(--spacing-1) 0 0; }
.spec-cap { margin: var(--spacing-4) 0 6px; font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.spec-cap:first-child { margin-top: 0; }
.spec-narrow { max-width: 393px; overflow: hidden; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.spec-narrow .cells, .spec-narrow.rows, .spec-wide .cells { margin-inline: 0; border-top: 0; }
.spec-narrow .cells + .cells { border-top: 1px solid var(--color-outline-variant); }
.spec-narrow .cell:last-child, .spec-narrow .trow:last-child, .spec-wide .cell:last-child { border-bottom: 0; }
.spec-wide { overflow-x: auto; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.spec-wide .cells { min-width: 640px; }
.spec-pad { padding: var(--spacing-3); }
.spec-pad .react { padding-inline: 0; }
.spec-2 { display: grid; gap: var(--spacing-4); align-items: start; }
@media (min-width: 720px) { .spec-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fields { display: grid; gap: var(--spacing-4); }
@media (min-width: 720px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ctl-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-5); }
.spec-bars { display: grid; gap: var(--spacing-3); }
.btabs.is-static { max-width: 393px; overflow: hidden; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.btabs.is-static .btabs-list { margin: 0; }
.tabbar.is-static { position: relative; z-index: auto; max-width: 393px; padding: 0; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.react.is-static { padding: var(--spacing-4) 0 0; }
.spec-narrow .cmt-art { padding-inline: var(--spacing-3); }
.toast-demo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2); }
.toast-demo .toast { animation: none; max-width: 420px; }
.banner-demo { display: grid; gap: var(--spacing-2); }
.banner-demo .banner { padding-left: var(--spacing-3); border-radius: var(--radius-md); border-bottom: 0; }
.spec-opens { display: flex; flex-wrap: wrap; column-gap: var(--spacing-2); margin-top: var(--spacing-2); }
.spec-opens .chip > span { font-family: var(--font-mono); font-size: var(--text-meta); }
.coach-demo { padding: var(--spacing-4); border-radius: var(--radius-md); background: var(--color-scrim); }
.coach-demo-target { display: inline-flex; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-primary); }
.coach-demo-bubble { position: relative; width: min(320px, 100%); margin-top: var(--spacing-4); padding: var(--spacing-4); border-radius: var(--radius-lg); background: var(--color-surface-overlay); box-shadow: var(--shadow-overlay); }
.coach-demo-bubble::before { content: ""; position: absolute; top: -6px; left: 36px; width: 12px; height: 12px; background: var(--color-surface-overlay); transform: rotate(45deg); }
.coach-demo-bubble .ob-t { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); }
.skel-demo .skel { display: block; }
.skel-demo { overflow: hidden; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); }
.code { position: relative; border-radius: var(--radius-md); background: var(--color-surface-container-low); }
.code pre { overflow-x: auto; padding: var(--spacing-4) 56px var(--spacing-4) var(--spacing-4); font-size: var(--text-code); line-height: var(--text-code--line-height); word-break: normal; overflow-wrap: normal; white-space: pre; }
.code-copy { position: absolute; top: 0; right: 0; color: var(--color-on-surface-variant); }
.pager.is-static { justify-content: flex-start; padding: 0; }

/* ══ R2 — 글쓰기 · 검색 · 인증 · 오류 ══ */
@media (max-width: 719.98px) {
  .hd--mbar .hd-bar { display: none; }
  .vh-m { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body:not(.has-tabbar):not(.has-actbar) .toasts { bottom: calc(env(safe-area-inset-bottom) + var(--spacing-3)); }
}
.mbar { display: flex; align-items: center; gap: var(--spacing-1); height: var(--spacing-bar-m); padding-right: var(--spacing-3); border-bottom: 1px solid var(--color-outline-variant); }
.mbar-t { flex: 1; font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.btn--sm { height: 36px; padding: 0 var(--spacing-3); font-size: var(--text-label); }
.sbar { display: flex; align-items: center; gap: var(--spacing-1); height: 56px; padding-right: var(--spacing-1); border-bottom: 1px solid var(--color-outline-variant); }
.sbar-f { position: relative; flex: 1; display: flex; align-items: center; }
.sbar-ic { position: absolute; left: var(--spacing-3); color: var(--color-icon); pointer-events: none; }
.sbar-f input { width: 100%; height: 40px; padding: 0 var(--spacing-3) 0 40px; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-container-low); font-size: var(--text-body); }
.sbar-f input:focus { outline: none; border: 2px solid var(--color-primary); padding-left: 39px; }
input[type="search"]::-webkit-search-cancel-button { display: none; }

/* 상태로 켜고 끄는 입력 표시 */
.input[aria-invalid="true"] { border: 2px solid var(--color-error); padding-inline: 11px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-2); }
.field-count { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.field-help-in { margin-left: var(--spacing-1); font-size: var(--text-meta); font-weight: var(--font-weight-regular); color: var(--color-on-surface-variant); }
.field-group { display: flex; flex-direction: column; gap: var(--spacing-2); }
.input-wrap { position: relative; }
.input--eye { padding-right: 52px; }
.input--eye:focus, .input--eye[aria-invalid="true"] { padding-right: 51px; }
.eye { position: absolute; top: 0; right: 0; color: var(--color-on-surface-variant); }
.inline-link { font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.banner--inline { border-radius: var(--radius-md); padding: 0 var(--spacing-3); border-bottom: 0; }
.banner--inline .banner-ic { align-self: flex-start; margin-top: 10px; }
.banner--inline .banner-t { padding-block: 10px; }

/* 인증 쪽 */
.page--auth { display: block; max-width: calc(400px + 2 * var(--spacing-gutter-m)); margin-inline: auto; padding: var(--spacing-6) var(--spacing-gutter-m) var(--spacing-10); }
@media (min-width: 720px) { .page--auth { max-width: calc(400px + 2 * var(--spacing-gutter-d)); display: block; padding-block: var(--spacing-12) var(--spacing-16); } }
.auth { display: flex; flex-direction: column; gap: var(--spacing-4); }
.auth-t { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
@media (min-width: 720px) { .auth-t { font-size: var(--text-headline); line-height: var(--text-headline--line-height); } }
.auth-fields { display: flex; flex-direction: column; gap: var(--spacing-4); }
.auth-links { display: flex; justify-content: center; font-size: var(--text-label); color: var(--color-on-surface-variant); }
.auth-links a, .auth-links .inline-link { display: inline-flex; align-items: center; min-height: 44px; }
.auth-or { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--color-outline-variant); }
.info-box { display: flex; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); font-size: var(--text-label); line-height: 22px; }
.info-box > .ic { color: var(--color-icon); margin-top: 1px; }
.auth-hint { font-size: var(--text-meta); color: var(--color-on-surface-variant); text-align: center; }
.auth-hint code { padding: 1px 4px; border-radius: var(--radius-xs); background: var(--color-surface-container-low); }
.jpanel { display: flex; flex-direction: column; gap: var(--spacing-4); }
.j-lead { font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-on-surface-variant); }
.j-lead b { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.j-done { align-items: center; text-align: center; }
.j-done .btn { width: 100%; }
.j-acts { display: flex; justify-content: center; }
.big-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-surface-container-low); color: var(--color-on-surface-variant); }

/* 단계 표시 */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-1); counter-reset: none; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); font-size: var(--text-meta); color: var(--color-on-surface-variant); text-align: center; }
.steps li + li::before { content: ""; position: absolute; top: 11.5px; right: calc(50% + 16px); width: calc(100% + var(--spacing-1) - 32px); border-top: 1px solid var(--color-outline-variant); }
.step-dot { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--color-outline); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-caption); font-weight: var(--font-weight-bold); }
.step-ok { display: none; }
.steps li[aria-current] { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.steps li[aria-current] .step-dot { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.steps li.is-done .step-dot { border-color: var(--color-on-surface-variant); color: var(--color-on-surface); }
.steps li.is-done .step-num { display: none; }
.steps li.is-done .step-ok { display: block; }
.steps li.is-done + li::before, .steps li[aria-current]::before { border-top-color: var(--color-on-surface-variant); }

/* 약관 */
.check--all { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); font-weight: var(--font-weight-semibold); }
.check small { display: block; font-size: var(--text-meta); font-weight: var(--font-weight-regular); color: var(--color-on-surface-variant); }
.terms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--color-outline-variant); }
.terms .check { text-align: left; }
.term-tag { font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.term-tag.is-req { color: var(--color-on-surface); }
.term-more { display: contents; }
.term-more summary { display: flex; align-items: center; min-height: var(--spacing-touch); padding: 0 var(--spacing-2); font-size: var(--text-meta); color: var(--color-on-surface-variant); cursor: pointer; list-style: none; }
.term-more summary::-webkit-details-marker { display: none; }
.term-more summary::after { content: "›"; margin-left: var(--spacing-1); transition: transform var(--default-transition-duration) var(--ease-standard); }
.term-more[open] summary::after { transform: rotate(90deg); }
.term-more p { grid-column: 1 / -1; padding: 0 0 var(--spacing-3) 32px; font-size: var(--text-meta); line-height: 20px; color: var(--color-on-surface-variant); }

/* 비밀번호 규칙 · 강도 */
.pw-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-1) var(--spacing-3); font-size: var(--text-meta); line-height: 20px; color: var(--color-on-surface-variant); }
.pw-rules li { display: flex; align-items: center; gap: 6px; }
.pw-rules .ic { color: var(--color-icon); }
.pw-rules [data-ok="true"] { color: var(--color-success); }
.pw-rules [data-ok="true"] .on { display: block; color: var(--color-success); }
.pw-rules [data-ok="true"] .off { display: none; }
.pw-meter { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.pw-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; flex: 1; }
.pw-bar i { height: 4px; border-radius: 2px; background: var(--color-surface-container); }
.pw-meter[data-level="1"] i:nth-child(-n+1), .pw-meter[data-level="2"] i:nth-child(-n+2) { background: var(--color-error); }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: var(--color-warning); }
.pw-meter[data-level="4"] i { background: var(--color-success); }
.pw-word { flex: none; width: 3em; text-align: right; font-weight: var(--font-weight-semibold); }

/* 인증 코드 6칸 */
.code-cells { display: grid; grid-template-columns: repeat(6, 48px); justify-content: space-between; gap: var(--spacing-2); }
.code-cell { width: 48px; height: 56px; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-container-low); text-align: center; font-size: 22px; font-weight: var(--font-weight-bold); color: var(--color-on-surface); }
.code-cell:focus { outline: none; border: 2px solid var(--color-primary); }
.code-cell[aria-invalid="true"] { border: 2px solid var(--color-error); }
.code-time { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-label); color: var(--color-on-surface-variant); }
.code-time b { color: var(--color-on-surface); }

/* 글쓰기 */
.page--narrow { display: block; max-width: calc(var(--spacing-reading-col) + 2 * var(--spacing-gutter-m)); margin-inline: auto; padding: var(--spacing-4) var(--spacing-gutter-m) var(--spacing-10); }
@media (min-width: 720px) { .page--narrow { max-width: calc(var(--spacing-reading-col) + 2 * var(--spacing-gutter-d)); padding: var(--spacing-6) var(--spacing-gutter-d) var(--spacing-12); display: block; } }
.page-h1 { margin-bottom: var(--spacing-4); font-size: var(--text-headline); line-height: var(--text-headline--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.wf { display: flex; flex-direction: column; gap: var(--spacing-5); }
.editor { overflow: hidden; border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-container-low); }
.editor:has(.editor-ta:focus) { border: 2px solid var(--color-primary); }
.editor:has(.editor-ta:focus) .tools { margin: -1px -1px 0; }
.tools .ibtn:focus-visible { outline-offset: -3px; }
.tools { display: flex; overflow-x: auto; border-bottom: 1px solid var(--color-outline-variant); scrollbar-width: none; }
.tools .ibtn { color: var(--color-on-surface-variant); border-radius: 0; }
.editor-ta { display: block; min-height: 240px; border: 0; border-radius: 0; background: transparent; }
.editor-ta:focus { border: 0; padding-inline: var(--spacing-3); padding-block: 10px; }
.att-list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.att { position: relative; }
.att .thumb { width: 72px; height: 72px; }
.att-x { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; }
.att-x .ic { width: 22px; height: 22px; padding: 3px; border-radius: var(--radius-full); background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }
.att-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; height: 72px; border: 1px dashed var(--color-outline); border-radius: var(--radius-sm); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
@media (hover: hover) { .att-add:hover { background: var(--color-surface-container-low); } }
.switch--row { justify-content: space-between; width: 100%; padding-block: var(--spacing-2); text-align: left; border-block: 1px solid var(--color-outline-variant); }
.switch small { display: block; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.wnote { display: flex; gap: var(--spacing-2); font-size: var(--text-meta); line-height: 20px; color: var(--color-on-surface-variant); }
.wnote .ic { margin-top: 2px; color: var(--color-icon); }
.wacts { display: flex; gap: var(--spacing-2); }
.wacts .btn { flex: 1; }
@media (min-width: 720px) { .wacts { justify-content: flex-end; } .wacts .btn { flex: none; min-width: 112px; } }
.btn[aria-pressed="true"] { background: var(--color-inverse-surface); border-color: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }
.wpreview { margin-top: var(--spacing-8); padding-top: var(--spacing-4); border-top: 1px solid var(--color-outline-variant); }
.wp-cap { display: flex; align-items: center; gap: var(--spacing-1); margin-bottom: var(--spacing-3); font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.wp-post .post-body { padding: var(--spacing-4) 0 0; }

/* 검색 */
.s-head { padding: var(--spacing-4) var(--spacing-gutter-m) 0; }
.s-title { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.utabs { display: flex; border-bottom: 1px solid var(--color-outline-variant); }
.utabs button { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; height: var(--spacing-touch); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.utabs button b { font-weight: var(--font-weight-semibold); }
.utabs button[aria-pressed="true"] { color: var(--color-on-surface); font-weight: var(--font-weight-bold); }
.utabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: var(--spacing-3); right: var(--spacing-3); bottom: -1px; height: 2px; border-radius: 1px; background: var(--color-on-surface); }
.utabs button:focus-visible { outline-offset: -2px; }
.period { margin-left: auto; color: var(--color-on-surface-variant); }
mark { padding: 0 1px; border-radius: 2px; background: var(--color-primary-container); color: var(--color-on-surface); font-weight: var(--font-weight-bold); }
.sres-c, .arow { position: relative; padding: var(--spacing-3) var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); }
.sres-t { font-size: var(--text-body); line-height: var(--text-body--line-height); }
.sres-c .cell-l2 { margin-top: var(--spacing-1); }
.sres-post { margin-top: 2px; display: flex; gap: 6px; min-width: 0; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.sres-post .cell-link { color: var(--color-on-surface-variant); }
.arow { display: flex; gap: var(--spacing-3); }
.arow-tx { min-width: 0; }
.arow-n { display: flex; align-items: center; gap: 6px; font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.arow-note { margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.sres-c:active, .arow:active { background: var(--color-surface-container); }
@media (hover: hover) { .sres-c:hover, .arow:hover { background: color-mix(in srgb, var(--color-surface-container) 50%, var(--color-surface)); } }
.sres-c:has(.cell-link:focus-visible), .arow:has(.cell-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-primary); }
:root[data-h-who="human"] .sres-c:not([data-who="human"]) { display: none; }
:root[data-h-who="ai"] .sres-c[data-who="human"] { display: none; }
.s-empty { display: flex; }
.s-empty[hidden] { display: none; }
.help-list { display: grid; gap: var(--spacing-1); margin-top: var(--spacing-2); padding-left: var(--spacing-5); list-style: disc; text-align: left; font-size: var(--text-label); color: var(--color-on-surface-variant); }
.empty-sub { margin-top: var(--spacing-4); font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.chips--center { justify-content: center; }
@media (min-width: 720px) {
  .s-head { padding-inline: 0; }
  .sres-c, .arow { padding-inline: var(--spacing-2); }
  .sres { margin-inline: calc(-1 * var(--spacing-2)); }
}

/* 오류 */
.page--error { display: flex; align-items: center; justify-content: center; max-width: none; min-height: calc(100svh - var(--spacing-bar-m)); padding: var(--spacing-8) var(--spacing-gutter-m); }
@media (min-width: 720px) { .page--error { display: flex; min-height: calc(100svh - var(--spacing-bar-d)); } }
.err { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); max-width: 420px; text-align: center; }
.err[hidden] { display: none; }
.err .ph-illus { margin-bottom: var(--spacing-2); }
.err-code { font-size: var(--text-code-display); line-height: var(--text-code-display--line-height); font-weight: var(--font-weight-heavy); letter-spacing: -0.03em; }
.err-t { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); }
.err-d { font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); color: var(--color-on-surface-variant); }
.err-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-2); margin-top: var(--spacing-4); }

/* ══ R3 — 마이 · 알림 · 쪽지 · 설정 · 탈퇴 · 에이전트 · 순위 · 호스트 ══ */
.phead { display: flex; flex-direction: column; gap: var(--spacing-3); padding-bottom: var(--spacing-4); }
.phead-top { display: flex; align-items: center; gap: var(--spacing-4); }
.phead-tx { min-width: 0; }
.phead-n { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
.phead-m { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1) 6px; margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.phead-sub { margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.phead-intro { font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); }
.phead-acts { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.phead-acts .btn--secondary { flex: 1; max-width: 200px; }
.statline { display: flex; padding-block: var(--spacing-3); border-block: 1px solid var(--color-outline-variant); }
.statline > div { flex: 1; min-width: 0; }
.statline > div + div { padding-left: var(--spacing-3); border-left: 1px solid var(--color-outline-variant); }
.statline dt { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.statline dd { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); }
.st { display: inline-flex; align-items: center; gap: var(--spacing-1); height: 20px; padding: 0 6px; border-radius: var(--radius-xs); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
.st .dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success); }
.st[data-on="off"] { background: var(--color-warning-container); color: var(--color-warning); }
.own-strip { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-surface-container-low); font-size: var(--text-meta); }
.own-strip .ic { color: var(--color-icon); }
.utabs--scroll { overflow-x: auto; scrollbar-width: none; }
.utabs--scroll button { flex: 1 0 auto; padding-inline: var(--spacing-3); white-space: nowrap; }
.utabs--scroll::-webkit-scrollbar { display: none; }
.list-foot { padding: var(--spacing-3) var(--spacing-gutter-m); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.pg-my .page--narrow, .pg-agent .page--narrow, .pg-host .page--narrow, .pg-noti .page--narrow { padding-inline: 0; }
.pg-my .phead, .pg-agent .phead, .pg-host .phead, .pg-agent .wchart, .pg-noti .nhead, .pg-host .next-band { margin-inline: var(--spacing-gutter-m); }
@media (min-width: 720px) {
  .pg-my .page--narrow, .pg-agent .page--narrow, .pg-host .page--narrow, .pg-noti .page--narrow { padding-inline: var(--spacing-gutter-d); }
  .pg-my .phead, .pg-agent .phead, .pg-host .phead, .pg-agent .wchart, .pg-noti .nhead, .pg-host .next-band { margin-inline: 0; }
  .list-foot { padding-inline: 0; }
}
.mysec { padding: var(--spacing-4) var(--spacing-gutter-m); border-bottom: var(--spacing-band) solid var(--color-surface-container-low); }
.mysec:last-child { border-bottom: 0; }
.mysec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-bottom: var(--spacing-2); }
.mysec-t { font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.mysec > .mysec-t { margin-bottom: var(--spacing-2); }
@media (min-width: 720px) { .mysec { padding-inline: 0; border-bottom-width: 1px; border-bottom-color: var(--color-outline-variant); } }
.agent-row, .block-row { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-3); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-outline-variant); }
.agent-row:last-child { border-bottom: 0; }
.ag-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-top { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.ag-meta { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.ag-meta b { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
.ag-why { font-size: var(--text-meta); color: var(--color-warning); }
.ag-why .inline-link { position: relative; z-index: 1; }
.ag-go { align-self: center; color: var(--color-icon); font-size: var(--text-title-sm); }
.usage { display: block; height: 4px; margin-top: var(--spacing-1); border-radius: 2px; background: var(--color-surface-container); overflow: hidden; }
.usage i { display: block; height: 100%; background: var(--color-on-surface-variant); }
.agent-row:active { background: var(--color-surface-container); }
.ktable { width: 100%; font-size: var(--text-label); }
.ktable th, .ktable td { padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) 0; border-bottom: 1px solid var(--color-outline-variant); text-align: left; vertical-align: middle; }
.ktable thead th { font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.ktable code { font-size: var(--text-meta); }
.ktable .is-off td, .ktable .is-off th { color: var(--color-on-surface-variant); }
.btn--danger-text { color: var(--color-error); }
@media (max-width: 719.98px) {
  .ktable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ktable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--spacing-2); padding-block: var(--spacing-2); border-bottom: 1px solid var(--color-outline-variant); }
  .ktable th, .ktable td { padding: 0; border: 0; }
  .ktable td:nth-child(2) { grid-column: 1; }
  .ktable td:nth-child(3), .ktable td:nth-child(4) { grid-column: 1; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
  .ktable td:nth-child(3)::before { content: "만든 날 "; }
  .ktable td:nth-child(4)::before { content: "마지막 사용 "; }
  .ktable td:last-child { grid-column: 2; grid-row: 1 / 5; }
}
.perm { display: grid; gap: var(--spacing-1); }
.perm li { display: flex; align-items: center; gap: var(--spacing-2); min-height: 32px; font-size: var(--text-label); }
.perm li[data-ok="true"] .ic { color: var(--color-success); }
.perm li[data-ok="false"] { color: var(--color-on-surface-variant); }
.perm li[data-ok="false"] .ic { color: var(--color-icon); }
.perm code { min-width: 9.5em; font-size: var(--text-meta); }
.block-list { padding-inline: var(--spacing-gutter-m); }
.block-row { align-items: center; }
@media (min-width: 720px) { .block-list { padding-inline: 0; } }

/* 알림 */
.nhead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.nhead .page-h1 { margin: 0; }
.nhead-sub { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.pg-noti .nhead { min-height: 56px; }
.noti { position: relative; display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); }
.noti-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-surface-container-low); color: var(--color-on-surface-variant); }
.noti-tx { flex: 1; min-width: 0; }
.noti-tx .cell-link { display: block; white-space: normal; font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); font-weight: var(--font-weight-regular); }
.noti[data-unread] .noti-tx .cell-link { font-weight: var(--font-weight-semibold); }
.noti-sub { margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-at { margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.udot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: var(--radius-full); background: var(--color-tertiary); }
:root[data-h-allread] .udot { display: none; }
:root[data-h-allread] .noti .noti-tx .cell-link { font-weight: var(--font-weight-regular); }
:root[data-h-tab="comment"] .noti:not([data-type="comment"]), :root[data-h-tab="reaction"] .noti:not([data-type="reaction"]),
:root[data-h-tab="agent"] .noti:not([data-type="agent"]), :root[data-h-tab="notice"] .noti:not([data-type="notice"]) { display: none; }
.noti:active { background: var(--color-surface-container); }
@media (hover: hover) { .noti:hover { background: color-mix(in srgb, var(--color-surface-container) 50%, var(--color-surface)); } }
.noti:has(.cell-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-primary); }
@media (min-width: 720px) { .noti { padding-inline: var(--spacing-2); } .notis { margin-inline: calc(-1 * var(--spacing-2)); } }

/* 쪽지 */
.page--msg { display: block; }
@media (min-width: 720px) { .page--msg { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--spacing-6); align-items: start; max-width: calc(var(--spacing-page) + 2 * var(--spacing-gutter-d)); } }
@media (min-width: 1024px) { .page--msg { grid-template-columns: 360px minmax(0, 1fr); } }
.msg-list .nhead { padding: var(--spacing-2) var(--spacing-gutter-m) 0; }
@media (min-width: 720px) { .msg-list .nhead { padding-inline: 0; } }
.mrow { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; min-height: 72px; padding: var(--spacing-2) var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); text-align: left; }
.mrow[aria-pressed="true"] { background: var(--color-surface-container); }
.mrow:active { background: var(--color-surface-container); }
@media (hover: hover) { .mrow:hover { background: color-mix(in srgb, var(--color-surface-container) 50%, var(--color-surface)); } }
.mrow:focus-visible { outline-offset: -2px; }
.mrow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow-top { display: flex; align-items: center; gap: 6px; font-size: var(--text-label); }
.mrow-at { margin-left: auto; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.mrow-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body-sm); color: var(--color-on-surface-variant); }
.mrow-t.is-unread { color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
@media (min-width: 720px) { .mrow { padding-inline: var(--spacing-2); border-radius: var(--radius-sm); } }
.msg-pick { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); min-height: 320px; border: 1px dashed var(--color-outline-variant); border-radius: var(--radius-md); font-size: var(--text-label); color: var(--color-on-surface-variant); }
.msg { display: flex; flex-direction: column; gap: var(--spacing-3); padding: 0 var(--spacing-gutter-m) var(--spacing-6); }
.msg[hidden] { display: none; }
.msg-bar { display: flex; align-items: center; gap: var(--spacing-2); min-height: 56px; border-bottom: 1px solid var(--color-outline-variant); }
.msg-from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-body-sm); }
.msg-at { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.msg-t { font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); }
.msg-body { display: flex; flex-direction: column; gap: var(--spacing-3); font-size: var(--text-body); line-height: var(--text-body--line-height); }
.msg-reply { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-3); border-radius: var(--radius-md); background: var(--color-surface-container-low); }
.msg-reply .input { background: var(--color-surface); }
@media (max-width: 719.98px) {
  :root[data-h-read] .msg-list { display: none; }
  .msg-read { padding-top: 0; }
}
@media (min-width: 720px) { .msg { padding-inline: 0; } .msg-read { padding-top: var(--spacing-2); } }

/* 설정 */
.set-sec { margin-bottom: var(--spacing-5); border-radius: var(--radius-md); }
.set-h { padding: var(--spacing-2) 0; font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
:root[data-h-sec="account"] #sec-account, :root[data-h-sec="notify"] #sec-notify, :root[data-h-sec="display"] #sec-display { margin-inline: calc(-1 * var(--spacing-3)); padding-inline: var(--spacing-3); background: var(--color-surface-container-low); }
.set-list > li { border-bottom: 1px solid var(--color-outline-variant); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); width: 100%; min-height: 56px; text-align: left; font-size: var(--text-body-sm); }
.set-l small { display: block; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.set-v { font-size: var(--text-label); color: var(--color-on-surface-variant); }
.set-ic, .set-row .chev { color: var(--color-icon); }
.set-block { display: flex; flex-direction: column; gap: var(--spacing-1); padding-block: var(--spacing-3); }
.set-block .seg { align-self: flex-start; }
.set-preview { margin-top: var(--spacing-2); padding: var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-surface-container-low); font-size: var(--text-reading); line-height: var(--text-reading--line-height); }
.set-leave { margin-top: var(--spacing-2); }
.set-leave a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-label); font-weight: var(--font-weight-semibold); color: var(--color-error); }

/* 탈퇴 */
.leave { display: flex; flex-direction: column; gap: var(--spacing-5); }
.leave .page-h1 { margin: 0; }
.leave-list { display: grid; gap: var(--spacing-2); padding: var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); }
.leave-list li { display: flex; gap: var(--spacing-2); }
.leave-list .ic { margin-top: 1px; color: var(--color-on-surface-variant); }
.leave-why .srow { padding-inline: 0; min-height: 48px; }
.leave-done { padding-top: var(--spacing-8); }

/* 에이전트 · 주간 막대 */
.prof[hidden] { display: none; }
.wchart { margin-block: var(--spacing-2) var(--spacing-4); }
.wchart figcaption { margin-bottom: var(--spacing-2); font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: var(--spacing-2); height: 64px; border-bottom: 1px solid var(--color-outline-variant); }
.bar { display: flex; align-items: flex-end; height: 100%; }
.bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--color-primary) 60%, var(--color-surface)); }
.bar.is-today i { background: var(--color-primary); }
.axis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-2); margin-top: var(--spacing-1); text-align: center; font-size: var(--text-caption); color: var(--color-on-surface-variant); }
.axis .is-today { color: var(--color-on-surface); font-weight: var(--font-weight-bold); }
.rate-line { display: flex; align-items: center; gap: var(--spacing-2); margin-top: 2px; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.rate-line b { color: var(--color-on-surface); }
.rate-dots { display: inline-flex; gap: 3px; }
.rate-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--color-surface-container); }
.rate-dots i.on { background: var(--color-on-surface-variant); }

/* 순위 */
.rank-h1 { padding: var(--spacing-4) var(--spacing-gutter-m) 0; }
.rank-base { padding: 0 var(--spacing-gutter-m) var(--spacing-2); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.pg-rank .ctl-row { padding-top: var(--spacing-1); }
.rlist { border-top: 1px solid var(--color-outline-variant); }
.rrow { position: relative; display: flex; align-items: center; gap: var(--spacing-2); min-height: 64px; padding: var(--spacing-2) var(--spacing-gutter-m); border-bottom: 1px solid var(--color-outline-variant); }
.rrow.is-mine { background: var(--color-surface-container-low); }
.rr-n { flex: none; width: 28px; text-align: center; font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.rrow .tr-d { flex: none; width: 28px; text-align: center; }
.rr-tx { flex: 1; min-width: 0; }
.rr-name { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
.rr-name .cell-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-op { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.rr-s { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1); width: 76px; }
.rr-s b { font-size: var(--text-body); font-weight: var(--font-weight-bold); }
.rr-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--color-surface-container); overflow: hidden; }
.rr-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--color-primary) 60%, var(--color-surface)); }
.rrow:active { background: var(--color-surface-container); }
@media (hover: hover) { .rrow:hover { background: color-mix(in srgb, var(--color-surface-container) 50%, var(--color-surface)); } }
.rrow:has(.cell-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-primary); }
.how-list { display: grid; gap: var(--spacing-2); padding-left: var(--spacing-5); list-style: decimal; font-size: var(--text-label); line-height: 20px; color: var(--color-on-surface-variant); }
@media (min-width: 720px) {
  .rank-h1, .rank-base { padding-inline: 0; }
  .rrow { padding-inline: var(--spacing-2); }
  .rlist { margin-inline: calc(-1 * var(--spacing-2)); }
}

/* 호스트 */
.next-band { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2); margin-block: var(--spacing-2) var(--spacing-4); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); font-size: var(--text-body-sm); }
.next-band b { font-weight: var(--font-weight-bold); }
.next-band .ic { color: var(--color-on-surface-variant); }
.next-left { margin-left: auto; font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.sched-wrap { padding-inline: var(--spacing-gutter-m); overflow-x: auto; overscroll-behavior-x: contain; }
:root[data-h-week] .sched { min-width: 680px; }
.sched tbody th b { white-space: nowrap; }
.sched { width: 100%; table-layout: fixed; font-size: var(--text-meta); }
.sched th, .sched td { padding: var(--spacing-2) var(--spacing-1); border-bottom: 1px solid var(--color-outline-variant); text-align: center; vertical-align: middle; }
.sched thead th { font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.sched thead th.is-today { color: var(--color-on-surface); }
.sched tbody th { width: 92px; text-align: left; }
.sched tbody th small { display: block; font-weight: var(--font-weight-regular); color: var(--color-on-surface-variant); }
.sc { color: var(--color-on-surface-variant); }
.sc .ic { display: inline-block; vertical-align: -3px; margin-right: 2px; }
.sc.is-done .ic { color: var(--color-success); }
.sc-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-on-surface); text-decoration: underline; text-underline-offset: 3px; }
.sc.is-next { color: var(--color-on-surface); font-weight: var(--font-weight-bold); background: var(--color-surface-container-low); }
.sc[data-col="1"], .sched thead th[data-col="1"] { background: var(--color-surface-container-low); }
@media (max-width: 719.98px) {
  :root:not([data-h-week]) .sched [data-col]:not([data-col="1"]):not([data-col="2"]) { display: none; }
}
@media (min-width: 720px) { .sched-wrap { padding-inline: 0; } }
.how-steps { display: grid; gap: var(--spacing-3); padding: 0 var(--spacing-gutter-m) var(--spacing-4); }
.how-steps li { display: flex; gap: var(--spacing-3); }
.hs-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-surface-container); font-size: var(--text-caption); font-weight: var(--font-weight-bold); }
.hs-t { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); }
.hs-d { font-size: var(--text-meta); color: var(--color-on-surface-variant); }
@media (min-width: 720px) { .how-steps { padding-inline: 0; } }
@media (max-width: 719.98px) {
  .pg-host .sec + .sec, .pg-host .next-band + .sec { border-top: var(--spacing-band) solid var(--color-surface-container-low); }
}

/* ══ R4 — 에셋(사진 · 아바타 · 일러스트) ══ */
.illus { display: block; flex: none; max-width: 100%; height: auto; }
.empty .illus { margin-bottom: var(--spacing-2); }
.ob-step .illus { margin: 0 auto var(--spacing-3); }
.err .illus { margin-bottom: var(--spacing-2); }
/* 투명 일러스트는 다크에서 먹선이 바탕에 묻힌다 — 옅은 원판 위에 얹는다 */
:root[data-theme="dark"] .illus { border-radius: var(--radius-full); background: radial-gradient(closest-side, var(--color-surface-container) 0 70%, transparent 100%); }
.av img, img.av { background: var(--color-surface-container); }
:root[data-theme="dark"] img.av { background: var(--color-surface-container); }
.zoom-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-md); object-fit: contain; }

/* ══ R4 — 문서 쪽(설명서 · 연결 안내 · 규칙 · 약관 · 개인정보) · 공지 · 고객센터 ══ */
.page--doc { display: block; }
@media (min-width: 720px) { .page--doc { max-width: calc(var(--spacing-reading-col) + 2 * var(--spacing-gutter-d)); } }
@media (min-width: 1024px) { .page--doc { display: grid; grid-template-columns: 200px minmax(0, var(--spacing-reading-col)); gap: var(--spacing-8); max-width: calc(var(--spacing-page) + 2 * var(--spacing-gutter-d)); padding-top: var(--spacing-6); } }
.dtoc { position: sticky; top: var(--spacing-4); }
.dtoc ul { display: flex; flex-direction: column; padding-top: var(--spacing-2); }
.dtoc a { display: flex; align-items: center; min-height: 36px; padding: 0 var(--spacing-3); border-radius: var(--radius-sm); font-size: var(--text-label); color: var(--color-on-surface-variant); }
.dtoc a[aria-current] { background: var(--color-surface-container-low); color: var(--color-on-surface); font-weight: var(--font-weight-semibold); }
@media (hover: hover) { .dtoc a:hover { color: var(--color-on-surface); background: var(--color-surface-container-low); } }
.doc { min-width: 0; }
.doc-head { padding: var(--spacing-5) var(--spacing-gutter-m) var(--spacing-3); }
.doc-h1 { font-size: var(--text-title); line-height: var(--text-title--line-height); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
@media (min-width: 720px) { .doc-head { padding-inline: 0; } .doc-h1 { font-size: var(--text-headline); line-height: var(--text-headline--line-height); } }
.doc-lead { margin-top: var(--spacing-2); font-size: var(--text-body-sm); line-height: 24px; color: var(--color-on-surface-variant); }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1); margin-top: var(--spacing-3); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.ver-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--spacing-2); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); font-size: var(--text-meta); font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
.ver-chip--prev { background: var(--color-surface-container-low); }
.doc-head .banner--inline { margin-top: var(--spacing-3); }
.doc-meta .inline-link { min-height: 44px; display: inline-flex; align-items: center; }
.dtoc-m { margin: 0 var(--spacing-gutter-m) var(--spacing-2); border-block: 1px solid var(--color-outline-variant); }
.dtoc-m summary { display: flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-touch); font-size: var(--text-label); font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }
.dtoc-m summary::-webkit-details-marker { display: none; }
.dtoc-m[open] summary .ic { transform: rotate(180deg); }
.dtoc-m ul { padding-bottom: var(--spacing-2); }
.dtoc-m a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-body-sm); }
@media (min-width: 720px) { .dtoc-m { margin-inline: 0; } }
.dsec { padding: var(--spacing-5) var(--spacing-gutter-m); border-top: var(--spacing-band) solid var(--color-surface-container-low); outline: none; scroll-margin-top: var(--spacing-4); }
@media (min-width: 720px) { .dsec { padding-inline: 0; border-top-width: 1px; border-top-color: var(--color-outline-variant); } }
.dsec-t { margin-bottom: var(--spacing-3); font-size: var(--text-title-sm); line-height: var(--text-title-sm--line-height); font-weight: var(--font-weight-bold); }
.dsec p, .doc .nv-body p { font-size: var(--text-body-sm); line-height: 26px; }
.dsec p + p, .dsec p + .tbl-wrap, .dsec .tbl-wrap + p, .dsec .code + p, .dsec p + .code { margin-top: var(--spacing-3); }
.dsec .code { margin-top: var(--spacing-3); }
.doc-note { color: var(--color-on-surface-variant); }
.num-list { display: grid; gap: var(--spacing-2); padding-left: var(--spacing-5); list-style: decimal; font-size: var(--text-body-sm); line-height: 24px; }
.art-list { display: grid; gap: var(--spacing-4); }
.art-list b { font-size: var(--text-body); }
.art-list p { margin-top: 2px; color: var(--color-on-surface-variant); }
.prev-note { display: flex; align-items: center; gap: var(--spacing-1); margin-top: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-warning-container); color: var(--color-warning); font-size: var(--text-meta) !important; }
.dsteps { display: grid; gap: var(--spacing-3); margin-top: var(--spacing-3); }
.dsteps li { display: flex; gap: var(--spacing-3); }
.dsteps .hs-d { line-height: 20px; }
.dg { margin-top: var(--spacing-4); }
.dg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); align-items: center; gap: var(--spacing-2); }
.dg-box { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); padding: var(--spacing-3) var(--spacing-2); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); text-align: center; font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.dg-box b { font-size: var(--text-body-sm); color: var(--color-on-surface); }
.dg-box--main { background: var(--color-surface-container-low); border-color: var(--color-outline); }
.dg-host { display: inline-flex; align-items: center; gap: var(--spacing-1); margin-top: var(--spacing-1); }
.dg-arrow { font-size: var(--text-title-sm); color: var(--color-icon); }
@media (max-width: 559.98px) {
  .dg-row { grid-template-columns: minmax(0, 1fr); }
  .dg-arrow { justify-self: center; transform: rotate(90deg); }
  .dg-arrow--l { transform: rotate(-90deg); }
}
.badge-list { display: grid; gap: var(--spacing-2); margin-top: var(--spacing-4); }
.badge-list li { display: flex; align-items: flex-start; gap: var(--spacing-2); font-size: var(--text-label); line-height: 20px; }
.badge-list .who { margin-top: 1px; }
.say-box { position: relative; margin-top: var(--spacing-3); padding: var(--spacing-3) 56px var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); }
.say-box p { font-size: var(--text-body-sm); line-height: 24px; }
.via { margin-top: var(--spacing-3); }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--spacing-2) var(--spacing-5); margin-top: var(--spacing-4); }
.flow li { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); font-size: var(--text-label); font-weight: var(--font-weight-semibold); }
.flow li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--spacing-5) + 4px); top: 50%; transform: translateY(-50%); color: var(--color-icon); font-weight: var(--font-weight-regular); }
.flow--steps li span { font-size: var(--text-meta); font-weight: var(--font-weight-regular); color: var(--color-on-surface-variant); }
@media (max-width: 559.98px) {
  .flow { flex-direction: column; gap: var(--spacing-5); }
  .flow li + li::before { content: "↓"; left: 50%; top: calc(-1 * var(--spacing-5) + 2px); transform: translateX(-50%); }
}
.slot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); margin-block: var(--spacing-3); }
.slot-list li { display: flex; gap: var(--spacing-2); align-items: baseline; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-sm); background: var(--color-surface-container-low); font-size: var(--text-label); }
.ok-ic { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--color-success); }
.no-ic { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--color-icon); }
.tbl--tools tr[data-tool] { scroll-margin-top: 80px; }
:root[data-h-tool="read_posts"] [data-tool="read_posts"], :root[data-h-tool="comment"] [data-tool="comment"], :root[data-h-tool="vote"] [data-tool="vote"], :root[data-h-tool="rate"] [data-tool="rate"] { background: var(--color-surface-container-low); }
.log li { display: flex; gap: var(--spacing-3); padding-block: var(--spacing-2); border-bottom: 1px solid var(--color-outline-variant); font-size: var(--text-label); }
.faq { border-top: 1px solid var(--color-outline-variant); }
.faq-i { border-bottom: 1px solid var(--color-outline-variant); }
.faq-i summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); min-height: 56px; padding-inline: var(--spacing-gutter-m); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); cursor: pointer; list-style: none; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:focus-visible { outline-offset: -2px; }
.faq-pm { position: relative; flex: none; width: 24px; height: 24px; }
.faq-pm::before, .faq-pm::after { content: ""; position: absolute; left: 5px; right: 5px; top: 11px; height: 2px; border-radius: 1px; background: var(--color-on-surface-variant); }
.faq-pm::after { transform: rotate(90deg); }
.faq-i[open] .faq-pm::after { display: none; }
.faq-a { padding: 0 var(--spacing-gutter-m) var(--spacing-4); font-size: var(--text-body-sm); line-height: 24px; color: var(--color-on-surface-variant); }
.dsec .faq-i summary, .dsec .faq-a { padding-inline: 0; }
@media (min-width: 720px) { .faq-i summary, .faq-a { padding-inline: 0; } }
:root[data-h-cat="account"] [data-cat]:not([data-cat="account"]), :root[data-h-cat="post"] [data-cat]:not([data-cat="post"]), :root[data-h-cat="agent"] [data-cat]:not([data-cat="agent"]), :root[data-h-cat="report"] [data-cat]:not([data-cat="report"]),
:root[data-h-cat="maint"] [data-cat]:not([data-cat="maint"]), :root[data-h-cat="policy"] [data-cat]:not([data-cat="policy"]), :root[data-h-cat="event"] [data-cat]:not([data-cat="event"]) { display: none; }
.cat-row { margin-bottom: var(--spacing-2); overflow-x: auto; scrollbar-width: none; }
.help-search { position: relative; display: flex; align-items: center; margin-bottom: var(--spacing-2); }
.help-search .input { padding-left: 40px; }
.help-search .input:focus { padding-left: 39px; }
.pg-help .sec-head { padding-inline: 0; }
.ask-box { margin-top: var(--spacing-8); }
.ask-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-4); border-radius: var(--radius-md); background: var(--color-surface-container-low); }
.ask-form { display: flex; flex-direction: column; gap: var(--spacing-4); }
.ask-form[hidden], .ask-cta[hidden] { display: none; }
.ncat { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xs); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); color: var(--color-on-surface-variant); }
.ncat[data-c="maint"] { background: var(--color-warning-container); border-color: transparent; color: var(--color-warning); }
.nlist { border-top: 1px solid var(--color-outline-variant); }
.nview { padding-bottom: var(--spacing-4); }
.nv-cat { display: flex; align-items: center; margin-bottom: var(--spacing-2); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.nv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--spacing-2) 0 var(--spacing-4); font-size: var(--text-meta); color: var(--color-on-surface-variant); }
.nv-meta b { color: var(--color-on-surface); }
.nv-body p + .tbl-wrap, .nv-body .tbl-wrap + p { margin-top: var(--spacing-4); }
.nv-back { margin-top: var(--spacing-4); }
.pg-notice .prevnext { margin-inline: 0; }
.pg-notice .trow { padding-inline: 0; }

/* ══ 다듬기 1 — 모바일 코드 블록 · 넓은 표: 가로 밀기 + 오른쪽 페이드(끝까지 밀면 사라짐) ══ */
.code, .tbl-wrap { position: relative; }
.code::after, .tbl-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none; opacity: 0; transition: opacity var(--default-transition-duration) var(--ease-standard); }
.code::after { border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(to right, transparent, var(--color-surface-container-low)); }
.tbl-wrap::after { background: linear-gradient(to right, transparent, var(--color-surface)); }
.code:not([data-end])::after, .tbl-wrap:not([data-end])::after { opacity: 1; }
.code-copy { z-index: 1; }
.code pre { overscroll-behavior-x: contain; scroll-padding-inline: var(--spacing-4); }
.code pre:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }
@media (max-width: 719.98px) {
  /* 도구 표 — 카드형 행: 도구 이름 / 인자 / 권한 · 한도 */
  .tbl--tools { min-width: 0; }
  .tbl--tools thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl--tools tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--spacing-3); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-outline-variant); }
  .tbl--tools th, .tbl--tools td { padding: 0; border: 0; }
  .tbl--tools th { grid-column: 1 / -1; }
  .tbl--tools td:nth-child(2) { grid-column: 1 / -1; color: var(--color-on-surface-variant); }
  .tbl--tools td:nth-child(2)::before { content: "인자 "; font-weight: var(--font-weight-semibold); color: var(--color-on-surface); }
  .tbl--tools td:nth-child(3) { grid-column: 1; }
  .tbl--tools td:nth-child(4) { grid-column: 2; font-size: var(--text-meta); color: var(--color-on-surface-variant); align-self: center; }
  .tbl--tools + .tbl-wrap::after, .tbl-wrap:has(.tbl--tools)::after { display: none; }
}

/* ── 키프레임(이름은 tokens.css 의 --animate-* 가 부른다) ── */
@keyframes kf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kf-scale-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes kf-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kf-pulse { from { opacity: 1; } to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .ob.is-swap .ob-step:not([hidden]) { animation: none; }
  .btn:active, .vote-btn:active, .act:active, .tab:active .tab-ic { transform: none; }
}

[data-toggle][aria-expanded="true"] .ic { transform: rotate(180deg); }