/* ==========================================================================
   /me/: 내 정보. 조용한 대시보드.
   표현은 한 곳에서만: 머리의 아바타 색이 은은한 빛(아우라)으로 번지고,
   프로필에서 색을 밀면 그 빛이 같이 바뀐다. 나머지는 글자, 목록, 가는 선.
   ========================================================================== */

.me { --aura-h: 168; overflow-x: clip; }
.me .btn-sm { min-height: 44px; }

/* ---------- 머리 ---------- */
.me-head { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.me-head-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.me-id { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 28px); min-width: 0; }
.me-avatar { position: relative; flex: none; width: 96px; height: 96px; }
.me-avatar::before {
  /* 아우라: 아바타와 같은 두 색(h, h+40)으로 번지는 빛 */
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: 620px; height: 460px; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, hsl(var(--aura-h) 88% 62% / .26), hsl(var(--aura-h) 88% 62% / .08) 55%, transparent 100%),
    radial-gradient(closest-side at 64% 60%, hsl(calc(var(--aura-h) + 40) 80% 55% / .16), transparent 70%);
  transition: opacity var(--d-4);
}
.me.is-loading .me-avatar::before { opacity: 0; }
.me-avatar .avatar { box-shadow: 0 0 0 2px rgb(var(--tint-rgb) / .1) inset, 0 12px 40px -10px hsl(var(--aura-h) 80% 50% / .55); }
.me-avatar-ph { display: block; width: 96px; height: 96px; border-radius: 50%; background: rgb(var(--tint-rgb) / .05); }
.me-id-text { min-width: 0; }
.me-handle { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.me-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; color: var(--text-3); font-size: .92rem; }
.me-meta .tabular { color: var(--text-2); }
.me-role { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 650; color: var(--text); border: 1px solid var(--line-input); }
.me-bio { margin-top: 12px; color: var(--text-2); max-width: 36em; white-space: pre-line; }
.me-bio:empty { display: none; }
.me-bio .link-btn { font-size: .95rem; margin: -10px 0; }
.me-public { flex: none; margin-top: 6px; }
.sk-title { display: block; width: 6.5em; height: .9em; margin: .1em 0; }
.sk-line { display: block; width: 14em; height: 1em; }

/* ---------- 몸: 왼쪽 탭, 오른쪽 내용 ---------- */
.me-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-bottom: 104px; }
.me-tabs { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; display: grid; gap: 2px; }
.me-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-2); font-weight: 600; font-size: .96rem; text-align: left; white-space: nowrap;
  transition: color var(--d-1), background var(--d-1);
}
.me-tab:hover { color: var(--text); background: rgb(var(--tint-rgb) / .035); }
.me-tab[aria-selected="true"] { color: var(--text); background: rgb(var(--tint-rgb) / .07); }
.me-tab .n { font-size: .8rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.me-tab .n:empty { display: none; }
.me-tab[aria-selected="true"] .n { color: var(--text-2); }
.me-tab-gap { margin-top: 13px; position: relative; }
.me-tab-gap::before { content: ""; position: absolute; left: 14px; right: 14px; top: -8px; height: 1px; background: var(--line); }

.me-panel { max-width: 760px; outline: none; animation: me-in var(--d-3) var(--ease-out); }
@keyframes me-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.me-panel-head { margin-bottom: 26px; }
.me-panel-head h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1.25; }
.me-panel-head p { margin-top: 6px; color: var(--text-2); text-wrap: pretty; }

/* 목록: 카드 대신 가는 선 */
.me-list { list-style: none; border-top: 1px solid var(--line); }
.me-list > li { border-bottom: 1px solid var(--line); }
.me-row { display: grid; gap: 5px; padding: 16px 6px; border-radius: var(--r-xs); transition: background var(--d-1); }
a.me-row:hover { background: rgb(var(--tint-rgb) / .025); }
a.me-row:hover .me-row-title { color: var(--ether); }
.me-row-title { font-weight: 650; font-size: 1.02rem; line-height: 1.5; transition: color var(--d-1); overflow-wrap: anywhere; }
.me-row-title.is-deleted { color: var(--text-3); font-weight: 550; }
.me-row-text { color: var(--text-2); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.me-row-text.is-deleted { color: var(--text-3); }
.me-row-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-3); font-size: .86rem; }
.me-row-meta .on { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28em; }
.me-row-meta .tabular { font-variant-numeric: tabular-nums; }
.tag-deleted { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: .74rem; color: var(--text-3); font-weight: 600; }

/* 글 / 댓글 전환 */
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: var(--r-pill); background: rgb(var(--tint-rgb) / .04); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font-weight: 620; font-size: .93rem; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg .n { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600; }

/* 받은 댓글 */
.inbox-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.inbox-row .avatar { margin-top: 2px; }
.inbox-who { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.inbox-who strong { color: var(--text); font-weight: 680; }
.inbox-who span { color: var(--text-2); }
.inbox-who time { color: var(--text-3); font-size: .85rem; white-space: nowrap; }
.inbox-body { color: var(--text); margin-top: 3px; line-height: 1.65; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-on { margin-top: 4px; color: var(--text-3); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 이어 읽기: 책은 물건이라 표지를 쓴다 */
.read-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 6px; border-radius: var(--r-xs); transition: background var(--d-1); }
a.read-row:hover { background: rgb(var(--tint-rgb) / .025); }
a.read-row:hover .read-title { color: var(--ether); }
a.read-row:hover .read-go { border-color: var(--line-2); background: rgb(var(--tint-rgb) / .04); }
.read-go { pointer-events: none; }
.read-row .read-title, .read-row .read-author, .read-row .read-bar { display: block; }
.read-cover { width: 58px; aspect-ratio: 2 / 3; border-radius: 4px; object-fit: cover; background: var(--card-2); box-shadow: 0 8px 20px -10px rgb(var(--shade-rgb) / calc(.9 * var(--shade-a))), 0 0 0 1px rgb(var(--tint-rgb) / .06); }
.read-title { font-weight: 700; font-size: 1.04rem; line-height: 1.4; transition: color var(--d-1); }
.read-author { color: var(--text-3); font-size: .88rem; margin-top: 1px; }
.read-bar { height: 4px; margin-top: 12px; border-radius: 4px; background: rgb(var(--tint-rgb) / .07); overflow: hidden; max-width: 360px; }
.read-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ether); }
.read-meta { display: flex; gap: 14px; margin-top: 7px; color: var(--text-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.read-meta strong { color: var(--text-2); font-weight: 650; }

/* 게임 기록 */
/* 이어 읽기 탭 아래: 이해 확인(장을 다 읽고 5문제로 확인한 기록) */
.me-check { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.me-check-head h3 { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.02em; }
.me-check-head p { margin-top: 4px; color: var(--text-2); font-size: .93rem; }
.me-check-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px 32px; align-items: start; margin-top: 18px; }
.me-check-sum .n { color: var(--text-2); font-size: .95rem; }
.me-check-sum .n b { font-family: var(--f-mono); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--text); letter-spacing: -0.04em; margin: 0 2px; }
.me-check-sum .t { margin-top: 8px; font-weight: 720; color: var(--ether); }
.me-check-sum .nx { margin-top: 2px; font-size: .86rem; color: var(--text-3); }
.me-check-books { list-style: none; border-top: 1px solid var(--line); }
.me-check-books li { border-bottom: 1px solid var(--line); }
.me-check-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 4.6em; gap: 14px; align-items: center; min-height: 44px; padding: 6px 2px; font-size: .93rem; }
.me-check-book .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-check-book:hover .nm { color: var(--ether); }
.me-check-book .k { font-family: var(--f-mono); font-size: .84rem; color: var(--text-2); text-align: right; white-space: nowrap; }
.me-check-bar { height: 4px; border-radius: 4px; background: rgb(var(--line-rgb) / .14); overflow: hidden; }
.me-check-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ether); }
.me-check-recent { margin-top: 20px; }
.me-check-recent h4 { font-size: .86rem; font-weight: 650; color: var(--text-3); margin-bottom: 6px; }
.me-check-recent ol { list-style: none; border-top: 1px solid var(--line); }
.me-check-recent li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.me-check-recent li a { min-width: 0; overflow-wrap: anywhere; }
.me-check-recent li a:hover { color: var(--ether); }
.me-check-recent time { flex: none; font-size: .82rem; color: var(--text-3); }
@media (max-width: 640px) {
  .me-check-grid { grid-template-columns: minmax(0, 1fr); }
  .me-check-book { grid-template-columns: minmax(0, 1fr) 64px 4.4em; gap: 10px; }
}
.game-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 18px 6px; }
.game-name { font-weight: 700; font-size: 1.06rem; }
.game-name a:hover { color: var(--ether); }
.game-sub { color: var(--text-3); font-size: .86rem; margin-top: 2px; }
.game-best { text-align: right; }
.game-best .score { font-family: var(--f-mono); font-size: 1.45rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.game-best .unit { font-size: .85rem; color: var(--text-3); margin-left: 3px; }
.game-best .none { color: var(--text-3); font-size: .92rem; }
.game-row .btn { grid-column: 2; justify-self: end; }

/* 알림 신청 */
.alert-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 6px; }
.alert-row .t { font-weight: 650; }
.alert-row a.t:hover { color: var(--ether); }
.alert-row .when { color: var(--text-3); font-size: .86rem; margin-top: 2px; }
.alert-row .raw { font-family: var(--f-mono); font-size: .9rem; }

/* 빈 상태: 초대장처럼 */
.me-empty { padding: 36px 28px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.me-empty p { color: var(--text-2); max-width: 32em; }
.me-empty strong { display: block; color: var(--text); font-size: 1.08rem; font-weight: 700; margin-bottom: 4px; }
.me-empty .row { margin-top: 18px; gap: 10px; }
.me-error { padding: 20px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--err) 26%, transparent); background: color-mix(in srgb, var(--err) 6%, transparent); color: var(--err-ink); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.me-skel { display: grid; gap: 14px; }
.me-skel .skeleton { height: 18px; }
.me-skel .skeleton:nth-child(2n) { width: 70%; }
.me-note { margin-top: 14px; color: var(--text-3); font-size: .88rem; }
.me-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-input); }

/* ---------- 프로필 폼 ---------- */
.me-form { max-width: 560px; gap: 24px; }
.hue-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; }
.hue-preview .avatar { box-shadow: 0 0 0 2px rgb(var(--tint-rgb) / .1) inset; }
.hue-field { gap: 4px; }
.hue-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --h: 168; }
.hue-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, hsl(0 58% 56%), hsl(60 56% 54%), hsl(120 48% 50%), hsl(180 54% 50%), hsl(240 58% 62%), hsl(300 52% 58%), hsl(359 58% 56%));
  box-shadow: 0 0 0 1px rgb(var(--tint-rgb) / .06) inset; opacity: .78;
}
.hue-range::-moz-range-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, hsl(0 70% 60%), hsl(60 70% 58%), hsl(120 62% 55%), hsl(180 66% 55%), hsl(240 70% 66%), hsl(300 66% 62%), hsl(359 70% 60%));
}
.hue-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: hsl(var(--h) 85% 66%); border: 3px solid #fff; box-shadow: 0 4px 14px rgb(var(--shade-rgb) / calc(.55 * var(--shade-a)));
}
.hue-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--h) 85% 66%); border: 3px solid #fff; box-shadow: 0 4px 14px rgb(var(--shade-rgb) / calc(.55 * var(--shade-a))); }
.hue-range:focus-visible { outline: none; }
.hue-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus), 0 4px 14px rgb(var(--shade-rgb) / calc(.55 * var(--shade-a))); }
.hue-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus); }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-top label { color: var(--text); font-weight: 620; font-size: .92rem; }
.counter { font-size: .82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.counter.is-near { color: var(--warn); }
.me-form .textarea { min-height: 112px; font-size: 1rem; }
.me-form-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- 계정 ---------- */
.acct-facts { margin: 0 0 8px; border-top: 1px solid var(--line); }
.acct-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
.acct-facts dt { color: var(--text-3); font-size: .92rem; }
.acct-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acct-sec { padding: 30px 0; border-bottom: 1px solid var(--line); }
.acct-sec h3 { font-size: 1.12rem; font-weight: 720; letter-spacing: -0.02em; }
.acct-sec > p, .acct-row p { color: var(--text-2); margin-top: 6px; font-size: .95rem; }
.acct-form { margin-top: 18px; max-width: 440px; gap: 16px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.acct-danger { border-bottom: 0; }
.acct-danger h3 { color: var(--err-ink); }
.danger-list { list-style: none; margin: 14px 0 22px; display: grid; gap: 10px; max-width: 38em; }
.danger-list li { position: relative; padding-left: 18px; color: var(--text-2); font-size: .95rem; line-height: 1.7; }
.danger-list li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--err) 70%, transparent); }
.btn-danger { --btn-fg: var(--err-ink); --btn-bd: color-mix(in srgb, var(--err) 45%, transparent); }
.btn-danger:hover { --btn-bd: color-mix(in srgb, var(--err) 80%, transparent); background: color-mix(in srgb, var(--err) 8%, transparent); }
.btn-danger-solid { --btn-bg: var(--err); --btn-fg: var(--err-on); --btn-bd: var(--err); }
.btn-danger-solid:hover { --btn-bg: var(--err-ink); --btn-bd: var(--err-ink); }

/* 탈퇴·숨기기 확인 창 */
.xy-modal .confirm-box h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.xy-modal .confirm-box p { color: var(--text-2); margin-top: 8px; }
.xy-modal .confirm-box .confirm-handle { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-sm); background: rgb(var(--tint-rgb) / .04); border: 1px solid var(--line-2); color: var(--text); font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.xy-modal .confirm-box .input { margin-top: 12px; }
.xy-modal .confirm-box .row { margin-top: 20px; justify-content: flex-end; }

/* ---------- 관리 ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-stats > div { padding: 16px 6px; }
.admin-stats > div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.admin-stats dt { color: var(--text-3); font-size: .86rem; }
.admin-stats dd { margin: 4px 0 0; font-family: var(--f-mono); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-sec { margin-top: 40px; }
.admin-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.admin-sec-head h3 { font-size: 1.15rem; font-weight: 720; outline: none; }
.seg.seg-sm { margin-bottom: 0; }
.rep-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; padding: 18px 6px; align-items: start; }
.rep-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rep-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 650; border: 1px solid var(--line-2); color: var(--text-2); }
.rep-kind.is-post { color: var(--ether); border-color: rgb(var(--ether-rgb) / .3); }
.rep-kind.is-comment { color: var(--xync); border-color: rgb(var(--xync-rgb) / .3); }
.rep-target a { font-weight: 650; overflow-wrap: anywhere; }
.rep-target a:hover { color: var(--ether); }
.rep-snippet { color: var(--text-2); font-size: .93rem; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rep-reasons { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.rep-reasons li { display: flex; gap: 10px; font-size: .9rem; color: var(--text); }
.rep-reasons li::before { content: ""; flex: none; width: 1px; background: var(--line-input); }
.rep-reasons time { color: var(--text-3); white-space: nowrap; font-size: .84rem; }
.rep-reasons .empty-reason { color: var(--text-3); }
.rep-state { font-size: .86rem; color: var(--text-3); white-space: nowrap; }
.rep-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rep-row.is-done .rep-main, .inq-row.is-done .inq-head, .inq-row.is-done .inq-msg { opacity: .58; }
.inq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.inq-row { padding: 18px 6px; }
.inq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.inq-head strong { font-weight: 700; }
.inq-head a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-input); overflow-wrap: anywhere; }
.inq-head a:hover { color: var(--text); }
.inq-head time { margin-left: auto; color: var(--text-3); font-size: .85rem; white-space: nowrap; }
.inq-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 650; background: rgb(var(--tint-rgb) / .05); color: var(--text-2); }
.inq-msg { margin-top: 8px; color: var(--text); white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; }
.inq-msg.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.inq-more { margin-top: 2px; }

/* ---------- 관리: 보기 고르기, 사이트 설정, 퀴즈 ---------- */
.admin-views { margin: 28px 0 0; flex-wrap: wrap; }
.cfg-lead { color: var(--text-2); font-size: .95rem; max-width: 40em; margin: -4px 0 20px; text-wrap: pretty; }
.cfg-lead a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-input); }
.cfg-form { display: grid; gap: 20px; max-width: 640px; }
.cfg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.cfg-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-fs legend { padding: 0; margin-bottom: 8px; font-size: .9rem; font-weight: 600; color: var(--text-2); }
.cfg-fs .seg-radio { justify-self: start; }
.field .opt { font-weight: 500; color: var(--text-3); font-size: .82rem; margin-left: 4px; }
.cfg-state { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 650; border: 1px solid var(--line-2); color: var(--text-3); white-space: nowrap; }
.cfg-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cfg-state.is-on { color: var(--ether); border-color: rgb(var(--ether-rgb) / .35); background: var(--ether-dim); }
.cfg-saved { color: var(--text-3); font-size: .86rem; }
.cfg-wait { color: var(--text-2); font-size: .93rem; }
.cfg-wait b { color: var(--text); font-weight: 700; }
.input.mono { font-family: var(--f-mono); font-size: .92rem; }
.input[readonly] { color: var(--text-3); background: rgb(var(--tint-rgb) / .015); }

/* 켜고 끄는 스위치 */
.cfg-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 620; color: var(--text); justify-self: start; }
.cfg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cfg-switch .track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgb(var(--tint-rgb) / .08); border: 1px solid var(--line-input); transition: background var(--d-2), border-color var(--d-2); }
.cfg-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform var(--d-2) var(--ease-out), background var(--d-2); }
.cfg-switch input:checked + .track { background: var(--ether); border-color: var(--ether); }
.cfg-switch input:checked + .track::after { transform: translateX(20px); background: var(--ether-ink); }
.cfg-switch input:focus-visible + .track { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
.cfg-switch-field { align-self: start; margin-top: 30px; }

/* 둘 가운데 하나 고르기 */
.seg-radio { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgb(var(--tint-rgb) / .04); border: 1px solid var(--line); }
.seg-radio label { position: relative; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg-radio span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); color: var(--text-2); font-weight: 620; font-size: .93rem; transition: background var(--d-1), color var(--d-1); }
.seg-radio label:hover span { color: var(--text); }
.seg-radio input:checked + span { background: var(--text); color: var(--bg); }
.seg-radio input:focus-visible + span { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
.seg-radio .dot { width: 8px; height: 8px; border-radius: 50%; }
.seg-radio .dot.is-ether { background: var(--ether); }
.seg-radio .dot.is-xync { background: var(--xync); }

/* 공지 띠 미리 보기(진짜 띠와 같은 옷, 제자리에 놓인다) */
.cfg-preview { display: grid; gap: 8px; }
.cfg-preview-cap { font-size: .82rem; color: var(--text-3); }
.xy-banner.is-preview { position: relative; inset: auto; z-index: auto; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.xy-banner.is-preview .wrap-wide { width: 100%; }
.xy-banner.is-preview .xy-banner-close { pointer-events: none; }
.xy-banner.is-preview.is-empty .xy-banner-text { color: var(--text-3); font-weight: 500; }
.xy-banner.is-preview .is-link { text-decoration: underline; text-decoration-color: rgb(var(--text-rgb) / .28); text-underline-offset: 4px; }
.cfg-preview .field-error { margin-top: 2px; }

/* 퀴즈 목록 */
.quiz-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 6px; }
.quiz-row.is-draft .quiz-cover { opacity: .55; }
.quiz-cover { width: 40px; height: 60px; border-radius: 4px; object-fit: cover; background: var(--card-2); box-shadow: 0 0 0 1px rgb(var(--tint-rgb) / .06); }
.quiz-cover.is-mark { display: grid; place-items: center; }
.quiz-cover.is-mark svg { width: 22px; height: 22px; }
.quiz-main { min-width: 0; display: grid; gap: 4px; }
.quiz-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.quiz-open { color: var(--text); font-size: 1.02rem; font-weight: 680; text-decoration: none; min-height: 32px; text-align: left; overflow-wrap: anywhere; }
.quiz-open:hover { color: var(--ether); }
.quiz-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 퀴즈 고치기 */
.quiz-edit-title { display: flex; align-items: center; gap: 10px; }
.quiz-form { display: grid; max-width: 720px; gap: 20px; }
.quiz-text { min-height: 360px; font-size: .96rem; line-height: 1.75; tab-size: 2; }
.quiz-help { margin-top: 2px; font-size: .9rem; color: var(--text-2); }
.quiz-help summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.quiz-help summary:hover { color: var(--text); }
.quiz-help p { margin: 6px 0; max-width: 40em; }
.quiz-help code { font-family: var(--f-mono); font-size: .85rem; padding: 1px 6px; border-radius: 5px; background: rgb(var(--tint-rgb) / .06); color: var(--text); }
.quiz-help pre { margin: 10px 0; padding: 14px 16px; border-radius: var(--r-md); background: rgb(var(--tint-rgb) / .035); border: 1px solid var(--line); white-space: pre-wrap; font-family: var(--f-sans); font-size: .9rem; line-height: 1.7; color: var(--text); }
.quiz-preview:empty { display: none; }
.qz-sum { font-size: .92rem; color: var(--text-2); margin-bottom: 10px; }
.qz-sum b { color: var(--text); }
.qz-sum .is-err { color: var(--err-ink); font-weight: 650; }
.qz-list { list-style: none; border-top: 1px solid var(--line); max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.qz-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
.qz-n { font-family: var(--f-mono); font-size: .82rem; color: var(--text-3); padding-top: 3px; }
.qz-q { font-weight: 650; white-space: pre-line; overflow-wrap: anywhere; }
.qz-ch { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qz-ch li { padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-2); font-size: .88rem; overflow-wrap: anywhere; }
.qz-ch li.is-right { color: var(--ether); border-color: rgb(var(--ether-rgb) / .45); background: var(--ether-dim); font-weight: 650; }
.qz-ex { margin-top: 8px; font-size: .88rem; color: var(--text-3); overflow-wrap: anywhere; }
.qz-err { margin-top: 8px; font-size: .88rem; color: var(--err-ink); }
.qz-item.is-err { background: color-mix(in srgb, var(--err) 4%, transparent); }
.qz-item.is-err .qz-n { color: var(--err-ink); }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.quiz-dirty { color: var(--warn); font-size: .86rem; }
.quiz-danger { display: flex; flex-wrap: wrap; gap: 0 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.link-btn.is-danger { color: var(--err-ink); text-decoration-color: color-mix(in srgb, var(--err) 40%, transparent); }
.link-btn.is-danger:hover { color: var(--err); }

/* ---------- 모바일: 탭은 가로로 밀리는 막대 ---------- */
@media (max-width: 960px) {
  .me-head { padding: 28px 0 22px; }
  .me-head-in { flex-direction: column; gap: 18px; }
  .me-id { flex-direction: column; align-items: flex-start; gap: 18px; }
  .me-avatar, .me-avatar-ph { width: 72px; height: 72px; }
  .me-avatar .avatar { width: 72px; height: 72px; font-size: 30px; }
  .me-avatar::before { width: 420px; height: 320px; }
  .me-public { margin-top: 0; }
  .me-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .me-tabs {
    position: sticky; top: var(--header-h); z-index: 20;
    display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -16px 24px; padding: 8px 16px;
    background: var(--veil); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .me-tabs::-webkit-scrollbar { display: none; }
  .me-tab { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); }
  .me-tab[aria-selected="true"] { background: var(--text); color: var(--bg); }
  .me-tab[aria-selected="true"] .n { color: rgb(var(--bg-rgb) / .6); }
  .me-tab .n { margin-left: -2px; }
  .me-tab-gap { margin-top: 0; }
  .me-tab-gap::before { display: none; }
  .me-panel-head h2 { font-size: 1.55rem; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stats > div:nth-child(3) { border-left: 0; padding-left: 6px; }
  .admin-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .cfg-row { grid-template-columns: minmax(0, 1fr); }
  .cfg-switch-field { margin-top: 0; }
  .quiz-row { grid-template-columns: 40px minmax(0, 1fr); }
  .quiz-act { grid-column: 1 / -1; justify-content: flex-start; }
  .read-row { grid-template-columns: 52px minmax(0, 1fr); align-items: start; row-gap: 12px; }
  .read-go { grid-column: 2; justify-self: start; }
  .read-cover { width: 52px; }
  .acct-row { flex-direction: column; align-items: flex-start; }
  .acct-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .rep-row { grid-template-columns: minmax(0, 1fr); }
  .rep-act { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .inq-head time { margin-left: 0; width: 100%; }
  .me-empty { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .me-panel { animation: none; }
}