@charset "UTF-8";
:root {
  --color-gray-00: #ffffff;
  --color-gray-10: #f4f5f7;
  --color-gray-20: #e4e6e8;
  --color-gray-30: #d7dade;
  --color-gray-40: #c9ccd1;
  --color-gray-50: #b0b4b9;
  --color-gray-60: #7f848a;
  --color-gray-70: #6a6e73;
  --color-gray-80: #494e52;
  --color-gray-90: #33363b;
  --color-gray-100: #191b1e;
  --color-blue-10: #f5f4fb;
  --color-blue-15: #ece9fb;
  --color-blue-20: #dbd5f8;
  --color-blue-30: #beb4f2;
  --color-blue-40: #9989ea;
  --color-blue-50: #6147df;
  --color-blue-60: #3617ce;
  --color-blue-70: #2b12a5;
  --color-blue-80: #200e7c;
  --color-blue-90: #160952;
  --color-blue-100: #0c062d;
  --color-skyblue-10: #f2fafc;
  --color-skyblue-15: #d9f2fc;
  --color-skyblue-20: #b6e3f7;
  --color-skyblue-30: #9cdaf4;
  --color-skyblue-40: #6dc7ed;
  --color-skyblue-50: #3cb4e7;
  --color-skyblue-60: #1a9bd2;
  --color-skyblue-70: #157ca8;
  --color-skyblue-80: #2d7b9b;
  --color-skyblue-90: #24637d;
  --color-skyblue-100: #051f2a;
  --color-green-10: #edf8f1;
  --color-green-15: #d5f1e1;
  --color-green-20: #c3ead4;
  --color-green-30: #a0deba;
  --color-green-40: #70cd96;
  --color-green-50: #42bc74;
  --color-green-60: #209d54;
  --color-green-70: #1a7e43;
  --color-green-80: #135e32;
  --color-green-90: #0d3f22;
  --color-green-100: #061f11;
  --color-red-10: #fce7e7;
  --color-red-15: #fbdada;
  --color-red-20: #f8baba;
  --color-red-30: #f0a1a1;
  --color-red-40: #e97171;
  --color-red-50: #e14242;
  --color-red-60: #cc2121;
  --color-red-70: #a31a1a;
  --color-red-80: #7a1414;
  --color-red-90: #520d0d;
  --color-red-100: #290707;
  --color-yellow-10: #fcf8ee;
  --color-yellow-15: #fbebbc;
  --color-yellow-20: #f4e4ae;
  --color-yellow-30: #efd990;
  --color-yellow-40: #e9cb66;
  --color-yellow-50: #e1b933;
  --color-yellow-60: #daa800;
  --color-yellow-70: #ae8600;
  --color-yellow-80: #836500;
  --color-yellow-90: #574300;
  --color-yellow-100: #2c2200;
  --color-orange-10: #fbf1e7;
  --color-orange-15: #fce9d4;
  --color-orange-20: #fad8b3;
  --color-orange-30: #efc499;
  --color-orange-40: #e7a767;
  --color-orange-50: #df8934;
  --color-orange-60: #d9730d;
  --color-orange-70: #ac5601;
  --color-orange-80: #814101;
  --color-orange-90: #562b00;
  --color-orange-100: #2b1600;
  --color-alpha-blue-40: #3617ce66;
  --color-alpha-blue-90: #3617cee5;
  --color-alpha-white-5: #ffffff0d;
  --color-alpha-white-10: #ffffff1a;
  --color-alpha-white-20: #ffffff33;
  --color-alpha-white-30: #ffffff4d;
  --color-alpha-white-40: #ffffff66;
  --color-alpha-white-50: #ffffff80;
  --color-alpha-white-60: #ffffff99;
  --color-alpha-white-70: #ffffffb2;
  --color-alpha-white-80: #ffffffcc;
  --color-alpha-white-90: #ffffffe5;
  --color-alpha-black-5: #191b1e0d;
  --color-alpha-black-10: #191b1e1a;
  --color-alpha-black-20: #191b1e33;
  --color-alpha-black-30: #191b1e4d;
  --color-alpha-black-40: #191b1e66;
  --color-alpha-black-50: #191b1e80;
  --color-alpha-black-60: #191b1e99;
  --color-alpha-black-70: #191b1eb2;
  --color-alpha-black-80: #191b1ecc;
  --color-alpha-black-90: #191b1ee5;
  --label-disabled: var(--color-gray-60);
  --label-inverse-muted: var(--color-alpha-white-80);
  --label-inverse-normal: var(--color-gray-00);
  --label-inverse-soft: var(--color-alpha-white-70);
  --label-muted: var(--color-gray-80);
  --label-normal: var(--color-gray-100);
  --label-soft: var(--color-gray-70);
  --background-elevated-normal: var(--color-gray-00);
  --background-elevated-strong: var(--color-gray-10);
  --background-normal: var(--color-gray-00);
  --background-strong: var(--color-gray-10);
  --fill-alpha-black-heavy: var(--color-alpha-black-90);
  --fill-alpha-black-muted: var(--color-alpha-black-30);
  --fill-alpha-black-normal: var(--color-alpha-black-50);
  --fill-alpha-black-soft: var(--color-alpha-black-5);
  --fill-alpha-black-strong: var(--color-alpha-black-80);
  --fill-alpha-white-muted: var(--color-alpha-white-50);
  --fill-alpha-white-normal: var(--color-alpha-white-70);
  --fill-alpha-white-soft: var(--color-alpha-white-20);
  --fill-disabled: var(--color-gray-20);
  --fill-heavy: var(--color-gray-20);
  --fill-hyper: var(--color-gray-100);
  --fill-normal: var(--color-gray-00);
  --fill-strong: var(--color-gray-10);
  --fill-ultra: var(--color-gray-80);
  --border-box-heavy: var(--color-alpha-black-60);
  --border-box-normal: var(--color-alpha-black-10);
  --border-box-strong: var(--color-alpha-black-50);
  --border-box-ultra: var(--color-gray-100);
  --border-line-muted: var(--color-alpha-black-5);
  --border-line-normal: var(--color-alpha-black-10);
  --border-line-strong: var(--color-gray-100);
  --brand-blue-alpha-muted: var(--color-alpha-blue-40);
  --brand-blue-alpha-normal: var(--color-alpha-blue-90);
  --brand-blue-muted: var(--color-blue-40);
  --brand-blue-normal: var(--color-blue-60);
  --brand-blue-soft: var(--color-blue-30);
  --brand-blue-subtle: var(--color-blue-15);
  --brand-blue-weak: var(--color-blue-10);
  --brand-green-muted: var(--color-green-40);
  --brand-green-normal: var(--color-green-60);
  --brand-green-soft: var(--color-green-30);
  --brand-green-strong: var(--color-green-70);
  --brand-green-subtle: var(--color-green-15);
  --brand-green-weak: var(--color-green-10);
  --brand-orange-muted: var(--color-orange-40);
  --brand-orange-normal: var(--color-orange-60);
  --brand-orange-soft: var(--color-orange-30);
  --brand-orange-strong: var(--color-orange-80);
  --brand-orange-subtle: var(--color-orange-15);
  --brand-red-muted: var(--color-red-40);
  --brand-red-normal: var(--color-red-60);
  --brand-red-soft: var(--color-red-30);
  --brand-red-strong: var(--color-red-70);
  --brand-red-subtle: var(--color-red-15);
  --brand-red-weak: var(--color-red-10);
  --brand-skyblue-heavy: var(--color-skyblue-90);
  --brand-skyblue-muted: var(--color-skyblue-40);
  --brand-skyblue-normal: var(--color-skyblue-60);
  --brand-skyblue-soft: var(--color-skyblue-30);
  --brand-skyblue-strong: var(--color-skyblue-70);
  --brand-skyblue-subtle: var(--color-skyblue-15);
  --brand-skyblue-weak: var(--color-skyblue-10);
  --brand-yellow-muted: var(--color-yellow-40);
  --brand-yellow-normal: var(--color-yellow-60);
  --brand-yellow-soft: var(--color-yellow-30);
  --brand-yellow-strong: var(--color-yellow-80);
  --brand-yellow-subtle: var(--color-yellow-15);
  --state-error-muted: var(--color-red-20);
  --state-error-normal: var(--color-red-60);
  --state-error-soft: var(--color-red-10);
  --p-0-5: 2px;
  --p-1: 4px;
  --p-1-5: 6px;
  --p-2: 8px;
  --p-3: 12px;
  --p-4: 16px;
  --p-5: 20px;
  --p-6: 24px;
  --p-7: 28px;
  --p-8: 32px;
  --p-9: 36px;
  --p-10: 40px;
  --p-12: 48px;
  --p-14: 56px;
  --p-16: 64px;
  --p-18: 72px;
  --p-20: 80px;
  --p-22: 88px;
  --p-24: 96px;
  --p-26: 104px;
  --p-28: 112px;
  --p-30: 120px;
  --p-32: 128px;
  --p-34: 136px;
  --p-36: 144px;
  --p-38: 152px;
  --p-40: 160px;
  --gap-0-5: 2px;
  --gap-1: 4px;
  --gap-1-5: 6px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-7: 28px;
  --gap-8: 32px;
  --gap-9: 36px;
  --gap-10: 40px;
  --gap-12: 48px;
  --gap-14: 56px;
  --gap-16: 64px;
  --gap-18: 72px;
  --gap-20: 80px;
  --gap-22: 88px;
  --gap-24: 96px;
  --gap-26: 104px;
  --rounded-sm: 4px;
  --rounded-md: 6px;
  --rounded-lg: 8px;
  --rounded-xl: 12px;
  --rounded-2xl: 16px;
  --rounded-3xl: 24px;
  --rounded-4xl: 32px;
  --rounded-full: 9999px;
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-3: 3px;
  --font-family-pretendard: "Pretendard";
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-title-medium: 18px;
  --font-size-title-small: 16px;
  --font-size-title-xlarge: 22px;
  --font-size-title-2xlarge: 28px;
  --font-size-title-3xlarge: 30px;
  --font-size-body-large: 16px;
  --font-size-body-medium: 14px;
  --font-size-body-small: 13px;
  --font-size-caption-medium: 12px;
  --font-size-component-large: 16px;
  --font-size-component-2xsmall: 11px;
  --font-size-component-xlarge: 18px;
  --font-size-component-3xlarge: 22px;
  --font-size-component-medium: 14px;
  --font-size-component-small: 13px;
  --font-size-component-xsmall: 12px;
  --font-size-component-2xlarge: 20px;
}

@media (min-width: 768px) {
  :root {
    --font-size-title-medium: 22px;
    --font-size-title-small: 18px;
    --font-size-title-xlarge: 28px;
    --font-size-title-2xlarge: 38px;
    --font-size-title-3xlarge: 48px;
    --font-size-body-large: 18px;
    --font-size-body-medium: 16px;
    --font-size-body-small: 14px;
  }
}
:root {
  --state-error-text: var(--color-red-70);
  --transition-base: 0.15s ease;
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --overlay-backdrop: var(--color-alpha-black-50);
  --shadow-popover:
    0 10px 15px -3px rgba(25, 27, 30, 0.03), 0 4px 6px -2px rgba(25, 27, 30, 0.06);
  --scrollbar-size: 0px;
}

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

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strong,
sub,
sup,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
}

[data-scope-hidden] {
  display: none !important;
}

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: var(--label-normal);
  background: var(--background-normal);
}

#main {
  min-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
  padding-bottom: var(--p-18);
}
@media (min-width: 768px) {
  #main {
    min-height: calc(100dvh - 64px - 32px);
    padding-bottom: var(--p-36);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

.text-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.text-link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
textarea,
select,
button {
  font: inherit;
}

.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-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 100%;
  padding: 8px 12px;
  background: var(--label-normal);
  color: var(--background-normal);
  text-align: center;
  z-index: 1001;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

.bg-gray {
  background: var(--background-strong);
}

.scrollbar-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  overflow: scroll;
  visibility: hidden;
  pointer-events: none;
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    .scrollbar-probe {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  .scrollbar-probe::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  .scrollbar-probe::-webkit-scrollbar-track {
    background: transparent;
    margin: 3px 0;
  }
  .scrollbar-probe::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  .scrollbar-probe:hover {
    outline: 1px solid transparent;
  }
  .scrollbar-probe:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}

:is(.drawer__content, .dialog__content) > .overlay__handle {
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  padding: 12px 24px 6px;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  :is(.drawer__content, .dialog__content) > .overlay__handle {
    height: 40px;
  }
}
.overlay__handle-bar {
  width: 48px;
  height: 6px;
  border-radius: 999px;
  background: var(--fill-strong);
}

.overlay__handle[data-bar-hidden=true] .overlay__handle-bar {
  visibility: hidden;
}

:is(.drawer__content, .dialog__content) > .overlay__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  /* 2026-07-16 수정 #0716-32 : overlay 헤더 모서리 radius 바닥 한정·초기 포커스 링 추가 */
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px 4px;
  /* 2026-07-24 수정 #0724-11 : overlay__header 타이틀 행 높이 예약(strut)·초기 포커스 heading 이동 대응 */
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header::before {
  content: "";
  width: 0;
  height: 32px;
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header {
  /* 2026-07-16 수정 #0716-32 : overlay 헤더 모서리 radius 바닥 한정·초기 포커스 링 추가 */
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header > [data-initial-focus]:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
  border-radius: var(--rounded-sm);
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body {
  overflow-y: scroll;
  overscroll-behavior: none;
  flex: 1 1 auto;
  min-height: 0;
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body::-webkit-scrollbar-track {
    background: transparent;
    margin: 3px 0;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body:hover {
    outline: 1px solid transparent;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body {
  /* 2026-07-16 수정 #0716-33 : overlay 본문 iOS 다크모드 스크롤바 색 명시 */
}
@media (hover: none) {
  @supports (-webkit-touch-callout: none) {
    :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body {
      scrollbar-color: var(--fill-alpha-black-normal) transparent;
    }
  }
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body:focus-visible::after {
  z-index: -1;
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body > .overlay__body-inner {
  padding: 0 20px 20px;
  padding-inline-end: calc(20px - var(--scrollbar-size));
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-soft);
  /* 2026-07-24 수정 #0724-10 : 모달 본문 data-table-scroll 풀블리드 보정 */
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body > .overlay__body-inner .data-table-scroll {
  --table-bleed: calc(20px - var(--scrollbar-size));
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body::after {
  content: "";
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: block;
  height: 20px;
  margin-top: -20px;
  pointer-events: none;
  background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--border-line-normal);
  /* 2026-07-24 수정 #0724-11 : overlay__footer 를 본문 스크롤 페이드 위 레이어로(z-index) */
  z-index: 1;
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__footer:has(> .button-action) {
  display: block;
  padding: 0;
  border-top: 0;
}
:is(.drawer__content, .dialog__content) > .overlay__panel {
  /* 2026-07-24 수정 #0724-11 : 본문 없는 알럿/컨펌 패널 — 타이틀→버튼 호흡 20/40 신설 */
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header:has(+ .overlay__footer) {
  padding-bottom: 0;
}
:is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header + .overlay__footer {
  margin-top: 20px;
}

@media (min-width: 768px) {
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header {
    padding-inline: 40px;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header::before {
    height: 36px;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body > .overlay__body-inner {
    padding-inline: 40px;
    padding-inline-end: calc(40px - var(--scrollbar-size));
    padding-bottom: 40px;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body > .overlay__body-inner .data-table-scroll {
    --table-bleed: calc(40px - var(--scrollbar-size));
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__body::after {
    height: 40px;
    margin-top: -40px;
  }
  :is(.drawer__content, .dialog__content) > .overlay__panel > .overlay__header + .overlay__footer {
    margin-top: 40px;
  }
}
.notes {
  padding-top: var(--gap-5);
  border-top: 1px solid var(--border-line-muted);
}
.notes__title {
  margin: 0;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
  line-height: 1.6;
}
.notes__group {
  margin-top: var(--gap-3);
}
.notes__group-title {
  margin: 0;
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--label-soft);
  line-height: 1.6;
}
.notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notes__list li {
  position: relative;
  padding-left: var(--gap-3);
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-regular);
  color: var(--label-soft);
  line-height: 1.6;
}
.notes__list li + li {
  margin-top: var(--gap-1);
}
.notes__list li::before {
  content: "·";
  position: absolute;
  left: var(--gap-1);
}
.notes__list a {
  color: inherit;
  text-decoration: underline;
  border-radius: var(--rounded-sm);
}
.notes__list a:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.notes__list a:active {
  background: transparent;
}
.notes__title + .notes__list {
  margin-top: var(--gap-3);
}
.notes__group-title + .notes__list {
  margin-top: var(--gap-1);
}
.notes__item--strong {
  font-weight: var(--font-weight-medium);
  color: var(--label-muted);
}

.notes--end {
  padding-bottom: var(--p-18);
}
@media (min-width: 768px) {
  .notes--end {
    padding-bottom: var(--p-36);
  }
}

.notes--end-lg {
  padding-bottom: var(--p-36);
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}
.accordion {
  display: block;
  width: 100%;
}

.accordion__trigger {
  list-style: none;
}
.accordion__trigger::-webkit-details-marker {
  display: none;
}
.accordion__trigger::marker {
  content: "";
}
.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 16px 0;
  font-size: var(--font-size-component-large);
  font-weight: 600;
  line-height: 1.6;
  color: var(--label-normal);
  text-align: left;
  cursor: pointer;
  user-select: none;
  outline: none;
  /* 2026-07-24 수정 #0724-4 : accordion 구분선 소유를 accordion__item→trigger 로 이동, hover 틴트 radius 상속 */
  border-bottom: 1px solid var(--border-line-normal);
  position: relative;
  border-radius: inherit;
}
.accordion__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.accordion__trigger:hover::before {
  opacity: 0.0375;
}
.accordion__trigger:active::before, .accordion__trigger[aria-expanded=true]::before {
  opacity: 0.09;
}
.accordion__trigger:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
@media (min-width: 768px) {
  .accordion__trigger {
    padding: 20px 0;
  }
}

/* 2026-07-16 수정 #0716-34 : accordion__trigger-icon chevron 을 스프라이트 아이콘(chevron-down-thick)으로 교체 */
.accordion__trigger-icon {
  margin-left: auto;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--label-muted);
  transition: transform 0.25s ease;
}
@media (min-width: 768px) {
  .accordion__trigger-icon {
    width: 20px;
    height: 20px;
  }
}

.accordion__item[open] .accordion__trigger-icon {
  transform: rotate(180deg);
}

.accordion__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.25s ease, content-visibility 0.25s ease allow-discrete;
}

.accordion__item[open]::details-content {
  block-size: auto;
}

.accordion__content {
  padding: 4px 0 20px;
  font-size: var(--font-size-component-large);
  font-weight: 400;
  line-height: 1.6;
  color: var(--label-muted);
}
@media (min-width: 768px) {
  .accordion__content {
    padding-bottom: 24px;
  }
}

.accordion__item[data-disabled=true] > .accordion__trigger {
  color: var(--label-soft);
  cursor: not-allowed;
}
.accordion__item[data-disabled=true] > .accordion__trigger:hover::before, .accordion__item[data-disabled=true] > .accordion__trigger:active::before {
  opacity: 0;
}

.accordion__item[data-disabled=true] .accordion__trigger-icon {
  opacity: 0.5;
}

.accordion--separated {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accordion--separated .accordion__item {
  border: 1px solid var(--border-line-muted);
  border-radius: var(--rounded-2xl);
  background: var(--background-normal);
  overflow: clip;
}
.accordion--separated .accordion__trigger {
  padding: 16px 20px;
}
.accordion--separated .accordion__trigger:focus-visible {
  border-radius: var(--rounded-2xl);
}
@media (min-width: 768px) {
  .accordion--separated .accordion__trigger {
    padding: 20px 24px;
  }
}
.accordion--separated .accordion__content {
  padding: 4px 20px 20px;
}
@media (min-width: 768px) {
  .accordion--separated .accordion__content {
    padding: 4px 24px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__trigger-icon,
  .accordion__item::details-content {
    transition: none;
  }
}
.agreement {
  border: 0;
}
.agreement .checkbox {
  display: flex;
  flex: 1;
}
.agreement .checkbox__label {
  font-weight: var(--font-weight-semibold);
}
.agreement--single .checkbox__label {
  font-weight: var(--font-weight-medium);
}
.agreement__all {
  padding-block: var(--gap-4);
  border-bottom: var(--stroke-1) solid var(--border-line-normal);
}
.agreement .checkbox__input:user-invalid {
  border-color: var(--border-box-strong);
}
.agreement__items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.agreement__all + .agreement__items {
  margin-top: var(--gap-2);
}
.agreement__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-2);
  padding-block: var(--gap-3);
}
.agreement__required {
  margin-inline-end: var(--gap-1);
  font-style: normal;
  color: var(--state-error-text);
}
.agreement__detail {
  position: relative;
  flex-shrink: 0;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-1);
  margin-top: -1px;
  border: 0;
  background: none;
  border-radius: var(--rounded-md);
  color: var(--label-muted);
  text-decoration: none;
  cursor: pointer;
}
.agreement__detail:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.agreement__detail:hover, .agreement__detail:active {
  color: var(--label-normal);
}
.agreement__detail::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.agreement-intro {
  margin-top: var(--p-5);
}
.agreement-intro__headline {
  color: var(--label-normal);
  font-size: var(--font-size-component-3xlarge);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
.agreement-intro__desc {
  color: var(--label-soft);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}
.agreement-intro__headline + .agreement-intro__desc {
  margin-top: var(--p-2);
}

.agreement-intro + .agreement {
  margin-top: var(--gap-8);
}

.agreement-terms {
  margin-top: var(--p-5);
  color: var(--label-normal);
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

.agreement-detail__lead {
  color: var(--label-normal);
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}
.agreement-detail__card {
  padding: var(--gap-4) var(--p-5);
  background: var(--fill-strong);
  border-radius: var(--rounded-2xl);
}
.agreement-detail__card-title {
  color: var(--label-normal);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}
.agreement-detail__card-desc {
  color: var(--label-soft);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}
.agreement-detail__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.agreement-detail__notes li {
  position: relative;
  padding-left: var(--gap-3);
  color: var(--label-soft);
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}
.agreement-detail__notes li + li {
  margin-top: var(--gap-1);
}
.agreement-detail__notes li::before {
  content: "·";
  position: absolute;
  left: var(--gap-1);
}
.agreement-detail__lead + .agreement-detail__card {
  margin-top: var(--gap-4);
}
.agreement-detail__card-title + .agreement-detail__card-desc {
  margin-top: var(--gap-1);
}
.agreement-detail__card-desc + .agreement-detail__notes, .agreement-detail__card + .agreement-detail__notes {
  margin-top: var(--gap-2);
}

.agreement-modal__title {
  margin-top: var(--p-5);
  font-size: var(--font-size-component-3xlarge);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--label-normal);
}

.agreement-modal__title + * {
  margin-top: var(--gap-4);
  font-weight: var(--font-weight-regular);
}

.agreement-modal__title ~ * th {
  text-align: left;
}

.badge {
  display: flex;
  align-items: center;
  gap: var(--gap-0-5);
  padding: 1px var(--p-1-5);
  border-radius: var(--rounded-md);
  font-size: var(--font-size-component-2xsmall);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.badge__icon {
  flex-shrink: 0;
}
.badge {
  /* 2026-07-16 수정 #0716-36 : badge[data-color=blue] 배경 blue-weak→blue-subtle */
  /* 2026-07-24 수정 #0724-1 시작 : badge 색상 개정 — skyblue 폐지→red 신설, green 은 명도 대비 보정 고정값 */
}
.badge[data-color=blue] {
  background: var(--brand-blue-subtle);
  color: var(--brand-blue-normal);
}
.badge[data-color=green] {
  background: #e1f0e7;
  color: #176437;
}
.badge[data-color=red] {
  background: var(--brand-red-weak);
  color: var(--brand-red-normal);
}
.badge[data-inverse][data-color=blue] {
  background: var(--brand-blue-normal);
  color: var(--label-inverse-normal);
}
.badge[data-inverse][data-color=green] {
  background: #037834;
  color: var(--label-inverse-normal);
}
.badge[data-inverse][data-color=red] {
  background: var(--brand-red-normal);
  color: var(--label-inverse-normal);
}
.badge {
  /* #0724-1 끝 */
}
.badge[data-color=gray] {
  background: var(--fill-alpha-black-soft);
  color: var(--label-muted);
}
.badge[data-inverse][data-color=gray] {
  background: var(--fill-alpha-black-strong);
  color: var(--label-inverse-normal);
}
.badge[data-color=black] {
  background: var(--fill-normal);
  color: var(--label-muted);
}

@media (min-width: 768px) {
  .badge {
    /* 2026-07-16 수정 #0716-37 : badge 데스크탑 폰트 caption-medium→component-xsmall */
    font-size: var(--font-size-component-xsmall);
  }
}
.btn {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid transparent;
  background: transparent;
  background-clip: padding-box;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  outline: none;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.btn svg {
  pointer-events: none;
  flex-shrink: 0;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.btn:hover::before {
  opacity: 0.075;
}
.btn:active::before, .btn[aria-expanded=true]::before {
  opacity: 0.18;
}
.btn:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.btn {
  height: 44px;
  gap: var(--gap-1);
  padding: 0 var(--p-5);
  border-radius: var(--rounded-lg);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
}
.btn svg:not([class*=size-]) {
  width: 16px;
  height: 16px;
}
.btn {
  background: var(--brand-blue-normal);
  color: var(--label-inverse-normal);
}
.btn[data-variant=secondary]:hover::before {
  opacity: 0.0375;
}
.btn[data-variant=secondary]:active::before, .btn[data-variant=secondary][aria-expanded=true]::before {
  opacity: 0.09;
}
.btn[data-variant=secondary] {
  background: var(--fill-strong);
  color: var(--brand-blue-normal);
}
.btn[data-variant=tertiary]:hover::before {
  opacity: 0.0375;
}
.btn[data-variant=tertiary]:active::before, .btn[data-variant=tertiary][aria-expanded=true]::before {
  opacity: 0.09;
}
.btn[data-variant=tertiary] {
  background: var(--fill-normal);
  color: var(--label-muted);
  border-color: var(--border-box-normal);
}
.btn[data-mo-size=large] {
  height: 52px;
  gap: var(--gap-1);
  padding: 0 var(--p-6);
  border-radius: var(--rounded-xl);
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
}
.btn[data-mo-size=large] svg:not([class*=size-]) {
  width: 20px;
  height: 20px;
}
.btn[data-mo-size=small] {
  height: 36px;
  gap: var(--gap-0-5);
  padding: 0 var(--p-3);
  border-radius: var(--rounded-lg);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
}
.btn[data-mo-size=small] svg:not([class*=size-]) {
  width: 12px;
  height: 12px;
}
@media (min-width: 768px) {
  .btn[data-pc-size=small] {
    height: 36px;
    gap: var(--gap-0-5);
    padding: 0 var(--p-3);
    border-radius: var(--rounded-lg);
    font-size: var(--font-size-component-small);
    font-weight: var(--font-weight-medium);
  }
  .btn[data-pc-size=small] svg:not([class*=size-]) {
    width: 12px;
    height: 12px;
  }
  .btn[data-pc-size=medium] {
    height: 44px;
    gap: var(--gap-1);
    padding: 0 var(--p-5);
    border-radius: var(--rounded-lg);
    font-size: var(--font-size-component-medium);
    font-weight: var(--font-weight-medium);
  }
  .btn[data-pc-size=medium] svg:not([class*=size-]) {
    width: 16px;
    height: 16px;
  }
  .btn[data-pc-size=large] {
    height: 52px;
    gap: var(--gap-1);
    padding: 0 var(--p-6);
    border-radius: var(--rounded-xl);
    font-size: var(--font-size-component-large);
    font-weight: var(--font-weight-semibold);
  }
  .btn[data-pc-size=large] svg:not([class*=size-]) {
    width: 20px;
    height: 20px;
  }
}
.btn[data-icon-only] {
  aspect-ratio: 1;
  padding: 0;
}
.btn:disabled, .btn[aria-disabled=true] {
  pointer-events: none;
  background: var(--fill-disabled);
  color: var(--label-disabled);
  border-color: transparent;
}

.btn-text {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid transparent;
  background: transparent;
  background-clip: padding-box;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  outline: none;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.btn-text svg {
  pointer-events: none;
  flex-shrink: 0;
}
.btn-text::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.btn-text:hover::before {
  opacity: 0.0375;
}
.btn-text:active::before, .btn-text[aria-expanded=true]::before {
  opacity: 0.09;
}
.btn-text:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.btn-text {
  gap: var(--gap-1);
  border-radius: var(--rounded-lg);
  color: var(--label-muted);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
}
.btn-text svg:not([class*=size-]) {
  width: 12px;
  height: 12px;
}
.btn-text[data-accent] {
  color: var(--brand-blue-normal);
}
.btn-text[data-mo-size=large] {
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
}
.btn-text[data-mo-size=large] svg:not([class*=size-]) {
  width: 16px;
  height: 16px;
}
@media (min-width: 768px) {
  .btn-text[data-pc-size=medium] {
    font-size: var(--font-size-component-medium);
    font-weight: var(--font-weight-medium);
  }
  .btn-text[data-pc-size=medium] svg:not([class*=size-]) {
    width: 12px;
    height: 12px;
  }
  .btn-text[data-pc-size=large] {
    font-size: var(--font-size-component-large);
    font-weight: var(--font-weight-semibold);
  }
  .btn-text[data-pc-size=large] svg:not([class*=size-]) {
    width: 16px;
    height: 16px;
  }
}
.btn-text:disabled, .btn-text[aria-disabled=true] {
  pointer-events: none;
  color: var(--label-disabled);
}

.btn-circle-icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid transparent;
  background: transparent;
  background-clip: padding-box;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  outline: none;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.btn-circle-icon svg {
  pointer-events: none;
  flex-shrink: 0;
}
.btn-circle-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.btn-circle-icon:hover::before {
  opacity: 0.0375;
}
.btn-circle-icon:active::before, .btn-circle-icon[aria-expanded=true]::before {
  opacity: 0.09;
}
.btn-circle-icon:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.btn-circle-icon {
  padding: 0;
  border-radius: var(--rounded-full);
  background: var(--background-elevated-normal);
  color: var(--label-normal);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 40px;
  height: 40px;
}
.btn-circle-icon svg:not([class*=size-]) {
  width: 20px;
  height: 20px;
}
.btn-circle-icon[data-accent]:hover::before {
  opacity: 0.075;
}
.btn-circle-icon[data-accent]:active::before, .btn-circle-icon[data-accent][aria-expanded=true]::before {
  opacity: 0.18;
}
.btn-circle-icon[data-accent] {
  background: var(--brand-blue-normal);
  color: var(--label-inverse-normal);
  box-shadow: none;
}
.btn-circle-icon[data-mo-size=small] {
  width: 32px;
  height: 32px;
}
.btn-circle-icon[data-mo-size=small] svg:not([class*=size-]) {
  width: 16px;
  height: 16px;
}
@media (min-width: 768px) {
  .btn-circle-icon[data-pc-size=large] {
    width: 40px;
    height: 40px;
  }
  .btn-circle-icon[data-pc-size=large] svg:not([class*=size-]) {
    width: 20px;
    height: 20px;
  }
  .btn-circle-icon[data-pc-size=small] {
    width: 32px;
    height: 32px;
  }
  .btn-circle-icon[data-pc-size=small] svg:not([class*=size-]) {
    width: 16px;
    height: 16px;
  }
}
.btn-circle-icon:disabled, .btn-circle-icon[aria-disabled=true] {
  pointer-events: none;
  background: var(--fill-disabled);
  color: var(--label-disabled);
  box-shadow: none;
}

.button-action {
  display: flex;
  flex-direction: column;
}

.button-action__gradient {
  position: relative;
  height: 20px;
}
.button-action__gradient::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to top, var(--background-elevated-normal), transparent);
  pointer-events: none;
}

.button-action__content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--background-elevated-normal);
}

.button-action__caption {
  flex: 0 0 100%;
  margin: 0 0 2px;
  text-align: center;
  font-size: 13px;
  color: var(--label-soft);
}

.button-action__summary {
  padding: 8px 20px 12px;
  background: var(--background-elevated-normal);
}

.button-action__summary-row {
  position: relative;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

button.button-action__summary-row {
  cursor: pointer;
}
button.button-action__summary-row:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
button.button-action__summary-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
button.button-action__summary-row:active::before {
  opacity: 0.09;
}
button.button-action__summary-row[aria-expanded=false] .icon {
  transform: rotate(180deg);
}

.button-action__summary-content {
  flex: 1 1 auto;
  min-width: 0;
}

.button-action__summary-title {
  display: block;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
}

.button-action__summary-sub {
  display: block;
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-regular);
  color: var(--label-soft);
}

.button-action__summary-value {
  flex-shrink: 0;
  font-size: var(--font-size-component-xlarge);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--brand-blue-normal);
  text-align: right;
}

.button-action__summary-unit {
  margin-inline-start: var(--gap-0-5);
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  color: var(--label-normal);
}

.button-action__summary-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-1-5);
  border-radius: var(--rounded-full);
  background: var(--fill-strong);
  color: var(--label-normal);
}
.button-action__summary-toggle .icon {
  transition: transform var(--duration-base) var(--ease-in-out);
}

.button-action__summary-detail {
  padding: 8px 20px 4px;
  background: var(--background-elevated-normal);
}

.button-action__summary-divider {
  margin-top: var(--gap-2);
}

.button-action[data-bg=gray] .button-action__content,
.button-action[data-bg=gray] .button-action__summary,
.button-action[data-bg=gray] .button-action__summary-detail {
  background: var(--background-elevated-strong);
}
.button-action[data-bg=gray] .button-action__gradient::before {
  background: linear-gradient(to top, var(--background-elevated-strong), transparent);
}

:where(.drawer__content, .dialog__content) .button-action__content {
  padding-bottom: 20px;
}

.dialog[data-variant=fullscreen] .dialog__content .button-action__content {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.button-action:not([data-type=neutral]):not([data-type=compact]) .button-action__content > :is(.btn, .tooltip-accent) {
  flex: 1 1 100%;
}

.button-action[data-type=neutral] .button-action__content > :is(.btn, .tooltip-accent) {
  flex: 1 1 50px;
}

/* 2026-07-24 수정 #0724-16 : 필터 푸터 초기화 버튼 hug 를 button-action 공통(tertiaryHug)으로 이관 */
.button-action[data-tertiary-hug] .button-action__content > .btn[data-variant=tertiary] {
  flex: 0 0 auto;
}

.button-action__content > .tooltip-accent {
  display: flex;
}
.button-action__content > .tooltip-accent > .btn {
  flex: 1;
}

.button-action[data-type=compact] .button-action__content {
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .button-action__gradient {
    height: 40px;
  }
  .button-action__gradient::before {
    height: 60px;
  }
  .button-action__content {
    padding: 0 40px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .button-action__summary,
  .button-action__summary-detail {
    padding-inline: 40px;
  }
  :where(.drawer__content, .dialog__content) .button-action__content {
    padding-bottom: 40px;
  }
}
.banner-marketing {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  text-decoration: none;
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  /* 2026-07-24 수정 #0724-9 : banner-marketing 스타일을 개별 시트(banner-marketing.css)에서 app.css 로 이동 */
}
.banner-marketing:is(a)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.banner-marketing:is(a):hover::before {
  opacity: 0.0375;
}
.banner-marketing:is(a):active::before, .banner-marketing:is(a)[aria-expanded=true]::before {
  opacity: 0.09;
}
.banner-marketing:is(a):focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
@media (min-width: 768px) {
  .banner-marketing {
    min-height: 80px;
  }
}
.banner-marketing--card, .carousel__slide > .banner-marketing {
  border-radius: var(--rounded-2xl);
}
.carousel__slide > .banner-marketing:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.banner-marketing__image {
  display: block;
  width: 280px;
  height: 72px;
  max-width: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .banner-marketing__image {
    width: 464px;
    height: 80px;
  }
}

.banner-marketing-strip {
  display: flex;
  gap: var(--gap-2);
  margin-inline: calc(-1 * var(--strip-inset, 0px));
  padding-inline: var(--strip-inset, 0px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--strip-inset, 0px);
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    .banner-marketing-strip {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  .banner-marketing-strip::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  .banner-marketing-strip::-webkit-scrollbar-track {
    background: transparent;
  }
  .banner-marketing-strip::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  .banner-marketing-strip:hover {
    outline: 1px solid transparent;
  }
  .banner-marketing-strip:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}
@media (min-width: 768px) {
  .banner-marketing-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-4);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.banner-marketing-strip__item {
  flex: none;
  width: 100%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .banner-marketing-strip__item {
    width: auto;
  }
}
.banner-marketing-strip__item .banner-marketing:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}

.bank-select {
  display: block;
  width: 100%;
}
.bank-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  width: 100%;
  height: 52px;
  padding: 0 var(--p-3);
  border: 1px solid var(--border-box-normal);
  border-radius: var(--rounded-xl);
  background: var(--fill-normal);
  color: var(--label-normal);
  font-family: inherit;
  font-size: var(--font-size-component-large);
  text-align: left;
  cursor: pointer;
  outline: none;
}
.bank-select__trigger:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.bank-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-select__value[data-placeholder=true] {
  color: var(--label-soft);
}
.bank-select__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--label-soft);
}
.bank-select__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2);
  margin: var(--gap-3) 0 0;
  padding: 0;
  list-style: none;
}
.bank-select__bank {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-1);
  width: 100%;
  padding: var(--p-3);
  border: none;
  border-radius: var(--rounded-xl);
  background: var(--fill-strong);
  color: var(--label-normal);
  font-family: inherit;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}
.bank-select__bank::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.bank-select__bank:hover::before {
  opacity: 0.0375;
}
.bank-select__bank:active::before, .bank-select__bank[aria-expanded=true]::before {
  opacity: 0.09;
}
.bank-select__bank:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.card-scroll {
  display: flex;
  gap: var(--gap-4);
  width: 100%;
  min-width: 0;
  position: relative;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    .card-scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  .card-scroll::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  .card-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 3px 0;
  }
  .card-scroll::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  .card-scroll:hover {
    outline: 1px solid transparent;
  }
  .card-scroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}
.card-scroll:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.card-scroll > .card-plan {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .card-scroll > .card-plan {
    flex: 0 0 304px;
  }
}
.card-scroll > .card-product,
.card-scroll > .card-list-vertical {
  flex: 0 0 265px;
  scroll-snap-align: start;
}
.card-scroll > .card-product[data-type=settop-box] {
  flex-basis: 224px;
}
@media (min-width: 768px) {
  .card-scroll > .card-product {
    flex-basis: 224px;
  }
  .card-scroll > .card-product[data-type=settop-box] {
    flex-basis: 265px;
  }
  .card-scroll > .card-list-vertical {
    flex-basis: 304px;
  }
}

.card-menu {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--p-4);
  border-radius: var(--rounded-xl);
  background: var(--background-normal);
}
.card-menu[data-bg=gray] {
  background: var(--fill-strong);
}
@media (min-width: 768px) {
  .card-menu {
    gap: var(--gap-3);
    padding: var(--p-6);
    border-radius: var(--rounded-2xl);
  }
}

a.card-menu {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.card-menu:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.card-menu__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.card-menu__icon > svg,
.card-menu__icon > img {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .card-menu__icon {
    width: 32px;
    height: 32px;
  }
}

.card-menu__label {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .card-menu__label {
    font-size: var(--font-size-component-large);
  }
}

.card-list-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  border-radius: var(--rounded-2xl);
  min-width: 0;
}

a.card-list-vertical {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.card-list-vertical:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.card-list-vertical__thumb {
  overflow: hidden;
  border-radius: var(--rounded-2xl);
  aspect-ratio: 3/2;
}
.card-list-vertical__thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card-list-vertical[data-ratio="16:9"] .card-list-vertical__thumb {
  aspect-ratio: 16/9;
}

.card-list-vertical__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-0-5);
  padding: 0 var(--p-1);
}

.card-list-vertical__title {
  display: block;
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--label-normal);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-list-vertical__caption {
  display: block;
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--label-soft);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--rounded-2xl);
  background: var(--background-normal);
}

a.card-product {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.card-product:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.card-product[data-bordered] {
  border: var(--stroke-1) solid var(--border-box-normal);
}

.card-product__thumb {
  position: relative;
  overflow: hidden;
}
.card-product__thumb > img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card-product[data-type=settop-box] .card-product__thumb > img {
  aspect-ratio: 3/2;
}

.card-product__badge {
  position: absolute;
  top: var(--gap-4);
  left: var(--gap-4);
}

@media (hover: hover) {
  .card-list-vertical__thumb:hover > img,
  .card-product__thumb:hover > img {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-list-vertical__thumb:hover > img,
  .card-product__thumb:hover > img {
    transform: none;
  }
  .card-list-vertical__thumb > img,
  .card-product__thumb > img {
    transition: none;
  }
}
.card-product__section {
  display: flex;
  flex-direction: column;
  padding: 0 var(--p-5) var(--p-5);
}
@media (min-width: 768px) {
  .card-product__section {
    padding: 0 var(--p-6) var(--p-6);
  }
}

.card-product__title {
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-normal);
  min-height: 3.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .card-product__title {
    font-size: var(--font-size-component-large);
  }
}

.card-product__sub {
  margin-top: var(--gap-1);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-soft);
  min-height: 4.8em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .card-product__sub {
    font-size: var(--font-size-component-medium);
    font-weight: var(--font-weight-regular);
  }
}

.card-product__price {
  display: flex;
  flex-direction: column;
  margin-top: var(--gap-2);
}

.card-product[data-type=settop-box] .card-product__price {
  margin-top: var(--gap-3);
}

.card-product__caption {
  display: block;
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--label-soft);
}
@media (min-width: 768px) {
  .card-product__caption {
    font-size: var(--font-size-component-small);
    font-weight: var(--font-weight-medium);
  }
}

.card-product__value {
  display: flex;
  align-items: baseline;
  gap: var(--gap-0-5);
}

.card-product__amount {
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--label-normal);
}
@media (min-width: 768px) {
  .card-product__amount {
    font-size: var(--font-size-component-xlarge);
  }
}

.card-product__unit {
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--label-normal);
}
@media (min-width: 768px) {
  .card-product__unit {
    font-size: var(--font-size-component-small);
  }
}

.card-product__value-text {
  display: block;
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--label-normal);
}
@media (min-width: 768px) {
  .card-product__value-text {
    font-size: var(--font-size-component-xlarge);
  }
}

.card-plan {
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 320px;
  border-radius: var(--rounded-2xl);
  background: var(--background-normal);
}

a.card-plan__title {
  text-decoration: none;
  color: inherit;
}
a.card-plan__title::after {
  content: "";
  position: absolute;
  inset: 0;
}
a.card-plan__title:focus-visible {
  outline: none;
}
a.card-plan__title:focus-visible::after {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: calc(-1 * var(--stroke-3));
  border-radius: var(--rounded-2xl);
}

.card-plan:has(a.card-plan__title) .card-plan__compare,
.card-plan:has(a.card-plan__title) .tooltip,
.card-plan:has(a.card-plan__title) .card-plan__btn {
  z-index: 1;
}
.card-plan:has(a.card-plan__title) .tooltip {
  position: relative;
}

.card-plan__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
  padding: var(--p-4) var(--p-4) var(--p-6) var(--p-5);
}

.card-plan[data-variant=half] .card-plan__header {
  height: 157px;
}

.card-plan[data-variant=full] .card-plan__header {
  height: 256px;
}

.card-plan[data-compact] .card-plan__header {
  height: auto;
  padding: var(--p-5) var(--p-5) 0;
}
.card-plan[data-compact] .card-plan__titles {
  gap: var(--gap-0-5);
}
.card-plan[data-compact] .card-plan__price-row {
  align-items: flex-end;
}
.card-plan[data-compact] .card-plan__title {
  max-width: none;
}
.card-plan[data-compact] .card-plan__body {
  padding-top: var(--p-4);
}

.card-plan__container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1-5);
}

.card-plan__heading {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.card-plan__badges {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-1);
  list-style: none;
  padding-block: 6.5px;
}

.card-plan__compare {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-0-5);
  padding: var(--gap-1-5) var(--gap-3);
  border: var(--stroke-1) solid var(--border-line-normal);
  border-radius: var(--rounded-full);
  background: var(--background-normal);
  color: var(--label-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.card-plan__compare-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.card-plan__compare-label {
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: inherit;
}

.card-plan__compare-icon {
  flex-shrink: 0;
  color: inherit;
}

.card-plan__compare:has(.card-plan__compare-input:checked) {
  border-color: var(--label-normal);
  color: var(--label-normal);
}
.card-plan__compare:has(.card-plan__compare-input:checked) .card-plan__compare-label {
  font-weight: var(--font-weight-semibold);
}

.card-plan__compare:has(.card-plan__compare-input:focus-visible) {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.card-plan__compare:has(.card-plan__compare-input:disabled) {
  background: var(--fill-disabled);
  border-color: transparent;
  color: var(--label-disabled);
  cursor: not-allowed;
}

.card-plan__titles {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
}

.card-plan__title {
  display: -webkit-box;
  max-width: 215px;
  word-break: keep-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--label-normal);
}

.card-plan__product {
  display: block;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--label-muted);
}

.card-plan__points {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-plan__point {
  display: flex;
  align-items: center;
  gap: var(--gap-1-5);
}

.card-plan__point-icon {
  flex: 0 0 auto;
}

.card-plan__point-label {
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-normal);
}

.card-plan__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  padding: 0 var(--p-5) var(--p-5);
}

.card-plan__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-plan__price-title {
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--label-normal);
}

.card-plan__price-row {
  display: flex;
  align-items: center;
  gap: var(--gap-0-5);
}

.card-plan__price-amount {
  font-size: var(--font-size-component-2xlarge);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--card-plan-price-color, var(--label-normal));
}

.card-plan[data-price-accent] {
  --card-plan-price-color: var(--brand-blue-normal);
}

.card-plan__price-unit {
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--label-normal);
}

.card-plan__price-note {
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--label-soft);
}

.card-plan__cost {
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-soft);
  text-decoration: line-through;
}

.card-plan__discount {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--rounded-lg);
  background: var(--color-alpha-black-5);
}

.card-plan__discount-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.card-plan__discount-label {
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-muted);
}

.card-plan__footer {
  display: flex;
  border-top: var(--stroke-1) solid var(--border-line-normal);
}

.card-plan__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 0;
  border: 0;
  background: transparent;
  color: var(--label-normal);
  font: inherit;
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.card-plan__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.card-plan__btn:hover::before {
  opacity: 0.0375;
}
.card-plan__btn:active::before, .card-plan__btn[aria-expanded=true]::before {
  opacity: 0.09;
}
.card-plan__btn[data-accent] {
  color: var(--brand-blue-normal);
}
.card-plan__btn:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.card-plan__btn + .card-plan__btn {
  border-left: var(--stroke-1) solid var(--border-line-normal);
}

@media (min-width: 768px) {
  .card-plan .badge,
  .card-product .badge {
    font-size: var(--font-size-component-2xsmall);
  }
}
.card-issuer-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  border-radius: var(--rounded-sm);
}
.card-issuer-badge[data-issuer=shinhan] {
  background: #0046fe;
}
.card-issuer-badge[data-issuer=samsung] {
  background: #003cdc;
}
.card-issuer-badge[data-issuer=hyundai] {
  background: #221e1f;
}
.card-issuer-badge[data-issuer=kb] {
  background: #60584c;
}
.card-issuer-badge[data-issuer=lotte] {
  background: #e60012;
}
.card-issuer-badge[data-issuer=hana] {
  background: #008077;
}
.card-issuer-badge[data-issuer=uri] {
  background: #007bc7;
}
.card-issuer-badge[data-issuer=bc] {
  background: #e83e44;
}
.card-issuer-badge[data-issuer=nonghyup] {
  background: #2559a5;
}
.card-issuer-badge[data-issuer=ibk] {
  background: #0056a2;
}
.card-issuer-badge[data-issuer=suhyup] {
  background: #0a87d8;
}
.card-issuer-badge[data-issuer=sc] {
  background: #0473ea;
}
.card-issuer-badge[data-issuer=citi] {
  background: #26247b;
}
.card-issuer-badge[data-issuer=im] {
  background: #00c7a9;
}
.card-issuer-badge[data-issuer=bnk] {
  background: #cc2c30;
}
.card-issuer-badge[data-issuer=jeonbuk] {
  background: #1d388b;
}
.card-issuer-badge[data-issuer=samsung] > .bank-logo, .card-issuer-badge[data-issuer=hyundai] > .bank-logo {
  width: 26px;
  height: 26px;
}
.card-issuer-badge[data-issuer=bnk] > .bank-logo {
  width: 22px;
  height: 22px;
}
.card-issuer-badge[data-issuer=none] {
  background: var(--fill-alpha-black-normal);
  color: var(--fill-alpha-white-muted);
}

.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gap-1-5);
  cursor: pointer;
  user-select: none;
}
.checkbox__input {
  -webkit-appearance: none;
  appearance: none;
  margin: 3px 0 0;
  border: var(--stroke-1) solid var(--border-box-strong);
  background-color: var(--fill-normal);
  background-position: center;
  background-repeat: no-repeat;
  cursor: inherit;
  flex-shrink: 0;
  transition: background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
}
.checkbox__input:checked, .checkbox__input:indeterminate, .checkbox__input[data-indeterminate=true]:not(:checked) {
  border-color: transparent;
  background-color: var(--fill-hyper);
}
.checkbox__input:checked {
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.77734 10.2227L4.22266 11.7774L10 17.5557L19.7773 7.77736L17.3251 7.12027L10 14.4453L5.77734 10.2227Z' fill='white'/%3E%3C/svg%3E");
}
.checkbox__input:indeterminate, .checkbox__input[data-indeterminate=true]:not(:checked) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' fill='none'%3E%3Cline x1='1' y1='1' x2='9' y2='1' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not([data-indeterminate=true]) {
  border-color: var(--border-box-heavy);
}
.checkbox__input:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.checkbox__input:disabled {
  cursor: not-allowed;
}
.checkbox__input:disabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) {
  background-color: var(--fill-alpha-black-soft);
  border-color: var(--border-box-normal);
}
.checkbox__input:disabled:checked, .checkbox__input:disabled:indeterminate, .checkbox__input:disabled[data-indeterminate=true] {
  background-color: var(--fill-alpha-black-muted);
}
.checkbox__input {
  /* 2026-07-24 수정 #0724-7 : checkbox invalid 빨강 표시를 aria-invalid 명시 시로 한정(:user-invalid 제거) */
}
.checkbox__input[aria-invalid=true] {
  border-color: var(--state-error-normal);
}
.checkbox:has(.checkbox__input:disabled) {
  cursor: not-allowed;
}
.checkbox:has(.checkbox__input:disabled) .checkbox__label {
  color: var(--label-disabled);
}
.checkbox__label {
  color: var(--label-normal);
  font-weight: var(--font-weight-medium);
}
.checkbox .checkbox__input {
  width: 16px;
  height: 16px;
  border-radius: var(--rounded-sm);
}
.checkbox .checkbox__input:indeterminate, .checkbox .checkbox__input[data-indeterminate=true]:not(:checked) {
  background-size: 8px 2px;
}
.checkbox .checkbox__label {
  font-size: var(--font-size-component-medium);
  line-height: 22px;
}
.checkbox[data-mo-size=medium] .checkbox__input {
  width: 20px;
  height: 20px;
  border-radius: var(--rounded-md);
}
.checkbox[data-mo-size=medium] .checkbox__input:indeterminate, .checkbox[data-mo-size=medium] .checkbox__input[data-indeterminate=true]:not(:checked) {
  background-size: 10px 2px;
}
.checkbox[data-mo-size=medium] .checkbox__label {
  font-size: var(--font-size-component-large);
  line-height: 26px;
}
@media (min-width: 768px) {
  .checkbox[data-pc-size=medium] .checkbox__input {
    width: 20px;
    height: 20px;
    border-radius: var(--rounded-md);
  }
  .checkbox[data-pc-size=medium] .checkbox__input:indeterminate, .checkbox[data-pc-size=medium] .checkbox__input[data-indeterminate=true]:not(:checked) {
    background-size: 10px 2px;
  }
  .checkbox[data-pc-size=medium] .checkbox__label {
    font-size: var(--font-size-component-large);
    line-height: 26px;
  }
  .checkbox[data-pc-size=small] .checkbox__input {
    width: 16px;
    height: 16px;
    border-radius: var(--rounded-sm);
  }
  .checkbox[data-pc-size=small] .checkbox__input:indeterminate, .checkbox[data-pc-size=small] .checkbox__input[data-indeterminate=true]:not(:checked) {
    background-size: 8px 2px;
  }
  .checkbox[data-pc-size=small] .checkbox__label {
    font-size: var(--font-size-component-medium);
    line-height: 22px;
  }
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 var(--p-3);
  font-size: var(--font-size-component-small);
  border: 1px solid var(--border-line-normal);
  border-radius: var(--rounded-full);
  background: var(--background-normal);
  color: var(--label-muted);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.chip[data-mo-size=large] {
  height: 38px;
  padding: 0 var(--p-4);
  font-size: var(--font-size-component-medium);
}
@media (min-width: 768px) {
  .chip[data-pc-size=medium] {
    height: 33px;
    padding: 0 var(--p-3);
    font-size: var(--font-size-component-small);
  }
  .chip[data-pc-size=large] {
    height: 38px;
    padding: 0 var(--p-4);
    font-size: var(--font-size-component-medium);
  }
}
.chip:has(.chip__input:checked) {
  border-color: var(--border-box-ultra);
  color: var(--label-normal);
  font-weight: 600;
}
.chip:hover {
  background: var(--fill-strong);
}
.chip:has(.chip__input:focus-visible), .chip:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.chip:has(.chip__input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

a.chip {
  text-decoration: none;
  color: var(--label-muted);
}

.chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip__text {
  display: inline-block;
}

.chip.chip--category {
  height: auto;
  padding: var(--gap-1-5) var(--p-3);
  border: 0;
  background: var(--fill-alpha-black-soft);
  color: var(--label-muted);
  font-size: var(--font-size-component-small);
}
.chip.chip--category::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.chip.chip--category:hover::before {
  opacity: 0.0375;
}
.chip.chip--category:active::before, .chip.chip--category[aria-expanded=true]::before {
  opacity: 0.09;
}
.chip.chip--category:has(.chip__input:checked) {
  background: var(--fill-hyper);
  color: var(--label-inverse-normal);
}
.chip.chip--category:has(.chip__input:checked):hover::before {
  opacity: 0.075;
}
.chip.chip--category:has(.chip__input:checked):active::before {
  opacity: 0.18;
}
@media (min-width: 768px) {
  .chip.chip--category {
    padding: var(--gap-1-5) var(--p-4);
    font-size: var(--font-size-component-medium);
  }
}

.contents {
  margin-inline: auto;
  max-width: 1024px;
  padding-inline: var(--p-5);
}
@media (min-width: 768px) {
  .contents {
    padding-inline: var(--p-10);
  }
}

[data-slot=datepicker]:not([data-enhanced]) > input {
  display: block;
  width: 100%;
  visibility: hidden;
  height: 52px;
}

[data-slot=datepicker]:not([data-enhanced])[data-mo-size=small] > input {
  height: 44px;
}

[data-slot=datepicker][data-variant=chip]:not([data-enhanced]) > input {
  width: auto;
  height: 33px;
}

@media (min-width: 768px) {
  [data-slot=datepicker]:not([data-enhanced])[data-pc-size=small] > input {
    height: 44px;
  }
  [data-slot=datepicker]:not([data-enhanced])[data-pc-size=medium] > input {
    height: 52px;
  }
}
[data-slot=datepicker][data-enhanced=true] > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.datepicker {
  position: relative;
  display: block;
  width: 100%;
}
.datepicker .datepicker__trigger {
  height: 52px;
}
.datepicker .datepicker__icon,
.datepicker .datepicker__status-icon {
  width: 24px;
  height: 24px;
}
.datepicker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  width: 100%;
  padding: 0 16px;
  border: 1px solid var(--border-box-normal);
  border-radius: var(--rounded-xl);
  background: var(--fill-normal);
  color: var(--label-normal);
  font-family: inherit;
  font-size: var(--font-size-component-large);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-base);
}
.datepicker__trigger[aria-expanded=true] {
  border-color: var(--border-box-heavy);
}
.datepicker__trigger:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.datepicker__trigger:disabled {
  background: var(--fill-disabled);
  color: var(--label-muted);
  cursor: not-allowed;
}
.datepicker[data-mo-size=small] .datepicker__trigger {
  height: 44px;
}
.datepicker[data-mo-size=small] .datepicker__icon,
.datepicker[data-mo-size=small] .datepicker__status-icon {
  width: 20px;
  height: 20px;
}
@media (min-width: 768px) {
  .datepicker[data-pc-size=small] .datepicker__trigger {
    height: 44px;
  }
  .datepicker[data-pc-size=small] .datepicker__icon,
  .datepicker[data-pc-size=small] .datepicker__status-icon {
    width: 20px;
    height: 20px;
  }
  .datepicker[data-pc-size=medium] .datepicker__trigger {
    height: 52px;
  }
  .datepicker[data-pc-size=medium] .datepicker__icon,
  .datepicker[data-pc-size=medium] .datepicker__status-icon {
    width: 24px;
    height: 24px;
  }
}
.datepicker__trigger[aria-invalid=true] {
  border-color: var(--brand-red-muted);
}
.datepicker__trigger[aria-invalid=true]:focus-visible {
  outline-color: var(--brand-red-soft);
}
.datepicker__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datepicker__value[data-placeholder=true] {
  color: var(--label-disabled);
}
.datepicker__icon {
  flex-shrink: 0;
  color: var(--label-muted);
}
.datepicker__status-icon {
  display: none;
  flex-shrink: 0;
  color: var(--state-error-normal);
}
.datepicker__trigger[aria-invalid=true] .datepicker__status-icon {
  display: inline-flex;
}
.datepicker__trigger[aria-expanded=true] .datepicker__status-icon {
  display: none;
}
.datepicker__trigger:disabled .datepicker__icon {
  color: var(--label-disabled);
}

.datepicker[data-variant=chip] {
  display: inline-block;
  width: auto;
}
.datepicker[data-variant=chip] .datepicker__trigger {
  position: relative;
  width: auto;
  height: 33px;
  padding: 0 var(--p-3);
  gap: var(--gap-1);
  border: 1px solid var(--border-box-normal);
  border-radius: var(--rounded-full);
  background: var(--fill-normal);
  color: var(--label-muted);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
}
.datepicker[data-variant=chip] .datepicker__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.datepicker[data-variant=chip] .datepicker__trigger:hover::before {
  opacity: 0.0375;
}
.datepicker[data-variant=chip] .datepicker__trigger:active::before, .datepicker[data-variant=chip] .datepicker__trigger[aria-expanded=true]::before {
  opacity: 0.09;
}
.datepicker[data-variant=chip] .datepicker__trigger[aria-expanded=true] {
  border-color: var(--border-box-ultra);
  color: var(--label-normal);
  font-weight: var(--font-weight-semibold);
}
.datepicker[data-variant=chip] .datepicker__trigger::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.datepicker[data-variant=chip] .datepicker__trigger:disabled {
  border-color: transparent;
  background: var(--fill-disabled);
  color: var(--label-disabled);
}
@media (min-width: 768px) {
  .datepicker[data-variant=chip] .datepicker__trigger {
    height: 38px;
    padding-inline: var(--p-4);
    font-size: var(--font-size-component-medium);
  }
}
.datepicker[data-variant=chip] .datepicker__icon,
.datepicker[data-variant=chip] .datepicker__status-icon {
  width: 16px;
  height: 16px;
}
.datepicker[data-variant=chip] .datepicker__icon {
  order: -1;
}
.datepicker[data-variant=chip] .datepicker__value {
  flex: 0 1 auto;
}

.datepicker__panel {
  display: none;
}
.datepicker__panel:focus {
  outline: none;
}

.datepicker__overlay .overlay__body-inner > .datepicker__panel {
  display: flex;
  flex-direction: column;
}

:is(.drawer__content, .dialog__content) > .overlay__panel.datepicker__overlay > .overlay__body {
  overflow-x: clip;
}

:is(.drawer__content, .dialog__content) > .overlay__panel.datepicker__overlay > .overlay__body > .overlay__body-inner {
  padding-inline: var(--p-3);
  padding-inline-end: calc(var(--p-3) - var(--scrollbar-size));
  padding-bottom: var(--p-10);
}
@media (min-width: 768px) {
  :is(.drawer__content, .dialog__content) > .overlay__panel.datepicker__overlay > .overlay__body > .overlay__body-inner {
    padding-inline: var(--p-6);
    padding-inline-end: calc(var(--p-6) - var(--scrollbar-size));
  }
}

.datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--p-3);
  padding-inline: var(--p-1);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .datepicker__header {
    padding: var(--p-3);
  }
}

.datepicker__nav {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .datepicker__nav {
    gap: var(--p-3);
  }
}

.datepicker__nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--rounded-lg);
  color: #000;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.datepicker__nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.datepicker__nav-btn:hover::before {
  opacity: 0.0375;
}
.datepicker__nav-btn:active::before, .datepicker__nav-btn[aria-expanded=true]::before {
  opacity: 0.09;
}
.datepicker__nav-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.datepicker__nav-btn:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  z-index: 1;
}
.datepicker__nav-btn:disabled {
  color: var(--label-disabled);
  cursor: not-allowed;
}
.datepicker__nav-btn:disabled:hover::before {
  opacity: 0;
}
.datepicker__nav-btn:disabled::after {
  content: none;
}
.datepicker__nav-btn svg {
  width: 16px;
  height: 16px;
}
@media (min-width: 768px) {
  .datepicker__nav-btn {
    width: 28px;
    height: 28px;
  }
  .datepicker__nav-btn svg {
    width: 20px;
    height: 20px;
  }
}

.datepicker__caption {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
}

.datepicker__caption-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border: none;
  border-radius: var(--rounded-lg);
  background: transparent;
  color: var(--label-normal);
  font-family: inherit;
  font-size: var(--font-size-component-xlarge);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  outline: none;
}
.datepicker__caption-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.datepicker__caption-btn:hover::before {
  opacity: 0.0375;
}
.datepicker__caption-btn:active::before, .datepicker__caption-btn[aria-expanded=true]::before {
  opacity: 0.09;
}
.datepicker__caption-btn:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  z-index: 1;
}
@media (min-width: 768px) {
  .datepicker__caption-btn {
    font-size: var(--font-size-component-3xlarge);
  }
}

.datepicker__caption-caret {
  width: 12px;
  height: 12px;
  color: var(--label-normal);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .datepicker__caption-caret {
    width: 16px;
    height: 16px;
  }
}

.datepicker__caption-btn:not([data-caret]) .datepicker__caption-caret {
  display: none;
}

.datepicker__body {
  margin-top: var(--gap-2);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .datepicker__body {
    margin-top: var(--gap-3);
  }
}

.datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.datepicker__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-soft);
}
@media (min-width: 768px) {
  .datepicker__weekday {
    height: 37px;
    font-size: var(--font-size-body-small);
  }
}

.datepicker__days {
  display: flex;
  flex-direction: column;
}

.datepicker__day-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.datepicker__day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: var(--rounded-lg);
  background: transparent;
  color: var(--label-muted);
  font-family: inherit;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-base);
}
.datepicker__day::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.datepicker__day:hover::before {
  opacity: 0.0375;
}
.datepicker__day:active::before, .datepicker__day[aria-expanded=true]::before {
  opacity: 0.09;
}
.datepicker__day[data-outside=true] {
  color: var(--fill-alpha-black-muted);
  pointer-events: none;
}
.datepicker__day[data-in-range=true]:not([data-selected=true]) {
  background: var(--brand-blue-weak);
  border-radius: 0;
}
.datepicker__day[data-today=true] {
  color: var(--label-normal);
  font-weight: var(--font-weight-semibold);
}
.datepicker__day[data-today=true]::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.datepicker__day[data-selected=true] {
  background: var(--brand-blue-normal);
  color: var(--label-inverse-normal);
  font-weight: var(--font-weight-semibold);
}
.datepicker__day[data-range-start=true] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.datepicker__day[data-range-end=true] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.datepicker__day[data-range-start=true][data-range-end=true] {
  border-radius: var(--rounded-lg);
}
.datepicker__day[data-disabled=true] {
  opacity: 0.2;
  cursor: not-allowed;
}
.datepicker__day[data-disabled=true]:hover::before {
  opacity: 0;
}
.datepicker__day:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  z-index: 1;
}
@media (min-width: 768px) {
  .datepicker__day {
    height: 58px;
    font-size: var(--font-size-component-large);
  }
}

.datepicker__grid12 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: var(--p-2);
}
@media (min-width: 768px) {
  .datepicker__grid12 {
    padding-inline: var(--p-4);
  }
}

.datepicker__grid12-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.datepicker__grid12[data-cols="4"] .datepicker__grid12-row {
  grid-template-columns: repeat(4, 1fr);
}

.datepicker__cell12 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: var(--rounded-lg);
  background: transparent;
  color: var(--label-muted);
  font-family: inherit;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-base);
}
.datepicker__cell12::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.datepicker__cell12:hover::before {
  opacity: 0.0375;
}
.datepicker__cell12:active::before, .datepicker__cell12[aria-expanded=true]::before {
  opacity: 0.09;
}
.datepicker__cell12[data-disabled=true] {
  opacity: 0.2;
  cursor: not-allowed;
}
.datepicker__cell12[data-disabled=true]:hover::before {
  opacity: 0;
}
.datepicker__cell12[data-today=true] {
  color: var(--label-normal);
  font-weight: var(--font-weight-semibold);
}
.datepicker__cell12[data-today=true]::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--label-normal);
}
.datepicker__cell12[data-selected=true] {
  background: var(--brand-blue-weak);
  color: var(--brand-blue-normal);
  font-weight: var(--font-weight-semibold);
}
.datepicker__cell12:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  z-index: 1;
}
@media (min-width: 768px) {
  .datepicker__cell12 {
    height: 58px;
    font-size: var(--font-size-component-large);
  }
}

@media (prefers-reduced-motion: reduce) {
  .datepicker__day,
  .datepicker__cell12,
  .datepicker__nav-btn {
    transition: none;
  }
}
.dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--label-normal);
  overflow: clip;
  display: none;
}
.dialog[data-open=true] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--duration-base) var(--ease-out);
}
[data-open=true] > .dialog__backdrop {
  background: var(--overlay-backdrop);
}
[data-exiting=true] > .dialog__backdrop {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-in);
}

.dialog[data-variant=centered] .dialog__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 85dvh;
  background: var(--background-normal);
  border-radius: var(--rounded-3xl);
  display: flex;
  flex-direction: column;
  overflow: visible;
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.dialog[data-variant=centered][data-open=true] > .dialog__content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.dialog[data-variant=centered][data-open=true] {
  padding-inline: 12px;
}

.dialog[data-variant=centered][data-size=large] .dialog__content {
  max-width: 640px;
}

.dialog[data-variant=fullscreen] .dialog__content {
  position: relative;
  z-index: 1;
  /* 2026-07-16 수정 #0716-39 : dialog 풀스크린 폭 100dvw→100%(데스크탑 스크롤바 겹침 방지) */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: var(--background-normal);
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-radius: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.dialog[data-variant=fullscreen][data-open=true] > .dialog__content {
  opacity: 1;
  transform: translateY(0);
}

.dialog[data-exiting=true] > .dialog__content {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-in);
}

.dialog[data-variant=fullscreen][data-exiting=true] > .dialog__content {
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-in);
}

.dialog[data-variant=fullscreen][data-open=true] > .dialog__backdrop {
  background: transparent;
}

.dialog[data-variant=fullscreen] .dialog__content > .overlay__handle {
  height: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
}
.dialog[data-variant=fullscreen] .dialog__content > .overlay__handle .overlay__handle-bar {
  display: none;
}
.dialog[data-variant=fullscreen] .dialog__content > .overlay__panel {
  position: relative;
}
.dialog[data-variant=fullscreen] .dialog__content > .overlay__panel > .overlay__header {
  height: 56px;
  padding-bottom: 0;
}
.dialog[data-variant=fullscreen] .dialog__content > .overlay__panel > .overlay__body > .overlay__body-inner {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
.dialog[data-variant=fullscreen] .dialog__content > .overlay__panel:has(> .overlay__footer) > .overlay__body > .overlay__body-inner {
  padding-bottom: 20px;
}
.dialog[data-variant=fullscreen] .dialog__content > .overlay__panel > .overlay__footer:not(:has(> .button-action)) {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

.dialog[data-variant=fullscreen] .modal__close {
  top: 12px;
  right: 8px;
}

@media (min-width: 768px) {
  .dialog[data-variant=fullscreen] .dialog__content > .overlay__panel {
    max-width: 560px;
    align-self: center;
  }
  .dialog[data-variant=fullscreen] .dialog__content > .overlay__panel > .overlay__header {
    height: 80px;
  }
  .dialog[data-variant=fullscreen] .dialog__content > .overlay__panel > .overlay__body > .overlay__body-inner, .dialog[data-variant=fullscreen] .dialog__content > .overlay__panel:has(> .overlay__footer) > .overlay__body > .overlay__body-inner {
    padding-bottom: 40px;
  }
  .dialog[data-variant=fullscreen] .modal__close {
    top: 22px;
    right: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dialog,
  .dialog__backdrop,
  .dialog__content {
    transition: none;
  }
  .dialog__content {
    transform: none;
    opacity: 1;
  }
  [data-open=true] > .dialog__content {
    transform: none;
  }
}
.divider {
  width: 100%;
  margin: 0;
  border: 0;
  flex-shrink: 0;
}

.divider--normal {
  height: 8px;
  background: var(--background-strong);
}

.divider--thin {
  height: 1px;
  background: var(--border-line-normal);
}

.drawer {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--label-normal);
  overflow: clip;
  --float-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: none;
}
.drawer[data-keyboard=true] {
  --float-bottom: 12px;
}
.drawer[data-open=true] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 12px var(--float-bottom);
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--duration-base) var(--ease-out);
}
[data-open=true] > .drawer__backdrop {
  background: var(--overlay-backdrop);
}
[data-exiting=true] > .drawer__backdrop {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-in);
}

.drawer__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  max-height: var(--drawer-max-height, 70dvh);
  background: var(--background-elevated-normal);
  border-radius: var(--rounded-3xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--duration-base) var(--ease-out);
}
.drawer[data-exiting=true] > .drawer__content {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-in);
}
.drawer__content[data-dragging=true] {
  transform: translateY(var(--drag-y, 0px));
  transition: none;
}
.drawer__content[data-dragging=true] > :not(.overlay__handle) {
  pointer-events: none;
}
.drawer__content[data-dragging=true] .btn:where(:hover, :active) {
  background: var(--brand-blue-normal);
}
.drawer__content[data-dragging=true] .btn[data-variant=secondary]:where(:hover, :active) {
  background: var(--fill-strong);
}
.drawer__content[data-dragging=true] .btn[data-variant=tertiary]:where(:hover, :active) {
  background: var(--fill-normal);
}
.drawer__content[data-dragging=true] .btn-circle-icon:where(:hover, :active) {
  background: var(--background-elevated-normal);
}
.drawer__content[data-dragging=true] .btn-circle-icon[data-accent]:where(:hover, :active) {
  background: var(--brand-blue-normal);
}
.drawer__content[data-dragging=true] .input:hover,
.drawer__content[data-dragging=true] .textarea:hover {
  border-color: var(--border-line-normal);
}

.drawer__content > :not(.overlay__handle):not(.overlay__panel) {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
}

:where(.drawer__content) :is(a, button):active {
  background: var(--background-strong);
}

.drawer__content a {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer__backdrop,
  .drawer__content {
    transition: none;
  }
}
/* 2026-07-24 수정 #0724-8 시작 : field 라벨·헬퍼 타이포 재동기 — 라벨 14·헬퍼/에러 12 토큰·간격 4/8·인셋 2 */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field:has(> .field__control) {
  gap: 6px;
}
.field {
  width: 100%;
  border: 0;
  min-width: 0;
}
.field > legend {
  display: contents;
}
.field__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding-inline: 2px;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-normal);
  line-height: 1.6;
}
.field__required {
  color: var(--state-error-text);
  font-weight: var(--font-weight-regular);
}
.field__heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-inline: 2px;
}
.field__heading .field__label {
  padding-inline: 0;
}
.field__label-aside {
  margin-inline-start: auto;
  flex-shrink: 0;
  color: var(--label-soft);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-align: end;
}
.field__label-aside :where(strong, b) {
  color: var(--label-muted);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-semibold);
}
.field__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__helper {
  margin: 0;
  padding-inline: 2px;
  font-size: var(--font-size-component-xsmall);
  line-height: 1.6;
  color: var(--label-soft);
  font-weight: 400;
}
.field__success {
  margin: 0;
  padding-inline: 2px;
  font-size: var(--font-size-component-xsmall);
  line-height: 1.45;
  color: var(--label-soft);
}
.field__success:empty {
  display: none;
}
.field__error {
  margin: 0;
  padding-inline: 2px;
  font-size: var(--font-size-component-xsmall);
  line-height: 1.45;
  color: var(--brand-red-normal);
  font-weight: 400;
}
.field__error:empty {
  display: none;
}
.field {
  /* #0724-8 끝 */
}
.field__line {
  display: flex;
  align-items: stretch;
}
.field__line[data-action] .field__box :where(.input) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.field__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: -1px;
  padding: 0 16px;
  border: 1px solid var(--border-box-normal);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--rounded-xl);
  border-end-end-radius: var(--rounded-xl);
  background: var(--fill-normal);
  background-clip: padding-box;
  color: var(--brand-blue-normal);
  font-family: inherit;
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.field__action:hover, .field__action:active {
  background: var(--background-strong);
}
.field__action:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  position: relative;
  z-index: 1;
}
.field__action:disabled, .field__action[aria-disabled=true] {
  color: var(--label-soft);
  background: var(--background-strong);
  cursor: not-allowed;
}
.field__box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.field__box .field__affix :where(svg) {
  width: 24px;
  height: 24px;
}
.field__box[data-leading] :where(.input) {
  padding-inline-start: 52px;
}
.field__box[data-trailing] :where(.input), .field__box:has(:where(.input, .textarea)[aria-invalid=true]) :where(.input) {
  padding-inline-end: 40px;
}
.field__box:has([data-mo-size=small]) .field__affix :where(svg) {
  width: 20px;
  height: 20px;
}
.field__box:has([data-mo-size=small])[data-leading] :where(.input) {
  padding-inline-start: 48px;
}
.field__box:has([data-mo-size=small])[data-trailing] :where(.input), .field__box:has([data-mo-size=small]):has(:where(.input, .textarea)[aria-invalid=true]) :where(.input) {
  padding-inline-end: 36px;
}
@media (min-width: 768px) {
  .field__box:has([data-pc-size=small]) .field__affix :where(svg) {
    width: 20px;
    height: 20px;
  }
  .field__box:has([data-pc-size=small])[data-leading] :where(.input) {
    padding-inline-start: 48px;
  }
  .field__box:has([data-pc-size=small])[data-trailing] :where(.input), .field__box:has([data-pc-size=small]):has(:where(.input, .textarea)[aria-invalid=true]) :where(.input) {
    padding-inline-end: 36px;
  }
  .field__box:has([data-pc-size=medium]) .field__affix :where(svg) {
    width: 24px;
    height: 24px;
  }
  .field__box:has([data-pc-size=medium])[data-leading] :where(.input) {
    padding-inline-start: 52px;
  }
  .field__box:has([data-pc-size=medium])[data-trailing] :where(.input), .field__box:has([data-pc-size=medium]):has(:where(.input, .textarea)[aria-invalid=true]) :where(.input) {
    padding-inline-end: 40px;
  }
}
.field__box[data-timer] :where(.input) {
  padding-inline-end: 62px;
}
.field__box[data-timer][data-trailing] :where(.input), .field__box[data-timer]:has(:where(.input, .textarea)[aria-invalid=true]) :where(.input) {
  padding-inline-end: 102px;
}
.field__box[data-timer][data-trailing] .field__timer, .field__box[data-timer]:has(:where(.input, .textarea)[aria-invalid=true]) .field__timer {
  inset-inline-end: 56px;
}
.field__box[data-card] :where(.input) {
  padding-inline-end: 60px;
}
.field__box[data-card][data-trailing] :where(.input), .field__box[data-card]:has(:where(.input, .textarea)[aria-invalid=true]) :where(.input) {
  padding-inline-end: 104px;
}
.field__box[data-card][data-trailing] .field__card-issuer, .field__box[data-card]:has(:where(.input, .textarea)[aria-invalid=true]) .field__card-issuer {
  inset-inline-end: 56px;
}
.field__card-issuer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 12px;
  line-height: 0;
  pointer-events: none;
}
.field__affix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--label-soft);
  pointer-events: none;
}
.field__affix--leading {
  inset-inline-start: 16px;
}
.field__affix--trailing {
  inset-inline-end: 8px;
  width: 40px;
  height: 40px;
}
.field__affix--trailing[data-state=error] {
  display: none;
  color: var(--state-error-normal);
}
.field__affix--trailing[data-state=success] {
  color: var(--label-normal);
}
.field__timer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 16px;
  color: var(--brand-blue-normal);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.field__clear {
  pointer-events: auto;
}
.field__clear[hidden] {
  display: none;
}
.field__clear {
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rounded-sm);
  background: transparent;
  background-clip: padding-box;
  color: var(--color-alpha-black-30);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.field__clear:hover {
  color: var(--color-alpha-black-50);
}
.field__clear:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.field[data-error=true] .field__affix--trailing[data-state=error] {
  display: inline-flex;
}
.field__box:has(:where(.input, .textarea)[aria-invalid=true]) .field__affix--trailing[data-state=error] {
  display: inline-flex;
}
.field__box:has(:where(.input, .textarea)[aria-invalid=true]) .field__clear {
  display: none;
}
.field[data-error=true] :where(.input,
.textarea,
.select__trigger,
.datepicker__trigger,
.checkbox__input,
.radio__input) {
  border-color: var(--brand-red-muted);
}
.field[data-error=true] :where(.input,
.textarea,
.select__trigger,
.datepicker__trigger,
.checkbox__input,
.radio__input):focus-visible {
  outline-color: var(--brand-red-soft);
}

.floating-search-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
  padding-bottom: max(var(--p-5), env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .floating-search-bar {
    padding-bottom: max(var(--p-12), env(safe-area-inset-bottom));
  }
}

.floating-search-bar__inner {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  max-width: 1024px;
  padding-inline: var(--p-5);
}
@media (min-width: 768px) {
  .floating-search-bar__inner {
    padding-inline: var(--p-10);
  }
}

.floating-search-bar__link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1-5);
  width: 220px;
  min-width: 0;
  max-width: 100%;
  padding: 10px var(--p-5);
  border: var(--stroke-2) solid transparent;
  border-radius: var(--rounded-full);
  background: linear-gradient(var(--background-normal), var(--background-normal)) padding-box, linear-gradient(278deg, #be69ff, var(--color-blue-60)) border-box;
  color: var(--label-normal);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  box-shadow: 0 24px 38px -10px rgba(54, 23, 206, 0.08), 0 10px 15px -5px rgba(54, 23, 206, 0.08);
  transition: background-color var(--transition-base);
}
@media (min-width: 768px) {
  .floating-search-bar__link {
    width: 460px;
  }
}
.floating-search-bar__link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.floating-search-bar__icon {
  flex-shrink: 0;
  color: var(--brand-blue-normal);
}

.floating-search-bar__query {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.help-contact {
  padding-top: var(--gap-8);
  border-top: var(--gap-2) solid var(--background-strong);
}
.help-contact__title {
  margin: 0;
  font-size: var(--font-size-title-small);
  font-weight: var(--font-weight-bold);
  color: var(--label-normal);
}
.help-contact__list {
  margin-top: var(--gap-4);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-2);
}

@media (min-width: 768px) {
  .help-contact {
    padding-top: 0;
    border-top: 0;
  }
  .help-contact__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-4);
  }
}
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: currentColor;
}

.info-cell__row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  padding-block: var(--p-1);
}

.info-cell__label {
  flex-shrink: 0;
  overflow: hidden;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-cell__value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-normal);
  text-align: right;
}

.info-cell__row--medium .info-cell__label,
.info-cell__row--medium .info-cell__value {
  font-size: var(--font-size-component-small);
}

.info-cell__row--thin .info-cell__value {
  color: var(--label-soft);
}

.info-cell__row--blue .info-cell__value {
  color: var(--brand-blue-normal);
}

.info-cell__row--red .info-cell__value {
  color: var(--brand-red-normal);
}

.info-cell__row--ellipsis .info-cell__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-cell :where(hr) {
  margin: var(--gap-2) 0 0;
  border: 0;
  border-top: var(--stroke-1) solid var(--border-line-muted);
}

.info-cell :where(hr) + * {
  margin-top: var(--gap-2);
}

.info-cell__group + .info-cell__group {
  margin-top: var(--gap-2);
}

.info-cell__group-title {
  margin: 0;
  padding-block: var(--p-0-5);
  overflow: hidden;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-cell__final {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  padding-block: var(--p-0-5);
}

.info-cell__final-label {
  flex-shrink: 0;
  overflow: hidden;
  padding-block: var(--p-0-5);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-cell__final-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-blue-normal);
  text-align: right;
}

.info-cell__final--plain .info-cell__final-value {
  color: var(--label-normal);
}

.info-cell__label .tooltip,
.info-cell__final-label .tooltip {
  margin-left: var(--gap-0-5);
}

.info-cell__value-link,
.info-cell__underline-btn {
  border: 1px solid transparent;
  background: transparent;
  background-clip: padding-box;
  outline: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.info-cell__value-link:hover, .info-cell__value-link:active,
.info-cell__underline-btn:hover,
.info-cell__underline-btn:active {
  background: var(--background-strong);
}
.info-cell__value-link:focus-visible:focus-visible,
.info-cell__underline-btn:focus-visible:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.info-cell__value-link,
.info-cell__underline-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-cell__underline-btn {
  position: relative;
  margin-left: calc(2 * var(--gap-1-5));
}

.info-cell__underline-btn::before {
  content: "";
  position: absolute;
  inset-block: var(--p-0-5);
  left: calc(-1 * var(--gap-1-5) - var(--stroke-1));
  width: var(--stroke-1);
  background: var(--border-line-normal);
}

.input {
  display: block;
  width: 100%;
  border: 1px solid var(--border-box-normal);
  border-radius: var(--rounded-xl);
  background: var(--fill-normal);
  color: var(--label-normal);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-base);
  height: 52px;
  padding: 0 16px;
  font-size: var(--font-size-component-large);
}
.input[data-mo-size=small] {
  height: 44px;
}
@media (min-width: 768px) {
  .input[data-pc-size=small] {
    height: 44px;
  }
  .input[data-pc-size=medium] {
    height: 52px;
  }
  .input[data-pc-size=small], .input[data-mo-size=small]:not([data-pc-size]) {
    font-size: 14px;
  }
}
.input[type=search] {
  border-color: transparent;
  background: var(--color-alpha-black-5);
  appearance: none;
}
.input[type=search]::-webkit-search-cancel-button {
  appearance: none;
}
.input::placeholder {
  color: var(--label-disabled);
}
.input:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.input:disabled, .input[readonly] {
  background: var(--fill-disabled);
  color: var(--label-disabled);
  cursor: not-allowed;
}
.input[aria-invalid=true], .input:user-invalid {
  border-color: var(--brand-red-muted);
}
.input[aria-invalid=true]:focus-visible, .input:user-invalid:focus-visible {
  outline-color: var(--brand-red-soft);
}

.input-ai-search__box {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  padding: var(--p-1-5) var(--p-1-5) var(--p-1-5) var(--p-5);
  border-radius: 26px;
  background: var(--background-normal);
  box-shadow: var(--shadow-popover);
}
.input-ai-search__box:has(.input-ai-search__input:focus-visible) {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.input-ai-search__ac {
  background: var(--background-normal);
  border-radius: var(--rounded-3xl);
  box-shadow: var(--shadow-popover);
  padding: var(--p-4) var(--p-3);
}
.input-ai-search__ac:not([hidden]) ~ .input-ai-search__box {
  margin-top: var(--gap-2);
}
.input-ai-search__ac-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(50dvh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.input-ai-search__ac-option {
  display: flex;
  align-items: center;
  gap: var(--gap-1-5);
  padding: var(--p-2);
  border-radius: var(--rounded-lg);
  color: var(--label-normal);
  font-size: var(--font-size-component-medium);
  transition: background-color var(--transition-base);
}
.input-ai-search__ac-option:hover, .input-ai-search__ac-option:active {
  background: var(--background-strong);
}
.input-ai-search__ac-option:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.input-ai-search__ac-icon {
  flex-shrink: 0;
  color: var(--label-normal);
}
.input-ai-search__ac-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.input-ai-search__ac-hl {
  background: transparent;
  color: var(--brand-blue-normal);
  font-weight: var(--font-weight-medium);
}
.input-ai-search__ac-cat {
  flex-shrink: 0;
  color: var(--label-soft);
  font-size: var(--font-size-caption-medium);
}
.input-ai-search {
  /* 2026-07-16 수정 #0716-7 : input-ai-search__input 폰트사이즈 component-medium → component-large */
}
.input-ai-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--label-normal);
  font-size: var(--font-size-component-large);
  line-height: 1.6;
  resize: none;
  overflow-y: auto;
  outline: none;
}
.input-ai-search__input::placeholder {
  color: var(--label-disabled);
}
@media (min-width: 768px) {
  .input-ai-search__input {
    min-height: 92px;
  }
}
.input-ai-search__send {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: var(--stroke-1) solid transparent;
  background: transparent;
  background-clip: padding-box;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  outline: none;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.input-ai-search__send svg {
  pointer-events: none;
  flex-shrink: 0;
}
.input-ai-search__send::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.input-ai-search__send {
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-full);
  background: var(--brand-blue-normal);
  color: var(--label-inverse-normal);
  align-self: end;
}
.input-ai-search__send:hover:not(:disabled) {
  background: var(--color-blue-70);
}
.input-ai-search__send:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.input-ai-search__send:disabled, .input-ai-search__send[aria-disabled=true] {
  pointer-events: none;
  background: var(--fill-disabled);
  color: var(--label-disabled);
}
.input-ai-search__disclaimer {
  margin: var(--gap-2) 0 0;
  text-align: center;
  color: var(--label-soft);
  font-size: var(--font-size-component-xsmall);
}
@media (min-width: 768px) {
  .input-ai-search__disclaimer {
    margin: var(--gap-3) 0 0;
  }
}

.list-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
.list-cell__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-0-5);
}
.list-cell__title {
  margin: 0;
  font-size: var(--list-cell-title-size, var(--font-size-body-medium));
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
  line-height: 1.6;
}
.list-cell__title--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-cell__subtitle {
  margin: 0;
  font-size: var(--list-cell-subtitle-size, var(--font-size-body-small));
  /* 2026-07-16 수정 #0716-59 : list-cell__subtitle 폰트 두께 regular 명시 */
  font-weight: var(--font-weight-regular);
  color: var(--label-soft);
  line-height: 1.6;
}
.list-cell__subtitle--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-cell__icon {
  flex-shrink: 0;
}
.list-cell__icon--check {
  color: var(--label-normal);
}

.list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) 0;
}
.list-toolbar__count {
  margin: 0;
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--label-muted);
}
.list-toolbar__count-num {
  font-weight: inherit;
}
@media (min-width: 768px) {
  .list-toolbar__count {
    font-size: var(--font-size-component-medium);
  }
}
.list-toolbar__control {
  flex-shrink: 0;
  margin-left: auto;
}

.loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  background: rgba(255, 255, 255, 0.8);
}
.loading:focus-visible {
  outline: none;
}
.loading__spinner {
  width: 64px;
  height: 64px;
  color: var(--brand-blue-normal);
  animation: loading-spin 1s linear infinite;
}
.loading__spinner circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 44 132;
}
.loading__label {
  margin: 0;
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--fill-hyper);
  line-height: 1.4;
  text-align: center;
}
.loading__desc {
  margin: var(--gap-0-5) 0 0;
  font-size: var(--font-size-component-medium);
  color: var(--label-soft);
  line-height: 1.6;
  text-align: center;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading__spinner {
    animation-duration: 2s;
  }
}
.modal__title {
  margin: 0;
  display: flex;
  align-items: center;
  height: 32px;
  font-size: var(--font-size-component-xlarge);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.modal__close {
  position: absolute;
  top: 24px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--rounded-sm);
  background: transparent;
  color: var(--label-soft);
}
.modal__close:hover {
  color: var(--label-normal);
}
.modal__close.btn svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  .modal__title {
    height: 36px;
    font-size: var(--font-size-component-3xlarge);
  }
  .modal__close {
    top: 40px;
    right: 32px;
    width: 36px;
    height: 36px;
  }
  .modal__close.btn svg {
    width: 20px;
    height: 20px;
  }
}
/* 2026-07-16 수정 #0716-15 : nodata 상하 여백을 페이지 지정(paddingBlock)으로 전환 */
.nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--gap-5);
  text-align: center;
}
.nodata__icon {
  flex-shrink: 0;
}
.nodata__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
}
.nodata__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-0-5);
}
.nodata__title {
  color: var(--label-soft);
  font-size: var(--font-size-component-large);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
}
.nodata {
  /* 2026-07-16 수정 #0716-16 : nodata__desc 글자색 label-disabled→label-soft */
}
.nodata__desc {
  margin-top: 0;
  color: var(--label-soft);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

.page-title {
  margin: 0;
  padding-block: var(--gap-4) 0;
  font-size: var(--font-size-title-xlarge);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: #000;
}
@media (min-width: 768px) {
  .page-title {
    padding-block: var(--gap-12) var(--gap-4);
  }
}

.page-title-band {
  background: var(--background-normal);
}

.page-title-root {
  margin-inline: auto;
  max-width: 1024px;
  padding-inline: var(--p-5);
}
@media (min-width: 768px) {
  .page-title-root {
    padding-inline: var(--p-10);
  }
}

.contents .page-title-root {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.page-title--sr-only-mobile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .page-title--sr-only-mobile {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .page-title--sr-only-desktop {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.page-title-bar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  padding-block: var(--gap-4) 0;
}
.page-title-bar .page-title {
  padding-block: 0;
}
.page-title-bar__aside {
  min-width: 0;
}
@media (min-width: 768px) {
  .page-title-bar {
    flex-direction: row;
    align-items: center;
    padding-block: var(--gap-12) var(--gap-8);
  }
  .page-title-bar .page-title {
    flex: 1;
  }
  .page-title-bar__aside {
    flex: none;
  }
}

body > .popover {
  position: fixed;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--background-elevated-normal);
  color: var(--label-normal);
  border: 1px solid var(--border-line-normal);
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow-popover);
  padding: 4px;
  max-height: var(--popover-max-height, 240px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
body > .popover[data-open=true] {
  opacity: 1;
  transform: translateY(0);
}
body > .popover[data-position=top] {
  transform: translateY(4px);
}
body > .popover[data-position=top][data-open=true] {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body > .popover {
    transition: none;
  }
}
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gap-1-5);
  cursor: pointer;
  user-select: none;
}
.radio__input {
  -webkit-appearance: none;
  appearance: none;
  margin: 3px 0 0;
  border: var(--stroke-1) solid var(--border-box-strong);
  border-radius: var(--rounded-full);
  background-color: var(--fill-normal);
  cursor: inherit;
  flex-shrink: 0;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.radio__input:checked {
  border-color: var(--border-box-ultra);
}
.radio__input:hover:not(:disabled):not(:checked) {
  border-color: var(--border-box-heavy);
}
.radio__input:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.radio__input:disabled {
  cursor: not-allowed;
}
.radio__input:disabled:not(:checked) {
  background-color: var(--fill-alpha-black-soft);
  border-color: var(--border-box-normal);
}
.radio__input:disabled:checked {
  border-color: var(--fill-alpha-black-muted);
}
.radio__input:not(:checked)[aria-invalid=true], .radio__input:not(:checked):user-invalid {
  border-color: var(--state-error-normal);
}
.radio:has(.radio__input:disabled) {
  cursor: not-allowed;
}
.radio:has(.radio__input:disabled) .radio__label {
  color: var(--label-disabled);
}
.radio__label {
  color: var(--label-normal);
  font-weight: var(--font-weight-medium);
}
.radio .radio__input {
  width: 20px;
  height: 20px;
}
.radio .radio__input:checked {
  border-width: 6px;
}
.radio .radio__label {
  font-size: var(--font-size-component-large);
  line-height: 26px;
}
.radio[data-mo-size=small] .radio__input {
  width: 16px;
  height: 16px;
}
.radio[data-mo-size=small] .radio__input:checked {
  border-width: 5px;
}
.radio[data-mo-size=small] .radio__label {
  font-size: var(--font-size-component-medium);
  line-height: 22px;
}
@media (min-width: 768px) {
  .radio[data-pc-size=medium] .radio__input {
    width: 20px;
    height: 20px;
  }
  .radio[data-pc-size=medium] .radio__input:checked {
    border-width: 6px;
  }
  .radio[data-pc-size=medium] .radio__label {
    font-size: var(--font-size-component-large);
    line-height: 26px;
  }
  .radio[data-pc-size=small] .radio__input {
    width: 16px;
    height: 16px;
  }
  .radio[data-pc-size=small] .radio__input:checked {
    border-width: 5px;
  }
  .radio[data-pc-size=small] .radio__label {
    font-size: var(--font-size-component-medium);
    line-height: 22px;
  }
}

.result {
  width: 100%;
}
.result[data-tone=error] .result__icon {
  color: var(--state-error-normal);
}
.result[data-tone=success] .result__icon {
  color: var(--brand-blue-normal);
}
.result__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.result__head {
  margin-top: var(--gap-6);
}
.result__title {
  font-size: var(--font-size-component-3xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--label-normal);
  line-height: 1.4;
}
.result__desc {
  margin-top: var(--gap-2);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-soft);
  line-height: 1.6;
}

.result--screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.result--screen > .result__body {
  flex: 1 0 auto;
  padding: var(--p-40) var(--p-5) var(--p-12);
}
.result--screen > .button-action {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.rrn.field {
  gap: 0;
}
.rrn__row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.rrn .field__helper,
.rrn .field__error {
  margin-top: 4px;
}
.rrn__front {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.rrn__dash {
  flex: 0 0 auto;
  width: 6px;
  height: 1px;
  background: var(--label-normal);
}
.rrn__back {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.rrn__back .rrn__input--digit {
  width: 40px;
  flex: 0 0 auto;
  padding-inline: 0;
  text-align: center;
}
.rrn__mask {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
}
.rrn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--label-soft);
}
.rrn__state {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 16px;
  display: inline-flex;
  color: var(--state-error-normal);
  pointer-events: none;
}
.rrn[data-error=true] .rrn__front .input {
  padding-inline-end: 40px;
}

.section-title {
  --st-more-nudge: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}
@media (min-width: 768px) {
  .section-title {
    justify-content: flex-start;
  }
}
.section-title {
  /* 2026-07-24 수정 #0724-3 : section-title 전체보기 화살표 첫 줄 중앙 정렬·hover 틴트 전환 */
}
.section-title:not(:has(.section-title__aside)) {
  align-items: flex-start;
  --st-more-nudge: calc((var(--font-size-title-medium) * 1.4 - 28px) / 2);
}
.section-title[data-size=small] {
  --st-more-nudge: calc((var(--font-size-title-small) * 1.4 - 28px) / 2);
}
.section-title[data-size=small] .section-title__heading {
  font-size: var(--font-size-title-small);
}
.section-title__heading {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .section-title__heading br[data-break=mo] {
    display: none;
  }
}
.section-title__heading br[data-break=pc] {
  display: none;
}
@media (min-width: 768px) {
  .section-title__heading br[data-break=pc] {
    display: inline;
  }
}
.section-title {
  /* 2026-07-24 수정 #0724-3 : section-title__count 색 brand-blue→label-soft */
}
.section-title__count {
  margin-inline-start: var(--gap-1);
  font-weight: var(--font-weight-semibold);
  color: var(--label-soft);
}
.section-title__more {
  position: relative;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--p-1);
  border: 0;
  background: none;
  border-radius: var(--rounded-md);
  color: var(--label-muted);
  text-decoration: none;
  cursor: pointer;
  margin-top: var(--st-more-nudge);
}
.section-title__more:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.section-title__more::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.section-title__more:hover::before {
  opacity: 0.0375;
}
.section-title__more:active::before, .section-title__more[aria-expanded=true]::before {
  opacity: 0.09;
}
.section-title__more::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.section-title__aside {
  margin-inline-start: auto;
}

select[data-slot=select]:not([data-enhanced]) {
  display: block;
  width: 100%;
  visibility: hidden;
  height: 52px;
}

select[data-slot=select]:not([data-enhanced])[data-mo-size=small] {
  height: 44px;
}

@media (min-width: 768px) {
  select[data-slot=select]:not([data-enhanced])[data-pc-size=small] {
    height: 44px;
  }
  select[data-slot=select]:not([data-enhanced])[data-pc-size=medium] {
    height: 52px;
  }
}
select[data-slot=select][data-enhanced=true] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.no-js select[data-slot=select]:not([data-enhanced]) {
  visibility: visible;
  height: auto;
}

.select {
  position: relative;
  display: block;
  width: 100%;
}
.select .select__trigger {
  height: 52px;
}
.select .select__arrow,
.select .select__status-icon {
  width: 24px;
  height: 24px;
}
.select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  width: 100%;
  padding: 0 14px 0 var(--p-4);
  border: 1px solid var(--border-box-normal);
  border-radius: var(--rounded-xl);
  background: var(--fill-normal);
  color: var(--label-normal);
  font-family: inherit;
  font-size: var(--font-size-component-large);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-base);
}
.select__trigger:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.select__trigger:disabled {
  background: var(--fill-disabled);
  color: var(--label-disabled);
  cursor: not-allowed;
}
.select[data-mo-size=small] .select__trigger {
  height: 44px;
}
.select[data-mo-size=small] .select__arrow,
.select[data-mo-size=small] .select__status-icon {
  width: 20px;
  height: 20px;
}
@media (min-width: 768px) {
  .select[data-pc-size=small] .select__trigger {
    height: 44px;
  }
  .select[data-pc-size=small] .select__arrow,
  .select[data-pc-size=small] .select__status-icon {
    width: 20px;
    height: 20px;
  }
  .select[data-pc-size=medium] .select__trigger {
    height: 52px;
  }
  .select[data-pc-size=medium] .select__arrow,
  .select[data-pc-size=medium] .select__status-icon {
    width: 24px;
    height: 24px;
  }
}
.select[data-type=ghost] {
  display: inline-block;
  width: auto;
}
.select[data-type=ghost] .select__trigger {
  width: auto;
  height: auto;
  gap: var(--gap-0-5);
  padding: 0 var(--p-1);
  border: none;
  border-radius: var(--rounded-sm);
  background: transparent;
  color: var(--label-muted);
  font-size: var(--font-size-component-small);
  font-weight: 500;
}
@media (min-width: 768px) {
  .select[data-type=ghost] .select__trigger {
    font-size: var(--font-size-component-medium);
  }
}
.select[data-type=ghost] .select__trigger:hover {
  color: var(--label-normal);
}
.select[data-type=ghost] .select__value {
  flex: 0 0 auto;
}
.select[data-type=ghost] .select__arrow {
  width: 12px;
  height: 12px;
  color: var(--label-muted);
}
.select[data-type=card] {
  min-height: 67px;
  padding: var(--p-3) var(--p-3) var(--p-3) var(--p-4);
  border: 1px solid;
  border-radius: var(--rounded-lg);
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  border-color: var(--brand-blue-normal);
  background: var(--brand-blue-weak);
}
.select[data-type=card] .select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}
.select[data-type=card] .select__value .select__option-title {
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
}
.select[data-type=card] .select__trigger {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--p-2);
  border: none;
  border-radius: var(--rounded-sm);
  background: transparent;
  color: var(--brand-blue-normal);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
}
.select[data-type=card] .select__trigger:hover::before {
  opacity: 0.0375;
}
.select[data-type=card] .select__trigger:active::before, .select[data-type=card] .select__trigger[aria-expanded=true]::before {
  opacity: 0.09;
}
.select[data-type=card][data-readonly=true] {
  padding-right: var(--p-4);
}
.select__trigger[aria-invalid=true] {
  border-color: var(--brand-red-muted);
}
.select__trigger[aria-invalid=true]:focus-visible {
  outline-color: var(--brand-red-soft);
}
.select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select__value[data-placeholder=true] {
  color: var(--label-soft);
}
.select__arrow {
  flex-shrink: 0;
  color: var(--label-soft);
  transition: transform var(--transition-base);
}
.select__status-icon {
  display: none;
  flex-shrink: 0;
  color: var(--state-error-normal);
}
.select__trigger[aria-invalid=true] .select__status-icon {
  display: inline-flex;
}
.select__trigger[aria-expanded=true] .select__status-icon {
  display: none;
}
.select__trigger:disabled .select__arrow {
  color: var(--label-disabled);
}
.select[data-open=true] .select__arrow {
  transform: rotate(180deg);
}

.select__panel {
  display: none;
}
.select__panel:focus {
  outline: none;
}

.select__list {
  display: flex;
  flex-direction: column;
  padding: var(--p-1);
  gap: 0;
}

.select__group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.select__group + .select__group {
  margin-top: var(--gap-1);
  padding-top: var(--p-1);
  border-top: 1px solid var(--border-line-normal);
}

.select__group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px var(--p-2) var(--p-1-5);
  font-size: 11px;
  font-weight: 600;
  color: var(--label-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--background-elevated-normal);
  box-shadow: 0 1px 0 var(--border-line-normal);
}

.select__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  width: 100%;
  padding: var(--p-3);
  border: none;
  border-radius: var(--rounded-lg);
  background: transparent;
  color: var(--label-muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.select__option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.select__option:not([data-disabled=true]):hover::before, .select__option:not([data-disabled=true])[data-active=true]::before {
  opacity: 0.0375;
}
.select__option:not([data-disabled=true]):active::before {
  opacity: 0.09;
}
.select__option[data-disabled=true] {
  color: var(--label-disabled);
  cursor: not-allowed;
}

.select__option[aria-selected=true] {
  color: var(--label-normal);
  font-weight: 600;
}

.select__option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2026-07-16 수정 #0716-42 : select 모달 옵션 체크 아이콘 크기·좌우 패딩·hover 틴트 조정 */
.select__option-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: currentcolor;
  opacity: 0;
}

.select__option[aria-selected=true] .select__option-check {
  opacity: 1;
}

.select__option-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-0-5);
}

.select__option-title {
  display: flex;
  align-items: center;
  gap: var(--gap-0-5);
  min-width: 0;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  color: var(--label-soft);
  line-height: 1.6;
}

.select__option-count {
  flex-shrink: 0;
}

.select__option-title .select__option-label {
  flex: 0 1 auto;
}

.select__option-description {
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-medium);
  color: var(--label-soft);
  line-height: 1.6;
}

.select__option[aria-selected=true] .select__option-title {
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
}

.select__option--card {
  min-height: 67px;
  padding: var(--p-3) var(--p-3) var(--p-3) var(--p-4);
  border: 1px solid;
  border-radius: var(--rounded-lg);
  border-color: var(--border-box-normal);
  background: var(--fill-normal);
}
.select__option--card + .select__option--card {
  margin-top: var(--gap-2);
}

.select__option--card[aria-selected=true] {
  border-color: var(--border-box-ultra);
}

.select__panel:not([data-type=card]) .select__option--card[aria-selected=true] {
  border-color: transparent;
  padding-left: var(--p-3);
}
.select__panel:not([data-type=card]) .select__option--card[aria-selected=true]::before {
  opacity: 0.0375;
}

.select__panel:not([data-type=card]) .select__option--card {
  border-color: transparent;
  padding-left: var(--p-3);
}
.select__panel:not([data-type=card]) .select__option--card + .select__option--card {
  margin-top: 0;
}
.select__panel:not([data-type=card]) .select__option--card .select__option-title {
  font-size: var(--font-size-component-large);
  color: var(--label-muted);
}
.select__panel:not([data-type=card]) .select__option--card .select__option-description {
  font-size: var(--font-size-component-medium);
  font-weight: normal;
}

@media (min-width: 768px) {
  .select__list {
    padding: 0;
  }
  .select__group-label {
    position: static;
    padding: var(--p-1-5) var(--p-2) var(--p-1);
    box-shadow: none;
  }
  .select__option-check {
    width: 20px;
    height: 20px;
  }
}
.select__overlay .overlay__body-inner > .select__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: var(--p-2);
  /* 2026-07-24 수정 #0724-12 : select 카드 타입 모달 패널 인셋 개편 — 패널 12 인셋을 카드 타입 한정, 리스트 자체 인셋 제거 */
}
.select__overlay .overlay__body-inner > .select__panel[data-type=card] {
  margin-inline: var(--p-3);
}
.select__overlay .overlay__body-inner > .select__panel[data-type=card] .select__list {
  padding: 0;
}
@media (min-width: 768px) {
  .select__overlay .overlay__body-inner > .select__panel {
    padding-top: var(--p-3);
    margin-inline: 0;
  }
}

/* 2026-07-16 수정 #0716-42 : select 모달 옵션 체크 아이콘 크기·좌우 패딩·hover 틴트 조정 */
:is(.drawer__content, .dialog__content) > .overlay__panel.select__overlay > .overlay__body > .overlay__body-inner {
  padding-inline: var(--p-2);
}
@media (min-width: 768px) {
  :is(.drawer__content, .dialog__content) > .overlay__panel.select__overlay > .overlay__body > .overlay__body-inner {
    padding-left: var(--p-7);
    padding-right: calc(var(--p-7) - var(--scrollbar-size));
  }
}
:is(.drawer__content, .dialog__content) > .overlay__panel.select__overlay > .overlay__body > .overlay__body-inner .select__option {
  padding-right: var(--p-2);
}

/* 2026-07-16 수정 #0716-42 : select 모달 옵션 체크 아이콘 크기·좌우 패딩·hover 틴트 조정 */
.select__overlay .select__option:not([data-disabled=true])[data-active=true]::before {
  opacity: 0;
}
.select__overlay .select__option:not([data-disabled=true]):focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.skeleton {
  display: block;
  width: 100%;
  height: var(--skeleton-h, 1rem);
  border-radius: var(--skeleton-r, var(--rounded-md));
  background: red;
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}
.data-table-scroll:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    .data-table-scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  .data-table-scroll::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  .data-table-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 3px 0;
  }
  .data-table-scroll::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  .data-table-scroll:hover {
    outline: 1px solid transparent;
  }
  .data-table-scroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}
.data-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  --table-bleed: var(--p-5);
  margin-right: calc(-1 * var(--table-bleed));
  padding-right: var(--table-bleed);
}

/* 2026-07-24 수정 #0724-10 시작 : data-table 셀 규격 개편 — 셀 래퍼 div(data-table__cell) 필수·폭 상한 180·폰트 13·패딩 8 균일·기본 중앙 정렬(data-align 훅)·중간 구분 헤더 행 */
.data-table {
  table-layout: auto;
  width: auto;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-component-small);
  line-height: 1.6;
  white-space: normal;
}
.data-table th,
.data-table td {
  box-sizing: content-box;
  width: auto;
  min-width: 82px;
  border-right: var(--stroke-1) solid var(--border-line-normal);
  border-bottom: var(--stroke-1) solid var(--border-line-normal);
}
.data-table th:last-child,
.data-table td:last-child {
  border-right: 0;
}
.data-table thead th {
  padding: var(--p-2);
  background: var(--background-strong);
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
}
.data-table tbody th[scope=row] {
  padding: var(--p-2);
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
}
.data-table tbody td {
  padding: var(--p-2);
  color: var(--label-soft);
}
.data-table tbody th[scope=col] {
  padding: var(--p-2);
  background: var(--background-strong);
  font-weight: var(--font-weight-semibold);
  color: var(--label-normal);
}
.data-table :where(thead th),
.data-table :where(tbody th[scope=row]),
.data-table :where(tbody td) {
  text-align: center;
}
.data-table :is(th, td)[data-align=left] {
  text-align: left;
}
.data-table :is(th, td)[data-align=center] {
  text-align: center;
}
.data-table :is(th, td)[data-align=right] {
  text-align: right;
}
.data-table :is(th, td) > .data-table__cell {
  width: max-content;
  min-width: 100%;
  max-width: 180px;
}
.data-table[data-sticky-col] thead tr:first-child > :first-child,
.data-table[data-sticky-col] tbody tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.data-table[data-sticky-col] tbody tr > :first-child {
  background: var(--background-normal);
}
.data-table[data-sticky-col] tbody tr > th[scope=col]:first-child {
  background: var(--background-strong);
}
.data-table[data-variant=vertical] {
  white-space: normal;
}
.data-table[data-variant=vertical] th {
  white-space: nowrap;
}
.data-table[data-variant=vertical] :is(th, td) > .data-table__cell {
  width: auto;
  min-width: 0;
  max-width: none;
}
.data-table[data-variant=vertical] thead tr:first-child > *,
.data-table[data-variant=vertical] tbody tr:first-child > * {
  border-top: var(--stroke-1) solid var(--border-line-normal);
}
.data-table[data-variant=vertical] thead + tbody tr:first-child > * {
  border-top: 0;
}
.data-table[data-variant=vertical] thead th,
.data-table[data-variant=vertical] tbody th[scope=row] {
  background: var(--background-strong);
}
.data-table[data-variant=vertical] :where(tbody td),
.data-table[data-variant=vertical] :where(thead th:not(:first-child)) {
  text-align: left;
}
.data-table[data-variant=vertical] tbody td {
  color: var(--label-soft);
}
.data-table[data-variant=vertical] thead th:not(:first-child) {
  background: var(--background-normal);
  font-weight: var(--font-weight-regular);
  color: var(--label-soft);
}

/* #0724-10 끝 */
.tabs__list {
  display: flex;
  max-width: 1024px;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.tabs__tab {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  scroll-snap-align: start;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
  border: 0;
  border-radius: var(--rounded-lg);
  background: transparent;
  background-clip: padding-box;
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}
.tabs__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.tabs__tab:hover::before {
  opacity: 0.0375;
}
.tabs__tab:active::before, .tabs__tab[aria-expanded=true]::before {
  opacity: 0.09;
}
.tabs__tab[disabled] {
  cursor: not-allowed;
  color: var(--label-disabled);
}
.tabs__tab[disabled]::before {
  content: none;
}

.tabs--sticky:not([data-spy]) > .tabs__strip,
.tabs--sticky[data-spy] {
  position: sticky;
}

/* 2026-07-16 수정 #0716-17 : tabs 밴드 배경색 모바일/데스크탑 반응형 변수(4종) 전환 */
.tabs > .tabs__strip {
  background: var(--tabs-bg, transparent);
  transition: background-color var(--transition-base);
}
@media (min-width: 768px) {
  .tabs > .tabs__strip {
    background: var(--tabs-bg-pc, var(--tabs-bg, transparent));
  }
}

/* 2026-07-16 수정 #0716-17 : tabs 밴드 배경색 모바일/데스크탑 반응형 변수(4종) 전환 */
.tabs--sticky[data-stuck] > .tabs__strip,
.tabs--sticky > .tabs__strip[data-stuck] {
  background: var(--tabs-bg-stuck, var(--fill-normal));
}
@media (min-width: 768px) {
  .tabs--sticky[data-stuck] > .tabs__strip,
  .tabs--sticky > .tabs__strip[data-stuck] {
    background: var(--tabs-bg-stuck-pc, var(--tabs-bg-stuck, var(--fill-normal)));
  }
}

.overlay__body-inner .tabs > :where(.tabs__strip) {
  margin-inline-start: -20px;
  margin-inline-end: calc(-20px + var(--scrollbar-size));
}
@media (min-width: 768px) {
  .overlay__body-inner .tabs > :where(.tabs__strip) {
    margin-inline-start: -40px;
    margin-inline-end: calc(-40px + var(--scrollbar-size));
  }
}

.tabs__panel {
  margin-top: var(--gap-4);
}
.tabs__panel:focus-visible:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}

.tabs[data-js] .tabs__panel[data-state=inactive] {
  display: none;
}

.tabs--bar > :where(.tabs__strip) {
  box-shadow: inset 0 calc(-1 * var(--stroke-1)) 0 var(--border-line-normal);
}
.tabs--bar > :where(.tabs__strip) > .tabs__list {
  scrollbar-width: none;
}
.tabs--bar > :where(.tabs__strip) > .tabs__list::-webkit-scrollbar {
  display: none;
}
.tabs--bar > :where(.tabs__strip) > .tabs__list > .tabs__tab {
  min-height: 46px;
  padding-inline: var(--gap-2);
  font-size: var(--font-size-component-medium);
  line-height: 1.6;
  color: var(--label-soft);
}
.tabs--bar > :where(.tabs__strip) > .tabs__list > .tabs__tab:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.tabs--bar > :where(.tabs__strip) > .tabs__list > .tabs__tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--stroke-2);
  background: transparent;
}
.tabs--bar > :where(.tabs__strip) > .tabs__list > .tabs__tab:is([aria-selected=true], [aria-current]:not([aria-current=false])) {
  color: var(--label-normal);
}
.tabs--bar > :where(.tabs__strip) > .tabs__list > .tabs__tab:is([aria-selected=true], [aria-current]:not([aria-current=false]))::after {
  background: var(--border-line-strong);
}
.tabs--bar[data-type=fill] > :where(.tabs__strip) > .tabs__list > .tabs__tab {
  flex: 1 1 0;
}
.tabs--bar[data-type=hug] > :where(.tabs__strip) > .tabs__list {
  gap: var(--gap-1);
  padding-inline: var(--gap-3);
  scroll-padding-inline: var(--gap-3);
}
.tabs--bar[data-type=hug] > :where(.tabs__strip) > .tabs__list > .tabs__tab::after {
  left: var(--gap-2);
  right: var(--gap-2);
}

.tabs--chip > :where(.tabs__strip) > .tabs__list {
  gap: var(--gap-1-5);
  overflow-x: scroll;
  padding: var(--gap-3) var(--gap-5);
  padding-bottom: calc(var(--gap-3) - var(--scrollbar-size));
  scroll-padding-inline: var(--gap-5);
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    .tabs--chip > :where(.tabs__strip) > .tabs__list {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list::-webkit-scrollbar-track {
    background: transparent;
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list:hover {
    outline: 1px solid transparent;
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}
.tabs--chip > :where(.tabs__strip) > .tabs__list > .tabs__tab {
  padding: var(--gap-1-5) var(--gap-3);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  color: var(--label-muted);
  background-color: var(--fill-alpha-black-soft);
  border-radius: var(--rounded-full);
}
.tabs--chip > :where(.tabs__strip) > .tabs__list > .tabs__tab:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.tabs--chip > :where(.tabs__strip) > .tabs__list > .tabs__tab:is([aria-selected=true], [aria-current]:not([aria-current=false])) {
  font-weight: var(--font-weight-semibold);
  color: var(--label-inverse-normal);
  background-color: var(--fill-hyper);
}

@media (min-width: 768px) {
  /* 2026-07-24 수정 #0724-5 : tabs__tab PC 라벨-건수 간격 6 지정 */
  .tabs__tab {
    gap: var(--gap-1-5);
  }
  .tabs--bar > :where(.tabs__strip) > .tabs__list > .tabs__tab {
    min-height: 50px;
    font-size: var(--font-size-component-large);
  }
  .tabs--bar[data-type=fill] > :where(.tabs__strip) > .tabs__list {
    padding-inline: var(--gap-10);
  }
  .tabs--bar[data-type=hug] > :where(.tabs__strip) > .tabs__list {
    gap: var(--gap-3);
    padding-inline: var(--gap-8);
    scroll-padding-inline: var(--gap-8);
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list {
    gap: var(--gap-2);
    padding: var(--gap-4) var(--gap-10);
    padding-bottom: calc(var(--gap-4) - var(--scrollbar-size));
    scroll-padding-inline: var(--gap-10);
  }
  .tabs--chip > :where(.tabs__strip) > .tabs__list > .tabs__tab {
    padding: var(--gap-1-5) var(--gap-4);
    font-size: var(--font-size-component-medium);
  }
}
.textarea-field {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--border-box-normal);
  border-radius: var(--rounded-xl);
  background: var(--fill-normal);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.textarea-field:has(.textarea:focus-visible) {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.textarea-field:has(.textarea[aria-invalid=true]), .textarea-field:has(.textarea:user-invalid) {
  border-color: var(--brand-red-muted);
}
.textarea-field:has(.textarea[aria-invalid=true]):has(.textarea:focus-visible), .textarea-field:has(.textarea:user-invalid):has(.textarea:focus-visible) {
  outline-color: var(--brand-red-soft);
}
.textarea-field:has(.textarea:disabled), .textarea-field:has(.textarea[readonly]) {
  background: var(--fill-disabled);
}

.textarea {
  display: block;
  width: 100%;
  min-height: 135px;
  padding: 13px 12px 46px;
  border: 0;
  background: transparent;
  color: var(--label-normal);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  outline: none;
}
@media (hover: hover) {
  @supports not selector(::-webkit-scrollbar-thumb) {
    .textarea {
      scrollbar-width: thin;
      scrollbar-color: var(--fill-alpha-black-muted) transparent;
    }
  }
  .textarea::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  .textarea::-webkit-scrollbar-track {
    background: transparent;
    margin: 3px 0;
  }
  .textarea::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--rounded-full);
    background-color: transparent;
  }
  .textarea:hover {
    outline: 1px solid transparent;
  }
  .textarea:hover::-webkit-scrollbar-thumb {
    background-color: var(--fill-alpha-black-normal);
  }
}
.textarea[data-resize=vertical] {
  resize: vertical;
}
.textarea::placeholder {
  color: var(--label-disabled);
}
.textarea:disabled, .textarea[readonly] {
  color: var(--label-disabled);
  cursor: not-allowed;
}

.textarea-field__counter {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 13px;
  font-size: 13px;
  line-height: 1;
  color: var(--label-soft);
  pointer-events: none;
}

.toast-region {
  position: fixed;
  inset-inline: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  pointer-events: none;
}
.toast-region--bottom {
  inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
}
.toast-region--top {
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 56px + var(--p-3));
}
@media (min-width: 768px) {
  .toast-region--top {
    inset-block-start: calc(32px + 64px + var(--p-6));
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  max-width: calc(100vw - 24px);
  padding: var(--p-3) var(--p-4) var(--p-3) var(--p-3);
  border-radius: var(--rounded-full);
  background: var(--color-alpha-black-90);
  color: var(--label-inverse-normal);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  box-shadow: 0 24px 38px rgba(0, 0, 0, 0.08), 0 10px 15px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.toast[data-state=enter] {
  opacity: 0;
  transform: translateY(8px);
}
.toast[data-state=exit] {
  opacity: 0;
  transform: translateY(8px);
  transition-timing-function: var(--ease-in);
}
.toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  background: var(--brand-green-normal);
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: #fff;
}
.toast__icon .icon {
  width: 20px;
  height: 20px;
}
.toast__img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}
.toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--gap-1-5);
  cursor: pointer;
  user-select: none;
}
.toggle__input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  margin: 0;
  border: none;
  border-radius: var(--rounded-full);
  background-color: var(--fill-heavy);
  cursor: inherit;
  flex-shrink: 0;
  transition: background-color var(--transition-base);
}
.toggle__input::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: var(--rounded-full);
  background-color: var(--fill-normal);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(18, 23, 30, 0.05);
  transition: transform var(--duration-fast) var(--ease-out);
}
.toggle__input::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.toggle__input:hover:not(:disabled)::after {
  opacity: 0.0375;
}
.toggle__input:active:not(:disabled)::after {
  opacity: 0.09;
}
.toggle__input:checked {
  background-color: var(--fill-hyper);
}
.toggle__input:checked::after {
  background: var(--fill-normal);
}
.toggle__input:checked:hover:not(:disabled)::after {
  opacity: 0.075;
}
.toggle__input:checked:active:not(:disabled)::after {
  opacity: 0.18;
}
.toggle__input:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.toggle__input:disabled {
  cursor: not-allowed;
  background-color: var(--fill-disabled);
}
.toggle__input:disabled::before {
  background-color: var(--fill-alpha-white-muted);
  box-shadow: none;
}
.toggle__input:disabled:checked {
  background-color: var(--fill-alpha-black-normal);
}
.toggle:has(.toggle__input:disabled) {
  cursor: not-allowed;
}
.toggle:has(.toggle__input:disabled) .toggle__label {
  color: var(--label-disabled);
}
.toggle__label {
  color: var(--label-normal);
  font-weight: var(--font-weight-medium);
}
.toggle .toggle__input {
  width: 52px;
  height: 32px;
}
.toggle .toggle__input::before {
  width: 24px;
  height: 24px;
}
.toggle .toggle__input:checked::before {
  transform: translateX(20px);
}
.toggle .toggle__label {
  margin-top: 3px;
  font-size: var(--font-size-component-large);
  line-height: 26px;
}
.toggle[data-mo-size=small] .toggle__input {
  width: 42px;
  height: 26px;
}
.toggle[data-mo-size=small] .toggle__input::before {
  width: 18px;
  height: 18px;
}
.toggle[data-mo-size=small] .toggle__input:checked::before {
  transform: translateX(16px);
}
.toggle[data-mo-size=small] .toggle__label {
  margin-top: 2px;
  font-size: var(--font-size-component-medium);
  line-height: 22px;
}
@media (min-width: 768px) {
  .toggle[data-pc-size=medium] .toggle__input {
    width: 52px;
    height: 32px;
  }
  .toggle[data-pc-size=medium] .toggle__input::before {
    width: 24px;
    height: 24px;
  }
  .toggle[data-pc-size=medium] .toggle__input:checked::before {
    transform: translateX(20px);
  }
  .toggle[data-pc-size=medium] .toggle__label {
    margin-top: 3px;
    font-size: var(--font-size-component-large);
    line-height: 26px;
  }
  .toggle[data-pc-size=small] .toggle__input {
    width: 42px;
    height: 26px;
  }
  .toggle[data-pc-size=small] .toggle__input::before {
    width: 18px;
    height: 18px;
  }
  .toggle[data-pc-size=small] .toggle__input:checked::before {
    transform: translateX(16px);
  }
  .toggle[data-pc-size=small] .toggle__label {
    margin-top: 2px;
    font-size: var(--font-size-component-medium);
    line-height: 22px;
  }
}

.tooltip {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: -3.5px;
}

.tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rounded-sm);
  background: transparent;
  color: var(--label-soft);
  cursor: pointer;
}
.tooltip__trigger:hover {
  color: var(--label-normal);
}
.tooltip__trigger:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

/* 2026-07-16 수정 #0716-41 : tooltip 기본 아이콘 info-thick 교체·화살표를 bubble 의사요소로 전환 */
@media (min-width: 768px) {
  .tooltip__trigger[data-pc-size="20"] svg {
    width: 20px;
    height: 20px;
  }
}
.tooltip__bubble {
  display: none;
}

.tooltip__bubble[data-open=true] {
  display: block;
  /* 2026-07-24 수정 #0724-6 : tooltip__bubble 최대폭 240→224 */
  max-width: 224px;
  padding: 6px 12px;
  border-radius: var(--rounded-lg);
  background: var(--fill-ultra);
  color: var(--label-inverse-normal);
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-medium);
  line-height: 19px;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

@media (min-width: 768px) {
  .tooltip__bubble[data-open=true] {
    font-size: var(--font-size-component-medium);
    line-height: 22px;
  }
}
body > .tooltip__bubble {
  position: fixed;
  margin: 0;
}

.tooltip__content {
  display: block;
  /* 2026-07-24 수정 #0724-6 : tooltip 각주 리스트 마커 인라인(∙)·폰트 12 로 변경 */
}
.tooltip__content ul,
.tooltip__content ol {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
  list-style-type: "∙ ";
  font-size: var(--font-size-component-xsmall);
}
.tooltip__content li + li {
  margin-top: 2px;
}

/* 2026-07-16 수정 #0716-41 시작 : tooltip 기본 아이콘 info-thick 교체·화살표를 bubble 의사요소로 전환 */
.tooltip__bubble::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  background-color: var(--fill-ultra);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M14 1C12.7449 1 11.5674 1.60661 10.8379 2.62793L8.2207 6.29102C7.62247 7.12854 6.37753 7.12854 5.7793 6.29102L3.16211 2.62793C2.43259 1.6066 1.25511 1 0 1V0H14V1Z' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M14 1C12.7449 1 11.5674 1.60661 10.8379 2.62793L8.2207 6.29102C7.62247 7.12854 6.37753 7.12854 5.7793 6.29102L3.16211 2.62793C2.43259 1.6066 1.25511 1 0 1V0H14V1Z' fill='black'/%3E%3C/svg%3E") no-repeat center/contain;
}

.tooltip__bubble[data-position=top]::after {
  top: calc(100% + 3px);
  left: var(--tooltip-arrow-x, 50%);
  transform: translate(-50%, -50%);
}

.tooltip__bubble[data-position=bottom]::after {
  top: -3px;
  left: var(--tooltip-arrow-x, 50%);
  transform: translate(-50%, -50%) rotate(180deg);
}

.tooltip__bubble[data-position=left]::after {
  left: calc(100% + 3px);
  top: var(--tooltip-arrow-y, 50%);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.tooltip__bubble[data-position=right]::after {
  left: -3px;
  top: var(--tooltip-arrow-y, 50%);
  transform: translate(-50%, -50%) rotate(90deg);
}

/* #0716-41 끝 */
@media (prefers-reduced-motion: reduce) {
  .tooltip__bubble[data-open=true] {
    transition: none;
  }
}
.tooltip-accent {
  position: relative;
  display: inline-block;
}
.tooltip-accent__bubble {
  position: absolute;
  bottom: calc(100% - 11px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 11px 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97 36.6281' preserveAspectRatio='none'%3E%3Cpath d='M8 0.5H89C93.1421 0.5 96.5 3.85786 96.5 8V23C96.5 27.1421 93.1421 30.5 89 30.5H55.5L55.2354 30.5078C54.007 30.582 52.8677 31.1698 52.0938 32.126L51.9453 32.3203L49.3252 35.6934L49.3135 35.709C48.9147 36.2673 48.0853 36.2673 47.6865 35.709L47.6748 35.6934L45.0547 32.3203H45.0537C44.2297 31.1782 42.9099 30.5 41.5 30.5H8C3.85786 30.5 0.5 27.1421 0.5 23V8C0.5 3.85786 3.85786 0.5 8 0.5Z' fill='white' stroke='url(%23g)'/%3E%3Cdefs%3E%3ClinearGradient id='g' x1='114.947' y1='36.9193' x2='19.6995' y2='20.3247' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23be69ff'/%3E%3Cstop offset='1' stop-color='%233617ce'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  color: var(--brand-blue-normal);
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  filter: drop-shadow(0 3px 8px rgba(78, 50, 211, 0.24));
  filter: none;
}

.header-util {
  display: none;
  background: var(--header-bg-desktop, var(--background-normal));
  /* 2026-07-16 수정 #0716-28 : header-util 스크롤 시 배경색 전환 추가 */
  transition: background-color 0.2s ease;
}
.header-util[data-scrolled] {
  background: var(--header-bg-desktop-scrolled, var(--background-normal));
}
@media (min-width: 768px) {
  .header-util {
    display: block;
  }
}
.header-util__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1024px;
  height: 32px;
  margin: 0 auto;
  padding: 0 var(--p-10);
  list-style: none;
}
.header-util__item {
  display: flex;
  align-items: center;
}
.header-util__item + .header-util__item::before {
  content: "";
  flex: none;
  width: 1px;
  height: 12px;
  margin: 0 var(--gap-1-5);
  background: var(--border-line-normal);
}
.header-util__item a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--p-0-5) var(--p-1-5);
  color: var(--label-soft);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-component-xsmall);
  border-radius: var(--rounded-md);
}
.header-util__item a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.header-util__item a:hover::before {
  opacity: 0.0375;
}
.header-util__item a:active::before, .header-util__item a[aria-expanded=true]::before {
  opacity: 0.09;
}
.header-util__item a:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.header {
  position: sticky;
  background: var(--header-bg-mobile, var(--background-normal));
  transition: background-color 0.2s ease;
}
.header[data-scrolled] {
  background: var(--header-bg-mobile-scrolled, var(--background-normal));
}
@media (min-width: 768px) {
  .header {
    background: var(--header-bg-desktop, var(--background-normal));
  }
  .header[data-scrolled] {
    background: var(--header-bg-desktop-scrolled, var(--background-normal));
  }
}
.header__mobile {
  padding-top: env(safe-area-inset-top);
}
@media (min-width: 768px) {
  .header__mobile {
    display: none;
  }
}
.header__pc {
  display: none;
}
@media (min-width: 768px) {
  .header__pc {
    display: block;
  }
}
.header__inner {
  margin: 0 auto;
}
.header__inner--mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  height: 56px;
  padding: var(--p-2);
}
.header__inner--pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1024px;
  height: 64px;
  padding: var(--p-3) var(--p-7);
}
.header-gnb__leading, .header-gnb__trailing {
  display: flex;
  align-items: center;
}
.header-gnb__leading {
  /* 2026-07-16 수정 #0716-29 : header-gnb 리딩/리스트 간격 gap-8→gap-5 */
  gap: var(--gap-5);
}
.header-gnb__trailing {
  gap: var(--gap-4);
  padding: 0 var(--p-3);
}
.header-gnb__nav {
  display: none;
}
@media (min-width: 860px) {
  .header-gnb__nav {
    display: block;
  }
}
.header-gnb__actions {
  display: flex;
  align-items: center;
}
.header-gnb__list {
  display: flex;
  /* 2026-07-16 수정 #0716-29 : header-gnb 리딩/리스트 간격 gap-8→gap-5 */
  gap: var(--gap-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-gnb__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1-5);
  padding: 7px var(--p-4);
  color: var(--label-normal);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-component-large);
  line-height: 26px;
  border-radius: var(--rounded-lg);
}
.header-gnb__list a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.header-gnb__list a:hover::before {
  opacity: 0.0375;
}
.header-gnb__list a:active::before, .header-gnb__list a[aria-expanded=true]::before {
  opacity: 0.09;
}
.header-gnb__list a:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.header__region {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
.header__region--center {
  justify-content: center;
}
.header__region--end {
  justify-content: flex-end;
  gap: 0;
}
.header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 40px;
  border-radius: var(--rounded-lg);
}
.header__logo:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.header__title {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
}
:where(.header__region, .header-gnb__actions) .btn[data-icon-only] {
  width: 40px;
  height: 40px;
  background: transparent;
  border-color: transparent;
  color: var(--label-normal);
}
:where(.header__region, .header-gnb__actions) .btn[data-icon-only] svg:not([class*=size-]) {
  width: 24px;
  height: 24px;
}
:where(.header__region) .btn-text {
  padding: 9px var(--p-4);
}

.footer {
  display: none;
  border-top: 1px solid var(--border-line-normal);
  background: var(--background-normal);
}
@media (min-width: 768px) {
  .footer {
    display: block;
  }
}
.footer__inner {
  padding-block: var(--p-8) var(--p-16);
  /* 2026-07-16 수정 #0716-26 시작 : footer__inner 데스크탑 블록 간격 top-only 재구성 */
}
@media (min-width: 768px) {
  .footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-areas: "policy family" "info ." "certs ." "copyright sns";
    gap: 0 var(--p-16);
    padding-block: var(--p-12);
  }
}
@media (min-width: 768px) {
  .footer__policy {
    grid-area: policy;
  }
}
.footer__policy-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-1) var(--p-3);
}
@media (min-width: 768px) {
  .footer__policy-list {
    column-gap: var(--p-4);
  }
}
.footer__policy-link {
  color: var(--label-muted);
  font-size: var(--font-size-component-small);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  text-decoration: none;
  border-radius: var(--rounded-sm);
}
.footer__policy-link:hover, .footer__policy-link:active {
  text-decoration: underline;
}
.footer__policy-link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
@media (min-width: 768px) {
  .footer__policy-link {
    font-size: var(--font-size-component-medium);
  }
}
.footer__info {
  margin-top: var(--p-4);
  color: var(--label-soft);
  font-size: var(--font-size-component-xsmall);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .footer__info {
    grid-area: info;
    margin-top: var(--p-4);
  }
}
.footer__info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--p-2);
}
.footer__info-row + .footer__info-row {
  margin-top: 2px;
}
.footer__info-item {
  display: inline-flex;
  align-items: center;
  column-gap: var(--p-1);
  white-space: nowrap;
}
.footer__info-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 7px;
  margin-left: var(--p-2);
  background: var(--border-line-normal);
}
:where(.footer__info) a {
  color: inherit;
  text-decoration: none;
  border-radius: var(--rounded-sm);
}
:where(.footer__info) a:hover, :where(.footer__info) a:active {
  text-decoration: underline;
}
:where(.footer__info) a:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}

.footer__info-link {
  text-decoration: underline;
}
.footer__family {
  width: 180px;
  margin-top: var(--p-8);
}
@media (min-width: 768px) {
  .footer__family {
    grid-area: family;
    margin-top: 0;
  }
}
.footer__family-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  width: 100%;
  height: 38px;
  padding: var(--p-2) var(--p-4);
  border: 0;
  border-radius: var(--rounded-xl);
  background: var(--fill-strong);
  color: var(--label-muted);
  font-family: inherit;
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
}
.footer__family-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.footer__family-trigger:hover::before {
  opacity: 0.0375;
}
.footer__family-trigger:active::before, .footer__family-trigger[aria-expanded=true]::before {
  opacity: 0.09;
}
.footer__family-trigger:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.footer__family-trigger .icon {
  transition: transform var(--transition-base);
}
.footer__family-trigger[aria-expanded=true] .icon {
  transform: rotate(180deg);
}
.footer__family-panel {
  display: none;
}
.footer {
  /* 2026-07-16 수정 #0716-27 시작 : footer__family-panel 팝오버 회색 필·radius·타이포 반영 */
}
body > .popover.footer__family-panel {
  padding: var(--p-2);
  border: 0;
  background: var(--fill-strong);
  box-shadow: none;
}

.footer__family-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: var(--p-1-5) var(--p-2);
  border-radius: var(--rounded-sm);
  color: var(--label-soft);
  font-size: var(--font-size-component-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  text-decoration: none;
}
.footer__family-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.footer__family-link:hover::before {
  opacity: 0.0375;
}
.footer__family-link:active::before, .footer__family-link[aria-expanded=true]::before {
  opacity: 0.09;
}
.footer__family-link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.footer {
  /* #0716-27 끝 */
}
.footer__sns {
  display: flex;
  gap: var(--p-3);
  margin-top: var(--p-4);
}
@media (min-width: 768px) {
  .footer__sns {
    grid-area: sns;
    align-self: end;
    justify-self: end;
    margin-top: 0;
  }
}
.footer__sns-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rounded-full);
  background: var(--fill-strong);
  color: var(--label-soft);
}
.footer__sns-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.footer__sns-link:hover::before {
  opacity: 0.0375;
}
.footer__sns-link:active::before, .footer__sns-link[aria-expanded=true]::before {
  opacity: 0.09;
}
.footer__sns-link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
}
.footer__certs {
  display: flex;
  align-items: center;
  gap: var(--p-4);
  margin-top: var(--p-8);
}
@media (min-width: 768px) {
  .footer__certs {
    grid-area: certs;
    margin-top: var(--p-4);
  }
}
.footer__certs img {
  display: block;
}
.footer {
  /* #0716-26 끝 */
}
.footer__copyright {
  margin-top: var(--p-4);
  color: var(--label-soft);
  font-size: var(--font-size-component-2xsmall);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .footer__copyright {
    grid-area: copyright;
    align-self: end;
  }
}

body {
  --quickmenu-clearance: 0px;
}

body:has(.quickmenu:not([data-hidden=true])) {
  --quickmenu-clearance: 62px;
}
@media (min-width: 768px) {
  body:has(.quickmenu:not([data-hidden=true])) {
    --quickmenu-clearance: 0px;
  }
}

.quickmenu {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--background-elevated-normal);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
  transition: transform 0.25s ease;
}
.quickmenu[data-hidden=true] {
  transform: translateY(100%);
}
@media (prefers-reduced-motion: reduce) {
  .quickmenu {
    transition: none;
  }
}
@media (min-width: 768px) {
  .quickmenu {
    display: none;
  }
}
.quickmenu__list {
  display: flex;
  align-items: stretch;
  height: 62px;
  margin: 0;
  padding: 3px 0 0;
  list-style: none;
}
.quickmenu__item {
  flex: 1 1 0;
  min-width: 0;
}
.quickmenu__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 4px;
  border-radius: var(--rounded-lg);
  color: var(--label-disabled);
  font-size: var(--font-size-component-xsmall);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
}
.quickmenu__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.quickmenu__link:hover::before {
  opacity: 0.0375;
}
.quickmenu__link:active::before, .quickmenu__link[aria-expanded=true]::before {
  opacity: 0.09;
}
.quickmenu__link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.quickmenu__link .icon {
  color: var(--label-normal);
}
.quickmenu__link[aria-current=page] {
  color: var(--label-normal);
  font-weight: var(--font-weight-semibold);
}
.quickmenu__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 860px) {
  .my-layout {
    display: flex;
    gap: var(--gap-24);
    align-items: flex-start;
    padding-top: var(--p-12);
  }
}

.my-sidebar {
  display: none;
}
@media (min-width: 860px) {
  .my-sidebar {
    display: block;
    flex-shrink: 0;
    width: 224px;
  }
}
.my-sidebar__card {
  width: 224px;
  background: var(--fill-normal);
  border-radius: var(--rounded-2xl);
  overflow: hidden;
}
.my-sidebar__heading-wrap {
  padding-inline: var(--gap-3);
}
.my-sidebar__heading {
  display: block;
  margin: 0;
  padding: var(--gap-5) var(--gap-3);
  border-bottom: 1px solid var(--border-line-muted);
  font-size: var(--font-size-title-small);
  font-weight: var(--font-weight-bold);
  color: var(--label-normal);
  line-height: 1.4;
  text-decoration: none;
}
.my-sidebar__heading:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.my-sidebar__group {
  padding: var(--gap-3);
}
.my-sidebar__group-title {
  margin: 0;
  padding: var(--p-2) var(--gap-3);
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--label-disabled);
  line-height: 1.6;
}
.my-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.my-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--p-2) var(--gap-3);
  border-radius: var(--rounded-lg);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-medium);
  color: var(--label-normal);
  line-height: 1.6;
  text-decoration: none;
}
.my-sidebar__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-hyper);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.my-sidebar__link:hover::before {
  opacity: 0.0375;
}
.my-sidebar__link:active::before, .my-sidebar__link[aria-expanded=true]::before {
  opacity: 0.09;
}
.my-sidebar__link:focus-visible {
  outline: var(--stroke-3) solid var(--border-box-heavy);
  outline-offset: 0;
  outline-offset: calc(-1 * var(--stroke-3));
}
.my-sidebar__link[aria-current=page] {
  background: var(--brand-blue-weak);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-blue-normal);
}
.my-sidebar__link[aria-current=page]::before {
  content: none;
}
.my-sidebar__external-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.my-layout__content {
  flex: 1;
  min-width: 0;
}

/* 2026-07-24 수정 #0724-34 : my-layout 콘텐츠 타이틀 분리(__name 신설)·이관 페이지 page-title 어댑터 신설 */
.my-layout__title,
.my-layout__name {
  display: none;
}
@media (min-width: 768px) {
  .my-layout__title,
  .my-layout__name {
    display: block;
    /* 2026-07-16 수정 #0716-31 : my-layout__title 좌측 패딩 제거 */
    margin: var(--p-5) 0 0;
    font-size: var(--font-size-title-xlarge);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
  }
}
@media (min-width: 860px) {
  .my-layout__title,
  .my-layout__name {
    margin-top: 0;
  }
}

.my-layout__content .page-title-band {
  background: transparent;
}

.my-layout__content .page-title {
  padding-block: 0;
}
@media (min-width: 768px) {
  .my-layout__content .page-title {
    margin-top: var(--p-5);
  }
}
@media (min-width: 860px) {
  .my-layout__content .page-title {
    margin-top: 0;
  }
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}