@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

/* Startus × Wanted — component styles. Every value reads a token from tokens.json. */
.st-root, [class^="st-"], [class*=" st-"] { box-sizing: border-box; }
.st-icon { display: inline-block; flex: none; vertical-align: middle; }
.st-logo { display: block; flex: none; }

/* Interaction overlay (Wanted Element › Interaction/Normal: hover 5%, focus 8%, pressed 12% of label-normal) */
.st-int { position: relative; isolation: isolate; }
.st-int::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--label-normal); opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 1; }
.st-int:hover:not(:disabled)::after { opacity: var(--opacity-5); }
.st-int:focus-visible::after { opacity: var(--opacity-8); }
.st-int:active:not(:disabled)::after { opacity: var(--opacity-12); }
.st-int:focus-visible, .st-toggleicon:focus-visible, .st-switch:focus-visible { outline: 2px solid var(--label-normal); outline-offset: 2px; }

/* ===== Layout ===== */
.st-divider { height: 1px; width: 100%; background: var(--line-normal); flex: none; }
.st-divider--thick { height: 12px; background: var(--line-alternative); }
.st-divider--vertical { width: 1px; height: auto; align-self: stretch; min-height: 16px; }
.st-screen { display: flex; flex-direction: column; background: var(--background-normal); color: var(--label-normal); font-family: var(--font-sans); width: 375px; min-height: 420px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-solid-neutral); }
.st-screen--android { width: 360px; border-radius: 16px; }
.st-screen__body { flex: 1; display: flex; flex-direction: column; }
.st-statusbar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding-inline: 28px 22px; font: 600 15px/1 var(--font-display); color: var(--label-strong); flex: none; }
.st-statusbar--android { height: 36px; padding-inline: 16px; font-size: 13px; }
.st-statusbar__icons { display: flex; gap: 5px; align-items: center; }
.st-statusbar__icons i { width: 16px; height: 10px; border-radius: 2px; background: var(--label-strong); display: block; }
.st-statusbar__icons b { width: 24px; height: 11px; border-radius: 3px; border: 1.5px solid var(--label-strong); display: block; }
.st-homebar { height: 34px; display: flex; align-items: center; justify-content: center; flex: none; }
.st-homebar span { width: 134px; height: 5px; border-radius: 3px; background: var(--label-strong); }
.st-homebar--android { height: 14px; }
.st-homebar--android span { width: 108px; height: 4px; }

/* ===== Button ===== */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; margin: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 600; white-space: nowrap; text-decoration: none; background: transparent; }
.st-btn > * { position: relative; z-index: 2; }
.st-btn--large { height: 48px; padding: 12px 28px; border-radius: var(--radius-12); font-size: 16px; line-height: 24px; letter-spacing: 0.0057em; }
.st-btn--medium { height: 40px; padding: 9px 20px; border-radius: var(--radius-10); font-size: 15px; line-height: 22px; letter-spacing: 0.0096em; }
.st-btn--small { height: 32px; padding: 7px 14px; border-radius: var(--radius-8); font-size: 13px; line-height: 18px; letter-spacing: 0.0192em; }
.st-btn--icon-only.st-btn--large { width: 48px; padding: 12px; }
.st-btn--icon-only.st-btn--medium { width: 40px; padding: 10px; }
.st-btn--icon-only.st-btn--small { width: 32px; padding: 7px; }
.st-btn--full { width: 100%; }
.st-btn--solid.st-btn--primary { background: var(--primary-normal); color: var(--label-on-primary); }
.st-btn--solid.st-btn--primary::after { background: var(--static-black); }
.st-btn--solid.st-btn--secondary { background: var(--inverse-background); color: var(--inverse-label); }
.st-btn--solid.st-btn--secondary::after { background: var(--inverse-label); }
.st-btn--solid.st-btn--assistive { background: var(--fill-normal); color: var(--label-neutral); font-weight: 500; }
.st-btn--outlined { background: var(--background-normal); box-shadow: inset 0 0 0 1px var(--line-neutral); }
.st-btn--outlined.st-btn--primary { color: var(--primary-text); }
.st-btn--outlined.st-btn--secondary { color: var(--label-normal); }
.st-btn--outlined.st-btn--assistive { color: var(--label-normal); font-weight: 500; }
.st-btn--solid:disabled { background: var(--interaction-disable); color: var(--label-assistive); cursor: not-allowed; }
.st-btn--outlined:disabled { color: var(--label-disable); cursor: not-allowed; }

/* ===== Text button ===== */
.st-tbtn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 600; padding: 4px 0; border-radius: var(--radius-6); }
.st-tbtn::after { inset: 0 -6px; }
.st-tbtn--medium { height: 32px; font-size: 16px; line-height: 24px; }
.st-tbtn--small { height: 28px; font-size: 14px; line-height: 20px; }
.st-tbtn--primary { color: var(--primary-text); }
.st-tbtn--assistive { color: var(--label-alternative); }
.st-tbtn--negative { color: var(--status-negative); }
.st-tbtn:disabled { color: var(--label-disable); cursor: not-allowed; }

/* ===== Icon button ===== */
.st-ibtn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--label-normal); flex: none; }
.st-ibtn > svg { position: relative; z-index: 2; }
.st-ibtn--normal { width: 24px; height: 24px; border-radius: var(--radius-full); }
.st-ibtn--normal::after { inset: -8px; }
.st-ibtn--background { width: 24px; height: 24px; padding: 2px; border-radius: var(--radius-full); background: var(--fill-normal); color: var(--label-alternative); }
.st-ibtn--background.st-ibtn--alt { background: var(--material-dimmer); color: var(--static-white); }
.st-ibtn--outlined, .st-ibtn--solid { border-radius: var(--radius-full); }
.st-ibtn--outlined { box-shadow: inset 0 0 0 1px var(--line-neutral); background: var(--background-normal); }
.st-ibtn--solid { background: var(--primary-normal); color: var(--label-on-primary); }
.st-ibtn--solid::after { background: var(--static-black); }
.st-ibtn--outlined.st-ibtn--medium, .st-ibtn--solid.st-ibtn--medium { width: 40px; height: 40px; }
.st-ibtn--outlined.st-ibtn--small, .st-ibtn--solid.st-ibtn--small { width: 32px; height: 32px; }
.st-ibtn--outlined.st-ibtn--custom, .st-ibtn--solid.st-ibtn--custom { width: 28px; height: 28px; }
.st-ibtn:disabled { color: var(--label-disable); cursor: not-allowed; }
.st-ibtn--solid:disabled { background: var(--fill-normal); color: var(--label-disable); }

.st-fab { width: 56px; height: 56px; border-radius: var(--radius-full); border: 0; padding: 16px; background: var(--primary-normal); color: var(--label-on-primary); box-shadow: var(--shadow-strong); cursor: pointer; display: inline-flex; }
.st-fab::after { background: var(--static-black); }
.st-fab > svg { position: relative; z-index: 2; }
.st-fab:disabled { background: var(--interaction-disable); color: var(--label-disable); box-shadow: none; }

/* ===== Chip ===== */
.st-chip { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 500; white-space: nowrap; color: var(--label-alternative); background: transparent; }
.st-chip > * { position: relative; z-index: 2; }
.st-chip--large { height: 40px; padding: 9px 12px; border-radius: var(--radius-10); font-size: 15px; line-height: 22px; }
.st-chip--medium { height: 36px; padding: 7px 11px; border-radius: var(--radius-10); font-size: 15px; line-height: 22px; }
.st-chip--small { height: 32px; padding: 6px 8px; border-radius: var(--radius-8); font-size: 14px; line-height: 20px; }
.st-chip--xsmall { height: 24px; padding: 4px 7px; border-radius: var(--radius-6); font-size: 12px; line-height: 16px; }
.st-chip--solid { background: var(--fill-normal); }
.st-chip--solid.is-active { background: var(--inverse-background); color: var(--inverse-label); }
.st-chip--outlined { box-shadow: inset 0 0 0 1px var(--line-neutral); }
.st-chip--outlined.is-active { color: var(--primary-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-normal) 43%, transparent); background: color-mix(in srgb, var(--primary-normal) 5%, transparent); }
.st-chip:disabled { color: var(--label-disable); cursor: not-allowed; }
.st-chip--solid:disabled { background: var(--interaction-disable); }

/* ===== Filter button ===== */
.st-filter { display: inline-flex; align-items: center; gap: 2px; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 500; color: var(--label-normal); background: transparent; white-space: nowrap; }
.st-filter > * { position: relative; z-index: 2; }
.st-filter__label { display: inline-flex; gap: 4px; padding-inline: 2px; }
.st-filter__label b { font-weight: 600; }
.st-filter--large { height: 40px; padding: 9px 10px 9px 12px; border-radius: var(--radius-10); font-size: 15px; line-height: 22px; }
.st-filter--medium { height: 36px; padding: 7px 9px 7px 11px; border-radius: var(--radius-10); font-size: 15px; line-height: 22px; }
.st-filter--small { height: 32px; padding: 6px 6px 6px 8px; border-radius: var(--radius-8); font-size: 14px; line-height: 20px; }
.st-filter--xsmall { height: 24px; padding: 4px 5px 4px 7px; border-radius: var(--radius-6); font-size: 12px; line-height: 16px; }
.st-filter--outline { box-shadow: inset 0 0 0 1px var(--line-neutral); }
.st-filter--solid { background: var(--fill-normal); }
.st-filter.is-active { color: var(--primary-text); background: color-mix(in srgb, var(--primary-normal) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-normal) 43%, transparent); }
.st-filter:disabled { color: var(--label-disable); cursor: not-allowed; }

.st-toggleicon { border: 0; background: transparent; padding: 0; width: 24px; height: 24px; display: inline-flex; cursor: pointer; color: var(--label-alternative); border-radius: var(--radius-6); }
.st-toggleicon.is-active { color: var(--primary-normal); }

/* ===== Action area ===== */
.st-actionarea { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--background-normal); font-family: var(--font-sans); }
.st-actionarea__actions { display: flex; flex-direction: column-reverse; gap: 8px; }
.st-actionarea__actions.is-row { flex-direction: row; }
.st-actionarea__actions.is-row > * { flex: 1; }
.st-actionarea__caption { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--label-alternative); }
.st-actionarea__extra { font-size: 14px; color: var(--label-neutral); }

/* ===== Checkbox / Radio / CheckMark ===== */
.st-ctl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); color: var(--label-normal); cursor: pointer; font-size: 15px; line-height: 22px; }
.st-ctl--small { font-size: 14px; line-height: 20px; }
.st-ctl.is-tight { gap: 6px; }
.st-ctl.is-disabled { cursor: not-allowed; color: var(--label-disable); }
.st-ctl__label.is-bold { font-weight: 600; }
.st-ctl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.st-check, .st-radio, .st-checkmark { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; }
.st-ctl--small .st-check, .st-ctl--small .st-radio, .st-ctl--small .st-checkmark { width: 20px; height: 20px; }
.st-check__box { width: 18px; height: 18px; border-radius: var(--radius-5); box-shadow: inset 0 0 0 1.5px var(--line-normal); display: inline-flex; align-items: center; justify-content: center; color: var(--label-on-primary); }
.st-ctl--small .st-check__box { width: 15px; height: 15px; border-radius: 4px; }
.st-ctl--small .st-check__box svg { width: 13px; height: 13px; }
.st-check--checked .st-check__box, .st-check--indeterminate .st-check__box { background: var(--primary-normal); box-shadow: none; }
.st-radio__box { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-normal); display: inline-flex; align-items: center; justify-content: center; }
.st-ctl--small .st-radio__box { width: 16px; height: 16px; }
.st-radio.is-checked .st-radio__box { background: var(--primary-normal); box-shadow: none; }
.st-radio.is-checked .st-radio__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--label-on-primary); }
.st-ctl--small .st-radio.is-checked .st-radio__box::after { width: 6px; height: 6px; }
.st-checkmark { color: var(--label-assistive); }
.st-checkmark.is-checked { color: var(--primary-normal); }
.st-ctl.is-disabled .st-check__box, .st-ctl.is-disabled .st-radio__box { background: var(--interaction-disable); box-shadow: inset 0 0 0 1.5px var(--line-alternative); color: var(--label-disable); }
.st-ctl.is-disabled .st-radio.is-checked .st-radio__box::after { background: var(--label-disable); }
.st-ctl.is-disabled .st-checkmark { color: var(--label-disable); }
.st-ctl input:focus-visible + .st-check__box, .st-ctl input:focus-visible + .st-radio__box { outline: 2px solid var(--label-normal); outline-offset: 2px; }
.st-ctl:hover:not(.is-disabled) .st-check::before, .st-ctl:hover:not(.is-disabled) .st-radio::before, .st-ctl:hover:not(.is-disabled) .st-checkmark::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--label-normal); opacity: var(--opacity-5); }

/* ===== Switch ===== */
.st-switch { position: relative; border: 0; padding: 4px; width: 52px; height: 32px; border-radius: var(--radius-full); background: var(--fill-strong); cursor: pointer; transition: background .15s ease; flex: none; }
.st-switch--small { width: 39px; height: 24px; padding: 3px; }
.st-switch__thumb { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--static-white); box-shadow: var(--shadow-normal); transition: transform .15s ease; }
.st-switch--small .st-switch__thumb { width: 18px; height: 18px; }
.st-switch.is-on { background: var(--primary-normal); }
.st-switch.is-on .st-switch__thumb { transform: translateX(20px); }
.st-switch--small.is-on .st-switch__thumb { transform: translateX(15px); }
.st-switch--ios { width: 51px; height: 31px; padding: 2px; }
.st-switch--ios .st-switch__thumb { width: 27px; height: 27px; }
.st-switch--ios.is-on .st-switch__thumb { transform: translateX(20px); }
.st-switch:disabled { opacity: .43; cursor: not-allowed; }

/* ===== Segmented control ===== */
.st-seg { display: flex; width: 100%; font-family: var(--font-sans); }
.st-seg--solid { background: var(--fill-normal); padding: 2px; border-radius: var(--radius-10); }
.st-seg--outlined { box-shadow: inset 0 0 0 1px var(--line-normal); border-radius: var(--radius-10); }
.st-seg__item { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-weight: 500; color: var(--label-alternative); border-radius: 8px; }
.st-seg--large .st-seg__item { height: 44px; font-size: 17px; }
.st-seg--medium .st-seg__item { height: 36px; font-size: 15px; }
.st-seg--small .st-seg__item { height: 28px; font-size: 13px; }
.st-seg--outlined.st-seg--large .st-seg__item { height: 48px; border-radius: var(--radius-12); }
.st-seg--outlined.st-seg--medium .st-seg__item { height: 40px; border-radius: var(--radius-10); }
.st-seg--outlined.st-seg--small .st-seg__item { height: 32px; border-radius: var(--radius-8); }
.st-seg--solid .st-seg__item.is-active { background: var(--background-elevated); color: var(--label-normal); font-weight: 600; box-shadow: var(--shadow-emphasize); }
.st-seg--outlined .st-seg__item.is-active { color: var(--primary-text); background: color-mix(in srgb, var(--primary-normal) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-normal) 43%, transparent); }

/* ===== Field: TextField / TextArea / Select ===== */
.st-field { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); width: 100%; }
.st-field__heading { display: flex; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--label-neutral); }
.st-field__heading em { font-style: normal; color: var(--status-negative); font-weight: 500; }
.st-input { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; border-radius: var(--radius-12); background: var(--background-normal); box-shadow: inset 0 0 0 1px var(--line-normal); color: var(--label-alternative); }
.st-input:focus-within, .st-input.is-focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-normal) 43%, transparent); }
.st-field.is-negative .st-input { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-negative) 43%, transparent); }
.st-field.is-negative .st-input:focus-within, .st-field.is-negative .st-input.is-focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--status-negative) 43%, transparent); }
.st-field.is-positive .st-input { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-positive) 52%, transparent); }
.st-input__control { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 4px; font: 400 16px/24px var(--font-sans); letter-spacing: 0.0057em; color: var(--label-normal); resize: none; }
.st-input__control::placeholder { color: var(--label-assistive); }
.st-input--area { align-items: flex-start; }
.st-input--area .st-input__control { padding-block: 1px; min-height: 26px; }
.st-input--normal .st-input__control { field-sizing: content; }
.st-field.is-disabled .st-input { background: var(--interaction-disable); box-shadow: inset 0 0 0 1px var(--line-alternative); }
.st-field.is-disabled .st-input__control, .st-field.is-disabled .st-select__value { color: var(--label-disable); }
.st-field__helper { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; letter-spacing: 0.0252em; color: var(--label-alternative); }
.st-field.is-negative .st-field__helper { color: var(--status-negative); }
.st-field.is-positive .st-field__helper svg { color: var(--status-positive); }
.st-field__count { margin-left: auto; color: var(--label-assistive); font-family: var(--font-display); }
.st-select { width: 100%; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.st-select__value { flex: 1; min-width: 0; padding: 0 4px; font-size: 16px; line-height: 24px; color: var(--label-normal); display: flex; flex-wrap: wrap; gap: 6px; }
.st-select__value.is-placeholder { color: var(--label-assistive); }
.st-select__chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 4px 6px 4px 8px; border-radius: var(--radius-6); background: var(--fill-normal); color: var(--label-normal); font-size: 13px; line-height: 16px; font-weight: 500; }
.st-select.is-active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-normal) 43%, transparent); }

.st-framed { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 16px 20px; border-radius: var(--radius-12); box-shadow: inset 0 0 0 1px var(--line-neutral); background: var(--background-normal); color: var(--label-normal); font-family: var(--font-sans); cursor: pointer; }
.st-framed__body { flex: 1; position: relative; z-index: 2; }
.st-framed.is-selected { box-shadow: inset 0 0 0 2px var(--primary-normal); background: color-mix(in srgb, var(--primary-normal) 5%, var(--background-normal)); }
.st-framed__mark { color: var(--primary-normal); position: relative; z-index: 2; display: inline-flex; }
.st-framed.is-negative { box-shadow: inset 0 0 0 1px var(--status-negative); }
.st-framed.is-disabled { background: var(--interaction-disable); color: var(--label-disable); cursor: not-allowed; }

.st-autocomplete { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
.st-autocomplete__menu { width: 100%; }

.st-picker { position: relative; display: flex; justify-content: center; gap: 8px; height: 204px; padding: 13px 36px; border-radius: 13px; overflow: hidden; background: var(--background-elevated); box-shadow: var(--shadow-strong); font-family: var(--font-sans); }
.st-picker__band { position: absolute; left: 8px; right: 8px; top: 50%; height: 36px; margin-top: -18px; border-radius: var(--radius-8); background: var(--fill-normal); }
.st-picker__col { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; text-align: center; min-width: 52px; }
.st-picker__col li { height: 36px; line-height: 36px; font-size: 20px; color: var(--label-normal); }
.st-picker__col li.is-selected { font-weight: 600; }

/* ===== Content ===== */
.st-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: var(--background-alternative); color: var(--label-assistive); box-shadow: inset 0 0 0 1px var(--line-alternative); }
.st-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-avatar__initial { font: 700 1em/1 var(--font-sans); color: var(--label-on-primary); }
.st-avatar:has(.st-avatar__initial) { background: var(--primary-normal); box-shadow: none; }
.st-avatargroup { display: inline-flex; align-items: center; }
.st-avatargroup > .st-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--background-normal); }
.st-avatargroup > .st-avatar:first-child { margin-left: 0; }
.st-avatargroup__more { margin-left: 6px; font: 500 12px/16px var(--font-sans); color: var(--label-alternative); }
.st-avatargroup--small > .st-avatar { margin-left: -8px; }

.st-thumb { position: relative; overflow: hidden; background: var(--background-alternative); width: 100%; max-width: 100%; }
.st-thumb.has-radius { border-radius: var(--radius-12); }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--label-assistive); background: repeating-linear-gradient(135deg, var(--fill-alternative) 0 10px, transparent 10px 20px); }

.st-card { display: flex; flex-direction: column; gap: 8px; width: 240px; font-family: var(--font-sans); }
.st-card.is-mobile { width: 152px; gap: 6px; }
.st-card__media { position: relative; border-radius: var(--radius-12); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-alternative); }
.st-card__media .st-thumb { aspect-ratio: 3 / 2; }
.st-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; gap: 4px; background: linear-gradient(to top, rgba(14,27,51,0.35), rgba(14,27,51,0)); color: var(--static-white); font-size: 12px; font-weight: 500; }
.st-card__overlay .st-toggleicon { color: var(--static-white); }
.st-card__overlay .st-toggleicon.is-active { color: var(--primary-normal); }
.st-card__body { display: flex; flex-direction: column; gap: 4px; padding-block: 6px; }
.st-card__badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; }
.st-card__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--label-normal); letter-spacing: 0.0057em; }
.st-card.is-mobile .st-card__title, .st-listcard.is-mobile .st-card__title { font-size: 15px; line-height: 22px; }
.st-card__caption { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--label-alternative); }
.st-listcard { display: flex; align-items: center; gap: 16px; width: 480px; max-width: 100%; font-family: var(--font-sans); color: var(--label-alternative); }
.st-listcard.is-mobile { gap: 12px; width: 335px; }
.st-listcard__media { width: 120px; height: 80px; flex: none; border-radius: var(--radius-12); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-alternative); }
.st-listcard.is-mobile .st-listcard__media { width: 96px; height: 64px; }
.st-listcard__media .st-thumb { height: 100%; }
.st-listcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.st-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-weight: 500; white-space: nowrap; color: var(--label-alternative); }
.st-badge--xsmall { height: 20px; padding: 3px 6px; border-radius: var(--radius-6); font-size: 11px; line-height: 14px; }
.st-badge--small { height: 24px; padding: 4px 6px; border-radius: var(--radius-6); font-size: 12px; line-height: 16px; }
.st-badge--medium { height: 28px; padding: 5px 8px; border-radius: var(--radius-8); font-size: 13px; line-height: 18px; }
.st-badge--solid.st-badge--neutral { background: var(--fill-normal); }
.st-badge--outlined.st-badge--neutral { box-shadow: inset 0 0 0 1px var(--line-neutral); }
.st-badge--accent { color: var(--badge-accent); }
.st-badge--solid.st-badge--accent { background: color-mix(in srgb, var(--badge-accent) 8%, transparent); }
.st-badge--outlined.st-badge--accent { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-accent) 43%, transparent); }

.st-cell { display: flex; align-items: center; gap: 8px; padding: 12px 0; width: 100%; font-family: var(--font-sans); color: var(--label-normal); cursor: pointer; border-radius: var(--radius-8); text-align: left; }
.st-cell > * { position: relative; z-index: 2; }
.st-cell::after { inset: 0 -8px; }
.st-cell--large { padding-block: 16px; }
.st-cell--small { padding-block: 8px; }
.st-cell--none { padding-block: 0; }
.st-cell.is-top { align-items: flex-start; }
.st-cell.is-fill { padding-inline: 20px; }
.st-cell.is-fill::after { inset: 0; }
.st-cell__leading { display: inline-flex; flex: none; color: var(--label-normal); }
.st-cell__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-cell__title { font-size: 16px; line-height: 24px; letter-spacing: 0.0057em; }
.st-cell__caption { font-size: 13px; line-height: 18px; color: var(--label-alternative); }
.st-cell.is-ellipsis .st-cell__title, .st-cell.is-ellipsis .st-cell__caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cell__trailing { flex: none; color: var(--label-alternative); font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.st-cell__chev { color: var(--label-assistive); }
.st-cell.is-selected .st-cell__title { color: var(--primary-text); font-weight: 600; }
.st-cell__check { color: var(--primary-text); }
.st-cell.is-disabled { color: var(--label-disable); cursor: not-allowed; }
.st-cell.is-disabled .st-cell__caption, .st-cell.is-disabled .st-cell__leading { color: var(--label-disable); }

.st-push-anchor { position: relative; display: inline-flex; }
.st-push-anchor > .st-push { position: absolute; top: -2px; right: -2px; }
.st-push { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--primary-normal); color: var(--label-on-primary); font: 600 11px/14px var(--font-display); flex: none; }
.st-push--dot.st-push--xsmall { width: 4px; height: 4px; }
.st-push--dot.st-push--small { width: 6px; height: 6px; }
.st-push--dot.st-push--medium { width: 8px; height: 8px; }
.st-push--number, .st-push--new { min-width: 20px; height: 20px; padding: 3px 6px; }
.st-push--number.st-push--xsmall, .st-push--new.st-push--xsmall { min-width: 16px; height: 16px; padding: 1px 4px; font-size: 10px; }
.st-push--number.st-push--medium, .st-push--new.st-push--medium { min-width: 24px; height: 24px; font-size: 13px; }

.st-play { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--navy-10) 52%, transparent); color: var(--static-white); backdrop-filter: blur(8px); }
.st-play--small { width: 40px; height: 40px; }
.st-play--medium { width: 60px; height: 60px; }
.st-play--large { width: 80px; height: 80px; }
.st-play.is-alt { background: var(--static-white); color: var(--navy-15); box-shadow: var(--shadow-strong); }
.st-play svg { margin-left: 3px; }

.st-sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-family: var(--font-sans); }
.st-sechead__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-sechead h2 { margin: 0; color: var(--label-strong); }
.st-sechead--large h2 { font: 700 24px/32px var(--font-display); letter-spacing: -0.023em; }
.st-sechead--medium h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; }
.st-sechead--small h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.st-sechead--xsmall h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.st-sechead.is-desktop.st-sechead--large h2 { font-size: 28px; line-height: 38px; letter-spacing: -0.0236em; }
.st-sechead.is-desktop.st-sechead--medium h2 { font-size: 22px; line-height: 30px; letter-spacing: -0.0194em; }

/* ===== Loading ===== */
.st-spinner { display: inline-flex; color: var(--primary-normal); }
.st-spinner svg { animation: st-spin 0.9s linear infinite; }
.st-spinner circle { fill: none; stroke-width: 3; }
.st-spinner__track { stroke: var(--fill-normal); }
.st-spinner__arc { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 20 100; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-brandloader { display: inline-flex; }
.st-brandloader.is-animated .st-logo { animation: st-pulse 1.1s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.86); } }
.st-skel { display: block; background: var(--fill-alternative); border-radius: var(--radius-3); }
.st-skel--text { height: 16px; margin-block: 3px; }
.st-skel--text.is-center { margin-inline: auto; }
.st-skel--text.is-trailing { margin-left: auto; }
.st-skel--circle { border-radius: 50%; }
.st-skel.is-white { background: color-mix(in srgb, var(--static-white) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .st-spinner svg, .st-brandloader .st-logo { animation-duration: 3s; } }

/* ===== Navigation ===== */
.st-category { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; font-family: var(--font-sans); }
.st-category.is-padded { padding-inline: 20px; }
.st-category__chip { flex: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 500; white-space: nowrap; color: var(--label-alternative); background: var(--fill-normal); }
.st-category__chip > * { position: relative; z-index: 2; }
.st-category--xsmall .st-category__chip { height: 24px; padding: 4px 7px; border-radius: var(--radius-6); font-size: 12px; }
.st-category--small .st-category__chip { height: 32px; padding: 6px 8px; border-radius: var(--radius-8); font-size: 14px; }
.st-category--medium .st-category__chip { height: 36px; padding: 7px 11px; border-radius: var(--radius-10); font-size: 15px; }
.st-category--large .st-category__chip { height: 40px; padding: 9px 12px; border-radius: var(--radius-10); font-size: 15px; }
.st-category--xlarge .st-category__chip { height: 48px; padding: 12px 16px; border-radius: var(--radius-12); font-size: 16px; }
.st-category--normal .st-category__chip.is-active { background: var(--inverse-background); color: var(--inverse-label); }
.st-category--alternative .st-category__chip { background: transparent; box-shadow: inset 0 0 0 1px var(--line-neutral); }
.st-category--alternative .st-category__chip.is-active { color: var(--primary-text); background: color-mix(in srgb, var(--primary-normal) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-normal) 43%, transparent); }

.st-tabs { display: flex; gap: 24px; width: 100%; box-shadow: inset 0 -1px 0 var(--line-alternative); font-family: var(--font-sans); overflow-x: auto; scrollbar-width: none; }
.st-tabs.is-padded { padding-inline: 20px; }
.st-tabs.is-fill { gap: 0; }
.st-tabs.is-fill .st-tab { flex: 1; }
.st-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; padding: 12px 0; cursor: pointer; font-family: inherit; font-weight: 600; color: var(--label-assistive); white-space: nowrap; border-radius: 0; }
.st-tab::after { inset: 0 -12px; border-radius: var(--radius-6); }
.st-tabs--large .st-tab { height: 56px; font-size: 18px; }
.st-tabs--medium .st-tab { height: 48px; font-size: 17px; }
.st-tabs--small .st-tab { height: 40px; font-size: 15px; padding-block: 9px; }
.st-tab.is-active { color: var(--label-strong); }
.st-tab.is-active::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--label-strong); }
.st-tab__count { color: var(--primary-text); font-family: var(--font-display); }
.st-tab:disabled { color: var(--label-disable); cursor: not-allowed; }

.st-counter { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--static-black) 28%, transparent); color: color-mix(in srgb, var(--static-white) 88%, transparent); font: 600 15px/22px var(--font-display); backdrop-filter: blur(8px); }
.st-counter i { font-style: normal; font-weight: 400; opacity: .5; }
.st-counter--small { padding: 4px 10px; font-size: 13px; line-height: 18px; }
.st-counter.is-alt { background: var(--fill-normal); color: var(--label-neutral); backdrop-filter: none; }
.st-dots { display: inline-flex; align-items: center; gap: 10px; }
.st-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--fill-strong); }
.st-dots span.is-active { background: var(--label-normal); }
.st-dots--small { gap: 6px; }
.st-dots--small span { width: 6px; height: 6px; }
.st-dots.is-white span { background: color-mix(in srgb, var(--static-white) 43%, transparent); }
.st-dots.is-white span.is-active { background: var(--static-white); }
.st-pagination { display: flex; align-items: center; gap: 4px; font-family: var(--font-display); }
.st-pagination .st-ibtn--normal { color: var(--label-alternative); }
.st-pagination__page { min-width: 32px; height: 32px; padding: 0 6px; border: 0; background: transparent; border-radius: var(--radius-8); cursor: pointer; font: 500 15px/1 var(--font-display); color: var(--label-alternative); }
.st-pagination__page.is-active { color: var(--label-on-primary); background: var(--primary-normal); font-weight: 700; }

.st-topnav { background: var(--background-normal); font-family: var(--font-sans); width: 100%; }
.st-topnav__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding-inline: 16px; color: var(--label-normal); }
.st-topnav--android .st-topnav__bar { height: 56px; }
.st-topnav--web .st-topnav__bar { height: 56px; padding-inline: 20px; }
.st-topnav__leading, .st-topnav__trailing { display: flex; gap: 16px; align-items: center; min-width: 56px; }
.st-topnav__trailing { justify-content: flex-end; }
.st-topnav__title { flex: 1; text-align: center; font-size: 17px; line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-topnav__title.is-start { text-align: left; font-size: 20px; }

.st-bottomnav { background: var(--background-normal); box-shadow: inset 0 1px 0 var(--line-alternative); font-family: var(--font-sans); width: 100%; }
.st-bottomnav__tabs { display: flex; padding-inline: 8px; }
.st-bottomnav__tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0; border: 0; background: transparent; cursor: pointer; color: var(--interaction-inactive); font: 500 11px/14px var(--font-sans); }
.st-bottomnav__tab.is-active { color: var(--primary-text); }
.st-bottomnav__tab.is-active .st-icon { color: var(--primary-normal); }
.st-bottomnav__icon { position: relative; display: inline-flex; }
.st-bottomnav__icon .st-push { position: absolute; top: 0; right: -2px; }

.st-gnb { width: 100%; background: var(--background-normal); box-shadow: inset 0 -1px 0 var(--line-alternative); font-family: var(--font-sans); }
.st-gnb__inner { display: flex; align-items: center; gap: 32px; height: 60px; max-width: 1100px; margin: 0 auto; padding-inline: 20px; }
.st-gnb.is-mobile .st-gnb__inner { height: 56px; gap: 12px; }
.st-gnb__logo { display: inline-flex; }
.st-gnb__menu { display: flex; gap: 24px; flex: 1; }
.st-gnb__menu a { font-size: 15px; font-weight: 600; color: var(--label-alternative); text-decoration: none; padding-block: 18px; }
.st-gnb__menu a.is-active { color: var(--label-strong); box-shadow: inset 0 -2px 0 var(--primary-normal); }
.st-gnb__aside { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.st-gnb__sep { width: 1px; height: 12px; background: var(--line-normal); }

.st-footer { width: 100%; background: var(--background-alternative); font-family: var(--font-sans); color: var(--label-alternative); }
.st-footer__inner { max-width: 1100px; margin: 0 auto; padding: 40px 20px; display: flex; flex-direction: column; gap: 20px; }
.st-footer__top { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.st-footer__top nav { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.st-footer__top a { font-size: 13px; font-weight: 500; color: var(--label-neutral); text-decoration: none; }
.st-footer__top a.is-strong { color: var(--label-normal); font-weight: 700; }
.st-footer__sns { display: flex; gap: 16px; }
.st-footer__sns .st-ibtn { color: var(--label-alternative); }
.st-footer__info, .st-footer__copy { margin: 0; font-size: 12px; line-height: 18px; }
.st-footer.is-mobile .st-footer__top { flex-direction: column; align-items: flex-start; gap: 20px; }

.st-tracker { list-style: none; margin: 0; padding: 0; display: flex; width: 100%; font-family: var(--font-sans); }
.st-tracker li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.st-tracker li + li::before { content: ""; position: absolute; top: 11px; right: 50%; left: -50%; height: 2px; margin-inline: 16px; background: var(--line-normal); }
.st-tracker li.is-done + li::before, .st-tracker li.is-done + li.is-current::before { background: var(--primary-normal); }
.st-tracker__dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-display); background: var(--fill-normal); color: var(--label-alternative); position: relative; z-index: 1; }
.st-tracker li.is-done .st-tracker__dot, .st-tracker li.is-current .st-tracker__dot { background: var(--primary-normal); color: var(--label-on-primary); }
.st-tracker__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--label-alternative); }
.st-tracker li.is-current .st-tracker__label { color: var(--label-normal); font-weight: 600; }

.st-scrollbar { position: relative; display: inline-block; width: 13px; padding: 3px; }
.st-scrollbar span { position: absolute; left: 3px; right: 3px; border-radius: var(--radius-full); background: var(--fill-strong); }
.st-scrollbar--small { width: 9px; }

/* ===== Feedback ===== */
.st-scrim { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 300px; width: 100%; background: var(--material-dimmer); }
.st-scrim--bottom { align-items: flex-end; padding: 0; }
.st-alert { width: 335px; max-width: 100%; border-radius: var(--radius-12); background: var(--background-elevated); box-shadow: var(--shadow-heavy); font-family: var(--font-sans); overflow: hidden; }
.st-alert__info { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.st-alert h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--label-normal); }
.st-alert p { margin: 0; font-size: 15px; line-height: 22px; color: var(--label-alternative); }
.st-alert__actions { display: flex; justify-content: flex-end; gap: 24px; padding: 0 20px 12px; }

.st-toast { display: flex; align-items: center; gap: 8px; width: 335px; max-width: 100%; min-height: 54px; padding: 11px 16px; border-radius: var(--radius-12); background: color-mix(in srgb, var(--inverse-background) 88%, transparent); backdrop-filter: blur(16px); box-shadow: var(--shadow-strong); font-family: var(--font-sans); color: var(--inverse-label); }
.st-toast__msg { font-size: 15px; line-height: 22px; font-weight: 600; padding-block: 5px; }
.st-toast__icon { display: inline-flex; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--static-white) 0 40%, transparent 41%); }
.st-toast--positive .st-toast__icon { color: var(--status-positive); }
.st-toast--cautionary .st-toast__icon { color: var(--status-cautionary); background: none; }
.st-toast--negative .st-toast__icon { color: var(--status-negative); }
.st-snackbar { justify-content: space-between; gap: 32px; }
.st-snackbar__text { display: flex; flex-direction: column; }
.st-snackbar__text .st-toast__msg { padding-block: 0; }
.st-snackbar__desc { font-size: 13px; line-height: 18px; opacity: .8; }
.st-snackbar__action { flex: none; border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: var(--radius-6); font: 600 15px/22px var(--font-sans); color: var(--inverse-primary); }

/* ===== Presentation ===== */
.st-tooltip { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--font-sans); }
.st-tooltip__body { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-8); background: color-mix(in srgb, var(--inverse-background) 88%, transparent); color: var(--inverse-label); font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: var(--shadow-strong); white-space: nowrap; }
.st-tooltip__body kbd { font: inherit; opacity: .6; }
.st-tooltip--small .st-tooltip__body { padding: 5px 8px; border-radius: var(--radius-6); font-size: 11px; line-height: 14px; gap: 4px; }
.st-tooltip::before { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.st-tooltip--bottom { padding-top: 6px; }
.st-tooltip--bottom::before { top: -6px; left: 14px; border-bottom-color: color-mix(in srgb, var(--inverse-background) 88%, transparent); }
.st-tooltip--top { padding-bottom: 6px; }
.st-tooltip--top::before { bottom: -6px; left: 14px; border-top-color: color-mix(in srgb, var(--inverse-background) 88%, transparent); }
.st-tooltip--left { padding-left: 6px; }
.st-tooltip--left::before { left: -6px; top: 50%; margin-top: -6px; border-right-color: color-mix(in srgb, var(--inverse-background) 88%, transparent); }
.st-tooltip--right { padding-right: 6px; }
.st-tooltip--right::before { right: -6px; top: 50%; margin-top: -6px; border-left-color: color-mix(in srgb, var(--inverse-background) 88%, transparent); }

.st-popover { position: relative; display: inline-flex; flex-direction: column; width: 240px; padding-block: 8px; font-family: var(--font-sans); }
.st-popover__arrow { position: absolute; top: 2px; left: 20px; width: 12px; height: 12px; background: var(--background-elevated); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--line-solid-neutral); }
.st-popover--top .st-popover__arrow { top: auto; bottom: 2px; box-shadow: 1px 1px 0 var(--line-solid-neutral); }
.st-popover__body { position: relative; border-radius: var(--radius-12); background: var(--background-elevated); box-shadow: var(--shadow-strong), inset 0 0 0 1px var(--line-solid-neutral); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.st-popover__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-popover__head strong { font-size: 16px; line-height: 24px; color: var(--label-normal); }
.st-popover__content { font-size: 14px; line-height: 20px; color: var(--label-neutral); }
.st-popover__action { display: flex; justify-content: flex-end; }

.st-menu { width: 320px; max-width: 100%; padding: 8px 20px; border-radius: var(--radius-16); background: var(--background-elevated); box-shadow: var(--shadow-strong), inset 0 0 0 1px var(--line-solid-neutral); display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans); }
.st-menu__cell { pointer-events: auto; }
.st-menu__thumb { width: 40px; height: 40px; border-radius: var(--radius-8); background: var(--fill-normal); }
.st-menu__direct { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--primary-text); font-size: 15px; font-weight: 600; box-shadow: inset 0 -1px 0 var(--line-alternative); }

.st-sheet { width: 375px; max-width: 100%; border-radius: var(--radius-20) var(--radius-20) 0 0; background: var(--background-elevated); box-shadow: var(--shadow-heavy); font-family: var(--font-sans); display: flex; flex-direction: column; }
.st-sheet__handle { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-strong); margin: 8px auto 4px; }
.st-sheet__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; }
.st-sheet__nav h2, .st-popup__nav h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--label-normal); letter-spacing: -0.012em; }
.st-sheet__content { padding: 8px 20px 4px; color: var(--label-neutral); font-size: 15px; line-height: 22px; }
.st-sheet .st-actionarea { background: transparent; }

.st-popup { max-width: 100%; border-radius: var(--radius-12); background: var(--background-elevated); box-shadow: var(--shadow-heavy); font-family: var(--font-sans); display: flex; flex-direction: column; }
.st-popup--large, .st-popup--xlarge { border-radius: var(--radius-20); }
.st-popup__nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.st-popup--large .st-popup__nav { padding: 24px 24px 12px; }
.st-popup--xlarge .st-popup__nav { padding: 28px 32px 12px; }
.st-popup__content { padding: 8px 20px 4px; color: var(--label-neutral); font-size: 15px; line-height: 22px; }
.st-popup--large .st-popup__content { padding-inline: 24px; }
.st-popup--xlarge .st-popup__content { padding-inline: 32px; }
.st-popup__actions { display: flex; gap: 8px; padding: 20px; }
.st-popup--large .st-popup__actions { padding: 24px; }
.st-popup--xlarge .st-popup__actions { padding: 24px 32px; }
.st-popup__actions > * { flex: 1; }