/* owner: member — S13 가입·로그인·재설정, S14 마이페이지, 알림 안내, 약관·정책. 색은 base.css 토큰만 쓴다. */

/* ---------- S13 가입 · 로그인 ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 340px); gap: 24px; justify-content: center; align-items: start; margin: 8px auto 0; }
.auth--single { grid-template-columns: minmax(0, 560px); }
.auth__card .tabs { padding: 0 16px; }
.auth__body { display: grid; gap: 18px; padding: 24px 28px 28px; }
.auth__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.35; text-wrap: balance; word-break: keep-all; }
.auth__lead { margin: -8px 0 0; color: var(--ink-2); font-size: 14.5px; text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font-size: 14px; }
.auth__links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.auth__links a:hover { color: var(--ink); }
.auth .form { display: grid; gap: 16px; }
.auth .check--box span, .agree__desc, .agree__note { word-break: keep-all; overflow-wrap: anywhere; }

.auth-step { display: grid; gap: 14px; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.auth-step:first-of-type { border-top: 0; padding-top: 0; }
.auth-step legend { display: flex; align-items: center; gap: 8px; float: left; width: 100%; margin-bottom: 2px; padding: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; }
.auth-step legend + * { clear: both; }
.auth-step__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--btn); color: #fff; font: 800 12.5px/1 var(--font-en); }
.auth-ok { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.auth-ok .i { width: 18px; height: 18px; }
.auth-real { margin-top: 4px; }
.input-group .input[readonly] { background: var(--panel-2); color: var(--ink-2); }
.auth .input-group > .btn, .set-row__form .input-group > .btn { height: auto; min-height: 44px; align-self: stretch; }

.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.pw-meter__bar { flex: none; width: 92px; height: 5px; overflow: hidden; border-radius: 3px; background: var(--line); }
.pw-meter__bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ink-3); transition: width .2s, background .2s; }
.pw-meter[data-level="1"] .pw-meter__bar i { width: 33%; background: var(--ink-3); }
.pw-meter[data-level="2"] .pw-meter__bar i { width: 66%; background: var(--bar); }
.pw-meter[data-level="3"] .pw-meter__bar i { width: 100%; background: var(--bar); }
.pw-meter__label { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }

.agree { display: grid; gap: 10px; }
.agree__all { width: 100%; }
.agree__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agree__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; }
.agree__list .check { width: 100%; }
.agree__list .field__error, .agree__desc { grid-column: 1 / -1; }
.agree__view { align-self: center; color: var(--ink-2); font-size: 13px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.agree__view code { font-size: 12px; white-space: nowrap; }
.agree__desc { margin: 0 0 2px 2px; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.agree__note { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.auth-nodelete .notice-box__body p { word-break: keep-all; overflow-wrap: anywhere; }

.auth__side { display: grid; gap: 16px; }
.auth-side { display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.auth-side p { margin: 0; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.auth-side__img { width: 120px; height: 120px; border-radius: 16px; }
.auth-side__links { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 가입 환영 · 탈퇴 완료 ---------- */
.welcome { max-width: 860px; margin: 8px auto 0; }
.welcome__body { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px; }
.welcome__img { width: 140px; height: 140px; border-radius: 18px; }
.welcome__text { display: grid; gap: 14px; }
.welcome__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.4; text-wrap: balance; word-break: keep-all; }
.welcome__lead { margin: 0; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.welcome__lead .lv { vertical-align: -3px; }
.welcome__next { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; word-break: keep-all; overflow-wrap: anywhere; }
.welcome__next a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- S14 마이페이지 ---------- */
.reconsent-band { margin-bottom: 16px; }

/* 프로필 영역: 네이비 바탕. 내 활동 탭은 레벨 단계와 지표 4개까지, 나머지 탭은 한 줄로 줄인다. */
.my-hero { background: var(--navy); color: #fff; border-top: 0; }
.my-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 20px 28px; }
.my-hero--full .my-hero__top { gap: 20px 32px; padding: 32px 36px 28px; }
.my-hero__who { display: flex; align-items: center; flex: 1 1 320px; gap: 16px; min-width: 0; }
.my-hero__gem { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--navy-600); border-radius: 14px; background: var(--navy-700); }
.my-hero__gem img { width: 42px; height: 42px; }
.my-hero--full .my-hero__gem { width: 92px; height: 92px; border-radius: 18px; }
.my-hero--full .my-hero__gem img { width: 64px; height: 64px; }
.my-hero__text { min-width: 0; }
.my-hero__eyebrow { margin: 0 0 6px; color: var(--lime); font: 800 12px/1 var(--font-en); letter-spacing: .16em; }
.my-hero__nick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.04em; line-height: 1.25; overflow-wrap: anywhere; }
.my-hero--full .my-hero__nick { font-size: 30px; }
.my-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; color: var(--ink-on-navy, #b3bac7); font-size: 13.5px; }
.my-hero__meta b { color: #fff; font-family: var(--font-en); }
.my-hero__meta .my-hero__lvname { color: #fff; font-weight: 700; }
.my-hero__track { flex: 1 1 380px; min-width: 0; }
.my-hero__track-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.my-hero__track-hd a { display: inline-flex; align-items: center; gap: 2px; color: #b3bac7; font-size: 13px; font-weight: 400; }
.my-hero__track-hd a:hover { color: #fff; }
.my-hero__track-hd .i { width: 14px; height: 14px; }
.my-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.my-track li { display: grid; gap: 8px; min-width: 0; color: #8f98a8; font-size: 12.5px; }
.my-track i { display: block; height: 6px; border-radius: 3px; background: var(--navy-600); }
.my-track span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.my-track img { flex: none; opacity: .4; }
.my-track li.is-on { color: #fff; }
.my-track li.is-on i { background: var(--lime); }
.my-track li.is-on img { opacity: 1; }
.my-track li.is-now b { color: var(--lime); }
.my-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--navy-600); }
.my-hero__stats > div { min-width: 0; padding: 18px 36px 20px; }
.my-hero__stats > div + div { border-left: 1px solid var(--navy-600); }
.my-hero__stats dt { color: #b3bac7; font-size: 13px; }
.my-hero__stats dd { margin: 4px 0 0; font: 800 32px/1.15 var(--font-en); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.my-hero__stats dd.is-hi { color: var(--lime); }
.my-hero__stats small { margin-left: 3px; color: #b3bac7; font: 600 14px var(--font); letter-spacing: 0; }
.my-hero .lv { vertical-align: 1px; }

/* 왼쪽 메뉴 + 본문 */
.my-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 24px; }
.my-side { display: grid; flex: 1 1 232px; gap: 16px; min-width: 0; max-width: 100%; }
.my-body { display: grid; flex: 999 1 560px; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.my-nav { padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-top: 2px solid var(--rule); }
.my-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.my-nav li a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: var(--r); color: var(--ink); font-size: 15px; font-weight: 600; transition: background .15s; }
.my-nav li a:hover { background: var(--hover); }
.my-nav li a .i { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.my-nav li a[aria-current="page"] { background: var(--btn); color: #fff; font-weight: 800; }
.my-nav li a[aria-current="page"] .i { color: var(--lime); }
.my-nav__count { display: grid; place-items: center; min-width: 24px; height: 22px; margin-left: auto; padding: 0 7px; border-radius: 11px; background: var(--lime); color: var(--navy); font: 800 12px/1 var(--font-en); }
.my-nav__out { margin: 8px 0 0; padding: 10px 14px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.my-nav__out a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.my-nav__out a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.my-report { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border: 1px solid var(--line-2); background: var(--panel-2); }
.my-report__t { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 800; }
.my-report__t .i { flex: none; width: 16px; height: 16px; color: var(--accent-ink); }
.my-report__b { margin: 0; color: var(--ink-2); font-size: 13.5px; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }

/* 켜고 끄는 스위치 버튼(폼 제출형) */
.switch-btn { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: var(--line-2); cursor: pointer; transition: background .15s; }
.switch-btn span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch-btn[aria-checked="true"] { background: var(--leaf); }
.switch-btn[aria-checked="true"] span { transform: translateX(20px); }
.switch-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 알림함 */
.inbox__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.inbox__tools form { display: contents; }
.inbox__row { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.inbox__dot { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: transparent; }
.inbox__row.is-unread .inbox__dot { background: var(--count); }
.inbox__row.is-unread .ttl__t { font-weight: 700; }
.inbox__row:not(.is-unread) .ttl { color: var(--ink-2); }
.inbox__t { display: grid; min-width: 0; gap: 2px; }
.inbox__t .ttl__t { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.inbox__b { overflow: hidden; color: var(--ink-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.inbox__read { display: inline; }
.inbox__empty .spot, .empty .spot { width: 140px; height: 140px; border-radius: 18px; }
.inbox__empty .empty__body { max-width: 36em; word-break: keep-all; text-wrap: pretty; }

/* 구독 설정 · 알림 경로 연결 */
.conn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.conn__card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2); }
.conn__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 800; }
.conn__title .i { width: 19px; height: 19px; color: var(--accent-ink); }
.conn__desc, .conn__ios, .conn__dev { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.conn__msg { margin: 0; min-height: 0; font-size: 13.5px; font-weight: 700; color: var(--accent-ink); word-break: keep-all; overflow-wrap: anywhere; }
.conn__msg:empty { display: none; }
.conn__msg.is-error { color: var(--err); }
.conn__ios a { text-decoration: underline; text-underline-offset: 3px; }
.conn__devices { display: grid; gap: 4px; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13.5px; }
.conn__devices li { display: flex; align-items: center; gap: 8px; }
.conn__devices li small { margin-right: auto; }
.conn__devices form { display: contents; }
.tg-code { display: grid; gap: 6px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--panel); }
.tg-code__label { display: flex; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.tg-code__value { display: flex; align-items: center; gap: 10px; margin: 0; }
.tg-code__value code { font: 800 26px/1.2 var(--font-en); letter-spacing: .14em; color: var(--ink); white-space: nowrap; }
.tg-code .field__hint code { white-space: nowrap; }
.tg-code .btn { justify-self: start; }

.sub-list__row { flex-wrap: wrap; }
.sub-list__name { display: grid; flex: 1; min-width: 0; gap: 2px; font-size: 14.5px; overflow-wrap: anywhere; }
.sub-list__name > a { color: var(--ink); }
.sub-list__name > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sub-list__note { color: var(--ink-3); font-size: 12.5px; word-break: keep-all; }
.sub-list__ctl form { display: inline-flex; align-items: center; gap: 4px; }
.select--sm { height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.sub-add { display: grid; gap: 16px; }
.sub-add .field, .sub-add .select, .sub-add .input { max-width: 560px; }
.sub-add .field__hint { word-break: keep-all; overflow-wrap: anywhere; }
.sub-add [data-sub-field][hidden] { display: none; }

/* 정보 수정: 항목마다 값과 ‘바꾸기’가 한 줄이고, 누르면 그 자리에서 입력란이 열린다 */
.set .panel__hd { min-height: 56px; }
.set-row { border-top: 1px solid var(--line); }
.set-row[open] { background: var(--panel-2); }
.set-row > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding: 8px 20px; list-style: none; cursor: pointer; }
.set-row > summary::-webkit-details-marker { display: none; }
.set-row > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.set-row__k { flex: 0 0 120px; font-size: 14px; font-weight: 800; }
.set-row__v { flex: 1 1 160px; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.set-row__v code { font-family: var(--font-en); white-space: nowrap; }
.set-row__v--dots { color: var(--ink-2); letter-spacing: .2em; }
.set-row__act { pointer-events: none; }
.set-row__close { display: none; }
.set-row[open] .set-row__open { display: none; }
.set-row[open] .set-row__close { display: inline; }
.set-row > summary:hover .set-row__act { border-color: var(--ink-3); }
.set-row__form { display: grid; gap: 14px; max-width: 560px; padding: 4px 20px 22px 156px; }
.set-row__form .form { display: grid; gap: 14px; }
.set-row__form .field__hint { word-break: keep-all; overflow-wrap: anywhere; }
.set-row__form > .btn, .set-row__form .form > .btn { justify-self: start; }
.set-row__form code { white-space: nowrap; }

.set-opt__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 20px; }
.set-opt__row + .set-opt__row { border-top: 1px solid var(--line); }
.set-opt__row > div { flex: 1 1 320px; min-width: 0; }
.set-opt h2 { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.035em; }
.set-opt h2 small { margin-left: 4px; color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.set-opt__b { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }

/* 탈퇴 */
.wd-form { display: grid; gap: 14px; max-width: 560px; }
.wd-form .check--box span { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 약관·정책 ---------- */
.policy-wrap { padding: 24px 28px 32px; }
.policy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
.policy-meta b { color: var(--ink); }
.policy-draft-note { margin-bottom: 20px; }
.policy__body { max-width: 46em; word-break: keep-all; overflow-wrap: anywhere; }
.policy__body h2 { margin: 2em 0 .6em; font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.policy__body h2:first-child { margin-top: 0; }
.policy__body h3 { margin: 1.5em 0 .5em; font-size: 15.5px; font-weight: 800; }
.policy__body p, .policy__body li { color: var(--ink); line-height: 1.75; text-wrap: pretty; }
.policy__body ol, .policy__body ul { padding-left: 1.4em; }
.policy__body li + li { margin-top: .35em; }
.policy__body table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: 14px; }
.policy__body th, .policy__body td { padding: 8px 10px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.policy__body th { background: var(--panel-2); font-weight: 700; }
.policy__body .policy-note { padding: 12px 14px; border-left: 3px solid var(--rule); background: var(--panel-2); }
.policy__body .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.policy__body td, .policy__body th { word-break: keep-all; overflow-wrap: normal; }
@media (max-width: 600px) { .policy__body table { min-width: 560px; } .policy__body td:first-child { min-width: 7em; } }
.policy-versions .row { gap: 8px; }
.policy-versions .ttl[aria-current="page"] .ttl__t { font-weight: 800; }

/* ---------- 알림 받는 방법 ---------- */
.guide-jump { margin: 0 0 16px; }
.guide-sec__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-sec__img { width: 100%; height: auto; border-radius: 14px; }
.guide-sec__text { display: grid; gap: 14px; min-width: 0; }
.guide-sec p { margin: 0; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.guide-sec .notice-box { margin: 0; }
.guide-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: gstep; }
.guide-steps li { position: relative; min-height: 28px; padding: 3px 0 0 40px; color: var(--ink); font-size: 14.5px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; counter-increment: gstep; }
.guide-steps li::before { content: counter(gstep); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line-2); border-radius: 50%; background: var(--panel); font: 800 13px/1 var(--font-en); color: var(--ink); }
.guide-steps code { white-space: nowrap; }

/* ---------- 반응형 ---------- */
@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 620px); }
  .my-hero__stats > div { padding: 16px 20px 18px; }
  .my-hero__stats dd { font-size: 26px; }
  .set-row__form { padding-left: 20px; }
}
@media (max-width: 768px) {
  .conn { grid-template-columns: minmax(0, 1fr); }
  .guide-sec__body { grid-template-columns: minmax(0, 1fr); }
  .guide-sec__img { max-width: 320px; }
  .welcome__body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .welcome__img { width: 112px; height: 112px; }
}
@media (max-width: 768px) {
  .my-layout { gap: 16px; margin-top: 16px; }
  .my-side { flex-basis: 100%; gap: 12px; }
  .my-nav { display: flex; align-items: center; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-top-width: 1px; }
  .my-nav::-webkit-scrollbar { display: none; }
  .my-nav ul { display: flex; gap: 8px; }
  .my-nav li { flex: none; }
  .my-nav li a { gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 20px; font-size: 14px; white-space: nowrap; }
  .my-nav li a .i { display: none; }
  .my-nav li a[aria-current="page"] { border-color: var(--btn); }
  .my-nav__count { margin-left: 2px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11.5px; }
  .my-nav__out { flex: none; margin: 0; padding: 0 6px; border-top: 0; white-space: nowrap; }
  .my-report { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 14px; }
  .my-report__t { grid-column: 1 / -1; }
  .my-report__b { grid-column: 1; }
  .my-report .btn { grid-column: 2; }
}
@media (max-width: 600px) {
  .my-hero__top, .my-hero--full .my-hero__top { padding: 18px 16px; gap: 16px; }
  .my-hero--full .my-hero__gem, .my-hero__gem { width: 64px; height: 64px; border-radius: 14px; }
  .my-hero--full .my-hero__gem img, .my-hero__gem img { width: 44px; height: 44px; }
  .my-hero--full .my-hero__nick, .my-hero__nick { font-size: 22px; }
  .my-hero__track { flex-basis: 100%; }
  .my-track { gap: 4px; }
  .my-track span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .my-track i { height: 5px; }
  .my-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-hero__stats > div { padding: 14px 16px; }
  .my-hero__stats > div:nth-child(3) { border-left: 0; }
  .my-hero__stats > div:nth-child(n+3) { border-top: 1px solid var(--navy-600); }
  .my-hero__stats dt { font-size: 12.5px; }
  .my-hero__stats dd { font-size: 24px; }
  .my-hero__stats small { font-size: 12.5px; }
  .set-row > summary { padding: 8px 16px; }
  .set-row__k { flex-basis: 100%; }
  .set-row__v { flex-basis: 0; }
  .set-row__form { padding: 4px 16px 20px; }
  .set-opt__row { padding: 16px; }
}
@media (max-width: 480px) {
  .auth { margin-top: 0; }
  .auth__body { padding: 18px 16px 22px; }
  .auth__title { font-size: 19px; }
  .policy-wrap { padding: 18px 16px 24px; }
  .inbox .panel__hd { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .inbox__tools { width: 100%; margin-left: 0; justify-content: space-between; }
  .agree__list li { grid-template-columns: minmax(0, 1fr); }
  .agree__view { justify-self: start; margin-left: 2px; }
  .tg-code__value code { font-size: 22px; }
  .sub-list__name { flex: 1 1 calc(100% - 90px); }
  .sub-list__ctl { width: 100%; justify-content: flex-end; }
}

/* 프로필 이미지 */
.my-avatar-link { position: relative; flex: none; text-decoration: none; color: var(--navy); }
.my-avatar, .pf-avatar { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: var(--lime); color: var(--navy); font-size: 28px; font-weight: 800; }
.my-avatar.has-image, .pf-avatar.has-image { background: #f5f5f0; }
.my-avatar img, .pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.my-avatar.is-preset img, .pf-avatar.is-preset img { object-fit: cover; padding: 0; }
.my-avatar-link__edit { position: absolute; bottom: -1px; right: -1px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); border: 2px solid var(--navy); }
.my-avatar-link__edit .i { width: 13px; height: 13px; }
.pf-photo { scroll-margin-top: 160px; }
.pf-photo__intro { display: flex; align-items: center; gap: 20px; }
.pf-avatar { width: 88px; height: 88px; }
.pf-photo__title { font-weight: 750; margin-bottom: 6px; text-wrap: balance; }
.pf-photo .field__hint { margin-top: 4px; }
.pf-photo__choices { min-width: 0; padding: 0; border: 0; margin: 6px 0 0; }
.pf-photo__choices legend { margin-bottom: 10px; }
.pf-photo__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pf-pick { position: relative; cursor: pointer; }
.pf-pick > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-pick__card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border: 2px solid var(--line); background: var(--panel); border-radius: var(--r); font-size: 12px; font-weight: 650; }
.pf-pick__card img, .pf-pick__initial { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.pf-pick__initial { display: grid; place-items: center; border-radius: 50%; background: var(--chip); font-size: 24px; font-weight: 800; }
.pf-pick > input:checked + .pf-pick__card { border-color: var(--ink); box-shadow: inset 0 -3px var(--lime); }
.pf-pick > input:focus-visible + .pf-pick__card { outline: 2px solid var(--ink); outline-offset: 3px; }
.pf-pick__card:hover { border-color: var(--ink-2); }
.pf-photo__upload { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-photo__upload input[type="file"] { max-width: 100%; padding: 10px; font-size: 12px; }
@media (max-width: 650px) {
  .pf-photo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-photo__intro { align-items: flex-start; gap: 14px; }
  .pf-avatar { width: 64px; height: 64px; font-size: 24px; }
  .my-avatar { width: 56px; height: 56px; font-size: 24px; }
}