/* 설정 페이지 — grouped settings list. 디자인 토큰만 사용.
   페이지 헤더(.rl-archive-header)는 §3.5.11 단일 출처(rl_note_archive.css)를 그대로 차용.
   페이지 좌우 패딩은 .at-container(--rl-page-padding-x 14px) 단일 출처 — 본문 별도 padding-inline 금지. */

.rl-settings__group {
    background: var(--rl-surface-elev);
    border-radius: var(--rl-r-card);
    overflow: hidden;
    box-shadow: var(--rl-shadow-sm);
    /* 그룹 간 24px(sp-6) — [[feedback_group_spacing_principle]] / rl_note_archive.css와 정합 */
    margin-bottom: var(--rl-sp-6);
}

.rl-settings__item {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-5);
    /* §3.4.7 List Entry Card padding 14/16 정합 */
    padding: var(--rl-sp-4) var(--rl-sp-5);
    color: inherit;
    text-decoration: none;
    border-top: 1px solid var(--rl-line);
    transition: background-color .15s var(--rl-ease-out);
}

.rl-settings__item:first-child {
    border-top: 0;
}

@media (hover: hover) {
    .rl-settings__item:hover {
        background: var(--rl-primary-soft);
        text-decoration: none;
    }
}

.rl-settings__item:active {
    background: var(--rl-primary-soft);
}

.rl-settings__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rl-r-full);
    color: var(--rl-on-primary);
}

.rl-settings__icon svg {
    width: 60%;
    height: 60%;
}

.rl-settings__icon--neutral { background: var(--rl-text-4); }

.rl-settings__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rl-settings__label {
    font-size: var(--rl-fs-bodylg);
    font-weight: 500;
    line-height: var(--rl-lh-tight);
    color: var(--rl-ink);
}

.rl-settings__sub {
    font-size: var(--rl-fs-caption);
    line-height: var(--rl-lh-tight);
    color: var(--rl-text-3);
    margin-top: var(--rl-sp-1);
}

/* === 설정 — 개별 카드 레이아웃 (신규 시스템 패턴, design-system §3.4.9 (b)) ===
   기존 .rl-settings__group(divider 묶음 리스트)와 병존하는 두 번째 설정 레이아웃.
   각 설정 = 독립 카드(.rl-settings__card), 설명은 카드 밖 아래 캡션(.rl-settings__caption).
   같은 역할·동일 토큰 공유 — .rl-settings__group의 surface/radius/shadow + .rl-settings__item의 flex/gap/padding 병합.
   알림 설정(rl_settings_notify.php) 첫 채택, 타 설정 화면 재사용 가능. [[feedback_design_system_role_token]] */

/* card + caption = 한 그룹. 그룹 간 24px(sp-6) [[feedback_group_spacing_principle]] */
.rl-settings__cell {
    margin-bottom: var(--rl-sp-6);
}
.rl-settings__cell:last-child {
    margin-bottom: 0;
}

/* 독립 카드 — .rl-settings__group(표면) + .rl-settings__item(행 레이아웃) 토큰을 한 카드로 병합.
   상하 패딩은 그룹 행(sp-4 14)보다 작게(sp-2 8) — 개별 카드는 행마다 분리돼 호흡이 이미 충분. 좌우는 sp-5(16) 유지. */
.rl-settings__card {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-5);
    /* 상하 패딩 대신 고정 min-height(44px = §3 md 컨트롤 높이)로 카드 높이 항상 균일 —
       토글·이동·로그인 등 내용물(스위치 22 / 라벨 / chevron)이 달라도 행 높이 일정. 좌우는 sp-5(16) 유지. */
    min-height: 44px;
    padding: 0 var(--rl-sp-5);
    background: var(--rl-surface-elev);
    /* r-md(14) — 시스템 행 카드 가족(List Entry/Smart Entry/Next Step §3.4.7) 정합 radius */
    border-radius: var(--rl-r-md);
    box-shadow: var(--rl-shadow-sm);
    color: inherit;
    text-decoration: none;
}
.rl-settings__card .rl-settings__text {
    flex: 1 1 auto;
}
/* 라벨 — 개별 카드에선 그룹 행 라벨(bodylg/500)보다 한 단계 작고 가볍게(body/400).
   .rl-settings__label 공용 토큰은 형제 설정 페이지와 공유라 카드 스코프 안에서만 후퇴. */
.rl-settings__card .rl-settings__label {
    font-size: var(--rl-fs-body);
    font-weight: 400;
}

/* 캡션 — 카드 밖 아래. 카드 라벨과 좌측 정렬(padding-inline = 카드 좌패딩 sp-5).
   카드와는 그룹 내 간격이라 sp-2(8)로 가깝게 [[feedback_group_spacing_principle]] */
.rl-settings__caption {
    margin: var(--rl-sp-2) 0 0;
    padding-inline: var(--rl-sp-5);
    font-size: var(--rl-fs-caption);
    line-height: var(--rl-lh-tight);
    color: var(--rl-text-3);
}

/* 이동형(anchor) 카드 — hover/active 피드백. 토글 카드(div)는 무영향. */
a.rl-settings__card:active {
    background: var(--rl-primary-soft);
}
@media (hover: hover) {
    a.rl-settings__card:hover {
        background: var(--rl-primary-soft);
        text-decoration: none;
    }
}

/* 이동형 카드 우측 chevron — §3.1.5 chevron sub-rule(이동 affordance SVG 단일).
   약한 톤(text-4) 기본 → 카드 hover/focus 시 등장 + translateX(2px) 마이크로모션. */
.rl-settings__nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--rl-text-4);
    transition: color .15s var(--rl-ease-out), transform .15s var(--rl-ease-out);
}
@media (hover: hover) {
    a.rl-settings__card:hover .rl-settings__nav {
        color: var(--rl-primary);
        transform: translateX(2px);
    }
}
a.rl-settings__card:active .rl-settings__nav { color: var(--rl-primary); }

/* === 스위치 — .rl-swt 캐넌(CSS 출처 learn.css / 사양 design-system §3.3.1, rl_note 시트) 미러 ===
   이 페이지엔 learn.css 미적재라 동일 토큰·문법으로 self-contained 재정의(raw 값 0, 캐넌 dims 그대로).
   on-state는 캐넌이 .rl-sheet-item.is-on 부모 결합이라, 여기선 접근성 술어 aria-checked로 구동.
   스코프를 .rl-notify-settings 하위로 한정 — 설정 허브/타 화면 스위치에 무영향. */
.rl-notify-settings .rl-swt-btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    /* 상하 패딩 0 — 카드 높이는 .rl-settings__card min-height가 단일 결정(토글이 행 높이를 부풀리지 않음). 좌우만 tap 여유. */
    padding: 0 var(--rl-sp-1);
    line-height: 0;
    cursor: pointer;
}
.rl-notify-settings .rl-swt {
    position: relative;
    display: block;
    width: 38px;
    height: 22px;
    border-radius: var(--rl-r-full);
    background: var(--rl-line-2);
    transition: background var(--rl-dur-base);
    flex-shrink: 0;
}
.rl-notify-settings .rl-swt::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rl-on-primary);
    /* --rl-shadow-knob은 learn-tokens.css 전용(설정 페이지 미로드) — 노브 대비 확보 위해 셸 전역 토큰 --rl-shadow-sm로 폴백. */
    box-shadow: var(--rl-shadow-knob, var(--rl-shadow-sm));
    transition: transform var(--rl-dur-base);
}
.rl-notify-settings .rl-swt-btn[aria-checked="true"] .rl-swt {
    background: var(--rl-primary);
}
.rl-notify-settings .rl-swt-btn[aria-checked="true"] .rl-swt::after {
    transform: translateX(16px);
}
.rl-notify-settings .rl-swt-btn:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 2px;
}
.rl-notify-settings .rl-swt-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* === 계정 관리 화면 (rl_settings_account.php / _edit.php) 전용 ===
   같은 역할 컴포넌트(.rl-settings__*)를 공유하고, 계정 관리에서만 필요한 변형만 가산. */

/* 그룹 위 소제목 — auth.css `.rl-auth-group-label` 톤 정합(보조 caption). 그룹 내 간격이라
   카드와는 sp-2(8)로 가깝게([[feedback_group_spacing_principle]]: 그룹 내는 그룹 간 24보다 작게). */
.rl-settings__group-label {
    margin: 0 0 var(--rl-sp-2);
    padding-inline: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    color: var(--rl-text-3);
    letter-spacing: var(--rl-ls-tight);
}

/* 행 우측 트레일링 "편집" — margin-left:auto로 우측 끝 고정(아이콘 없는 행에서 text grow 불필요).
   text(좌)는 min-width:0이라 자연 shrink → .rl-settings__value 말줄임 동작. */
.rl-settings__action {
    flex-shrink: 0;
    /* 패딩만큼 음수 마진 — 탭 타깃/hover 칩은 키우되 행 높이·우측 정렬은 그대로. */
    margin: calc(var(--rl-sp-2) * -1) calc(var(--rl-sp-3) * -1) calc(var(--rl-sp-2) * -1) auto;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-primary);
    padding: var(--rl-sp-2) var(--rl-sp-3);
    border-radius: var(--rl-r-md);
    transition: background-color .15s var(--rl-ease-out);
}
@media (hover: hover) {
    .rl-settings__action:hover { background: var(--rl-primary-soft); }
}
.rl-settings__action:active { background: var(--rl-primary-soft); }
.rl-settings__action:focus-visible { outline: 2px solid var(--rl-primary); outline-offset: -2px; }
/* 삭제 액션 — danger 톤. [hidden]는 테마 button 룰에 덮일 수 있어 명시적으로 숨김 강제(사진 없을 때 비노출). */
.rl-settings__action--danger { color: var(--rl-bad); }
.rl-settings__action[hidden] { display: none; }

/* 편집 분리 행 — 카드(행) 전체가 아니라 우측 "편집"(.rl-settings__action)만 클릭 동작(계정 관리).
   행 자체의 hover/active 피드백 제거(클릭 대상 아님). */
.rl-settings__item--action { cursor: default; }
@media (hover: hover) {
    .rl-settings__item--action:hover { background: transparent; }
}
.rl-settings__item--action:active { background: transparent; }

/* 프로필 사진 행 — 좌측 원형 아바타 리딩(간격은 .rl-settings__item gap 사용). */
.rl-settings__item--photo .rl-avatar { flex: 0 0 auto; }
/* 파일 input — 화면 미노출(JS click 트리거만). [hidden]가 테마 input 룰에 덮이므로 명시 visually-hidden +
   position:absolute로 행 레이아웃에서 완전 제외(미적용 시 보이는 input이 행 폭을 먹어 깨짐). */
.rl-settings__item--photo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 계정 값(이름/닉/이메일/휴대폰 현재값) — .rl-settings__label과 동일 위계 타이포 + 1줄 말줄임.
   말줄임을 .rl-settings__label에 직접 주지 않는 이유: 설정 허브/알림 설정 라벨에 의도치 않은
   말줄임 회귀 방지(긴 이메일/휴대폰은 본 전용 클래스에서만 ellipsis). */
.rl-settings__value {
    font-size: var(--rl-fs-bodylg);
    font-weight: 500;
    line-height: var(--rl-lh-tight);
    color: var(--rl-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 값 미입력 — 입력 유도 placeholder 톤(auth input placeholder와 동일 text-4 + 400). */
.rl-settings__value--empty {
    color: var(--rl-text-4);
    font-weight: 400;
}

/* 프로필 행 — 값 + 사진 상태 pill을 한 줄에. 값은 shrink(말줄임 유지), pill은 고정폭. */
.rl-settings__valrow {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    min-width: 0;
}
.rl-settings__valrow .rl-settings__value { min-width: 0; }
/* 사진 상태 배지 — 연한 회색 pill(surface-2/text-3, micro). micro-pill 톤은 auth `.rl-auth-terms__opt`와 정합. */
.rl-settings__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--rl-sp-2);
    border-radius: var(--rl-r-full);
    background: var(--rl-surface-2);
    color: var(--rl-text-3);
    font-size: var(--rl-fs-micro);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: var(--rl-ls-tight);
    white-space: nowrap;
}

/* 탈퇴하기 행 — danger 톤. label만 --rl-bad로 후퇴(파괴적 액션 시각 단서). */
.rl-settings__item--danger .rl-settings__label {
    color: var(--rl-bad);
}