@charset "utf-8";

:root {
   --color-bg: #fff;
   
   --section-bg1: ;
   --section-bg2: ;
   --section-bg3: ;
   --section-bg4: ;
   
   --color-static1: #202224;
   --color-static2: #1F463B;
   --color-static3: #286B55;
   --color-static4: #DCE9E4;

   --color-border1: #EEEEEB;
   --color-border2: #DEDDD8;
   --color-border3: #C8C7C1;

   --color-font1: #202224;
   --color-font2: #414448;
   --color-font3: #686D72;
   --color-font4: #92989E;
   --color-font5: #B8BDC1;
   --color-font6: #FFFFFF;

   /* 상태 */
   --color-red: #D32F2F;
   --color-redbg: #FFEDEE;
   --color-white: #FFFFFF;
   --color-black: #000000;

   /* 알파용 RGB 토큰 - 공백 구분(쉼표 X). rgb(var(--rgb-x) / 0.1) */
   --rgb-static1: 29 75 58;
   --rgb-white: 255 255 255;
   --rgb-black: 0 0 0;

   /* 폰트 패밀리 - 자체 호스팅 + font-display: swap. 스택 끝에 시스템 한글 폰트 */
   --font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
                  system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

   /* 폰트 크기 - 값은 시안 실측 후 조정. 14·12는 더 줄면 가독성이 떨어져 고정 */
   --fs-60: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem);
   --fs-48: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
   --fs-40: clamp(1.625rem, 1.2rem + 1.3vw, 2.5rem);
   --fs-36: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
   --fs-32: clamp(1.375rem, 1.12rem + 0.9vw, 2rem);
   --fs-28: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
   --fs-24: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
   --fs-22: clamp(1.09375rem, 0.99rem + 0.4vw, 1.375rem);
   --fs-20: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
   --fs-18: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
   --fs-17: clamp(0.96875rem, 0.92rem + 0.18vw, 1.0625rem);
   --fs-16: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
   --fs-15: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
   --fs-14: 0.875rem;
   --fs-13: 0.8125rem;
   --fs-12: 0.75rem;

   /* 간격 - 전부 clamp() */
   --space-160: clamp(5rem, 3rem + 6vw, 10rem);
   --space-120: clamp(4rem, 2.5rem + 4.5vw, 7.5rem);
   --space-100: clamp(3.5rem, 2.2rem + 3.8vw, 6.25rem);
   --space-80: clamp(3rem, 2rem + 3vw, 5rem);
   --space-60: clamp(2.25rem, 1.6rem + 2vw, 3.75rem);
   --space-48: clamp(1.875rem, 1.4rem + 1.6vw, 3rem);
   --space-40: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
   --space-30: clamp(1.4375rem, 1.2rem + 0.8vw, 1.875rem);
   --space-24: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

   /* 버튼 및 컴포넌트 크기 */
   --size-56: clamp(3rem, 2.7rem + 1vw, 3.5rem);
   --size-48: clamp(2.5rem, 2.2rem + 1vw, 3rem);
   --size-44: clamp(2.4rem, 1.95rem + 1vw, 2.75rem);
   --size-40: clamp(2.3rem, 1.7rem + 1vw, 2.5rem);

   /* 기타 */
   --header-height: 80px;
   --box-shadow: 0 0 10px rgb(var(--rgb-black) / 0.05);
   --radius: 0px; /* 홈페이지 시안은 각진 모서리 */
}
/* 필터 */
.filter-white {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.filter-black {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}

.red-txt {color: var(--color-red) !important;}
.static1-txt {color: var(--color-static1) !important;}
.gray6-txt {color: var(--color-gray6) !important;}
.gray8-txt {color: var(--color-gray8) !important;}

.weight300 {font-weight: 300 !important;}
.weight400 {font-weight: 400 !important;}
.weight500 {font-weight: 500 !important;}
.weight600 {font-weight: 600 !important;}

/* 타이포그래피 유틸리티 - 클래스로 크기를 지정한다. 개별 CSS에서 재선언 금지 */
.hero-tit {font-size: var(--fs-48); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em;}
.section-tit {font-size: var(--fs-40); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em;}
.card-tit {font-size: var(--fs-24); font-weight: 600; line-height: 1.5;}
.card-sub {font-size: var(--fs-20); font-weight: 500; line-height: 1.5;}
.body-large {font-size: var(--fs-18); font-weight: 400; line-height: 1.5;}
.body-medium {font-size: var(--fs-16); font-weight: 400; line-height: 1.5;}
.body-small {font-size: var(--fs-15); font-weight: 400; line-height: 1.5;}
.label {font-size: var(--fs-14); font-weight: 500; line-height: 1.5;}
.eng-tit {display: block; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;}

/* 버튼 - 모양(.square-btn .round-btn .ico-btn .txt-btn) + 색(.main-btn 등) 조합 */
.round-btn {column-gap: 8px; width: fit-content; display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-40); padding-inline: var(--fs-16); border-radius: 999px; border: 1px solid transparent; font-size: var(--fs-16); font-weight: 500; line-height: 1.5; transition: background-color 0.2s, color 0.2s, border-color 0.2s; background-color: var(--color-gray2); color: var(--color-gray8);}
.square-btn {column-gap: 8px; width: fit-content; display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-48); padding-inline: var(--fs-24); border-radius: var(--radius); border: 1px solid transparent; font-size: var(--fs-15); font-weight: 500; transition: background-color 0.2s, color 0.2s, border-color 0.2s;}
.square-btn.small {min-height: var(--size-40); padding-inline: var(--fs-16); font-size: var(--fs-14);}
.square-btn.large {min-height: var(--size-56); padding-inline: var(--fs-28); font-size: var(--fs-16);}
.square-btn.full, .round-btn.full {width: 100%;}
.square-btn svg, .round-btn svg {flex: none; width: 16px; height: 16px; transition: transform 0.2s;}
.square-btn:hover svg, .round-btn:hover svg {transform: translateX(4px);}
.ico-btn {width: var(--size-44); height: var(--size-44); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s; background-color: var(--color-gray2);}
.ico-btn img, .ico-btn svg {width: var(--space-24); height: var(--space-24);}
.txt-btn {position: relative; width: fit-content; transition: color 0.2s; display: flex; align-items: center; justify-content: center; column-gap: 4px; min-height: 44px; line-height: 1.5; font-size: var(--fs-15); font-weight: 500; color: var(--color-gray9);}
.txt-btn svg {flex: none; width: 14px; height: 14px; transition: transform 0.2s;}

.txt-btn:disabled, .txt-btn.disabled {color: var(--color-gray5); pointer-events: none;}
.round-btn:disabled, .round-btn.disabled,
.square-btn:disabled, .square-btn.disabled {border-color: var(--color-gray4); background-color: var(--color-gray4); color: var(--color-gray1); pointer-events: none;}
.main-btn {background-color: var(--color-static1); color: var(--color-white);}
.sub-btn {border-color: var(--color-static1); background-color: var(--color-white); color: var(--color-static1);}
.dark-btn {background-color: var(--color-gray9); color: var(--color-white);}
.line-btn {border-color: var(--color-gray3); background-color: var(--color-white); color: var(--color-gray8);}
.black-line-btn {border-color: var(--color-gray9); background-color: var(--color-white); color: var(--color-gray9);}
.white-line-btn {border-color: rgb(var(--rgb-white) / 0.7); background-color: transparent; color: var(--color-white);} /* 어두운 배경 위 */
.white-btn {background-color: var(--color-white); color: var(--color-gray8);}
.btn-list {display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.ico-btn.transparent-btn {background-color: transparent; transition: opacity 0.2s;}

.ico-btn:disabled, .ico-btn.disabled {pointer-events: none;}
.ico-btn:disabled img, .ico-btn.disabled img,
.ico-btn:disabled svg, .ico-btn.disabled svg {opacity: 0.3;}

/* 메인 버튼 호버 */
.main-btn:hover {background-color: var(--color-static2);}
.sub-btn:hover {background-color: var(--color-static3); border-color: var(--color-static2); color: var(--color-static2);}
.dark-btn:hover {background-color: var(--color-gray11);}
.line-btn:hover {background-color: var(--color-gray2); border-color: var(--color-gray4); color: var(--color-gray9);}
.black-line-btn:hover {border-color: var(--color-static1); color: var(--color-static1);}
.white-line-btn:hover {background-color: var(--color-white); color: var(--color-gray9);}
.white-btn:hover {background-color: var(--color-gray2); color: var(--color-gray9);}
.txt-btn:hover svg {transform: translateX(3px);}
.ico-btn.transparent-btn:hover {opacity: 0.7;}

/* 점 목록 */
.dot-ul {display: flex; flex-direction: column; row-gap: 6px;}
.dot-ul > li {position: relative; padding-left: 12px;}
.dot-ul > li::before {content: ''; position: absolute; top: 0.7em; left: 2px; width: 3px; height: 3px; border-radius: 50%; background-color: currentColor;}

/* 탭 - [data-tab] 안의 .tab-list .tab(active) ↔ .tab-content(active), js/common.js initTabs() 참고 */
.tab-list {display: flex; border-bottom: 1px solid var(--color-gray3);}
.tab-list .tab {position: relative; padding: var(--fs-14) var(--fs-24); font-size: var(--fs-15); font-weight: 500; color: var(--color-gray6); line-height: 1.5; white-space: nowrap; transition: color 0.2s;}
.tab-list .tab::after {content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background-color: var(--color-static1); transform: scaleX(0); transition: transform 0.2s;}
.tab-list .tab:hover {color: var(--color-gray9);}
.tab-list .tab.active {color: var(--color-static1); font-weight: 600;}
.tab-list .tab.active::after {transform: scaleX(1);}
.tab-list.full .tab {flex: 1 1 0;}
.tab-content {display: none; padding-top: var(--space-40);}
.tab-content.active {display: block;}

/* 알약 탭 */
.pill-tab-wrap {width: 100%; overflow: hidden;}
.pill-tab-list {display: flex; align-items: center;}
.pill-tab-list:not(.swiper-wrapper) {gap: 8px; flex-wrap: wrap;}
.pill-tab {flex-shrink: 0; width: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--fs-18); border-radius: 999px; border: 1px solid var(--color-gray3); background-color: var(--color-white); font-size: var(--fs-15); font-weight: 500; color: var(--color-gray7); transition: background-color 0.2s, color 0.2s, border-color 0.2s;}
.pill-tab:hover {border-color: var(--color-gray5); color: var(--color-gray9);}
.pill-tab.active {border-color: var(--color-static1); background-color: var(--color-static1); color: var(--color-white); font-weight: 600;}

/* 뱃지·상태 */
.badge-list {display: flex; gap: 8px; flex-wrap: wrap;}
.badge {display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid transparent; border-radius: 4px; font-size: var(--fs-13); font-weight: 600; line-height: 1.5; background-color: var(--color-gray2); color: var(--color-gray8);}
.badge.round {border-radius: 999px;}
.badge.main {background-color: var(--color-static1); color: var(--color-white);}
.badge.confirm {background-color: var(--color-static3); color: var(--color-static1);}
.badge.dark {background-color: var(--color-gray9); color: var(--color-white);}
.badge.line {border-color: var(--color-gray3); background-color: var(--color-white); color: var(--color-gray9);}
.badge.cancel {background-color: var(--color-redbg); color: var(--color-red);}
.badge.done {color: var(--color-gray6);}
/* 텍스트형 상태 (영업중·영업종료) */
.state-txt {display: inline-flex; align-items: center; column-gap: 6px; font-size: var(--fs-15); font-weight: 600;}
.state-txt::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor;}
.state-txt.open {color: var(--color-static1);}
.state-txt.close {color: var(--color-gray6);}

/* 폼 */
.input-wrap {width: 100%; display: flex; align-items: stretch; column-gap: var(--fs-12);}
.input-wrap .custom-input {flex: 1 1 auto; min-width: 0;}
.input-wrap .square-btn {flex: none; min-height: 48px;}
.input-item {display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start;}
.input-item + .input-item {margin-top: var(--space-24);}
.input-item-label {display: block; font-size: var(--fs-15); font-weight: 500; line-height: 1.5; color: var(--color-gray8);}
.input-item-label.req::after {content: '*'; margin-left: 2px; color: var(--color-red);}
.custom-input, .custom-textarea, .custom-select {width: 100%; height: 48px; padding: 0 var(--fs-20); border: 1px solid var(--color-gray3); border-radius: var(--radius); background-color: var(--color-white); font-size: max(1rem, var(--fs-16));}
.custom-textarea {resize: none; height: auto; min-height: 180px; padding: var(--fs-20);}
.custom-input:focus, .custom-textarea:focus, .custom-select:focus {border-color: var(--color-static1);}
.custom-input::placeholder, .custom-textarea::placeholder {color: var(--color-gray6);}
.custom-input:disabled, .custom-textarea:disabled, .custom-select:disabled {background-color: var(--color-gray2); color: var(--color-gray6);}
.custom-input.error, .custom-textarea.error, .custom-select.error {border-color: var(--color-red);}
.error-msg {margin-top: -4px; font-size: var(--fs-14); color: var(--color-red);}
.info-msg {margin-top: -4px; font-size: var(--fs-14); color: var(--color-gray6);}
.custom-select {appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: calc(var(--fs-20) + 28px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23262626' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--fs-20) center; background-size: 20px 20px; cursor: pointer;}
.custom-select::-ms-expand {display: none;}

/* 가로형 입력 - 라벨 좌측 (768 이하 세로) */
.input-item.row {display: grid; grid-template-columns: 160px 1fr; align-items: start; column-gap: var(--fs-16);}
.input-item.row .input-item-label {padding-top: 12px;}
.input-item.row .input-item-box {display: flex; flex-direction: column; row-gap: 8px;}

/* 검색 인풋 */
.custom-input.search-input {max-width: 430px; padding-inline: var(--fs-24) calc(var(--fs-24) + 24px + var(--fs-12)); line-height: 1.5; color: var(--color-gray9); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23737373' stroke-width='1.6'/%3E%3Cpath d='M20 20l-4-4' fill='none' stroke='%23737373' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--fs-24) center; background-size: 24px 24px; transition: border-color 0.2s;}
.custom-input.search-input::-webkit-search-cancel-button,
.custom-input.search-input::-webkit-search-decoration {-webkit-appearance: none; appearance: none;}
.custom-input.search-input:hover {border-color: var(--color-gray4);}
.custom-input.search-input:focus {border-color: var(--color-static1);}

/* 체크&라디오 공통 */
.check-item {display: inline-flex; align-items: center; gap: 8px; min-height: 44px;}
.check-item label {font-size: var(--fs-15); cursor: pointer;}
.check-list {display: flex; flex-wrap: wrap; column-gap: var(--fs-24);}

/* 체크박스 - 20×20 · radius 4 · border 1.5px. 체크 표시는 data URI SVG 배경 */
.custom-checkbox {appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--color-gray4); border-radius: 4px; background-color: var(--color-white); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s;}
.custom-checkbox:checked {border-color: var(--color-static1); background-color: var(--color-static1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 4.8 8.6 9.6 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.custom-checkbox:disabled {border-color: var(--color-gray3); background-color: var(--color-gray2); cursor: default;}
.custom-checkbox:checked:disabled {border-color: var(--color-gray4); background-color: var(--color-gray4);}
.custom-checkbox:disabled + label {color: var(--color-gray6);}
.custom-checkbox:focus-visible {outline: 2px solid var(--color-static1); outline-offset: 2px;}

/* 라디오 - input + label(for) */
.radio-list {display: flex; flex-wrap: wrap; column-gap: var(--fs-24);}
.custom-radio {appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--color-gray4); border-radius: 50%; background-color: var(--color-white); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;}
.custom-radio:checked {border-color: var(--color-static1); background-color: var(--color-static1); box-shadow: inset 0 0 0 4px var(--color-white);}
.custom-radio:disabled {border-color: var(--color-gray3); background-color: var(--color-gray2); cursor: default;}
.custom-radio:disabled + label {color: var(--color-gray6);}
.custom-radio:focus-visible {outline: 2px solid var(--color-static1); outline-offset: 2px;}
.check-item:hover .custom-radio:not(:checked):not(:disabled) {border-color: var(--color-gray6);}

/* 칩 라디오 - 선택 시 브랜드 색으로 채운다 */
.radio-chip {position: relative; display: inline-flex;}
.radio-chip > input {position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0;}
.radio-chip > label {display: inline-flex; align-items: center; justify-content: center; min-width: 82px; min-height: 40px; padding: 0 var(--fs-18); border: 1px solid var(--color-gray3); border-radius: 999px; background-color: var(--color-white); font-size: var(--fs-15); color: var(--color-gray9); line-height: 1.5; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s;}
.radio-chip > input:not(:checked):not(:disabled) + label:hover {border-color: var(--color-static1);}
.radio-chip > input:checked + label {border-color: var(--color-static1); background-color: var(--color-static1); color: var(--color-white);}
.radio-chip > input:disabled + label {border-color: var(--color-gray3); background-color: var(--color-gray2); color: var(--color-gray6); cursor: default;}
.radio-chip > input:focus-visible + label {outline: 2px solid var(--color-static1); outline-offset: 2px;}

/* 스위치 - input 에 role="switch" */
.custom-switch {appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; border-radius: 999px; background-color: var(--color-gray5); cursor: pointer; transition: background-color 0.2s;}
.custom-switch::after {content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-white); transition: transform 0.2s;}
.custom-switch:checked {background-color: var(--color-static1);}
.custom-switch:checked::after {transform: translateX(20px);}
.custom-switch:focus-visible {outline: 2px solid var(--color-static1); outline-offset: 2px;}

/* 테이블 - 가로 스크롤이 필요하면 .table-wrap.scroll */
.table-wrap {width: 100%; overflow-x: auto;}
.custom-table {border-top: 2px solid var(--color-gray9); font-size: var(--fs-15); text-align: center;}
.custom-table caption {margin-bottom: var(--fs-12); font-size: var(--fs-16); font-weight: 600; text-align: left;}
.custom-table th, .custom-table td {padding: var(--fs-16) var(--fs-12); border-bottom: 1px solid var(--color-gray3); vertical-align: middle;}
.custom-table thead th {background-color: var(--color-gray2); font-weight: 600;}
.custom-table tbody th {font-weight: 500;}
.custom-table .left {text-align: left;}
/* 세로 헤더형 (정보표) */
.custom-table.type-row {text-align: left;}
.custom-table.type-row th {width: 200px; background-color: var(--color-gray2); font-weight: 600;}

/* 모달 - js/common.js 참고. 열림 상태는 .active */
.modal {position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background-color: rgb(var(--rgb-black) / 0.5);}
.modal.active {display: flex;}
.modal .modal-inner {position: relative; width: 100%; max-width: 480px; max-height: 84vh; overflow-y: auto; padding: var(--space-40); background-color: var(--color-white); border-radius: var(--radius);}
.modal .modal-tit {margin-bottom: 12px; font-size: var(--fs-24); font-weight: 700;}
.modal .modal-close-btn {position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;}
.modal .modal-close-btn::before, .modal .modal-close-btn::after {content: ''; position: absolute; top: 50%; left: 12px; right: 12px; height: 2px; background-color: var(--color-gray9);}
.modal .modal-close-btn::before {transform: rotate(45deg);}
.modal .modal-close-btn::after {transform: rotate(-45deg);}

/* 빈 상태 공통 */
.empty-msg {padding: var(--space-40) 0; font-size: var(--fs-16); line-height: 1.5; color: var(--color-gray6); text-align: center;}
.empty-msg[hidden] {display: none;}

/* 공통스와이퍼 */
.swiper-nav-btn {position: absolute; top: 50%; z-index: 10; display: flex; transform: translateY(-50%); transition: opacity 0.2s, background-color 0.2s, border-color 0.2s;}
.swiper-prev {left: 0;}
.swiper-next {right: 0;}
.swiper-nav-btn.swiper-button-lock,
.swiper-nav-btn.swiper-button-disabled {background-color: var(--color-white);}
.swiper-nav-btn.swiper-button-lock svg,
.swiper-nav-btn.swiper-button-disabled svg {opacity: 0.3;}

@media screen and (max-width: 1024px) {
    :root {--header-height: 64px;}
}

@media screen and (max-width: 768px) {
    :root {--header-height: 56px;}

    .tab-list {overflow-x: auto; scrollbar-width: none;}
    .tab-list::-webkit-scrollbar {display: none;}
    .tab-list .tab {flex-shrink: 0; padding-inline: var(--fs-16);}

    .input-item.row {grid-template-columns: 1fr; row-gap: 8px;}
    .input-item.row .input-item-label {padding-top: 0;}

    .table-wrap.scroll .custom-table {min-width: 640px;}
    .custom-table.type-row th {width: 100px;}
}