/* ============================================================
   lapt.css: 랩트 공용 토큰 · 리셋 · 기본 부품

   일곱 서비스가 이 파일을 한 글자도 다르지 않게 쓴다.
   서비스마다 다른 것은 자기 CSS 맨 위의 --accent 한 벌뿐이다.
   근거와 규칙은 랩트 저장소의 DESIGN.md에 있다.

   테마는 둘이다. 기본은 다크, [data-theme="black"]은 OLED용 검정.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── 면: 차가운 무채색 한 계열 ──
     예전에는 차가운 잉크 위에 따뜻한 글자색을 얹었다. 한 화면에 두 온도의
     회색이 섞이면 글자가 떠 보인다. 글자·괘선도 잉크와 같은 계열로 맞췄다. */
  --ink:        #08090b;   /* 바탕 */
  --ink-2:      #0f1116;   /* 한 단계 뜬 면: 패널, 사이드바 */
  --ink-3:      #171a20;   /* 입력 칸, 눌린 면 */
  --ink-4:      #1f232b;   /* 선택된 칸, 세그먼트 표시 */

  --text:       #eceef2;
  --mute-2:     #b4b8c1;   /* 보조 본문 (잉크 위 9.6:1) */
  --mute:       #8a8f99;   /* 메타 · 라벨 (잉크 위 6.0:1) */

  --line:       rgba(236,238,242,.12);
  --line-soft:  rgba(236,238,242,.07);
  --line-hard:  rgba(236,238,242,.22);
  --hover:      rgba(236,238,242,.05);
  --press:      rgba(236,238,242,.08);

  /* ── 크레딧: 라임은 돈과 통합 계정에만 쓴다 ── */
  --credit:      #c9f560;
  --credit-dim:  #93b83f;
  --credit-wash: rgba(201,245,96,.10);
  --credit-line: rgba(201,245,96,.28);
  --on-credit:   #0b0d06;

  /* ── 상태 ── */
  --danger:       #ff6464;
  --danger-wash:  rgba(255,100,100,.10);
  --danger-line:  rgba(255,100,100,.34);
  --success:      #50dba0;
  --success-wash: rgba(80,219,160,.10);
  --success-line: rgba(80,219,160,.32);
  --warn:         #ffc14a;
  --warn-wash:    rgba(255,193,74,.10);
  --warn-line:    rgba(255,193,74,.32);

  /* ── 서비스 액센트: 각 서비스 CSS가 덮어쓴다 ──
     쓰는 곳은 선택 표시, 초점, 진행, 서비스 고유 상태뿐이다. */
  --accent:      #c9f560;
  --accent-dim:  #93b83f;
  --accent-wash: rgba(201,245,96,.10);

  /* ── 떠 있는 면 ── */
  --float-bg:     rgba(17,19,24,.96);
  --float-line:   rgba(236,238,242,.11);
  --float-shadow: 0 1px 0 rgba(255,255,255,.04) inset,
                  0 2px 6px rgba(0,0,0,.35),
                  0 18px 40px -12px rgba(0,0,0,.7);
  --overlay:      rgba(4,5,7,.66);

  /* ── 글자 ──
     한글은 Noto Sans KR, 라틴 글자와 숫자는 Geist가 맡는다.
     고정폭(Geist Mono)은 아이피 · 키 · 코드 · 기록처럼 기계가 읽는 문자열에만 쓴다. */
  --sans: 'Geist', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --serif: var(--sans);    /* 옛 이름. 명조는 더 쓰지 않는다 */

  /* 작업 화면의 글자 크기: 고정값, 1.15배 간격 */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-md:   14px;
  --fs-base: 15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;

  /* ── 형태 ──
     버튼 · 입력은 8px, 면 · 판 · 대화상자는 12px, 상태 배지만 알약.
     안쪽 모서리는 바깥 모서리에서 여백을 뺀 값으로 맞춘다. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ── 간격: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gut:   clamp(16px, 5vw, 56px);
  --stack: clamp(56px, 10vh, 120px);
  --maxw:  1200px;
  --bar-h: 56px;

  /* ── 움직임 ──
     기본 CSS 곡선은 힘이 없다. 들어오고 나가는 것은 강한 ease-out,
     화면 안에서 옮겨 가는 것은 ease-in-out. ease-in은 쓰지 않는다. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease:        var(--ease-out);   /* 옛 이름 */

  --t-press: 140ms;   /* 누름 */
  --t-fast:  160ms;   /* 색 · 테두리 · 호버 */
  --t-pop:   180ms;   /* 드롭다운 · 판 */
  --t-modal: 240ms;   /* 대화상자 */
  --t-toast: 320ms;   /* 토스트 */
}

/* 블랙 테마: OLED 화면에서 바탕 화소를 끈다. 순수 검정을 쓰는 유일한 곳이다.
   면과 면의 구분이 사라지지 않도록 괘선을 한 단계 올린다. */
:root[data-theme="black"] {
  --ink:        #000000;
  --ink-2:      #08090b;
  --ink-3:      #101217;
  --ink-4:      #181b21;
  --line:       rgba(236,238,242,.15);
  --line-soft:  rgba(236,238,242,.09);
  --line-hard:  rgba(236,238,242,.26);
  --float-bg:   rgba(10,11,14,.97);
  --float-line: rgba(236,238,242,.14);
  --overlay:    rgba(0,0,0,.76);
}

/* ── 리셋 ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 모바일에서 누를 때 덮이는 회색 사각형은 끈다.
   누른 상태는 :active, 키보드 초점은 :focus-visible로만 보인다. */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* display를 직접 정한 요소가 hidden을 무시하지 않게 한다. */
[hidden] { display: none !important; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line-hard) transparent;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

img, svg, video, canvas { display: block; max-width: 100%; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { font-variant-numeric: tabular-nums; }

/* 국문은 어절 단위로 접는다. 제목은 줄 길이를 고르게 맞춘다. */
p, li, dd, dt, th, td, h1, h2, h3, h4, figcaption, label, summary { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* 브라우저가 그리는 부분도 이 화면의 일부다. */
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--line-hard); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── 숫자와 기계 문자열 ──────────────────────────────────── */

/* 수치는 자릿수 폭을 고정한다. 잔액이 바뀔 때 자리가 흔들리면 안 된다. */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* 본문 속 명령어 · 코드 */
code {
  font-family: var(--mono);
  font-size: .9em;
  padding: .08em .4em;
  border-radius: var(--r-xs);
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  color: var(--text);
  white-space: nowrap;
}

/* 고정폭은 사람이 아니라 기계가 읽는 문자열(아이피, 키, 코드, 기록)에만 쓴다. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .94em;
  letter-spacing: 0;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: 10px 16px; background: var(--text); color: var(--ink);
  font-size: 14px; font-weight: 600; border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--t-pop) var(--ease-out);
}
.skip:focus { transform: none; }

/* ── 표제 ────────────────────────────────────────────────── */

/* 무대(소개 화면)의 큰 제목. 굵기와 크기로 말하고, 서체를 바꾸지 않는다. */
.h-display {
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 80px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.h-serif,              /* 옛 이름: 무대의 섹션 제목 */
.h-section {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -.028em;
}

/* 작업 화면의 제목: 작게, 굵기로 */
.h-1 { font-size: var(--fs-2xl); font-weight: 650; line-height: 1.3; letter-spacing: -.022em; }
.h-2 { font-size: var(--fs-lg);  font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
.h-tool,
.h-3 { font-size: var(--fs-base); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }

.lede { color: var(--mute-2); }
.muted { color: var(--mute); }

/* ── 버튼 ────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: 14.5px; font-weight: 550; line-height: 1.2; letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              transform var(--t-press) var(--ease-out);
}
/* 누르면 살짝 들어간다. 화면이 손을 알아들었다는 신호다. */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* 주 동작: 글자색 면. 라임과 액센트를 아끼기 위해 주 동작은 무채색이다. */
.btn--primary { background: var(--text); color: var(--ink); }

/* 크레딧 · 계정 동작만 라임 */
.btn--lime, .btn--credit { background: var(--credit); color: var(--on-credit); }

/* 보조 동작: 테두리 */
.btn--wire { border-color: var(--line); }

/* 세 번째 동작: 낮은 면 */
.btn--solid { background: var(--ink-3); border-color: var(--line-soft); }

/* 서비스 고유의 주 동작(예: 트래커의 조회). 한 화면에 하나만 */
.btn--accent { background: var(--accent); color: var(--ink); }

.btn--ghost { color: var(--mute-2); }

.btn--danger { border-color: var(--danger-line); color: var(--danger); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) { background: #ffffff; }
  .btn--lime:hover:not(:disabled), .btn--credit:hover:not(:disabled) { background: #d6ff78; }
  .btn--wire:hover:not(:disabled) { border-color: var(--line-hard); background: var(--hover); }
  .btn--solid:hover:not(:disabled) { background: var(--ink-4); }
  .btn--accent:hover:not(:disabled) { filter: brightness(1.08); }
  .btn--ghost:hover:not(:disabled) { color: var(--text); background: var(--hover); }
  .btn--danger:hover:not(:disabled) { background: var(--danger-wash); border-color: var(--danger); }
}

.btn--sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: var(--r-xs); }
.btn--lg { min-height: 50px; padding: 13px 24px; font-size: 15.5px; }
.btn--full, .btn--block { width: 100%; }

/* 실행 버튼 안의 차감량. 누르기 전에 얼마가 빠지는지 보인다. */
.btn__cost {
  font-variant-numeric: tabular-nums;
  font-size: .88em; font-weight: 450; opacity: .72;
}

/* 처리 중: 글자는 자리를 지키고 흐려지며, 가운데에 빠른 회전 표시가 선다.
   회전은 빠를수록 기다림이 짧게 느껴진다. */
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--mute-2) var(--mute-2) transparent transparent;
  animation: lapt-spin .6s linear infinite;
}
.btn--primary[aria-busy="true"]::after,
.btn--lime[aria-busy="true"]::after,
.btn--credit[aria-busy="true"]::after,
.btn--accent[aria-busy="true"]::after { border-color: var(--ink) var(--ink) transparent transparent; }

.spin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-hard); border-top-color: var(--text);
  animation: lapt-spin .6s linear infinite;
  vertical-align: -2px;
}
@keyframes lapt-spin { to { transform: rotate(360deg); } }

/* ── 링크 ────────────────────────────────────────────────── */

.link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
.link:hover { text-decoration-color: currentColor; }

/* <a>와 <button> 어느 쪽에 붙어도 같게 보인다. */
.link-quiet {
  display: inline-block;
  padding: 0;
  border: 0; background: transparent;
  color: var(--mute-2); font-size: 14px; font-family: inherit;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}
.link-quiet:hover { color: var(--text); text-decoration-color: var(--line-hard); }

.link-credit {
  color: var(--credit);
  text-decoration: underline; text-decoration-color: var(--credit-line);
  text-underline-offset: 3px;
}
.link-credit:hover { text-decoration-color: var(--credit); }

/* ── 입력 ────────────────────────────────────────────────── */

.field { display: block; margin-bottom: var(--s-4); }
.field__label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--mute-2);
}
.field__hint { margin-top: 6px; font-size: 12.5px; color: var(--mute); }
.field__error { margin-top: 6px; font-size: 12.5px; color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  /* iOS가 자동 확대하지 않도록 16px 아래로 내리지 않는다. */
  font-size: 16px;
  line-height: 1.4;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.input--mono { font-family: var(--mono); letter-spacing: 0; }
.textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .input:hover, .select:hover, .textarea:hover { border-color: var(--line-hard); }
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--mute); opacity: 1; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }

.select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%238a8f99' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ── 배지 ────────────────────────────────────────────────── */

/* 알약은 상태 배지에만 쓴다. 점은 '살아 있음'처럼 실제 상태를 말할 때만 붙인다. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 22px; padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--mute-2);
  white-space: nowrap;
}
.badge--live, .badge--success { color: var(--success); border-color: var(--success-line); background: var(--success-wash); }
.badge--warn    { color: var(--warn);    border-color: var(--warn-line);    background: var(--warn-wash); }
.badge--danger  { color: var(--danger);  border-color: var(--danger-line);  background: var(--danger-wash); }
.badge--credit  { color: var(--credit);  border-color: var(--credit-line);  background: var(--credit-wash); }
.badge--accent  { color: var(--accent);  border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: var(--accent-wash); }
.badge--quiet   { color: var(--mute); }
.badge--live::before, .badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge--plain::before { display: none; }

/* ── 면과 행 ─────────────────────────────────────────────── */

/* 면은 무엇인가를 묶을 때만 쓴다. 구조는 1px 괘선으로 만들고 그림자는 쓰지 않는다. */
.panel-box {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.panel-box__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-box__body { padding: 16px; }

/* 목록은 카드가 아니라 행과 구분선이다. */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: var(--fs-md); font-weight: 500; }
.row__sub { font-size: 12.5px; color: var(--mute); }
.row__num {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
}
.row__num.is-plus { color: var(--credit); }
.row__num.is-minus { color: var(--mute-2); }

/* ── 표 ──────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ledger th, table.ledger td {
  padding: 11px 12px; text-align: left;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.ledger th { color: var(--mute); font-weight: 500; font-size: 12.5px; }
table.ledger tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  table.ledger tbody tr:hover { background: var(--hover); }
}
table.ledger td.n, table.ledger th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 상태 화면: 비어 있음 · 오류 · 대기 ──────────────────── */

/* 빈 화면은 분위기가 아니라 방향이다. 무엇이 없는지, 다음에 할 일 하나. */
.state, .empty {
  padding: 28px 16px;
  color: var(--mute-2);
  font-size: var(--fs-md);
}
.state__title, .empty__title { color: var(--text); font-size: var(--fs-base); font-weight: 600; margin-bottom: 4px; }
.empty__body { color: var(--mute-2); }
.state__act, .empty__act { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 8px; }

/* 알림 상자: 옆 띠 대신 옅은 면과 괘선으로 단계를 말한다. */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  font-size: 13.5px; line-height: 1.55;
  color: var(--mute-2);
}
.notice > svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.notice__title, .notice__label { color: var(--text); font-weight: 600; }
.notice__body { color: var(--mute-2); }
.notice--error   { border-color: var(--danger-line);  background: var(--danger-wash); }
.notice--error > svg, .notice--error .notice__title, .notice--error .notice__label { color: var(--danger); }
.notice--warn    { border-color: var(--warn-line);    background: var(--warn-wash); }
.notice--warn > svg, .notice--warn .notice__title, .notice--warn .notice__label { color: var(--warn); }
.notice--success { border-color: var(--success-line); background: var(--success-wash); }
.notice--success > svg, .notice--success .notice__title, .notice--success .notice__label { color: var(--success); }
.notice--credit  { border-color: var(--credit-line);  background: var(--credit-wash); }
.notice--credit > svg, .notice--credit .notice__title, .notice--credit .notice__label { color: var(--credit); }
.notice--info    { border-color: var(--line); }

/* 불러오는 중: 회전 표시 대신 결과와 같은 모양의 뼈대를 먼저 세운다. */
.skel {
  display: block;
  height: 12px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-4) 50%, var(--ink-3) 100%);
  background-size: 200% 100%;
  animation: lapt-skel 1.4s linear infinite;
}
@keyframes lapt-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── 세그먼트: 둘에서 넷 중 하나를 고른다 ─────────────────── */

.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.seg > button, .seg > a {
  min-height: 32px; padding: 5px 12px;
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--mute-2);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seg > [aria-pressed="true"], .seg > [aria-selected="true"], .seg > [aria-current="page"] {
  background: var(--ink-4); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
@media (hover: hover) and (pointer: fine) {
  .seg > button:hover, .seg > a:hover { color: var(--text); }
}

/* ── 접근성: 움직임 줄이기 ───────────────────────────────── */

/* 움직임을 줄인다는 것은 0으로 만든다는 뜻이 아니다. 자리를 옮기는 움직임은
   걷고, 이해를 돕는 투명도와 색의 변화는 남긴다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn:active:not(:disabled) { transform: none; }
  .btn[aria-busy="true"]::after, .spin { animation: lapt-spin 1.2s linear infinite !important; }
  .skel { animation: none !important; }
}

/* 투명도를 줄여 달라는 설정에서는 떠 있는 면을 불투명하게 한다. */
@media (prefers-reduced-transparency: reduce) {
  :root { --float-bg: var(--ink-2); }
}