/* User settings: a product page inside the shared reading shell. The shell's header, rails and
   column widths stay exactly as every other destination draws them; what does not carry over is
   the article prose scale. Settings are rows - a label and one line of help beside a single control
   in a fixed column - so the page uses the product type roles (DESIGN §B4), not reading prose. */
.public-page[data-section="settings"] .public-article { font-size: var(--t-body); line-height: 1.5 }
/* Reading prose sets Korean to its 1.75 reading leading; dense controls read better tighter. */
.public-page[data-section="settings"] .public-article:lang(ko),
.public-page[data-section="settings"] .public-article :lang(ko) { line-height: 1.6 }

.public-page[data-section="settings"] .public-article-header { margin: .5rem 0 2.5rem }
.public-page[data-section="settings"] .public-article-header h1 { margin:0 0 1rem; font-size:clamp(2.25rem,4vw,3.25rem); line-height:1.15 }
.public-page[data-section="settings"] .public-lede { font-size: var(--t-body) }

/* A section is its title over one bordered group of rows. Titles are semibold and labels medium in
   both languages (Pretendard has a shared variable weight range); the grouping keeps the hierarchy clear as well. */
.settings-sections { display: grid; gap:2.5rem }
.settings-section { min-width: 0; scroll-margin-top: 24px }
.public-page[data-section="settings"] .settings-section > h2 { margin: 0 0 8px; font-size: var(--t-title); line-height: 1.4 }
.settings-group { min-width: 0; padding:.25rem 1.25rem; border:0; border-radius:.75rem; background:var(--panel-2) }

/* One row per setting. The control column has one width everywhere, so every select and button
   on the page lines up however long the label's help text is. */
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px 24px; align-items: start; padding: 14px 0 }
.settings-row + .settings-row { border-top:0 }
.settings-row-text { min-width: 0 }
.public-page[data-section="settings"] :is(.settings-row-text > label, .settings-row-title) {
  display: block; margin: 0; max-width: 62ch; color: var(--ink); font-family: var(--sans); font-size: var(--t-body); font-weight: 500; line-height: inherit; letter-spacing: normal;
}
.public-page[data-section="settings"] .settings-help { margin: 2px 0 0; max-width: 62ch; color: var(--ink-2); font-size: var(--t-body-2) }
.public-page[data-section="settings"] .settings-note { margin: 4px 0 0; max-width: 62ch; color: var(--ink-3); font-size: var(--t-body-2) }
.public-page[data-section="settings"] .settings-note[data-error] { color: var(--crit) }
.settings-row-control { display: flex; justify-content: flex-end; min-width: 0 }
.settings-row-control select {
  width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: 500 var(--t-body-2)/1.4 var(--sans); cursor: pointer;
}
.settings-row-control select:hover { border-color: var(--ink-3) }
.settings-row-control select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.settings-row-control select:disabled { opacity: .48; cursor: wait }
/* Secondary action recipe (DESIGN §B6); the primary one keeps its site recipe at the row's size. */
.public-page[data-section="settings"] .settings-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink-2);
  font: 500 var(--t-body-2)/1.4 var(--sans); text-decoration: none; white-space: nowrap;
}
.public-page[data-section="settings"] .settings-button:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none }
.public-page[data-section="settings"] .settings-row-control .public-primary { min-height: 36px; margin: 0; padding: 6px 14px; font: 500 var(--t-body-2)/1.4 var(--sans); white-space: nowrap }
.settings-row-detail { grid-column: 1 / -1; min-width: 0 }

/* The identity: who is signed in, restrained to a mark and two facts. */
.settings-identity .settings-row-text { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start }
.settings-identity .settings-help { grid-column: 2 }
.settings-avatar {
  grid-row: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel-2); color: var(--ink-2); font: 600 var(--t-meta)/1 var(--sans); letter-spacing: .02em;
}
.settings-facts { display: grid; gap: 2px; margin: 0; min-width: 0 }
.settings-facts > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline }
.settings-facts dt { color: var(--ink-3); font-size: var(--t-body-2) }
.settings-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere }
.settings-facts > div:first-child dd { font-weight: 500 }

/* Terminal commands: the page's one wide element, kept to the row's scale with its copy action. */
.public-page[data-section="settings"] .settings-row-detail .docs-code-block { margin: 8px 0 0 }
.public-page[data-section="settings"] .settings-row-detail pre { padding: 10px 12px }
.public-page[data-section="settings"] .settings-row-detail pre code { font-size: var(--t-body-2); line-height: 1.6 }
.public-page[data-section="settings"] .settings-row-detail .settings-help { margin-top: 12px }
.public-page[data-section="settings"] .settings-row-detail .settings-note { margin-top: 8px }
.public-page[data-section="settings"] .settings-more { margin: 8px 0 0 }
.public-page[data-section="settings"] .settings-more a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--t-body-2); font-weight: 500 }

@media (max-width: 48rem) {
  .settings-group { padding: 0 12px }
  .settings-row { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .settings-row-control { justify-content: flex-start }
  .settings-row-control select { min-height: 44px }
  .public-page[data-section="settings"] :is(.settings-button, .settings-row-control .public-primary) { min-height: 44px }
  .settings-identity .settings-row-control { padding-left: 48px }
  /* Each fact stacks its label over its value, so a long address gets the column's whole width. */
  .settings-facts { gap: 6px }
  .settings-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0 }
}
/* Developer: an on/off setting is a checkbox switch, sized to the control column's touch target. */
.settings-row-control input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 6px 0; accent-color: var(--accent); cursor: pointer }
.settings-row-control input[type="checkbox"]:disabled { opacity: .48; cursor: not-allowed }
.settings-row-control input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
@media (max-width: 48rem) { .settings-row-control input[type="checkbox"] { margin: 10px 0 } }