/* ==========================================================================
   Settings Page Styles
   ========================================================================== */

/* Desktop: settings INDEX is a top-level page (accessed via sidebar menu, not push navigation).
   Sub-pages (Account, Membership, etc.) keep their back button. */
@media (min-width: 768px) {
  .web-layout .header:has(+ .settings-page--index) .header__left {
    display: none;
  }

  .web-layout .header:has(+ .settings-page--index) .header__center {
    position: static;
    transform: none;
    align-items: flex-start;
    text-align: left;
  }
}

.settings-page {
  /* 좌우 패딩은 main에서 처리 */
  padding-bottom: var(--spacing-section-gap);
}

/* ---------------------------------------------------------------------------
   Section
   --------------------------------------------------------------------------- */
.settings-section {
  margin-bottom: var(--spacing-section-gap);
}

.settings-section-title {
  font-size: var(--font-size-md);  /* 15px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: capitalize;
  padding: 0 0 var(--spacing-2);
}

/* ---------------------------------------------------------------------------
   Card Container
   --------------------------------------------------------------------------- */
.settings-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-list-sm);
}

/* ---------------------------------------------------------------------------
   Settings Item
   --------------------------------------------------------------------------- */
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-section);
  text-decoration: none;
  transition: background 0.15s ease;
  background: var(--color-card-fill);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.settings-item:active {
  background: var(--color-card-fill-active);
}

/* ---------------------------------------------------------------------------
   Settings Item - Left Side
   --------------------------------------------------------------------------- */
.settings-item-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-section);
}

.settings-item-left > svg {
  width: var(--icon-size-compact);
  height: var(--icon-size-compact);
  stroke-width: 2;
  stroke: var(--color-text-primary);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.settings-item-text {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

/* ---------------------------------------------------------------------------
   Settings Item - Right Side
   --------------------------------------------------------------------------- */
.settings-item-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.settings-item-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-tight);
}

.settings-item-value--upgrade {
  color: var(--color-premium-accent);
  font-weight: var(--font-weight-semibold);
}

.settings-item-chevron {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

.settings-item-chevron--open {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Settings Item — Selectable (locale picker, etc.)
   Used for detail pages where rows act as a single-choice list. Render the
   check icon on every row but keep it visible only on the --selected one,
   so JS can toggle the selection by flipping a class (no SVG injection).
   --------------------------------------------------------------------------- */
.settings-item--selectable .settings-item-check {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  stroke: var(--color-text-primary);
  stroke-width: 2;
  visibility: hidden;
}

.settings-item--selectable.settings-item--selected .settings-item-check {
  visibility: visible;
}

.settings-item--selected .settings-item-text {
  font-weight: var(--font-weight-medium);
}

/* The form wrapper around each row should be a no-op block so the row layout
   stays consistent — no extra spacing, no inherited button styles. */
.settings-form--row {
  display: block;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   Toggle Switch
   --------------------------------------------------------------------------- */
.settings-toggle {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--color-border-soft);
  border-radius: calc(var(--toggle-height) / 2);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.settings-toggle.active {
  background: var(--color-accent-green);
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  background: var(--color-bg-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-base);
}

.settings-toggle.active::after {
  transform: translateX(var(--toggle-thumb-offset));
}

/* ---------------------------------------------------------------------------
   Appearance Segment Control
   --------------------------------------------------------------------------- */
.settings-item--appearance {
  cursor: default;
}

.settings-item--appearance:active {
  background: none;
}

.settings-appearance-segment {
  display: flex;
  background: var(--color-border-soft);
  border-radius: calc(var(--btn-height-sm) / 2);
  padding: 2px;
  gap: 2px;
}

.settings-appearance-btn {
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--btn-height-sm) / 2 - 2px);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
}

.settings-appearance-btn.active {
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-base);
}

/* ---------------------------------------------------------------------------
   Disabled State (Coming Soon items)
   --------------------------------------------------------------------------- */
.settings-item--disabled {
  cursor: default;
}

.settings-item--disabled .settings-item-text {
  color: var(--color-text-muted);
}

.settings-item--disabled:active {
  background: none;
}

/* ---------------------------------------------------------------------------
   Danger State
   --------------------------------------------------------------------------- */
.settings-item.danger .settings-item-text {
  color: var(--color-danger);
}

.settings-item.danger > .settings-item-left > svg {
  stroke: var(--color-danger);
}

/* ---------------------------------------------------------------------------
   Version Info
   --------------------------------------------------------------------------- */
.settings-version {
  text-align: center;
  padding: var(--spacing-section-gap) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}