/* ═══════════════════════════════════════════════════════════════════
   STELDATABASE · WDS(Montage) 컴포넌트 레이어
   docs/DESIGN-SPEC.md §3.4(타이포 클래스) + §4(컴포넌트)를 그대로 구현.

   규칙:
   - 전부 wds- 접두사(맨 아래 설정 행 .set-row*·알림 항목 .alarm-* 블록만 앱 전용). 기존 클래스(.btn/.nav-btn 등)와 절대 충돌하지 않는다.
   - 모든 값은 style.css의 --wds-* / --sp-* / --radius-* / --elev-* 토큰만 참조한다.
     하드코딩 hex/rgba 금지. rgba 틴트는 반드시 rgba(var(--wds-*-rgb), a) 형태로.
   - 그라데이션 · 네온 글로우 없음(면과 선으로만 위계). hover 리프트는 누를 수 있는 것에만(2026-08-15 운영자, DESIGN-SPEC §1-2).
   - 이 파일은 index.html에서 style.css 다음에 로드되고, server.py의 ?v= 캐시
     버스팅 목록에도 등록되어 있어야 한다(등록 안 하면 캐시에 가려짐).
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── §3.4 타이포그래피 스케일 ───────────────────────── */

.wds-title1,.wds-title2,.wds-title3,
.wds-heading1,.wds-heading2,
.wds-headline1,.wds-headline2,
.wds-body1,.wds-body2,
.wds-label1,.wds-label2,
.wds-caption1,.wds-caption2{
    font-family:var(--font-body);   /* --font-display와 같은 글꼴(Inter + Noto Sans KR) */
    margin:0;
    color:var(--wds-label-normal);
}
.wds-title1{font-size:32px;line-height:1.30;font-weight:700;letter-spacing:-0.023em;}
.wds-title2{font-size:28px;line-height:1.32;font-weight:700;letter-spacing:-0.023em;}
.wds-title3{font-size:24px;line-height:1.34;font-weight:700;letter-spacing:-0.023em;}
.wds-heading1{font-size:20px;line-height:1.40;font-weight:700;letter-spacing:-0.0194em;}
.wds-heading2{font-size:19px;line-height:1.44;font-weight:600;letter-spacing:-0.0194em;}
.wds-headline1{font-size:18px;line-height:1.50;font-weight:600;letter-spacing:-0.0145em;}
.wds-headline2{font-size:17px;line-height:1.50;font-weight:600;letter-spacing:-0.0145em;}
.wds-body1{font-size:17px;line-height:1.60;font-weight:400;letter-spacing:0.0057em;}
.wds-body2{font-size:16px;line-height:1.60;font-weight:400;letter-spacing:0.0096em;}
.wds-label1{font-size:15px;line-height:1.44;font-weight:500;letter-spacing:0.0145em;}
.wds-label2{font-size:14px;line-height:1.44;font-weight:500;letter-spacing:0.0194em;}
.wds-caption1{font-size:13px;line-height:1.36;font-weight:400;letter-spacing:0.0252em;}
.wds-caption2{font-size:12px;line-height:1.34;font-weight:500;letter-spacing:0.0311em;}
/* 숫자(조회수·시청자 수·날짜) 전용 유틸 — §3.4 */
.wds-tabular-nums{font-variant-numeric:tabular-nums;}

/* ───────────────────────── §4.1 Button .wds-btn ───────────────────────── */

.wds-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-6);
    border:1px solid transparent;cursor:pointer;font-family:var(--font-body);
    box-sizing:border-box;white-space:nowrap;user-select:none;
    background:var(--accent-solid);color:var(--wds-static-white);
    min-height:40px;padding:0 var(--sp-16);border-radius:var(--radius2);
    font-size:14px;font-weight:500;letter-spacing:0.0145em;
}
.wds-btn:hover{background:var(--wds-primary-strong);}
.wds-btn:focus-visible{outline:2px solid rgba(var(--wds-primary-rgb),.55);outline-offset:2px;}
.wds-btn:disabled{background:var(--wds-interaction-disable);color:var(--wds-label-disable);cursor:not-allowed;transform:none;}

/* 변형 */
.wds-btn--solid{background:var(--accent-solid);color:var(--wds-static-white);border-color:transparent;}
.wds-btn--solid:hover{background:var(--accent-solid-hover);}
.wds-btn--outline{background:transparent;color:var(--accent-text);border-color:var(--wds-line-primary-strong);}
.wds-btn--outline:hover{background:var(--wds-fill-normal);}
.wds-btn--ghost{background:var(--wds-fill-alt);color:var(--wds-label-normal);border-color:transparent;}
.wds-btn--ghost:hover{background:var(--wds-fill-normal);}
.wds-btn--text{background:transparent;color:var(--wds-label-neutral);border-color:transparent;}
.wds-btn--text:hover{background:var(--wds-fill-normal);}
.wds-btn--danger{background:var(--danger-solid);color:var(--wds-static-white);border-color:transparent;}   /* 흰 글자 4.85:1(status.negative 위는 2.9~3.4, 2026-10-24) */
.wds-btn--danger:hover{filter:brightness(1.08);}
.wds-btn--danger:disabled{background:var(--wds-interaction-disable);color:var(--wds-label-disable);filter:none;}

/* 크기 */
.wds-btn--lg{min-height:48px;padding:0 var(--sp-20);border-radius:var(--radius2);font-size:14px;font-weight:500;letter-spacing:0.0145em;}
.wds-btn--md{min-height:40px;padding:0 var(--sp-16);border-radius:var(--radius2);font-size:14px;font-weight:500;letter-spacing:0.0145em;}
.wds-btn--sm{min-height:32px;padding:0 var(--sp-12);border-radius:var(--radius-sm);font-size:13px;font-weight:500;letter-spacing:0.0194em;}
.wds-btn--xs{min-height:26px;padding:0 var(--sp-10);border-radius:var(--radius-sm);font-size:12px;font-weight:500;letter-spacing:0.0252em;}

.wds-btn--full{width:100%;}
.wds-btn__icon{width:calc(1em + 2px);height:calc(1em + 2px);flex-shrink:0;display:inline-flex;}
:is(.wds-btn__icon,.wds-icon-btn,.wds-ico,.wds-ico-box) svg,.wds-fallback__icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}   /* 선 아이콘 공통(2026-10-24) */
.wds-btn__icon svg{width:100%;height:100%;stroke-width:1.6;}

/* ───────────────────────── §4.2 IconButton .wds-icon-btn ───────────────────────── */

.wds-icon-btn{
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;color:var(--wds-label-neutral);border:none;
    border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0;
}
.wds-icon-btn:hover{background:var(--wds-fill-normal);color:var(--wds-label-normal);}
.wds-icon-btn:focus-visible{outline:2px solid rgba(var(--wds-primary-rgb),.55);outline-offset:2px;}
.wds-icon-btn:disabled{color:var(--wds-label-disable);cursor:not-allowed;background:transparent;transform:none;}
.wds-icon-btn svg{width:20px;height:20px;stroke-width:1.6;}
.wds-icon-btn--lg{width:40px;height:40px;}
.wds-icon-btn--md{width:34px;height:34px;}
.wds-icon-btn--sm{width:28px;height:28px;}
.wds-icon-btn--sm svg{width:17px;height:17px;}
/* 아이콘 버튼 안에 .wds-ico(1em 크기)를 넣을 때도 맨 svg와 같은 크기가 되도록 */
.wds-icon-btn .wds-ico{font-size:20px;}
.wds-icon-btn--sm .wds-ico{font-size:17px;}

/* ───────────────────────── §4.3 Chip/FilterButton .wds-chip ───────────────────────── */

.wds-chip-group{display:flex;flex-wrap:wrap;gap:var(--sp-8);}
.wds-chip{
    display:inline-flex;align-items:center;gap:var(--sp-6);
    min-height:34px;padding:0 var(--sp-14);border-radius:var(--radius-pill);
    background:var(--wds-fill-alt);border:1px solid var(--wds-line-alt);
    color:var(--wds-label-neutral);font-family:var(--font-body);
    font-size:13px;font-weight:500;letter-spacing:0.0194em;
    cursor:pointer;white-space:nowrap;
}
.wds-chip:hover{background:var(--wds-fill-normal);}
.wds-chip:focus-visible{outline:2px solid rgba(var(--wds-primary-rgb),.55);outline-offset:2px;}
.wds-chip.is-active{
    background:rgba(var(--wds-primary-rgb),.14);
    border-color:var(--wds-line-primary-strong);
    color:var(--accent-text);   /* 다크 #69A5FF·라이트 #0054D1 — 옅은 파랑 위 글자 대비 4.5:1 이상(1.20) */
    font-weight:600;
}
.wds-chip__count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;min-height:18px;padding:0 5px;border-radius:var(--radius-pill);
    background:var(--wds-fill-strong);color:inherit;
    font-size:11px;font-weight:500;letter-spacing:0.0311em;
}

/* ───────────────────────── §4.4 Card .wds-card ───────────────────────── */

.wds-card{
    background:var(--wds-bg-normal);
    border:1px solid var(--wds-card-line,var(--wds-line-alt));   /* 라이트는 style.css가 한 단계 진하게(흰 카드가 #F7F7F8 위에서 경계가 안 보였다) */
    border-radius:var(--radius);
    padding:var(--sp-20) var(--sp-24);   /* 2026-09-10: 16 → 20/24. 제목·본문이 카드 가장자리에 붙어 보이지 않게 */
    box-sizing:border-box;
}
.wds-card--elevated{background:var(--wds-bg-elevated);}
.wds-card--interactive{cursor:pointer;}   /* transition은 아래 "호버 리프트" 블록 하나에 */
.wds-card--interactive:hover{border-color:var(--wds-line-normal);background:var(--wds-bg-elevated);}

/* ── 호버 리프트 (전역) ──────────────────────────────────────────────────
   사용자 요청(2026-08-15)으로 "누를 수 있는 모든 것"에 적용한다.
   DESIGN-SPEC §1-2가 원래 금지하던 효과이나 §1에 예외로 다시 명시했다.
   크기 규칙: 카드처럼 큰 면은 -4px, 버튼·칩·배지처럼 작은 컨트롤은 -2px.
   :active에서는 리프트를 풀어 눌리는 느낌을 남긴다.
   (.wds-card--lift / .wds-tag--lift 별칭은 쓰는 곳이 없어 2026-09-26 삭제) */
.wds-card--interactive{
    transition:background var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),
               transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.wds-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--elev-lg);}
.wds-card--interactive:active{transform:translateY(-1px);}

a.wds-tag,.wds-btn,.wds-icon-btn,.wds-chip{
    transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
               background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
               color var(--dur-fast) var(--ease);
}
a.wds-tag:hover,.wds-btn:hover,.wds-icon-btn:hover,.wds-chip:hover{
    transform:translateY(-2px);box-shadow:var(--elev-sm);
}
a.wds-tag:active,.wds-btn:active,.wds-icon-btn:active,.wds-chip:active{transform:translateY(0);}
/* 비활성 컨트롤은 뜨지 않는다 — 누를 수 없는데 누를 수 있어 보이면 안 된다 */
.wds-btn:disabled:hover,.wds-icon-btn:disabled:hover,.wds-chip:disabled:hover{transform:none;box-shadow:none;}

@media (prefers-reduced-motion:reduce){
    .wds-card--interactive,a.wds-tag,
    .wds-btn,.wds-icon-btn,.wds-chip{transition:none;}
    .wds-card--interactive:hover,a.wds-tag:hover,
    .wds-btn:hover,.wds-icon-btn:hover,.wds-chip:hover{transform:none;}
}
.wds-card--accent{box-shadow:inset 3px 0 0 0 var(--m-color, var(--wds-primary-normal));}

.wds-card__media{
    aspect-ratio:16/9;width:100%;border-radius:var(--radius-sm);
    background:var(--wds-fill-alt);overflow:hidden;display:block;
}
.wds-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.wds-card__title{
    font-family:var(--font-display,var(--font-body));font-size:17px;line-height:1.50;
    font-weight:600;letter-spacing:-0.0145em;color:var(--wds-label-normal);margin:0 0 var(--sp-4);
}
.wds-card__body{
    font-family:var(--font-body);font-size:15px;line-height:1.60;font-weight:400;
    letter-spacing:0.0096em;color:var(--wds-label-neutral);margin:0 0 var(--sp-8);
}
.wds-card__meta{
    font-family:var(--font-body);font-size:12px;line-height:1.36;
    letter-spacing:0.0252em;color:var(--wds-label-alternative);
}
.wds-card__footer{
    border-top:1px solid var(--wds-line-alt);
    padding-top:var(--sp-12);margin-top:var(--sp-12);
}

/* ───────────────────────── §4.5 Tag/ContentBadge .wds-tag ───────────────────────── */

.wds-tag{
    display:inline-flex;align-items:center;min-height:22px;padding:0 var(--sp-8);
    border-radius:var(--radius-xs);font-family:var(--font-body);
    font-size:12px;font-weight:600;letter-spacing:0.0311em;white-space:nowrap;   /* 11 → 12px (2026-09-26 가독성, 폰은 전부터 12) */
}
.wds-tag--neutral{background:var(--wds-fill-normal);color:var(--wds-label-neutral);}
.wds-tag--primary{background:rgba(var(--wds-primary-rgb),.14);color:var(--accent-text);}
.wds-tag--positive{background:rgba(var(--wds-positive-rgb),.14);color:var(--wds-status-positive);}
.wds-tag--cautionary{background:rgba(var(--wds-cautionary-rgb),.14);color:var(--caution-text);}
.wds-tag--negative{background:rgba(var(--wds-negative-rgb),.14);color:var(--danger-text);}   /* 라이트 #FF4242는 틴트 위 2.9:1 → --danger-text 4.9:1 (2026-10-20) */

.wds-tag--solid.wds-tag--neutral{background:var(--wds-interaction-inactive);color:var(--wds-static-white);}
.wds-tag--solid.wds-tag--primary{background:var(--wds-primary-heavy);color:var(--wds-static-white);}   /* normal(#3385FF) 위 흰 글자는 3.5:1 → heavy 5.0:1 (2026-09-26) */
.wds-tag--solid.wds-tag--positive{background:var(--wds-status-positive);color:var(--wds-static-black);}   /* 밝은 초록 위 흰 글자는 대비 1.98 → 검정 */
.wds-tag--solid.wds-tag--cautionary{background:var(--wds-status-cautionary);color:var(--wds-static-black);}   /* 주황 위 흰 글자는 2.2:1 → 검정 11:1 */
.wds-tag--solid.wds-tag--negative{background:var(--danger-solid);color:var(--wds-static-white);}
body.light .wds-tag--solid.wds-tag--neutral{color:var(--wds-static-black);}   /* 라이트의 옅은 회색(#989BA2) 위 흰 글자는 대비 2.78 → 검정 */
body.light .wds-tag--solid.wds-tag--positive{color:var(--wds-static-white);}   /* 라이트의 진한 초록(#007326) 위는 흰 글자가 6.0:1 — 검정은 3.5:1 */

/* ───────────────────────── §4.6 라이브 뱃지 .wds-live ───────────────────────── */

.wds-live{
    display:inline-flex;align-items:center;gap:var(--sp-6);
    min-height:22px;padding:0 var(--sp-10);border-radius:var(--radius-pill);
    background:rgba(var(--wds-positive-rgb),.14);
    border:1px solid rgba(var(--wds-positive-rgb),.43);
    color:var(--wds-status-positive);font-family:var(--font-body);   /* 2026-10-02 운영자 "방송 중·오프라인 폰트가 별로" — 고정폭 글꼴을 본문 글꼴로 */
    font-size:12px;font-weight:600;letter-spacing:var(--ls-label);white-space:nowrap;
}
.wds-live__dot{
    width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;
    animation:wdsLiveBlink 2s ease-in-out infinite;
}
@keyframes wdsLiveBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.wds-live--hiatus{background:color-mix(in srgb, var(--caution) 14%, transparent);border-color:color-mix(in srgb, var(--caution) 45%, transparent);color:var(--caution-text);}
.wds-live--off{
    background:var(--wds-fill-normal);border-color:transparent;color:var(--wds-label-neutral);
}
.wds-live--off .wds-live__dot{animation:none;opacity:1;}
@media (prefers-reduced-motion:reduce){
    .wds-live__dot{animation:none;}
}

/* ───────────────────────── §4.7 TextField .wds-field ───────────────────────── */

.wds-field__label{
    display:block;font-family:var(--font-body);font-size:13px;font-weight:500;
    letter-spacing:0.0194em;color:var(--wds-label-neutral);margin-bottom:var(--sp-6);
}
.wds-field{
    width:100%;box-sizing:border-box;
    background:var(--wds-bg-elevated);
    border:1px solid var(--wds-line-normal);
    border-radius:var(--radius-sm);
    padding:0 var(--sp-12);
    color:var(--wds-label-normal);
    font-family:var(--font-body);font-size:14px;
    outline:none;
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.wds-field::placeholder{color:var(--wds-label-alternative);}   /* assistive(.28)는 다크에서 1.7:1이라 안 보였다(2026-10-19) */
.wds-field:focus{
    border-color:var(--wds-primary-normal);
    box-shadow:0 0 0 3px rgba(var(--wds-primary-rgb),.16);
}
.wds-field.is-error{border-color:var(--wds-status-negative);}
.wds-field:disabled{background:var(--wds-interaction-disable);color:var(--wds-label-disable);cursor:not-allowed;}
.wds-field--lg{height:48px;}
.wds-field--md{height:40px;}
.wds-field--sm{height:34px;}
.wds-field__msg--error{
    font-family:var(--font-body);font-size:12px;line-height:1.36;letter-spacing:0.0252em;
    color:var(--danger-text);margin-top:var(--sp-6);
}
textarea.wds-field{min-height:104px;height:auto;padding:var(--sp-10) var(--sp-12);resize:vertical;line-height:1.6;}
select.wds-field{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    padding-right:var(--sp-32);cursor:pointer;
    background-repeat:no-repeat;background-position:right var(--sp-12) center;background-size:16px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989BA2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ───────────────────────── §4.8 Modal .wds-modal ───────────────────────── */

.wds-modal__scrim{
    position:fixed;inset:0;z-index:10000;
    background:var(--wds-material-dimmer);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;padding:var(--sp-24);
    box-sizing:border-box;
}
.wds-modal{
    display:flex;flex-direction:column;
    width:100%;max-width:520px;max-height:min(84vh,720px);
    background:var(--wds-bg-elevated);
    border:1px solid var(--wds-line-alt);
    border-radius:var(--radius-lg);
    box-shadow:var(--elev-xl);
    overflow:hidden;
    box-sizing:border-box;
}
.wds-modal--wide{max-width:720px;}
.wds-modal__header{
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
    padding:var(--sp-20) var(--sp-24) var(--sp-12);flex-shrink:0;
}
.wds-modal__title{
    font-family:var(--font-display,var(--font-body));font-size:20px;line-height:1.40;
    font-weight:700;letter-spacing:-0.0194em;color:var(--wds-label-normal);margin:0;
}
.wds-modal__body{padding:0 var(--sp-24);overflow-y:auto;flex:1;}
.wds-modal__footer{
    display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-8);
    padding:var(--sp-16) var(--sp-24) var(--sp-20);flex-shrink:0;
}
/* position:fixed 요소는 부모 display:none을 무시한다 → body 클래스 토글로 스크롤 락 */
body.wds-modal-open{overflow:hidden;}

/* ───────────────────────── §4.9 Tab / SegmentedControl ───────────────────────── */

.wds-tabs{display:flex;gap:var(--sp-4);border-bottom:1px solid var(--wds-line-alt);}
.wds-tab{
    position:relative;background:none;border:none;cursor:pointer;
    padding:var(--sp-10) var(--sp-14);
    font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0.0145em;
    color:var(--wds-label-alternative);
    white-space:nowrap;flex-shrink:0; /* 좁은 폰에서 라벨이 한 글자씩 세로로 쪼개지던 것 방지 */
    transition:color var(--dur-fast) var(--ease);
}
.wds-tab:hover{color:var(--wds-label-neutral);}
.wds-tab.is-active{color:var(--wds-label-normal);}
.wds-tab.is-active::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--wds-primary-normal);border-radius:2px 2px 0 0;
}
.wds-tab:focus-visible{outline:2px solid rgba(var(--wds-primary-rgb),.55);outline-offset:2px;}

.wds-segmented{
    display:inline-flex;gap:2px;padding:3px;
    background:var(--wds-fill-alt);border-radius:var(--radius-sm);
}
.wds-segmented__item{
    border:none;background:none;cursor:pointer;
    padding:var(--sp-6) var(--sp-12);border-radius:calc(var(--radius-sm) - 3px);
    font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0.0194em;
    color:var(--wds-label-neutral);   /* alternative는 바탕 위 4.49:1로 AA에 조금 못 미쳤다 */
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
/* 고른 칸 = 파란 틴트 + 파란 테두리 + 굵게 (2026-10-27 운영자 "선택 화면이 잘 안 보여" — 올린 면 색만으로는 다크 회색 바탕에서 거의 구분이 안 됐다) */
.wds-segmented__item.is-active{
    background:rgba(var(--accent-rgb),.18);color:var(--accent-text);font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.55);
}

/* ───────────────────────── §4.10 Avatar .wds-avatar ───────────────────────── */

.wds-avatar{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;border-radius:50%;overflow:hidden;
    background:var(--wds-fill-normal);color:var(--wds-label-normal);
    border:2px solid var(--wds-line-alt);
    font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0.0145em;
}
.wds-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.wds-avatar--xl{width:72px;height:72px;font-size:24px;}
.wds-avatar--lg{width:56px;height:56px;font-size:18px;}
.wds-avatar--md{width:40px;height:40px;font-size:14px;}
.wds-avatar--sm{width:32px;height:32px;font-size:12px;}
.wds-avatar--xs{width:24px;height:24px;font-size:10px;}
.wds-avatar--member{border-color:var(--m-color, var(--wds-primary-normal));}
/* 2026-09-24 운영자: 프로필 안쪽의 초록 점(::after)은 지웠다 — 테두리 링 + 은은한 바깥 광만 */
.wds-avatar.is-live{border-color:var(--wds-status-positive);box-shadow:0 0 0 3px rgba(var(--online-rgb),.22);}
/* 휴방(오늘 카페에 휴방 글 — app.js _memberHiatus) = 주황 테두리 + 옅은 광. 방송 중(초록)·오프라인(회색)과 한눈에 구분되게(1.26, 운영자) */
.wds-avatar.is-hiatus{border-color:var(--caution);box-shadow:0 0 0 3px color-mix(in srgb, var(--caution) 24%, transparent);}
.wds-avatar-group{display:inline-flex;align-items:center;}
.wds-avatar-group .wds-avatar{margin-left:-8px;border:2px solid var(--wds-bg-normal);}
.wds-avatar-group .wds-avatar:first-child{margin-left:0;}

/* ───────────────────────── §4.11 Skeleton .wds-skeleton ───────────────────────── */

.wds-skeleton{
    position:relative;overflow:hidden;display:block;
    background:var(--wds-fill-alt);border-radius:var(--radius-sm);
}
.wds-skeleton::after{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(90deg,
        rgba(var(--wds-neutral-rgb),0) 0%,
        rgba(var(--wds-neutral-rgb),.16) 50%,
        rgba(var(--wds-neutral-rgb),0) 100%);
    background-size:200% 100%;background-repeat:no-repeat;
    animation:wdsShimmer 1.4s ease-in-out infinite;
}
@keyframes wdsShimmer{
    0%{background-position:150% 0;}
    100%{background-position:-50% 0;}
}
.wds-skeleton--text{height:16px;border-radius:4px;}
.wds-skeleton--title{height:24px;border-radius:4px;}
.wds-skeleton--card{width:100%;height:100%;border-radius:var(--radius);}
.wds-skeleton--avatar{border-radius:50%;}
@media (prefers-reduced-motion:reduce){
    .wds-skeleton::after{animation:none;}
}

/* ───────────────────────── §4.12 FallbackView .wds-fallback ───────────────────────── */

.wds-fallback{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:var(--sp-8);
    padding:var(--sp-48) var(--sp-24);box-sizing:border-box;
}
.wds-fallback__icon{
    width:40px;height:40px;color:var(--wds-label-alternative);
    stroke-width:1.4;
}
.wds-fallback__title{
    font-family:var(--font-display,var(--font-body));font-size:17px;line-height:1.50;
    font-weight:600;letter-spacing:-0.0145em;color:var(--wds-label-neutral);margin:0;
}
.wds-fallback__desc{
    font-family:var(--font-body);font-size:15px;line-height:1.60;font-weight:400;
    letter-spacing:0.0096em;color:var(--wds-label-alternative);margin:0;max-width:360px;
}
.wds-fallback__action{margin-top:var(--sp-8);}
.wds-fallback--error .wds-fallback__icon{color:var(--wds-status-negative);}

/* ───────────────────────── §4.13 Toast/Snackbar .wds-toast ───────────────────────── */

.wds-toast{
    position:fixed;left:50%;bottom:var(--sp-32);transform:translateX(-50%);
    z-index:10001;display:flex;align-items:center;gap:var(--sp-8);
    max-width:min(420px,calc(100vw - var(--sp-32)));
    background:var(--wds-bg-elevated);
    border:1px solid var(--wds-line-normal);
    border-radius:var(--radius2);
    box-shadow:var(--elev-md);
    padding:var(--sp-12) var(--sp-16);
    font-family:var(--font-body);font-size:15px;line-height:1.60;
    letter-spacing:0.0096em;color:var(--wds-label-normal);
}
.wds-toast--positive{box-shadow:inset 3px 0 0 0 var(--wds-status-positive),var(--elev-md);}
.wds-toast--negative{box-shadow:inset 3px 0 0 0 var(--wds-status-negative),var(--elev-md);}

/* ───────────────────────── §4.14 Tooltip .wds-tooltip ───────────────────────── */

.wds-tooltip{
    display:inline-block;
    background:var(--wds-bg-elevated);
    border:1px solid var(--wds-line-normal);
    border-radius:var(--radius-sm);
    box-shadow:var(--elev-lg);
    padding:var(--sp-6) var(--sp-10);
    font-family:var(--font-body);font-size:12px;line-height:1.36;
    letter-spacing:0.0252em;color:var(--wds-label-normal);
    max-width:240px;
}

/* ───────────────────────── §4.15 Divider .wds-divider ───────────────────────── */

.wds-divider{width:100%;height:1px;border:none;background:var(--wds-line-alt);margin:0;}
.wds-divider--v{width:1px;height:auto;align-self:stretch;background:var(--wds-line-alt);}

/* ───────────────────────── §4.16 SectionHeader .wds-section-header ───────────────────────── */

.wds-section-header{
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12);
    margin-bottom:var(--sp-16);
}
.wds-section-header__title{
    font-family:var(--font-display,var(--font-body));font-size:20px;line-height:1.40;
    font-weight:700;letter-spacing:-0.0194em;color:var(--wds-label-normal);margin:0;
    display:inline-flex;align-items:center;gap:var(--sp-8);
}
.wds-section-header__title .wds-ico{color:var(--wds-primary-normal);}
.wds-section-header__subtitle{
    font-family:var(--font-body);font-size:12px;line-height:1.36;
    letter-spacing:0.0252em;color:var(--wds-label-alternative);margin:0;
}
.wds-section-header__action{flex-shrink:0;}

/* ───────────────────────── §4.17 Table .wds-table ───────────────────────── */

.wds-table{width:100%;border-collapse:collapse;font-family:var(--font-body);}
.wds-table thead{background:var(--wds-fill-alt);}
.wds-table th{
    text-align:left;padding:var(--sp-10) var(--sp-12);
    font-size:13px;font-weight:500;letter-spacing:0.0194em;color:var(--wds-label-neutral);
}
.wds-table td{
    padding:var(--sp-10) var(--sp-12);
    border-bottom:1px solid var(--wds-line-alt);
    font-size:14px;color:var(--wds-label-normal);
}
.wds-table tbody tr{transition:background var(--dur-fast) var(--ease);}
.wds-table tbody tr:hover{background:var(--wds-fill-alt);}
.wds-table th.wds-table__num,
.wds-table td.wds-table__num{text-align:right;font-variant-numeric:tabular-nums;}

/* ───────────────────────── §4.19 Icon .wds-ico ─────────────────────────
   이모지를 대신하는 monoline SVG 인라인 아이콘. 사이드바 아이콘과 같은 규격(stroke=currentColor, 1.6px).
   app.js의 ico(name)가 만들고, 정적 마크업은 data-ico="name"을 hydrateIcons()가 채운다. */
.wds-ico{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;vertical-align:-0.12em;}
.wds-ico svg{width:100%;height:100%;stroke-width:1.6;}
.wds-ico--sm{font-size:16px;}
.wds-ico--md{font-size:20px;}
.wds-ico--lg{font-size:24px;}

/* ───────────────────────── §4.20 IconBox .wds-ico-box ─────────────────────────
   리스트 행 앞의 아이콘 용기(Figma·Linear 알림/설정 리스트 패턴). 은은한 배경 + 아이콘 한 개. */
.wds-ico-box{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius2);
    background:var(--wds-fill-alt);color:var(--wds-label-neutral);flex-shrink:0;}
.wds-ico-box svg{width:18px;height:18px;stroke-width:1.6;}
.wds-ico-box--sm{width:30px;height:30px;border-radius:var(--radius-sm);}
.wds-ico-box--sm svg{width:16px;height:16px;}
.wds-ico-box--lg{width:44px;height:44px;}
.wds-ico-box--lg svg{width:22px;height:22px;}
.wds-ico-box--primary{background:rgba(var(--wds-primary-rgb),.12);color:var(--wds-primary-normal);}
.wds-ico-box--negative{background:rgba(var(--wds-negative-rgb),.12);color:var(--danger-text);}
.wds-ico-box--pink{background:rgba(var(--accent2-rgb),.14);color:var(--accent2);}
.wds-ico-box--cyan{background:rgba(var(--accent3-rgb),.14);color:var(--accent3-text);}
.wds-ico-box--green{background:rgba(var(--online-rgb),.14);color:var(--online);}

/* ───────────────────────── §4.21 SettingRow .set-row ─────────────────────────
   설정 카드 안의 한 줄: [아이콘 상자] 제목/설명 ... [토글]. */
.set-row{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-16) 0;border-top:1px solid var(--wds-line-alt);}
.set-row:last-child{padding-bottom:0;}
.set-row:first-child,.set-row[hidden]+.set-row{border-top:0;padding-top:0;}   /* 첫 행이 hidden(푸시 미지원 환경의 #push-card)이면 다음 행이 첫 행 */
.set-row__body{flex:1;min-width:0;}
.set-row__title{font-size:15px;font-weight:600;line-height:1.4;color:var(--wds-label-normal);letter-spacing:var(--ls-label,0);}
.set-row__desc{font-size:13px;line-height:1.5;color:var(--wds-label-alternative);margin-top:var(--sp-4);}
.set-row__ctl{display:flex;align-items:center;gap:var(--sp-10);flex-shrink:0;}
.set-row--top{align-items:flex-start;}     /* 설명이 길어 위 정렬이 맞는 행 */
.set-row__seg{margin-top:var(--sp-10);}           /* 설명 아래 고르기(세그먼트) — 좁은 폰에서도 오른쪽 칸을 차지하지 않게 */

/* ───────────────────────── §4.22 AlarmList .alarm-item ─────────────────────────
   상단바 알림 패널·알림 탭의 행. 읽지 않은 항목은 왼쪽 점 + 첫 줄만 굵게(2026-10-19 운영자 "알림창이 너무 눈아파" — 줄 전체를 파란 면 + 굵은 글씨로 칠하던 것).
   첫 줄 = 제목, 둘째 줄부터(노래 제목·예정 시각) = 보조 글자, 오른쪽 = 썸네일(있을 때). */
.alarm-head{display:flex;align-items:center;gap:var(--sp-8);padding:0 var(--sp-4) var(--sp-10);border-bottom:1px solid var(--wds-line-alt);margin-bottom:var(--sp-6);}
.alarm-head__title{font-size:14px;font-weight:700;color:var(--wds-label-normal);letter-spacing:-0.0194em;}
.alarm-head__actions{margin-left:auto;display:flex;gap:var(--sp-2);}
.alarm-item{display:flex;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-16);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:background .15s;}
.alarm-item:hover{background:var(--wds-fill-alt);}
.alarm-item__body{flex:1;min-width:0;}
.alarm-item__text{font-size:14px;line-height:1.45;font-weight:500;color:var(--wds-label-neutral);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere;}
.alarm-item--unread .alarm-item__text{font-weight:600;color:var(--wds-label-normal);}
.alarm-item__sub{font-size:13px;line-height:1.45;color:var(--wds-label-alternative);margin-top:1px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-line;}   /* 예약 영상: 노래 제목·시각 두 줄(줄바꿈 유지) */
.alarm-item__meta{font-size:12px;line-height:1.4;color:var(--wds-label-alternative);margin-top:4px;display:flex;flex-wrap:wrap;gap:0 var(--sp-6);align-items:center;}
.alarm-item__who{color:var(--m-fg,var(--wds-label-neutral));font-weight:600;}
.alarm-item__kind{font-size:12px;line-height:1.4;font-weight:600;color:var(--accent-text);letter-spacing:var(--ls-caption);}   /* 종류 줄("유튜브 새 영상") — 메타의 "어디"와 다를 때만(2026-10-28) */
.alarm-item__dot{position:absolute;left:5px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--wds-primary-normal);}
.alarm-item__thumb{width:84px;aspect-ratio:16/9;flex-shrink:0;border-radius:var(--radius-sm);object-fit:cover;background:var(--wds-fill-alt);margin-top:2px;}
.alarm-group{font-size:12px;font-weight:600;letter-spacing:0.0252em;color:var(--wds-label-alternative);padding:var(--sp-8) var(--sp-10) var(--sp-4);}