/* HALIA C Detail Completion Pass I — Settings (/settings).
   Page layer only: every color, radius, shadow and type step comes from the HALIA tokens (tokens.css).
   The hero art classes (space-hero-words/-script/-mark) are shared with My Space (space.css). */
@layer pages {
  :root[data-route="settings"] .community.container { padding-top: var(--space-4); }
  .settings-page { display: grid; gap: var(--space-4); }
  .settings-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
  .community .settings-card .section-head { margin-bottom: var(--space-3); }
  .community .settings-card .section-head h2 { font: 700 16px/24px var(--font-sans); }

  /* ---------- hero ---------- */
  .settings-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 124px; padding: var(--space-5) var(--space-8); border-radius: var(--radius-2xl); background: linear-gradient(100deg, var(--surface-mint), var(--hero-sky) 60%, var(--hero-sky-end)); }
  .settings-hero-copy { position: relative; max-width: 58%; }
  .settings-kicker { margin: 0; font: 500 14px/1.4 var(--font-sans); letter-spacing: .04em; color: var(--text-secondary); }
  .community .settings-hero h1 { margin: 2px 0 2px; font: 800 32px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--text-primary); }
  .settings-hero-copy > p:last-child { margin: 0; font: var(--text-body-lg); color: var(--text-secondary); }
  .settings-hero-art { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 46%; pointer-events: none; }
  .settings-hero-art > img { position: absolute; right: 150px; bottom: -74px; width: auto; max-width: none; height: 240px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, black 55%); mask-image: linear-gradient(90deg, transparent 30%, black 55%); }
  .settings-hero .space-hero-words { display: block; top: 12px; left: -4%; font-size: 15px; line-height: 1.3; }
  .settings-hero .space-hero-script { top: 30px; right: 96px; font-size: 14px; }
  .settings-hero .space-hero-mark { top: 16px; bottom: auto; right: 28px; font-size: 15px; }

  /* ---------- layout ---------- */
  .settings-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
  .settings-nav-col, .settings-side { display: grid; gap: var(--space-4); min-width: 0; }
  .settings-main { display: grid; gap: var(--space-4); min-width: 0; outline: none; }
  .settings-me { padding: var(--space-4); }
  .settings-me a { display: flex; align-items: center; gap: var(--space-4); min-width: 0; color: inherit; text-decoration: none; }
  .settings-me .avatar-xl { flex: none; width: 76px; height: 76px; font-size: 28px; }
  .settings-me a > span { display: grid; gap: 2px; min-width: 0; }
  .settings-me strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 700 18px/1.35 var(--font-sans); color: var(--text-primary); overflow-wrap: anywhere; }
  .settings-me strong .chip { font-size: 12px; }
  .settings-me a > span > span { font: var(--text-body); color: var(--text-primary); overflow-wrap: anywhere; }
  .settings-me small { display: flex; align-items: center; gap: 6px; min-width: 0; font: var(--text-caption); color: var(--text-muted); }
  .settings-me small > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-me small > .icon { flex: none; }
  .settings-nav { display: block; padding: var(--space-2); }
  .settings-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .settings-nav a { display: flex; align-items: center; gap: var(--space-4); min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-lg); color: var(--text-primary); font: 500 16px/1.3 var(--font-sans); text-decoration: none; }
  .settings-nav a > .icon { flex: none; color: var(--text-secondary); }
  .settings-nav a > span:not(.settings-soon) { white-space: nowrap; }
  .settings-nav a[aria-current="page"] { background: var(--surface-mint); color: var(--accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
  .settings-nav a[aria-current="page"] > .icon { color: var(--accent); }
  @media (hover: hover) { .settings-nav a:not([aria-current="page"]):hover { background: var(--surface-hover); } }
  .settings-soon { display: inline-flex; align-items: center; min-height: 24px; margin-left: auto; padding: 0 10px; border-radius: var(--radius-pill); background: var(--tone-gray-bg); font: 600 12px/1 var(--font-sans); color: var(--tone-gray-fg); white-space: nowrap; }

  /* ---------- cards and rows ---------- */
  .community .settings-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font: 700 18px/1.4 var(--font-sans); color: var(--text-primary); }
  .settings-card-title > .icon { color: var(--accent); }
  .settings-card-title .settings-soon, .settings-card-title .settings-level { margin-left: auto; }
  .settings-level { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-mint); font: 600 13px/1 var(--font-sans); color: var(--accent); }
  .settings-level.is-good { background: var(--success-subtle); color: var(--success); }
  .settings-level.is-mid { background: var(--warning-subtle); color: var(--warning); }
  .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
  .settings-handle { display: flex; align-items: center; gap: var(--space-2); }
  .settings-at { flex: none; font: 600 16px/1 var(--font-sans); color: var(--text-muted); }
  .community .settings-handle .input[readonly] { flex: 1; min-width: 0; background: var(--surface-muted); color: var(--text-secondary); }
  .community .settings-handle .btn { flex: none; min-height: var(--control-md); }
  .settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
  .settings-inline-link { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font: var(--text-body-sm); font-weight: 600; color: var(--accent); }
  .settings-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
  .settings-toggles { display: grid; margin: 0; padding: 0; list-style: none; }
  .settings-toggle { display: flex; align-items: center; gap: var(--space-3); min-height: 54px; padding: var(--space-1) 0; }
  .settings-toggle-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--surface-mint); color: var(--accent); }
  .settings-toggle-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
  .settings-toggle-text strong { font: 600 15px/1.4 var(--font-sans); color: var(--text-primary); }
  .settings-toggle-text small { font: var(--text-caption); color: var(--text-muted); overflow-wrap: anywhere; }
  .settings-locked { flex: none; font: var(--text-caption); color: var(--text-muted); }
  .settings-toggle .setting-switch { flex: none; }
  .settings-foot { display: flex; align-items: flex-start; gap: 6px; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-muted); font: var(--text-body-sm); font-size: 13px; color: var(--text-secondary); }
  .settings-foot > .icon { flex: none; margin-top: 2px; }
  .settings-foot a { color: var(--accent); font-weight: 600; }
  .settings-foot-warn { background: var(--warning-subtle); color: var(--warning); }
  .settings-rows { margin: 0; padding: 0; list-style: none; }
  .settings-rows li + li { border-top: 1px solid var(--border-subtle); }
  .settings-rows a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; color: inherit; text-decoration: none; }
  .settings-rows a > .icon:first-child { flex: none; color: var(--text-secondary); }
  .settings-rows a > span { display: grid; flex: 1; min-width: 0; }
  .settings-rows strong { font: 600 15px/1.4 var(--font-sans); }
  .settings-rows small { font: var(--text-body-sm); font-size: 13px; color: var(--text-muted); }
  .settings-rows a > .icon:last-child { flex: none; color: var(--text-muted); }
  .settings-theme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
  .settings-theme > span { margin-right: auto; font: var(--text-label); color: var(--text-secondary); }
  .community .settings-theme button { display: inline-grid; place-items: center; width: 52px; min-height: 36px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); color: var(--text-secondary); cursor: pointer; }
  .community .settings-theme button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
  .settings-section-head { display: grid; gap: 4px; padding: var(--space-1) var(--space-1) 0; }
  .community .settings-section-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 800 24px/1.35 var(--font-sans); color: var(--text-primary); }
  .settings-section-head h2 > .icon { color: var(--accent); }
  .settings-section-head p { margin: 0; font: var(--text-body); color: var(--text-secondary); }
  .community .settings-sub { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; font: 700 17px/1.4 var(--font-sans); color: var(--text-primary); }
  .community .settings-desc { margin: 0 0 var(--space-3); font: var(--text-body-sm); color: var(--text-secondary); }
  .settings-desc a { color: var(--accent); font-weight: 600; }
  .settings-bullets { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding-left: 1.2em; font: var(--text-body-sm); color: var(--text-secondary); }
  .settings-bullets a { color: var(--accent); }
  .settings-form-narrow { display: grid; gap: var(--space-4); max-width: 420px; }
  .settings-checks { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .settings-checks li { display: flex; align-items: center; gap: var(--space-2); font: var(--text-body-sm); }
  .settings-checks .is-ok { color: var(--success); }
  .settings-checks .is-todo { color: var(--warning); }
  .settings-radios { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
  .community .settings-radio { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); cursor: pointer; }
  .settings-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
  .community .settings-radio input[type="radio"] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--accent); }
  .settings-radio span { display: grid; gap: 2px; min-width: 0; }
  .settings-radio strong { font: 600 15px/1.4 var(--font-sans); }
  .settings-radio small { font: var(--text-body-sm); font-size: 13px; color: var(--text-muted); }
  .settings-push { display: flex; align-items: center; gap: var(--space-3); }
  .settings-push > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .settings-push strong { font: 600 15px/1.4 var(--font-sans); }
  .settings-push small { font: var(--text-body-sm); font-size: 13px; color: var(--text-muted); }
  .settings-device { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--surface-muted); color: var(--text-secondary); }
  .settings-perms { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
  .settings-perms .chip { flex: none; white-space: nowrap; }
  .settings-steps { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; counter-reset: step; }
  .settings-steps li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-mint); font: var(--text-body-sm); color: var(--text-primary); }
  .settings-steps li > .icon { flex: none; color: var(--accent); }
  .settings-preview { display: grid; gap: 2px; max-width: 420px; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-muted); font: var(--text-body-sm); color: var(--text-secondary); }
  .settings-preview-app { display: flex; align-items: center; gap: 6px; font: var(--text-caption); color: var(--text-muted); }
  .settings-preview strong { font: 600 14px/1.4 var(--font-sans); color: var(--text-primary); }
  .settings-sessions { margin: 0; padding: 0; list-style: none; }
  .settings-sessions li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
  .settings-sessions li + li { border-top: 1px solid var(--border-subtle); }
  .settings-session-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .settings-session-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 14px/1.4 var(--font-sans); }
  .settings-session-text small { font: var(--text-caption); color: var(--text-muted); }
  .settings-current { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--success-subtle); font: 600 12px/1 var(--font-sans); color: var(--success); white-space: nowrap; }
  .community .settings-danger-text { color: var(--danger); }
  .settings-danger { border-color: var(--danger-subtle); }
  .settings-danger .settings-sub { color: var(--danger); }
  .settings-soon-card { display: grid; justify-items: start; gap: var(--space-2); }
  .settings-soon-card .settings-soon { margin-left: 0; }

  /* ---------- right rail ---------- */
  .settings-bars { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
  .settings-bars li { display: flex; align-items: center; gap: var(--space-3); }
  .settings-bar-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--surface-mint); color: var(--accent); }
  .settings-bar-icon.is-warn { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
  .settings-bar-body { display: grid; gap: 6px; flex: 1; min-width: 0; }
  .settings-bar-label { display: flex; justify-content: space-between; gap: var(--space-2); }
  .settings-bar-label strong { font: 600 14px/1.3 var(--font-sans); }
  .settings-bar-label em { font: 700 13px/1.3 var(--font-sans); font-style: normal; color: var(--accent); white-space: nowrap; }
  .settings-bar-label em.is-warn { color: var(--tone-orange-fg); }
  .settings-status .space-meter.is-warn > span { background: var(--tone-orange-fg); }
  .settings-status .settings-desc { margin: 0; font-size: 13px; }
  .settings-quick { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .community .settings-quick a, .community .settings-quick button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px; padding: 0 var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); font: var(--text-label); text-align: left; text-decoration: none; cursor: pointer; }
  .settings-quick :is(a, button) > span { flex: 1; min-width: 0; }
  .settings-quick :is(a, button) > .icon:first-child { flex: none; color: var(--text-secondary); }
  .settings-quick a > .icon:last-child { flex: none; color: var(--text-muted); }
  .community .settings-quick .settings-logout, .community .settings-quick .settings-logout > .icon { color: var(--danger); }
  @media (hover: hover) { .community .settings-quick :is(a, button):hover { background: var(--surface-hover); } }
  .settings-help { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; }
  .settings-help-head { display: flex; align-items: center; gap: var(--space-2); }
  .settings-help-head > .icon:first-child { color: var(--accent); }
  .settings-help-head strong { flex: 1; font: 700 16px/1.4 var(--font-sans); }
  .settings-help-head > .icon:last-child { color: var(--text-muted); }
  .settings-help > span:last-child { font: var(--text-body-sm); font-size: 13px; color: var(--text-secondary); }
  .settings-cta { min-height: 150px; }

  /* ---------- dark theme ---------- */
  :root[data-theme="dark"] .settings-hero-art > img { opacity: .28; }

  /* ---------- responsive ---------- */
  @media (max-width: 1279px) {
    .settings-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .settings-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .settings-hero .space-hero-words { display: none; }
  }
  @media (max-width: 1023px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-pair { grid-template-columns: minmax(0, 1fr); }
    .settings-nav-col { grid-template-columns: minmax(0, 1fr); }
    /* The section list becomes a compact horizontal selector. */
    .settings-nav { overflow-x: auto; padding: var(--space-1); scrollbar-width: none; }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav ul { display: flex; gap: var(--space-1); min-width: max-content; }
    .settings-nav a { gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); font-size: 14px; white-space: nowrap; }
    .settings-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
    .settings-nav .icon { width: 18px; height: 18px; }
    .settings-nav .settings-soon { margin-left: var(--space-1); }
    .settings-me { display: none; }
    .settings-hero-copy { max-width: 70%; }
  }
  @media (max-width: 767px) {
    .settings-hero { padding: var(--space-5); }
    .settings-hero-copy { max-width: none; }
    .settings-hero-art { width: 100%; opacity: .35; }
    .settings-hero .space-hero-script, .settings-hero .space-hero-mark { display: none; }
    .community .settings-hero h1 { font-size: 26px; }
    .settings-grid, .settings-side { grid-template-columns: minmax(0, 1fr); }
    .settings-inline-link { margin-left: 0; }
    .settings-card { padding: var(--space-4); }
  }

  /* Detail Pass II-B: 차단·뮤트한 회원 */
  .settings-safety-text { margin: 0 0 var(--space-3); font: var(--text-body-sm); color: var(--text-secondary); }
  .settings-mini { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); font: var(--text-label); }
  .settings-mini span { color: var(--text-muted); font-weight: 400; }
  .settings-people { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  .settings-person { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
  .settings-person a { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: inherit; text-decoration: none; }
  .settings-person a span { display: grid; min-width: 0; }
  .settings-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-label); }
  .settings-person small { font: var(--text-caption); color: var(--text-muted); }
  .settings-person .btn { flex: none; }

  /* Phase D: the section highlight slides between settings items (motion.js). */
  .settings-nav ul.has-motion-indicator { --mi-bg: var(--surface-mint); --mi-shadow: inset 3px 0 0 var(--accent); --mi-radius: var(--radius-lg); }
  .settings-nav ul.has-motion-indicator a[aria-current="page"] { background: transparent; box-shadow: none; }
  .settings-nav a { transition: color var(--dur-slow) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
}