/* CONTTO design system — the 12 COMPONENTS (owner T545). Tokens only (ds2/tokens.css); no raw px / colors here or in screens.
   button · chip · card · field (input/select/textarea) · sheet/dialog · row · tabs/segmented · badge · skeleton · toast · nav · empty */
* { box-sizing: border-box; }
body { margin: 0; font: var(--t-body); color: var(--n9); background: var(--n1); -webkit-font-smoothing: antialiased; }
.ds-display { font: var(--t-display); letter-spacing: var(--track-tight); margin: 0; }
.ds-title { font: var(--t-title); margin: 0; }
.ds-body { font: var(--t-body); margin: 0; }
.ds-caption { font: var(--t-caption); color: var(--n5); margin: 0; }
.ds-strong { font: var(--t-body-strong); }
.ds-mono { font-family: var(--font-mono); }
.ds-ico { width: calc(var(--s5) - var(--s1) / 2); height: calc(var(--s5) - var(--s1) / 2); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* 1. button — primary / secondary / ghost; default 44 tall, .is-s 36; .is-block full width; .is-icon square */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s4);
  border: 0; border-radius: var(--r2); font: var(--t-body-strong); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.ds-btn:focus-visible { outline: var(--hair2) solid var(--accent); outline-offset: var(--hair2); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
/* order: ghost < secondary < danger < primary, so a class list that carries two (a dynamic 'is it the main action') shows the stronger */
.ds-btn--ghost { background: transparent; color: var(--accent); padding: 0 var(--s2); box-shadow: none; }
.ds-btn--secondary { background: var(--n0); color: var(--n9); box-shadow: inset 0 0 0 var(--hair) var(--n3); }
.ds-btn--danger { background: var(--n0); color: var(--danger); box-shadow: inset 0 0 0 var(--hair) var(--n3); }
.ds-btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--e1); }
.ds-btn--primary:active { background: var(--accent-press); }
.ds-btn--secondary:active, .ds-btn--danger:active, .ds-btn--ghost:active { background: var(--n2); }
.ds-btn svg { width: var(--s4); height: var(--s4); flex: none; }
.ds-btn[aria-busy="true"] { pointer-events: none; opacity: .7; }
.ds-btn.is-s { min-height: var(--tap-s); padding: 0 var(--s3); font: var(--t-caption-strong); }
.ds-btn.is-block { width: 100%; }
.ds-btn.is-icon { width: var(--tap); padding: 0; border-radius: var(--pill); }

/* 2. chip — filters / picks; .is-on selected */
.ds-chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: calc(var(--s6) - var(--s1)); padding: 0 var(--s3); border: 0; border-radius: var(--pill);
  background: var(--n2); color: var(--n7); font: var(--t-caption); cursor: pointer; }
.ds-chip.is-on, .ds-chip[aria-pressed="true"], .ds-chip[aria-checked="true"], .ds-chip[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font: var(--t-caption-strong); }
.ds-chip:disabled, .ds-chip[aria-disabled="true"] { opacity: .45; cursor: default; }
.ds-chip__count { color: var(--n5); font-variant-numeric: tabular-nums; }
.ds-chip__check { display: none; width: var(--s3); height: var(--s3); }
.ds-chip.is-on .ds-chip__check, .ds-chip[aria-pressed="true"] .ds-chip__check, .ds-chip[aria-checked="true"] .ds-chip__check { display: block; }
.ds-chip.is-on .ds-chip__count, .ds-chip[aria-pressed="true"] .ds-chip__count, .ds-chip[aria-checked="true"] .ds-chip__count { color: inherit; }
.ds-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ds-chips.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ds-chips.is-scroll::-webkit-scrollbar { display: none; }

/* 3. card — one family: card / card--raised / surface (tonal inset); .ds-bento only for grids of like items */
.ds-card { background: var(--n0); border-radius: var(--r2); box-shadow: var(--e1); padding: var(--s4); }
.ds-card--raised { box-shadow: var(--e2); }
.ds-card.is-picked { box-shadow: inset 0 0 0 var(--hair2) var(--accent), var(--e1); }
.ds-surface { background: var(--n2); border-radius: var(--r2); padding: var(--s4); }
.ds-bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 3), 1fr)); gap: var(--s3); }

/* 4. field — input / select / textarea with label + hint */
.ds-field { display: grid; gap: var(--s1); }
.ds-field > label, .ds-label { font: var(--t-caption-strong); color: var(--n7); }
.ds-input, .ds-select, .ds-textarea { width: 100%; min-height: var(--tap); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r1);
  background: var(--n0); color: var(--n9); font: var(--t-body); box-shadow: inset 0 0 0 var(--hair) var(--n3); }
.ds-textarea { min-height: calc(var(--tap) * 2); resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; box-shadow: inset 0 0 0 var(--hair2) var(--accent); }
.ds-hint { font: var(--t-caption); color: var(--n5); } .ds-hint.is-error { color: var(--danger); }

/* 5. sheet / dialog — phone: a bottom sheet 8 px inside the display (data-detent medium | large; js/ui.js picks the detent, drags and
   closes it), PC >= 768 px: a centred form sheet. Motion: the slide runs on --sheet-y (registered), so a drag hands over to the close. */
@property --sheet-y { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
.ds-sheet { position: fixed; inset: auto var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px)) var(--s2); z-index: 60; width: auto; max-width: none;
  max-height: min(68dvh, calc(var(--s7) * 12.92)); margin: 0; padding: 0; border: 0; border-radius: var(--r3); background: var(--n0); color: var(--n9);
  box-shadow: var(--e3); overflow: hidden; display: flex; flex-direction: column; overscroll-behavior: contain; transform: translateY(var(--sheet-y)); }
.ds-sheet:not([open]):not(.is-static) { display: none; }
.ds-sheet::backdrop { background: var(--scrim); }
.ds-sheet[data-detent="large"] { inset: calc(env(safe-area-inset-top, 0px) + var(--s3)) 0 0 0; height: auto; max-height: none; border-radius: var(--r3) var(--r3) 0 0; }
.ds-sheet[open] { animation: ds-sheet-in var(--d-base) var(--ease) both; }
.ds-sheet.is-closing { animation: ds-sheet-out var(--d-base) var(--ease) both; }
.ds-sheet.is-dragging { animation: none; transition: none; }
.ds-sheet.is-static { position: relative; inset: auto; z-index: auto; max-height: none; animation: none; transform: none; }
@keyframes ds-sheet-in { from { --sheet-y: calc(100% + var(--s5)); } }
@keyframes ds-sheet-out { to { --sheet-y: calc(100% + var(--s5)); } }
.ds-sheet__grab { flex: none; width: var(--s6); height: var(--s1); margin: var(--s2) auto 0; border-radius: var(--r1); background: var(--n3); cursor: grab; touch-action: none; }
.ds-sheet__head { flex: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) var(--s2); }
.ds-sheet__head > h2, .ds-sheet__title { flex: 1; margin: 0; font: var(--t-title); }
.ds-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2) var(--s4) var(--s5); overscroll-behavior: contain; }
.ds-sheet__foot { flex: none; display: flex; gap: var(--s2); padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
.ds-sheet__foot > .ds-btn { flex: 1; }
@media (min-width: 768px) {
  .ds-sheet, .ds-sheet[data-detent="large"] { inset: 0; margin: auto; width: min(calc(var(--s7) * 11.67), calc(100% - var(--s6))); height: fit-content;
    max-height: min(88dvh, calc(var(--s7) * 17.08)); border-radius: var(--r3); }
  .ds-sheet[data-detent="large"] { width: min(calc(var(--s7) * 15), calc(100% - var(--s6))); }
  .ds-sheet__grab { display: none; }
  @keyframes ds-sheet-in { from { --sheet-y: var(--s5); opacity: 0; } }
  @keyframes ds-sheet-out { to { --sheet-y: var(--s5); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .ds-sheet[open], .ds-sheet.is-closing { animation: none; } }

/* 6. row — list rows (settings, items); .ds-list groups them */
.ds-list { display: grid; gap: var(--hair); background: var(--n2); border-radius: var(--r2); overflow: hidden; box-shadow: var(--e1); }
.ds-row { display: flex; align-items: center; gap: var(--s3); min-height: calc(var(--tap) + var(--s3)); padding: var(--s3) var(--s4); background: var(--n0);
  color: inherit; text-decoration: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.ds-row__icon { display: grid; place-items: center; width: calc(var(--s5) + var(--s3)); height: calc(var(--s5) + var(--s3)); border-radius: var(--r1); background: var(--n2); color: var(--n7); flex: none; }
.ds-row__text { flex: 1; min-width: 0; display: grid; gap: var(--hair2); }
.ds-row__title { display: block; font: var(--t-body-strong); }   /* block whatever the text box is (a screen's '.lrow .tx' is display: block) */
.ds-row__sub { display: block; font: var(--t-caption); color: var(--n5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-row__end { color: var(--n5); font: var(--t-caption); display: flex; align-items: center; gap: var(--s2); flex: none; }
.ds-row__chev { flex: none; width: var(--s2); height: var(--s3); color: var(--n3); }
.ds-row__thumb { flex: none; width: var(--s7); height: var(--s7); border-radius: var(--r1); object-fit: cover; background: var(--n2); }
.ds-row.is-danger .ds-row__title { color: var(--danger); }
.ds-list__head { margin: var(--s5) 0 var(--s2); font: var(--t-caption-strong); color: var(--n5); }

/* 7. tabs / segmented */
.ds-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--s1); background: var(--n2); border-radius: var(--r2); }
.ds-seg > button { border: 0; background: transparent; padding: var(--s2); border-radius: var(--r1); font: var(--t-caption-strong); color: var(--n5); cursor: pointer; }
.ds-seg > button[aria-checked="true"], .ds-seg > button.is-on { background: var(--n0); color: var(--n9); box-shadow: var(--e1); }
.ds-seg > button { min-height: var(--tap-s); }
.ds-seg > button[disabled], .ds-seg > button[aria-disabled="true"] { opacity: .45; cursor: default; }
.ds-seg__lens { display: none; }

/* 8. badge / status */
.ds-badge { display: inline-flex; align-items: center; gap: var(--s1); min-height: calc(var(--s5) - var(--s1) / 2); padding: 0 var(--s2); border-radius: var(--r1);
  font: var(--t-caption-strong); background: var(--n2); color: var(--n7); }
.ds-badge--ok { background: var(--ok-bg); color: var(--ok); } .ds-badge--warn { background: var(--warn-bg); color: var(--warn); }
.ds-badge--danger { background: var(--danger-bg); color: var(--danger); } .ds-badge--info { background: var(--info-bg); color: var(--info); }
.ds-badge--accent { background: var(--accent-soft); color: var(--accent); }
.ds-mark { display: inline-grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--r1); background: var(--mark-yellow); color: var(--mark-ink); font: var(--t-body-strong); }

/* 9. skeleton */
.ds-skel { border-radius: var(--r1); background: linear-gradient(90deg, var(--n2), var(--n3), var(--n2)); background-size: 300% 100%; animation: ds-shimmer 1.2s var(--ease) infinite; min-height: var(--s4); }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ds-skel { animation: none; } }

/* 10. toast */
.ds-toast { position: fixed; left: 50%; bottom: calc(var(--s7) + var(--s6)); transform: translateX(-50%); max-width: calc(100% - var(--s6)); padding: var(--s3) var(--s4);
  border-radius: var(--r2); background: var(--n9); color: var(--n0); font: var(--t-caption-strong); box-shadow: var(--e3); z-index: 50; }

/* the app's toast stack (#toasts): toasts at the top, newest last; ui.js marks a leaving one .is-out */
.ds-toasts { position: fixed; z-index: 80; top: calc(env(safe-area-inset-top, 0px) + var(--s2)); left: 0; right: 0; display: grid; justify-items: center;
  gap: var(--s2); padding: 0 var(--s4); pointer-events: none; }
.ds-toasts > .ds-toast { position: static; left: auto; bottom: auto; transform: none; max-width: 100%; pointer-events: auto; display: flex; align-items: center;
  gap: var(--s3); animation: ds-toast-in var(--d-base) var(--ease) both; }
.ds-toast__text { flex: 1; min-width: 0; }
.ds-toast__icon { width: var(--s5); height: var(--s5); flex: none; color: var(--ok-bg); }
.ds-toast .ds-btn { flex: none; }
.ds-toast.is-out { animation: ds-toast-out var(--d-fast) var(--ease) both; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(calc(var(--s2) * -1)); } }
@keyframes ds-toast-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ds-toasts > .ds-toast, .ds-toast.is-out { animation: none; } }

/* 11. nav — bottom tab bar under 1024 px, side rail from 1024 px; progress bar for steps */
.ds-tabbar { position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: calc(var(--tap) + var(--s5)); background: var(--n0); border-radius: var(--r3); box-shadow: var(--e3); z-index: 20; }
.ds-tabbar a { display: grid; place-items: center; align-content: center; gap: var(--hair2); font: var(--t-caption); color: var(--n5); text-decoration: none; }
.ds-tabbar a[aria-current="page"] { color: var(--accent); font: var(--t-caption-strong); }
.ds-tabbar__item svg, .ds-rail svg { width: var(--s5); height: var(--s5); }
.ds-tabbar__lens { display: none; }
/* the rail's look holds at any width (a page may show it earlier, e.g. the account pages from 900 px); the layout default is 1024 px */
.ds-rail { display: none; flex-direction: column; gap: var(--s1); width: var(--rail-w); padding: var(--s4) var(--s3); background: var(--n0);
  border-right: var(--hair) solid var(--n2); min-height: 100vh; }
.ds-rail a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r1); color: var(--n7); text-decoration: none; font: var(--t-body); }
.ds-rail a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font: var(--t-body-strong); }
.ds-rail__brand { font: var(--t-title); color: var(--n9); }
.ds-rail__grow { flex: 1; }
@media (min-width: 1024px) {
  .ds-tabbar { display: none; }
  .ds-rail { display: flex; }
}
.ds-progress { height: calc(var(--s1) + var(--hair2)); border-radius: var(--pill); background: var(--n2); overflow: hidden; }
.ds-progress > i { display: block; height: 100%; background: var(--accent); transition: width var(--d-base) var(--ease); }

/* 12. empty state */
.ds-empty { display: grid; justify-items: center; gap: var(--s3); padding: var(--s7) var(--s4); text-align: center; color: var(--n5); }
.ds-empty__icon { display: grid; place-items: center; width: var(--s7); height: var(--s7); border-radius: var(--r2); background: var(--n2); color: var(--n7); }

/* layout helpers (tokens only) */
.ds-stack { display: grid; gap: var(--s4); } .ds-stack.is-tight { gap: var(--s2); } .ds-stack.is-loose { gap: var(--s5); }
.ds-hrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.ds-group { display: inline-flex; align-items: center; gap: var(--s1); }
.ds-page { padding: var(--s2) var(--gutter) calc(var(--s7) * 2); max-width: var(--content-max); }
@media (min-width: 1024px) { .ds-page { padding: var(--s2) var(--s6) var(--s7); } }

/* ---- T545 heading level per screen (owner's pick on the final sheet; default 22:08Z: 홈·계정·결과 = DISPLAY, 고르기·티어·요금 = TITLE),
   Pretendard 700 at both levels — the one place a screen's main heading size is set */
body #h-link, body #h-done, body.lg-acct .sec-head > h1 {
  font: var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font); letter-spacing: var(--track-tight); }   /* DISPLAY 28 */
body #h-persona, body #h-plans {
  font: var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font); letter-spacing: var(--track-tight); }       /* TITLE 18 */