@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
    /* ========================
        🎨 Colors
    ======================== */
    --color-primary: #EB217C;
    --color-secondary: #3B4A9F;
    --color-link: #276FF4;

    --color-danger:  #E81D30;
    --color-warning: #F46E1E;
    --color-success: #228738;

    --color-aladin-pink5: #FFF5FA;
    --color-aladin-pink50: var(--color-primary);
    --color-aladin-pink60: #DC136E;

    --color-aladin-blue5: #FFF5FA;
    --color-aladin-blue50: var(--color-secondary);
    --color-aladin-blue80: #132275;  

    --color-gray0: #FFFFFF;
    --color-gray5: #F5F5F5;
    --color-gray15: #EFEFEF;
    --color-gray20: #E8E8E8;
    --color-gray30: #CCCCCC;
    --color-gray50: #737373;
    --color-gray55: #666666;
    --color-gray60: #555555;
    --color-gray80: #333333;
    --color-gray100: #000000;

    --color-box: var(--color-gray5);
    --color-text-base: var(--color-gray80);
    --color-text-secondary: var(--color-gray50);

    --color-scrim75: rgba(0,0,0,0.75);
    --color-scrim40: rgba(0,0,0,0.40);
    --color-scrim25: rgba(0,0,0,0.25);
    --color-scrim10: rgba(0,0,0,0.10);

    --color-button-primary-dark: #CD1C6A;
    --color-button-primary-light: #FBD3E5;


    /* ========================
        ✍ Typography
    ======================== */
    --font-family-base: 'Pretendard Variable', sans-serif;

    --font-size-heading-xxs: 14px;
    --font-size-heading-xs: 15px;
    --font-size-heading-sm: 17px;
    --font-size-heading-md: 19px;
    --font-size-heading-lg: 22px;
    --font-size-heading-xl: 24px;
    --font-size-heading-xxl: 28px;

    --font-size-body-xs: 13px;
    --font-size-body-sm: 14px;
    --font-size-body-md : 15px;
    --font-size-body-md-alt : 16px;
    --font-size-body-lg: 17px;
    --font-size-body-xl: 19px;

    --font-size-title-md: 20px;
    --font-size-title-lg: 22px;

    --line-height-base: 150%;


    /* ========================
        ⬜ Borders & Radius
    ======================== */
    --border-color: var(--color-gray30);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-round: 9999px;


    /* ========================
        🌑 Shadows & z-index
    ======================== */
    --shadow-popup: 0 10px 38px 0 rgba(0, 0, 0, 0.18);

    --modal-z:10000;
}


/* 데스크탑 이상 */
@media (min-width: 768px) {

    :root {
        --font-size-heading-xxs: 14px;
        --font-size-heading-xs: 15px;
        --font-size-heading-sm: 17px;
        --font-size-heading-md: 19px;
        --font-size-heading-lg: 24px;
        --font-size-heading-xl: 28px;
        --font-size-heading-xxl: 32px;
    }

} 

body {margin: 0; padding: 0;}
ul,li,ol {margin: 0; padding: 0; list-style: none;}
button, input[type="radio"], input[type="checkbox"], select, label {cursor: pointer;}
a {color: var(--color-gray80); text-decoration: none;}
a:hover,a:focus,a:active,a:visited{text-decoration:none;}
.ds-pc-br {display: inline;}
.ds-mo-br {display: block;}

/* 스크린 리더 only - 화면 숨김 */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* buttons */
.ds-button {display: inline-flex; align-items: center; justify-content: center;  box-sizing: border-box; font-family: var(--font-family-base); text-decoration: none; border: 0;}
.ds-button:disabled, .ds-button.disabled {cursor:default;}
.ds-button--m {height: 50px; line-height: 50px; padding: 0 10px; font-size: var(--font-size-body-md-alt); font-weight: 500; border-radius: var(--radius-md);}
.ds-button--s {height: 32px; line-height: 32px; padding: 0 12px; font-size: var(--font-size-body-sm); font-weight: 500; border-radius: var(--radius-md);}
.ds-button--xs {height: 22px; line-height: 22px; padding: 0 6px; font-size: var(--font-size-body-xs); font-weight: 400; border-radius: var(--radius-sm);}
.ds-button--modal {height: 48px; line-height: 48px; padding: 0 10px; font-size: var(--font-size-body-md-alt); font-weight: 500; border-radius: var(--radius-md);}
.ds-button--round {border-radius: var(--radius-round);}

.ds-button--primary {background-color: var(--color-primary); color: var(--color-gray0);}
.ds-button--primary:hover {background-color: var(--color-button-primary-dark);}
.ds-button--primary:disabled {background-color: var(--color-button-primary-light);}
.ds-button--primary.disabled {background-color: var(--color-button-primary-light);}
.ds-button--black {background-color: var(--color-gray100); color: var(--color-gray0);}
.ds-button--black:hover {background-color: var(--color-gray80);}
.ds-button--black:disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--black.disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--gray {background-color: var(--color-gray5); color: var(--color-gray100);}
.ds-button--gray:hover {background-color: var(--color-gray15);}
.ds-button--gray:disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--gray.disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--outline-black {background-color: var(--color-gray0); color: var(--color-gray100); border: 1px solid var(--color-gray100);}
.ds-button--outline-black:hover {background-color: var(--color-gray15);}
.ds-button--outline-black:disabled {background-color: var(--color-gray5); color: var(--color-gray30); border: 1px solid var(--border-color);}
.ds-button--outline-black.disabled {background-color: var(--color-gray5); color: var(--color-gray30); border: 1px solid var(--border-color);}
.ds-button--outline-primary {background-color: var(--color-gray0); color: var(--color-primary); border: 1px solid var(--color-primary);}
.ds-button--outline-primary:hover {background-color: var(--color-button-primary-light);}
.ds-button--outline-primary:disabled {background-color: var(--color-gray0); color: var(--color-button-primary-light); border: 1px solid var(--color-button-primary-light);}
.ds-button--outline-primary.disabled {background-color: var(--color-gray0); color: var(--color-button-primary-light); border: 1px solid var(--color-button-primary-light);}
.ds-button--outline-gray {background-color: var(--color-gray0); color: var(--color-gray100); border: 1px solid var(--border-color);}
.ds-button--outline-gray:hover {background-color: var(--color-gray15);}
.ds-button--outline-gray:disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--outline-gray.disabled {background-color: var(--color-gray5); color: var(--color-gray30);}

.ds-button--s-outline-primary {background-color: var(--color-gray0); color: var(--color-primary); border: 1px solid var(--color-primary);}
.ds-button--s-outline-primary:hover {background-color: var(--color-button-primary-light);}
.ds-button--s-outline-primary:disabled {background-color: var(--color-gray0); color: var(--color-button-primary-light); border: 1px solid var(--color-button-primary-light);}
.ds-button--s-outline-primary.disabled {background-color: var(--color-gray0); color: var(--color-button-primary-light); border: 1px solid var(--color-button-primary-light);}

.ds-button--s-outline-gray {background-color: var(--color-gray0); color: var(--color-gray80); border: 1px solid var(--border-color);}
.ds-button--s-outline-gray:hover {background-color: var(--color-gray15);}
.ds-button--s-outline-gray:disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--s-outline-gray.disabled {background-color: var(--color-gray5); color: var(--color-gray30);}

.ds-button--s-outline-lightgray {background-color: var(--color-gray0); color: var(--color-gray80); border: 1px solid var(--color-gray20);}
.ds-button--s-outline-lightgray:hover {background-color: var(--color-gray15);}
.ds-button--s-outline-lightgray:disabled {background-color: var(--color-gray5); color: var(--color-gray30);}
.ds-button--s-outline-lightgray.disabled {background-color: var(--color-gray5); color: var(--color-gray30);}

.ds-text-button {font-family: var(--font-family-base); font-size: var(--font-size-body-md-alt); line-height: var(--line-height-base); text-decoration: none; background-color: transparent; border: 0; padding: 0;}
.ds-text-button--bold {font-weight: 700;}
.ds-text-button--under:link, .ds-text-button--under:hover, .ds-text-button--under:visited {text-decoration: underline;}
.ds-text-button--blue {color: var(--color-link);}
.ds-text-button--lampblue {color: var(--color-secondary);}
.ds-text-button--gary {color: var(--color-gray55);}

.ds-button--s.ds-button--icontype {padding: 0 8px 0 12px;}
.ds-button--s.ds-button--icontype::after {content: ''; display: inline-block; width: 14px; height: 14px; background: url('https://image.aladin.co.kr/img/sys/v1/arrow_more.svg') no-repeat center / 100% auto;  vertical-align: middle;}
.ds-button--xs.ds-button--icontype {padding: 0 4px 0 6px;}
.ds-button--xs.ds-button--icontype::after {content: ''; display: inline-block; width: 9px; height: 9px; background: url('https://image.aladin.co.kr/img/sys/v1/arrow_more_s.svg') no-repeat center / 100% auto; vertical-align: middle; margin: -2px 0 0 0;}

/* input */
.ds-form-field {}
.ds-form-field__error {font-size: var(--font-size-body-xs); color: var(--color-danger); margin-top: 10px;}
.ds-input {width: 100%; height: 48px; line-height: 46px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--color-gray30); box-sizing: border-box; font-family: var(--font-family-base); font-size: var(--font-size-body-md-alt); color: var(--color-gray80); appearance: none; -webkit-appearance: none;}
.ds-input--s {height: 40px; line-height: 40px; padding: 0 14px;}
.ds-input::placeholder {color: var(--color-gray50);}
.ds-input:focus {outline: none; border: 1px solid var(--color-gray80);}
.ds-input:disabled {border: 1px solid var(--color-gray30); background-color: var(--color-gray15); color: var(--color-gray50);}
.ds-input--error {border-color: var(--color-danger);}
.ds-input--dropdown {background: url('https://image.aladin.co.kr/img/sys/v1/dropdown_arr.svg') no-repeat center right 15px / 24px; padding: 0 39px 0 16px;}
.ds-input--s.ds-input--dropdown {background-size: 18px; background-position: center right 10px; padding: 0 35px 0 16px;}

/* 라디오 버튼 / 체크 박스 */
.ds-radio, .ds-checkbox {display: inline-flex; align-items: center; }
.ds-radio input, .ds-checkbox input {position: absolute; opacity: 0; pointer-events: none;}
.ds-radio__label, .ds-checkbox__label {margin-left: 5px; font-family: var(--font-family-base);}
.ds-radio__custom, .ds-checkbox__custom {display: inline-block; position: relative; background-color: var(--color-gray0); border: 1px solid var(--color-gray30);}
.ds-radio__custom {border-radius: var(--radius-round);}
.ds-checkbox__custom {border-radius: 3px;}

.ds-radio input:checked + .ds-radio__custom, .ds-checkbox input:checked + .ds-checkbox__custom {border-color: var(--color-gray100); background-color: var(--color-gray100);}
.ds-radio.ds-radio--Primary input:checked + .ds-radio__custom,.ds-checkbox.ds-checkbox--Primary input:checked + .ds-checkbox__custom { border-color: var(--color-primary); background-color: var(--color-primary);}

.ds-radio input:disabled + .ds-radio__custom, .ds-radio.ds-radio--Primary input:disabled + .ds-radio__custom, .ds-checkbox input:disabled + .ds-checkbox__custom, .ds-checkbox.ds-checkbox--Primary input:disabled + .ds-checkbox__custom {border-color: var(--color-gray30); background-color: var(--color-gray5); cursor: auto;}

.ds-radio input:focus-visible + .ds-radio__custom, .ds-checkbox input:focus-visible + .ds-checkbox__custom {outline: 2px solid var(--color-gray100); outline-offset: 2px;}

.ds-radio input:checked + .ds-radio__custom::after, .ds-radio input:checked:disabled + .ds-radio__custom::after {content: ''; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--color-gray0); border-radius: var(--radius-round);}
.ds-radio input:checked:disabled + .ds-radio__custom::after {background-color: var(--color-gray30);}

.ds-checkbox input:checked + .ds-checkbox__custom::after, .ds-checkbox input:checked:disabled + .ds-checkbox__custom::after {content: ''; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.ds-checkbox input:checked + .ds-checkbox__custom::after {background: url('https://image.aladin.co.kr/img/sys/v1/gui_check.svg') no-repeat center / 100% auto;}
.ds-checkbox input:checked:disabled + .ds-checkbox__custom::after {background: url('https://image.aladin.co.kr/img/sys/v1/gui_check-off.svg') no-repeat center / 100% auto;}

.ds-radio--m .ds-radio__custom, .ds-checkbox--m .ds-checkbox__custom { width: 24px; height: 24px; }
.ds-radio--s .ds-radio__custom, .ds-checkbox--s .ds-checkbox__custom { width: 22px; height: 22px; }
.ds-radio--xs .ds-radio__custom, .ds-checkbox--xs .ds-checkbox__custom { width: 16px; height: 16px; }

.ds-radio--m input:checked + .ds-radio__custom::after { width: 12px; height: 12px; }
.ds-radio--s input:checked + .ds-radio__custom::after { width: 11px; height: 11px; }
.ds-radio--xs input:checked + .ds-radio__custom::after { width: 8px;  height: 8px; }

.ds-checkbox--m input:checked + .ds-checkbox__custom::after { width: 14px; height: 9px; }
.ds-checkbox--s input:checked + .ds-checkbox__custom::after { width: 12px; height: 8px; }
.ds-checkbox--xs input:checked + .ds-checkbox__custom::after { width: 10px; height: 6px; }


/* chips */

.ds-chips .ds-chip__label {display: inline-block; border: 1px solid var(--color-gray30); background-color: var(--color-gray0); color: var(--color-gray80); text-decoration: none; box-sizing: border-box;  font-family: var(--font-family-base);}
.ds-chips--selected .ds-chip__label, .ds-chips__input:checked + .ds-chip__label {border: 1px solid var(--color-gray100); background-color: var(--color-gray100); color: var(--color-gray0)}
.ds-chips--s .ds-chip__label {height: 30px; line-height: 28px; padding: 0 12px; font-size: var(--font-size-body-xs); border-radius: 15px;}
.ds-chips--m .ds-chip__label {height: 34px; line-height: 32px; padding: 0 14px; font-size: var(--font-size-body-md); border-radius: 17px;}
.ds-chips--l .ds-chip__label {height: 50px; line-height: 48px; padding: 0 24px; font-size: var(--font-size-body-lg); border-radius: 25px;}

.ds-chips__input {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap;}
.ds-chips__input:disabled + .ds-chip__label {border: 1px solid var(--color-gray20); background-color: var(--color-gray0); color: var(--color-gray30)}
.ds-chips__input:checked:disabled + .ds-chip__label {background-color: var(--color-gray5);}
.ds-chips__input:focus-visible + .ds-chip__label {outline: 2px solid var(--color-gray100); outline-offset: 2px;}

/* switch */
.ds-switch {display: inline-flex; align-items: center; gap: 2px;  user-select: none;}
.ds-switch__input {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.ds-switch__track {position: relative; width: var(--switch-w);  height: var(--switch-h);  background: var(--color-gray15); border: 1px solid var(--color-gray60);  border-radius: var(--radius-round);  transition: background 0.2s ease; box-sizing: border-box;}
.ds-switch__track::after {content: ""; position: absolute; top: var(--switch-pad); left: var(--switch-pad); width: var(--switch-thumb); height: var(--switch-thumb); background: var(--color-gray60); border-radius: 50%; transition: transform 0.2s ease;}
.switch__label {margin: 0 0 0 5px; font-family: var(--font-family-base);}

.ds-switch__input:checked + .ds-switch__track {background: var(--switch-on-bg); border: 0;}
.ds-switch__input:checked + .ds-switch__track::after {transform: translateX(calc(var(--switch-w) - var(--switch-thumb) - (var(--switch-pad) * 2))); background: var(--color-gray0);}
.ds-switch__input:disabled + .ds-switch__track { background: var(--color-gray5); cursor: auto;}
.ds-switch__input:checked:disabled + .ds-switch__track {}

.ds-switch--m {--switch-w: 40px; --switch-h: 24px; --switch-thumb: 14px; --switch-pad: 4px; --switch-gap: 10px;}
.ds-switch--m .ds-switch__input:checked + .ds-switch__track::after {--switch-thumb: 20px; --switch-pad: 2px;}
.ds-switch--l {--switch-w: 51px; --switch-h: 30px; --switch-thumb: 20px; --switch-pad: 4px; --switch-gap: 10px;}
.ds-switch--l .ds-switch__input:checked + .ds-switch__track::after {--switch-thumb: 26px; --switch-pad: 2px;}
.ds-switch {--switch-on-bg: var(--color-gray100);}
.ds-switch.ds-switch--primary {--switch-on-bg:var(--color-primary);}

.ds-switch__input:checked + .ds-switch__track {background: var(--switch-on-bg);}
.ds-switch__input:checked + .ds-switch__track::after {transform: translateX(calc(var(--switch-w) - var(--switch-thumb) - (var(--switch-pad) * 2)));}
.ds-switch__input:disabled + .ds-switch__track { background: var(--color-gray15); border-color: var(--color-gray30); cursor: auto;}
.ds-switch__input:disabled + .ds-switch__track::after {background: var(--color-gray30);}
.ds-switch__input:checked:disabled + .ds-switch__track {background: var(--color-gray30);}
.ds-switch__input:checked:disabled + .ds-switch__track::after {background: var(--color-gray0);}


/* date */
.ds-date-select {display: flex; gap: 25px;}
.ds-date-select .ds-form-field {display: flex; gap: 8px; align-items: center;}
.ds-search {display: flex; gap: 8px;}
.ds-search .ds-search__select {flex-shrink: 0;}


.ds-week-select {display: flex; gap: 2px; width: 100%; max-width: 334px; height: 40px;}
.ds-week-select select {height: 100%; background: url('https://image.aladin.co.kr/img/sys/v1/dropdown_arr.svg') no-repeat center right / 18px; padding: 0 26px 0 10px; appearance: none; -webkit-appearance: none; border: 0;  font-family: var(--font-family-base); font-size: var(--font-size-body-md-alt); color: var(--color-gray80);}
.ds-week-select select:focus {outline: 0;}
.ds-week-select__year, .ds-week-select__month, .ds-week-select__week {flex: 1; display: flex; justify-content: center; align-items: center; background-color: var(--color-gray5);}
.ds-week-select__year {border-radius: var(--radius-round) 4px 4px var(--radius-round);}
.ds-week-select__week {border-radius: 4px var(--radius-round) var(--radius-round) 4px;}
.ds-week-select__month {border-radius: 4px;}
.ds-week-select__month select, .ds-week-select__week select {width: 60px;}

.ds-tabs {display: flex; font-family: var(--font-family-base); flex-wrap: wrap;}
.ds-tabs a:hover {text-decoration: none;}
.ds-tabs--slide {display: block;}
.ds-tabs--slide .swiper-slide {width: auto;}
.ds-tabs--chips .swiper-slide {margin-right: 5px;}
.ds-tabs--chips {gap: 5px;}
.ds-tabs--chips .ds-tab {display: inline-block; height: 38px; line-height: 38px; padding: 0 16px; font-size: var(--font-size-body-md); color: var(--color-gray80); border-radius: var(--radius-round); text-decoration: none; border: 0; background: transparent;}
.ds-tabs--chips .ds-tab.ds-tab--white {background: var(--color-gray0);}
.ds-tabs--chips .ds-tab.is-active {background: var(--color-gray100); color: var(--color-gray0); font-weight: 700;}

.ds-tabs--toggle {width: 100%; height: 38px; background: var(--color-gray15); border-radius: var(--radius-round);}
.ds-tabs--toggle li {flex: 1;}
.ds-tabs--toggle .ds-tab {display: inline-block; width: 100%; line-height: 38px; font-size: var(--font-size-body-md-alt); color: var(--color-gray50); font-weight: 500; text-align: center; text-decoration: none; box-sizing: border-box; border: 0; background: transparent;}
.ds-tabs--toggle .ds-tab.is-active {line-height: 36px; border-radius: var(--radius-round); background: var(--color-gray0); color: var(--color-gray80); border: 1px solid var(--color-gray80); font-weight: 700;}
.ds-tabs--white {background: var(--color-gray0);}

.ds-tabs--silder {width: 100%; height: 48px; border-bottom: 1px solid var(--color-gray15);}
.ds-tabs--silder .swiper-slide {width: auto;}
.ds-tabs--silder .ds-tab {position: relative; display: inline-block; height: 100%; line-height: 48px; padding: 0 12px; font-size: var(--font-size-body-md); color: var(--color-gray80); background: transparent; border: 0;}
.ds-tabs--silder .ds-tab.is-active {font-weight: 700;}
.ds-tabs--silder .ds-tab.is-active::after {content: ''; display: inline-block; width: calc(100% - 24px); height: 2px; background: var(--color-gray80); font-weight: 700; position: absolute; bottom: 0; left: 12px;}

.ds-tabs--deviced {width: 100%; height: 50px; border-bottom: 1px solid var(--color-gray15);}
.ds-tabs--deviced li {flex: 1;}
.ds-tabs--deviced .ds-tab {position: relative; display: block; width: 100%; line-height: 49px; font-size: var(--font-size-body-md-alt); color: var(--color-gray80); text-align: center; background: transparent; border: 0;}
.ds-tabs--deviced .ds-tab.is-active {font-weight: 700;}
.ds-tabs--deviced .ds-tab.is-active::after {content: ''; display: inline-block; width: 100%; height: 2px; background: var(--color-gray80); font-weight: 700; position: absolute; bottom: 0; left: 0px;}

.ds-pagination {display: flex; justify-content: center; align-items: center; gap: 4px; padding: 10px 0; font-family: var(--font-family-base);}
.ds-pagination__arrow {display: inline-block; width: 30px; height: 30px; border-radius: var(--radius-round); border: 1px solid var(--color-gray30); background: var(--color-gray0); background-size: 16px; background-position: center; background-repeat: no-repeat; box-sizing: border-box;}
.ds-pagination__arrow--first {background-image: url('https://image.aladin.co.kr/img/sys/v1/page_first.svg');}
.ds-pagination__arrow--prev {background-image: url('https://image.aladin.co.kr/img/sys/v1/page_pre.svg');}
.ds-pagination__arrow--next {background-image: url('https://image.aladin.co.kr/img/sys/v1/page_next.svg');}
.ds-pagination__arrow--last {background-image: url('https://image.aladin.co.kr/img/sys/v1/page_last.svg');}
.ds-pagination__list {height: 30px; display: flex; align-items: center; gap: 0 4px;}
.ds-pagination__link {display: block; width: 30px; height: 30px; line-height: 30px; font-size: var(--font-size-body-xs); color: var(--color-gray50); text-align: center;}
.ds-pagination__link:hover {text-decoration: none; color: var(--color-gray50);}
.ds-pagination__link.is-active {background: var(--color-gray50); border-radius: var(--radius-round); color: var(--color-gray0);}
[aria-disabled="true"] {display: none;}

.ds-accordion {font-family: var(--font-family-base);}
.ds-accordion__header {margin: 0; position: relative;}
.ds-accordion__header::after {content: ''; display: block; width: calc(100% - 32px); height: 1px; background: var(--color-gray15); position: absolute; left: 16px; bottom: 0;}
.ds-accordion__button {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 16px; font-size: var(--font-size-body-md-alt); border: none; background: var(--color-gray0); color: var(--color-gray80);}
.ds-accordion__panel {background: var(--color-gray5); padding: 15px 16px; margin: -1px 0 0 0; position: relative;}
.ds-accordion__button::after {content: ''; width: 24px; height: 24px; background: url('https://image.aladin.co.kr/img/sys/v1/arrow_down.svg') no-repeat center; position: absolute; top: 50%; transform: translateY(-50%); right: 16px; transition: transform 0.3s;}
.ds-accordion__button[aria-expanded="true"] {font-weight: 700;}
.ds-accordion__button[aria-expanded="true"]::after {transform: translateY(-50%) rotate(-180deg);}

.ds-pagetitle {position: relative; padding: 0 16px; font-weight: 700; margin: 0; line-height: 150%; color: var(--color-gray80);}
.ds-pagetitle--m {font-size: var(--font-size-title-md);}
.ds-pagetitle--l {font-size: var(--font-size-title-lg);}
.ds-pagetitle a {display: block; color: var(--color-gray80); text-decoration: none;}
.ds-pagetitle a::after {content: ''; width: 9px; height: 24px; background: url('https://image.aladin.co.kr/img/sys/v1/btn_more.svg') no-repeat center / 100% auto; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);}

.ds-tag-box {display: flex; gap: 6px; align-items: center;}
.ds-tag {display: inline-block; height: 30px; line-height: 30px; padding: 0 12px; border-radius: var(--radius-round); background: var(--color-gray5); color: var(--color-gray60); font-size: var(--font-size-body-xs); text-decoration: none; font-family: var(--font-family-base);}
.ds-tag--selected {background: var(--color-gray80); color: var(--color-gray0); vertical-align: middle;}
.ds-tag--del {padding: 0 23px 0 12px; display: flex; background: url('https://image.aladin.co.kr/img/sys/v1/delete_s.svg') var(--color-gray5) no-repeat right 7px center / 16px auto; border: 0;}

.ds-tooltips {display: inline-block; border: 1px solid var(--color-gray30); background: var(--color-gray0); font-family: var(--font-family-base); font-size: var(--font-size-body-sm); color: var(--color-gray80); line-height: 150%; position: relative;}
.ds-tooltips--s {padding: 4px 10px; border-radius: 4px;}
.ds-tooltips--l {padding: 15px 39px 15px 15px; border-radius: 12px;}
.ds-tooltips--s::after, .ds-tooltips--l::after {content: ''; display: block; position: absolute; }
.ds-tooltips--s::after {width: 12px; height: 7px; background: url('https://image.aladin.co.kr/img/sys/v1/tooltip_arr_s.svg') no-repeat center / 100% auto; bottom: -7px;}
.ds-tooltips--l::after {width: 22px; height: 12px; background: url('https://image.aladin.co.kr/img/sys/v1/tooltip_arr.svg') no-repeat center / 100% auto; bottom: -12px;}
.ds-tooltips__close {width: 26px; height: 26px; background: url('https://image.aladin.co.kr/img/sys/v1/modal_close_s.svg') no-repeat top 10px left 3px / 16px; position: absolute; right: 6px; top: 5px; border: 0; }
.ds-tooltips--left::after {left: 10px;}
.ds-tooltips--l.ds-tooltips--left::after {left: 20px;}
.ds-tooltips--center::after {left: 50%; transform: translateX(-50%);}
.ds-tooltips--right::after {right: 10px;}
.ds-tooltips--l.ds-tooltips--right::after {right: 20px;}
.ds-header {width: 100%; height: 56px; position: relative;}
.ds-header__back {width: 34px; height: 100%; background: url('https://image.aladin.co.kr/img/sys/v1/previous.svg') no-repeat center right / 24px; position: absolute; left: 0; top: 0; border: 0; }
.ds-header__title {width: 100%; height: 56px; line-height: 56px; background: var(--color-gray0); padding: 0 34px; box-sizing: border-box; font-family: var(--font-family-base); font-size: var(--font-size-heading-sm); font-weight: 600; margin: 0; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.ds-header__close {width: 34px; height: 100%; background: url('https://image.aladin.co.kr/img/sys/v1/modal_close_m.svg') no-repeat center left / 24px; position: absolute; right: 0; top: 0; border: 0;}

.divider-line {width: 100%; margin: 8px 0;}
.divider-line--base {border-bottom: 1px solid var(--color-gray20);}
.divider-line--low {border-bottom: 1px solid var(--color-gray15);}
.divider-line--section {border-bottom: 8px solid var(--color-gray5);}

/* scrim */
.ds-scrim {position: fixed; left:0; top:0; width:100%; height: 100%; z-index:-1; overflow: hidden;}
.ds-scrim--10 {background: rgba(0, 0, 0, .1);}
.ds-scrim--25 {background: rgba(0, 0, 0, .25);}
.ds-scrim--40 {background: rgba(0, 0, 0, .40);}
.ds-scrim--75 {background: rgba(0, 0, 0, .75);}

/* 팝업 레이어 */
.ds-modal {position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: var(--modal-z);}
.ds-modal.is-open {display: flex;}
.ds-modal__dialog {width: 310px; padding: 24px; background-color: var(--color-gray0); border-radius: 28px; font-family: var(--font-family-base); box-sizing: border-box;}
.ds-modal__dialog.ds-modal--pdbt0 {padding: 24px 24px 0 24px!important;}
.ds-modal__header {margin-bottom: 15px;}
.ds-modal__header p {font-size: var(--font-size-body-lg); font-weight: 700; margin: 0; line-height: 150%; color: var(--color-gray100);}
.ds-modal__header p em {color: var(--color-link); font-style: normal;}
.ds-modal__header--center {text-align: center;}
.ds-modal__body {margin-bottom: 20px;}
.ds-modal__header ~ .ds-modal__body p {font-size: var(--font-size-body-md); font-weight: 400;}
.ds-modal__body p {font-size: var(--font-size-body-md-alt); margin: 0; color: var(--color-gray80); font-weight: 500; line-height: 150%;}
.ds-modal__body--center {text-align: center;}

.ds-modal__button {width: 100%; max-width: 640px; display: flex; gap: 8px;}
.ds-modal__button button {flex: 1;}
.ds-modal__textbutton {display: flex; justify-content: space-between; align-items: center; margin: 10px 0 -9px 0;}
.ds-modal__textbutton--center {justify-content: center;}
.ds-modal__textbutton button {font-size: var(--font-size-body-sm); background: transparent; border: 0; padding: 5px 0;}

.ds-modal__infoicon {width: 100%; height: 32px; background: url('https://image.aladin.co.kr/img/sys/v1/info.svg') no-repeat center / 32px;}
.ds-modal__infoicon + .ds-modal__header {margin-top: 15px;}
.ds-modal__infoicon + .ds-modal__body {margin-top: 20px;}

.ds-modal__footer.ds-modal__btnfull {border-top: 1px solid var(--color-gray15); margin: 0 -24px 0 -24px; padding: 0 24px;}
.ds-modal__footer.ds-modal__btnfull .ds-text-button--lampblue {font-weight: 600;}
.ds-modal__footer.ds-modal__btnfull .ds-modal__textbutton {margin: 0;}
.ds-modal__footer.ds-modal__btnfull .ds-modal__textbutton button {padding: 15px 0 20px 0;}

.ds-system-info {padding: 15px; border-radius: 12px; background: #DCE1FF;}
.ds-system-info ul li {display: flex; gap: 5px; font-size: var(--font-size-body-md); font-weight: 500; color: var(--color-gray80); padding: 0 0 0 10px; text-align: left; position: relative; line-height: 150%;}
.ds-system-info ul li ~ li {margin-top: 5px;}
.ds-system-info ul li::before {content: ''; width: 3px; height: 3px; background: var(--color-gray55); border-radius: var(--radius-round); position: absolute; top: 8px; left: 0;}
.ds-system-info__tit {flex-shrink: 0;}
.ds-system-info__link {padding: 15px 0 0 10px; text-align: left;}
.ds-system-info__link a {font-size: var(--font-size-body-sm); color: var(--color-gray80); text-decoration: underline;}

.ds-modal--pc.ds-modal__dialog {width: 400px; box-shadow: 0 10px 38px 0 rgba(0, 0, 0, 0.18); position: fixed; right: 50px; bottom: 50px; animation: ds-slideUp .5s ease; z-index: var(--modal-z); padding: 30px 30px 24px 30px;}
.ds-modal--pc .ds-modal__footer.ds-modal__btnfull {margin: 0 -30px 0 -30px; padding: 0 30px;}


/* 모달 바텀 시트 */
.ds-bottom-sheet {position: fixed; inset: 0; display: none; z-index: var(--modal-z);}
.ds-bottom-sheet.is-open {display: block;}
.ds-bottom-sheet__dialog {position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 28px 28px 0 0; width: 100%; max-height: 80vh; animation: ds-slideUp .5s ease; padding-bottom: env(safe-area-inset-bottom, 0px); padding-top: 20px; font-family: var(--font-family-base); line-height: 150%; --leftright-padding:16px;}

@keyframes ds-slideUp {
  from { transform:translateY(100%); }
  to { transform:translateY(0); }
}

.ds-bottom-sheet__header {margin-bottom: 5px;}
.ds-bottom-sheet__title {font-size: 19px; font-weight: 700; margin: 0; padding: 5px var(--leftright-padding) 5px var(--leftright-padding);}
.ds-bottom-sheet__close {width: 40px; height: 40px; background: url('https://image.aladin.co.kr/img/sys/v1/modal_close_m.svg') no-repeat center / 24px; position: absolute; right: 5px; top: 20px; border: 0;}
.ds-bottom-sheet__subtxt {padding: 0 var(--leftright-padding) 5px var(--leftright-padding); margin: 0; font-size: var(--font-size-body-sm); color: var(--color-gray55); border-bottom: 1px solid #000; border-bottom: 1px solid var(--color-gray15);}

.ds-bottom-sheet__body {padding: 10px var(--leftright-padding) 16px var(--leftright-padding); margin-bottom: 5px; font-size: var(--font-size-body-md); color: var(--color-gray80); line-height: 150%;}
.ds-bottom-sheet__body p {margin: 0;}
.ds-bottom-sheet__list {display: flex; flex-direction: column; gap: 20px;}
.ds-bottom-sheet__subtitle {font-size: var(--font-size-body-md); font-weight: 700; color: var(--color-gray80); margin:0 0 10px 0;}
.ds-bottom-sheet__section {margin-bottom: 25px;}
.ds-bottom-sheet__section:last-child {margin-bottom: 0;}
.ds-bottom-sheet__chips {display: flex; flex-wrap: wrap; gap: 8px;}
.ds-bottom-sheet__check {padding-top: 25px;}
.ds-bottom-sheet__check .ds-checkbox__label {color: var(--color-gray60); font-size: var(--font-size-body-xs); line-height: 24px;}
.ds-bottom-sheet__week-select {height: 120px; display: flex; justify-content: center; align-items: center;}

.ds-bottom-sheet__footer {padding: 10px;}
.ds-bottom-sheet__event .ds-bottom-sheet__footer {padding: 10px 32px 10px 32px;}

.ds-btlayer-event {padding: 90px 0 0 0;}
.ds-btlayer-event__img {width: 221px; position: absolute; top: -52px; left: 50%; transform: translateX(-50%);}
.ds-btlayer-event__img img {width: 100%;}
.ds-btlayer-event__tit {text-align: center; font-size: var(--font-size-heading-xl); color: var(--color-gray80); margin: 0 0 26px 0; line-height: 150%; font-weight: 400;}
.ds-btlayer-event__list {padding: 0 34px;}
.ds-btlayer-event__list li {display: flex; gap: 7px; color: var(--color-gray80); font-size: var(--font-size-body-md); margin-bottom: 8px;}
.ds-btlayer-event__number {width: 24px; height: 24px; line-height: 22px; border-radius: var(--radius-round); border: 1px solid var(--color-gray80); box-sizing: border-box; text-align: center;}

.ds-event-popup {text-align: center;}
.ds-event-popup__title {font-size: var(--font-size-body-xl); color: var(--color-gray80); margin-bottom: 15px;}
.ds-modal__body .ds-event-popup__txt {font-size: var(--font-size-body-md); color: var(--color-gray80); margin-bottom: 20px;}
.ds-event-popup__button a, .ds-event-popup__button button {width: 100%; height: 48px; line-height: 48px; margin-bottom: 10px;}
.ds-event-popup__img {margin-bottom: 20px;}
.ds-event-popup__img img {width: 208px;}
.ds-event-popup__infotxt {text-align: left;}
.ds-event-popup__infotxt li::before {content: ''; width: 4px; height: 4px; background: var(--color-gray60); border-radius: var(--radius-round); position: absolute; top: 7px; left: 0;} 
.ds-event-popup__infotxt li {font-size: var(--font-size-body-xs); color: var(--color-gray60); line-height: 150%; position: relative; padding: 0 0 0 10px;}

/* 데스크탑 이상 */
@media (min-width: 768px) {

    .ds-pc-br {display: block;}
    .ds-mo-br {display: inline;}

    /* 체크 박스 ds-checkbox--xs */
    .ds-checkbox--xs .ds-checkbox__custom {border-radius: 4px; border: 2px solid var(--color-gray30);}
    .ds-checkbox.ds-checkbox--xs input:checked + .ds-checkbox__custom {border: 2px solid var(--color-gray100);}
    .ds-checkbox--xs.ds-checkbox input:disabled + .ds-checkbox__custom, .ds-checkbox--xs.ds-checkbox--Primary input:disabled + .ds-checkbox__custom {border: 2px solid var(--color-gray30); }
    .ds-checkbox--Primary.ds-checkbox--xs input:checked + .ds-checkbox__custom {border: 2px solid var(--color-primary);}
    .ds-checkbox--Primary.ds-checkbox--xs input:checked:disabled + .ds-checkbox__custom {border: 2px solid var(--color-gray30);}

    /* 팝업 레이어 사이즈 변형 */
    .ds-modal__dialog--s {width: 400px;}
    .ds-modal__dialog--m {width: 422px;}
    .ds-modal__dialog--l {width: 640px;}

    /* 모달 바텀 시트 */
    .ds-bottom-sheet__close {right: 13px;}
    .ds-bottom-sheet__dialog {width: 640px; left: calc(50% - 320px); --leftright-padding:24px;}
    .ds-btlayer-event__list {padding: 0 154px;}

    .ds-modal--pc.ds-modal--pdbt0 {padding: 24px 30px 0 30px !important;}
    .ds-system-info {padding: 20px;}
    .ds-system-info ul li {padding: 0;}
    .ds-system-info ul li::before {display: none;}    
    .ds-system-info__link {padding: 15px 0 0 0;}
    .ds-system-info__link a {font-size: var(--font-size-body-md-alt);}

}