/* ============================================================
   main.css — Tailwind CSS 빌드 진입점
   ------------------------------------------------------------
   1) tokens/*  — 원티드 디자인 시스템 토큰(CSS 변수). 단일 진실 공급원.
                  tailwind.config.js 가 이 변수들을 유틸리티로 노출한다.
   2) base/layout/components/animations — 프로젝트 스타일 레이어
   3) @tailwind — 유틸리티 생성
   ============================================================ */

/* 1) 디자인 토큰 (변수만) — 반드시 @tailwind 앞 */

/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --accent-background-cyan-2: var(--cyan-50-2); /* @kind color */
  --accent-background-cyan: var(--cyan-50); /* @kind color */
  --accent-background-light-blue: var(--light-blue-50); /* @kind color */
  --accent-background-lime: var(--lime-50); /* @kind color */
  --accent-background-pink: var(--pink-50); /* @kind color */
  --accent-background-purple: var(--purple-50); /* @kind color */
  --accent-background-red-orange: var(--red-orange-50); /* @kind color */
  --accent-background-violet-2: var(--violet-50-2); /* @kind color */
  --accent-background-violet: var(--violet-50); /* @kind color */
  --accent-cyan: var(--cyan-50-2); /* @kind color */
  --accent-foreground-blue: var(--blue-45); /* @kind color */
  --accent-foreground-cyan-2: var(--cyan-40-2); /* @kind color */
  --accent-foreground-cyan: var(--cyan-40); /* @kind color */
  --accent-foreground-green: var(--green-40); /* @kind color */
  --accent-foreground-light-blue: var(--light-blue-40); /* @kind color */
  --accent-foreground-lime: var(--lime-37); /* @kind color */
  --accent-foreground-orange: var(--orange-39); /* @kind color */
  --accent-foreground-pink: var(--pink-46); /* @kind color */
  --accent-foreground-purple: var(--purple-40); /* @kind color */
  --accent-foreground-red-orange: var(--red-orange-48); /* @kind color */
  --accent-foreground-red: var(--red-40); /* @kind color */
  --accent-foreground-violet: var(--violet-45); /* @kind color */
  --accent-violet: var(--violet-50-2); /* @kind color */
  --background-elevated-alternative: var(--cool-neutral-99-2); /* @kind color */
  --background-elevated-normal-2: var(--common-100); /* @kind color */
  --background-elevated-normal: var(--common-100-2); /* @kind color */
  --background-normal-alternative-2: var(--cool-neutral-99); /* @kind color */
  --background-normal-alternative-3: var(--cool-neutral-99); /* @kind color */
  --background-normal-alternative: var(--cool-neutral-99-2); /* @kind color */
  --background-normal-normal-2: rgb(255,255,255); /* @kind color */
  --background-normal-normal-3: var(--common-100); /* @kind color */
  --background-normal-normal-4: var(--common-100-2); /* @kind color */
  --background-normal-normal-5: var(--common-100); /* @kind color */
  --background-normal-normal: rgb(255,255,255); /* @kind color */
  --background-transparent-alternative-2: rgba(255,255,255,0.28); /* @kind color */
  --background-transparent-alternative: rgba(255,255,255,0.28); /* @kind color */
  --background-transparent-normal-2: rgba(255,255,255,0.08); /* @kind color */
  --background-transparent-normal: rgba(255,255,255,0.08); /* @kind color */
  --bg-context: "Bright"; /* @kind other */
  --blue-0-2: var(--common-0-3); /* @kind color */
  --blue-0: var(--common-0-2); /* @kind color */
  --blue-100-2: var(--common-100-3); /* @kind color */
  --blue-100: var(--common-100-2); /* @kind color */
  --blue-10: rgb(0,21,54); /* @kind color */
  --blue-20: rgb(0,41,102); /* @kind color */
  --blue-30: rgb(0,62,156); /* @kind color */
  --blue-40: rgb(0,84,209); /* @kind color */
  --blue-45: rgb(0,94,235); /* @kind color */
  --blue-50-2: rgb(0,102,255); /* @kind color */
  --blue-50: rgb(0,102,255); /* @kind color */
  --blue-55: rgb(26,117,255); /* @kind color */
  --blue-60-2: rgb(51,133,255); /* @kind color */
  --blue-60: rgb(51,133,255); /* @kind color */
  --blue-65: rgb(79,149,255); /* @kind color */
  --blue-70: rgb(105,165,255); /* @kind color */
  --blue-80: rgb(158,197,255); /* @kind color */
  --blue-90: rgb(201,222,254); /* @kind color */
  --blue-95-2: rgb(234,242,254); /* @kind color */
  --blue-95: rgb(234,242,254); /* @kind color */
  --blue-99: rgb(247,251,255); /* @kind color */
  --common-0-2: rgb(0,0,0); /* @kind color */
  --common-0-3: rgb(0,0,0); /* @kind color */
  --common-0: rgb(0,0,0); /* @kind color */
  --common-100-2: rgb(255,255,255); /* @kind color */
  --common-100-3: rgb(255,255,255); /* @kind color */
  --common-100-4: rgb(255,255,255); /* @kind color */
  --common-100: rgb(255,255,255); /* @kind color */
  --cool-neutral-0-2: var(--common-0-3); /* @kind color */
  --cool-neutral-0: var(--common-0-2); /* @kind color */
  --cool-neutral-10-2: rgb(23,23,25); /* @kind color */
  --cool-neutral-100-2: var(--common-100-3); /* @kind color */
  --cool-neutral-100: var(--common-100-2); /* @kind color */
  --cool-neutral-10: rgb(23,23,25); /* @kind color */
  --cool-neutral-15-2: rgb(27,28,30); /* @kind color */
  --cool-neutral-15: rgb(27,28,30); /* @kind color */
  --cool-neutral-17-2: rgb(33,34,37); /* @kind color */
  --cool-neutral-17-3: rgb(33,34,37); /* @kind color */
  --cool-neutral-17: rgb(33,34,37); /* @kind color */
  --cool-neutral-20: rgb(41,42,45); /* @kind color */
  --cool-neutral-22-2: rgb(46,47,51); /* @kind color */
  --cool-neutral-22: rgb(46,47,51); /* @kind color */
  --cool-neutral-23: rgb(51,52,56); /* @kind color */
  --cool-neutral-25-2: rgb(55,56,60); /* @kind color */
  --cool-neutral-25: rgb(55,56,60); /* @kind color */
  --cool-neutral-30-2: rgb(70,71,76); /* @kind color */
  --cool-neutral-30: rgb(70,71,76); /* @kind color */
  --cool-neutral-40-2: rgb(90,92,99); /* @kind color */
  --cool-neutral-40-3: rgb(90,92,99); /* @kind color */
  --cool-neutral-40: rgb(90,92,99); /* @kind color */
  --cool-neutral-5-2: rgb(15,15,16); /* @kind color */
  --cool-neutral-50: rgb(112,115,124); /* @kind color */
  --cool-neutral-5: rgb(15,15,16); /* @kind color */
  --cool-neutral-60: rgb(135,138,147); /* @kind color */
  --cool-neutral-70-2: rgb(152,155,162); /* @kind color */
  --cool-neutral-70-3: rgb(152,155,162); /* @kind color */
  --cool-neutral-70: rgb(152,155,162); /* @kind color */
  --cool-neutral-7: rgb(20,20,21); /* @kind color */
  --cool-neutral-80: rgb(174,176,182); /* @kind color */
  --cool-neutral-90: rgb(194,196,200); /* @kind color */
  --cool-neutral-95-2: rgb(219,220,223); /* @kind color */
  --cool-neutral-95: rgb(219,220,223); /* @kind color */
  --cool-neutral-96-2: rgb(225,226,228); /* @kind color */
  --cool-neutral-96: rgb(225,226,228); /* @kind color */
  --cool-neutral-97: rgb(234,235,236); /* @kind color */
  --cool-neutral-98-2: rgb(244,244,245); /* @kind color */
  --cool-neutral-98: rgb(244,244,245); /* @kind color */
  --cool-neutral-99-2: rgb(247,247,248); /* @kind color */
  --cool-neutral-99: rgb(247,247,248); /* @kind color */
  --cyan-0-2: var(--common-0-3); /* @kind color */
  --cyan-0: var(--common-0-2); /* @kind color */
  --cyan-100-2: var(--common-100-3); /* @kind color */
  --cyan-100: var(--common-100-2); /* @kind color */
  --cyan-10: rgb(0,37,43); /* @kind color */
  --cyan-20: rgb(0,72,84); /* @kind color */
  --cyan-30: rgb(0,111,130); /* @kind color */
  --cyan-40-2: rgb(0,152,178); /* @kind color */
  --cyan-40: rgb(0,152,178); /* @kind color */
  --cyan-50-2: rgb(0,189,222); /* @kind color */
  --cyan-50-3: rgb(0,189,222); /* @kind color */
  --cyan-50: rgb(0,189,222); /* @kind color */
  --cyan-60-2: rgb(40,208,237); /* @kind color */
  --cyan-60: rgb(40,208,237); /* @kind color */
  --cyan-70: rgb(87,223,247); /* @kind color */
  --cyan-80: rgb(138,237,255); /* @kind color */
  --cyan-90: rgb(181,244,255); /* @kind color */
  --cyan-95: rgb(222,250,255); /* @kind color */
  --cyan-99: rgb(247,254,255); /* @kind color */
  --deprecated-platform-ios-navigation1-3: rgba(255,255,255,0.7); /* @kind color */
  --deprecated-platform-ios-navigation2-3: rgb(255,255,255); /* @kind color */
  --deprecated-platform-ios-navigation3-3: rgba(0,0,0,0); /* @kind color */
  --fill-alternative-2: rgba(112,115,124,0.05); /* @kind color */
  --fill-alternative-3: rgba(112,115,124,0.05); /* @kind color */
  --fill-alternative: rgba(112,115,124,0.05); /* @kind color */
  --fill-normal-2: rgba(112,115,124,0.08); /* @kind color */
  --fill-normal-3: rgba(112,115,124,0.08); /* @kind color */
  --fill-normal-4: rgba(112,115,124,0.08); /* @kind color */
  --fill-normal: rgba(112,115,124,0.08); /* @kind color */
  --fill-strong-2: rgba(112,115,124,0.16); /* @kind color */
  --fill-strong-3: rgba(112,115,124,0.16); /* @kind color */
  --fill-strong: rgba(112,115,124,0.16); /* @kind color */
  --green-0-2: var(--common-0-3); /* @kind color */
  --green-0: var(--common-0-2); /* @kind color */
  --green-100-2: var(--common-100-3); /* @kind color */
  --green-100: var(--common-100-2); /* @kind color */
  --green-10: rgb(0,36,12); /* @kind color */
  --green-20: rgb(0,69,23); /* @kind color */
  --green-30: rgb(0,110,37); /* @kind color */
  --green-40: rgb(0,150,50); /* @kind color */
  --green-50-2: rgb(0,191,64); /* @kind color */
  --green-50: rgb(0,191,64); /* @kind color */
  --green-60-2: rgb(30,212,90); /* @kind color */
  --green-60: rgb(30,212,90); /* @kind color */
  --green-70: rgb(73,229,125); /* @kind color */
  --green-80: rgb(125,245,165); /* @kind color */
  --green-90: rgb(172,252,199); /* @kind color */
  --green-95-2: rgb(217,255,230); /* @kind color */
  --green-95: rgb(217,255,230); /* @kind color */
  --green-99: rgb(242,255,246); /* @kind color */
  --height-popup-max: 760; /* @kind spacing */
  --initial-black: rgb(0,0,0); /* @kind color */
  --initial-white: rgb(255,255,255); /* @kind color */
  --interaction-disable-2: var(--cool-neutral-98-2); /* @kind color */
  --interaction-disable-3: var(--cool-neutral-98-2); /* @kind color */
  --interaction-disable: var(--cool-neutral-98); /* @kind color */
  --interaction-inactive-2: var(--cool-neutral-70-3); /* @kind color */
  --interaction-inactive: var(--cool-neutral-70); /* @kind color */
  --inverse-background-2: var(--cool-neutral-15-2); /* @kind color */
  --inverse-background-3: var(--cool-neutral-15); /* @kind color */
  --inverse-background: var(--cool-neutral-15); /* @kind color */
  --inverse-label-2: var(--cool-neutral-99-2); /* @kind color */
  --inverse-label-3: var(--cool-neutral-99); /* @kind color */
  --inverse-label: var(--cool-neutral-99); /* @kind color */
  --inverse-primary: var(--blue-60); /* @kind color */
  --ios-accent-primary: rgb(0,136,255); /* @kind color */
  --ios-backgrounds-primary: rgb(255,255,255); /* @kind color */
  --ios-colors-blue: rgb(0,122,255); /* @kind color */
  --ios-colors-green: rgb(52,199,89); /* @kind color */
  --ios-colors-red: rgb(255,59,48); /* @kind color */
  --ios-fills-quaternary: rgba(116,116,128,0.08); /* @kind color */
  --ios-fills-secondary: rgba(120,120,128,0.16); /* @kind color */
  --ios-grays-white: rgb(255,255,255); /* @kind color */
  --ios-labels-primary: rgb(0,0,0); /* @kind color */
  --ios-labelsvibrant-primary1-2: rgb(0,0,0); /* @kind color */
  --ios-labelsvibrant-primary2-2: rgba(0,0,0,0); /* @kind color */
  --ios-labelsvibrant-tertiary1-2: rgba(0,0,0,0.25); /* @kind color */
  --ios-labelsvibrant-tertiary2-2: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular1-4-overlay: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular2-4-darken: rgba(0,0,0,0.03); /* @kind color */
  --ios-materials-regular3-4-colordodge: rgb(77,77,77); /* @kind color */
  --ios-materials-regular4-4: rgba(169,169,169,0.8); /* @kind color */
  --ios-other-navigation-label1-3-softlight: rgb(177,177,177); /* @kind color */
  --ios-other-navigation-label2-3: rgba(0,0,0,0.5); /* @kind color */
  --ios-other-navigation-label3-3-screen: rgba(0,0,0,0); /* @kind color */
  --ios-separators-nonopaque: rgba(60,60,67,0.36); /* @kind color */
  --label-alternative-2: rgba(55,56,60,0.61); /* @kind color */
  --label-alternative-3: rgba(55,56,60,0.61); /* @kind color */
  --label-alternative: rgba(55,56,60,0.61); /* @kind color */
  --label-assistive-2: rgba(55,56,60,0.28); /* @kind color */
  --label-assistive-3: rgba(55,56,60,0.28); /* @kind color */
  --label-assistive: rgba(55,56,60,0.28); /* @kind color */
  --label-disable-2: rgba(55,56,60,0.16); /* @kind color */
  --label-disable-3: rgba(55,56,60,0.16); /* @kind color */
  --label-disable: rgba(55,56,60,0.16); /* @kind color */
  --label-neutral-2: rgba(46,47,51,0.88); /* @kind color */
  --label-neutral-3: rgba(46,47,51,0.88); /* @kind color */
  --label-neutral: rgba(46,47,51,0.88); /* @kind color */
  --label-normal-2: rgb(23,23,23); /* @kind color */
  --label-normal-3: var(--cool-neutral-10); /* @kind color */
  --label-normal-4: var(--cool-neutral-10-2); /* @kind color */
  --label-normal-5: var(--cool-neutral-10); /* @kind color */
  --label-normal: rgb(23,23,23); /* @kind color */
  --label-strong-2: var(--common-0-2); /* @kind color */
  --label-strong-3: var(--common-0); /* @kind color */
  --label-strong: var(--common-0); /* @kind color */
  --labels-vibrant-controls-primary: rgb(64,64,64); /* @kind color */
  --light-blue-0-2: var(--common-0-3); /* @kind color */
  --light-blue-0: var(--common-0-2); /* @kind color */
  --light-blue-100-2: var(--common-100-3); /* @kind color */
  --light-blue-100: var(--common-100-2); /* @kind color */
  --light-blue-10: rgb(0,33,48); /* @kind color */
  --light-blue-20: rgb(0,66,97); /* @kind color */
  --light-blue-30: rgb(0,103,150); /* @kind color */
  --light-blue-40: rgb(0,141,207); /* @kind color */
  --light-blue-50: rgb(0,174,255); /* @kind color */
  --light-blue-60: rgb(61,194,255); /* @kind color */
  --light-blue-70: rgb(112,210,255); /* @kind color */
  --light-blue-80: rgb(161,225,255); /* @kind color */
  --light-blue-90: rgb(196,236,254); /* @kind color */
  --light-blue-95: rgb(229,246,254); /* @kind color */
  --light-blue-99: rgb(247,253,255); /* @kind color */
  --lime-0-2: var(--common-0-3); /* @kind color */
  --lime-0: var(--common-0-2); /* @kind color */
  --lime-100-2: var(--common-100-3); /* @kind color */
  --lime-100: var(--common-100-2); /* @kind color */
  --lime-10: rgb(17,41,0); /* @kind color */
  --lime-20: rgb(34,82,0); /* @kind color */
  --lime-30: rgb(52,125,0); /* @kind color */
  --lime-37: rgb(66,158,0); /* @kind color */
  --lime-40: rgb(72,173,0); /* @kind color */
  --lime-50: rgb(88,207,4); /* @kind color */
  --lime-60: rgb(107,224,22); /* @kind color */
  --lime-70: rgb(136,240,62); /* @kind color */
  --lime-80: rgb(174,247,121); /* @kind color */
  --lime-90: rgb(204,252,169); /* @kind color */
  --lime-95: rgb(230,255,212); /* @kind color */
  --lime-99: rgb(248,255,242); /* @kind color */
  --line-normal-alternative-2: rgba(112,115,124,0.08); /* @kind color */
  --line-normal-alternative-3: rgba(112,115,124,0.08); /* @kind color */
  --line-normal-alternative: rgba(112,115,124,0.08); /* @kind color */
  --line-normal-neutral-2: rgba(112,115,124,0.16); /* @kind color */
  --line-normal-neutral-3: rgba(112,115,124,0.16); /* @kind color */
  --line-normal-neutral: rgba(112,115,124,0.16); /* @kind color */
  --line-normal-normal-2: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-normal-3: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-normal: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-strong-2: rgba(112,115,124,0.52); /* @kind color */
  --line-normal-strong: rgba(112,115,124,0.52); /* @kind color */
  --line-solid-alternative-2: var(--cool-neutral-98-2); /* @kind color */
  --line-solid-alternative: var(--cool-neutral-98); /* @kind color */
  --line-solid-neutral: var(--cool-neutral-97); /* @kind color */
  --line-solid-normal-2: var(--cool-neutral-96-2); /* @kind color */
  --line-solid-normal: var(--cool-neutral-96); /* @kind color */
  --line-solid-strong: var(--cool-neutral-80); /* @kind color */
  --macos-backgrounds-primary: rgb(255,255,255); /* @kind color */
  --macos-control-bar-title: rgba(250,250,250,0.8); /* @kind color */
  --macos-fills-virant-primary1-2: rgb(217,217,217); /* @kind color */
  --macos-fills-virant-primary2-2: rgba(0,0,0,0); /* @kind color */
  --macos-separators-vibrant1-2: rgba(0,0,0,0.1); /* @kind color */
  --macos-separators-vibrant2-2: rgba(0,0,0,0); /* @kind color */
  --macos-text-secondary: rgba(0,0,0,0.5); /* @kind color */
  --macos-text-tertiary: rgba(0,0,0,0.25); /* @kind color */
  --macos-textvibrant-secondary1-2: rgb(128,128,128); /* @kind color */
  --macos-textvibrant-secondary2-2: rgba(0,0,0,0); /* @kind color */
  --macos-textvibrant-tertiary1-2: rgb(191,191,191); /* @kind color */
  --macos-textvibrant-tertiary2-2: rgba(0,0,0,0); /* @kind color */
  --margin-action-contents-bottom: 4; /* @kind spacing */
  --margin-action-normal-horizontal: 20; /* @kind spacing */
  --margin-action-normal-vertical: 20; /* @kind spacing */
  --margin-content-content: 20; /* @kind spacing */
  --margin-navigation-horizontal: 16; /* @kind spacing */
  --margin-navigation-normal: 20; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 12; /* @kind spacing */
  --material-background-onbackground: rgb(27,27,31); /* @kind color */
  --material-dimmer: rgba(23,23,25,0.52); /* @kind color */
  --material-outline-outline: rgb(116,117,127); /* @kind color */
  --mode-2: "Light"; /* @kind other */
  --mode: "Light"; /* @kind other */
  --neutral-0-2: var(--common-0-3); /* @kind color */
  --neutral-0: var(--common-0-2); /* @kind color */
  --neutral-100-2: var(--common-100-3); /* @kind color */
  --neutral-100: var(--common-100-2); /* @kind color */
  --neutral-10: rgb(23,23,23); /* @kind color */
  --neutral-15: rgb(28,28,28); /* @kind color */
  --neutral-20: rgb(42,42,42); /* @kind color */
  --neutral-22: rgb(48,48,48); /* @kind color */
  --neutral-30: rgb(71,71,71); /* @kind color */
  --neutral-40: rgb(92,92,92); /* @kind color */
  --neutral-50: rgb(115,115,115); /* @kind color */
  --neutral-5: rgb(15,15,15); /* @kind color */
  --neutral-60: rgb(138,138,138); /* @kind color */
  --neutral-70: rgb(155,155,155); /* @kind color */
  --neutral-80: rgb(176,176,176); /* @kind color */
  --neutral-90: rgb(196,196,196); /* @kind color */
  --neutral-95: rgb(220,220,220); /* @kind color */
  --neutral-99: rgb(247,247,247); /* @kind color */
  --opacity-0-2: 0; /* @kind other */
  --opacity-0: 0; /* @kind other */
  --opacity-100-2: 100; /* @kind other */
  --opacity-100-3: 100; /* @kind other */
  --opacity-100: 100; /* @kind other */
  --opacity-12-2: 12; /* @kind other */
  --opacity-12-3: 12; /* @kind other */
  --opacity-12: 12; /* @kind other */
  --opacity-16-2: 16; /* @kind other */
  --opacity-16-3: 16; /* @kind other */
  --opacity-16: 16; /* @kind other */
  --opacity-22-2: 22; /* @kind other */
  --opacity-22-3: 22; /* @kind other */
  --opacity-22: 22; /* @kind other */
  --opacity-28-2: 28; /* @kind other */
  --opacity-28-3: 28; /* @kind other */
  --opacity-28: 28; /* @kind other */
  --opacity-35-2: 35; /* @kind other */
  --opacity-35-3: 35; /* @kind other */
  --opacity-35: 35; /* @kind other */
  --opacity-43-2: 43; /* @kind other */
  --opacity-43-3: 43; /* @kind other */
  --opacity-43: 43; /* @kind other */
  --opacity-5-2: 5; /* @kind other */
  --opacity-5-3: 5; /* @kind other */
  --opacity-52-2: 52; /* @kind other */
  --opacity-52-3: 52; /* @kind other */
  --opacity-52: 52; /* @kind other */
  --opacity-5: 5; /* @kind other */
  --opacity-61-2: 61; /* @kind other */
  --opacity-61-3: 61; /* @kind other */
  --opacity-61: 61; /* @kind other */
  --opacity-74-2: 74; /* @kind other */
  --opacity-74-3: 74; /* @kind other */
  --opacity-74: 74; /* @kind other */
  --opacity-8-2: 8; /* @kind other */
  --opacity-8-3: 8; /* @kind other */
  --opacity-88-2: 88; /* @kind other */
  --opacity-88-3: 88; /* @kind other */
  --opacity-88: 88; /* @kind other */
  --opacity-8: 8; /* @kind other */
  --opacity-97-2: 97; /* @kind other */
  --opacity-97-3: 97; /* @kind other */
  --opacity-97: 97; /* @kind other */
  --orange-0-2: var(--common-0-3); /* @kind color */
  --orange-0: var(--common-0-2); /* @kind color */
  --orange-100-2: var(--common-100-3); /* @kind color */
  --orange-100: var(--common-100-2); /* @kind color */
  --orange-10: rgb(54,30,0); /* @kind color */
  --orange-20: rgb(102,58,0); /* @kind color */
  --orange-30: rgb(156,88,0); /* @kind color */
  --orange-39: rgb(209,118,0); /* @kind color */
  --orange-40: rgb(212,120,0); /* @kind color */
  --orange-50: rgb(255,146,0); /* @kind color */
  --orange-60: rgb(255,169,56); /* @kind color */
  --orange-70: rgb(255,192,110); /* @kind color */
  --orange-80: rgb(255,212,156); /* @kind color */
  --orange-90: rgb(254,230,198); /* @kind color */
  --orange-95: rgb(254,244,230); /* @kind color */
  --orange-99: rgb(255,252,247); /* @kind color */
  --padding-horizontal: 16; /* @kind spacing */
  --padding-vertical: 4; /* @kind spacing */
  --pink-0-2: var(--common-0-3); /* @kind color */
  --pink-0: var(--common-0-2); /* @kind color */
  --pink-100-2: var(--common-100-3); /* @kind color */
  --pink-100: var(--common-100-2); /* @kind color */
  --pink-10: rgb(61,1,51); /* @kind color */
  --pink-20: rgb(115,5,96); /* @kind color */
  --pink-30: rgb(168,22,144); /* @kind color */
  --pink-40: rgb(211,49,184); /* @kind color */
  --pink-46: rgb(232,70,205); /* @kind color */
  --pink-50: rgb(245,83,218); /* @kind color */
  --pink-60: rgb(250,115,227); /* @kind color */
  --pink-70: rgb(255,148,237); /* @kind color */
  --pink-80: rgb(255,184,243); /* @kind color */
  --pink-90: rgb(254,211,247); /* @kind color */
  --pink-95: rgb(254,236,251); /* @kind color */
  --pink-99: rgb(255,250,254); /* @kind color */
  --primary-heavy: var(--blue-40); /* @kind color */
  --primary-normal-2: rgb(51,102,255); /* @kind color */
  --primary-normal-3: var(--blue-50); /* @kind color */
  --primary-normal-4: var(--blue-50-2); /* @kind color */
  --primary-normal-5: var(--blue-50-2); /* @kind color */
  --primary-normal: rgb(51,102,255); /* @kind color */
  --primary-strong: var(--blue-45); /* @kind color */
  --purple-0-2: var(--common-0-3); /* @kind color */
  --purple-0: var(--common-0-2); /* @kind color */
  --purple-100-2: var(--common-100-3); /* @kind color */
  --purple-100: var(--common-100-2); /* @kind color */
  --purple-10: rgb(41,2,71); /* @kind color */
  --purple-20: rgb(88,10,125); /* @kind color */
  --purple-30: rgb(134,28,184); /* @kind color */
  --purple-40: rgb(173,54,227); /* @kind color */
  --purple-50: rgb(203,89,255); /* @kind color */
  --purple-60: rgb(212,120,255); /* @kind color */
  --purple-70: rgb(222,150,255); /* @kind color */
  --purple-80: rgb(233,186,255); /* @kind color */
  --purple-90: rgb(242,214,255); /* @kind color */
  --purple-95: rgb(249,237,255); /* @kind color */
  --purple-99: rgb(254,251,255); /* @kind color */
  --radius-2: 14; /* @kind radius */
  --radius-3: 14; /* @kind radius */
  --radius: 12; /* @kind radius */
  --red-0-2: var(--common-0-3); /* @kind color */
  --red-0: var(--common-0-2); /* @kind color */
  --red-100-2: var(--common-100-3); /* @kind color */
  --red-100: var(--common-100-2); /* @kind color */
  --red-10: rgb(59,1,1); /* @kind color */
  --red-20: rgb(115,3,3); /* @kind color */
  --red-30: rgb(176,12,12); /* @kind color */
  --red-40: rgb(229,34,34); /* @kind color */
  --red-50-2: rgb(255,66,66); /* @kind color */
  --red-50: rgb(255,66,66); /* @kind color */
  --red-60-2: rgb(255,99,99); /* @kind color */
  --red-60: rgb(255,99,99); /* @kind color */
  --red-70: rgb(255,140,140); /* @kind color */
  --red-80: rgb(255,181,181); /* @kind color */
  --red-90: rgb(254,213,213); /* @kind color */
  --red-95-2: rgb(254,236,236); /* @kind color */
  --red-95: rgb(254,236,236); /* @kind color */
  --red-99: rgb(255,250,250); /* @kind color */
  --red-orange-0-2: var(--common-0-3); /* @kind color */
  --red-orange-0: var(--common-0-2); /* @kind color */
  --red-orange-100-2: var(--common-100-3); /* @kind color */
  --red-orange-100: var(--common-100-2); /* @kind color */
  --red-orange-10: rgb(41,15,0); /* @kind color */
  --red-orange-20: rgb(89,33,0); /* @kind color */
  --red-orange-30: rgb(145,53,0); /* @kind color */
  --red-orange-40: rgb(201,74,0); /* @kind color */
  --red-orange-48: rgb(245,90,0); /* @kind color */
  --red-orange-50: rgb(255,94,0); /* @kind color */
  --red-orange-60: rgb(255,123,46); /* @kind color */
  --red-orange-70: rgb(255,155,97); /* @kind color */
  --red-orange-80: rgb(255,189,150); /* @kind color */
  --red-orange-90: rgb(254,217,196); /* @kind color */
  --red-orange-95-2: rgb(254,238,229); /* @kind color */
  --red-orange-95: rgb(254,238,229); /* @kind color */
  --red-orange-99: rgb(255,250,247); /* @kind color */
  --static-black-2: var(--common-0-2); /* @kind color */
  --static-black-3: var(--common-0); /* @kind color */
  --static-black: var(--common-0); /* @kind color */
  --static-white-2: var(--common-100); /* @kind color */
  --static-white-3: var(--common-100-2); /* @kind color */
  --static-white-4: var(--common-100); /* @kind color */
  --static-white-5: rgb(255,255,255); /* @kind color */
  --static-white: rgb(255,255,255); /* @kind color */
  --status-cautionary: var(--orange-50); /* @kind color */
  --status-negative-2: var(--red-50-2); /* @kind color */
  --status-negative-3: var(--red-50-2); /* @kind color */
  --status-negative: var(--red-50); /* @kind color */
  --status-positive-2: var(--green-50-2); /* @kind color */
  --status-positive-3: var(--green-50-2); /* @kind color */
  --status-positive: var(--green-50); /* @kind color */
  --value-margin-platform-2: 20; /* @kind spacing */
  --value-margin-platform: 20; /* @kind spacing */
  --value-padding-card-tiny: 4; /* @kind spacing */
  --value-space-gap-normal: 16; /* @kind spacing */
  --value-width-viewport-lg: 1100; /* @kind spacing */
  --value-width-viewport-xl: 1440; /* @kind spacing */
  --variant-platform: "Mobile"; /* @kind other */
  --violet-0-2: var(--common-0-3); /* @kind color */
  --violet-0: var(--common-0-2); /* @kind color */
  --violet-100-2: var(--common-100-3); /* @kind color */
  --violet-100: var(--common-100-2); /* @kind color */
  --violet-10: rgb(17,2,77); /* @kind color */
  --violet-20: rgb(35,9,143); /* @kind color */
  --violet-30: rgb(58,22,201); /* @kind color */
  --violet-40: rgb(79,41,229); /* @kind color */
  --violet-45: rgb(91,55,237); /* @kind color */
  --violet-50-2: rgb(101,65,242); /* @kind color */
  --violet-50: rgb(101,65,242); /* @kind color */
  --violet-60-2: rgb(125,94,247); /* @kind color */
  --violet-60: rgb(125,94,247); /* @kind color */
  --violet-70: rgb(158,134,252); /* @kind color */
  --violet-80: rgb(192,176,255); /* @kind color */
  --violet-90: rgb(219,211,254); /* @kind color */
  --violet-95-2: rgb(240,236,254); /* @kind color */
  --violet-95: rgb(240,236,254); /* @kind color */
  --violet-99: rgb(251,250,255); /* @kind color */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 400; /* @kind spacing */
}

:root[data-theme="dark"], .dark {
  --accent-background-cyan-2: var(--cyan-60-2); /* @kind color */
  --accent-background-cyan: var(--cyan-60); /* @kind color */
  --accent-background-light-blue: var(--light-blue-60); /* @kind color */
  --accent-background-lime: var(--lime-60); /* @kind color */
  --accent-background-pink: var(--pink-60); /* @kind color */
  --accent-background-purple: var(--purple-60); /* @kind color */
  --accent-background-red-orange: var(--red-orange-60); /* @kind color */
  --accent-background-violet-2: var(--violet-60-2); /* @kind color */
  --accent-background-violet: var(--violet-60); /* @kind color */
  --accent-cyan: var(--cyan-60-2); /* @kind color */
  --accent-foreground-blue: var(--blue-65); /* @kind color */
  --accent-foreground-cyan-2: var(--cyan-50-2); /* @kind color */
  --accent-foreground-cyan: var(--cyan-50); /* @kind color */
  --accent-foreground-green: var(--green-60); /* @kind color */
  --accent-foreground-light-blue: var(--light-blue-50); /* @kind color */
  --accent-foreground-lime: var(--lime-50); /* @kind color */
  --accent-foreground-orange: var(--orange-50); /* @kind color */
  --accent-foreground-pink: var(--pink-60); /* @kind color */
  --accent-foreground-purple: var(--purple-60); /* @kind color */
  --accent-foreground-red-orange: var(--red-orange-60); /* @kind color */
  --accent-foreground-red: var(--red-60); /* @kind color */
  --accent-foreground-violet: var(--violet-70); /* @kind color */
  --accent-violet: var(--violet-60-2); /* @kind color */
  --background-elevated-alternative: var(--cool-neutral-7); /* @kind color */
  --background-elevated-normal-2: var(--cool-neutral-17-2); /* @kind color */
  --background-elevated-normal: var(--cool-neutral-17); /* @kind color */
  --background-normal-alternative-2: var(--cool-neutral-5-2); /* @kind color */
  --background-normal-alternative-3: var(--cool-neutral-5-2); /* @kind color */
  --background-normal-alternative: var(--cool-neutral-5); /* @kind color */
  --background-normal-normal-2: rgb(27,28,30); /* @kind color */
  --background-normal-normal-3: var(--cool-neutral-15); /* @kind color */
  --background-normal-normal-4: var(--cool-neutral-15-2); /* @kind color */
  --background-normal-normal-5: var(--cool-neutral-15); /* @kind color */
  --background-normal-normal: rgb(27,28,30); /* @kind color */
  --background-transparent-alternative-2: rgba(33,34,37,0.61); /* @kind color */
  --background-transparent-alternative: rgba(33,34,37,0.61); /* @kind color */
  --background-transparent-normal-2: rgba(33,34,37,0.61); /* @kind color */
  --background-transparent-normal: rgba(33,34,37,0.61); /* @kind color */
  --deprecated-platform-ios-navigation1-3: rgba(255,255,255,0.07); /* @kind color */
  --deprecated-platform-ios-navigation2-3: rgba(255,255,255,0.35); /* @kind color */
  --deprecated-platform-ios-navigation3-3: rgba(0,0,0,0.7); /* @kind color */
  --fill-alternative-2: rgba(112,115,124,0.12); /* @kind color */
  --fill-alternative-3: rgba(112,115,124,0.12); /* @kind color */
  --fill-alternative: rgba(112,115,124,0.12); /* @kind color */
  --fill-normal-2: rgba(112,115,124,0.22); /* @kind color */
  --fill-normal-3: rgba(112,115,124,0.22); /* @kind color */
  --fill-normal-4: rgba(112,115,124,0.22); /* @kind color */
  --fill-normal: rgba(112,115,124,0.22); /* @kind color */
  --fill-strong-2: rgba(112,115,124,0.28); /* @kind color */
  --fill-strong-3: rgba(112,115,124,0.28); /* @kind color */
  --fill-strong: rgba(112,115,124,0.28); /* @kind color */
  --initial-black: rgb(0,0,0); /* @kind color */
  --initial-white: rgb(255,255,255); /* @kind color */
  --interaction-disable-2: var(--cool-neutral-22-2); /* @kind color */
  --interaction-disable-3: var(--cool-neutral-22-2); /* @kind color */
  --interaction-disable: var(--cool-neutral-22); /* @kind color */
  --interaction-inactive-2: var(--cool-neutral-40-3); /* @kind color */
  --interaction-inactive: var(--cool-neutral-40); /* @kind color */
  --inverse-background-2: var(--common-100-2); /* @kind color */
  --inverse-background-3: var(--common-100); /* @kind color */
  --inverse-background: var(--common-100); /* @kind color */
  --inverse-label-2: var(--cool-neutral-10-2); /* @kind color */
  --inverse-label-3: var(--cool-neutral-10); /* @kind color */
  --inverse-label: var(--cool-neutral-10); /* @kind color */
  --inverse-primary: var(--blue-50); /* @kind color */
  --ios-accent-primary: rgb(0,145,255); /* @kind color */
  --ios-backgrounds-primary: rgb(0,0,0); /* @kind color */
  --ios-colors-blue: rgb(10,132,255); /* @kind color */
  --ios-colors-green: rgb(48,209,88); /* @kind color */
  --ios-colors-red: rgb(255,69,58); /* @kind color */
  --ios-fills-quaternary: rgba(116,116,128,0.18); /* @kind color */
  --ios-fills-secondary: rgba(120,120,128,0.32); /* @kind color */
  --ios-grays-white: rgb(255,255,255); /* @kind color */
  --ios-labels-primary: rgb(255,255,255); /* @kind color */
  --ios-labelsvibrant-primary1-2: rgba(0,0,0,0); /* @kind color */
  --ios-labelsvibrant-primary2-2: rgb(255,255,255); /* @kind color */
  --ios-labelsvibrant-tertiary1-2: rgba(0,0,0,0); /* @kind color */
  --ios-labelsvibrant-tertiary2-2: rgba(255,255,255,0.25); /* @kind color */
  --ios-materials-regular1-4-overlay: rgb(95,95,95); /* @kind color */
  --ios-materials-regular2-4-darken: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular3-4-colordodge: rgba(0,0,0,0); /* @kind color */
  --ios-materials-regular4-4: rgba(59,59,59,0.7); /* @kind color */
  --ios-other-navigation-label1-3-softlight: rgba(0,0,0,0); /* @kind color */
  --ios-other-navigation-label2-3: rgba(127,127,127,0.85); /* @kind color */
  --ios-other-navigation-label3-3-screen: rgb(127,127,127); /* @kind color */
  --ios-separators-nonopaque: rgba(84,84,88,0.65); /* @kind color */
  --label-alternative-2: rgba(174,176,182,0.61); /* @kind color */
  --label-alternative-3: rgba(174,176,182,0.61); /* @kind color */
  --label-alternative: rgba(174,176,182,0.61); /* @kind color */
  --label-assistive-2: rgba(174,176,182,0.28); /* @kind color */
  --label-assistive-3: rgba(174,176,182,0.28); /* @kind color */
  --label-assistive: rgba(174,176,182,0.28); /* @kind color */
  --label-disable-2: rgba(152,155,162,0.16); /* @kind color */
  --label-disable-3: rgba(152,155,162,0.16); /* @kind color */
  --label-disable: rgba(152,155,162,0.16); /* @kind color */
  --label-neutral-2: rgba(194,196,200,0.88); /* @kind color */
  --label-neutral-3: rgba(194,196,200,0.88); /* @kind color */
  --label-neutral: rgba(194,196,200,0.88); /* @kind color */
  --label-normal-2: rgb(247,247,247); /* @kind color */
  --label-normal-3: var(--cool-neutral-99); /* @kind color */
  --label-normal-4: var(--cool-neutral-99-2); /* @kind color */
  --label-normal-5: var(--cool-neutral-99); /* @kind color */
  --label-normal: rgb(247,247,247); /* @kind color */
  --label-strong-2: var(--common-100-2); /* @kind color */
  --label-strong-3: var(--common-100); /* @kind color */
  --label-strong: var(--common-100); /* @kind color */ /* @kind color */
  --labels-vibrant-controls-primary: rgb(191,191,191); /* @kind color */
  --line-normal-alternative-2: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-alternative-3: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-alternative: rgba(112,115,124,0.22); /* @kind color */
  --line-normal-neutral-2: rgba(112,115,124,0.28); /* @kind color */
  --line-normal-neutral-3: rgba(112,115,124,0.28); /* @kind color */
  --line-normal-neutral: rgba(112,115,124,0.28); /* @kind color */
  --line-normal-normal-2: rgba(112,115,124,0.32); /* @kind color */
  --line-normal-normal-3: rgba(112,115,124,0.32); /* @kind color */
  --line-normal-normal: rgba(112,115,124,0.32); /* @kind color */
  --line-normal-strong-2: rgba(194,196,200,0.52); /* @kind color */
  --line-normal-strong: rgba(194,196,200,0.52); /* @kind color */
  --line-solid-alternative-2: var(--cool-neutral-22-2); /* @kind color */
  --line-solid-alternative: var(--cool-neutral-22); /* @kind color */
  --line-solid-neutral: var(--cool-neutral-23); /* @kind color */
  --line-solid-normal-2: var(--cool-neutral-25-2); /* @kind color */
  --line-solid-normal: var(--cool-neutral-25); /* @kind color */
  --line-solid-strong: var(--cool-neutral-50); /* @kind color */
  --macos-backgrounds-primary: rgb(0,0,0); /* @kind color */
  --macos-control-bar-title: rgba(60,60,60,0.8); /* @kind color */
  --macos-fills-virant-primary1-2: rgba(0,0,0,0); /* @kind color */
  --macos-fills-virant-primary2-2: rgb(36,36,36); /* @kind color */
  --macos-separators-vibrant1-2: rgba(0,0,0,0); /* @kind color */
  --macos-separators-vibrant2-2: rgba(255,255,255,0.1); /* @kind color */
  --macos-text-secondary: rgba(255,255,255,0.55); /* @kind color */
  --macos-text-tertiary: rgba(255,255,255,0.25); /* @kind color */
  --macos-textvibrant-secondary1-2: rgba(0,0,0,0); /* @kind color */
  --macos-textvibrant-secondary2-2: rgb(124,124,124); /* @kind color */
  --macos-textvibrant-tertiary1-2: rgba(0,0,0,0); /* @kind color */
  --macos-textvibrant-tertiary2-2: rgb(65,65,65); /* @kind color */
  --material-background-onbackground: rgb(228,226,230); /* @kind color */
  --material-dimmer: rgba(23,23,25,0.74); /* @kind color */
  --material-outline-outline: rgb(143,144,154); /* @kind color */
  --mode-2: "Dark"; /* @kind other */
  --mode-2: "IC - Dark"; /* @kind other */
  --mode: "Dark"; /* @kind other */
  --primary-heavy: var(--blue-50); /* @kind color */
  --primary-normal-2: rgb(91,132,255); /* @kind color */
  --primary-normal-3: var(--blue-60); /* @kind color */
  --primary-normal-4: var(--blue-60-2); /* @kind color */
  --primary-normal-5: var(--blue-60-2); /* @kind color */
  --primary-normal: rgb(91,132,255); /* @kind color */
  --primary-strong: var(--blue-55); /* @kind color */
  --static-black-2: var(--common-0-2); /* @kind color */
  --static-black-3: var(--common-0); /* @kind color */
  --static-black: var(--common-0); /* @kind color */
  --static-white-2: var(--common-100); /* @kind color */
  --static-white-3: var(--common-100-2); /* @kind color */
  --static-white-4: var(--common-100); /* @kind color */
  --static-white-5: rgb(255,255,255); /* @kind color */
  --static-white: rgb(255,255,255); /* @kind color */
  --status-cautionary: var(--orange-60); /* @kind color */
  --status-negative-2: var(--red-60-2); /* @kind color */
  --status-negative-3: var(--red-60-2); /* @kind color */
  --status-negative: var(--red-60); /* @kind color */
  --status-positive-2: var(--green-60-2); /* @kind color */
  --status-positive-3: var(--green-60-2); /* @kind color */
  --status-positive: var(--green-60); /* @kind color */
}

:root[data-mode="desktop"] {
  --value-margin-platform-2: 20; /* @kind spacing */
  --value-margin-platform: 20; /* @kind spacing */
  --value-padding-card-tiny: 6; /* @kind spacing */
  --value-space-gap-normal: 20; /* @kind spacing */
  --value-width-viewport-lg: 1100; /* @kind spacing */
  --value-width-viewport-xl: 1440; /* @kind spacing */
  --variant-platform: "Desktop"; /* @kind other */
}

:root[data-mode="small"] {
  --height-popup-max: 760; /* @kind spacing */
  --margin-action-contents-bottom: 4; /* @kind spacing */
  --margin-action-normal-horizontal: 16; /* @kind spacing */
  --margin-action-normal-vertical: 16; /* @kind spacing */
  --margin-content-content: 20; /* @kind spacing */
  --margin-navigation-horizontal: 16; /* @kind spacing */
  --margin-navigation-normal: 16; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 12; /* @kind spacing */
  --padding-horizontal: 12; /* @kind spacing */
  --padding-vertical: 4; /* @kind spacing */
  --radius-2: 12; /* @kind radius */
  --radius-3: 12; /* @kind radius */
  --radius: 12; /* @kind radius */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 360; /* @kind spacing */
}

:root[data-mode="large"] {
  --height-popup-max: 760; /* @kind spacing */
  --margin-action-contents-bottom: 0; /* @kind spacing */
  --margin-action-normal-horizontal: 24; /* @kind spacing */
  --margin-action-normal-vertical: 24; /* @kind spacing */
  --margin-content-content: 24; /* @kind spacing */
  --margin-navigation-horizontal: 20; /* @kind spacing */
  --margin-navigation-normal: 20; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 16; /* @kind spacing */
  --padding-horizontal: 20; /* @kind spacing */
  --padding-vertical: 4; /* @kind spacing */
  --radius-2: 16; /* @kind radius */
  --radius-3: 16; /* @kind radius */
  --radius: 20; /* @kind radius */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 480; /* @kind spacing */
}

:root[data-mode="xlarge"] {
  --height-popup-max: 760; /* @kind spacing */
  --margin-action-contents-bottom: 0; /* @kind spacing */
  --margin-action-normal-horizontal: 32; /* @kind spacing */
  --margin-action-normal-vertical: 24; /* @kind spacing */
  --margin-content-content: 32; /* @kind spacing */
  --margin-navigation-horizontal: 28; /* @kind spacing */
  --margin-navigation-normal: 24; /* @kind spacing */
  --margin-navigation-text: 4; /* @kind spacing */
  --margin-navigation-tool-tab: 20; /* @kind spacing */
  --padding-horizontal: 24; /* @kind spacing */
  --padding-vertical: 8; /* @kind spacing */
  --radius-2: 20; /* @kind radius */
  --radius-3: 20; /* @kind radius */
  --radius: 20; /* @kind radius */
  --width-max: 1060; /* @kind spacing */
  --width-min: 320; /* @kind spacing */
  --width-normal: 560; /* @kind spacing */
}

:root[data-mode="dim"] {
  --bg-context: "Dim"; /* @kind other */
}

:root[data-theme="light"], .light {
  --labels-vibrant-controls-primary: rgb(64,64,64); /* @kind color */
  --mode-2: "IC - Light"; /* @kind other */
}

/* ============================================================
   brand.css — METEALTH 브랜드 컬러 오버라이드
   ------------------------------------------------------------
   color.css(원티드 원본 토큰) 뒤에 로드해 의미 토큰만 교체한다.
   원본 램프를 직접 고치지 않는 이유: 램프는 수백 개 변수의 근원이라
   손대면 회귀 범위를 알 수 없고, 다음 프로젝트에서 원본으로 되돌릴 수도 없다.
   여기서 바꾸는 것은 "무엇을 브랜드색으로 쓸지"를 가리키는 의미 토큰뿐이다.

   Primary   #00B9B4 (티얼)   — 브랜드 원색
   Secondary #0F143C (네이비) — 다크 표면·선택 상태 글자

   ★ 명도 대비 때문에 티얼은 역할을 둘로 쪼갠다.
     #00B9B4 위의 흰 글자는 2.44:1 로 WCAG AA(4.5:1)에 크게 미달한다.
     - 면(fill)  : --primary-normal  #00B9B4  → 원색 면 위 글자는 흰색(2.44:1 — 260824 대표 결정)
                                                  주 버튼 · 프로필 이니셜 칩이 여기 해당한다
                                                  선택 상태(칩·세그먼트·달력) 글자만 네이비(7.25:1)
     - 글자·아이콘: --primary-text    #006D6A  → 흰 배경 6.18:1 / 틴트 위 5.64:1
     - 포커스 링  : --primary-heavy   #008C88  → 흰 배경 4.11:1 (UI 요소 3:1 충족)
     이 분리를 되돌리면 링크·아이콘이 전부 대비 미달로 떨어진다.
     주 버튼에 AA가 필요해지면 글자색이 아니라 면을 #008480 이하로 낮춘다(흰 글자 4.56:1).
   ============================================================ */

:root {
  /* ── Primary (브랜드 티얼) ── */
  --primary-normal: rgb(0,185,180);   /* #00B9B4 — 면: 버튼·진행률·차트·활성 표시 · 선택 상태 테두리 */
  --primary-strong: rgb(0,163,158);   /* 호버 */
  --primary-heavy:  rgb(0,140,136);   /* 눌림 · 포커스 링 (선택 테두리에는 쓰지 않는다 — 원색이 포인트다) */
  --primary-text:   rgb(0,109,106);   /* 글자·아이콘 전용 (AA 충족) */

  /* ── Secondary (브랜드 네이비) ── */
  --secondary-normal: rgb(15,20,60);  /* #0F143C — 다크 표면·선택 상태 글자 */
  --secondary-strong: rgb(28,36,84);  /* 호버 */
  --secondary-heavy:  rgb(9,12,38);   /* 눌림 */

  /* ── 옅은 틴트 (assistive 배경) ──
     tailwind config 의 blue-95/blue-99 슬롯을 티얼 틴트로 재정의한다.
     var 참조라 /투명도 슬래시를 못 쓰므로 이 실틴트가 유일한 옅은 배경 수단이다. */
  --blue-90: rgb(191,239,238);
  --blue-95: rgb(230,248,248);
  --blue-99: rgb(245,253,253);

  /* ── 반전 표면 (푸터·토스트·툴팁·배너) ── */
  --inverse-background: rgb(15,20,60);  /* 브랜드 네이비 — 흰 글자 17.71:1 */
  --inverse-primary:    rgb(64,214,209); /* 네이비 위 링크 9.92:1 */
  --inverse-label-alt:  rgba(255,255,255,0.72); /* 네이비 위 보조 텍스트 9.29:1 */
}

/* 브랜드 컬러 오버라이드 — color.css 뒤 */

/* Wanted Design System — Typography (이 프로젝트용 변형)
   원티드 Figma "Typography" 페이지의 타입 스케일(size / line-height / letter-spacing).
   ※ 폰트 패밀리는 이 보일러플레이트 기준(Pretendard)으로 교체함.
      원티드 원본은 Pretendard JP + Wanted Sans 2종을 쓴다. 라이선스 폰트로 전환하려면
      아래 --font-sans / --font-brand 와 index.html 의 폰트 <link> 를 함께 갱신한다.
   이 파일은 CSS 변수만 제공한다. 실제 타입 유틸리티는 tailwind.config.js 의 fontSize
   토큰(text-title1, text-body1 …)으로 노출한다. Weights: 400/500/600/700.

   ※ 260825 — 작업 구간(title3 이하)을 1~2px 올렸다. 원티드 원본 스케일은 본문 14~16px 기준이라
      유전체 리포트처럼 표·수치를 오래 들여다보는 화면에서 작게 읽혔다. 참조로 잡은 쓰리빌리언
      (3billion.io/ko) 데스크톱은 본문 15~18 · 서브헤딩 22~24 · 섹션 제목 28~32 · 히어로 55~70 이고,
      행간도 함께 올려 1.4~1.5 를 유지한다 — 크기만 올리면 답답해진다.

   ※ 260825 (2차) — display 램프를 56/40/36 에서 56/48/40 으로 고쳤다. 40 과 36 이 4px 밖에 안 벌어져
      실질적으로 한 급이었고, 그래서 히어로(lg:display2)와 섹션 헤드(lg:display3)가 같은 덩어리로 읽혔다.
      48 은 히어로 카피가 들어가는 칸의 한계이기도 하다 — 히어로는 12 칸 중 7 칸만 쓰고 오른쪽 5 칸은
      과녁(brand.md)이 앉으므로, `변이 검출과 임상 해석이 끝납니다.` 가 한 줄에 들어가는 최대가 48px 다. */

:root {
  /* Font families — 이 프로젝트는 Pretendard 단일 사용 */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", sans-serif;
  --font-brand: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Type scale: size ---- */
  --font-size-display1: 56px;
  --font-size-display2: 48px;
  --font-size-display3: 40px;
  --font-size-title1: 32px;
  --font-size-title2: 28px;
  --font-size-title3: 26px;
  --font-size-heading1: 24px;
  --font-size-heading2: 22px;
  --font-size-headline1: 20px;
  --font-size-headline2: 18px;
  --font-size-body1: 17px;
  --font-size-body2: 16px;
  --font-size-label1: 15px;
  --font-size-label2: 14px;
  --font-size-caption1: 13px;
  --font-size-caption2: 12px;

  /* ---- Type scale: line-height ---- */
  --line-height-display1: 72px;
  --line-height-display2: 62px;
  --line-height-display3: 52px;
  --line-height-title1: 44px;
  --line-height-title2: 38px;
  --line-height-title3: 34px;
  --line-height-heading1: 32px;
  --line-height-heading2: 30px;
  --line-height-headline1: 28px;
  --line-height-headline2: 26px;
  --line-height-body1-normal: 26px;
  --line-height-body1-reading: 28px;
  --line-height-body2-normal: 24px;
  --line-height-body2-reading: 26px;
  --line-height-label1-normal: 22px;
  --line-height-label1-reading: 24px;
  --line-height-label2: 20px;
  --line-height-caption1: 18px;
  --line-height-caption2: 16px;

  /* ---- Type scale: letter-spacing ---- */
  --letter-spacing-display1: -0.0319em;
  --letter-spacing-display2: -0.03em;
  --letter-spacing-display3: -0.0282em;
  --letter-spacing-title1: -0.0253em;
  --letter-spacing-title2: -0.0236em;
  --letter-spacing-title3: -0.023em;
  --letter-spacing-heading1: -0.0194em;
  --letter-spacing-heading2: -0.012em;
  --letter-spacing-headline1: -0.002em;
  --letter-spacing-headline2: 0em;
  --letter-spacing-body1: 0.0057em;
  --letter-spacing-body2: 0.0096em;
  --letter-spacing-label1: 0.0145em;
  --letter-spacing-label2: 0.0194em;
  --letter-spacing-caption1: 0.0252em;
  --letter-spacing-caption2: 0.0311em;
}

/* Wanted Design System — Spacing, Radius, Elevation
   4px-based spacing scale; radius tokens from the Frame/Modal Figma collections;
   shadow/elevation system derived from the file's shadow color usage. */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-circle: 50%;
  --radius-pill: 999px;

  /* ---- Elevation / shadows ----
     Wanted uses soft, low-spread neutral shadows for cards and overlays. */
  --shadow-emphasize: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 4px rgba(23,23,23,0.06), 0 0 4px rgba(23,23,23,0.07);
  --shadow-normal: 0 1px 4px rgba(23,23,23,0.07), 0 0 1px rgba(23,23,23,0.06);
  --shadow-strong: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-overlay: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);

  /* ---- Layout widths (from Frame/Modal collections) ---- */
  --layout-width-min: 320px;
  --layout-width-normal: 400px;
  --layout-width-max: 1060px;
  --layout-viewport-lg: 1100px;
  --layout-viewport-xl: 1440px;
}

/* Wanted Design System — Motion
   Durations + easings from the file's interaction notes, plus the keyframes
   the components rely on. Quick & functional: 120ms hover, 160ms toggles,
   ~280ms for width/progress; the Switch knob uses a gentle spring. */

:root {
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 160ms; /* @kind other */
  --duration-slow: 280ms; /* @kind other */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}

@keyframes wds-skeleton {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}

@keyframes wds-skeleton-sheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes wds-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 2) 프로젝트 스타일 */

/* ============================================================
   base.css — 리셋 & HTML 요소 기본 스타일
   특정 클래스명은 사용하지 않는다. 요소 선택자와 전역 상태만 담는다.
   색상·폰트값은 tailwind.config.js 참조.
   ============================================================ */

/* ============================================================
   layout.css — 컨테이너 · 섹션 · 그리드 레이아웃
   ============================================================ */

/* ============================================================
   components.css — 원티드 디자인 시스템 UI 컴포넌트 클래스
   레이아웃은 layout.css, 모션은 animations.css.
   색·radius·shadow 는 tailwind.config.js 가 노출한 원티드 토큰 유틸리티만 사용한다.
   원티드 스펙: 솔리드 primary 버튼(호버 primary-strong / 눌림 primary-heavy),
   pill 저강조 버튼, flat/raised 카드, pill 칩·배지, 헤어라인 입력.
   ============================================================ */

/* ============================================================
   헤더 상태 — @layer 밖에 두는 이유
   .is-scrolled 는 main.js 가 붙이는 클래스라 마크업에 없다. @layer components
   안에 두면 Tailwind purge 가 미사용으로 보고 지운다(animations.css 의 .reveal 과 같은 처리).
   변수만 갈아 끼우므로 로고·내비·아이콘이 한꺼번에 따라온다.
   ============================================================ */

/* 어두운 히어로 위 — 홈 최상단. 네이비 위 흰 글자(17.71:1) */

.site-header-over-hero:not(.is-scrolled) {
  --hdr-fg: var(--inverse-label);
}

/* 헤더 로고 교체 — 어두운 히어로를 등지고 있는 동안만 다크 버전을 보인다.
   두 장을 다 마크업에 넣고 CSS 가 하나만 남기는 이유는 외부 SVG 라 색을 상속할 수
   없어서다. 여기 규칙도 .is-scrolled 를 쓰므로 위와 같은 이유로 @layer 밖에 둔다.
   @layer 밖 규칙은 main.css 의 import 순서상 @layer components 보다 먼저 깔린다 —
   숨김 규칙에 img 를 붙여 두지 않으면 뒤에 오는 .site-logo 의 display 가 이긴다. */

img.site-header-logo-dark { display: none; }

.site-header-over-hero:not(.is-scrolled) .site-header-logo-light { display: none; }

.site-header-over-hero:not(.is-scrolled) .site-header-logo-dark { display: block; }

/* 스크롤 후 — 흰 배경이 생기고 글자는 검정으로 돌아온다(.site-header 기본값) */

.site-header.is-scrolled {
  background-color: var(--background-normal-normal);
  box-shadow: var(--shadow-normal);
}

/* ============================================================
   animations.css — 스크롤 등장, 루프 모션, 스크롤바 유틸
   prefers-reduced-motion 대응은 이 파일 안에서 처리한다.
   ============================================================ */

/* @layer 밖: keyframes 와 .reveal 같이 JS가 클래스를 토글하는 패턴
   Tailwind purge가 제거하지 않도록 @layer utilities 대신 전역으로 선언한다. */

/* --- 스크롤 등장 (fade-up + blur) --- */

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  filter: blur(6px);
  transition:
    opacity  .7s cubic-bezier(0.16, 1, 0.3, 1),
    transform .7s cubic-bezier(0.16, 1, 0.3, 1),
    filter   .7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- 무한 가로 마퀴 --- */

@keyframes marquee { to { transform: translateX(-50%); } }

.marquee {
  animation: marquee 45s linear infinite;
}

.marquee:hover { animation-play-state: paused; }

/* --- 히어로 부유 (세로 float) --- */

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

.floaty { animation: floaty 6s ease-in-out infinite; }

/* --- 앰비언트 오브 드리프트 --- */

@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(20px, -24px) scale(1.08); }
}

.orb { animation: orbDrift 14s ease-in-out infinite; }

/* --- 바텀시트 슬라이드업 (네이티브 <dialog class="bottom-sheet"> 열릴 때) --- */

@keyframes wds-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.bottom-sheet[open] { animation: wds-sheet-up 280ms var(--ease-spring); }

/* --- 모션 감소 대응 --- */

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee, .floaty, .orb { animation: none; }
  .bottom-sheet[open] { animation: none; }
}

/* 3) Tailwind */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: var(--font-sans); /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* --- 리셋 --- */

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

/* [hidden] 은 "지금 없는 것"이라 어떤 컴포넌트의 display 보다 세야 한다.
     @layer components 의 display(flex·grid)가 UA 의 [hidden]{display:none} 을 이기는 탓에
     JS 로 여닫는 자리마다 `.foo[hidden]` 을 하나씩 덧대 왔는데, 새 컴포넌트를 만들 때마다
     빠뜨려 "숨겼는데 보인다"가 반복된다. 여기서 한 번 눌러 개별 규칙을 없앤다.
     통째로 감추는 속성이라 !important 의 부작용이 없다 — 보이려면 속성을 뗀다. */

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* 페이지 골격 — 콘텐츠가 짧아도 푸터가 화면 바닥에 붙는다(sticky footer).
     body 를 세로 flex 로 세우고 남는 높이를 main 이 흡수하는 방식이라,
     스크롤이 생기는 긴 페이지에서는 남는 높이가 0 이어서 아무 영향이 없다.
     푸터를 position:fixed 로 띄우지 않는 이유 — 띄우면 긴 페이지에서 본문을 계속 가린다. */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--label-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;   /* 모바일 주소창 개폐 대응. 미지원 브라우저는 위 min-h-screen(100vh) 으로 남는다 */
    word-break: keep-all;
}

/* 헤더·푸터 사이에서 남는 높이를 흡수하는 칸.
     안쪽(주문 스텝 폼)도 같이 늘어나야 하단 요약 바가 푸터 바로 위에 붙으므로
     세로 flex 로 둔다 — .wizard-form(layout.css) 이 이 높이를 이어받는다. */

main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
    height: auto;
}

a {
    color: inherit;
  }

ul[role="list"] {
    list-style: none;
    padding: 0;
  }

/* 외부 아이콘 라이브러리가 inline 기본값을 가질 때 블록으로 교정 */

iconify-icon {
    display: inline-block;
  }

/* --- 포커스 --- */

:focus-visible {
    outline: 2px solid var(--primary-heavy);  /* 원색 #00B9B4 는 흰 배경 2.44:1 — UI 요소 3:1 미달 */
    outline-offset: 2px;
  }

/* --- 모션 감소 --- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }

/* 전 화면 공통 컨테이너 — 홈·업무 화면·주문 스텝이 이 하나만 쓴다.
     최대폭 1280(max-w-container) + 좌우 여백 20·32·56·80.
     헤더(GNB)·본문·하단 고정 바·푸터가 모두 이 클래스를 써야
     페이지를 옮겨도 로고와 제목의 시작선이 같은 자리에 온다.
     여백을 좁혀 표를 넓히고 싶어도, 폼이 넓어 보인다고 안쪽에 폭을 한 겹 더 걸어도
     화면별로 값을 나누지 않는다 — 한 번 나누면 시작선이 다시 어긋난다.
     입력창 폭은 그것을 담은 그리드 칸이 정한다 — 입력에 따로 상한을 걸지 않는다.
     w-full 은 부모가 flex 일 때를 위한 것이다 — mx-auto(auto 마진)가 걸린 flex 자식은
     stretch 가 풀려 폭이 콘텐츠 크기로 줄어든다. 블록 부모에서는 아무 영향이 없다. */

.container-base {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {

  .container-base {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {

  .container-base {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

@media (min-width: 1280px) {

  .container-base {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* 세로 리듬 — 가로 폭과 달리 화면 성격에 따라 나눈다.
     .section-padding  랜딩 성격 섹션
     .app-padding      업무 화면 본문 (랜딩 리듬은 표·폼에 과하다)
     .section-block    홈 섹션 (헤드라인이 큰 만큼 숨이 필요하다)
     .page-center      세로 중앙 화면 (로그인·완료·에러 — 높이가 고정된 카드 한 장짜리만)

     단 위쪽 시작선은 나누지 않는다 — .app-padding 과 .wizard-head-inner 가 같은
     pt-head-top 을 써서, 목록이든 위저드든 GNB 아래 첫 요소가 같은 자리에 선다.
     값의 정본은 tailwind.config.js 의 spacing.head-top 한 곳이다 (coding.md 2-6). */

.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {

  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* 업무 화면 본문 — 위는 전 화면 공통 시작선, 아래는 그보다 짧게.
     위아래를 같은 값으로 묶으면(예전 py-6) 제목이 GNB 에 붙어 위저드보다 높이 서므로
     pt 와 pb 를 나눠 쓴다. 아래를 짧게 두는 이유는 그 뒤에 푸터가 이어 붙기 때문이다. */

.app-padding {
  padding-bottom: 1.5rem;
  padding-top: 3rem;
}

@media (min-width: 768px) {

  .app-padding {
    padding-bottom: 2rem;
    padding-top: 4rem;
  }
}

/* 본문 꼬리 여백 — 마지막 요소와 푸터 경계선 사이 거리. .app-padding 의 pb 는 그 뒤에
     푸터가 이어 붙는 것을 전제로 짧게 잡은 값이라, 마지막 요소가 버튼·표처럼 선이 굵으면
     푸터 선에 붙어 두 줄로 겹쳐 보인다. 그런 화면은 이 꼬리를 한 겹 더 얹는다.
     값의 정본은 이 한 곳이다 — 인증 화면 폼 아래(.auth-tail)와 결과 요약 탭 패널 아래가
     같은 거리를 쓴다. .app-padding 의 pb 를 덮지 않고 더한다(같은 요소에 겹쳐 걸지 않는다). */

.section-block {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {

  .section-block {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {

  .section-block {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* 세로 중앙 화면 — 로그인·비밀번호 재설정·신청 완료·충전 완료·에러.
     콘텐츠가 카드 한 덩어리라 기준이 위쪽 시작선이 아니라 화면 중앙이다(coding.md 2-6 예외).
     회원가입은 여기 들지 않는다 — 단계마다 높이가 달라 중앙에 걸면 스텝 줄이 튄다.
     그래서 위아래 여백이 같다 — 여기에 pt 만 키우면 덩어리가 중앙에서 아래로 밀린다.
     폭·좌우 여백은 함께 걸리는 .container-base 가 맡는다(그쪽 w-full 이 auto 마진에
     stretch 가 풀리는 것을 막는다 — §"푸터는 화면 바닥"). */

.page-center {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {

  .page-center {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* 주문 위저드 머리 — 진행 막대 · 스텝 라벨 · 이번에 할 일 · 안내가 한 덩어리다.
     머리와 본문 모두 .container-base 폭을 그대로 쓴다 — 예전에는 본문에만 1024 를
     걸어 제목이 카드보다 128px 왼쪽에서 시작했고, 그게 이 화면이 어긋나 보인 이유였다.
     회색 띠를 걷어낸 이유: 위계는 면 색이 아니라 타입 스케일이 만든다. 띠가 있으면
     제목이 "머리 영역"에 갇혀 아래 본문과 남남이 되는데, 실제로는 제목이 곧
     본문에서 할 일이라 이어져 보여야 한다.
     STEP 1~5 가 같은 마크업을 쓰고 스텝 줄 · 제목 · 안내만 갈린다. */

.wizard-head {
  background-color: var(--background-normal-normal);
}

/* 위쪽은 sticky GNB 와 스텝 줄이 붙어 보이지 않게 띄운다 — 이 화면이 시작선의 기준이고
     목록·설정 화면(.app-padding)이 같은 pt-head-top 을 쓴다.
     아래 여백은 .wizard-body 가 이어 붙는다 — 여기서 pb 를 다 주면 제목과 본문이 벌어져
     제목이 본문에서 할 일이라는 관계가 끊긴다 */

.wizard-head-inner {
  padding-bottom: 0.5rem;
  padding-top: 3rem;
}

@media (min-width: 768px) {

  .wizard-head-inner {
    padding-top: 4rem;
  }
}

.wizard-head-title {
  margin-top: 1.5rem;
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  color: var(--label-normal);
}

@media (min-width: 768px) {

  .wizard-head-title {
    font-size: var(--font-size-title1);
    line-height: var(--line-height-title1);
    letter-spacing: var(--letter-spacing-title1);
  }
}

/* 위 줄이 조건부로 숨는 화면에서는 제목이 시작선을 이어받는다 — 크레딧 충전은 신청에서
     넘어왔을 때만 되돌아가기 링크가 서므로(main.js), GNB 로 바로 들어오면 이 mt-6 이 그대로
     남아 제목이 위저드보다 24px 아래에서 시작했다. 첫 요소가 무엇이든 시작선은 하나다. */

.wizard-back[hidden] + .wizard-head-title {
  margin-top: 0px;
}

.wizard-head-lead {
  margin-top: 0.75rem;
  max-width: 720px;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* 주문 스텝 폼 골격 — main 이 흡수한 높이를 폼이 그대로 이어받는다.
     폼이 콘텐츠 높이에 머물면 하단 요약 바(.summary-bar)가 본문 끝에 남고
     그 아래 푸터까지 빈칸이 생기므로, 폼을 늘려 바를 화면 바닥으로 내린다.
     STEP 1~5 의 <form data-wizard> 가 모두 이 클래스를 쓴다.
     배경이 흰 면인 이유 — 콘텐츠 영역은 머리 띠(.wizard-head)와 색으로 갈린다.
     body 의 페이지 그레이는 띠에서만 보이고 그 아래로는 내려오지 않는다. */

.wizard-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background-color: var(--background-normal-normal);
}

/* 스텝 본문 — 위는 머리와 이어지는 .app-padding 리듬 그대로, 아래만 크게 벌린다.
     하단 요약 바(.summary-bar)가 sticky 로 콘텐츠 위에 겹쳐 서므로 아래 여백이 24px 이면
     마지막 카드가 바에 닿아 보인다. 스크롤 끝에서도 카드와 바가 떨어져 있어야 한다. */

.wizard-body {
  padding-bottom: 5rem;
  padding-top: 1.5rem;
}

@media (min-width: 768px) {

  .wizard-body {
    padding-bottom: 7rem;
    padding-top: 2rem;
  }
}

/* ===== 버튼 ===== */

/* 주 버튼 — 솔리드 Wanted Blue */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  background-color: var(--primary-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--static-white);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.btn-primary:hover {
  background-color: var(--primary-strong);
}

.btn-primary:active {
  background-color: var(--primary-heavy);
}

.btn-primary:disabled {
  pointer-events: none;
  background-color: var(--fill-normal);
  color: var(--label-disable);
}

/* 잠긴 주 버튼 — 아직 못 넘어가는 상태. disabled 속성이 아니라 aria-disabled 로 잠근다.
     disabled 는 pointer-events-none 이라 눌러도 클릭이 오지 않고, 그러면 눌러 봤을 때
     필드 옆 경고를 열 자리가 사라진다. 모양만 잠그고 제출은 main.js 위저드가 막는다. */

.btn-primary[aria-disabled="true"],
  .btn-primary[aria-disabled="true"]:hover,
  .btn-primary[aria-disabled="true"]:active {
  background-color: var(--fill-normal);
  color: var(--label-disable);
    cursor: not-allowed;
}

/* 보조 버튼 — 헤어라인 아웃라인 */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.btn-secondary:hover {
  background-color: var(--fill-alternative);
}

.btn-secondary:active {
  background-color: var(--fill-normal);
}

/* 저강조 버튼 — 그레이 필 */

.btn-assistive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  background-color: var(--fill-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.btn-assistive:hover {
  background-color: var(--fill-strong);
}

/* 텍스트 버튼 — primary 컬러, 호버 시 70% */

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-md);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--primary-text);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.btn-text:hover {
  opacity: 0.7;
}

/* 위험 버튼 — 되돌릴 수 없는 동작(탈퇴·삭제) 전용.
     솔리드는 확정 자리(다이얼로그)에만 쓰고 진입 자리는 아웃라인으로 둔다 —
     설정 화면에 솔리드 빨강을 놓으면 화면에서 가장 강한 면이 탈퇴가 되어 primary CTA 를 누른다.
     글자·면은 red-40. status-negative(red-50)는 흰 배경 대비 3.4:1 로 본문 AA 에 못 미쳐
     글자에는 쓰지 않는다 — 뱃지·상태 점처럼 글자가 아닌 표식 전용이다. */

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  background-color: var(--red-40);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--static-white);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.btn-danger:hover {
  background-color: var(--red-30);
}

.btn-danger:active {
  background-color: var(--red-20);
}

.btn-danger:disabled {
  pointer-events: none;
  background-color: var(--fill-normal);
  color: var(--label-disable);
}

/* 아웃라인 위험 버튼 — 선과 글자만 빨강. 호버에서 면을 옅게 물들이고 선을 조인다 */

.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-color: var(--red-80);
  background-color: var(--background-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--red-40);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.btn-danger-outline:hover {
  border-color: var(--red-40);
  background-color: var(--red-95);
}

.btn-danger-outline:active {
  background-color: var(--red-90);
}

/* pill 형태 변형 (GNB CTA 등) */

.btn-pill {
  border-radius: var(--radius-pill);
}

/* ===== 카드 ===== */

/* flat — 헤어라인 인셋 보더, 그림자 없음 */

.card {
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-elevated-normal);
  padding: 1.25rem;
}

/* raised — 부드러운 그림자, 인터랙티브 시 2px 리프트 */

.card-raised {
  border-radius: var(--radius-xl);
  background-color: var(--background-elevated-normal);
  padding: 1.25rem;
  --tw-shadow: var(--shadow-normal);
  --tw-shadow-colored: var(--shadow-normal);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

a.card-raised:hover,
  button.card-raised:hover,
  .card-interactive:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: var(--shadow-strong);
  --tw-shadow-colored: var(--shadow-strong);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ===== 칩 / 배지 / 태그 ===== */

/* 칩 — pill, 그레이 필 */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-neutral);
}

/* 선택된 칩 */

.chip-selected {
  background-color: var(--primary-normal);
  color: var(--secondary-normal);
}

/* 배지 — 작은 pill 라벨 */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--blue-95);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 600;
  color: var(--primary-text);
}

/* 상태 배지 */

.badge-positive {
  background-color: var(--blue-99);
  color: var(--status-positive);
}

.badge-negative {
  background-color: var(--blue-99);
  color: var(--status-negative);
}

/* ===== 입력 ===== */

/* 텍스트 필드 — 헤어라인 보더, 포커스 시 primary */

.field {
  width: 100%;
  border-radius: var(--radius-md);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.field::placeholder {
  color: var(--label-alternative);
}

.field:focus {
  border-color: var(--primary-normal);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ===== 외부 시스템 링크 (새 창으로 열림: GNB·모바일메뉴·푸터) ===== */

.link-external {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.link-external:hover {
  background-color: var(--fill-normal);
  color: var(--label-normal);
}

.mobile-link-external {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: var(--radius-lg);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.mobile-link-external:hover {
  background-color: var(--fill-normal);
  color: var(--label-normal);
}

.footer-link-external {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.footer-link-external:hover {
  color: var(--static-white);
}

/* ===== 푸터 약관 줄 =====
     항목 사이 구분선을 ::before 로 그린다. 마크업에 '|' 를 글자로 넣으면
     스크린리더가 그것까지 읽는다. 줄바꿈되면 세로 간격(gap-y)이 함께 벌어진다. */

.policy-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
}

.policy-list > li + li {
  position: relative;
  padding-left: 1.25rem;
}

.policy-list > li + li::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    height: 0.75rem;
    width: 1px;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background-color: var(--line-normal-normal);
  }

/* ===== FAQ ===== */

/* ============================================================
     원티드 컴포넌트 이식분
     사용 마크업 예시는 README.md "컴포넌트" 절 참고.
     ============================================================ */

/* ===== 탭 (밑줄형) — [role=tablist] > .tab[role=tab][aria-selected] ===== */

.tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
}

.tab {
  position: relative;
  margin-bottom: -1px;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 500;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

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

.tab::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 0.125rem;
    border-radius: 9999px;
    background-color: transparent;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 120ms;
    transition-timing-function: var(--ease-standard);
  }

.tab[aria-selected="true"]::after {
  background-color: var(--label-normal);
}

/* 탭이 든 건수 — 라벨보다 한 급 작게 붙고, 고른 탭에서는 라벨 색을 따라간다 */

.tab-num {
  margin-left: 0.375rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-assistive); font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .tab-num {
  color: currentColor;
}

/* 화면을 통째로 가르는 탭 — 결과 화면의 요약 / 유전자별 상세.
     안쪽 블록 탭(.gene-tab)과 같은 밑줄형이라 크기와 색으로 층을 가른다:
     이쪽은 한 급 크고 선택면이 브랜드 원색이며, 저쪽은 한 유전자 안을 가르는 작은 탭이다.
     좁은 화면에서는 가로로 민다 — 줄바꿈하면 탭 줄이 두 겹이 된다. */

.tabs-page {
  gap: 1.75rem;
  overflow-x: auto;
    scrollbar-width: none;
}

.tabs-page::-webkit-scrollbar { display: none; }

.tabs-page .tab {
  flex: none;
  white-space: nowrap;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
}

.tabs-page .tab[aria-selected="true"] {
  color: var(--primary-text);
}

.tabs-page .tab::after {
  height: 0.25rem;
}

.tabs-page .tab[aria-selected="true"]::after {
  background-color: var(--primary-normal);
}

/* 같은 표를 갈아 끼우는 탭 (알약형) — 결과 요약의 변이 묶음 셋.
     화면을 가르는 위 탭(.tabs-page)이 이미 밑줄형이라, 그 아래 한 급 작은 밑줄을 또 두면
     두 줄이 겹쳐 어느 쪽이 화면을 가르는지 읽히지 않는다. 여기는 열이 같은 한 표의
     묶음 전환이라 칩과 성격이 같아 면으로 갈라 둔다.
     칩(.chip)보다 한 급 크고 위 탭(.tabs-page)보다 한 급 작다 — 세 층이 크기로 갈린다.
     선택면 글자는 흰색이다(260827 대표 지시) — 주 버튼과 같은 값이고, 다른 선택 상태
     (칩·세그먼트·달력·페이지네이션)의 네이비 글자는 그대로 둔다(brand.md "티얼은 면과 글자를 나눠 쓴다"). */

.tabs-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tabs-pill .tab {
  margin-bottom: 0px;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-neutral);
}

.tabs-pill .tab:hover {
  background-color: var(--fill-strong);
}

@media (min-width: 768px) {

  .tabs-pill .tab {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.tabs-pill .tab::after { content: none; }

.tabs-pill .tab[aria-selected="true"] {
  background-color: var(--primary-normal);
  font-weight: 700;
  color: var(--static-white);
}

.tabs-pill .tab[aria-selected="true"]:hover {
  background-color: var(--primary-strong);
}

/* 건수는 라벨과 같이 읽히는 값이라 옅은 회색으로 내리지 않는다(brand.md assistive 규칙) */

.tabs-pill .tab-num {
  margin-left: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

/* ===== 세그먼티드 컨트롤 — .segmented > .segment[aria-selected] ===== */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
  padding: 0.25rem;
}

.segment {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-pill);
  border-width: 0px;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.segment[aria-selected="true"] {
  background-color: var(--background-normal-normal);
  color: var(--label-normal);
  --tw-shadow: var(--shadow-normal);
  --tw-shadow-colored: var(--shadow-normal);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* 칸 안 건수 — 라벨과 같은 줄에 한 급 작게 붙는다. 배지로 감싸지 않는 이유:
     세 칸이 모두 배지를 들면 트랙이 알약 덩어리가 되어 선택 상태가 안 읽힌다. */

.segment-count {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-assistive);
    font-variant-numeric: tabular-nums;
}

/* 라벨과 건수는 한 덩어리로 읽혀야 한다 — 아이콘 붙이려고 벌려 둔 칸 간격(6px)은
     여기서 너무 멀어 숫자가 옆 칸 것처럼 보인다. 건수를 든 칸에서만 좁힌다. */

.segment:has(.segment-count) { gap: 3px; }

.segment[aria-selected="true"] .segment-count {
  color: var(--primary-text);
}

/* 넓은 세그먼티드 — 화면 가운데 놓고 두 칸이 폭을 반씩 나눠 갖는다.
     이 토글이 화면의 첫 결정일 때(주문 STEP 1) 쓴다. 콘텐츠 폭에 맞춰 오그라든 토글은
     아래 카드 덱과 나란히 놓이면 부속처럼 보인다. */

.segmented-wide {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 28rem;
}

.segmented-wide .segment {
  flex: 1 1 0%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
}

/* 다크 표면용 — 선택면을 흰색 대신 프라이머리로 채운다.
     네이비 트랙 위에서는 흰 면과 밝은 글자색이 붙어 라벨이 사라진다. */

/* ===== 스위치 — <label.switch> input.switch-input + span.switch-track ===== */

.switch {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
}

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

.switch-track {
  position: relative;
  display: inline-flex;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--fill-strong);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
    width: 52px;
    height: 32px;
}

.switch-track::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    background-color: var(--static-white);
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    transition: left 160ms var(--ease-spring);
  }

.switch-input:checked + .switch-track {
  background-color: var(--primary-normal);
}

.switch-input:checked + .switch-track::after {
    left: 22px;
  }

.switch-input:disabled + .switch-track {
    background: var(--interaction-disable);
  }

.switch-input:focus-visible + .switch-track {
    outline: 2px solid var(--primary-normal);
    outline-offset: 2px;
  }

/* ===== 체크박스 — <label.check> input.check-input + span.check-box ===== */

.check {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}

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

.check-box {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  border-radius: var(--radius-sm);
  background-color: var(--background-normal-normal);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    box-shadow: inset 0 0 0 1.5px var(--line-normal-normal);
}

.check-input:checked + .check-box {
  background-color: var(--primary-normal);
    box-shadow: none;
}

/* 흰색 체크 글리프 (border 트릭) */

.check-input:checked + .check-box::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid var(--static-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

.check-input:focus-visible + .check-box {
    outline: 2px solid var(--primary-normal);
    outline-offset: 2px;
  }

/* ===== 라디오 — <label.radio> input.radio-input + span.radio-dot ===== */

.radio {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}

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

.radio-dot {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--background-normal-normal);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    box-shadow: inset 0 0 0 1.5px var(--line-normal-normal);
}

.radio-input:checked + .radio-dot {
    box-shadow: inset 0 0 0 7px var(--primary-normal);
  }

.radio-input:checked + .radio-dot::after {
    content: "";
    display: block;
    border-radius: 9999px;
    background-color: var(--static-white);
    width: 8px;
    height: 8px;
  }

.radio-input:focus-visible + .radio-dot {
    outline: 2px solid var(--primary-normal);
    outline-offset: 2px;
  }

/* ===== 셀렉트 박스 — <select class="select"> ===== */

.select {
  width: 100%;
  appearance: none;
  border-radius: var(--radius-md);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 2.5rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.select:focus {
  border-color: var(--primary-normal);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.select {
    /* 셰브런 아이콘 (label-assistive 톤) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

/* ===== 툴팁 — <span.tooltip> 트리거 + span.tooltip-bubble ===== */

.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip-bubble {
  pointer-events: none;
  position: absolute;
  left: 50%;
  z-index: 30;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background-color: var(--inverse-background);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 500;
  color: var(--inverse-label);
  opacity: 0;
  --tw-shadow: var(--shadow-strong);
  --tw-shadow-colored: var(--shadow-strong);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    bottom: calc(100% + 8px);
}

.tooltip:hover .tooltip-bubble,
  .tooltip:focus-within .tooltip-bubble {
  opacity: 1;
}

/* ===== 알럿 / 배너 (인라인 상태 알림) ===== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: var(--radius-lg);
  padding: 1rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.alert-icon {
  margin-top: 0.125rem;
  flex: none;
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1;
}

.alert-title {
  margin-bottom: 0.125rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.alert-info {
  background-color: var(--blue-95);
}

.alert-info .alert-icon {
  color: var(--primary-text);
}

.alert-positive {
  background-color: var(--green-95);
}

.alert-positive .alert-icon {
  color: var(--status-positive);
}

.alert-negative {
  background-color: var(--red-95);
}

.alert-negative .alert-icon {
  color: var(--status-negative);
}

.alert-cautionary {
  background-color: var(--orange-95);
}

.alert-cautionary .alert-icon {
  color: var(--status-cautionary);
}

/* ===== 토스트 (다크 pill, 임시 알림) ===== */

.toast-region {
  pointer-events: none;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.toast {
  pointer-events: auto;
  display: inline-flex;
  max-width: 480px;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-lg);
  background-color: var(--inverse-background);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--inverse-label);
  --tw-shadow: var(--shadow-overlay);
  --tw-shadow-colored: var(--shadow-overlay);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.toast-action {
  flex: none;
  border-width: 0px;
  background-color: transparent;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--inverse-primary);
}

/* ===== 태그 (정적 키워드 라벨) ===== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-sm);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
}

.tag-neutral {
  background-color: var(--fill-normal);
  color: var(--label-neutral);
}

.tag-primary {
  background-color: var(--blue-95);
  color: var(--primary-text);
}

.tag-positive {
  background-color: var(--green-95);
  color: var(--status-positive);
}

.tag-negative {
  background-color: var(--red-95);
  color: var(--status-negative);
}

.tag-violet {
  background-color: var(--violet-95);
  color: var(--accent-foreground-violet);
}

/* ===== 디바이더 ===== */

.divider {
  height: 1px;
  width: 100%;
  border-width: 0px;
  background-color: var(--line-normal-normal);
}

.divider-section {
  height: 0.5rem;
  width: 100%;
  border-width: 0px;
  background-color: var(--fill-normal);
}

/* ===== 프로그레스 바 — .progress > .progress-fill (width 는 인라인 동적값) ===== */

.progress {
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--primary-normal);
    transition: width 280ms var(--ease-standard);
}

/* ===== 스피너 (원형 로딩) — wds-spin 키프레임 재사용(tokens/motion.css) ===== */

.spinner {
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  flex: none;
  border-radius: 9999px;
    border: 3px solid var(--fill-strong);
    border-top-color: var(--primary-normal);
    animation: wds-spin 0.7s linear infinite;
}

/* ===== 스켈레톤 — wds-skeleton 키프레임 재사용 ===== */

.skeleton {
  display: block;
  border-radius: var(--radius-md);
  background-color: var(--fill-normal);
    animation: wds-skeleton 1.4s ease-in-out infinite;
}

/* ===== 아코디언 (네이티브 <details class="accordion">) ===== */

.accordion {
    box-shadow: inset 0 -1px 0 var(--line-normal-normal);
  }

.accordion > summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--label-normal);
}

.accordion > summary::-webkit-details-marker { display: none; }

.accordion-chevron {
  margin-left: auto;
  flex: none;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--label-assistive);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.accordion[open] .accordion-chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.accordion-body {
  padding-bottom: 1rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

/* ===== 페이지네이션 ===== */

.pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.page-item {
  display: grid;
  height: 2.25rem;
  min-width: 2.25rem;
  place-items: center;
  border-radius: var(--radius-md);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.page-item:hover {
  background-color: var(--fill-normal);
}

.page-item[aria-current="page"] {
  background-color: var(--primary-normal);
  color: var(--secondary-normal);
}

.page-item[aria-current="page"]:hover {
  background-color: var(--primary-strong);
}

/* ============================================================
     원티드 컴포넌트 이식분 — 2차 (액션·디스플레이·입력·서페이스)
     원본: Wanted Design System (Community). 인라인 px 스펙은 토큰 유틸
     또는 var() 원본 값으로 옮겼다. 인터랙션은 main.js 참고.
     ============================================================ */

/* ===== 아바타 — 사람(원)/회사(라운드 사각). <span class="avatar"><img>|이니셜 ===== */

.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--fill-normal);
  font-weight: 600;
  color: var(--label-alternative);
    width: 40px; height: 40px; font-size: 15px;
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

.avatar > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.avatar-square {
  border-radius: var(--radius-lg);
}

.avatar-xs  { width: 24px; height: 24px; font-size: 9px; }

.avatar-sm  { width: 32px; height: 32px; font-size: 12px; }

.avatar-lg  { width: 48px; height: 48px; font-size: 18px; }

.avatar-xl  { width: 64px; height: 64px; font-size: 24px; }

.avatar-2xl { width: 80px; height: 80px; font-size: 30px; }

/* 겹쳐 쌓는 아바타 그룹 (+N 은 .avatar 로 표기) */

.avatar-group {
  display: inline-flex;
  align-items: center;
}

.avatar-group > .avatar {
    margin-left: -12px;
    box-shadow: inset 0 0 0 1px var(--line-normal-normal),
                0 0 0 2px var(--background-normal-normal);
  }

.avatar-group > .avatar:first-child { margin-left: 0; }

/* ===== 아이콘 버튼 — <button class="icon-btn" aria-label="…"> ===== */

.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.icon-btn:hover {
  background-color: var(--fill-alternative);
}

.icon-btn:disabled {
  pointer-events: none;
  color: var(--label-disable);
}

.icon-btn {
    width: 40px; height: 40px;
  }

.icon-btn-sm { width: 32px; height: 32px; }

.icon-btn-lg { width: 48px; height: 48px; }

.icon-btn-circle {
  border-radius: 9999px;
}

.icon-btn-bg {
  background-color: var(--fill-normal);
}

.icon-btn-bg:hover {
  background-color: var(--fill-strong);
}

.icon-btn-outline {
  border-width: 1px;
  border-color: var(--line-normal-normal);
}

.icon-btn-outline:hover {
  background-color: var(--fill-alternative);
}

/* ===== FAB (플로팅 액션 버튼) — <button class="fab"><iconify-icon> ===== */

.fab {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: var(--primary-normal);
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--static-white);
  --tw-shadow: var(--shadow-normal);
  --tw-shadow-colored: var(--shadow-normal);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.fab:hover {
  background-color: var(--primary-strong);
  --tw-shadow: var(--shadow-strong);
  --tw-shadow-colored: var(--shadow-strong);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.fab:disabled {
  pointer-events: none;
  background-color: var(--fill-normal);
  color: var(--label-disable);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.fab {
    height: 56px; min-width: 56px;
  }

.fab-sm { height: 40px; min-width: 40px; }

.fab-elevated {
  background-color: var(--background-elevated-normal);
  color: var(--label-normal);
}

.fab-elevated:hover {
  background-color: var(--background-normal-alternative);
}

.fab-extended {
  border-radius: var(--radius-pill); padding: 0 20px;
}

/* ===== 토글 아이콘 (스크랩·좋아요·팔로우) — aria-pressed 로 상태 ===== */

.toggle-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--label-assistive);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.toggle-icon:hover {
  color: var(--label-neutral);
}

.toggle-icon:disabled {
  pointer-events: none;
  color: var(--label-disable);
}

.toggle-icon {
    width: 36px; height: 36px;
  }

.toggle-icon-sm { width: 28px; height: 28px; }

.toggle-icon-lg { width: 44px; height: 44px; }

.toggle-icon[aria-pressed="true"] {
  color: var(--primary-text);
}

.toggle-icon-like[aria-pressed="true"] {
  color: var(--status-negative);
}

/* ===== 카테고리 (상위 섹션 전환 pill) — 활성 시 다크 솔리드 ===== */

.category {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border-width: 0px;
  background-color: var(--fill-normal);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-neutral);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    height: 38px;
}

.category[aria-pressed="true"] {
  background-color: var(--label-normal);
  font-weight: 700;
  color: var(--background-normal-normal);
}

/* ===== 셀 (리스트 행) — leading · 본문 · trailing · chevron ===== */

.cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.cell-leading {
  display: flex;
  flex: none;
  align-items: center;
}

.cell-body {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.125rem;
}

.cell-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-normal);
}

.cell-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.cell-trailing {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-neutral);
}

.cell-interactive {
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.cell-interactive:hover {
  background-color: var(--fill-alternative);
}

.cell-divider { box-shadow: inset 0 -1px 0 var(--line-normal-normal); }

/* ===== 썸네일 — 고정비율 프레임. Tailwind aspect-* 와 함께 사용 ===== */

.thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--background-normal-alternative);
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

.thumbnail > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ===== 콘텐츠 배지 (신규·BEST·마감임박) — fill / weak 톤 ===== */

.content-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 600;
    color: var(--secondary-normal);
    height: 24px; font-size: 13px; letter-spacing: 0.01em;
    background: var(--primary-normal);
}

.content-badge-red,
  .content-badge-green,
  .content-badge-violet,
  .content-badge-orange,
  .content-badge-cyan,
  .content-badge-neutral { color: var(--static-white); }

.content-badge-red     { background: var(--status-negative); }

.content-badge-green   { background: var(--accent-foreground-green); }

.content-badge-violet  { background: var(--accent-foreground-violet); }

.content-badge-orange  { background: var(--accent-foreground-orange); }

.content-badge-cyan    { background: var(--accent-foreground-cyan); }

.content-badge-neutral { background: var(--label-neutral); }

/* weak (틴트 배경 + 컬러 텍스트) */

.content-badge-weak         { background: var(--blue-95);   color: var(--primary-text); }

.content-badge-weak-red     { background: var(--red-95);    color: var(--status-negative); }

.content-badge-weak-green   { background: var(--green-95);  color: var(--accent-foreground-green); }

.content-badge-weak-violet  { background: var(--violet-95); color: var(--accent-foreground-violet); }

.content-badge-weak-orange  { background: var(--orange-95); color: var(--accent-foreground-orange); }

.content-badge-weak-cyan    { background: var(--cyan-95);   color: var(--accent-foreground-cyan); }

.content-badge-weak-neutral { background: var(--fill-normal); color: var(--label-neutral); }

/* ===== 필터칩 (값 적용 시 primary 틴트) — trailing chevron 은 마크업 ===== */

.filter-chip {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background-color: var(--background-normal-normal);
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-neutral);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    height: 38px; padding: 0 10px 0 14px;
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

.filter-chip.is-active,
  .filter-chip[aria-expanded="true"] {
  background-color: var(--blue-95);
  font-weight: 600;
  color: var(--primary-text);
    box-shadow: inset 0 0 0 1px var(--primary-normal);
}

/* ===== 멀티셀렉트 칩 (선택 시 솔리드 + 체크) — role="checkbox" ===== */

.multi-chip {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background-color: var(--background-normal-normal);
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-neutral);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    height: 38px; padding: 0 14px;
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

.multi-chip[aria-checked="true"] {
  background-color: var(--primary-normal);
  font-weight: 600;
  color: var(--secondary-normal);
    box-shadow: none;
}

.multi-chip-check { display: none; }

.multi-chip[aria-checked="true"] .multi-chip-check {
  display: inline-flex;
}

/* ===== 태그 추가 변형 (기존 .tag + .tag-* 서브틀 위에 outline) ===== */

.tag-outline {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
  }

/* ===== 서치필드 — <div class="search-field"><iconify><input>… ===== */

.search-field {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
    height: 44px; padding: 0 14px;
    transition: box-shadow 120ms var(--ease-standard), background 120ms var(--ease-standard);
}

.search-field:focus-within {
    background: var(--background-normal-normal);
    box-shadow: inset 0 0 0 1.5px var(--primary-heavy);
  }

.search-field-outlined {
  background-color: var(--background-normal-normal);
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

/* 드롭다운 헤더처럼 감싸는 칸이 이미 테두리를 가진 자리 — 필드가 제 테두리를 또 그리면
     상자 안에 상자가 된다. 배경·테두리·좌우 여백을 빼 감싼 칸 자체가 검색창으로 읽히게 한다. */

.search-field-bare,
  .search-field-bare:focus-within {
  border-radius: 0px;
  background-color: transparent;
    box-shadow: none; padding: 0;
}

.search-field-lg { height: 52px; }

.search-field > input {
  min-width: 0px;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-normal);
}

.search-field > input::placeholder {
  color: var(--label-alternative);
}

.search-field > input {
    outline: none;
  }

.search-field-icon {
  flex: none;
  color: var(--label-assistive);
}

.search-field-clear {
  flex: none;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  color: var(--label-assistive);
}

/* ===== 레인지 슬라이더 — <input type="range" class="range">. JS 가 --range-pct 갱신 ===== */

.range {
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-color: transparent;
    height: 24px;
    --range-pct: 50%;
}

.range::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px;
    background: linear-gradient(to right,
      var(--primary-normal) var(--range-pct), var(--fill-strong) var(--range-pct));
  }

.range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
    background: var(--static-white); border: 2px solid var(--primary-heavy);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  }

.range::-moz-range-track    { height: 4px; border-radius: 999px; background: var(--fill-strong); }

.range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--primary-normal); }

.range::-moz-range-thumb {
    width: 20px; height: 20px; border: 2px solid var(--primary-heavy); border-radius: 50%;
    background: var(--static-white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  }

.range:focus-visible { outline: none; }

.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--primary-normal); outline-offset: 2px; }

.range:focus-visible::-moz-range-thumb      { outline: 2px solid var(--primary-normal); outline-offset: 2px; }

/* ===== 스테퍼 (수량 −/값/+) — <div class="stepper"> ===== */

.stepper {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: var(--background-normal-normal);
    height: 40px; box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

.stepper-btn {
  display: inline-flex;
  flex: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-width: 0px;
  background-color: transparent;
  color: var(--label-normal);
}

.stepper-btn:disabled {
  cursor: not-allowed;
  color: var(--label-disable);
}

.stepper-btn {
    width: 40px; height: 40px; font-size: 20px; line-height: 1;
  }

.stepper-value {
  text-align: center;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-normal);
    min-width: 36px; font-variant-numeric: tabular-nums;
}

.stepper-sm { height: 32px; }

.stepper-sm .stepper-btn   { width: 32px; height: 32px; font-size: 18px; }

.stepper-sm .stepper-value { min-width: 28px; }

/* ===== 메뉴 (오버플로/컨텍스트) — .menu-wrap > 트리거 + .menu[hidden] ===== */

.menu-wrap {
  position: relative;
  display: inline-block;
}

.menu {
  border-radius: var(--radius-lg);
  background-color: var(--background-elevated-normal);
  padding: 0.375rem;
  --tw-shadow: var(--shadow-overlay);
  --tw-shadow-colored: var(--shadow-overlay);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    width: 200px;
}

.menu-pop {
  position: absolute;
  right: 0px;
  z-index: 30;
  margin-top: 0.5rem;
}

.menu-item {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 500;
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.menu-item:hover {
  background-color: var(--fill-alternative);
}

.menu-item:disabled {
  pointer-events: none;
  color: var(--label-disable);
}

.menu-item-icon {
  flex: none;
  color: var(--label-neutral);
}

.menu-item-danger {
  color: var(--status-negative);
}

.menu-item-danger .menu-item-icon {
  color: var(--status-negative);
}

.menu-divider {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  height: 1px;
  border-width: 0px;
  background-color: var(--line-normal-normal);
}

/* ===== 배너 (콘텐츠 내 인라인 공지) — 알럿보다 큰 라벨·닫기 버튼 ===== */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: var(--radius-lg);
  padding: 0.875rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-normal);
    background: var(--blue-95);
}

.banner-icon {
  margin-top: 1px;
  flex: none;
  color: var(--primary-text);
}

.banner-body {
  min-width: 0px;
  flex: 1 1 0%;
  line-height: 1.5;
}

/* 배너 본문의 첫 줄 — 아래 설명문과 굵기로만 나눈다. 배너가 이미 label1 이라 크기는 건드리지 않는다 */

.banner-title {
  margin-bottom: 0.125rem;
  font-weight: 700;
}

.banner-action {
  flex: none;
}

.banner-close {
  flex: none;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  line-height: 1;
  color: var(--label-assistive);
}

.banner-positive   { background: var(--green-95); }

.banner-positive .banner-icon {
  color: var(--status-positive);
}

.banner-negative   { background: var(--red-95); }

.banner-negative .banner-icon {
  color: var(--status-negative);
}

.banner-cautionary { background: var(--orange-95); }

.banner-cautionary .banner-icon { color: var(--accent-foreground-orange); }

.banner-neutral {
  background-color: var(--fill-normal);
}

.banner-neutral .banner-icon {
  color: var(--label-neutral);
}

/* 반전(네이비) 변형 — 흰 전표 위에서 한 번 튀어야 하는 자리(보고서 생성 완료 P-15)에 쓴다.
     옅은 틴트 배너는 바로 아래 흰 전표에 묻혀 "결과 보기"까지 눈이 가지 않았다(260827 대표 지시).
     글자·아이콘은 흰색이고 아이콘은 본문보다 두 급 키워 세로 중앙에 세운다 —
     두 줄짜리 본문 옆에서 아이콘이 첫 줄에 매달리면 덩어리가 위로 쏠린다. */

.banner-invert {
  align-items: center;
  gap: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: var(--static-white); background: var(--secondary-normal);
}

.banner-invert .banner-icon {
  margin-top: 0px;
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--static-white);
}

/* ===== 액션 영역 (하단 고정 CTA 바) ===== */

.action-area {
  position: sticky;
  bottom: 0px;
  z-index: 30;
  width: 100%;
  background-color: var(--background-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
    box-shadow: inset 0 1px 0 var(--line-normal-normal);
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.action-area-extra {
  margin-bottom: 0.625rem;
}

.action-area-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ===== 다이얼로그 (중앙 모달) — 네이티브 <dialog class="dialog"> ===== */

.dialog {
  width: 100%;
  border-radius: var(--radius-2xl);
  background-color: var(--background-elevated-normal);
  padding: 1.5rem;
  --tw-shadow: var(--shadow-overlay);
  --tw-shadow-colored: var(--shadow-overlay);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    max-width: 400px; border: 0;
}

.dialog::backdrop { background: var(--material-dimmer); }

.dialog-title {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal); margin: 0;
}

.dialog-body {
  margin-top: 0.625rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  line-height: 1.5;
  color: var(--label-neutral);
}

.dialog-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ===== 바텀시트 — 네이티브 <dialog class="bottom-sheet"> (하단 앵커) ===== */

.bottom-sheet {
    position: fixed; inset: auto 0 0 0; margin: 0;
    display: flex; flex-direction: column;
    width: 100%; max-width: 100%; max-height: 85vh;
    padding: 0; border: 0;
    background: var(--background-elevated-normal);
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
    box-shadow: var(--shadow-overlay);
  }

.bottom-sheet::backdrop { background: var(--material-dimmer); }

.bottom-sheet-handle {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.125rem;
  margin-top: 0.625rem;
  height: 0.25rem;
  width: 2.25rem;
  flex: none;
  border-radius: 9999px;
  background-color: var(--fill-strong);
}

.bottom-sheet-title {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 0.75rem;
  padding-top: 0.625rem;
  text-align: center;
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal);
}

.bottom-sheet-body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.25rem;
}

.bottom-sheet-footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; box-shadow: inset 0 1px 0 var(--line-normal-normal);
}

/* ===== 캘린더 (월 그리드) — <div class="calendar" data-calendar> ===== */

.calendar {
  border-radius: var(--radius-lg);
  background-color: var(--background-elevated-normal);
  padding: 1rem;
  --tw-shadow: var(--shadow-normal);
  --tw-shadow-colored: var(--shadow-normal);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    width: 300px;
}

.calendar-head {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-title {
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 700;
  color: var(--label-normal);
}

.calendar-nav {
  display: grid;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  place-items: center;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  color: var(--label-neutral);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.calendar-nav:hover {
  background-color: var(--fill-alternative);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.125rem;
}

.calendar-dow {
  display: grid;
  height: 2rem;
  place-items: center;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 600;
  color: var(--label-alternative);
}

.calendar-day {
  display: grid;
  height: 2.25rem;
  cursor: pointer;
  place-items: center;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.calendar-day:hover {
  background-color: var(--fill-alternative);
}

.calendar-day.is-muted {
  color: var(--label-disable);
}

.calendar-day.is-today {
  font-weight: 700;
  color: var(--primary-text);
}

.calendar-day[aria-selected="true"] {
  background-color: var(--primary-normal);
  color: var(--secondary-normal);
}

.calendar-day[aria-selected="true"]:hover {
  background-color: var(--primary-strong);
}

.calendar-day:disabled {
  cursor: not-allowed;
  color: var(--label-disable);
}

.calendar-day:disabled:hover {
  background-color: transparent;
}

/* ===== 페이지 인디케이터 (캐러셀 도트) ===== */

.page-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.page-dot {
  height: 0.5rem;
  width: 0.5rem;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 0px;
  background-color: var(--fill-strong);
  padding: 0px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.page-dot[aria-current="true"] {
  width: 1.25rem;
  background-color: var(--primary-normal);
}

/* ============================================================
     METEALTH Lab 도메인 컴포넌트
     리포트·목록·대시보드가 공유한다. 색 규칙은 .claude/rules/brand.md
     "상태색 사용 규칙" 표가 정본 — 여기서 어긋나면 표에서 오독이 생긴다.
     ============================================================ */

/* ===== 헤더 / GNB =====
     배경은 최상단에서 투명이고, 스크롤하면 흰 면이 깔린다(.is-scrolled — main.js 토글).
     배경이 없는 동안은 밑에 깔린 것이 그대로 보이므로 글자색이 화면마다 갈린다 —
     홈은 히어로가 네이비라 흰 글자(.site-header-over-hero), 업무 화면은 페이지 배경이
     밝아 처음부터 검정이다. 상태 3개 × 요소(제품명·내비·아이콘)를 유틸 클래스로 쓰면
     조합이 터지므로, 색을 --hdr-fg 하나로 모으고 각 요소가 그것을 상속한다.
     로고는 색을 상속할 수 없는 외부 SVG라 파일 두 장을 CSS 로 갈아 끼운다(.site-logo).
     상태별 오버라이드는 이 파일 맨 아래 @layer 밖 블록에 있다. */

.site-header {
  position: sticky;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 40;
  background-color: transparent;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
    --hdr-fg: var(--label-normal);
}

/* 로고 옆 제품명(Lab). 스크롤로 헤더 배경이 바뀌면 글자색도 같은 리듬으로 넘어간다 */

.site-header-brand {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
    color: var(--hdr-fg);
}

/* ===== 브랜드 로고 =====
     헤더·모바일 메뉴·푸터가 공유한다. 워드마크가 티얼이고 A 안쪽 반원만 배경에 따라
     갈리므로(밝은 면 네이비 / 어두운 면 흰색) 파일이 두 장이다 — logo.svg / logo-dark.svg.
     기본 높이는 헤더 기준 16px 이고, 더 크게 쓸 곳은 h-5 처럼 유틸로 덮는다. */

.site-logo {
  display: block;
  height: 1rem;
  width: auto;
}

/* GNB 내비 링크 (내부 이동) — .link-external 은 새 창 외부 링크용.
     캡슐 배경이 없다. 기본은 전부 진하고, 하나에 호버하면 나머지가 흐려진다 —
     고른 것을 밝히는 게 아니라 나머지가 물러나는 방식이다.
     그래서 현재 위치를 칠하는 active 변형이 없다(aria-current 는 스크린리더용으로 마크업에 남긴다). */

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    transition-property: opacity, color;
    color: var(--hdr-fg);
}

.nav-list:hover .nav-link:not(:hover):not(:focus-visible) { opacity: .45; }

/* 헤더 안 아이콘 버튼(프로필 드롭다운·모바일 햄버거) —
     내비와 같은 규칙으로 흐려진다. 캡슐 배경을 두면 GNB에서 걷어낸 캡슐이 옆에 남는다. */

.header-btn {
  display: inline-flex;
  align-items: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
    transition-property: opacity, color;
    color: var(--hdr-fg);
}

.header-btn:hover { opacity: .65; }

/* 넓은 드롭다운 — 기본 .menu(200px)는 프로필+크레딧을 함께 담기에 좁다.
     바텀 여백은 .menu(p-1.5)보다 넉넉히 준다 — 마지막 항목이 상자 밑변에 붙으면
     상단 계정 블록(pt-4)과 여백이 어긋나 항목이 흘러내린 것처럼 보인다. */

.menu-wide { width: 320px; padding-bottom: 0.75rem; }

/* 드롭다운 안 소구획 라벨 */

.menu-section {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.25rem;
  padding-top: 0.5rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--label-alternative);
}

/* 드롭다운 하단 로그아웃 — 목록형 .menu-item과 달리 단독 액션이라
     호버를 배경면이 아니라 글자 농도로 준다(면을 깔면 위 크레딧 블록과 무게가 겹친다) */

.menu-logout {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 500;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.menu-logout:hover {
  font-weight: 600;
  color: var(--label-normal);
}

.menu-logout .menu-item-icon {
  color: var(--label-alternative);
}

.menu-logout:hover .menu-item-icon {
  color: var(--label-normal);
}

/* ===== 히어로 파이프라인 선택 바 (P-01) =====
     3열 카드가 아니라 세로로 쌓은 가로 바다. 이름이 왼쪽 같은 자리에서 시작해
     위아래로 훑으며 하나를 고르는 동작이 된다 — 비교가 아니라 선택이라서. */

.pick-bar {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1.25rem;
  border-radius: var(--radius-2xl);
  background-color: var(--blue-95);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.pick-bar:hover {
  background-color: var(--blue-90);
  --tw-shadow: var(--shadow-strong);
  --tw-shadow-colored: var(--shadow-strong);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {

  .pick-bar {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

.pick-bar-name {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--secondary-normal);
}

@media (min-width: 640px) {

  .pick-bar-name {
    font-size: var(--font-size-title3);
    line-height: var(--line-height-title3);
    letter-spacing: var(--letter-spacing-title3);
  }
}

.pick-bar-meta {
  margin-left: auto;
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--secondary-normal);
}

@media (min-width: 640px) {

  .pick-bar-meta {
    font-size: var(--font-size-body2);
    line-height: var(--line-height-body2-normal);
    letter-spacing: var(--letter-spacing-body2);
  }
}

.pick-bar-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--secondary-normal);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 700;
  color: var(--primary-normal);
}

/* ===== FAQ 카드 — 질문 + 짧은 답 + 분류 태그 ===== */

.faq-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: var(--radius-2xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1.75rem;
}

@media (min-width: 768px) {

  .faq-card {
    padding: 2rem;
  }
}

.faq-card-q {
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
  font-weight: 700;
  line-height: 1.375;
  color: var(--label-normal);
}

.faq-card-a {
  margin-top: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* 태그는 mt-auto 로 카드 바닥에 붙인다 — 질문 길이가 달라도 아랫줄이 맞는다 */

.faq-card-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 1.5rem;
}

/* ===== 홈 섹션 헤드 (P-01) =====
     번호(01·02) → 큰 헤드라인 → 리드 문단 순. 중앙 정렬이 기본이고
     좌우 2단 섹션(키트)에서는 .section-head-left 로 바꿔 쓴다.
     헤드라인이 title2→title1→display3 로 커지는 이유: 홈만 랜딩 성격이라
     업무 화면 제목(title2→title1)보다 한 단계 위 스케일을 쓴다. */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.section-head-title {
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--label-normal);
}

@media (min-width: 768px) {

  .section-head-title {
    font-size: var(--font-size-title1);
    line-height: var(--line-height-title1);
    letter-spacing: var(--letter-spacing-title1);
  }
}

@media (min-width: 1024px) {

  .section-head-title {
    font-size: var(--font-size-display3);
    line-height: var(--line-height-display3);
    letter-spacing: var(--letter-spacing-display3);
  }
}

.section-head-lead {
  margin-top: 1.5rem;
  max-width: 720px;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-reading);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--label-alternative);
}

/* 다크 표면(히어로) 위 소제목 라벨 — 네이비 위 티얼 원색은 7.25:1 */

.eyebrow-dark {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--primary-normal);
}

/* ===== 성능 지표 카드 (홈 — 히어로 아래 BullsEYE 근거) =====
     라벨(h3)은 카드 위, 값과 부연은 카드 아래에 붙는다(260824 대표 결정) —
     무엇을 재는 지표인지 먼저 읽히고, 수치와 근거가 한 덩어리로 아래에 앉는다.
     아이콘을 두지 않고 수치 자체를 비주얼로 세운다. 값은 tabular-nums 로 자리를 고정한다.
     배경은 카드마다 다른 이미지라 CSS가 아니라 <img>로 넣는다. 이미지와 본문을 같은
     그리드 칸에 겹쳐 두면 카드 비율을 이미지(7:5)가 정하고, 글이 더 길어지는 폭에서는
     카드가 늘어나면서 이미지가 그만큼 늘어나 배경이 끝까지 차 있다.
     값에 mt-auto 를 줘 남는 높이를 라벨과 값 사이에서 흡수한다 — 카드 높이가 달라져도
     라벨은 윗선, 값·부연은 아랫선에 맞는다(justify-between 이 아니라 mt-auto 인 이유:
     값과 부연은 mt-3 간격으로 붙어 있어야 하고 그 둘 사이가 벌어지면 안 된다).
     글자는 `static-white` 고정이다 — 배경이 테마와 무관한 이미지라
     `label-normal`·`inverse-label`처럼 다크 모드에서 뒤집히는 토큰을 쓸 수 없다.
     글자 그림자는 배경이 이미지라 밝은 부분(1번 카드의 은색 면·2번 카드의 하이라이트)에서
     흰 글자가 묻히는 것을 막는다. box-shadow 토큰은 면(카드) 기준이라 여기 쓸 수 없어
     text-shadow 는 이 컴포넌트 안에서만 직접 값을 준다.
     ★ 세 줄의 농도가 글자 크기와 반대로 간다(값 0.14 < 라벨 0.20 < 부연 0.32 — 260824 대표 결정).
     큰 글자는 획이 굵어 이미 배경과 분리되므로 그림자를 진하게 주면 글자가 탁해 보이고,
     작은 부연은 획이 얇아 그만큼 받쳐 줘야 밝은 면에서 읽힌다.
     블러는 넉넉히 주고 값이 가장 넓다(값 14px > 라벨·부연 6px — 260824 대표 결정) —
     좁은 블러는 글자 윤곽을 따라붙어 테두리처럼 딱딱해지고, 넓게 퍼뜨리면 배경이
     한 단계 가라앉으면서 그림자 자체는 눈에 띄지 않는다.
     상속을 쓰지 않고 세 줄에 각각 주는 이유가 이 농도 차이다. */

.stat-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-3xl);
}

.stat-card > *   { grid-area: 1 / 1; }

.stat-card-bg {
  aspect-ratio: 7/5;
  width: 100%;
  align-self: stretch;
  object-fit: cover;
}

.stat-card-body {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

@media (min-width: 768px) {

  .stat-card-body {
    padding: 2.5rem;
  }
}

.stat-card-label {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  line-height: 1.375;
  color: var(--static-white); text-shadow: 0 1px 6px rgba(0,0,0,0.20);
}

.stat-card-value {
  margin-top: auto;
  padding-top: 1.75rem;
  font-size: var(--font-size-display2);
  line-height: var(--line-height-display2);
  letter-spacing: var(--letter-spacing-display2);
  font-weight: 700;
  line-height: 1;
  color: var(--static-white);
}

@media (min-width: 1024px) {

  .stat-card-value {
    font-size: var(--font-size-display1);
    line-height: var(--line-height-display1);
    letter-spacing: var(--letter-spacing-display1);
  }
}

.stat-card-value { font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0,0,0,0.14); }

.stat-card-note {
  margin-top: 0.75rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-reading);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--static-white); text-shadow: 0 1px 6px rgba(0,0,0,0.32);
}

/* ===== 분석 상태 배지 — 5종 고정 (ia.md "분석 건 상태") =====
     틴트 알약이 아니라 색점 + 문구다. 알약은 한 행에 하나일 때는 읽히지만 목록에서는
     스무 개가 색색으로 떠서 정작 봐야 할 파일명·수치보다 먼저 눈에 든다.
     색만으로 구분하지 않는다는 규칙(brand.md)은 상태명이 늘 붙어 있는 것으로 지킨다 —
     점은 훑을 때의 보조 신호이고, 값 자체는 글자가 갖는다. */

.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-normal);
}

.state-badge::before {
    content: "";
    height: 0.375rem;
    width: 0.375rem;
    flex: none;
    border-radius: var(--radius-pill);
    background-color: var(--fill-strong);
  }

.state-wait::before {
  background-color: var(--fill-strong);
}

/* 대기 */

.state-running::before {
  background-color: var(--primary-normal);
}

/* 분석 중 */

.state-analyzed::before {
  background-color: var(--label-assistive);
}

/* 분석 완료 — 보고서 생성 전 */

.state-report::before {
  background-color: var(--status-positive);
}

/* 보고서 생성 완료 */

.state-failed::before {
  background-color: var(--status-negative);
}

/* 실패 */

/* 실패만 글자까지 물들인다 — 다음 행동(재신청)이 필요한 유일한 상태다 */

.state-failed {
  font-weight: 600;
  color: var(--status-negative);
}

.state-wait {
  color: var(--label-alternative);
}

/* ===== 데이터 표 ===== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
}

/* 머리행은 본문보다 진한 선으로 끊는다 — 행 구분선과 같은 농도면 첫 행이 머리처럼 읽힌다 */

.data-table thead th {
  white-space: nowrap;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-alternative);
}

.data-table tbody td {
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-normal);
}

.data-table tbody tr:last-child td {
  border-bottom-width: 0px;
}

.data-table-hover tbody tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.data-table-hover tbody tr:hover {
  background-color: var(--fill-alternative);
}

/* 수치 셀 — 자릿수 고정. 표에서 숫자가 흔들리면 비교가 안 된다 */

.data-num {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* 인라인 숫자 — 정렬 없이 자릿수만 고정 */

.num       { font-variant-numeric: tabular-nums; }

/* 선택자에 .data-table tbody 를 끼우는 이유: `.data-table tbody td`(0,1,2)가 글자 급을 걸고 있어
     `.data-mono`(0,1,0) 단독으로는 눌리지 않는다(카드 전환의 td 규칙과 같은 사정). */

.data-mono {
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

.data-table tbody .data-mono {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
}

/* 행 전체가 상세로 가는 표 — 실제 이동은 셀 안의 <a>가 하고 JS가 행 클릭을 그리로 넘긴다 */

.row-link {
  cursor: pointer;
}

.row-target {
  font-weight: 600;
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.row-target:hover {
  color: var(--primary-text);
}

/* 정렬 가능한 머리칸 — <th aria-sort> 안에 <button class="th-sort"> */

.th-sort {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-sm);
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.th-sort:hover {
  color: var(--label-normal);
}

[aria-sort="ascending"] .th-sort,
  [aria-sort="descending"] .th-sort {
  font-weight: 700;
  color: var(--label-normal);
}

.th-sort-icon {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--label-assistive);
}

[aria-sort="ascending"] .th-sort-icon,
  [aria-sort="descending"] .th-sort-icon {
  color: var(--primary-text);
}

/* 표를 유지하는 구간 (768 이상) — 카드로 접는 것은 모바일뿐이다.
     7칸 표는 1280 아래에서 기본 여백(px-4)으로는 칸이 서로를 민다. 여백을 줄이고
     보조 한 칸(분석일자)만 한 급 내려 파일명·상태·수치는 그대로 둔다.
     어느 칸도 줄을 바꾸지 않는다 — 접히면 값이 쪼개져 못 읽는다
     (`2026-08-24` → `2026-08-` + `24`, `결과 보기` → 두 줄). */

@media (min-width: 768px) {
    .data-table-compact thead th,
    .data-table-compact tbody td {
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
    .data-table-compact tbody .c-date {
    font-size: var(--font-size-label1);
    line-height: var(--line-height-label1-normal);
    letter-spacing: var(--letter-spacing-label1);
  }
  }

/* 7칸이 폭 안에 다 들어가지 않는 구간 (768~1151) — 칸을 눌러 글자를 두 줄로 접는 대신
     표째 가로로 민다. min-width 는 1152 에서의 칸 폭 그대로여서 같은 표가 폭만 잘려 보인다.
     이 구간에서는 머리행 고정을 걸지 않는다 — 스크롤 컨테이너 안에서는 고정이 풀린다. */

@media (min-width: 768px) and (max-width: 1151.98px) {
    .data-table-scroll {
    overflow-x: auto;
  }
    .data-table-compact { min-width: 800px; }
  }

/* 머리행 고정 — 무한 스크롤로 목록이 길어지면 열 이름이 화면 밖으로 나간다.
     top 은 sticky GNB 높이(h-16 = 64px). 1152 부터인 이유는 그 아래에서 표를 가로로 미는
     스크롤 컨테이너가 생기고, 그 안에서는 sticky 가 화면이 아니라 컨테이너를 기준으로 잡혀 죽는다. */

@media (min-width: 1152px) {
    .data-table-sticky thead th {
    position: sticky;
    z-index: 10;
    background-color: var(--background-normal-normal);
      top: 64px;
  }
    /* 고정된 머리칸은 흰 배경을 깔고 z-10 으로 떠서, 표를 감싼 카드의 둥근 모서리를
       위에서 덮어 테두리 곡선을 잘라 먹는다. 양 끝 칸도 같은 반경으로 깎아 곡선을 비운다
       (카드 반경 16 − 테두리 1). */
    .data-table-sticky thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius-xl) - 1px); }
    .data-table-sticky thead tr:first-child th:last-child  { border-top-right-radius: calc(var(--radius-xl) - 1px); }
  }

/* 7칸은 1120 안에 표 기본 여백으로 들어간다 — 좁은 폭에서 눌러 둔 여백과 글자 급을
     여기서 되돌린다. 칸이 서로를 밀지 않는 폭에서까지 좁혀 두면 이 화면만 빽빽해 보인다. */

@media (min-width: 1280px) {
    .data-table-compact thead th,
    .data-table-compact tbody td {
    padding-left: 1rem;
    padding-right: 1rem;
  }
    .data-table-compact tbody .c-date {
    font-size: var(--font-size-body2);
    line-height: var(--line-height-body2-normal);
    letter-spacing: var(--letter-spacing-body2);
  }
  }

/* 행 → 카드 전환 (768 미만, 모바일) — 표를 세로로 훑을 수 없는 폭에서만 접는다(FR-LIST-10).
     태블릿 가로부터는 표 그대로다 — 담당자가 매일 여러 건을 나란히 비교하는 화면이라
     칸이 맞아야 훑힌다.
     한 벌의 마크업을 재배치하는 방식이라 무한 스크롤이 뒤에 붙이는 행도 그대로 카드가 된다.
     셀 라벨은 td[data-label] 로 주고 표에서는 머리행이 대신한다. */

@media (max-width: 767.98px) {
    /* 선택자에 tbody 를 끼우는 이유: 위 `.data-table tbody td`(0,1,2)가 padding·border 를
       걸고 있어 `.data-table-cards td`(0,1,1)로는 눌리지 않는다. 빼면 카드에 표 여백이 남는다. */
    .data-table-cards,
    .data-table-cards tbody,
    .data-table-cards tbody tr,
    .data-table-cards tbody td {
    display: block;
  }
    .data-table-cards thead {
    display: none;
  }
    /* 행이 이미 카드다 — 감싼 카드의 테두리까지 있으면 상자가 겹친다. 바깥 테두리를 떼고
       카드가 위 검색 조건과 같은 선에서 시작하게 한다. */
    .list-card {
    border-radius: 0px;
    border-width: 0px;
    background-color: transparent;
  }
    .data-table-cards tbody {
    display: grid;
    gap: 0.75rem;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 1rem;
    padding-top: 0px;
  }
    .data-table-cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.625rem;
    row-gap: 0.375rem;
    border-radius: var(--radius-xl);
    border-width: 1px;
    border-color: var(--line-normal-normal);
    background-color: var(--background-normal-normal);
    padding: 1rem;
  }
    .data-table-cards tbody td {
    width: auto;
    border-width: 0px;
    padding: 0px;
    font-size: var(--font-size-label1);
    line-height: var(--line-height-label1-normal);
    letter-spacing: var(--letter-spacing-label1);
    color: var(--label-neutral);
  }
    .data-table-cards tbody td:empty {
    display: none;
  }
    .data-table-cards tbody td[data-label]::before {
      content: attr(data-label) " ";
      margin-right: 0.25rem;
      font-size: var(--font-size-label2);
      line-height: var(--line-height-label2);
      letter-spacing: var(--letter-spacing-label2);
      font-weight: 500;
      color: var(--label-alternative);
    }
    /* 카드 안 배치 — 유형·상태가 한 줄, 파일명이 제목, 메타·액션이 아래. */
    .data-table-cards tbody .c-type {
    order: 1;
  }
    .data-table-cards tbody .c-status {
    order: 2;
    margin-left: auto;
  }
    .data-table-cards tbody .c-file {
    order: 3;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    width: 100%;
    font-size: var(--font-size-headline2);
    line-height: var(--line-height-headline2);
    letter-spacing: var(--letter-spacing-headline2);
    color: var(--label-normal);
  }
    .data-table-cards tbody .c-acc {
    order: 5;
  }
    .data-table-cards tbody .c-var {
    order: 7;
    text-align: left;
  }
    .data-table-cards tbody .c-date {
    order: 8;
  }
    .data-table-cards tbody .c-action {
    order: 9;
    margin-top: 0.5rem;
    width: 100%;
  }
    /* 카드에서는 텍스트 버튼이 약해 보인다 — 테두리를 둘러 탭 영역을 만든다 */
    .data-table-cards tbody .c-action > * {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-md);
    border-width: 1px;
    border-color: var(--line-normal-normal);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  }

/* ===== 지금 처리할 것 (P-14 상단 카드) =====
     조회 전용 현황판이다 — 누르지 않는다(260827 대표 결정). 그래서 커서·호버·선택 상태가 없다.
     목록을 좁히는 일은 아래 파이프라인 탭·상태·기간이 전부 맡는다.

     색은 원색 면이 아니라 한 톤 옅은 틴트다 — 이 화면의 주인공은 목록이라
     카드가 원색을 두르면 표보다 카드를 먼저 보게 된다.
     라벨은 회색으로 두고 값과 아이콘만 그 묶음의 색을 든다. 색은 전부 토큰 램프에서 가져온다. */

/* 페이지 머리·목록과 넉넉히 떼어 둔다 — 붙여 두면 제목·카드·필터가 한 덩어리로 뭉쳐
     세 구역의 경계가 사라진다. 아래 여백은 목록 쪽 mt 와 같은 값으로 맞춘다. */

.focus-deck {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {

  .focus-deck {
    margin-top: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.focus-card {
  display: grid;
  align-items: center;
  border-radius: var(--radius-xl);
  border-width: 0px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label icon"
      "value icon";
    /* 라벨과 값 사이 — 붙여 두면 둘이 한 덩어리로 읽힌다 */
    row-gap: 14px;
    background-color: var(--focus-card-tint);
}

.focus-card-label {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-alternative); grid-area: label;
}

.focus-card-value {
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  letter-spacing: var(--letter-spacing-title3);
  font-weight: 700;
  line-height: 1;
    grid-area: value;
    color: var(--focus-card-ink);
    font-variant-numeric: tabular-nums;
}

/* 아이콘은 오른쪽에 크게 얹는 장식이다 — 값과 같은 색을 옅게 써서 숫자를 이기지 않게 한다 */

.focus-card-icon {
    grid-area: icon;
    font-size: 52px;
    line-height: 1;
    color: var(--focus-card-ink);
    opacity: .5;
  }

@media (min-width: 640px) {
    .focus-card {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem; row-gap: 18px;
  }
    .focus-card-icon { font-size: 58px; }
  }

.focus-card-progress { --focus-card-tint: var(--blue-95);   --focus-card-ink: var(--primary-text); }

.focus-card-unread   { --focus-card-tint: var(--violet-95); --focus-card-ink: var(--violet-45); }

.focus-card-failed   { --focus-card-tint: var(--red-95);    --focus-card-ink: var(--red-40); }

/* 0건이면 색을 뺀다 — 할 일이 없다는 것도 읽어야 할 값이다 */

.focus-card.is-empty {
    --focus-card-tint: var(--fill-alternative);
    --focus-card-ink: var(--label-disable);
  }

/* ===== 목록 필터 바 =====
     파이프라인(왼쪽) 과 좁히는 조건(오른쪽)을 한 줄에 두되 사이를 벌려 역할을 가른다.
     컨트롤 높이를 40px 로 맞추지 않으면 서치필드(44) 와 select(36) 가 어긋나 줄이 흔들린다. */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 1280px) {

  .filter-bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* 좁히는 조건은 한 덩어리로 묶어 오른쪽에 붙인다. 좁은 폭에서는 줄이 바뀌며 왼쪽 정렬로 풀린다 —
     빈 스페이서로 밀면 그 스페이서가 혼자 한 줄을 차지하는 폭이 생긴다. */

.filter-bar-tools {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {

  .filter-bar-tools {
    width: auto;
    flex: 1 1 0%;
    justify-content: flex-end;
  }
}

.filter-control    { height: 40px; }

.filter-range {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* 표 밖에 두는 변형 (P-14) — 카드 안 첫 줄에 두면 그 띠가 표 머리행처럼 읽혀
     진짜 열 이름이 둘째 줄로 밀린다. 테두리와 좌우 여백을 걷어 카드 위에 그대로 얹는다. */

.filter-bar-outer {
  border-bottom-width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

@media (min-width: 1280px) {

  .filter-bar-outer {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* ===== 걸린 조건 줄 =====
     무엇이 목록을 좁히고 있는지 보여주고 하나씩 뗀다. 조건이 없으면 줄째 사라진다 —
     매일 보는 화면이라 평소에는 표와 검색만 남아 있어야 한다. */

.cond-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.375rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--fill-alternative);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

@media (min-width: 1280px) {

  .cond-bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.cond-bar-label {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-alternative);
}

.cond-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

/* 표 밖(필터 바 아래)에 놓일 때 — 회색 띠를 걷는다. 칩이 이미 자기 윤곽을 갖고 있어
     띠까지 있으면 카드 위에 정체 모를 상자가 하나 더 생긴다. */

.cond-bar-outer {
  margin-top: 0.75rem;
  border-bottom-width: 0px;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

@media (min-width: 1280px) {

  .cond-bar-outer {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.cond-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background-color: var(--background-normal-normal);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-normal);
    box-shadow: inset 0 0 0 1px var(--line-normal-normal);
}

.cond-chip-x {
  display: grid;
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  cursor: pointer;
  place-items: center;
  border-radius: var(--radius-pill);
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--label-assistive);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.cond-chip-x:hover {
  color: var(--label-normal);
}

/* ===== 목록 필터 바 컨트롤 =====
     .select 은 py-3·body1 이라 목록 상단 한 줄에 들어가면 서치필드(44px)보다 커진다. */

.select-sm {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 2.25rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
    background-position: right 8px center;
}

.date-input {
  border-radius: var(--radius-md);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.date-input:focus {
  border-color: var(--primary-normal);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ===== 빈 상태 — 목록·표·검색 결과가 0건일 때 (FR-COMMON-10) ===== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}

/* 솔리드(Solar bold) 아이콘 · mb 로 아이콘과 제목 사이만 한 칸 더 띄운다 */

.empty-state-icon {
  margin-bottom: 0.5rem;
  font-size: 3rem;
  line-height: 1;
  color: var(--label-disable);
}

.empty-state-title {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
}

.empty-state-desc {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* ===== 무한 스크롤 꼬리 — 로딩 스켈레톤 · 끝 안내 ===== */

.list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* flex + gap 으로 두면 `<span>28</span>건` 사이가 gap 만큼 벌어져 "28 건" 으로 읽힌다 */

.list-end {
  text-align: center;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

/* ===== 막대 차트 (월별 사용량) =====
     높이는 데이터값이라 --v 인라인 변수로 주입한다 (coding.md §2-1 동적값 예외,
     .progress-fill 의 width 와 같은 패턴). */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
}

@media (min-width: 640px) {

  .chart {
    gap: 0.625rem;
  }
}

.chart     { height: 168px; }

.chart-col {
  display: flex;
  height: 100%;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
}

.chart-bar {
  width: 100%;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  background-color: var(--blue-90);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 280ms;
  transition-timing-function: var(--ease-standard);
    height: var(--v, 0%); min-height: 3px;
}

.chart-bar-on {
  background-color: var(--primary-normal);
}

.chart-x {
  text-align: center;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  color: var(--label-alternative);
}

/* ===== 지표 블록 ===== */

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metric-label {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.metric-value {
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  letter-spacing: var(--letter-spacing-title3);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

/* ============================================================
     분석 신청 위저드 (P-09~P-12 · P-23 공통)
     스텝 인디케이터와 하단 요약 바는 다섯 스텝이 같은 컴포넌트를 쓰고
     aria-current / 표시값만 갈린다.
     ============================================================ */

/* ===== 스텝 표시 — 제목 위 한 줄이 다섯 단계 이름을 다 든다 ★
     칸으로 나눈 진행 막대(.step-bar)를 걷어냈다. GNB 는 현재 위치를 색으로 칠하지 않는데
     (.nav-link 에 active 변형이 없다) 그 아래 h-1 풀폭 티얼 막대가 오면 헤더 구역에서
     규칙이 어긋나고, 그 형태가 브라우저 로딩바와 같아 콘텐츠가 아니라 크롬으로 읽힌다.
     막대가 준 정보는 "몇 칸 중 하나"라는 비율뿐이고 정작 궁금한 단계 이름은 sr-only 에
     있어 눈으로 보는 사람만 못 봤다 — 이름을 꺼내면 막대가 없어도 된다.
     레일을 걷어냈던 이유(첫 줄은 이번에 할 일이 가져간다)는 그대로 지킨다. 이 줄은
     기존 라벨(1 / 5 · 파이프라인)이 쓰던 그 한 줄을 쓰고 머리 높이를 늘리지 않는다.
     뒤쪽 스텝이 파일 업로드 · 신청 확인(크레딧 실차감)이라, 언제 파일이 필요하고 언제 돈이
     나가는지를 1 스텝에서 미리 보여주는 것이 이름을 펴는 진짜 이유다. ===== */

/* 좌우 간격이 리스트(3)보다 좁은 이유 — 이 간격은 좁은 폭에서 "1 / 5 ·" 와 단계 이름
     사이에만 쓰이고, 거기선 마침표 뒤 한 칸으로 읽혀야 한다(md 이상은 숫자가 숨어 안 쓰인다). */

/* min-h-6 — 이 줄의 높이를 내용이 아니라 값으로 고정한다. 스텝 줄은 구분자(›)가 heading2 라
     라벨(label2)보다 높고, 충전 화면의 되돌아가기 줄은 그렇지 않아 그대로 두면 제목이 3px 어긋난다.
     두 화면을 오갈 때 줄과 제목이 튀지 않으려면 이 자리의 높이가 같아야 한다. */

.wizard-steps {
  display: flex;
  min-height: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
}

/* 스텝 줄이 서던 자리에 그대로 서는 되돌아가기 링크 (크레딧 충전 P-07).
     급을 label2 semibold 로 맞춰야 신청 ↔ 충전을 오갈 때 이 줄이 위아래로 튀지 않는다. */

.wizard-back {
    /* inline-flex 가 아니라 flex 다 — 인라인이면 부모의 줄 상자(strut)가 아래에 몇 px 를 더 얹어
       스텝 줄(블록인 <nav>)과 높이가 어긋난다. w-fit 으로 클릭 영역만 글자 폭에 맞춘다. */
    display: flex;
    min-height: 1.5rem;
    width: fit-content;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-label2);
    line-height: var(--line-height-label2);
    letter-spacing: var(--letter-spacing-label2);
    font-weight: 600;
    color: var(--primary-text);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 120ms;
    transition-timing-function: var(--ease-standard);
  }

.wizard-back:hover {
  opacity: 0.7;
}

.wizard-steps-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
}

/* 모바일 전용 앞머리 — 이름 네 개가 줄바꿈되는 폭에서는 현재 단계만 세우므로
     몇 번째인지를 이 숫자가 대신 말한다(md 이상은 이름이 다 보여 필요 없다). */

.wizard-steps-count {
  color: var(--primary-text);
}

@media (min-width: 768px) {

  .wizard-steps-count {
    display: none;
  }
}

/* 기본이 숨김인 이유 — 좁은 폭에는 현재 단계 하나만 선다.
     지난 단계는 되돌아갈 수 있어 링크, 남은 단계는 흐리게 눌러 현재 단계 혼자 진하다. */

.step {
  display: none;
}

@media (min-width: 768px) {

  .step {
    display: flex;
    align-items: center;
  }
}

.step.is-current {
  display: flex;
  color: var(--primary-text);
}

.step.is-done {
  color: var(--label-neutral);
}

.step.is-todo {
  color: var(--label-alternative);
}

.step-back {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.step-back:hover {
  color: var(--label-normal);
}

/* 구분자 — 좁은 폭엔 현재 단계뿐이라 md 이상에서만 세운다(형제 선택자는 DOM 기준이라
     여기 두지 않으면 숨은 앞 단계 뒤로 구분자만 남는다).
     content 의 / "" 는 생성 텍스트의 접근성 이름을 비워 스크린리더가 "›" 를 읽지 않게 한다.
     이 문법을 모르는 구형 브라우저는 앞 줄로 떨어져 구분자를 그대로 읽는다. */

@media (min-width: 768px) {
    .step + .step::before {
      content: "\203A";
      content: "\203A" / "";
      /* 라벨(label2)을 그대로 물려받으면 › 는 획이 얇고 글리프가 작게 그려져 점처럼 보인다.
         구분자만 급을 올리고 leading-none 으로 줄 높이는 라벨에 맞춘다. */
      margin-right: 0.75rem;
      font-size: var(--font-size-heading2);
      line-height: var(--line-height-heading2);
      letter-spacing: var(--letter-spacing-heading2);
      line-height: 1;
      color: var(--label-assistive);
    }
  }

/* ===== 선택 행 — 라디오 하나가 행 전체를 차지한다.
     설명이 길고 항목 수가 많은 단일 선택에 쓴다(항목이 서너 개고 이름만으로 갈리면
     .pipeline-deck 쪽이 맞다). 포커스 링은 .radio-dot 이 이미 갖고 있어 행에 따로 두지 않는다. ===== */

.option-row {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.875rem;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.option-row:hover {
  border-color: var(--line-normal-strong);
  background-color: var(--fill-alternative);
}

@media (min-width: 640px) {

  .option-row {
    padding: 1.25rem;
  }
}

.option-row:has(.radio-input:checked) {
  border-color: var(--primary-normal);
  background-color: var(--blue-99);
}

.option-row-body {
  min-width: 0px;
  flex: 1 1 0%;
}

.option-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--label-normal);
}

.option-row-desc {
  margin-top: 0.25rem;
  display: block;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

/* ===== 파이프라인 카드 덱 (P-11) — 엔진 세 개를 세로 카드로 늘어놓는다 =====
     카드는 태그 · 엔진명 · 설명을 항상 다 들고 있다. 접었다 펴는 카드는 고르기 전에
     한 장씩 열어 봐야 해서, 세 개를 나란히 비교하는 이 자리에는 맞지 않는다.
     칸 너비도 셋이 항상 같다 — 호버로 폭이 움직이면 옆 카드가 밀려 커서가 그 카드를 놓친다.
     lg 미만에서는 세로로 쌓는다 — 태블릿 폭에서 세 장을 나란히 두면 접힌 카드가
     엔진명 한 줄도 못 들고 있다. ===== */

/* 폭은 .container-base 가 정한다 — 덱이 따로 폭을 들면 제목과 왼쪽 끝이 다시 어긋난다 */

.pipeline-deck {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 1024px) {

  .pipeline-deck {
    height: 18rem;
    flex-direction: row;
  }
}

.pipeline-slot {
  display: flex;
}

@media (min-width: 1024px) {

  .pipeline-slot {
    min-width: 0px;
    flex: 1 1 0%;
  }
}

.pipeline-card {
  position: relative;
  display: flex;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1.25rem;
}

.pipeline-card:hover {
  border-color: var(--line-normal-strong);
}

@media (min-width: 1024px) {

  .pipeline-card {
    padding: 1.5rem;
  }
}

.pipeline-card {
    transition-property: border-color, background-color, box-shadow;
    transition-duration: 120ms;
    transition-timing-function: var(--ease-standard);
  }

/* 고른 카드 — 라디오 점을 두지 않으므로 테두리를 한 겹 덧대 색 말고도 갈리게 한다.
     border-width 를 키우면 안쪽 내용이 1px 밀리므로 inset 그림자로 두껍게 보이게 한다. */

.pipeline-slot:has(.radio-input:checked) .pipeline-card {
  border-color: var(--primary-normal);
  background-color: var(--blue-99);
    box-shadow: inset 0 0 0 1px var(--primary-normal);
}

/* 라디오가 sr-only 라 포커스 링을 받을 자리가 없다 — 카드가 대신 받는다 */

.pipeline-card:has(.radio-input:focus-visible) {
    outline: 2px solid var(--primary-heavy);
    outline-offset: 2px;
  }

.pipeline-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* 이름과 설명은 카드 바닥에 붙인다 — 위쪽 여백이 카드를 세로로 세운다.
     설명 길이를 세 장 비슷하게 맞춰 두면 바닥이 같이 떨어진다.
     lg 미만에서는 카드가 세로로 쌓여 높이가 내용에 맞춰지므로 mt-auto 가 벌릴 여백이 없다 —
     태그와 엔진명이 붙어 버리니 고정 여백을 준다(설명과의 8px보다 넓어야 태그가 따로 읽힌다). */

.pipeline-card-foot {
  margin-top: 1rem;
}

@media (min-width: 1024px) {

  .pipeline-card-foot {
    margin-top: auto;
  }
}

.pipeline-card-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal);
}

.pipeline-card-desc {
  display: block;
  padding-top: 0.5rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* ===== 폼 필드 묶음 — 라벨 · 도움말 · 오류가 한 벌 ===== */

.field-label {
  display: block;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.field-hint {
  margin-top: 0.375rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

/* .field:focus 와 특이도를 맞춰야 오류 상태가 포커스에 덮이지 않는다 */

.field-error {
  border-color: var(--status-negative);
}

.field-error:focus {
  border-color: var(--status-negative);
}

/* 오류를 색만으로 알리지 않는다 — 아이콘과 문구를 함께 둔다 */

.field-msg {
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--status-negative);
}

/* ===== 하단 고정 요약 바 — 예상 차감 · 잔여 크레딧 ===== */

/* mt-auto — 콘텐츠가 짧아 .wizard-form 에 남는 높이가 생기면 바를 그 아래로 민다.
     스크롤이 생기는 긴 페이지에서는 남는 높이가 0 이라 평소와 같이 sticky 로만 동작한다. */

.summary-bar {
  position: sticky;
  bottom: 0px;
  z-index: 30;
  margin-top: auto;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
}

.summary-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* 이전·다음은 한 쌍의 액션이라 바의 gap-x-6 보다 붙여 둔다 —
     지표(예상 차감·잔여) 간격은 건드리지 않고 이 그룹 안에서만 좁힌다. */

.summary-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.summary-metric {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.summary-metric-label {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.summary-metric-value {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
    font-variant-numeric: tabular-nums;
}

/* ===== 크레딧 부족 게이트 (P-23, FR-REQ5-04) =====
     요약 바 안에서 지표 줄 위에 한 줄로 눕는다 — 제출을 막는 유일한 게이트라
     "분석 신청" 을 누르러 온 시선이 반드시 지나가는 자리에 있어야 한다. */

.summary-bar-gate {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--orange-95);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.summary-bar-gate-text {
  min-width: 0px;
  flex: 1 1 0%;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

/* ============================================================
     다중 선택 드롭다운 (P-11 Patient Symptoms, FR-REQ3-03·04)
     47개를 한 목록에 펴면 고를 수가 없어 카테고리로 묶고 검색을 함께 둔다.
     고른 것은 패널 밖 칩으로 빼 둔다 — 패널 안에만 두면 몇 개 골랐는지
     확인하러 매번 다시 열게 된다.
     ============================================================ */

.msel {
  position: relative;
}

/* 트리거는 .field 와 같은 치수를 쓴다 — 위아래 입력칸과 높이가 어긋나면 폼이 흔들린다 */

.msel-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.msel-trigger:hover {
  border-color: var(--line-normal-strong);
}

.msel-trigger[aria-expanded="true"] {
  border-color: var(--primary-normal);
}

.msel-trigger:focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; }

.msel-trigger-text {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msel-trigger-icon {
  flex: none;
  color: var(--label-assistive);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.msel-trigger[aria-expanded="true"] .msel-trigger-icon {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* 패널은 트리거 바로 아래에 겹쳐 뜬다. 좁은 폭에서도 화면을 넘지 않게 높이를 묶고
     목록만 스크롤시킨다 — 검색창과 닫기는 늘 보여야 한다. */

.msel-panel {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  z-index: 40;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background-color: var(--background-elevated-normal);
  --tw-shadow: var(--shadow-overlay);
  --tw-shadow-colored: var(--shadow-overlay);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    max-height: min(420px, 70vh);
    /* hidden 이면 패널 자체가 스크롤 컨테이너가 된다 — 목록 아래쪽 항목을 고르는 순간
       브라우저가 포커스를 보이려고 패널을 통째로 밀어 올려, 내용이 사라지고 흰 상자만
       남는다. clip 은 스크롤 컨테이너를 만들지 않아 그 일이 구조적으로 일어나지 않는다. */
    overflow: hidden; /* clip 미지원 브라우저 폴백 */
    overflow: clip;
}

/* 헤더 자체가 검색창으로 읽힌다 — 안쪽 필드는 테두리를 지우고, 헤더 밑줄이 그 자리를 대신한다 */

.msel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1rem;
  padding-right: 1rem;
}

.msel-count {
  flex: none;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

/* 위쪽 패딩을 두지 않는다 — 스티키 제목은 콘텐츠 상자 기준으로 붙어서, 패딩만큼
     제목 위에 틈이 남고 그리로 지나가는 항목이 비친다. 첫 분류 여백은 margin 으로 준다. */

.msel-list {
  min-height: 0px;
  flex: 1 1 0%;
  overflow-y: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
}

.msel-group {
  margin-bottom: 0.25rem;
}

.msel-group:first-child {
  margin-top: 0.5rem;
}

/* 스크롤 중에도 지금 보는 항목이 어느 분류인지 남아야 한다 */

.msel-group-title {
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--background-elevated-normal);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--label-alternative);
}

.msel-option {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-md);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.msel-option:hover {
  background-color: var(--fill-alternative);
}

.msel-option-text {
  min-width: 0px;
  flex: 1 1 0%;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-normal);
}

/* 상한을 넘으면 안 고른 것만 잠근다 — 고른 것은 계속 해제할 수 있어야 한다 */

.msel-option.is-locked {
  cursor: not-allowed;
  opacity: 0.4;
}

.msel-empty {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.msel-foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding: 0.75rem;
}

.msel-chips {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.msel-chips:empty {
  margin-top: 0px;
}

.msel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--blue-95);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.375rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--primary-text);
}

.msel-chip-remove {
  display: grid;
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  place-items: center;
  border-radius: var(--radius-pill);
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--primary-text);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.msel-chip-remove:hover {
  background-color: var(--blue-90);
}

.msel-limit {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--status-cautionary);
}

/* ============================================================
     파일 업로드 (P-12, FR-REQ4-01~05)
     ============================================================ */

/* 끌어 놓는 자리는 "여기가 과녁"이라고 보여야 해서 이 화면에서만 파선을 쓴다.
     들어오는 순간 티얼로 갈아 신어 커서가 유효한 자리에 있음을 알린다. */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-xl);
  border-width: 2px;
  border-style: dashed;
  border-color: var(--line-normal-normal);
  background-color: var(--fill-alternative);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.dropzone.is-dragover {
  border-color: var(--primary-normal);
  background-color: var(--blue-99);
}

.dropzone-icon {
  font-size: 3rem;
  line-height: 1;
  color: var(--label-assistive);
}

.dropzone-title {
  margin-top: 1rem;
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
}

.dropzone-desc {
  margin-top: 0.5rem;
  max-width: 720px;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* 전체 진행은 카드가 아니라 아래 파일 목록의 제목이다 — 위 dropzone 이 이미 큰 면이라
     여기까지 상자로 감싸면 둘이 한 덩어리로 붙어 보인다. */

.upload-total {
  margin-top: 2rem;
}

.upload-total-title {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

.upload-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upload-list:empty {
  margin-top: 0px;
}

.upload-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1rem;
}

.upload-row[data-upload-state="failed"] {
  border-color: var(--status-negative);
}

.upload-row-icon {
  flex: none;
  font-size: 1.5rem;
  line-height: 2rem;
}

.upload-row-body {
  min-width: 0px;
  flex: 1 1 0%;
}

.upload-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.upload-row-meta {
  margin-top: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

.upload-row-meta-error {
  color: var(--status-negative);
}

.upload-row-progress {
  margin-top: 0.5rem;
}

/* ============================================================
     전표 — 신청 확인(P-23) · 결제 확인(P-07) 공용
     ------------------------------------------------------------
     제출 직전에 앞 네 스텝의 선택값을 한 장으로 다시 읽는 화면이라
     입력 폼이 아니라 **문서**로 세운다 — 괘선 · 우측 정렬 수치 · 합계.
     카드로 묶지 않는 이유(260826 대표 결정): 카드는 "여기서 뭔가 고른다"는
     신호라 최종 점검 화면에서는 값보다 상자가 먼저 읽힌다. 흰 면 위에
     괘선만 남기면 남는 것은 값과 위계뿐이다.
     결제 확인(P-07)은 좁은 사이드 칸에서 같은 어휘를 쓰되 .docket-plain 을 함께 건다 —
     값은 justify-end 로 줄 끝에 붙이고(거기엔 수정 링크가 없다) 괘선은 뺀다.
     폭은 .container-base 가 정한다 — 안쪽에 폭을 한 겹 더 걸지 않는다(coding.md §2-4).
     좁혀 두면 앞 스텝(업로드·필터)에서 폭이 튀고 오른쪽이 통째로 비어 화면이 끊긴다.
     넓어진 만큼 값은 왼쪽, 수정 링크는 오른쪽 끝으로 갈려 문서 양쪽 기둥이 선다.
     ============================================================ */

.docket {
  width: 100%;
}

/* 문서 머리 — 발신(브랜드) · 문서 성격 · 신청자 · 소속. 로고 파일이 아니라 텍스트
     워드마크를 쓴다(brand.md 푸터 규칙과 같은 이유 — 문서 안에서는 글자가 맞다).
     작성 일시는 두지 않는다(260826 대표 지시) — 아직 접수되지 않은 문서라 시각이
     확정값이 아니고, 접수 일시는 신청 완료(P-13)가 실제 값으로 든다. */

.docket-brand {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--primary-text);
}

.docket-title {
  margin-top: 0.25rem;
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal);
}

.docket-issue {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

@media (min-width: 640px) {

  .docket-issue {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.docket-issue-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.docket-issue-key {
  flex: none;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.docket-issue-val {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-neutral); font-variant-numeric: tabular-nums;
}

/* 본문 시작을 끊는 굵은 괘선 — 여기부터 아래가 "신청 내용"이다 */

.docket-body {
  margin-top: 1.25rem;
  border-top-width: 1px;
  border-color: var(--line-normal-strong);
}

.docket-group {
  padding-top: 1.25rem;
}

/* 묶음 사이만 괘선으로 끊는다 — 묶음 안 마지막 줄은 선을 떼(.docket-row:last-child)
     항목 구분선과 묶음 구분선이 같은 농도로 겹치지 않게 한다.
     선 위아래를 항목 간격보다 넓게 벌린다 — 같은 폭이면 묶음이 바뀐 게 아니라
     줄이 하나 더 있는 것으로 읽힌다(선 하나로는 갈리지 않고 여백이 함께 갈라야 한다). */

.docket-group + .docket-group {
  margin-top: 1.25rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 2rem;
}

.docket-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.docket-group-title {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.docket-group-head .docket-edit {
  margin-left: auto;
}

/* 값을 고치는 길은 이 링크뿐이다 — 전표 위에서 직접 편집시키지 않는다.
     고친 값이 어느 스텝의 정본인지 갈리면 되돌아가 확인할 곳이 사라진다. */

.docket-edit {
  white-space: nowrap;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.docket-edit:hover {
  color: var(--primary-heavy);
}

/* 항목 줄 — 좁은 폭에서는 이름이 한 줄을 다 쓰고 값·수정이 아랫줄로 내려간다.
     sm 이상에서 이름 폭을 고정해야 값의 시작선이 위아래로 맞는다(문서로 읽히는 조건). */

.docket-rows {
  margin-top: 0.75rem;
}

.docket-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.25rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.docket-row:last-child {
  border-bottom-width: 0px;
}

.docket-key {
  width: 100%;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

@media (min-width: 640px) {

  .docket-key {
    width: 10rem;
    flex: none;
  }
}

/* dd 가 값과 수정 링크를 함께 든다(dl > div 안에 a 를 따로 둘 수 없다) —
     값은 span 이 받고 링크만 ml-auto 로 줄 오른쪽 끝에 붙인다. */

.docket-val {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.docket-val-text {
  min-width: 0px;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 500;
  color: var(--label-normal);
}

.docket-val .docket-edit {
  margin-left: auto;
}

/* 샘플 라인아이템 — 파일 하나가 분석 한 건이고 그것이 곧 차감 단위다.
     합계가 어디서 나온 숫자인지 이 표가 대신 말한다. */

.docket-table {
  margin-top: 0.75rem;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
}

.docket-table thead th {
  white-space: nowrap;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-alternative);
}

.docket-table tbody td {
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  vertical-align: baseline;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-normal);
}

.docket-table tbody tr:last-child td {
  border-bottom-width: 0px;
}

.docket-file {
  font-weight: 500;
}

/* 선택자에 .docket-table 을 끼우는 이유: `.docket-table thead th`(0,1,2)가 text-left 를 걸고 있어
     `.docket-num`(0,1,0) 단독으로는 눌리지 않는다(.data-mono 와 같은 사정). */

.docket-num  { font-variant-numeric: tabular-nums; }

.docket-table .docket-num {
  text-align: right;
}

/* 좁은 폭에서는 용량을 접는다 — 가로 스크롤 표를 만들지 않는다(project.md 반응형 기준) */

.docket-col-size {
  display: none;
}

@media (min-width: 640px) {

  .docket-col-size {
    display: table-cell;
  }
}

/* 합계 위를 끊는 선 — 위는 무엇에 드는 크레딧인지, 아래는 이 신청에 나가는 총량이라
     성격이 갈린다. 라인 토큰의 맨 위(line-strong)로도 이 한 줄이 표 안 괘선에 묻혀
     label-alternative 를 보더로 쓴다(260826 대표 지시) — 전표에서 유일하게 끊는 선이라
     헤어라인이 아니라 문서 괘선의 농도로 선다. */

.docket-cut {
  margin-top: 1.5rem;
  border-top-width: 1px;
  border-color: var(--label-alternative);
}

.docket-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding-top: 1.25rem;
}

.docket-total-key {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
}

.docket-total-val {
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  letter-spacing: var(--letter-spacing-title3);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

/* 금액 위 한 줄 — 부가세처럼 금액에 붙는 조건은 숫자 옆에 늘어놓지 않고 위에 얹는다.
     옆에 두면 26px 숫자 뒤에 14px 글자가 매달려 금액의 끝자리가 어디인지 흐려진다. */

.docket-total-note {
  display: block;
  text-align: right;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-alternative);
}

/* 괘선 없는 변형 — 좁은 칸(결제 확인 P-07)용. 360px 폭에서 줄마다 선이 그어지면
     네 줄짜리 표가 격자처럼 촘촘해진다(260826 대표 지시). 항목 구분은 여백이 맡는다.
     선은 합계 위 한 줄만 남긴다 — 위쪽은 크레딧이 얼마가 되는지, 아래는 지금 나가는 돈이라
     성격이 갈리는 유일한 자리다. 그 하나뿐이라 헤어라인보다 한 급 진한 선을 쓴다. */

/* 제목 아래 첫 줄이 왼쪽 패키지 리스트의 첫 줄과 같은 높이에서 시작해야 2열 상단이 어긋나 보이지 않는다.
     왼쪽은 리스트 여백(16) + 행 안쪽 여백(16) = 32 라, 여기도 32 를 준다. */

.docket-plain .docket-body {
  margin-top: 2rem;
  border-top-width: 0px;
}

.docket-plain .docket-rows {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 묶음 제목이 있으면 제목과 첫 줄 사이를 되살린다 — 위 mt-0 은 제목이 없는 결제 확인(P-07)에서
     왼쪽 패키지 리스트와 첫 줄 높이를 맞추려는 값이라, 제목이 붙는 전표(분석 건 상세 P-15)에서는
     제목이 첫 줄에 그대로 붙는다. 같은 전표의 표(.docket-table mt-3)와 같은 값을 써 두 묶음의
     제목 아래 간격이 갈리지 않게 한다. */

.docket-plain .docket-group-head + .docket-rows {
  margin-top: 0.75rem;
}

.docket-plain .docket-row {
  border-bottom-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* 묶음 사이 괘선도 뗀다 — 줄 괘선을 다 걷어낸 변형에서 묶음 구분선 하나만 남으면
     그 한 줄이 전표를 두 덩이로 잘라 놓는다. 묶음 구분은 여백(mt-5 + pt-8)이 맡는다. */

.docket-plain .docket-group + .docket-group {
  border-top-width: 0px;
}

/* 금액이 두 줄(부가세 포함 + 금액)이라 아래를 맞춘다 — items-baseline 이면 라벨이
     위쪽 작은 글자에 붙어 정작 금액과 어긋난다. */

.docket-plain .docket-total {
  margin-top: 1.5rem;
  align-items: flex-end;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 1.25rem;
}

/* .docket-cut 이 이미 끊는 선을 그은 전표(분석 건 상세 P-15)에서는 합계가 제 괘선을 접는다 —
     그냥 두면 진한 선과 헤어라인이 24px 간격으로 나란히 서서 두 줄로 읽힌다. */

.docket-plain .docket-cut + .docket-total {
  margin-top: 0px;
  border-top-width: 0px;
}

/* ============================================================
     신청 완료 (P-13)
     ============================================================ */

/* 560 → 400 (260826). 상자를 걷어내자 라벨과 값을 붙잡아 주던 테두리가 없어져,
     560 폭에서는 `샘플` 과 `3건` 이 화면 양끝으로 벌어져 한 줄로 읽히지 않았다.
     토스가 이 좌우 양끝 배치를 쓰는 곳은 폭이 모바일 한 화면일 때다 — 폭을 그만큼 줄이면
     선 없이도 짝이 붙고, 중앙 정렬 제목과 오른쪽 정렬 값의 축 어긋남도 눈에 잡히지 않는다.
     목록에만 폭을 따로 걸지 않고 덩어리째 줄인다(coding.md §2-4 — 폭을 한 겹 더 두지 않는다). */

.done-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 400px;
}

/* 완료 표식 — 연회색 서류 + 우하단 원형 체크(260826 대표 지시).
     체크 하나만 두면 "무엇이" 끝났는지가 빠진다. 이 화면에서 접수된 것은 분석 신청서라
     서류를 본체로 세우고 체크는 그 위에 얹은 도장처럼 붙인다.
     서류는 label-assistive(28%) 연회색 — 주인공은 서류가 아니라 붙은 체크다.
     체크는 브랜드 원색 #00B9B4 그대로 쓴다(260826 대표 지시). 어둡게 파생한 primary-text 를 쓰면
     브랜드 컬러가 주는 포인트가 사라진다. 대비가 UI 요소 3:1 에 미달하는 것을 알고 택한 값이다 —
     이 표식은 aria-hidden 이고 바로 아래 제목이 같은 말을 글자로 하고 있어 색이 나르는 정보가 없다
     (brand.md "장식 표식 예외"). 이 자리에 상태색 초록을 쓰지 않는 이유는 표 안의
     `보고서 생성 완료` 배지와 신호가 겹쳐서다 — 페이지 표식인지 데이터 상태인지 갈리지 않는다.
     체크 뒤에 흰 원을 깔아야 한다 — Solar bold 의 체크는 원에서 파낸 구멍이라, 깔지 않으면
     밑에 있는 회색 서류가 그 구멍으로 비쳐 체크가 회색으로 보인다. 그 원이 서류와의 경계도 함께 만든다. */

.done-mark {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 72px;
  width: 72px;
}

.done-mark-doc {
  display: block;
  line-height: 1;
  color: var(--label-assistive); font-size: 72px;
}

/* 상자 모서리가 아니라 글리프의 모서리에 건다 — Solar 아이콘은 뷰박스 안에 여백을 두고 있어
     상자 모서리에 붙이면 체크가 글리프 안쪽으로 파고들어 내용을 덮는다. 밖으로 6px 밀어
     절반쯤 걸치게 하면 "찍힌 도장"으로 읽힌다. 서류(P-13)와 카드(P-08)가 같은 값을 쓴다 —
     둘 다 뷰박스를 꽉 채우는 사각 글리프라 한 값으로 맞는다. 원형 글리프를 쓰게 되면 이 값을 다시 본다. */

.done-mark-check {
  position: absolute;
  bottom: -0.375rem;
  right: -0.375rem;
  display: block;
  border-radius: var(--radius-pill);
  background-color: var(--background-normal-normal);
  line-height: 1;
  color: var(--primary-normal);
    font-size: 30px;
}

.done-title {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  color: var(--label-normal);
}

.done-lead {
  margin-top: 0.75rem;
  text-align: center;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--label-alternative);
}

/* 접수 내역 — 카드로 감싸지 않는다(260826 대표 지시 "토스 스타일").
     상자와 줄마다의 괘선을 걷어내면 남는 것은 라벨과 값뿐이다. 세 줄짜리 목록에서
     테두리는 값보다 먼저 읽히고, 이 화면은 읽을 것이 그 세 줄이 전부다.
     구분은 여백이 맡는다 — 결제 확인(P-07)에서 이미 같은 판단을 했다(.docket-plain).
     선이 사라진 만큼 값이 스스로 서야 해서 굵기를 medium → semibold 로 한 급 올리고,
     라벨은 label1·회색으로 낮춰 위계를 색과 굵기로만 만든다.
     제목 덩어리와는 헤어라인 한 줄로 끊는다(260826 대표 지시) — 안내문이 끝나고 접수된 값이
     시작되는 자리다. 줄마다의 괘선은 뺐어도 묶음을 가르는 선 하나는 남긴다.
     선 위아래를 32 씩 띄운다 — 줄 간격(14)과 충분히 달라야 선이 "묶음 경계"로 읽힌다. */

.done-facts {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 2rem;
}

.done-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.done-fact-key {
  flex: none;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.done-fact-val {
  min-width: 0px;
  text-align: right;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

.done-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {

  .done-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
     크레딧 충전 (P-07, FR-CHARGE-01~08)
     ============================================================ */

/* 폼이 길어 스크롤하는 동안에도 결제 금액이 붙어 있어야 한다 — lg 이상에서 요약이 따라온다 */

/* 두 칸 사이를 넉넉히 벌린다 — 패키지 줄은 면이 바깥으로 흘러나가는(-mx-4) 리스트라
     40px 이면 실제로 남는 간격이 24px 이고, 그 폭에서는 선택된 줄의 틴트가 오른쪽 요약과 붙어 보인다. */

.charge-layout {
  display: grid;
  align-items: flex-start;
  gap: 2rem;
}

@media (min-width: 1024px) {

  .charge-layout {
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 4rem;
  }
}

.charge-main {
  min-width: 0px;
}

/* 카드로 감싸지 않는다(260826 대표 지시) — 안쪽 전표(.docket-plain)가 이미 합계선으로 위계를
     들고 있어 상자를 한 겹 더 두르면 값보다 액자가 먼저 읽힌다. 붙어 따라오는 성질만 남긴다. */

@media (min-width: 1024px) {

  .charge-summary {
    position: sticky;
    top: 6rem;
  }
}

/* 한 줄에 한 패키지 — 크레딧 · 단가 · 금액이 위아래로 같은 자리에 서야
     큰 패키지가 얼마나 싼지 눈으로 훑힌다(260826 대표 지시). 2열로 두면 그 비교선이 끊긴다.
     정렬 기준은 글자가 아니라 면의 바깥 경계다 — 음수 여백으로 글자를 제목에 맞췄더니
     같은 화면의 결제수단 카드보다 면이 16px 바깥으로 나가 좌측선이 둘로 갈렸다.
     안쪽 여백은 결제수단 카드(p-5)와 같은 20px 로 맞춘다 — 두 선택 컨트롤의
     면과 글자가 같은 세로선에서 시작해야 화면이 한 판으로 읽힌다. */

/* 줄마다 따로 테두리를 두른다(260826 대표 결정) — 고른 줄에만 면을 주면 나머지 세 줄은
     면이 없어 글자만 제목보다 20px 안으로 들어간 것처럼 읽힌다(면은 있는데 안 보이는 상태다).
     묶어서 한 덩어리 리스트로도 세워 봤지만 줄이 따로 서는 편이 낫다.
     테두리·면·안쪽 여백을 아래 결제수단 카드(.method-card)와 같은 값으로 둔다 — 한 화면의
     두 선택 컨트롤이 같은 어휘를 쓰고, 그 면의 왼쪽이 곧 제목("패키지")의 왼쪽선이 된다. */

.pkg-deck {
  display: grid;
  gap: 1rem;
}

.pkg-card {
  position: relative;
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.pkg-card:hover {
  border-color: var(--line-normal-strong);
}

/* 선택 표시는 파이프라인 카드와 같은 규칙 — 브랜드 원색 테두리 + 틴트 (brand.md).
     테두리 위에 같은 색 안쪽 링을 겹쳐 2px 로 세운다 — 줄 높이는 그대로 두면서 굵기만 는다. */

.pkg-deck > .pkg-card:has(.radio-input:checked) {
  border-color: var(--primary-normal);
  background-color: var(--blue-99);
    box-shadow: inset 0 0 0 1px var(--primary-normal);
}

/* 포커스 링은 primary-heavy 다 — 원색은 흰 배경에서 2.44:1 이라 UI 기준 3:1 을 못 넘는다 (brand.md) */

.pkg-card:has(.radio-input:focus-visible) { outline: 2px solid var(--primary-heavy); outline-offset: 2px; }

/* 왼쪽 덩어리 — 크레딧 아래 단가가 붙는다. 한 줄에 늘어놓으면 크레딧과 단가가
     같은 급으로 읽혀 무엇이 상품명인지 흐려진다(260826 대표 지시). */

.pkg-card-body {
  display: flex;
  min-width: 0px;
  flex-direction: column;
}

.pkg-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* 크레딧은 어느 줄인지 가리는 이름이고, 고를지 말지를 가르는 값은 금액이다 —
     금액을 한 급 위로 올려 오른쪽 끝이 훑히게 한다(결제 확인의 금액과도 급이 맞는다). */

.pkg-credit {
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

/* 금액만 줄 오른쪽 끝으로 — 네 줄의 금액이 한 세로선에 서야 서로 비교된다 */

.pkg-price {
  margin-left: auto;
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

.pkg-unit {
  margin-top: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

/* ===== 결제수단 — 두 갈래뿐이라 나란히 놓는다 (260826 대표 지시) =====
     라디오 점을 두지 않고 테두리 + 틴트로만 고른 것을 표시한다(파이프라인 카드와 같은 규칙).
     항목이 둘이고 카드가 통째로 눌리는 자리라, 점이 있어도 시선이 갈 곳은 카드다. */

.method-deck {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {

  .method-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.method-card {
  position: relative;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.method-card:hover {
  border-color: var(--line-normal-strong);
}

.method-deck > .method-card:has(.radio-input:checked) {
  border-color: var(--primary-normal);
  background-color: var(--blue-99);
    box-shadow: inset 0 0 0 1px var(--primary-normal);
}

/* 라디오가 sr-only 라 포커스 링을 받을 자리가 없다 — 카드가 대신 받는다 */

.method-card:has(.radio-input:focus-visible) { outline: 2px solid var(--primary-heavy); outline-offset: 2px; }

.method-title {
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--label-normal);
}

.method-desc {
  margin-top: 0.25rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.pkg-off {
  font-weight: 600;
  color: var(--primary-text);
}

.charge-agree {
  margin-top: 1.25rem;
  align-items: flex-start;
}

.charge-agree-text {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  line-height: 1.5;
  color: var(--label-neutral);
}

/* 규정 이름 자체가 링크다 — 뒤에 "규정 보기" 를 따로 달면 같은 말이 한 줄에 두 번 선다.
     label 안의 <a> 는 클릭이 체크박스로 넘어가지 않는다(HTML 의 interactive content 예외). */

.charge-agree-link {
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.charge-submit {
  margin-top: 1rem;
  width: 100%;
}

/* ============================================================
     계정 화면 (P-02 로그인 · P-03 비밀번호 재설정 · P-04 회원가입)
     ============================================================ */

/* 회색 바닥 위 흰 상자로 띄우지 않는다 — 이 사이트의 화면은 전부 흰 면 위에서
     여백과 타입으로 위계를 만들고 있어(신청 완료 P-13 · 결제 확인 P-07), 로그인만
     상자에 담기면 같은 서비스의 다른 화면처럼 보인다. 폭을 좁히는 것으로 충분히
     "가운데 선 한 덩어리"가 된다.
     폭 400 은 신청 완료(.done-wrap)와 같은 값이다 — 헤더와 푸터 사이에 혼자 서는
     화면끼리 덩어리 폭이 다르면 페이지를 옮길 때 중심선이 흔들린다. */

.auth-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 400px;
}

/* 회원가입만 넓다 — 입력이 아홉 칸이라 400 에 세우면 세로가 두 배가 되고,
     기관 정보와 담당자 정보가 두 묶음이라 두 칸씩 눕는 폭이 필요하다. */

.auth-wide {
  max-width: 560px;
}

.auth-title {
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  color: var(--label-normal);
}

.auth-lead {
  margin-top: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.auth-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-submit {
  margin-top: 0.25rem;
  width: 100%;
}

/* 로그인 상태 유지와 비밀번호 찾기가 한 줄에서 마주 본다 */

.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

/* 하단 안내 줄 — 여기서 가는 곳은 이 화면의 대안이지 다음 단계가 아니다.
     헤어라인은 걷었다(260827 대표 결정) — 카드 한 장뿐인 화면에서 선을 하나 더 그으면
     푸터 경계선과 두 줄로 겹쳐 보인다. 끊는 일은 여백이 맡되 64px 는 폼과 남남으로
     떨어져 32px 로 줄인다. */

.auth-foot {
  margin-top: 2rem;
  text-align: center;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.auth-foot-link {
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

/* 인증 화면 꼬리 여백 — 폼 아래와 푸터 사이 거리를 단계에 상관없이 같게 잡는다.
     하단 안내가 숨는 단계(가입 2·3 단계)에서는 버튼이 푸터 경계선에 붙어 버린다.
     .auth-wrap 쪽에 걸어 .app-padding 의 pb 와 값이 겹치지 않게 한다.
     값은 .page-tail 이 정본이다 — 이름만 이 화면 쪽에서 부른다(JS 가 단계마다 토글한다). */

.auth-tail {
  padding-bottom: 3rem;
}

@media (min-width: 768px) {

  .auth-tail {
    padding-bottom: 4rem;
  }
}

/* 비밀번호 보기 토글 — 버튼이 필드 안에 앉으므로 감싸는 칸이 필요하다.
     오른쪽 여백을 미리 비워 긴 비밀번호가 버튼 밑으로 파고들지 않게 한다. */

.field-wrap {
  position: relative;
}

.field-wrap > .field {
  padding-right: 3rem;
}

.field-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  display: grid;
  height: 2.25rem;
  width: 2.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  place-items: center;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--label-assistive);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.field-toggle:hover {
  color: var(--label-normal);
}

/* 비밀번호 규칙 — 문장으로 적어 두면 입력하는 동안 어디가 모자란지 알 수 없다.
     항목마다 충족 여부를 표식으로 갈라, 규칙을 읽는 것이 아니라 보는 것으로 바꾼다.
     색만으로 갈리지 않게 표식이 점 → 체크로 함께 바뀐다. */

.pw-rules {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

/* gap 을 쓰지 않고 아이콘에 오른쪽 여백을 주는 이유 — 문구가 `<span class="num">10</span>자 이상`
     처럼 숫자 span 으로 시작해서, flex gap 을 걸면 그 사이까지 벌어져 "10 자 이상" 으로 읽힌다
     (.list-end 에서 이미 만난 문제다). 간격이 필요한 곳은 아이콘과 문구 사이 하나뿐이다. */

.pw-rule {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

/* 미충족 표식은 아이콘이 아니라 CSS 점이다(260826 대표 지시) — 아이콘 세트의 원형 표식은
     체크와 굵기·속이 달라 무엇을 뜻하는 기호인지 읽히지 않았다. 점은 "아직 안 찬 자리" 로만 읽힌다.
     자리 폭은 체크와 같은 16px 로 잡는다 — 상태가 바뀔 때 뒤따르는 문구가 좌우로 흔들리지 않게. */

.pw-rule-dot {
  margin-right: 0.25rem;
  display: grid;
  height: 1rem;
  width: 1rem;
  flex: none;
  place-items: center;
}

.pw-rule-dot::before {
    content: "";
    display: block;
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background-color: var(--line-normal-strong);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 120ms;
    transition-timing-function: var(--ease-standard);
  }

.pw-rule-check {
  margin-right: 0.25rem;
  display: none;
  flex: none;
  font-size: 1rem;
  line-height: 1.5rem;
}

.pw-rule[data-met="true"] .pw-rule-dot {
  display: none;
}

.pw-rule[data-met="true"] .pw-rule-check {
  display: inline-flex;
}

/* 충족 상태를 클래스가 아니라 속성으로 두는 이유 — 이 표식은 JS 가 켜고 끄는데,
     상태 클래스로 두면 마크업에 한 번도 안 나타나 purge 대상이 된다(safelist 에 또 등록해야 한다).
     표식(점 → 체크)도 이 속성으로 함께 갈리므로 색만으로 나뉘지 않는다. */

/* 충족 색은 상태색 초록이다(260827 대표 지시 — 260826 의 브랜드 계열 결정을 되돌린 값).
     규칙이 찼다는 것은 초록으로 읽는 것이 가장 빠르고, 이 목록은 표 안의 상태 배지와
     같은 화면에 서지 않아 신호가 겹치지 않는다.
     ⚠ status-positive(green-50 #00BF40)는 흰 배경 2.46:1 로 AA(4.5:1)에 못 미친다. 알고 택한
     값이며, 충족 여부는 색만이 아니라 표식(점 → 체크)이 함께 나르므로 색을 못 읽어도 판별된다.
     대비가 필요해지면 green-30(#006E25, 6.45:1)으로 내린다 — 초록을 티얼로 되돌리지 않는다. */

.pw-rule[data-met="true"] {
  color: var(--status-positive);
}

/* ============================================================
     회원가입 약관 동의 (P-04, FR-JOIN-02)
     ============================================================ */

/* 전체 동의는 개별 항목과 급이 다르다 — 하나로 넷을 켜는 줄이라 굵기로 세우고
     아래 선으로 목록과 가른다. 면을 깔면 이 화면에 이미 면을 가진 전문 상자(.agree-full)와
     겹쳐 면이 두 겹으로 읽히고, 선 하나면 위계는 충분히 갈린다(260827 대표 지시). */

/* flex w-full 로 .check 의 inline-flex 를 덮는다 — 그냥 두면 줄이 글자 폭까지만 차서
     아래 선이 목록 폭을 채우지 못하고 중간에 끊긴다. */

/* py-4 는 면을 걷어내도 그대로 둔다 — 이 화면은 .page-center(my-auto) 세로 중앙이라
     줄 높이를 줄이면 덩어리 전체가 위로 올라가 GNB 아래 상단 간격이 같이 달라진다. */

.agree-all {
  display: flex;
  width: 100%;
  align-items: center;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.agree-all-text {
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 700;
  color: var(--label-normal);
}

.agree-list {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
}

.agree-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.agree-item-text {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.agree-req {
  font-weight: 600;
  color: var(--primary-text);
}

.agree-opt {
  color: var(--label-alternative);
}

/* 전문 보기 — 오른쪽 끝에 붙는다. 이동이 아니라 그 자리에서 여는 동작이라 셰브런을 단다 */

.agree-open {
  margin-left: auto;
  display: flex;
  flex: none;
  cursor: pointer;
  align-items: center;
  gap: 0.125rem;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  padding: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.agree-open:hover {
  color: var(--label-normal);
}

.agree-open-icon {
  font-size: 1rem;
  line-height: 1.5rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.agree-open[aria-expanded="true"] .agree-open-icon {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* 전문은 접힌 상태가 기본이고 펼쳐도 화면을 밀어내지 않게 높이를 묶어 안에서 스크롤한다 */

.agree-full {
  margin-bottom: 0.75rem;
  max-height: 14rem;
  overflow-y: auto;
  border-radius: var(--radius-md);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-alternative);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  line-height: 1.625;
  color: var(--label-alternative);
}

/* 약관 전문 안 소제목 — 감싸는 h2("약관에 동의해 주세요") 다음 급이라 h3 다.
     h4 로 두면 위계가 한 칸 건너뛴다(coding.md §3). */

.agree-full h3 {
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--label-normal);
}

.agree-full h3:first-child {
  margin-top: 0px;
}

.agree-full p {
  margin-bottom: 0.5rem;
}

.agree-full p:last-child {
  margin-bottom: 0px;
}

.agree-full ol {
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  list-style-type: decimal;
}

.agree-full ol:last-child {
  margin-bottom: 0px;
}

.agree-full li {
  margin-bottom: 0.25rem;
}

.agree-full li:last-child {
  margin-bottom: 0px;
}

/* ============================================================
     마이페이지 (P-05)
     ============================================================ */

/* 좌: 무엇을 고치는 칸인지 · 우: 실제 입력. 설정 화면을 카드 여러 장으로 쌓지 않는 이유 —
     여섯 묶음이 전부 상자를 두르면 화면이 카드 목록이 되고, 정작 봐야 할 입력이
     상자 안쪽으로 한 겹 들어간다. 묶음은 헤어라인 하나로 충분히 갈린다. */

.setting-sec {
  display: grid;
  column-gap: 3rem;
  row-gap: 1.25rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

@media (min-width: 768px) {

  .setting-sec {
    grid-template-columns: minmax(0,200px) minmax(0,1fr);
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }
}

.setting-title {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal);
}

.setting-desc {
  margin-top: 0.5rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  line-height: 1.625;
  color: var(--label-alternative);
}

.setting-body {
  min-width: 0px;
}

.setting-grid {
  display: grid;
  column-gap: 1.25rem;
  row-gap: 1.25rem;
}

@media (min-width: 640px) {

  .setting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setting-wide {
    grid-column: span 2 / span 2;
  }
}

.setting-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* 고칠 수 없는 값(이메일=아이디) — 입력창 모양으로 두면 눌러 보고 왜 안 되는지를 묻게 된다.
     높이는 .field 와 같게 맞춰 옆 칸과 밑줄이 어긋나지 않게 한다. */

.setting-static {
  margin-top: 0.5rem;
  display: flex;
  min-height: 52px;
  align-items: center;
  border-radius: var(--radius-md);
  background-color: var(--fill-alternative);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  color: var(--label-alternative);
}

/* 탈퇴 — 되돌릴 수 없는 동작이라 안내를 읽는 자리와 누르는 자리를 붙여 둔다.
     배경은 옅은 중립 회색(fill-alternative — 같은 화면 .setting-static 과 같은 톤).
     붉은 틴트로 면을 물들이면 아직 누르지도 않은 설정 화면이 경고문처럼 읽힌다
     — 위험은 제목 색과 버튼이 말하게 하고 면은 비워 둔다. */

.setting-danger {
  border-radius: var(--radius-lg);
  background-color: var(--fill-alternative);
  padding: 1.25rem;
}

/* 제목 색은 아래 탈퇴 버튼(.btn-danger-outline)과 같은 red-40 — 한 박스 안에서 빨강이
     두 톤으로 갈리면 어느 쪽이 더 위험한 말인지 읽는 사람이 가늠하게 된다 */

.setting-danger-title {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--red-40);
}

.setting-danger-desc {
  margin-top: 0.375rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  line-height: 1.625;
  color: var(--label-neutral);
}

/* ============================================================
     크레딧 내역 (P-06)
     ============================================================ */

.credit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 2.5rem;
  row-gap: 1.25rem;
}

.credit-label {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.credit-value {
  margin-top: 0.375rem;
  font-size: var(--font-size-display3);
  line-height: var(--line-height-display3);
  letter-spacing: var(--letter-spacing-display3);
  font-weight: 700;
  line-height: 1;
  color: var(--label-normal);
                  font-variant-numeric: tabular-nums;
}

/* 증감 셀 — 부호가 방향을 말하므로 색은 들어오는 쪽에만 얹는다.
     차감까지 빨강으로 물들이면 원장 전체가 경고문처럼 읽힌다(실패가 아니라 정상 사용이다). */

.credit-in {
  font-weight: 600;
  color: var(--primary-text);
}

.credit-out {
  color: var(--label-normal);
}

/* ============================================================
     약관·정책 (P-19, FR-POLICY-01)
     ============================================================ */

/* 문서 셋이 한 장에 들어 있고 왼쪽 칸이 문서 전환과 목차를 함께 든다.
     목차만 두면 지금 무슨 문서를 보는지가 화면에서 사라진다. */

.terms-layout {
  display: grid;
  align-items: flex-start;
  gap: 2.5rem;
}

@media (min-width: 1024px) {

  .terms-layout {
    grid-template-columns: 240px minmax(0,1fr);
    gap: 4rem;
  }

  .terms-nav {
    position: sticky;
    top: 6rem;
  }
}

.terms-docs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.terms-doc {
  cursor: pointer;
  border-radius: var(--radius-md);
  border-width: 0px;
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.terms-doc:hover {
  background-color: var(--fill-alternative);
}

.terms-doc[aria-selected="true"] {
  background-color: var(--blue-95);
  color: var(--primary-text);
}

.terms-toc {
  margin-top: 1.5rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 1.25rem;
}

.terms-toc-head {
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--label-alternative);
}

.terms-toc-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.terms-toc-link {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.terms-toc-link:hover {
  color: var(--primary-text);
}

.terms-body {
  min-width: 0px;
  max-width: 720px;
}

.terms-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-bottom: 1.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

/* scroll-mt — 목차 앵커로 뛰면 sticky 헤더(64) 밑으로 제목이 들어간다 */

.terms-h2 {
  margin-top: 2.75rem;
  scroll-margin-top: 6rem;
  font-size: var(--font-size-heading1);
  line-height: var(--line-height-heading1);
  letter-spacing: var(--letter-spacing-heading1);
  font-weight: 700;
  color: var(--label-normal);
}

.terms-p {
  margin-top: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.terms-ol {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.terms-ol > li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0,1fr);
  column-gap: 0.25rem;
}

.terms-no {
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

.terms-ul {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.terms-ul > li {
  position: relative;
  padding-left: 1rem;
}

.terms-ul > li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.625rem;
    height: 0.25rem;
    width: 0.25rem;
    border-radius: var(--radius-pill);
    background-color: var(--label-assistive);
  }

/* ============================================================
     FAQ 전체 (P-22)
     ============================================================ */

.faq-tools {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {

  .faq-tools {
    flex-direction: row;
    align-items: center;
  }
}

.faq-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.faq-list {
  margin-top: 2rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
}

.faq-q {
  flex: 1 1 0%;
}

.faq-item {
  scroll-margin-top: 6rem;
}

/* 질문 옆 앵커 — 링크로 공유하는 자리(FR-FAQ-03). 마우스를 올린 항목에서만 뜬다 */

.faq-anchor {
  margin-left: auto;
  flex: none;
  border-radius: var(--radius-md);
  padding: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--label-disable);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.faq-anchor:hover {
  color: var(--primary-text);
}

.faq-anchor:focus-visible {
  opacity: 1;
}

.faq-item:hover .faq-anchor {
  opacity: 1;
}

.faq-item-tags {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* 답변은 읽기 폭에 세운다 — 목록이 컨테이너 폭을 쓰므로(coding.md 2-4·2-6) 제한이 없으면
     한 줄이 1120 까지 늘어난다. 좁혀야 하는 것은 컨테이너가 아니라 이 문단이다.
     질문 줄은 한 줄짜리라 그대로 두고, 여는 화살표가 오른쪽 끝에 남아야 클릭 영역이 넓다. */

.faq-item .accordion-body {
  max-width: 720px;
}

/* ============================================================
     안내 화면 (P-20 에러 · P-03 만료 링크 · P-08 결제 실패)
     ============================================================ */

/* 신청 완료(P-13)와 같은 자리·같은 폭에 서되 표식이 다르다 — 저쪽은 끝난 일이고
     이쪽은 막힌 일이라, 서류에 찍힌 도장 대신 상태 아이콘 하나만 세운다. */

.notice-wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 440px;
  text-align: center;
}

.notice-mark {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  height: 4rem;
  width: 4rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--fill-alternative);
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--label-assistive);
}

.notice-code {
  margin-top: 1.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

.notice-title {
  margin-top: 0.5rem;
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  color: var(--label-normal);
}

.notice-lead {
  margin-top: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.notice-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {

  .notice-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
     결제 완료 · 입금 대기 (P-08)
     ============================================================ */

/* 계좌는 옮겨 적는 값이라 한 줄에 크게 눕히고 복사 버튼을 붙인다 —
     여기서 손으로 받아 적다 한 자리가 틀리면 입금이 미아가 된다. */

.vbank-box {
  margin-top: 2rem;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1.25rem;
  text-align: left;
}

.vbank-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.vbank-key {
  flex: none;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.vbank-val {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

.vbank-acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--fill-alternative);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.vbank-acc-num {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

/* ===== 결과 요약 (P-16) =====
     원본 ireport 는 한 검사를 8개 섹션 161쪽으로 편다. 이 화면은 그 첫 두 섹션
     (01 Report Summary · 02 Variant Summary)을 "쓸 약이 있나"에 답하는 순서로 다시 짠 것이다.
     그래서 위에서 아래로 답 → 근거 → 출구 세 덩어리이고, 통계는 전부 접혀 있다
     (report-structure.md 3·5장). */

/* 뷰 패널 넷의 위아래 리듬 — 어느 탭을 눌러도 내용이 같은 자리에서 시작하고 끝난다
     (260827 대표 지시). 패널마다 첫 요소가 달라(문장·알약 탭·select·표·빈 상태) 저마다
     mt 를 들고 있었고, 그래서 탭을 갈아 끼우면 첫 줄이 16~40px 사이에서 들쭉날쭉 올라왔다.
     시작 간격의 기준은 요약의 판단 한 줄이 쓰던 32px 이다 — 요약이 첫 탭이라 그 자리가 기억된다.
     margin 이 아니라 padding 인 이유: 첫 자식이 sr-only 제목인 탭이 있어(유전자별 상세·참고문헌)
     첫 자식에 margin 을 걸면 그 탭만 붙어 선다.
     아래는 푸터 앞 꼬리 여백(.page-tail) — 표·빈 상태가 푸터 경계선에 붙던 자리다. */

[data-view-panel] {
  padding-bottom: 3rem;
}

@media (min-width: 768px) {

  [data-view-panel] {
    padding-bottom: 4rem;
  }
}

[data-view-panel] {
  padding-top: 2rem;
}

/* 유틸 줄 — 되돌아가기와 세 출구(PDF·EXCEL·전체화면)를 제목 위 같은 줄에 둔다.
     제목 옆에 붙이지 않는 이유는 샘플 파일명이 길면 버튼이 줄바꿈으로 밀려나서다.
     버튼 줄도 wrap 시킨다 — 좁은 화면에서 버튼 셋에 "전체화면 종료"까지 길어지면
     한 줄에 안 들어가고, wrap 이 없으면 마지막 버튼이 화면 밖으로 밀린다. */

.report-util {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.report-util-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* 샘플 헤더 — 왼쪽은 "무엇을 보고 있나"(파일명·Accession·게놈),
     오른쪽은 "어떤 조건에서 나왔나"(날짜·기관·검사자·유전자 수). 묻는 시점이 달라 나눈다. */

.report-head {
  margin-top: 1rem;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
}

.report-head-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem;
}

@media (min-width: 768px) {

  .report-head-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 1.5rem;
  }
}

.report-eyebrow {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--primary-text);
}

/* 파일명은 낱말이 아니라 식별자다 — break-all 이면 임의 지점에서 잘려 읽히지 않는다.
     anywhere 는 한 줄에 안 들어갈 때만 쪼갠다. */

.report-title {
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  color: var(--label-normal);
}

@media (min-width: 768px) {

  .report-title {
    font-size: var(--font-size-title1);
    line-height: var(--line-height-title1);
    letter-spacing: var(--letter-spacing-title1);
  }
}

.report-title      { overflow-wrap: anywhere; }

/* 식별값만 담는 줄이다 — 파이프라인과 Accession ID. 조건값(참조 게놈·검사기관·검사자)은
     라벨이 붙어야 서로 섞이지 않으므로 옆의 .report-facts 로 보낸다. */

.report-idline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.375rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.report-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0.75rem;
}

@media (min-width: 768px) {

  .report-facts {
    flex: none;
  }
}

.report-fact {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
}

.report-fact-key {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.report-fact-val {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 500;
  color: var(--label-neutral); overflow-wrap: anywhere;
}

/* 분포 · 해석적 보고 — 접지 않고 펴 둔다 (FR-SUMMARY-02, 260827 대표 지시).
     접어 두면 눌러야 무엇이 있는지 알 수 있어, 같은 화면을 하루에 여러 번 여는 사람에게는
     클릭 한 번이 매번 붙는다. 네 줄짜리 막대라 펴 놔도 아래 표를 멀리 밀지 않는다.
     Somatic 은 요약 탭 맨 위, Germline 은 판단 한 줄 아래에 같은 카드로 선다. */

/* 좌우는 카드 폭에 맞춘 여백이지만 위아래는 그보다 짧다 — 안에 담기는 것이 막대·칩처럼
     제 높이를 이미 갖는 줄이라, 사방을 같게 두면 카드가 내용보다 커 보인다 (260827 대표 지시). */

.report-stats {
  margin-top: 1rem;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {

  .report-stats {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

/* 카드 이름 — 아이콘도 건수도 달지 않는다. 카드가 하나에 한 갈래만 담게 되면서
     이름 한 줄이 곧 카드가 무엇인지라, 옆에 무엇을 더 세우면 그 줄이 도구 막대처럼 읽힌다. */

.report-stats-title {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
}

/* 이름과 몸통 사이는 여백만으로 끊는다 — 괘선을 그으면 카드 테두리와 두 겹이 되어
     한 카드가 위아래 두 칸으로 갈라져 보인다. 카드를 쪼갠 뒤로는 테두리가 곧 경계다.
     몸통은 열을 나누지 않는다 — 한 카드가 한 갈래만 담으므로 나눌 것이 없고,
     나누면 내용이 카드 절반에서 끊긴다. 간격은 안쪽 요소의 margin 이 정한다. */

.report-stats-title + .report-stats-body {
  margin-top: 1rem;
}

/* 몸통 첫 요소가 스스로 띄우던 위 여백은 이름 아래에서 겹친다 — 위 간격은 몸통이 정한다. */

.report-stats-body > :first-child {
  margin-top: 0px;
}

/* 요약 탭 카드 줄 — 분포 · 증상 · 해석적 보고는 묻는 것이 서로 다르다
     (무엇이 나왔나 / 무엇을 보고 순위를 매겼나 / 사람이 무엇이라 읽었나).
     한 카드에 몰아 넣으면 경계가 제목 굵기밖에 없어 어디까지가 분포인지 눈으로 끊기지 않고,
     카드 이름이 "분포 · 해석적 보고"가 되어 안의 제목을 한 번 더 되풀이한다.
     막대 넷짜리 분포가 왼쪽에 서고 키가 절반인 카드들이 오른쪽에 포개 선다 —
     Germline 은 증상 · 해석적 보고 둘, Somatic 은 해석적 보고 하나다.
     늘이지 않는다(items-start) — 늘이면 짧은 카드 아래가 분포 높이만큼 비어 미완성으로 읽힌다. */

.report-cards {
  margin-top: 2rem;
  display: grid;
  align-items: flex-start;
  gap: 1rem;
}

@media (min-width: 768px) {

  .report-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 오른쪽 단 — 카드 둘이 포개 선다. 단 자체는 높이를 갖지 않으므로 왼쪽 카드를 늘리지 않는다. */

.report-cards-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 줄 안에서는 카드가 홀로 설 때 쓰던 위 여백을 뗀다 — 간격은 gap 이 정한다. */

.report-cards .report-stats {
  margin-top: 0px;
}

.report-empty {
  margin-top: 0.625rem;
  border-radius: var(--radius-md);
  background-color: var(--fill-alternative);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* Tier 막대 — 티얼에서 무채색으로 내려가는 한 갈래 램프다.
     상태색(초록·빨강)을 쓰지 않는 이유: Tier 는 상태가 아니라 중요도이고,
     표 안의 Assessment 점이 이미 상태색을 쓰고 있어 신호가 겹친다 (brand.md 상태색 규칙). */

.tier-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tier-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.tier-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.tier-gloss {
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 400;
  color: var(--label-alternative);
}

.tier-val {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tier-bar {
  height: 0.375rem;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--fill-alternative);
}

.tier-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--fill-strong); width: var(--v, 0%);
}

.tier-bar-1 {
  background-color: var(--primary-normal);
}

.tier-bar-2 {
  background-color: var(--blue-90);
}

.tier-bar-3 {
  background-color: var(--fill-strong);
}

.tier-bar-4 {
  background-color: var(--fill-normal);
}

.tier-num {
  width: 2rem;
  flex: none;
  text-align: right;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

/* 판단 한 줄 — 리포트를 열자마자 읽는 답이라 아무 면도 두르지 않는다 (260827 대표 지시).
     틴트 카드로 감싸 뒀더니 아래 흰 카드들과 나란히 서서 답이 아니라 안내 배너처럼 읽혔다.
     지금은 제목 크기 하나로 층이 갈리고, 아래 숫자 셋은 그 문장을 받는 조회용 건수다. */

/* 면을 두르지 않으므로 이 덩어리를 아래 카드에서 떼어 놓는 것이 유일한 경계다 —
     16px 로 붙여 두면 카드들과 한 흐름으로 읽혀 답이 먼저 들어오지 않는다.
     위쪽 간격은 패널([data-view-panel])이 네 탭에 같은 값으로 잡는다. */

.verdict {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.verdict-body {
  min-width: 0px;
}

.verdict-title {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
  font-weight: 700;
  line-height: 1.375;
  color: var(--label-normal);
}

@media (min-width: 768px) {

  .verdict-title {
    font-size: var(--font-size-title3);
    line-height: var(--line-height-title3);
    letter-spacing: var(--letter-spacing-title3);
  }
}

.verdict-lead {
  margin-top: 0.5rem;
  max-width: 720px;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* 숫자 셋은 문장 옆이 아니라 아래 한 줄로 내려 폭을 꽉 채운 3열로 선다 (260827 대표 지시) —
     오른쪽에 붙여 두면 제목 줄 길이에 따라 자리가 밀리고, 좁은 화면에서 문장과 겹쳐 읽힌다.
     sm 미만은 한 열이다 — 375 에서 3열로 쪼개면 칸이 106px 라 `그 외 검출`이 잘린다.

     조회 전용이다 — 누르지 않으므로 커서·호버·트랜지션이 없다(260827 대표 지시).
     흰 면 + 테두리를 옅은 틴트로 갈았다 — 흰 면은 아래 리포트 카드들과 면이 같아
     숫자 셋이 카드 줄의 첫 칸처럼 읽혔고, 테두리는 누를 수 있는 칸으로 보였다.
     색은 새로 정하지 않고 이 리포트가 이미 쓰는 신호를 그대로 든다 —
     증상 일치는 티얼(.pheno-match 와 같은 짝), VUS 는 주의색(.assess-vus),
     그 외 검출은 무채색이다. 라벨은 회색으로 두고 숫자만 그 색을 든다(P-14 상단 카드와 같은 규칙). */

.verdict-stats {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 640px) {

  .verdict-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .verdict-stats {
    gap: 0.75rem;
  }
}

/* 라벨과 값을 좌우로 벌린다 — 세 칸이 같은 폭이라 숫자가 오른쪽 한 선에 맞아 바로 비교된다. */

.verdict-stat {
  display: flex;
  min-width: 0px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: var(--radius-lg);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

@media (min-width: 768px) {

  .verdict-stat {
    gap: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.verdict-stat {
    background-color: var(--verdict-stat-tint);
  }

.verdict-stat-num {
  flex: none;
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  letter-spacing: var(--letter-spacing-title3);
  font-weight: 700;
  line-height: 1; color: var(--verdict-stat-ink); font-variant-numeric: tabular-nums;
}

.verdict-stat-label {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-alternative);
}

.verdict-stat-match { --verdict-stat-tint: var(--blue-95);          --verdict-stat-ink: var(--primary-text); }

.verdict-stat-other { --verdict-stat-tint: var(--fill-alternative); --verdict-stat-ink: var(--label-neutral); }

.verdict-stat-vus   { --verdict-stat-tint: var(--orange-95);        --verdict-stat-ink: var(--accent-foreground-orange); }

/* Somatic 은 같은 세 칸을 약물 축으로 든다 — 국내 허가 · 급여 약물 · 그 외 검출.
     허가는 표의 허가 표시(.mfds-ok)가 쓰는 초록(status-positive)을 그대로 들고,
     급여 약물은 이 리포트의 강조색인 블루다. 그 외 검출은 Germline 과 같은 무채색(-other)이다. */

.verdict-stat-mfds    { --verdict-stat-tint: var(--green-95);       --verdict-stat-ink: var(--accent-foreground-green); }

.verdict-stat-covered { --verdict-stat-tint: var(--blue-95);        --verdict-stat-ink: var(--primary-text); }

/* 변이 묶음 — 조치 가능성으로 셋을 짓는다 (FR-SUMMARY-04).
     묶음이 달라도 열은 같은 자리다 — 열을 묶음마다 갈면 같은 값을 비교할 수 없고,
     비어 있는 칸(승인 약물 —)이 그 변이가 이 묶음에 있는 이유 자체다.
     Somatic 은 셋을 알약 탭(.tabs-pill)으로 갈아 끼우는 패널이고,
     Germline 은 표가 하나뿐이라 묶음 없이 표 하나만 담는 테두리로 남는다. */

.vgroup {
  margin-top: 1rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
}

/* 머리줄과 표 사이 구분선 — Germline 순위표(.rank-lead)만 쓴다.
     Somatic 묶음에는 머리줄이 없어(260827 대표 지시 — 탭 줄이 이름과 건수를 이미 든다)
     표가 카드 직속이고, 이 클래스를 두면 카드 맨 위에 선 하나가 떠 버린다. */

.vgroup-body {
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
}

/* Germline 순위표 머리줄 (FR-SUMMARY-06) — 표를 감싸지 않고 카드 위에 맨몸으로 선다.
     탭 이름이 곧 표 이름이라 제목을 두지 않고 건수와 정렬 기준만 남긴다.
     좌우 여백을 두지 않아야 카드 테두리와 시작선이 맞는다 — 카드 안쪽 여백(px-5)을 따라 넣으면
     글줄이 표보다 안으로 들어가 어긋난다. 아래 간격은 뒤따르는 .vgroup 의 mt-4 가 만든다.
     좁은 화면에서 정렬 기준이 두 줄로 접히므로 baseline 으로 맞춘다 —
     items-center 로 두면 건수가 두 줄의 가운데에 떠 첫 줄과 어긋난다. */

.rank-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
}

.rank-lead-count {
  flex: none;
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

.rank-lead-desc {
  color: var(--label-alternative);
}

/* 변이 표 — 한 칸에 두 급이 들어간다(값 + 부연). 그래서 셀을 위로 정렬한다.
     약물 이름이 열 개까지 들어가는 칸이 있어 두 개만 펴 두고 나머지는 그 자리에서 편다 —
     행 높이가 변이마다 달라지면 표를 훑는 눈이 걸린다. */

.vtable thead th {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
}

.vtable tbody td {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  vertical-align: top;
}

.vtable tbody tr {
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.vtable tbody tr:hover {
  background-color: var(--fill-alternative);
}

.v-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.375rem;
  row-gap: 0.125rem;
}

.v-gene {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.v-protein {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-neutral);
}

.vtable tbody tr:hover .v-gene {
  color: var(--primary-text);
}

/* g./c. 표기는 가운뎃점에서 먼저 접혀야 한다 — break-all 이면 `c.2310` + `_2311insGGT` 로
     한 값이 두 줄로 쪼개져 못 읽는다(P-14 의 `2026-08-` + `24` 와 같은 사고). */

.v-genomic {
  margin-top: 0.25rem;
  display: block;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  color: var(--label-alternative);
               word-break: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}

/* Tier 는 색이 아니라 글자 농도로 갈린다 — 45행이 색색으로 뜨면 정작 봐야 할
     유전자명과 약물보다 배지가 먼저 눈에 든다(상태 배지와 같은 판단, brand.md). */

.v-tier {
  display: block;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
}

.v-tier-1 {
  color: var(--label-normal);
}

.v-tier-2 {
  color: var(--label-neutral);
}

.v-tier-3 {
  color: var(--label-alternative);
}

/* Assessment — 점 + 글자. 색만으로 구분하지 않는다 */

.assess {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-neutral);
}

.assess::before { content: ""; height: 0.375rem; width: 0.375rem; flex: none; border-radius: var(--radius-pill); background-color: var(--fill-strong); }

.assess-path::before {
  background-color: var(--status-negative);
}

.assess-likely::before {
  background-color: var(--red-80);
}

.assess-vus::before {
  background-color: var(--status-cautionary);
}

.drug-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.drug {
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background-color: var(--fill-alternative);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-neutral);
}

.drug-more {
  border-radius: var(--radius-sm);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.drug-more:hover {
  color: var(--primary-heavy);
}

/* 식약처 허가 — 이 열만 초록 점을 쓴다. "국내에서 쓸 수 있나"가 임상의에게
     승인 여부 다음으로 큰 갈림이라 훑을 때 걸리는 신호가 하나 필요하다. */

.mfds-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.mfds-ok::before { content: ""; height: 0.375rem; width: 0.375rem; flex: none; border-radius: var(--radius-pill); background-color: var(--status-positive); }

.v-main {
  display: block;
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

.v-sub {
  margin-top: 0.125rem;
  display: block;
  white-space: nowrap;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  color: var(--label-alternative);
}

.v-none {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.vc-go {
  width: 2.5rem;
  text-align: right;
}

.vc-go-icon {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--label-alternative);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.vtable tbody tr:hover .vc-go-icon {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: var(--primary-text);
}

/* ===== 분석 건 상세 (P-15) =====
     같은 건이 상태에 따라 다른 것을 묻는다 — 끝났으면 "어디서 보나", 도는 중이면
     "얼마나 남았나", 실패면 "왜, 크레딧은 어떻게 되나". 그래서 머리와 신청 내역은
     상태와 무관하게 고정이고, 그 사이 한 칸만 상태별로 갈린다. */

.detail-state {
  margin-top: 1rem;
}

.detail-sec-title {
  margin-top: 2rem;
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
  font-weight: 700;
  color: var(--label-normal);
}

.detail-progress {
  padding: 1.25rem;
}

@media (min-width: 768px) {

  .detail-progress {
    padding: 1.5rem;
  }
}

.detail-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.detail-progress-title {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
}

.detail-progress-pct {
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  letter-spacing: var(--letter-spacing-title3);
  font-weight: 700;
  color: var(--primary-text); font-variant-numeric: tabular-nums;
}

.detail-progress .progress {
  margin-top: 0.75rem;
}

.detail-progress-facts {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5rem;
  row-gap: 0.75rem;
}

.detail-note {
  margin-top: 1.25rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 1rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* 크레딧 반환은 실패 안내에서 가장 먼저 찾는 값이라 본문보다 한 급 세운다 */

.detail-refund {
  margin-top: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

/* 전표를 읽기 전용으로 다시 쓰므로 제출 화면의 위 여백만 걷어낸다 */

.detail-sec-title + .docket {
  margin-top: 0.75rem;
}

/* 섹션 제목이 앞에 서면 본문 시작 괘선을 되살린다 — 괘선 없는 변형(.docket-plain)이
     그 선을 걷어내는 바람에 `신청 내역`과 첫 묶음 사이 64px 가 빈칸으로만 남아 둘이 갈라졌다.
     농도는 합계 위 .docket-cut 과 같은 label-alternative — 전표를 끊는 선은 둘 다 같은 급이다.
     제목 아래 28 · 선 아래 20(.docket-group pt-5)으로 선이 두 글줄 사이에 선다. */

.detail-sec-title + .docket .docket-body {
  margin-top: 1rem;
  border-top-width: 1px;
  border-color: var(--label-alternative);
}

/* ===== 전체 참고문헌 (P-18) =====
     869건이다. 한 건이 두세 줄짜리 서지라 카드로 두르면 스크롤이 끝나지 않는다 —
     번호와 본문만 남기고 헤어라인으로 끊는다. 번호를 왼쪽에 고정 폭으로 세우는 이유는
     해석문의 각주 `[121]` 을 들고 와 눈으로 찾는 자리이기 때문이다. */

.cite-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cite-lead {
  max-width: 720px;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.cite-count {
  margin-top: 1rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.cite-list {
  display: flex;
  flex-direction: column;
}

.cite-item {
  display: flex;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {

  .cite-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.cite-list > .cite-item:last-child {
  border-bottom-width: 0px;
}

.cite-no {
  width: 2.5rem;
  flex: none;
  text-align: right;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

.cite-body {
  min-width: 0px;
  flex: 1 1 0%;
}

.cite-text {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-normal); word-break: normal; overflow-wrap: anywhere;
}

.cite-meta {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.cite-pmid {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.cite-pmid:hover {
  color: var(--primary-heavy);
}

.cite-genes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.cite-gene {
  border-radius: var(--radius-sm);
  background-color: var(--fill-alternative);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 500;
  color: var(--label-neutral);
}

/* 검색어와 겹친 자리 — 배경만 얹고 글자색은 건드리지 않는다(본문 대비를 그대로 둔다) */

.cite-hit {
  border-radius: var(--radius-xs);
  background-color: var(--blue-95);
  color: var(--primary-text);
}

.cite-more {
  display: flex;
  justify-content: center;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding: 1.25rem;
}

/* ===== 유전자 상세 (P-17) =====
     원본 리포트에서 한 유전자의 정보는 5개 섹션에 흩어져 있다(03·04·05·06·08).
     그것을 유전자 하나 아래로 모으고, 유전자 사이 이동은 좌측 인덱스 클릭 한 번으로 끝낸다.
     스크롤은 유전자 안에서만 일어난다 (report-structure.md 3장 원칙 2). */

/* mt-4 는 좁은 폭에서 위에 서는 유전자 픽커와의 간격이다 — lg 에서는 픽커가 숨고
     이 층이 패널의 첫 요소가 되므로, 시작 간격을 패널에 맡기고 마진을 접는다. */

.gene-layout {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {

  .gene-layout {
    margin-top: 0px;
    flex-direction: row;
    gap: 2rem;
  }
}

.gene-index {
  display: none;
}

@media (min-width: 1024px) {

  .gene-index {
    display: block;
    width: 16rem;
    flex: none;
  }
}

/* 인덱스는 스크롤에 고정한다 — 24개를 차례로 훑는 화면이라 매번 위로 올라가면 검토가 끊긴다.
     top 은 sticky GNB(h-16=64) 아래로 한 숨 띄운 값이다. */

@media (min-width: 1024px) {

  .gene-index-inner {
    position: sticky;
  }
}

.gene-index-inner { top: 5rem; }

/* 제목과 범례가 한 줄을 나눠 쓴다 — 아래 여백은 줄이 갖는다(제목이 아니라) */

.gene-index-head {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.gene-index-title {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  color: var(--label-normal);
}

@media (min-width: 1024px) {

  .gene-picker {
    display: none;
  }
}

/* 목록이 24개라 사이드바 안에서만 스크롤한다 — 페이지째 길어지면 우측 상세가 밀린다 */

.gene-nav {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  padding-right: 0.25rem; max-height: 26rem;
}

/* 한 줄에 유전자명·Tier·집계 셋을 다 넣으면 256px 사이드바에서 접힌다.
     이름 줄과 집계 줄을 나눠 두 줄로 세운다 — 접힌 것이 아니라 처음부터 두 줄이다. */

.gene-nav-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: var(--radius-md);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.gene-nav-item:hover {
  background-color: var(--fill-alternative);
}

.gene-nav-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gene-nav-item.is-current {
  background-color: var(--blue-95);
}

.gene-nav-sym {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  color: var(--label-normal);
}

.gene-nav-item.is-current .gene-nav-sym {
  color: var(--primary-text);
}

/* 승인 약물이 있는 유전자 — 결과 요약의 칩과 같은 점 하나로 갈린다 */

.gene-nav-dot {
  height: 0.375rem;
  width: 0.375rem;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--primary-normal);
}

/* 점만으로는 뜻이 전달되지 않는다 — 제목 줄 오른쪽 끝에 범례를 붙인다. 사이드바가 256px
     뿐이라 nowrap 으로 두고 문구를 짧게 잡았다(옆에 '유전자'가 이미 서 있어 되풀이하지
     않는다). 같은 점이 Somatic 은 승인 약물, Germline 은 증상 연관이라 문구는 페이지가 넣는다. */

.gene-nav-legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  color: var(--label-alternative);
}

.gene-nav-tier {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 600;
  color: var(--label-alternative);
}

.gene-nav-stats {
  white-space: nowrap;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  color: var(--label-alternative); font-variant-numeric: tabular-nums;
}

.gene-nav-empty {
  margin-top: 0.75rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.gene-none {
  margin-top: 0.75rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 0.75rem;
}

.gene-none-head {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-alternative);
}

.gene-none-head::-webkit-details-marker { display: none; }

.gene-none-chevron {
  margin-left: auto;
  font-size: 1.125rem;
  line-height: 1.75rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.gene-none[open] .gene-none-chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.gene-none-body {
  margin-top: 0.625rem;
}

.gene-none-empty {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.gene-main {
  min-width: 0px;
  flex: 1 1 0%;
}

.gene-b1 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1.25rem;
}

@media (min-width: 768px) {

  .gene-b1 {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 1.5rem;
  }
}

.gene-b1-id {
  min-width: 0px;
}

.gene-title {
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
  font-weight: 700;
  color: var(--label-normal);
}

@media (min-width: 768px) {

  .gene-title {
    font-size: var(--font-size-title1);
    line-height: var(--line-height-title1);
    letter-spacing: var(--letter-spacing-title1);
  }
}

.gene-sub {
  margin-top: 0.375rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.gene-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 0.75rem;
}

@media (min-width: 640px) {

  .gene-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .gene-metrics {
    flex: none;
  }
}

.gene-metric {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
}

.gene-metric-key {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.gene-metric-val {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal); font-variant-numeric: tabular-nums;
}

/* 블록 탭 — 밑줄형. 좁은 화면에서는 가로로 민다(줄바꿈하면 탭 줄이 두 겹이 된다) */

.gene-tabs {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
    scrollbar-width: none;
}

.gene-tabs::-webkit-scrollbar { display: none; }

.gene-tab {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.gene-tab:hover {
  color: var(--label-normal);
}

.gene-tab[aria-selected="true"] {
  border-color: var(--primary-normal);
  color: var(--label-normal);
}

.gene-tab-num {
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 700;
  color: var(--label-neutral);
}

.gene-tab[aria-selected="true"] .gene-tab-num {
  background-color: var(--blue-95);
  color: var(--primary-text);
}

.gene-panel {
  padding-top: 1.25rem;
}

.gene-empty {
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

/* ── B2 변이 정보 ── 기본 항목과 접힌 상세 항목으로 나눈다 (FR-GENE-07) */

.vcard {
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
}

.vcard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  border-bottom-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.vcard-no {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--label-alternative);
}

.vcard-prot {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal);
}

.vcard-badges {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vfields {
  display: grid;
  column-gap: 2rem;
  row-gap: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {

  .vfields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  .vfields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vfield {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 640px) {

  .vfield-wide {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 1024px) {

  .vfield-wide {
    grid-column: span 3 / span 3;
  }
}

.vfield-key {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.vfield-val {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 500;
  color: var(--label-normal); word-break: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}

.vmore {
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
}

.vmore > summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.vmore > summary:hover {
  background-color: var(--fill-alternative);
  color: var(--label-normal);
}

.vmore > summary::-webkit-details-marker { display: none; }

.vmore-chevron {
  margin-left: auto;
  font-size: 1.125rem;
  line-height: 1.75rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.vmore[open] .vmore-chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* 외부 DB 식별자 — COSMIC·HGMD·dbSNP 는 해당 DB 상세로 나간다 (FR-GENE-14) */

.db-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.db-link:hover {
  color: var(--primary-heavy);
}

/* ── B3 표적약물 · B4 임상시험 공용 카드 ── */

.dgroup {
  margin-bottom: 1.5rem;
}

.dgroup-title {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  color: var(--label-normal);
}

.dcard {
  margin-bottom: 0.75rem;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1.25rem;
}

.dcard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
}

.dcard-name {
  font-size: var(--font-size-headline2);
  line-height: var(--line-height-headline2);
  letter-spacing: var(--letter-spacing-headline2);
  font-weight: 700;
  color: var(--label-normal); word-break: normal; overflow-wrap: anywhere;
}

.dcard-for {
  margin-top: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  color: var(--label-alternative);
}

.dcard-for-val {
  font-weight: 600;
  color: var(--label-normal);
}

/* 설명이 1만 자를 넘는 약물이 있다(pembrolizumab). 6줄에서 자르고 펼치게 둔다 */

.dcard-desc {
  margin-top: 0.75rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.dcard-desc.is-clamped {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
}

.dcard-more {
  margin-top: 0.5rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--primary-text);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.dcard-more:hover {
  color: var(--primary-heavy);
}

.dcard-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-top: 1rem;
}

.dcard-links-key {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.glink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 600;
  color: var(--label-normal);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.glink:hover {
  border-color: var(--primary-normal);
  color: var(--primary-text);
}

/* Response — 감수성과 내성은 판단이 정반대라 색으로 갈린다 (brand.md 상태색) */

.resp {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
}

.resp-sensitive {
  background-color: var(--green-95);
  color: var(--status-positive);
}

.resp-resistance {
  background-color: var(--red-95);
  color: var(--status-negative);
}

.tcard-title {
  margin-top: 0.5rem;
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
  font-weight: 600;
  color: var(--label-normal);
}

.tcard-drugs {
  margin-top: 0.5rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

.tcard-meta {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.375rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.tfilter {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.phase-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--label-neutral);
}

.phase-late {
  background-color: var(--blue-95);
  color: var(--primary-text);
}

/* ── B5 임상적 해석 ── 변이별 아코디언. 예시본 기준 48쪽 분량이라 접어 둔다 */

.icard {
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
}

.icard > summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.icard > summary:hover {
  background-color: var(--fill-alternative);
}

.icard > summary::-webkit-details-marker { display: none; }

.icard-chevron {
  margin-left: auto;
  flex: none;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--label-alternative);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  transition-timing-function: var(--ease-standard);
}

.icard[open] .icard-chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.icard-body {
  border-top-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.ifield {
  margin-bottom: 1.25rem;
}

.ifield:last-child {
  margin-bottom: 0px;
}

.ifield-key {
  margin-bottom: 0.375rem;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 700;
  color: var(--label-normal);
}

.ifield-text {
  max-width: 720px;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-neutral);
}

/* 미갱신 안내 — 본문과 같은 급으로 두면 근거 문장으로 읽힌다 (FR-GENE-16) */

.inote {
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--fill-alternative);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  color: var(--label-alternative);
}

.inote-icon {
  margin-top: 0.125rem;
  flex: none;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* 각주 번호 — 누르면 그 자리에서 서지가 뜬다 */

.\!fn {
  border-radius: var(--radius-xs);
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  vertical-align: baseline;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--primary-text);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.\!fn:hover {
  background-color: var(--blue-95);
}

.fn {
  border-radius: var(--radius-xs);
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  vertical-align: baseline;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--primary-text);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.fn:hover {
  background-color: var(--blue-95);
}

.\!fn {
    font-variant-numeric: tabular-nums !important;
  }

.fn {
    font-variant-numeric: tabular-nums;
  }

/* 각주 팝오버 — 문서에 하나만 두고 위치만 옮긴다 */

.cite-pop {
  position: fixed;
  z-index: 50;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  background-color: var(--background-normal-normal);
  padding: 1rem;
  --tw-shadow: var(--shadow-overlay);
  --tw-shadow-colored: var(--shadow-overlay);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cite-pop-close {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  color: var(--label-alternative);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: var(--ease-standard);
}

.cite-pop-close:hover {
  color: var(--label-normal);
}

.cite-pop-no {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--label-alternative);
}

.cite-pop-text {
  margin-top: 0.375rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-normal);
}

.cite-pop .cite-pmid {
  margin-top: 0.75rem;
}

/* 정의 툴팁 — 기본 말풍선은 한 조각짜리라 nowrap 이다. 항목 정의는 문장이라 접혀야 한다 */

.tooltip-bubble-wide {
  width: 16rem;
  white-space: normal;
  text-align: left;
}

/* 변이 카드 머리에서는 배지가 한 줄에 선다 — 표에서 쓰던 위 여백을 뺀다 */

.vcard-badges .assess {
  margin-top: 0px;
}

/* ===== Germline 결과 요약 (P-16 파이프라인 분기) =====
     Somatic 은 조치 가능성이 불연속(약물이 있거나 없거나)이라 세 묶음으로 잘랐지만,
     표현형 연관성은 이어진 값이라 자를 자리가 없다 — 한 표에 순위로 세운다. */

.rank {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--fill-normal);
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 700;
  color: var(--label-neutral);
}

/* 증상과 맞은 변이의 순위만 브랜드 면을 두른다 — 이 표에서 먼저 볼 줄이다 */

.gtable tr[data-match="1"] .rank {
  background-color: var(--primary-normal);
  color: var(--secondary-normal);
}

.vc-rank {
  width: 3.5rem;
}

.vc-assess {
  white-space: nowrap;
}

.vc-pheno {
  min-width: 0px;
}

.v-main2 {
  display: block;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
  font-weight: 500;
  color: var(--label-normal);
}

.pheno-match {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--blue-95);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
  font-weight: 700;
  color: var(--primary-text);
}

.moi {
  white-space: nowrap;
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
  font-weight: 600;
  color: var(--label-normal);
}

.vc-proband {
  white-space: nowrap;
}

/* 표에서는 Assessment 점이 셀 첫 줄이라 위 여백을 뺀다 */

.gtable .assess {
  margin-top: 0px;
}

.pheno-list {
  margin-top: 0.5rem;
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
  color: var(--label-alternative);
}

.pheno-chips {
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pheno-chip {
  border-radius: var(--radius-pill);
  border-width: 1px;
  border-color: var(--line-normal-normal);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
  font-weight: 500;
  color: var(--label-neutral);
}

/* 순위 열을 숨긴 상태 — 증상을 입력하지 않고 돌린 분석 (FR-SUMMARY-06) */

.gtable.is-norank .vc-rank,
  .gtable.is-norank [data-rank-col] {
  display: none;
}

/* 결과 요약 표의 폭 — 7칸이 컨테이너 1120 안에 겨우 든다. 그 아래에서는 칸을 눌러
     글자를 접는 대신 표째 가로로 민다(P-14 와 같은 판단). 접히면 g./c. 표기가 쪼개져
     읽히지 않는다: `g.55181319_55181320insGGT` → 두 줄. */

@media (min-width: 768px) {
    .vgroup .data-table-scroll {
    overflow-x: auto;
  }
  }

@media (min-width: 768px) and (max-width: 1279.98px) {
    .vtable { min-width: 1040px; }
  }

/* 행 → 카드 전환 (768 미만, 모바일) — FR-SUMMARY-10. 변이 하나가 카드 하나다.
     칸을 세로로 쌓기만 하면 카드가 여섯 줄이 되므로, 숫자 칸 셋(식약처·임상시험·기타)을
     2열 그리드에 눕혀 카드 높이를 절반으로 줄인다. order 로 순서를 바꾸는 이유는
     모바일에서 먼저 봐야 하는 것이 식약처 허가와 임상시험이라서다. */

@media (max-width: 767.98px) {
    .vtable,
    .vtable tbody,
    .vtable tbody tr,
    .vtable tbody td {
    display: block;
  }
    .vtable thead {
    display: none;
  }
    .vtable tbody {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
  }
    .vtable tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.75rem;
    border-radius: var(--radius-xl);
    border-width: 1px;
    border-color: var(--line-normal-normal);
    background-color: var(--background-normal-normal);
    padding: 1rem;
  }
    /* 선택자에 tbody 를 끼우는 이유: 위 `.data-table tbody td`(0,1,2)가 padding·border 를
       걸고 있어 `.vtable td`(0,1,1)로는 눌리지 않는다. 빼면 카드에 표 여백이 남는다. */
    .vtable tbody td {
    width: auto;
    border-width: 0px;
    padding: 0px;
  }
    .vtable tbody td[data-label]::before {
      content: attr(data-label);
      margin-bottom: 0.25rem;
      display: block;
      font-size: var(--font-size-label2);
      line-height: var(--line-height-label2);
      letter-spacing: var(--letter-spacing-label2);
      font-weight: 500;
      color: var(--label-alternative);
    }
    .vtable tbody .vc-variant {
    order: 1;
    grid-column: span 2 / span 2;
  }
    .vtable tbody .vc-tier {
    order: 2;
    grid-column: span 2 / span 2;
  }
    .vtable tbody .vc-drug {
    order: 3;
    grid-column: span 2 / span 2;
  }
    .vtable tbody .vc-mfds {
    order: 4;
  }
    .vtable tbody .vc-trial {
    order: 5;
  }
    .vtable tbody .vc-other {
    order: 6;
    grid-column: span 2 / span 2;
  }
    /* 변이 이름은 카드 제목이라 라벨이 필요 없고, 화살표는 카드 전체가 링크라 자리를 뺀다 */
    .vtable tbody .vc-variant::before {
    display: none;
  }
    .vtable tbody .vc-go {
    display: none;
  }
    /* Tier 와 Assessment 는 한 줄로 붙인다 — 카드에서 두 줄을 쓸 값이 아니다 */
    .vtable .vc-tier .v-tier {
    display: inline;
  }
    .vtable .vc-tier .assess {
    margin-left: 0.5rem;
    margin-top: 0px;
  }
    /* 좁은 칸에서는 부연이 접혀야 한다 — 표에서 걸어 둔 nowrap 을 여기서 푼다 */
    .vtable .v-main,
    .vtable .v-sub,
    .vtable .mfds-ok {
    white-space: normal;
  }
    .vtable .drug {
    white-space: normal; word-break: normal; overflow-wrap: anywhere;
  }
    /* Germline 표 — 순위와 변이가 한 줄, 나머지는 2열. Proband 는 값이 셋이라 한 줄을 다 쓴다 */
    .gtable tbody .vc-rank {
    order: 1;
    grid-column: span 2 / span 2;
  }
    .gtable tbody .vc-variant {
    order: 2;
    grid-column: span 2 / span 2;
  }
    .gtable tbody .vc-assess {
    order: 3;
  }
    .gtable tbody .vc-moi {
    order: 4;
  }
    .gtable tbody .vc-pheno {
    order: 5;
    grid-column: span 2 / span 2;
  }
    .gtable tbody .vc-proband {
    order: 6;
    grid-column: span 2 / span 2;
  }
    /* 순위 배지는 숫자 자체가 라벨이다. td 를 선택자에 끼우는 이유는 위
       `.vtable tbody td[data-label]::before`(0,2,3)와 특정도를 맞추기 위해서다 —
       빼면 (0,2,2)가 돼 눌리지 않고 "순위" 글자가 그대로 남는다. */
    .gtable tbody td.vc-rank::before {
    display: none;
  }
    .gtable tbody td.vc-rank {
    padding-bottom: 0px;
  }
    .gtable .moi, .gtable .vc-proband, .gtable .vc-assess {
    white-space: normal;
  }
  }

/* 리포트 유틸 줄 — 좁은 화면에서 되돌아가기와 버튼 셋이 한 줄에 안 든다.
     버튼은 flex-auto 라 제 글자폭을 지키고, 그래도 안 들어가면 다음 줄로 넘어간 뒤
     그 줄을 나눠 갖는다 — flex-1(basis 0)이면 "전체화면 종료" 같은 긴 이름이
     1/3 폭으로 짓눌린다. */

@media (max-width: 400px) {
    .report-util-actions {
    width: 100%;
  }
    .report-util-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }
  }

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

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.left-2 {
  left: 0.5rem;
}

.top-2 {
  top: 0.5rem;
}

.z-50 {
  z-index: 50;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.-mt-16 {
  margin-top: -4rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-16 {
  height: 4rem;
}

.h-5 {
  height: 1.25rem;
}

.h-7 {
  height: 1.75rem;
}

.h-auto {
  height: auto;
}

.min-h-40 {
  min-height: 10rem;
}

.\!w-full {
  width: 100% !important;
}

.w-1\/2 {
  width: 50%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-7 {
  width: 1.75rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-10 {
  min-width: 2.5rem;
}

.max-w-reading {
  max-width: 720px;
}

.\!flex-1 {
  flex: 1 1 0% !important;
}

.\!flex-none {
  flex: none !important;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

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

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize-y {
  resize: vertical;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-6 {
  column-gap: 1.5rem;
}

.gap-x-7 {
  column-gap: 1.75rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\!rounded-md {
  border-radius: var(--radius-md) !important;
}

.rounded-card {
  border-radius: var(--radius-xl);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-pill {
  border-radius: var(--radius-pill);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-line-alternative {
  border-color: var(--line-normal-alternative);
}

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

.bg-background-alternative {
  background-color: var(--background-normal-alternative);
}

.bg-background-normal {
  background-color: var(--background-normal-normal);
}

.bg-blue-95 {
  background-color: var(--blue-95);
}

.bg-blue-99 {
  background-color: var(--blue-99);
}

.bg-fill-alternative {
  background-color: var(--fill-alternative);
}

.bg-fill-normal {
  background-color: var(--fill-normal);
}

.bg-inverse-bg {
  background-color: var(--inverse-background);
}

.bg-primary {
  background-color: var(--primary-normal);
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

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

.\!px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.\!px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.\!px-7 {
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.\!py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

.\!py-3\.5 {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

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

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-11 {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.\!text-right {
  text-align: right !important;
}

.text-right {
  text-align: right;
}

.\!text-body1 {
  font-size: var(--font-size-body1) !important;
  line-height: var(--line-height-body1-normal) !important;
  letter-spacing: var(--letter-spacing-body1) !important;
}

.\!text-body2 {
  font-size: var(--font-size-body2) !important;
  line-height: var(--line-height-body2-normal) !important;
  letter-spacing: var(--letter-spacing-body2) !important;
}

.\!text-headline1 {
  font-size: var(--font-size-headline1) !important;
  line-height: var(--line-height-headline1) !important;
  letter-spacing: var(--letter-spacing-headline1) !important;
}

.\!text-label1 {
  font-size: var(--font-size-label1) !important;
  line-height: var(--line-height-label1-normal) !important;
  letter-spacing: var(--letter-spacing-label1) !important;
}

.\!text-label2 {
  font-size: var(--font-size-label2) !important;
  line-height: var(--line-height-label2) !important;
  letter-spacing: var(--letter-spacing-label2) !important;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-body1 {
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-normal);
  letter-spacing: var(--letter-spacing-body1);
}

.text-body1-reading {
  font-size: var(--font-size-body1);
  line-height: var(--line-height-body1-reading);
  letter-spacing: var(--letter-spacing-body1);
}

.text-body2 {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-normal);
  letter-spacing: var(--letter-spacing-body2);
}

.text-body2-reading {
  font-size: var(--font-size-body2);
  line-height: var(--line-height-body2-reading);
  letter-spacing: var(--letter-spacing-body2);
}

.text-caption1 {
  font-size: var(--font-size-caption1);
  line-height: var(--line-height-caption1);
  letter-spacing: var(--letter-spacing-caption1);
}

.text-display3 {
  font-size: var(--font-size-display3);
  line-height: var(--line-height-display3);
  letter-spacing: var(--letter-spacing-display3);
}

.text-heading1 {
  font-size: var(--font-size-heading1);
  line-height: var(--line-height-heading1);
  letter-spacing: var(--letter-spacing-heading1);
}

.text-heading2 {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  letter-spacing: var(--letter-spacing-heading2);
}

.text-headline1 {
  font-size: var(--font-size-headline1);
  line-height: var(--line-height-headline1);
  letter-spacing: var(--letter-spacing-headline1);
}

.text-label1 {
  font-size: var(--font-size-label1);
  line-height: var(--line-height-label1-normal);
  letter-spacing: var(--letter-spacing-label1);
}

.text-label2 {
  font-size: var(--font-size-label2);
  line-height: var(--line-height-label2);
  letter-spacing: var(--letter-spacing-label2);
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-title1 {
  font-size: var(--font-size-title1);
  line-height: var(--line-height-title1);
  letter-spacing: var(--letter-spacing-title1);
}

.text-title2 {
  font-size: var(--font-size-title2);
  line-height: var(--line-height-title2);
  letter-spacing: var(--letter-spacing-title2);
}

.text-title3 {
  font-size: var(--font-size-title3);
  line-height: var(--line-height-title3);
  letter-spacing: var(--letter-spacing-title3);
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.not-italic {
  font-style: normal;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.\!text-label-neutral {
  color: var(--label-neutral) !important;
}

.\!text-status-positive {
  color: var(--status-positive) !important;
}

.text-inverse-label {
  color: var(--inverse-label);
}

.text-inverse-label-alt {
  color: var(--inverse-label-alt);
}

.text-label-alternative {
  color: var(--label-alternative);
}

.text-label-assistive {
  color: var(--label-assistive);
}

.text-label-neutral {
  color: var(--label-neutral);
}

.text-label-normal {
  color: var(--label-normal);
}

.text-primary-text {
  color: var(--primary-text);
}

.text-static-white {
  color: var(--static-white);
}

.text-status-cautionary {
  color: var(--status-cautionary);
}

.text-status-negative {
  color: var(--status-negative);
}

.text-status-positive {
  color: var(--status-positive);
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* --- 스크롤바 숨김 --- */

.selection\:bg-blue-95 *::selection {
  background-color: var(--blue-95);
}

.selection\:bg-blue-95::selection {
  background-color: var(--blue-95);
}

.hover\:bg-fill-normal:hover {
  background-color: var(--fill-normal);
}

.hover\:text-label-normal:hover {
  color: var(--label-normal);
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:fixed:focus {
  position: fixed;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:rounded-pill:focus {
  border-radius: var(--radius-pill);
}

.focus\:bg-label-normal:focus {
  background-color: var(--label-normal);
}

.focus\:bg-primary:focus {
  background-color: var(--primary-normal);
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.focus\:text-secondary:focus {
  color: var(--secondary-normal);
}

.focus\:text-static-white:focus {
  color: var(--static-white);
}

@media (min-width: 640px) {

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:\!px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 768px) {

  .md\:mt-20 {
    margin-top: 5rem;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-80 {
    width: 20rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:text-display3 {
    font-size: var(--font-size-display3);
    line-height: var(--line-height-display3);
    letter-spacing: var(--letter-spacing-display3);
  }

  .md\:text-title1 {
    font-size: var(--font-size-title1);
    line-height: var(--line-height-title1);
    letter-spacing: var(--letter-spacing-title1);
  }

  .md\:text-title2 {
    font-size: var(--font-size-title2);
    line-height: var(--line-height-title2);
    letter-spacing: var(--letter-spacing-title2);
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:min-h-hero {
    min-height: 80vh;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:py-11 {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-44 {
    padding-top: 11rem;
    padding-bottom: 11rem;
  }

  .lg\:text-display2 {
    font-size: var(--font-size-display2);
    line-height: var(--line-height-display2);
    letter-spacing: var(--letter-spacing-display2);
  }
}

@media (min-width: 1280px) {

  .xl\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}