:root { --duet-color-primary: #005fcc; --duet-color-text: #333; --duet-color-text-active: #fff; --duet-color-placeholder: #666; --duet-color-button: #f5f5f5; --duet-color-surface: #fff; --duet-color-overlay: rgba(0, 0, 0, 0.8); --duet-color-border: #333; --duet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --duet-font-normal: 400; --duet-font-bold: 600; --duet-radius: 4px; --duet-z-index: 600; } .duet-date *, .duet-date *::before, .duet-date *::after { box-sizing: border-box; margin: 0; width: auto } .duet-date { box-sizing: border-box; color: var(--duet-color-text); display: block; font-family: var(--duet-font); margin: 0; position: relative; text-align: left; width: 100% } .duet-date__input { -webkit-appearance: none; appearance: none; background: var(--duet-color-surface); border: 1px solid var(--duet-color-border, var(--duet-color-text)); border-radius: var(--duet-radius); color: var(--duet-color-text); float: none; font-family: var(--duet-font); font-size: 100%; line-height: normal; padding: 14px 60px 14px 14px; width: 100%; box-sizing: border-box; } .duet-date__input:focus { border-color: var(--duet-color-primary); box-shadow: 0 0 0 1px var(--duet-color-primary); outline: 0 } .duet-date__input::-webkit-input-placeholder { font-size: 16px; color: #999; opacity: 1; } .duet-date__input:-moz-placeholder { font-size: 16px; color: #999; opacity: 1 } .duet-date__input:-ms-input-placeholder { font-size: 16px; color: #999; } .duet-date__input-wrapper { position: relative; width: 100% } .duet-date__toggle { -moz-appearance: none; -webkit-appearance: none; -webkit-user-select: none; align-items: center; appearance: none; background: var(--duet-color-button); border: 0; border-radius: 0; border-bottom-right-radius: var(--duet-radius); border-top-right-radius: var(--duet-radius); box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1); color: var(--duet-color-text); cursor: pointer; display: flex; height: calc(100% - 2px); justify-content: center; padding: 0; position: absolute; right: 1px; top: 1px; user-select: none; width: 48px; z-index: 2 } .duet-date__toggle:focus { /* box-shadow: 0 0 0 2px var(--duet-color-primary); */ outline: 0 } .duet-date__toggle-icon { display: flex; flex-basis: 100%; justify-content: center; align-items: center } .duet-date__dialog { display: flex; left: 0; min-width: 320px; opacity: 0; position: absolute; top: 100%; transform: scale(0.96) translateZ(0) translateY(-20px); transform-origin: top right; transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease; visibility: hidden; width: 100%; will-change: transform, opacity, visibility; z-index: var(--duet-z-index) } @media (max-width: 35.9375em) { .duet-date__dialog { background: var(--duet-color-overlay); bottom: 0; position: fixed; right: 0; top: 0; transform: translateZ(0); transform-origin: bottom center } } .duet-date__dialog.is-left { left: auto; right: 0; width: auto } .duet-date__dialog.is-active { opacity: 1; transform: scale(1.0001) translateZ(0) translateY(0); visibility: visible } .duet-date__dialog-content { background: var(--duet-color-surface); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--duet-radius); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); margin-left: auto; margin-top: 8px; max-width: 310px; min-width: 290px; padding: 16px 16px 20px; position: relative; transform: none; width: 100%; z-index: var(--duet-z-index) } @media (max-width: 35.9375em) { .duet-date__dialog-content { border: 0; border-radius: 0; border-top-left-radius: var(--duet-radius); border-top-right-radius: var(--duet-radius); bottom: 0; left: 0; margin: 0; max-width: none; min-height: 26em; opacity: 0; padding: 0 8% 20px; position: absolute; transform: translateZ(0) translateY(100%); transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease; visibility: hidden; will-change: transform, opacity, visibility } .is-active .duet-date__dialog-content { opacity: 1; transform: translateZ(0) translateY(0); visibility: visible } } .duet-date__table { border-collapse: collapse; border-spacing: 0; color: var(--duet-color-text); font-size: 1rem; font-weight: var(--duet-font-normal); line-height: 1.25; text-align: center; width: 100% } .duet-date__table-header { font-size: 0.75rem; font-weight: var(--duet-font-bold); letter-spacing: 1px; line-height: 1.25; padding-bottom: 8px; text-decoration: none; text-transform: uppercase } .duet-date__cell { text-align: center } .duet-date__day { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: transparent; border: 0; border-radius: 50%; color: var(--duet-color-text); cursor: pointer; display: inline-block; font-family: var(--duet-font); font-size: 0.875rem; font-variant-numeric: tabular-nums; font-weight: var(--duet-font-normal); height: 36px; line-height: 1.25; padding: 0 0 1px; position: relative; text-align: center; vertical-align: middle; width: 36px; z-index: 1 } .duet-date__day.is-today { box-shadow: 0 0 0 1px var(--duet-color-primary); position: relative; z-index: 200 } .duet-date__day:hover::before, .duet-date__day.is-today::before { background: var(--duet-color-primary); border-radius: 50%; bottom: 0; content: ""; left: 0; opacity: 0.06; position: absolute; right: 0; top: 0 } .duet-date__day[aria-pressed=true], .duet-date__day:focus { background: var(--duet-color-primary); box-shadow: none; color: var(--duet-color-text-active); outline: 0 } .duet-date__day:active { background: var(--duet-color-primary); box-shadow: 0 0 5px var(--duet-color-primary); color: var(--duet-color-text-active); z-index: 200 } .duet-date__day:focus { box-shadow: 0 0 5px var(--duet-color-primary); z-index: 200 } .duet-date__day:not(.is-month) { box-shadow: none } .duet-date__day:not(.is-month), .duet-date__day[aria-disabled=true] { background: transparent; color: var(--duet-color-text); cursor: default; opacity: 0.5 } .duet-date__day[aria-disabled=true].is-today { box-shadow: 0 0 0 1px var(--duet-color-primary) } .duet-date__day[aria-disabled=true].is-today:focus { box-shadow: 0 0 5px var(--duet-color-primary); background: var(--duet-color-primary); color: var(--duet-color-text-active) } .duet-date__day[aria-disabled=true]:not(.is-today)::before { display: none } .duet-date__day.is-outside { background: var(--duet-color-button); box-shadow: none; color: var(--duet-color-text); cursor: default; opacity: 0.6; pointer-events: none } .duet-date__day.is-outside::before { display: none } .duet-date__header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; width: 100% } .duet-date__nav { white-space: nowrap } .duet-date__prev, .duet-date__next { -moz-appearance: none; -webkit-appearance: none; align-items: center; appearance: none; background: var(--duet-color-button); border: 0; border-radius: 50%; color: var(--duet-color-text); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; margin-left: 8px; padding: 0; transition: background-color 300ms ease; width: 32px } @media (max-width: 35.9375em) { .duet-date__prev, .duet-date__next { height: 40px; width: 40px } } .duet-date__prev:focus, .duet-date__next:focus { box-shadow: 0 0 0 2px var(--duet-color-primary); outline: 0 } .duet-date__prev:active:focus, .duet-date__next:active:focus { box-shadow: none } .duet-date__prev:disabled, .duet-date__next:disabled { cursor: default; opacity: 0.5 } .duet-date__prev svg, .duet-date__next svg { margin: 0 auto } .duet-date__select { display: inline-flex; margin-top: 4px; position: relative } .duet-date__select span { margin-right: 4px } .duet-date__select select { cursor: pointer; font-size: 1rem; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 2 } .duet-date__select select:focus+.duet-date__select-label { box-shadow: 0 0 0 2px var(--duet-color-primary) } .duet-date__select-label { align-items: center; border-radius: var(--duet-radius); color: var(--duet-color-text); display: flex; font-size: 1.25rem; font-weight: var(--duet-font-bold); line-height: 1.25; padding: 0 4px 0 8px; pointer-events: none; position: relative; width: 100%; z-index: 1 } .duet-date__select-label svg { width: 16px; height: 16px } .duet-date__mobile { align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.12); display: flex; justify-content: space-between; margin-bottom: 20px; margin-left: -10%; overflow: hidden; padding: 12px 20px; position: relative; text-overflow: ellipsis; white-space: nowrap; width: 120% } @media (min-width: 36em) { .duet-date__mobile { border: 0; margin: 0; overflow: visible; padding: 0; position: absolute; right: -8px; top: -8px; width: auto } } .duet-date__mobile-heading { display: inline-block; font-weight: var(--duet-font-bold); max-width: 84%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } @media (min-width: 36em) { .duet-date__mobile-heading { display: none } } .duet-date__close { -webkit-appearance: none; align-items: center; appearance: none; background: var(--duet-color-button); border: 0; border-radius: 50%; color: var(--duet-color-text); cursor: pointer; display: flex; height: 24px; justify-content: center; padding: 0; width: 24px } @media (min-width: 36em) { .duet-date__close { opacity: 0 } } .duet-date__close:focus { box-shadow: 0 0 0 2px var(--duet-color-primary); outline: none } @media (min-width: 36em) { .duet-date__close:focus { opacity: 1 } } .duet-date__close svg { margin: 0 auto } .duet-date__vhidden { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; top: 0; width: 1px } /* 수정 */ duet-date-picker.input{padding:0 0 0 12px;} duet-date-picker *:focus{outline: auto !important;box-shadow:none !important;} .duet-date,.duet-date__input-wrapper{height:100%;} .duet-date__toggle{min-width:0 !important;width:30px;box-shadow:none;background:url(./images/icon_calendar.png) no-repeat center center;top:-1.5px;right:4px;padding:0;} .duet-date__toggle-icon{display:none !important;} .duet-date__dialog{min-width:360px;} .duet-date__dialog-content{max-width:360px;background:#fff;padding:50px 16px 20px;} .duet-date__input{width:100%;height:100%;padding:0;font-size:16px;border:0;} .duet-date__input::placeholder{font-family:'Pretendard';font-size:14px;color:#777;font-weight:400;} .duet-date__table{table-layout:fixed;} .duet-date__day,.duet-date__prev, .duet-date__next{min-width:0 !important;} .duet-date__header>div{display:flex;width:70%;gap:8px;} .duet-date__header>div.duet-date__nav{width:auto;} .duet-date__table thead tr{background:var(--gray-color-light);} .duet-date__table thead tr th:first-child{border-radius:10px 0 0 10px;overflow:hidden;} .duet-date__table thead tr th:last-child{border-radius:0 10px 10px 0;overflow:hidden;} .duet-date__select-label{height:40px;border:1px solid #d8d8d8;border-radius:5px;font-size:16px;background:url(./images/icon_arrow_down.png) no-repeat calc(100% - 8px) center;} .duet-date__select{min-width:100px;} .duet-date__select select{width:100%;} .duet-date__select span{width:100%;} .duet-date__select select:focus+.duet-date__select-label{outline:auto;} .duet-date__select svg{display:none;} .duet-date__table-header,.duet-date__cell,.duet-date__day,.list_top .search_area .duet-date__day{width:45px !important;height:45px !important;vertical-align:middle;padding:0 !important;} .duet-date__prev, .duet-date__next{width:40px !important;height:40px !important;background:var(--gray-color-light);border-radius:100% !important;padding:0 !important;} .duet-date__table-header{font-size:16px;} .duet-date__table thead tr{background:var(--primary-lighter-color);} .duet-date__day.is-today{box-shadow:0 0 0 1px var(--primary-color);} .duet-date__day span{padding:0;} .duet-date__day:hover{background:var(--primary-color-light-hover);} .duet-date__day:hover::before, .duet-date__day.is-today::before,.duet-date__day[aria-pressed=true], .duet-date__day:focus{background:var(--primary-color);} .duet-date__mobile{right:8px;top:7px;} .duet-date__close{min-width:0 !important;width:40px !important;height:40px !important;background:url(./images/icon_x.png) no-repeat center;opacity:1;background-size:70%;} .duet-date__close svg{display:none;}