/*!
 * ui.css — DEEP SQUARE 사이트 공통 UI (메인 + 서브 전체)
 *
 * [2026-10-14] 1차 작업 지시서. include/header.html 에서 common_all.css 다음에 싣는다.
 * index_test.html(deepsquare02) 에서 다듬은 드롭다운·달력·버튼 오버를 이 사이트로 옮기고,
 * 같은 설정값(속도·이징·색 변화)을 서브 페이지에도 적용했다. 짝이 되는 스크립트는 js/ui.js.
 *
 *   1. 종목 드롭다운 (메인 예약 폼)          — index_test 그대로
 *   2. 달력 팝업 (메인 + 마이페이지)        — index_test 그대로, 선택자만 .date_con 공통으로
 *   3. 드롭다운 (서브: 마이페이지 select_box · 1:1 문의 이메일) — 1과 같은 속도·이징
 *   4. 버튼 오버 — 메인(index_test 그대로) + 서브(같은 규칙으로 대응)
 *   5. 모바일 (1024px 이하)
 *   6. 줄바꿈 — 서브 문단·안내 문구 word-break:keep-all
 *   7. 키보드 포커스 표시 (코덱스 검수 미반영 항목)
 */

/* ========================================================================
 * 1. 종목 드롭다운 (메인) — deepsquare02/css/style.css 에서 그대로 옮김
 * ===================================================================== */
/* ── 종목 드롭다운 ────────────────────────────────────────────────────────
   [2026-09-23] 네이티브 <select> 를 드롭다운으로 바꿨다. 마크업은
   include/footer.html 의 스크립트가 만든다(.select_con 이 index_tmp·index_test
   두 곳에 있어 HTML 을 두 번 고치면 갈라진다).
   버튼 재질은 원래 select 규칙에 선택자를 같이 태워 물려받는다 — 유리 효과를
   두 번 적어 두면 한쪽만 고쳐져 갈라진다. */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con {position:relative;}
/* 열렸을 때만 위로 올린다. 항상 올려 두면 옆 달력 팝업(z-index 60) 위로 덮는다. */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open {z-index:70;}

/* 네이티브 셀렉트는 값 보관용 — 화면에서만 뺀다(display:none 이면 일부 브라우저가 전송에서 뺀다) */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > select.drop_hidden {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%);}

#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con {position:relative;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn {display:flex; justify-content:space-between; align-items:center; gap:min(10px, 0.52vw); background-image:none; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn > .drop_text {flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn > .drop_text {overflow:visible; text-overflow:clip;}   /* 2026-11-03 종목명 다 보이게 */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn > .drop_arrow {flex:0 0 auto; width:min(18px, 0.94vw); height:min(18px, 0.94vw); background:url("/img/sub/select_arrow_wh.svg") no-repeat center / contain; transition:transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_btn > .drop_arrow {transform:rotate(180deg);}

#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list {display:none; position:absolute; top:calc(100% + min(8px, 0.42vw)); left:0; width:100%; max-height:min(240px, 12.5vw); overflow-y:auto; overscroll-behavior:contain; padding:min(6px, 0.31vw); border:min(1px, 0.05vw) solid rgba(255,255,255,0.22); border-radius:min(16px, 0.83vw); background-color:rgba(3, 32, 63, 0.58); background-image:radial-gradient(circle at 22% 86%, rgba(255,255,255,0.30) 0 2px, transparent 2.6px), radial-gradient(circle at 58% 70%, rgba(255,255,255,0.22) 0 1.5px, transparent 2px), radial-gradient(circle at 82% 92%, rgba(255,255,255,0.26) 0 2.5px, transparent 3.2px); background-size:100% 70px, 100% 95px, 100% 80px; background-repeat:repeat-y; backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35); box-shadow:inset 0 min(1px, 0.05vw) 0 rgba(255,255,255,0.28), 0 min(18px, 0.94vw) min(44px, 2.29vw) rgba(0, 20, 45, 0.45); z-index:10;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list {display:block; animation:ds-drop-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), ds-drop-bubble 3.4s linear infinite;}
@keyframes ds-drop-bubble {
	from {background-position:0 0, 0 0, 0 0;}
	to   {background-position:0 -70px, 0 -95px, 0 -80px;}
}

/* 기포는 유리판 자신의 배경에 넣는다(아래 .drop_list 의 background-image).
   [2026-09-23] 처음엔 ul:before 로 깔았다. 그러면 기포가 스크롤 내용에 붙어 같이 움직이고
   (물속이 아니라 목록에 스티커를 붙인 꼴) 스크롤 높이 전체를 매 프레임 다시 칠한다.
   요소 자신의 배경은 내용이 스크롤해도 제자리에 있다 — 물은 가만히 있고 목록만 지나간다. */
/* 스크롤바 — 기본 회색 막대(윈도우 15px)는 154px 짜리 목록에 너무 굵다.
   얇은 물빛 막대로 바꾼다. 자리를 미리 비우는 scrollbar-gutter 는 쓰지 않는다 —
   항목이 적어 스크롤이 없을 때 오른쪽에 12px 빈 띠만 남는다. */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list {scrollbar-width:thin; scrollbar-color:rgba(170,225,255,0.45) transparent;}
/* 아래로 더 있을 때만 가장자리를 물속으로 흐린다(JS 가 .has-more 를 붙인다).
   짧은 목록에도 걸면 멀쩡한 마지막 항목이 잘린 것처럼 보인다. */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list.has-more {-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - min(26px, 1.35vw)), transparent 100%); mask-image:linear-gradient(to bottom, #000 calc(100% - min(26px, 1.35vw)), transparent 100%);}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list::-webkit-scrollbar {width:min(6px, 0.31vw);}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list::-webkit-scrollbar-track {background:transparent;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list::-webkit-scrollbar-thumb {background:rgba(170,225,255,0.40); border-radius:min(6px, 0.31vw);}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list::-webkit-scrollbar-thumb:hover {background:rgba(190,235,255,0.60);}


/* 항목은 아래에서 차례로 떠오른다 — 한꺼번에 나타나면 '창'이 뜬 느낌이고,
   시차를 두면 물이 차오르며 드러나는 느낌이 된다. */
/* transition 이 아니라 animation 을 쓴다 — display:none 에서 나타나는 요소는
   초기 상태가 렌더된 적이 없어 transition 이 아예 실행되지 않고 최종값으로 건너뛴다.
   (실측: 여는 순간 네 항목이 동시에 opacity 1 이었다) */
/* 항목 등장 transform 이 바깥 스크롤러의 넘침 영역을 늘리는 것을 여기서 끊는다.
   [2026-09-28] 검수 "리스트 박스 스크롤이 생겼다 없어진다".
   항목이 아래에서 떠오를 때 translateY(10px) 가 스크롤 영역에 더해져,
   스크롤이 필요 없는 짧은 목록에도 스크롤바가 0.5초쯤 생겼다 사라졌다
   (실측: 항목 1개인데 scrollHeight 60 / clientHeight 56 → 0.2초 뒤 56 으로 정정).
   ul 이 자기 밖으로 나간 부분을 잘라 내면 바깥 스크롤러가 그걸 세지 않는다.
   항목 높이(44px)가 글자보다 훨씬 커서 떠오르는 동안에도 글자는 잘리지 않는다. */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul {overflow:hidden;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li {opacity:0; transform:translateY(min(10px, 0.52vw)); transition:background-color 0.25s ease, box-shadow 0.25s ease;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li {animation:ds-drop-item 0.5s cubic-bezier(0.16, 0.9, 0.28, 1.04) both;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(1) {animation-delay:0.05s;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(2) {animation-delay:0.11s;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(3) {animation-delay:0.17s;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(4) {animation-delay:0.23s;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(5) {animation-delay:0.29s;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(6) {animation-delay:0.35s;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open > .drop_con > .drop_list > ul > li:nth-child(n+7) {animation-delay:0.4s;}
@keyframes ds-drop-item {
	from {opacity:0; transform:translateY(min(10px, 0.52vw));}
	to   {opacity:1; transform:translateY(0);}
}
/* 아래 공간이 모자라면 스크립트가 .is-up 을 붙인다 */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open.is-up > .drop_con > .drop_list {top:auto; bottom:calc(100% + min(8px, 0.42vw));}
/* 스크롤이 생기는 상자에는 scaleY 를 쓰지 않는다.
   [2026-09-23] 검수 "스크롤 생기면서 덜컹거린다". scaleY(0.94)+오버슈트로 열었더니
   상자 전체가 눌렸다 펴지면서 안의 항목이 506→512→507px 로 위아래로 흔들렸고,
   스크롤바까지 같이 늘어났다. 떠오르는 느낌은 안쪽 항목의 시차가 맡는다. */
@keyframes ds-drop-in {
	from {opacity:0; transform:translateY(max(-8px, -0.42vw));}
	to   {opacity:1; transform:translateY(0);}
}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li {display:flex; align-items:center; min-height:min(44px, 2.29vw); padding:0 min(18px, 0.94vw); border-radius:min(12px, 0.63vw); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color 0.2s ease;}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li > span {font-size:min(16px, 0.83vw); color:rgba(255,255,255,0.82); font-weight:500; line-height:normal; letter-spacing:max(-0.37px, -0.02vw); transition:color 0.25s ease;}
/* 선택 항목은 hover 와 무관하게 항상 칠해 둔다 — 손가락에는 hover 가 없다 */
/* 고른 항목 — 진한 파랑 칠 대신 물빛 띠가 감겨 있다 */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li.on {background:linear-gradient(90deg, rgba(120,205,255,0.10) 0%, rgba(120,205,255,0.26) 45%, rgba(120,205,255,0.10) 100%); box-shadow:inset 0 0 0 min(1px, 0.05vw) rgba(170,225,255,0.35);}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li.on > span {color:#FFF;}
/* 탭 하이라이트를 껐으므로 눌린 느낌은 직접 준다 */
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li:active {background:rgba(150,215,255,0.20);}
#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li.on:active {background:linear-gradient(90deg, rgba(120,205,255,0.16) 0%, rgba(120,205,255,0.34) 45%, rgba(120,205,255,0.16) 100%);}



/* ========================================================================
 * 2. 달력 팝업 — deepsquare02/css/style.css 에서 옮김.
 *    [2026-10-14] 선택자 앞부분(#main_con > … > .form_con .input_con)만 떼어 .date_con 으로 일반화했다.
 *    값은 하나도 바꾸지 않았다 — 메인과 마이페이지가 같은 달력이다.
 * ===================================================================== */
/* ── 예약 기간 달력 팝업 ──────────────────────────────────────────────────
   [2026-09-23] jQuery UI datepicker → /df/holidayinn/ 방식의 팝업 달력으로 교체.
   마크업은 include/footer.html 의 스크립트가 만든다(.date_con 이 index_tmp·index_test
   두 곳에 있어 HTML 을 두 번 고치면 갈라진다). 클래스 이름은 홀리데이인과 같게 맞췄다.
   이전·다음·닫기 아이콘은 SVG 없이 CSS 로 그린다. */
.date_con {position:relative;}
.date_con > .date_group {cursor:pointer;}
.date_con > .date_group > input {cursor:pointer;}
.date_con > .check_date_con {display:none; width:min(700px, 36.46vw); position:absolute; top:calc(100% + min(14px, 0.73vw)); left:50%; transform:translateX(-50%); z-index:60;}
.date_con.is-open > .check_date_con {display:block; animation:ds-cal-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);}
@keyframes ds-cal-in {
	from {opacity:0; transform:translateX(-50%) translateY(max(-10px, -0.52vw));}
	to   {opacity:1; transform:translateX(-50%) translateY(0);}
}
.date_con > .check_date_con > .contents_con {position:relative; background:#FFF; padding:min(36px, 1.88vw) min(40px, 2.08vw); border-radius:min(20px, 1.04vw); box-shadow:0 min(20px, 1.04vw) min(50px, 2.6vw) rgba(0,0,0,0.28);}
.date_con > .check_date_con > .contents_con:after {content:""; display:block; clear:both;}
.date_con > .check_date_con > .contents_con > .contents_div {float:left; width:min(280px, 14.58vw);}
.date_con > .check_date_con > .contents_con > .contents_div + .contents_div {margin:0 0 0 min(60px, 3.13vw);}

.date_con > .check_date_con .cal_top {margin:0 0 min(14px, 0.73vw); padding:0 min(28px, 1.46vw); text-align:center; position:relative; top:0; left:0;}
.date_con > .check_date_con .cal_top .cal_ym {font-size:min(17px, 0.89vw); color:#222; font-weight:700; line-height:min(28px, 1.46vw); letter-spacing:max(-0.4px, -0.02vw);}
.date_con > .check_date_con .cal_top .cal_btn {display:block; width:min(28px, 1.46vw); height:min(28px, 1.46vw); position:absolute; top:50%; margin:max(-14px, -0.73vw) 0 0; border-radius:50%; z-index:10;}
.date_con > .check_date_con .cal_top .cal_btn:before {content:""; display:block; width:min(9px, 0.47vw); height:min(9px, 0.47vw); border-top:min(2px, 0.1vw) solid #222; border-right:min(2px, 0.1vw) solid #222; position:absolute; top:50%; left:50%;}
.date_con > .check_date_con .cal_top .cal_btn.prev {left:0;}
.date_con > .check_date_con .cal_top .cal_btn.prev:before {transform:translate(-30%, -50%) rotate(-135deg);}
.date_con > .check_date_con .cal_top .cal_btn.next {right:0;}
.date_con > .check_date_con .cal_top .cal_btn.next:before {transform:translate(-70%, -50%) rotate(45deg);}
.date_con > .check_date_con .cal_top .cal_btn.off {visibility:hidden;}
/* 데스크탑은 왼쪽 달에 '이전', 오른쪽 달에 '다음' 만 남긴다 */
.date_con > .check_date_con > .contents_con > .contents_div:first-child .cal_btn.next {display:none;}
.date_con > .check_date_con > .contents_con > .contents_div + .contents_div .cal_btn.prev {display:none;}

.date_con > .check_date_con .cal_content > .week > table {width:100%;}
.date_con > .check_date_con .cal_content > .week > table > tbody > tr > td {height:min(30px, 1.56vw);}
.date_con > .check_date_con .cal_content > .week > table > tbody > tr > td span {font-size:min(13px, 0.68vw); color:#555; font-weight:600; line-height:min(18px, 0.94vw);}
.date_con > .check_date_con .cal_content > .week > table > tbody > tr > td:first-child span {color:#E60909;}
.date_con > .check_date_con .cal_content > .week > table > tbody > tr > td:last-child span {color:#1F6FEB;}

.date_con > .check_date_con .cal_content > .day > table {width:100%;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td {width:14.28%; padding:min(3px, 0.16vw) 0;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td span {display:block; text-align:center; font-size:min(15px, 0.78vw); color:#222; font-weight:500; line-height:min(32px, 1.67vw); cursor:pointer;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td:first-child span {color:#E60909;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td:last-child span {color:#1F6FEB;}
/* 오늘 이전 — 위 요일색 규칙보다 뒤에 둬서 !important 없이 이긴다 */
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.none_day span {cursor:default;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.off_day span {color:#C4C4C4; cursor:default;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.today:not(.start_day):not(.ing_day):not(.end_day) span {box-shadow:inset 0 0 0 min(1px, 0.05vw) #00499F; border-radius:min(16px, 0.83vw);}
/* 선택 구간 — td 에 좌우 padding 이 없어 칸끼리 붙는다(띠가 끊기지 않는다) */
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.start_day span,
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.ing_day span,
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.end_day span {background:#00499F; color:#FFF;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.ing_day span {background:rgba(0,73,159,0.12); color:#00499F;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.start_day span {border-radius:min(16px, 0.83vw) 0 0 min(16px, 0.83vw);}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.end_day span {border-radius:0 min(16px, 0.83vw) min(16px, 0.83vw) 0;}
.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.start_day.end_day span {border-radius:min(16px, 0.83vw);}

.date_con > .check_date_con > .contents_con > .close_btn {width:min(32px, 1.67vw); height:min(32px, 1.67vw); position:absolute; top:min(12px, 0.63vw); right:min(12px, 0.63vw); z-index:10;}
.date_con > .check_date_con > .contents_con > .close_btn > a {display:block; width:100%; height:100%; position:relative;}
.date_con > .check_date_con > .contents_con > .close_btn > a:before,
.date_con > .check_date_con > .contents_con > .close_btn > a:after {content:""; position:absolute; top:50%; left:50%; width:min(16px, 0.83vw); height:min(2px, 0.1vw); background:#222; margin:max(-1px, -0.05vw) 0 0 max(-8px, -0.42vw);}
.date_con > .check_date_con > .contents_con > .close_btn > a:before {transform:rotate(45deg);}
.date_con > .check_date_con > .contents_con > .close_btn > a:after {transform:rotate(-45deg);}

/* ========================================================================
 * 3. 드롭다운 (서브)
 *    지시서 2번 — 메인 드롭박스 열림/닫힘을 서브에 같은 설정값으로.
 *      목록 등장  ds-drop-in   0.34s cubic-bezier(0.22, 0.61, 0.36, 1)   (메인과 같다)
 *      항목 등장  서브는 [2026-10-14] 시차 없이 상자째 위→아래로 펼침(ds-sub-unfold) — 메인은 그대로 시차 등장
 *      화살표     rotate(180deg) 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)
 *      항목 오버  배경 rgba(150,215,255,0.14) · 고른 항목은 물빛 띠 (메인과 같은 색)
 *    색은 메인과 같고, 바탕만 서브 폼(흰 바탕)에 맞춰 글자색을 진하게 둔다
 *    (메인은 어두운 유리 위라 글자가 흰색이다 — 흰 바탕에 흰 글자는 안 읽힌다).
 * ===================================================================== */
/* 3-1. 마이페이지 .select_box (원래 있던 직접 만든 셀렉트). 열기·닫기 클래스는 기존 .select.active 그대로 */
.select_box > .select {cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color 0.3s ease, background-color 0.3s ease;}
.select_box > .select > .img_con {transition:transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;}
/* [2026-10-14] 검수 "영역이 잡힌 상태에서 리스트 항목이 나오는 게 별로" — 상자가 먼저 뜨고 항목이 0.05~0.4s 늦게
   하나씩 올라와 빈 상자가 잠깐 보였다. 서브는 항목을 담은 채 위에서 아래로 펼쳐지게 바꿨다(항목 시차 제거).
   속도·이징은 메인 목록 등장과 같다(0.34s cubic-bezier(0.22, 0.61, 0.36, 1)). */
.select_box .select.active + .option_list {animation:ds-sub-unfold 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);}
@keyframes ds-sub-unfold {
	from {opacity:0; clip-path:inset(0 0 100% 0);}
	40%  {opacity:1;}
	to   {opacity:1; clip-path:inset(0 0 0 0);}
}
/* [2026-10-14] 검수 "열고 닫을 때 동작이 다르다" — 닫을 때는 즉시 사라졌다(display:none).
   닫을 때도 같은 속도·이징으로 아래→위로 말려 올라가게 한다. JS(ui.js)가 0.34s 동안 .is-closing 을 붙여 둔다. */
.select_box.is-closing > .option_list,
.mypage_sub_con .form_con .input_con > .select_box.is-closing > .option_list {display:block; animation:ds-sub-fold 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; pointer-events:none;}
@keyframes ds-sub-fold {
	from {opacity:1; clip-path:inset(0 0 0 0);}
	60%  {opacity:1;}
	to   {opacity:0; clip-path:inset(0 0 100% 0);}
}
.select_box > .option_list > ul {overflow:hidden;}
.select_box > .option_list > ul > li {border-radius:min(8px, 0.42vw); transition:background-color 0.25s ease;}
.select_box > .option_list > ul > li > span {transition:color 0.25s ease;}
.select_box > .option_list > ul > li.on {background:linear-gradient(90deg, rgba(120,205,255,0.10) 0%, rgba(120,205,255,0.26) 45%, rgba(120,205,255,0.10) 100%); box-shadow:inset 0 0 0 1px rgba(120,190,240,0.35);}
.select_box > .option_list > ul > li.on > span {color:#00499F;}
.select_box > .option_list > ul > li:active {background:rgba(150,215,255,0.20);}

/* 3-1-2. 높이 상한 + 목록 안 스크롤 — [2026-10-14] 검수 "모바일에서 너무 길다"(320px 에서 450px, 화면 거의 전체).
          값은 메인 드롭다운과 같다: PC min(240px, 12.5vw) · 모바일 min(55vw, 200px) (아래 5번).
          끝까지 내리기 전에는 아래 가장자리를 흐려 '더 있다'를 알린다(JS 가 .has-more). */
.select_box > .option_list,
.mypage_sub_con .form_con .input_con > .select_box > .option_list {max-height:min(240px, 12.5vw); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#C9D6E6 transparent;}
.select_box > .option_list::-webkit-scrollbar {width:4px;}
.select_box > .option_list::-webkit-scrollbar-track {background:transparent;}
.select_box > .option_list::-webkit-scrollbar-thumb {background:#C9D6E6; border-radius:4px;}
/* 흐림은 마스크가 아니라 흰 그라데이션 덮개로 — 마스크는 흰 상자 바탕까지 투명하게 만들어 상자 아래가 잘려 보였다.
   sticky 라 목록이 스크롤돼도 보이는 영역 아래에 붙어 있다.
   [2026-10-19] sticky 는 상자의 padding 안쪽 기준이라 덮개가 바닥보다 padding(마이페이지 25px)만큼 떠 있었다 —
   그 아래 항목만 선명하게 남아 '변경/이용완료'가 겹쳐 보였다. JS(ui.js edge)가 넣는 --ds-pb 만큼 내려 바닥에 붙인다. */
.select_box > .option_list:after,
.ds-drop-host > .drop_con > .drop_list:after {content:''; display:block; position:sticky; bottom:calc(-1px - var(--ds-pb, 0px)); height:32px; margin-top:-32px; background:linear-gradient(to bottom, rgba(255,255,255,0), #FFF 85%); pointer-events:none; opacity:0; transition:opacity 0.2s ease;}
.select_box > .option_list.has-more:after,
.ds-drop-host > .drop_con > .drop_list.has-more:after {opacity:1;}
.ds-drop-host > .drop_con > .drop_list {scrollbar-color:#C9D6E6 transparent;}
.ds-drop-host > .drop_con > .drop_list::-webkit-scrollbar {width:4px;}
.ds-drop-host > .drop_con > .drop_list::-webkit-scrollbar-thumb {background:#C9D6E6; border-radius:4px;}

/* 3-2. 네이티브 select 에 class="ds-drop" 를 단 것 (1:1 문의 이메일 도메인).
        버튼은 원래 select 와 같은 모양으로 둔다 — 화면에서 보이는 것은 그대로, 동작만 메인과 같다. */
.ds-drop-host {position:relative;}
.ds-drop-host.is-open {z-index:70;}
.ds-drop-host > select.drop_hidden {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%);}
/* [2026-10-15] style.css 의 ".customer_inquiry_con … .email_con > select {width:…}" 가 선택자가 더 길어 위 숨김을 이겼다 — 크기만 강제한다 */
.ds-drop-host > select.drop_hidden {width:1px !important; height:1px !important; padding:0 !important;}
.ds-drop-host > .drop_con {position:relative;}
.customer_inquiry_con > .contents_con > .list_con > ul > li > .list_div > .email_con > .drop_con > .drop_btn {display:flex; justify-content:space-between; align-items:center; gap:min(10px, 0.52vw); width:min(150px, 7.81vw); height:min(34px, 1.77vw); border:none; background:#F7F7F7; padding:0 min(10px, 0.52vw); font-size:min(16px, 0.83vw); color:#373737; font-weight:300; line-height:normal; letter-spacing:max(-0.4px, -0.02vw); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color 0.3s ease;}
.ds-drop-host > .drop_con > .drop_btn > .drop_text {flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ds-drop-host > .drop_con > .drop_btn > .drop_arrow {flex:0 0 auto; width:min(10px, 0.52vw); height:min(10px, 0.52vw); background:url("/img/sub/select_arrow.svg") no-repeat center / contain; transition:transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);}
.ds-drop-host.is-open > .drop_con > .drop_btn > .drop_arrow {transform:rotate(180deg);}
.ds-drop-host > .drop_con > .drop_list {display:none; position:absolute; top:calc(100% + min(8px, 0.42vw)); left:0; width:100%; min-width:min(150px, 7.81vw); max-height:min(240px, 12.5vw); overflow-y:auto; overscroll-behavior:contain; padding:min(6px, 0.31vw); border:1px solid #EFEFEF; border-radius:min(12px, 0.63vw); background:#FFF; box-shadow:0 min(10px, 0.52vw) min(30px, 1.56vw) rgba(0, 20, 45, 0.12); z-index:10; scrollbar-width:thin;}
.ds-drop-host.is-open > .drop_con > .drop_list {display:block; animation:ds-sub-unfold 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);}
.ds-drop-host.is-open.is-up > .drop_con > .drop_list {animation-name:ds-sub-unfold-up;}
.ds-drop-host.is-closing > .drop_con > .drop_list {display:block; animation:ds-sub-fold 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; pointer-events:none;}
.ds-drop-host.is-closing.is-up-closing > .drop_con > .drop_list {top:auto; bottom:calc(100% + min(8px, 0.42vw)); animation-name:ds-sub-fold-up;}
@keyframes ds-sub-fold-up {
	from {opacity:1; clip-path:inset(0 0 0 0);}
	60%  {opacity:1;}
	to   {opacity:0; clip-path:inset(100% 0 0 0);}
}
@keyframes ds-sub-unfold-up {
	from {opacity:0; clip-path:inset(100% 0 0 0);}
	40%  {opacity:1;}
	to   {opacity:1; clip-path:inset(0 0 0 0);}
}
.ds-drop-host.is-open.is-up > .drop_con > .drop_list {top:auto; bottom:calc(100% + min(8px, 0.42vw));}
.ds-drop-host > .drop_con > .drop_list > ul {overflow:hidden;}
.ds-drop-host > .drop_con > .drop_list > ul > li {display:flex; align-items:center; min-height:min(40px, 2.08vw); padding:0 min(12px, 0.63vw); border-radius:min(8px, 0.42vw); cursor:pointer; transition:background-color 0.25s ease; -webkit-tap-highlight-color:transparent;}
.ds-drop-host > .drop_con > .drop_list > ul > li > span {font-size:min(16px, 0.83vw); color:#373737; font-weight:400; line-height:normal; transition:color 0.25s ease;}
.ds-drop-host > .drop_con > .drop_list > ul > li.on {background:linear-gradient(90deg, rgba(120,205,255,0.10) 0%, rgba(120,205,255,0.26) 45%, rgba(120,205,255,0.10) 100%); box-shadow:inset 0 0 0 1px rgba(120,190,240,0.35);}
.ds-drop-host > .drop_con > .drop_list > ul > li.on > span {color:#00499F; font-weight:500;}
.ds-drop-host > .drop_con > .drop_list > ul > li:active {background:rgba(150,215,255,0.20);}

/* 3-3. 서브 버튼 — transition 은 hover 가 아니라 평상시 상태에 건다(손을 뗄 때 툭 끊기지 않게, 메인과 같은 원칙). */

.customer_main_con > .info01_con > .contents_con > form > .search_con > a,
.customer_inquiry_con > .contents_con > .btn_con > a,
.notice_view_con > .contents_con > .btn_con > a,
.reservation_center_con > .contents_con > .inner_con > .btn_con > a,
.reserv_step05_con > .contents_con > .step_end_con > .btn_con > a,
.mypage_sub_con .form_con .input_con > .btn_con,
.mypage_sub_con .benefit_sub03_con > .grade_history_con > .resume_inquiry_con > .tf_con > .form_con .input_con > .btn_con,
.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.add,
.mypage_sub_con .personal_sub01_con > .contents_con > .btn_con > ul > li > a,
.mypage_sub_con .reserv_popup_con > .contents_con > .scroll_con > .btn_con > ul > li > a.a_btn01,
.login_con > .contents_con > .box_con > .input_con > .btn_con > a,
.join_con > div > .contents_con > .btn_con > ul > li > a.a_btn02,
.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.add,
.join_common_con > .contents_con > .btn_con > a,
.find_con > .contents_con > .btn_con > ul > li > a.a_btn02,
.find_con.id_done > .contents_con > .btn_con > a,
.find_con.pw_con > .contents_con > .btn_con > a,
.find_con > .contents_con > .inner_con > .contents_con > .info_con > .info_div .input_list > ul > li > .list_div > .input_con > .btn_con.blue > a,
.find_con > .contents_con > .inner_con > .contents_con > .info_con > .info_div .input_list > ul > li > .list_div > .input_con > .btn_con > a,
.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .input_con > .address_con > .search_con > .btn_con > a,
.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .input_con > .btn_con > a,
.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .input_con > .address_con > .search_con > .btn_con > a,
.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.delete,
.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.delete,
.mypage_sub_con .benefit_sub04_con > .contents_con > .top_con > .oath_con > .list_con > ul > li > .list_div > .txt_con > .btn_con > a,
.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .upload_con > .file_label,
.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .upload_con > .file_label {transition:background-color 0.3s ease;}
.join_con > div > .contents_con > .btn_con > ul > li > a.a_btn01,
.find_con > .contents_con > .btn_con > ul > li > a.a_btn01,
.find_con > .contents_con > .txt_con > .tab_con > ul > li > a {transition:background-color 0.3s ease;}
.number_list_con > .contents_con > .list_con > a {transition:color 0.3s ease;}
.customer_main_con > .info04_con > .contents_con > .box_con > .btn_con > a > span {transition:color 0.3s ease;}
.customer_main_con > .info04_con > .contents_con > .box_con > .btn_con > a > span.arrow {transition:transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);}
.mypage_main_con > .contents_con > .inner_con > .recent_con > .inner_con > ul > li > .list_div > .title_con > a > span,
.mypage_main_con > .contents_con > .inner_con > .info_con > div > .contents_con > .title_con > a > span {transition:color 0.3s ease;}
.mypage_main_con > .contents_con > .inner_con > .recent_con > .inner_con > ul > li > .list_div > .title_con > a > img,
.mypage_main_con > .contents_con > .inner_con > .info_con > div > .contents_con > .title_con > a > img {transition:transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);}

/* ========================================================================
 * 4. 버튼 오버 — PC 만 (터치 기기는 hover 가 눌림 뒤에 남는다)
 * ===================================================================== */
/* 4-1. 메인 — deepsquare02/css/style.css 의 hover 블록 그대로 (달력 줄만 .date_con 공통 선택자) */
@media (hover: hover) and (pointer: fine) {

	/* 첫 화면 버튼 — 다른 버튼과 같은 방식으로
	   [2026-09-28] 검수 "다른 컨텐츠에서 사용해준 오버 시 참고해서 비슷하게".

	   이 페이지의 면(面) 버튼은 예외 없이 '배경색이 바뀐다' 하나로 통일돼 있다 —
	     조회하기      rgba(1,42,90,0.70) → rgba(1,42,90,0.92)   같은 색을 더 진하게
	     드롭다운 버튼  rgba(34,34,34,0.20) → rgba(34,34,34,0.34)  같은 색을 더 진하게
	     예약(표)      #00499F → #0060CE
	     공지 more     #231815 → #00499F
	   글+화살표 버튼만 화살표가 밀린다(info02·더보기·푸터). 첫 화면 버튼은 화살표가 없다.

	   그래서 같은 예약 폼의 '조회하기' 와 같은 네이비로 채운다. 블러는 건드리지 않는다
	   (5px 그대로) — 블러를 같이 올리면 뒤의 사진이 번져 뿌연 막이 되고, 그게 앞서
	   "부자연스럽다"·"파란색 느낌"으로 지적된 인상이었다.

	   알파는 0.40 이다. 처음 0.85 로 넣었더니 유리가 아니라 색칠한 판이 됐다
	   (검수: "배경색이 너무 진한데 오버 전처럼 블러 살려 달라").
	   0.25 / 0.40 / 0.55 / 0.70 을 실제 화면에 띄워 비교했다 —
	   0.70 부터 뒤 사진이 사라지고, 0.40 이 네이비가 분명하면서 블러가 살아 있다. */
	#main_con > .info01_con > .contents_con > .btn_con > ul > li > a {transition:background-color 0.4s ease, border-color 0.4s ease;}
	#main_con > .info01_con > .contents_con > .btn_con > ul > li > a:hover {background-color:rgba(1, 42, 90, 0.40); border-color:rgba(255, 255, 255, 0.55);}



	/* ABOUT — 화살표가 먼저 나간다 */
	#main_con > .info02_con > .contents_con > .btn_con > .btn_con > a > span {transition:color 0.3s ease;}
	#main_con > .info02_con > .contents_con > .btn_con > .btn_con > a > img {transition:transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);}
	#main_con > .info02_con > .contents_con > .btn_con > .btn_con > a:hover > span {color:#00499F;}
	#main_con > .info02_con > .contents_con > .btn_con > .btn_con > a:hover > img {transform:translateX(min(8px, 0.42vw));}

	/* 예약 — 조회하기 (유리 버튼) */
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .btn_con:hover {background-color:rgba(1, 42, 90, 0.92);}

	/* 예약 — 표 안 예약 버튼. transform 은 주지 않는다 (파동 링 .ds-ping 이 같이 커진다) */
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .table_con > .list_con > ul > li > .list_div > table > tbody > tr > .btn_td > a {transition:background-color 0.3s ease;}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .table_con > .list_con > ul > li > .list_div > table > tbody > tr > .btn_td > a:hover {background:#0060CE;}

	/* 예약 — 더보기 */
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .table_con > .btn_con > a > img {transition:transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .table_con > .btn_con > a:hover > img {transform:translateX(min(6px, 0.31vw));}

	/* 공지 · FAQ — more 버튼 */
	#main_con > .info05_con > .contents_con > div > .title_con > .btn_con > a {transition:background-color 0.3s ease;}
	#main_con > .info05_con > .contents_con > div > .title_con > .btn_con > a > img {transition:transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);}
	#main_con > .info05_con > .contents_con > div > .title_con > .btn_con > a:hover {background:#00499F;}
	#main_con > .info05_con > .contents_con > div > .title_con > .btn_con > a:hover > img {transform:translateX(min(4px, 0.21vw));}

	/* 헤더 메뉴 — 밑줄이 왼쪽에서 그어지고 오른쪽으로 걷힌다.
	   currentColor 라 히어로(흰 글자)·스크롤 뒤(검은 글자) 양쪽에 그대로 맞는다.
	   (모션 페이지에만 있던 규칙을 여기로 옮겼다 — hover 는 모션이 아니라 기본 동작이다) */
	#header > .contents_con > .list_con > ul > li > a {position:relative;}
	#header > .contents_con > .list_con > ul > li > a:after {content:""; position:absolute; left:0; right:0; bottom:max(-8px, -0.42vw); height:max(2px, 0.1vw); background:currentColor; opacity:0.7; transform:scaleX(0); transform-origin:right center; transition:transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);}
	#header > .contents_con > .list_con > ul > li:hover > a:after {transform:scaleX(1); transform-origin:left center;}

	/* 푸터 — 약관 버튼 화살표 */
	#footer > .contents_con > .terms_con > ul > li > a > img {transition:transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);}
	#footer > .contents_con > .terms_con > ul > li:hover > a > img {transform:translateX(min(4px, 0.21vw));}

	/* 종목 드롭다운 */
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn:hover {background-color:rgba(34,34,34,0.34);}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li:not(.on):hover {background:rgba(150,215,255,0.14);}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li:not(.on):hover > span {color:#FFF;}

	/* 달력 — 날짜 칸 · 이전/다음 · 닫기 */
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td span {transition:background-color 0.2s ease, color 0.2s ease;}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td:not(.none_day):not(.off_day):not(.start_day):not(.ing_day):not(.end_day):hover span {background:rgba(0,73,159,0.10); border-radius:min(16px, 0.83vw);}
	.date_con > .check_date_con .cal_top .cal_btn {transition:background-color 0.25s ease;}
	.date_con > .check_date_con .cal_top .cal_btn:hover {background:rgba(0,0,0,0.06);}
	.date_con > .check_date_con > .contents_con > .close_btn > a {transition:transform 0.25s ease;}
	.date_con > .check_date_con > .contents_con > .close_btn > a:hover {transform:rotate(90deg);}

}

/* 4-2. 서브 — 메인과 같은 규칙으로 대응시켰다.
   메인 규칙: 면(面) 버튼은 배경색만 바뀐다(0.3s ease) — 예약 버튼 #00499F → #0060CE, 공지 more 어두운 면 → #00499F
             반투명 유리 버튼은 같은 색을 더 진하게 — 드롭다운 0.20 → 0.34
             글+화살표 버튼은 글자가 #00499F 로, 화살표가 진행 방향으로 먼저 나간다(0.4s cubic-bezier(0.22, 0.61, 0.36, 1))
   서브 대응: #00499F 면 → #0060CE · #012A5A(네이비) 면 → #00499F · #0057BE → #0060CE
             회색·빨강·하늘·밝은 면은 같은 색을 한 단계 진하게 · 유리(이용안내 예약하기) 0.30 → 0.50
             테두리만 있는 버튼·탭은 네이비 6% 를 깐다 · 더보기/1:1 문의는 화살표 이동 + 글자 #00499F */
@media (hover: hover) and (pointer: fine) {
	.customer_main_con > .info01_con > .contents_con > form > .search_con > a:hover {background-color:#0060CE;}
	.customer_inquiry_con > .contents_con > .btn_con > a:hover {background-color:#0060CE;}
	.notice_view_con > .contents_con > .btn_con > a:hover {background-color:#0060CE;}
	.reservation_center_con > .contents_con > .inner_con > .btn_con > a:hover {background-color:#0060CE;}
	.reserv_step05_con > .contents_con > .step_end_con > .btn_con > a:hover {background-color:#0060CE;}
	.mypage_sub_con .form_con .input_con > .btn_con:hover {background-color:#0060CE;}
	.mypage_sub_con .benefit_sub03_con > .grade_history_con > .resume_inquiry_con > .tf_con > .form_con .input_con > .btn_con:hover {background-color:#0060CE;}
	.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.add:hover {background-color:#0060CE;}
	.mypage_sub_con .personal_sub01_con > .contents_con > .btn_con > ul > li > a:hover {background-color:#0060CE;}
	.mypage_sub_con .reserv_popup_con > .contents_con > .scroll_con > .btn_con > ul > li > a.a_btn01:hover {background-color:#0060CE;}
	.login_con > .contents_con > .box_con > .input_con > .btn_con > a:hover {background-color:#00499F;}
	.join_con > div > .contents_con > .btn_con > ul > li > a.a_btn02:hover {background-color:#00499F;}
	.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.add:hover {background-color:#00499F;}
	.join_common_con > .contents_con > .btn_con > a:hover {background-color:#00499F;}
	.find_con > .contents_con > .btn_con > ul > li > a.a_btn02:hover {background-color:#00499F;}
	.find_con.id_done > .contents_con > .btn_con > a:hover {background-color:#00499F;}
	.find_con.pw_con > .contents_con > .btn_con > a:hover {background-color:#00499F;}
	.find_con > .contents_con > .inner_con > .contents_con > .info_con > .info_div .input_list > ul > li > .list_div > .input_con > .btn_con.blue > a:hover {background-color:#0060CE;}
	.find_con > .contents_con > .inner_con > .contents_con > .info_con > .info_div .input_list > ul > li > .list_div > .input_con > .btn_con > a:hover {background-color:#7B7B7B;}
	.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .input_con > .address_con > .search_con > .btn_con > a:hover {background-color:#454545;}
	.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .input_con > .btn_con > a:hover {background-color:#454545;}
	.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .input_con > .address_con > .search_con > .btn_con > a:hover {background-color:#454545;}
	.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.delete:hover {background-color:#C41E00;}
	.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .btn_con > ul > li > a.delete:hover {background-color:#C41E00;}
	.mypage_sub_con .benefit_sub04_con > .contents_con > .top_con > .oath_con > .list_con > ul > li > .list_div > .txt_con > .btn_con > a:hover {background-color:#0A7FD4;}
	.join_common_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .upload_con > .file_label:hover {background-color:#EFEFEF;}
	.mypage_sub_con .personal_sub01_con > .contents_con > .input_field > .input_list > ul > li > .list_div > .teacher_con > .contents_con > .info_con > .type_con > .list_con > ul > li > .list_div > .file_con > ul > li > .list_div > .upload_con > .file_label:hover {background-color:#EFEFEF;}
	.join_con > div > .contents_con > .btn_con > ul > li > a.a_btn01:hover {background-color:#B3D5FF;}
	.find_con > .contents_con > .btn_con > ul > li > a.a_btn01:hover {background-color:rgba(1,42,90,0.06);}
	.find_con > .contents_con > .txt_con > .tab_con > ul > li > a:not(.on):hover {background-color:rgba(1,42,90,0.06);}
	.guide_main_con > .info06_con > .contents_con > .btn_con > a:hover {background-color:rgba(0,28,61,0.50);}
	.number_list_con > .contents_con > .list_con > a:not(.on):hover {color:#00499F;}
	.customer_main_con > .info04_con > .contents_con > .box_con > .btn_con > a > span:hover {color:#00499F;}
	.customer_main_con > .info04_con > .contents_con > .box_con > .btn_con > a > span.arrow {display:inline-block;}
	.customer_main_con > .info04_con > .contents_con > .box_con > .btn_con > a:hover > span.arrow {transform:translateX(min(8px, 0.42vw));}
	.mypage_main_con > .contents_con > .inner_con > .recent_con > .inner_con > ul > li > .list_div > .title_con > a:hover > span {color:#00499F;}
	.mypage_main_con > .contents_con > .inner_con > .recent_con > .inner_con > ul > li > .list_div > .title_con > a:hover > img {transform:translateX(min(6px, 0.31vw));}
	.mypage_main_con > .contents_con > .inner_con > .info_con > div > .contents_con > .title_con > a:hover > span {color:#00499F;}
	.mypage_main_con > .contents_con > .inner_con > .info_con > div > .contents_con > .title_con > a:hover > img {transform:translateX(min(6px, 0.31vw));}

	/* 드롭다운 (서브) — 메인: 버튼은 같은 색을 더 진하게, 항목은 물빛 */
	.select_box > .select:hover {border-color:#C9D6E6;}
	.select_box > .option_list > ul > li:not(.on):hover {background:rgba(150,215,255,0.14);}
	.select_box > .option_list > ul > li:not(.on):hover > span {color:#00499F;}
	.customer_inquiry_con > .contents_con > .list_con > ul > li > .list_div > .email_con > .drop_con > .drop_btn:hover {background-color:#EDEDED;}
	.ds-drop-host > .drop_con > .drop_list > ul > li:not(.on):hover {background:rgba(150,215,255,0.14);}
	.ds-drop-host > .drop_con > .drop_list > ul > li:not(.on):hover > span {color:#00499F;}
}


/* ========================================================================
 * 5. 모바일 (1024px 이하) — deepsquare02/css/common_all.css 에서 옮김 (달력은 .date_con 공통)
 * ===================================================================== */
/* ── 예약 기간 달력 팝업 (모바일) ─────────────────────────────────────────
   [2026-09-23] 좁은 폭에서는 달을 하나만 보여 준다(두 달은 360px 에 안 들어간다).
   위치는 .date_con 기준 absolute 로 둔다 — .form_con 에 backdrop-filter 가 걸려 있어
   position:fixed 가 화면이 아니라 그 박스를 기준으로 잡힌다(고정 모달이 안 된다).

   치수는 전부 min(Nvw, Ppx) 로 상한을 건다. 이 파일은 vw 기준이 360px 이라
   그냥 vw 로 두면 태블릿(768~1024)에서 2.1배로 부풀어 달력이 화면을 다 먹는다
   (768px 실측: 한 달짜리 달력이 폭 707px). 360px 에서의 크기는 그대로 유지된다. */
@media all and (max-width: 1024px) {

	.date_con > .check_date_con {width:min(92vw, 420px); top:calc(100% + min(3.33vw, 12px)); left:50%; transform:translateX(-50%); z-index:120;}
	.date_con > .check_date_con > .contents_con {padding:min(5.56vw, 20px) min(4.44vw, 16px); border-radius:min(4.44vw, 16px); box-shadow:0 min(2.78vw, 10px) min(8.33vw, 30px) rgba(0,0,0,0.3);}
	.date_con > .check_date_con > .contents_con > .contents_div {float:none; display:none; width:auto; margin:0;}
	.date_con > .check_date_con > .contents_con > .contents_div:first-child {display:block;}
	/* 한 달만 보이므로 그 달에 양쪽 화살표를 다 둔다 */
	.date_con > .check_date_con > .contents_con > .contents_div:first-child .cal_btn.next {display:block;}

	/* 화살표는 %로 들여 넣는다 — 바깥에 두면 오른쪽 닫기(X)와 겹치고,
	   vw 로 두면 팝업 폭이 상한에 걸린 뒤 혼자 바깥으로 밀려난다. */
	.date_con > .check_date_con .cal_top {margin:0 0 min(3.33vw, 12px); padding:0 26%;}
	.date_con > .check_date_con .cal_top .cal_ym {font-size:min(4.44vw, 16px); line-height:min(8.89vw, 32px); letter-spacing:max(-0.11vw, -0.4px);}
	.date_con > .check_date_con .cal_top .cal_btn {width:min(8.89vw, 32px); height:min(8.89vw, 32px); margin:max(-4.44vw, -16px) 0 0;}
	.date_con > .check_date_con .cal_top .cal_btn:before {width:min(2.5vw, 9px); height:min(2.5vw, 9px); border-top-width:min(0.56vw, 2px); border-right-width:min(0.56vw, 2px);}
	.date_con > .check_date_con .cal_top .cal_btn.prev {left:26%;}
	.date_con > .check_date_con .cal_top .cal_btn.next {right:26%;}

	.date_con > .check_date_con .cal_content > .week > table > tbody > tr > td {height:min(8.33vw, 30px);}
	.date_con > .check_date_con .cal_content > .week > table > tbody > tr > td span {font-size:min(3.33vw, 12px); line-height:min(4.44vw, 16px);}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td {padding:min(0.83vw, 3px) 0;}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td span {font-size:min(3.89vw, 14px); line-height:min(9.44vw, 34px);}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.today:not(.start_day):not(.ing_day):not(.end_day) span {box-shadow:inset 0 0 0 min(0.28vw, 1px) #00499F; border-radius:min(4.72vw, 17px);}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.start_day span {border-radius:min(4.72vw, 17px) 0 0 min(4.72vw, 17px);}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.end_day span {border-radius:0 min(4.72vw, 17px) min(4.72vw, 17px) 0;}
	.date_con > .check_date_con .cal_content > .day > table > tbody > tr > td.start_day.end_day span {border-radius:min(4.72vw, 17px);}

	.date_con > .check_date_con > .contents_con > .close_btn {width:min(8.89vw, 32px); height:min(8.89vw, 32px); top:min(2.22vw, 8px); right:min(2.22vw, 8px);}
	.date_con > .check_date_con > .contents_con > .close_btn > a:before,
	.date_con > .check_date_con > .contents_con > .close_btn > a:after {width:min(4.44vw, 16px); height:min(0.56vw, 2px); margin:max(-0.28vw, -1px) 0 0 max(-2.22vw, -8px);}

}
/* ── 종목 드롭다운 (모바일) ───────────────────────────────────────────────
   [2026-09-23] 네이티브 셀렉트는 탭하면 OS 가 전체화면 선택기를 띄워 준다.
   직접 만든 목록에는 그게 없으므로 손가락 기준을 여기서 직접 맞춘다.
     · 항목 높이 44px 이상 (손가락 최소 대상)
     · 목록 안에서만 스크롤 — overscroll-behavior:contain 으로 페이지가 같이 안 밀린다
     · 탭 하이라이트(회색 번쩍임)를 끄고 :active 로 직접 피드백
     · 선택 항목은 hover 없이도 늘 칠해져 있다
   치수는 min(Nvw, Ppx) 로 상한을 건다 — 이 파일은 vw 기준이 360px 이라
   그냥 두면 태블릿(768~1024)에서 2.1배로 부푼다. */
@media all and (max-width: 1024px) {

	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn {height:min(16.39vw, 59px); padding:0 min(8.33vw, 30px); border-radius:min(27.78vw, 100px); font-size:min(4.44vw, 16px); letter-spacing:max(-0.1vw, -0.4px); gap:min(2.78vw, 10px);}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_btn > .drop_arrow {width:min(5vw, 18px); height:min(5vw, 18px);}

	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list {top:calc(100% + min(2.22vw, 8px)); max-height:min(55vw, 200px); padding:min(1.67vw, 6px); border-radius:min(4.44vw, 16px); box-shadow:inset 0 min(0.28vw, 1px) 0 rgba(255,255,255,0.28), 0 min(5vw, 18px) min(12.22vw, 44px) rgba(0, 20, 45, 0.45);}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con.is-open.is-up > .drop_con > .drop_list {bottom:calc(100% + min(2.22vw, 8px));}
	/* 44px 은 손가락 최소 대상이라 vw 로 줄어들면 안 되고(아래 바닥),
	   태블릿 폭에서 2배로 부풀어도 안 된다(위 천장). 768px 에서 94px 까지 커졌었다. */
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li {min-height:clamp(44px, 12.22vw, 56px); padding:0 min(5vw, 18px); border-radius:min(3.33vw, 12px);}
	#main_con > .info03_con > .contents_con > .reserv_con > .contents_con > .td_con > .ti_con > .form_con .input_con > .select_con > .drop_con > .drop_list > ul > li > span {font-size:min(4.44vw, 16px); letter-spacing:max(-0.1vw, -0.4px);}

}
@media all and (max-width: 1024px) {
	.select_box > .option_list > ul > li {min-height:44px; display:flex; align-items:center; padding:0 2.78vw;}
	.select_box > .option_list,
	.mypage_sub_con .form_con .input_con > .select_box > .option_list {max-height:min(55vw, 200px);}
	.ds-drop-host > .drop_con > .drop_list {max-height:min(55vw, 200px); border-radius:min(3.33vw, 12px); padding:min(1.67vw, 6px);}
	.ds-drop-host > .drop_con > .drop_list > ul > li {min-height:44px; padding:0 min(3.33vw, 12px);}
	.ds-drop-host > .drop_con > .drop_list > ul > li > span {font-size:min(4.44vw, 16px);}
	.customer_inquiry_con > .contents_con > .list_con > ul > li > .list_div > .email_con > .drop_con {flex:1; width:100%;}
	.customer_inquiry_con > .contents_con > .list_con > ul > li > .list_div > .email_con > .drop_con > .drop_btn {width:100%; height:9.44vw; padding:0 2.78vw; font-size:4.44vw; letter-spacing:-0.11vw;}
	.ds-drop-host > .drop_con > .drop_btn > .drop_arrow {width:2.78vw; height:2.78vw;}
}

/* ========================================================================
 * 6. 줄바꿈 — 지시서 "서브 페이지 모든 문단은 단어 단위로" · "안내 문구는 단어 단위로"
 *    :where() 라 특정도 0 — 요소에 직접 건 규칙이 있으면 그쪽이 이긴다(아래 6-2 에서 따로 고친다).
 *    overflow-wrap 은 anywhere 가 아니라 break-word — anywhere 는 flex/grid 카드의 최소폭을 바꿔 찌그러뜨린다.
 * ===================================================================== */
:where(body.sub) {word-break:keep-all; overflow-wrap:break-word;}
input::placeholder, textarea::placeholder {word-break:keep-all;}
textarea {word-break:keep-all; overflow-wrap:break-word;}

/* 6-2. 고객센터 메인 공지 카드(2줄 말줄임)에 직접 걸려 있던 어절 끊김 규칙은 style.css·common_all.css 원래 자리에서 keep-all 로 고쳤다. */

/* ========================================================================
 * 7. 키보드 포커스 표시 — 코덱스 검수 미반영 항목
 *    style.css 전역의 outline:none 때문에 버튼·링크가 포커스돼도 보이지 않았다.
 *    :focus-visible 이라 마우스 클릭 때는 나타나지 않고 키보드(Tab) 이동 때만 보인다.
 * ===================================================================== */
/* [2026-10-14] 검수 "달력 선택 시 아웃라인" — 입력칸(input·textarea)은 뺐다. 글자 입력칸은 브라우저가 마우스로 눌러도
   :focus-visible 로 판정해서, 날짜를 고른 뒤 입력칸에 파란 사각 테두리가 남았다. 입력칸은 원래 디자인(테두리 없음) 그대로 둔다. */
:where(a, button, select, label, [tabindex]:not(input):not(textarea)):focus-visible {outline:2px solid #3B8FF6; outline-offset:2px;}
.check_date_con td[data-date]:focus-visible {outline:none;}
.check_date_con td[data-date]:focus-visible span {box-shadow:inset 0 0 0 2px #3B8FF6; border-radius:min(16px, 0.83vw);}

/* ========================================================================
 * 8. 마이페이지 상단 탭 가로 스크롤 (1024px 이하)
 *    [2026-10-14] 검수 ".nav_con > ul 스크롤바가 겹쳐서 안 보인다".
 *    원래 overflow-y:auto 라 가로·세로 모두 스크롤이 열려 있었고, 가로 스크롤바가 탭 밑줄·
 *    아래 테두리 위에 겹쳐(오버레이) 보이지 않았다. 강사 '나의 혜택' 탭(4개)은 320px 에서 107px
 *    넘쳐 현재 탭이 화면 밖에 있었다.
 *      · 가로만 스크롤 · 끝에서 페이지가 같이 밀리지 않게(overscroll-behavior)
 *      · 기본 스크롤바는 숨기고, 테두리 아래에 얇은 위치 표시줄을 따로 둔다(넘칠 때만)
 *      · 더 있는 쪽 가장자리를 흐린다 · 현재 탭을 가운데로 (js/ui.js ⑦)
 * ===================================================================== */
@media all and (max-width: 1024px) {
	.mypage_sub_con > .contents_con > .nav_con {position:relative;}
	.mypage_sub_con > .contents_con > .nav_con > ul {overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;}
	.mypage_sub_con > .contents_con > .nav_con > ul::-webkit-scrollbar {display:none;}
	.mypage_sub_con > .contents_con > .nav_con > ul > li {flex:0 0 auto;}
	.mypage_sub_con > .contents_con > .nav_con.is-more-r > ul {-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 10vw), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 10vw), transparent);}
	.mypage_sub_con > .contents_con > .nav_con.is-more-l > ul {-webkit-mask-image:linear-gradient(to left, #000 calc(100% - 10vw), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 10vw), transparent);}
	.mypage_sub_con > .contents_con > .nav_con.is-more-l.is-more-r > ul {-webkit-mask-image:linear-gradient(to right, transparent, #000 10vw, #000 calc(100% - 10vw), transparent); mask-image:linear-gradient(to right, transparent, #000 10vw, #000 calc(100% - 10vw), transparent);}
	/* [2026-10-14] 위치 표시줄은 숨김(검수 "바 굳이 안 나와도"). 다시 쓰려면 주석만 푼다.
	   .mypage_sub_con > .contents_con > .nav_con.is-scroll:before {content:''; position:absolute; left:0; right:0; bottom:-2.22vw; height:0.83vw; border-radius:0.83vw; background:#EFEFEF;}
	   .mypage_sub_con > .contents_con > .nav_con.is-scroll:after {content:''; position:absolute; left:var(--ds-bar-l, 0); width:var(--ds-bar-w, 0); bottom:-2.22vw; height:0.83vw; border-radius:0.83vw; background:#B9C7D8;} */
}

/* [2026-11-03] 달력 아래 확인 칸 — 고른 기간 + [확인] 버튼(고객 요청: 선택 후 확인으로 닫기) */
.date_con > .check_date_con > .contents_con > .confirm_con {clear:both; display:flex; align-items:center; justify-content:space-between; gap:min(16px, 0.83vw); margin:min(18px, 0.94vw) 0 0; padding:min(16px, 0.83vw) 0 0; border-top:1px solid #EBEBEB;}
.date_con > .check_date_con > .contents_con > .confirm_con > .sel_text {font-size:min(15px, 0.78vw); color:#00499F; font-weight:600; line-height:normal;}
.date_con > .check_date_con > .contents_con > .confirm_con > .confirm_btn {flex:none; min-width:min(96px, 5vw); height:min(42px, 2.19vw); padding:0 min(20px, 1.04vw); border:0; border-radius:min(100px, 5.21vw); background:#00499F; color:#FFF; font-size:min(15px, 0.78vw); font-weight:600; cursor:pointer; transition:background-color 0.25s ease;}
.date_con > .check_date_con > .contents_con > .confirm_con > .confirm_btn:disabled {background:#C4C4C4; cursor:default;}
@media (hover:hover) and (pointer:fine) {
	.date_con > .check_date_con > .contents_con > .confirm_con > .confirm_btn:not(:disabled):hover {background:#0B5FD8;}
}
@media all and (max-width:1024px) {
	.date_con > .check_date_con > .contents_con > .confirm_con {gap:min(3.33vw, 12px); margin:min(3.33vw, 12px) 0 0; padding:min(3.33vw, 12px) 0 0;}
	.date_con > .check_date_con > .contents_con > .confirm_con > .sel_text {font-size:min(3.61vw, 13px);}
	.date_con > .check_date_con > .contents_con > .confirm_con > .confirm_btn {min-width:min(22.22vw, 80px); height:min(10.56vw, 38px); padding:0 min(4.44vw, 16px); font-size:min(3.89vw, 14px);}
}