/* 컴포넌트
   치수는 한 세트로 움직인다 — 크기를 고르면 높이·반경·글자·패딩이 따라온다. */

/* ══ 버튼 ══════════════════════════════════════════════ */
.btn{
  --h:var(--c-md-h); --r:var(--c-md-r); --fs:var(--c-md-fs); --px:var(--c-md-px); --gap:var(--c-md-gap);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--gap);
  height:var(--h);padding-inline:var(--px);border-radius:var(--r);
  font-size:var(--fs);font-weight:600;line-height:1;letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-2) var(--ease-inout),
             color var(--d-2) var(--ease-inout),
             box-shadow var(--d-2) var(--ease-inout),
             opacity var(--d-2) var(--ease-inout),
             transform var(--d-1) var(--ease-inout);
}
.btn:active:not(:disabled){transform:scale(.975)}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
.btn svg{flex:none}

.btn--xs{--h:var(--c-xs-h);--r:var(--c-xs-r);--fs:var(--c-xs-fs);--px:var(--c-xs-px);--gap:var(--c-xs-gap)}
.btn--sm{--h:var(--c-sm-h);--r:var(--c-sm-r);--fs:var(--c-sm-fs);--px:var(--c-sm-px);--gap:var(--c-sm-gap)}
.btn--md{--h:var(--c-md-h);--r:var(--c-md-r);--fs:var(--c-md-fs);--px:var(--c-md-px);--gap:var(--c-md-gap)}
.btn--lg{--h:var(--c-lg-h);--r:var(--c-lg-r);--fs:var(--c-lg-fs);--px:var(--c-lg-px);--gap:var(--c-lg-gap)}
.btn--xl{--h:var(--c-xl-h);--r:var(--c-xl-r);--fs:var(--c-xl-fs);--px:var(--c-xl-px);--gap:var(--c-xl-gap)}
.btn--pill{--r:var(--r-full)}

/* 적중 영역 보장 — 보이는 크기는 그대로 두고 누를 수 있는 범위만 44px로 넓힌다.
   손가락은 28px 버튼을 정확히 못 누른다. */
.btn--xs::before,.btn--sm::before,.btn--square.btn--md::before,
.segment__item::before,.toc-link::before,.quotes__nav::before,.totop::before{
  content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;
  width:max(100%,44px);height:max(100%,44px)}
.btn--xs,.btn--sm,.segment__item,.toc-link,.quotes__nav,.totop{position:relative}
.btn--block{display:flex;width:100%}
.btn--square{--px:0;width:var(--h)}

/* 주버튼 — 화면당 하나. 두 개가 나란히 있으면 둘 다 약해진다. */
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover:not(:disabled){background:var(--accent-hover)}
.btn--primary:active:not(:disabled){background:var(--accent-active)}

/* 보조 — 단색 회색이 아니라 반투명 틴트. 어떤 배경에도 얹힌다. */
.btn--secondary{background:var(--tint);color:var(--ink-body)}
.btn--secondary:hover:not(:disabled){background:var(--tint-hover)}
.btn--secondary:active:not(:disabled){background:var(--tint-active)}

.btn--soft{background:var(--accent-soft);color:var(--accent-text)}
.btn--soft:hover:not(:disabled){background:var(--accent-soft-hover)}

.btn--outline{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-body);background:transparent}
.btn--outline:hover:not(:disabled){background:var(--tint);box-shadow:inset 0 0 0 1px var(--ink-subtle)}

.btn--ghost{background:transparent;color:var(--ink-muted)}
.btn--ghost:hover:not(:disabled){background:var(--tint);color:var(--ink-body)}

.btn--invert{background:var(--ink);color:var(--canvas)}
.btn--invert:hover:not(:disabled){opacity:.86}

.btn--danger{background:var(--red-600);color:#fff}
.btn--danger:hover:not(:disabled){background:var(--red-700)}

/* 처리 중 */
.btn[data-busy]{pointer-events:none}
.btn[data-busy] .btn__label{opacity:0}
.btn[data-busy]::after{
  content:"";position:absolute;width:1em;height:1em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .62s linear infinite}

/* ── 화살표 알약 ────────────────────────────────────────
   이 시스템의 대표 CTA. 연한 알약 안에 진한 원형 화살표가 들어간다.
   올리면 화살표가 오른쪽으로 조금 밀린다. */
.pill{
  display:inline-flex;align-items:center;gap:12px;
  height:52px;padding:0 6px 0 22px;border-radius:var(--r-full);
  background:var(--tint);color:var(--ink);
  font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:background-color var(--d-2) var(--ease-inout),transform var(--d-1) var(--ease-inout)}
.pill:hover{background:var(--tint-hover)}
.pill:active{transform:scale(.985)}
.pill__dot{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:var(--canvas);flex:none;
  transition:transform var(--d-3) var(--ease-out)}
.pill:hover .pill__dot{transform:translateX(3px)}
.pill--accent{background:var(--accent);color:var(--accent-ink)}
.pill--accent:hover{background:var(--accent-hover)}
.pill--accent .pill__dot{background:var(--accent-ink);color:var(--accent)}
.pill--lg{height:60px;padding-left:28px;font-size:17px}
.pill--lg .pill__dot{width:48px;height:48px}
.pill--sm{height:44px;padding-left:18px;font-size:15px;gap:10px}
.pill--sm .pill__dot{width:34px;height:34px}

/* 글자 링크 — 밑줄은 올렸을 때만 나타난다 */
.link{color:var(--accent-text);font-weight:500;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color var(--d-2) var(--ease-inout)}
.link:hover{text-decoration-color:currentColor}
.link-arrow{position:relative;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;color:var(--accent-text);font-weight:600}
.link-arrow svg{transition:transform var(--d-3) var(--ease-out)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ══ 배지 ══════════════════════════════════════════════
   점을 찍지 않는다. 면과 글자만으로 구분한다. */
.badge{display:inline-flex;align-items:center;gap:5px;
  height:26px;padding-inline:9px;border-radius:var(--r-sm);
  font-size:var(--t-micro);font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.badge--lg{height:32px;padding-inline:12px;font-size:var(--t-caption);border-radius:var(--r-md)}
.badge--pill{border-radius:var(--r-full)}
.badge--neutral{background:var(--tint);color:var(--ink-muted-alt)}
.badge--accent{background:var(--accent-soft);color:var(--accent-text)}
.badge--green{background:var(--green-50);color:var(--green-800)}
.badge--amber{background:var(--amber-50);color:var(--amber-900)}
.badge--red{background:var(--red-50);color:var(--red-800)}
.badge--violet{background:var(--violet-50);color:var(--violet-800)}
.badge--solid{background:var(--ink);color:var(--canvas)}
.badge--outline{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-muted)}
[data-theme="dark"] .badge--green{background:rgba(46,160,102,.16);color:#7FD9A8}
[data-theme="dark"] .badge--amber{background:rgba(180,140,20,.16);color:#E8C45F}
[data-theme="dark"] .badge--red{background:rgba(200,70,60,.16);color:#F09A92}
[data-theme="dark"] .badge--violet{background:rgba(150,90,210,.16);color:#CBA6F0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  .badge--green{background:rgba(46,160,102,.16);color:#7FD9A8}
  .badge--amber{background:rgba(180,140,20,.16);color:#E8C45F}
  .badge--red{background:rgba(200,70,60,.16);color:#F09A92}
  .badge--violet{background:rgba(150,90,210,.16);color:#CBA6F0}}}

/* 상태 점 — 배지와 따로. 정말 상태를 나타낼 때만 쓴다. */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}
.dot--live{background:var(--green-500);box-shadow:0 0 0 3px var(--green-50)}
.dot--idle{background:var(--neutral-400)}
.dot--warn{background:var(--amber-500)}
.dot--down{background:var(--red-500)}

/* ══ 카드 ══════════════════════════════════════════════
   테두리와 그림자를 동시에 주지 않는다. 면이 다르면 테두리가 필요없다. */
.card{background:var(--surface);border-radius:var(--r-xl);padding:24px;
  transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out)}
.card--line{box-shadow:inset 0 0 0 1px var(--line)}
.card--raise{box-shadow:var(--sh-sm)}
.card--float{box-shadow:var(--sh-lg)}
.card--lg{padding:32px;border-radius:var(--r-2xl)}
.card--sm{padding:16px;border-radius:var(--r-lg)}
.card--flush{padding:0;overflow:hidden}
.card--link{cursor:pointer}
@media (hover:hover){
  .card--link:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
}
.card--link:active{transform:translateY(-1px)}
.card__media{aspect-ratio:16/10;background:var(--canvas-sunken);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:20px 24px 24px}

/* 특징 항목 — 카드가 아니다. 아이콘·제목·설명만. */
.feature{display:flex;flex-direction:column;gap:10px}
.feature__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);
  background:var(--accent-soft);color:var(--accent-text);margin-bottom:6px}
.feature__title{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);
  letter-spacing:var(--t-heading-sm-ls);font-weight:600;color:var(--ink)}
.feature__desc{color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}

/* 통계 — 숫자가 주인공일 때만 */
.stat{display:flex;flex-direction:column;gap:4px}
.stat__value{font-size:var(--t-display-sm);line-height:1.1;font-weight:700;
  letter-spacing:var(--t-display-sm-ls);color:var(--ink);font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--t-body-sm);color:var(--ink-muted)}

/* ══ 입력 ══════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:var(--t-body-sm);font-weight:600;color:var(--ink-body)}
.field__help{font-size:var(--t-caption);color:var(--ink-muted)}
.field__error{font-size:var(--t-caption);color:var(--red-700);font-weight:500}

.input,.textarea,.select{
  width:100%;min-height:var(--c-md-h);padding:11px 14px;
  background:var(--canvas-alt);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--c-md-r);
  font-size:var(--t-body-md);line-height:1.5;
  transition:background-color var(--d-2) var(--ease-inout),
             border-color var(--d-2) var(--ease-inout),
             box-shadow var(--d-2) var(--ease-inout);
  appearance:none}
.input::placeholder,.textarea::placeholder{color:var(--ink-disabled)}
.input:hover:not(:focus),.textarea:hover:not(:focus),.select:hover:not(:focus){
  background:var(--canvas-sunken);border-color:var(--line-strong)}
.input:focus,.textarea:focus,.select:focus{
  background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--red-500);background:var(--red-50)}
.input:disabled,.textarea:disabled,.select:disabled{color:var(--ink-disabled);cursor:not-allowed}
.input--lg{min-height:var(--c-lg-h);border-radius:var(--c-lg-r);padding:14px 16px}
.textarea{min-height:104px;resize:vertical;line-height:1.6}
.select{padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5' stroke='%236E7680' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

.input-group{position:relative;display:flex;align-items:center}
.input-group__icon{position:absolute;left:14px;color:var(--ink-subtle);pointer-events:none}
.input-group .input{padding-left:42px}

/* 선택 컨트롤 — 적중 영역 44px */
.choice{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.choice input{width:20px;height:20px;accent-color:var(--accent);flex:none;cursor:pointer}
.choice__text{font-size:var(--t-body-sm);color:var(--ink-body)}

.switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__track{width:46px;height:28px;border-radius:var(--r-full);background:var(--neutral-300);
  transition:background-color var(--d-3) var(--ease-inout);flex:none}
.switch__knob{position:absolute;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(16,24,48,.2);transition:transform var(--d-3) var(--ease-spring)}
.switch input:checked ~ .switch__track{background:var(--accent)}
.switch input:checked ~ .switch__knob{transform:translateX(18px)}
.switch input:focus-visible ~ .switch__track{outline:2px solid var(--focus);outline-offset:2px}
[data-theme="dark"] .switch__track{background:var(--neutral-700)}

/* 분절 컨트롤 — 배타 선택. 탭과 다르다. */
.segment{display:inline-flex;padding:3px;gap:2px;background:var(--tint);border-radius:var(--r-md)}
.segment__item{height:38px;padding-inline:14px;border-radius:calc(var(--r-md) - 3px);
  font-size:var(--t-body-xs);font-weight:600;color:var(--ink-muted);cursor:pointer;
  transition:background-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout)}
.segment__item:hover{color:var(--ink-body)}
.segment__item[aria-pressed="true"],.segment__item[aria-selected="true"],.segment__item[data-on]{
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-xs)}

/* ══ 탭 ══════════════════════════════════════════════ */
.tabs__list{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  box-shadow:inset 0 -1px 0 var(--line)}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{flex:none;height:48px;padding-inline:14px;font-size:var(--t-body-sm);font-weight:600;
  color:var(--ink-muted);cursor:pointer;white-space:nowrap;
  transition:color var(--d-2) var(--ease-inout)}
.tabs__tab:hover{color:var(--ink-body)}
.tabs__tab[aria-selected="true"]{color:var(--ink)}
.tabs__ink{position:absolute;bottom:0;left:0;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--d-4) var(--ease-out),width var(--d-4) var(--ease-out)}
.tabs__panel{padding-top:24px}

/* ══ 아코디언 ══════════════════════════════════════════ */
.accordion__item{box-shadow:inset 0 -1px 0 var(--line)}
.accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:68px;padding:20px 4px;text-align:left;
  font-size:var(--t-body-lg);font-weight:600;color:var(--ink);cursor:pointer;letter-spacing:-.01em}
.accordion__chev{flex:none;width:20px;height:20px;color:var(--ink-subtle);
  transition:transform var(--d-3) var(--ease-out),color var(--d-2) var(--ease-inout)}
.accordion__trigger:hover .accordion__chev{color:var(--ink-body)}
.accordion__trigger[aria-expanded="true"] .accordion__chev{transform:rotate(180deg)}
.accordion__panel{overflow:hidden;height:0;transition:height var(--d-4) var(--ease-inout)}
.accordion__body{padding:0 4px 24px;color:var(--ink-muted);
  font-size:var(--t-body-md);line-height:var(--t-body-md-lh);max-width:52rem}

/* ══ 드롭다운 ══════════════════════════════════════════ */
.menu{position:fixed;z-index:var(--z-pop);min-width:200px;padding:6px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
  max-height:min(62vh,440px);overflow-y:auto;
  transform-origin:top left}
.menu[data-side="top"]{transform-origin:bottom left}
.menu[data-align="end"]{transform-origin:top right}
.menu[data-side="top"][data-align="end"]{transform-origin:bottom right}
.menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:9px 12px;border-radius:var(--r-sm);text-align:left;cursor:pointer;
  font-size:var(--t-body-sm);color:var(--ink-body);
  transition:background-color var(--d-1) var(--ease-inout)}
.menu__item:hover{background:var(--tint)}
.menu__item[aria-checked="true"]{color:var(--accent-text);font-weight:600;background:var(--accent-soft)}
.menu__sep{height:1px;margin:6px 4px;background:var(--line)}
.menu__label{padding:8px 12px 4px;font-size:var(--t-nano);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-subtle)}

/* 좁은 화면에서는 아래에서 올라오는 시트로 바뀐다 */
@media (max-width:639px){
  .menu{left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
    width:auto;max-width:none;max-height:72dvh;
    border-radius:var(--r-3xl) var(--r-3xl) 0 0;
    padding:10px 10px calc(10px + var(--safe-b));
    box-shadow:var(--sh-xl);transform-origin:bottom center}
  .menu::before{content:"";display:block;width:36px;height:4px;border-radius:var(--r-full);
    background:var(--line-strong);margin:2px auto 10px}
  .menu__item{min-height:52px;font-size:var(--t-body-md)}
  .menu[data-state="open"]{animation:sheet-up var(--d-5) var(--ease-sheet) both}
}

/* ══ 오버레이: 시트·모달 ═══════════════════════════════ */
.overlay{position:fixed;inset:0;z-index:var(--z-modal)}
.overlay[hidden]{display:none}
.overlay__scrim{position:absolute;inset:0;background:var(--scrim);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

.sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  max-height:min(88dvh,760px);background:var(--surface);
  border-radius:var(--r-3xl) var(--r-3xl) 0 0;box-shadow:var(--sh-xl);
  padding-bottom:var(--safe-b)}
.sheet__grip{flex:none;display:grid;place-items:center;height:24px;cursor:grab;touch-action:none}
.sheet__grip::before{content:"";width:36px;height:4px;border-radius:var(--r-full);background:var(--line-strong)}
.sheet__head{flex:none;padding:8px 24px 16px}
.sheet__body{flex:1;overflow-y:auto;padding:0 24px 20px;-webkit-overflow-scrolling:touch}
.sheet__foot{flex:none;display:flex;gap:8px;padding:16px 24px calc(20px + var(--safe-b));
  box-shadow:inset 0 1px 0 var(--line);background:var(--surface)}
.sheet__foot > *{flex:1}
@media (min-width:768px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;translate:-50% -50%;
    width:min(520px,calc(100vw - 48px));border-radius:var(--r-2xl);padding-bottom:0}
  .sheet__grip{display:none}
  .sheet__head{padding-top:28px}
  .sheet__foot{justify-content:flex-end;padding-bottom:24px}
  .sheet__foot > *{flex:none}
}

.modal{position:relative;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 80px);
  overflow:auto;background:var(--surface);border-radius:var(--r-2xl);padding:28px;
  box-shadow:var(--sh-xl);margin:auto}
.overlay--center{display:grid;place-items:center;padding:24px}
@media (max-width:640px){
  .overlay--center{align-items:flex-end;padding:0}
  .modal{width:100%;border-radius:var(--r-3xl) var(--r-3xl) 0 0;max-height:90dvh;
    padding-bottom:calc(28px + var(--safe-b))}
}

/* ══ 토스트 ══════════════════════════════════════════ */
.toasts{position:fixed;left:50%;translate:-50% 0;z-index:var(--z-toast);
  bottom:calc(var(--safe-b) + 24px);display:flex;flex-direction:column-reverse;gap:8px;
  align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:440px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:14px;width:100%;
  min-height:52px;padding:12px 14px 12px 18px;
  background:var(--neutral-900);color:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);font-size:var(--t-body-sm);line-height:1.5;font-weight:500}
[data-theme="dark"] .toast{background:var(--surface-alt);
  box-shadow:var(--sh-xl),inset 0 0 0 1px rgba(255,255,255,.08)}
.toast__text{flex:1;min-width:0}
.toast__action{flex:none;min-height:36px;padding-inline:10px;border-radius:var(--r-sm);
  color:var(--accent-300);font-size:var(--t-body-sm);font-weight:600;cursor:pointer;
  transition:background-color var(--d-1) var(--ease-inout)}
.toast__action:hover{background:rgba(255,255,255,.1)}
.toast--good{background:var(--green-800)}
.toast--bad{background:var(--red-800)}

/* ══ 툴팁 ══════════════════════════════════════════════ */
.tip{position:absolute;z-index:var(--z-tip);max-width:260px;padding:8px 11px;
  background:var(--neutral-900);color:#fff;border-radius:var(--r-sm);
  font-size:var(--t-micro);line-height:1.45;box-shadow:var(--sh-lg);pointer-events:none}

/* ══ 내비게이션 ════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:var(--z-header);height:var(--nav-h);display:flex;align-items:center;
  transition:background-color var(--d-3) var(--ease-inout),box-shadow var(--d-3) var(--ease-inout)}
.nav[data-stuck]{background:color-mix(in srgb,var(--canvas) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:inset 0 -1px 0 var(--line)}
.nav__inner{display:flex;align-items:center;gap:8px;width:100%}
.nav__brand{display:flex;align-items:center;min-height:44px;gap:9px;font-size:var(--t-heading-sm);
  font-weight:700;letter-spacing:-.02em;color:var(--ink);flex:none}
.nav__links{display:none;align-items:center;gap:2px;margin-left:20px}
@media (max-width:560px){.nav__cta{display:none}}
@media (min-width:1024px){.nav__links{display:flex}}
.nav__link{display:inline-flex;align-items:center;height:44px;padding-inline:12px;
  border-radius:var(--r-sm);font-size:var(--t-body-sm);font-weight:500;color:var(--ink-muted);
  transition:background-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout)}
.nav__link:hover{background:var(--tint);color:var(--ink)}
.nav__link[aria-current]{color:var(--ink);font-weight:600}

/* 모바일 서랍 */
.drawer{position:fixed;inset:0;z-index:var(--z-scrim);visibility:hidden}
.drawer[data-open]{visibility:visible}
.drawer__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;
  transition:opacity var(--d-4) var(--ease-inout)}
.drawer[data-open] .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,340px);
  background:var(--surface);box-shadow:var(--sh-xl);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 24px);
  translate:100% 0;transition:translate var(--d-5) var(--ease-sheet)}
.drawer[data-open] .drawer__panel{translate:0 0}
.drawer__item{display:flex;align-items:center;min-height:54px;
  font-size:var(--t-body-lg);font-weight:600;color:var(--ink);
  box-shadow:inset 0 -1px 0 var(--line)}

/* ══ 푸터 ══════════════════════════════════════════════ */
.footer{padding-top:80px;padding-bottom:40px;position:relative;overflow:clip}
.footer__grid{display:grid;gap:40px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}}
.footer__title{font-size:var(--t-caption);font-weight:700;color:var(--ink);margin-bottom:14px}
.footer__link{display:flex;align-items:center;min-height:40px;padding-block:4px;font-size:var(--t-body-sm);color:var(--ink-muted);
  transition:color var(--d-2) var(--ease-inout)}
.footer__link:hover{color:var(--ink)}
.footer__legal{margin-top:56px;padding-top:24px;box-shadow:inset 0 1px 0 var(--line);
  font-size:var(--t-micro);color:var(--ink-subtle);line-height:1.8}

/* ══ 스켈레톤 ══════════════════════════════════════════ */
.skel{background:linear-gradient(90deg,var(--canvas-alt) 0%,var(--canvas-sunken) 42%,var(--canvas-alt) 80%);
  background-size:220% 100%;animation:shimmer 1.5s var(--ease-inout) infinite;border-radius:var(--r-sm)}
.skel--line{height:14px}
.skel--line + .skel--line{margin-top:10px}
.skel--title{height:22px;width:52%;border-radius:var(--r-md);margin-bottom:16px}
.skel--block{height:140px;border-radius:var(--r-lg)}

/* ══ 빈 상태 ══════════════════════════════════════════ */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;padding:56px 24px}
.empty__art{width:56px;height:56px;display:grid;place-items:center;border-radius:var(--r-lg);
  background:var(--canvas-alt);color:var(--ink-subtle);margin-bottom:10px}
.empty__title{font-size:var(--t-heading-sm);font-weight:600;color:var(--ink)}
.empty__desc{color:var(--ink-muted);font-size:var(--t-body-sm);max-width:28rem}

/* ══ 표 ══════════════════════════════════════════════ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{font-size:var(--t-body-sm)}
.table th{text-align:left;font-size:var(--t-micro);font-weight:600;color:var(--ink-subtle);
  letter-spacing:.04em;text-transform:uppercase;padding:0 16px 10px 0;white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--line)}
.table td{padding:13px 16px 13px 0;color:var(--ink-body);
  box-shadow:inset 0 -1px 0 var(--line);vertical-align:middle}
.table tbody tr:last-child td{box-shadow:none}
.table tbody tr{transition:background-color var(--d-1) var(--ease-inout)}
.table tbody tr:hover{background:var(--tint)}

/* ══ 애니메이션 ════════════════════════════════════════ */
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-40% 0}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{from{transform:none}to{transform:translateY(100%)}}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.98)}}

.overlay[data-state="open"] .overlay__scrim{animation:fade-in var(--d-4) var(--ease-inout) both}
.overlay[data-state="closing"] .overlay__scrim{animation:fade-out var(--d-3) var(--ease-inout) both}
.overlay[data-state="open"] .sheet{animation:sheet-up var(--d-5) var(--ease-sheet) both}
.overlay[data-state="closing"] .sheet{animation:sheet-down var(--d-3) var(--ease-in) both}
.overlay[data-state="open"] .modal{animation:pop var(--d-4) var(--ease-out) both}
.overlay[data-state="closing"] .modal{animation:fade-out var(--d-2) var(--ease-in) both}
.menu[data-state="open"]{animation:pop var(--d-2) var(--ease-out) both}
.toast{animation:toast-in var(--d-4) var(--ease-out) both}
.toast[data-out]{animation:toast-out var(--d-3) var(--ease-in) both}
@media (min-width:768px){
  .overlay[data-state="open"] .sheet{animation:pop var(--d-4) var(--ease-out) both}
  .overlay[data-state="closing"] .sheet{animation:fade-out var(--d-2) var(--ease-in) both}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .skel{animation:none}
}

/* ══ 선택기 ══════════════════════════════════════════
   네이티브 select 의 목록은 OS 가 그려서 디자인이 먹지 않는다.
   이 컴포넌트는 목록까지 우리가 그린다. 좁은 화면에서는 하단 시트가 된다. */
.picker{position:relative;display:block;width:100%}
.picker__btn{display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--c-md-h);padding:11px 14px;
  background:var(--canvas-alt);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--c-md-r);
  font-size:var(--t-body-md);line-height:1.5;text-align:left;cursor:pointer;
  transition:background-color var(--d-2) var(--ease-inout),
             border-color var(--d-2) var(--ease-inout),
             box-shadow var(--d-2) var(--ease-inout)}
.picker__btn:hover{background:var(--canvas-sunken);border-color:var(--line-strong)}
.picker__btn[aria-expanded="true"]{background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.picker__btn:disabled{color:var(--ink-disabled);cursor:not-allowed}
.picker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker__value[data-empty]{color:var(--ink-disabled)}
.picker__caret{flex:none;color:var(--ink-subtle);
  transition:transform var(--d-3) var(--ease-out)}
.picker__btn[aria-expanded="true"] .picker__caret{transform:rotate(180deg)}
.picker__btn[aria-invalid="true"]{border-color:var(--red-500);background:var(--red-50)}
.picker--lg .picker__btn{min-height:var(--c-lg-h);border-radius:var(--c-lg-r);padding:14px 16px}
.picker--sm .picker__btn{min-height:var(--c-sm-h);border-radius:var(--c-sm-r);padding:8px 12px;
  font-size:var(--t-body-sm)}

.picker__list{position:fixed;z-index:var(--z-pop);min-width:200px;padding:6px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
  max-height:min(62vh,420px);overflow-y:auto;transform-origin:top left}
.picker__list[data-side="top"]{transform-origin:bottom left}
.picker__opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:10px 12px;border-radius:var(--r-sm);text-align:left;cursor:pointer;
  font-size:var(--t-body-sm);color:var(--ink-body);
  transition:background-color var(--d-1) var(--ease-inout)}
.picker__opt:hover,.picker__opt[data-active]{background:var(--tint)}
.picker__opt[aria-selected="true"]{color:var(--accent-text);font-weight:600;background:var(--accent-soft)}
.picker__opt-mark{margin-left:auto;flex:none;opacity:0}
.picker__opt[aria-selected="true"] .picker__opt-mark{opacity:1}
.picker__list[data-state="open"]{animation:pop var(--d-2) var(--ease-out) both}
@media (max-width:639px){
  .picker__list{left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
    width:auto;max-height:72dvh;border-radius:var(--r-3xl) var(--r-3xl) 0 0;
    padding:10px 10px calc(10px + var(--safe-b));box-shadow:var(--sh-xl)}
  .picker__list::before{content:"";display:block;width:36px;height:4px;border-radius:var(--r-full);
    background:var(--line-strong);margin:2px auto 10px}
  .picker__opt{min-height:52px;font-size:var(--t-body-md)}
  .picker__list[data-state="open"]{animation:sheet-up var(--d-5) var(--ease-sheet) both}
}
.picker__scrim{position:fixed;inset:0;z-index:calc(var(--z-pop) - 1);background:transparent}
@media (max-width:639px){.picker__scrim{background:var(--scrim)}}

/* ══ 아이콘 ══════════════════════════════════════════
   assets/icons.svg 의 심볼을 쓴다. 색은 currentColor 를 따른다.
   <svg class="ico"><use href="/design-system/assets/icons.svg#ico-phone"/></svg> */
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.ico--sm{width:16px;height:16px}
.ico--lg{width:24px;height:24px}
.ico--xl{width:32px;height:32px}