/* reset */
html { font-size: 62.5%; }
* { margin: 0;padding: 0;}
body { font-family: 'Pretendard', sans-serif; background: #F5F6F8; color: #191F2E; }
button { font-family: 'Pretendard', sans-serif; cursor: pointer; border: 0; background: none; padding: 0; }
input { font-family: 'Pretendard', sans-serif; }
ul, li { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
.container { max-width: 128rem; margin: 0 auto; padding: 0 4rem; }
.pc-only { display: block; }
.mo-only { display: none !important; }
/* web font */
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
font-weight: 100;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
font-weight: 900;
font-display: swap;
}
/* ===== header ===== */
.header { background: #fff; border-bottom: 1px solid #EAEAEA; }
.header-inner { max-width: 128rem; margin: 0 auto; height: 6.5rem; padding: 0 4rem; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 1rem; }
.logo img{width: 4rem;}
.logo-name { font-size: 2.2rem; font-weight: 800; color: #1A6CFF; }
.logo-desc { font-size: 1.4rem; font-weight: 500; color: #9AA3B2; margin-left: .4rem; }
.btn-quick { display: inline-flex; align-items: center; height: 4rem; padding: 0 2.4rem; background: #1A6CFF; color: #fff; font-size: 1.5rem; font-weight: 600; border-radius: 2.4rem; }
/* ===== board layout ===== */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 3.2rem; padding: 5rem 0 20rem; align-items: start; }
.hero-title { font-size: 3.6rem; font-weight: 700; color: #1B2333; }
.hero-sub { margin-top: 1.4rem; font-size: 1.8rem; font-weight: 400; color: #7A808F; }
/* ===== search card ===== */
.search-card { position: relative; margin-top: 3.2rem; background: #fff; border-radius: 2.4rem; padding: 3rem; box-shadow: 0 1rem 5rem rgba(31, 41, 71, .1); border: 1px solid #E5E2E2; }
/* type tabs */
.type-tabs { display: inline-flex; gap: .4rem; background: #F0F1F5; border-radius: 3rem; padding: .6rem; }
.type-tab { display: inline-flex; align-items: center; gap: 0.8rem; height: 4.6rem; padding: 0 2.2rem; border-radius: 3rem; font-size: 1.6rem; font-weight: 600; color: #9AA3B2; }
.type-tab.active { background: #fff; color: #1B2333; box-shadow: 0 .4rem 1rem rgba(31, 41, 71, .08); }
/* 탭 아이콘 이미지 자리 */
.type-tab-ico { width: 3rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: contain; }
.ico-bus { background-image: url('../img/mo_icon_1.png'); }
.ico-plane { background-image: url('../img/mo_icon_2.png'); }
/* route row */
.route-row { display: flex; align-items: center; gap: 1.4rem; margin-top: 2rem; }
.custom-select { position: relative; flex: 1; }
.select-trigger { width: 100%; height: 6rem; display: flex; align-items: center; gap: 1rem; padding: 0 2rem; background: #F4F6F9; border-radius: 3rem; font-size: 1.6rem; font-weight: 600; color: #1B2333; }
.select-pin { width: 2rem; height: 2rem; flex-shrink: 0; display: flex; }
.select-pin svg { width: 100%; height: 100%; fill: #2C5CFF; }
.select-text { flex: 1; text-align: left; }
.select-text.placeholder { color: #949494; font-weight: 500; }
.select-arrow { width: 2rem; height: 2rem; color: #757575; display: flex; }
.select-arrow svg { width: 100%; height: 100%; }
.swap-btn { width: 4.8rem; height: 4.8rem; flex-shrink: 0; border-radius: 50%; background: #F5F6F8;display: flex; align-items: center; justify-content: center; }
.swap-btn img { width: 2.2rem; height: 2.2rem; }
/* date */
.date-select { margin-top: 1.4rem; }
.date-trigger { height: 6rem; }
.date-trigger img{width: 1.8rem;}
/* search action */
.search-action { display: flex; gap: 1.4rem; margin-top: 1.8rem; }
.btn-search { flex: 1; height: 6.4rem; display: flex; align-items: center; justify-content: center; gap: 1.2rem; background: #1A6CFF; color: #fff; border-radius: 1.6rem; font-size: 1.8rem; font-weight: 600; }
.btn-search img { width: 2.5rem; height: 2.5rem; }
.btn-fav { width: 6.4rem; height: 6.4rem; flex-shrink: 0; border-radius: 1.6rem; background: #F5F6F8; display: flex; align-items: center; justify-content: center; }
.btn-fav img { width: 3rem; height: 3rem; }
/* recent routes */
.recent-routes { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.8rem; }
.route-chip { display: inline-flex; align-items: center; gap: .8rem; height: 4.6rem; padding: 0 1.6rem; background: #F4F6F9; border-radius: 1.2rem; font-size: 1.5rem; font-weight: 500; color: #808080; }
.route-chip img{width: 2.2rem;}
.chip-arrow { width: 1.8rem; height: 1.8rem; color: #9AA3B2; display: flex; }
.chip-arrow svg { width: 100%; height: 100%; }
.chip-close { width: 1.6rem; height: 1.6rem; margin-left: .2rem; color: #B5BCC9; display: flex; }
.chip-close svg { width: 100%; height: 100%; }
/* ===== select panel (dropdown) ===== */
.select-panel { position: absolute; top: calc(100% + 1rem); left: 0; width: 37rem; background: #fff; border-radius: 2rem; box-shadow: 0 2rem 4rem rgba(31, 41, 71, .14); z-index: 30; display: none;border: 1px solid #E5E2E2;overflow: hidden; }
.custom-select.open .select-panel { display: block; }
.custom-select[data-select="arrive"] .select-panel { left: auto; right: 0; }
.panel-search { position: relative; padding: 2rem 2rem 0 2rem; }
.panel-search input { width: 100%; height: 5.2rem; padding: 0 4.8rem 0 1.8rem; border: 0; border-radius: 1.4rem; font-size: 1.5rem; color: #1B2333;border: 1px solid #E5E2E2; }
.panel-search input::placeholder { color: #9AA3B2; }
.panel-search input:focus{outline: none;}
.panel-search-ico { position: absolute; top: 62%; right: 3.4rem; transform: translateY(-50%); width: 2rem; height: 2rem; color: #9AA3B2; display: flex; }
.panel-search-ico svg { width: 100%; height: 100%; }
.panel-recent { margin-top: 2rem; padding: 0 2rem;}
.panel-recent-title { font-size: 1.5rem; font-weight: 500; color: #3A4254; }
.panel-recent-chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.panel-chip { display: inline-flex; align-items: center; gap: .6rem; height: 3.8rem; padding: 0 1.2rem; background: #F4F4F4; border-radius: 3rem; font-size: 1.4rem; font-weight: 600; color: #3A4254; cursor: pointer; }
.panel-chip .chip-x { width: 1.8rem; height: 1.8rem; color: #333; display: flex; cursor: pointer; }
.panel-chip .chip-x svg { width: 100%; height: 100%; }
.panel-cols { display: grid; grid-template-columns: 1fr 1.4fr; margin-top: 1.8rem; border-top: 1px solid #EEF0F4; }
.panel-cols.single { grid-template-columns: 1fr; }
.panel-cols.single .terminal-list { padding-left: 0; border-left: 0; }
.terminal-item-empty { padding: 1.2rem 0; font-size: 1.4rem; color: #B5BCC9; }
.region-list { padding-right: 1rem;background: #F8F9FB;}
.region-item { padding: 1.2rem 2rem; font-size: 1.6rem; color: #6B7484; border-radius: 1rem; cursor: pointer; }
.region-item.active { color: #2C5CFF;}
.terminal-list { padding-left: 1.6rem; max-height: 28rem; overflow-y: auto; }
.terminal-item { padding: 1.2rem 2rem; font-size: 1.6rem; color: #3A4254; cursor: pointer; }
.terminal-item.active { color: #2C5CFF; }
/* ===== calendar ===== */
.calendar-panel { width: 34rem; padding: 2.4rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-title { font-size: 2rem; font-weight: 500; color: #1B2333; }
.cal-nav { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; color: #333; border-radius: .8rem; }
.cal-nav svg { width: 3rem; height: 3rem; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 2rem; }
.cal-week span { text-align: center; font-size: 1.8rem; color: #333; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-top: 1.2rem; }
.cal-day { height: 4.4rem; width: 4.4rem;display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 500; color: #1B2333; border-radius: 50%; }
.cal-day.muted { color: #C2C8D2; }
.cal-day.disabled { color: #D6DAE1; cursor: not-allowed; }
.cal-day.today { color: #1A6CFF; }
.cal-day.selected { background: #1A6CFF; color: #fff; }
.cal-confirm { width: 100%; height: 5.6rem; margin-top: 2rem; background: #1A6CFF; color: #fff; border-radius: 1.4rem; font-size: 1.6rem; font-weight: 700; }
/* ===== empty state ===== */
.empty-state { margin-top: 5rem; text-align: center; }
.empty-img { display: inline-block; width: 7rem; background-repeat: no-repeat; background-position: center; background-size: contain; }
.empty-text { margin-top: 2rem; font-size: 1.7rem; font-weight: 500; line-height: 1.6; color: #9AA3B2; }
/* ===== 결과 헤더 ===== */
.result-header { display: flex; align-items: center; gap: 1rem; font-size: 2rem; font-weight: 600; color: #1B2333; margin: 3.2rem 0 3rem; margin-left: 1rem;}
.result-date { margin-left: auto; font-size: 2rem; font-weight: 00; color: #9AA3B2; }
.result-count { color: #666; font-size: 1.8rem;font-weight: 500;}
/* ===== 시간표 카드 ===== */
.schedule-list { display: flex; flex-direction: column; gap: 2rem; }
.schedule-card { display: flex; align-items: center; gap: 2rem; background: #fff; border-radius: 1.6rem; padding: 2.2rem 2.4rem; box-shadow: 0 .4rem 1.6rem rgba(31,41,71,.06);border: 1px solid #ddd; }
.sc-left { flex-shrink: 0; text-align: center; min-width: 7rem; }
.sc-depart-time { font-size: 2.6rem; font-weight: 600; color: #1B2333; }
.sc-place { font-size: 1.5rem; font-weight: 500; color: #9AA3B2; margin-top: .4rem; }
.sc-right-time{text-align: center;}
.sc-middle { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 10rem; }
.sc-duration { font-size: 1.4rem; font-weight: 500; color: #9AA3B2; }
.sc-line { display: flex; align-items: center; gap: .7rem; width: 100%; }
.sc-dot { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; }
.sc-dot.start { background: #1A6CFF; }
.sc-dot.end { background: #004D40; }
.sc-arrow { flex: 1; height: .2rem; background: #7A808F; position: relative; }
.sc-arrow::after { content: ''; position: absolute; right: -.4rem; top: 50%; transform: translateY(-50%); border-left: .6rem solid #7A808F; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; }
.sc-arrive-time { font-size: 2.6rem; font-weight: 600; color: #1B2333; }
.sc-arrive-place { font-size: 1.3rem; font-weight: 600; color: #9AA3B2; }
.sc-right { flex: 1; display: flex; flex-direction: column; gap: 2rem; align-items: flex-end; }
.sc-fares { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
.sc-fares span { font-size: 1.8rem; font-weight: 600; color: #333; }
.sc-dot-sep { color: #C2C8D2; }
.sc-company-row { display: flex; align-items: center; gap: 1rem; }
.sc-company { font-size: 1.4rem; font-weight: 600; color: #1A6CFF;background: #EEF2FF; padding: 0.5rem 1rem;border-radius: 3rem;}
/* ===== sidebar ===== */
.board-side { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 2rem; align-self: start; }
.side-card { background: #fff; border-radius: 2rem; padding: 2.4rem; box-shadow: 0 1rem 3rem rgba(31, 41, 71, .05); position: relative;border: 1px solid #E5E2E2;}
/* fare card */
.fare-top { display: flex; align-items: flex-start; justify-content: space-between; }
.fare-label { font-size: 1.5rem; font-weight: 600; color: #6B7484; }
.fare-ico { width: 6.5rem; height: 6.5rem; border-radius: 50%; background: #E8F0FF; background-repeat: no-repeat; background-position: center; background-size: 3.5rem;background-image: url(../img/web_icon_14.png);position: absolute;right: 1.5rem;top: 1.5rem; }
.fare-diff { margin-top: .8rem; font-size: 1.4rem; font-weight: 500; color: #9AA3B2; }
.fare-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; font-size: 1.5rem; font-weight: 700; color: #2C5CFF; }
.fare-link svg { width: 1.6rem; height: 1.6rem; }
/* fare-card 빈 상태 */
.fare-amount { margin-top: 1.6rem; font-size: 2.5rem; font-weight: 700; color: #1B2333; line-height: 1.3; }
.fare-amount span { font-size: 1.8rem; font-weight: 700; margin-left: .4rem; }
/* fare modal overlay */
.fare-modal-overlay { position: fixed; inset: 0; background: rgba(25, 31, 46, .45); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .22s; }
.fare-modal-overlay.open { opacity: 1; pointer-events: auto; }
/* fare modal */
.fare-modal-overlay { position: fixed; inset: 0; background: rgba(25, 31, 46, .45); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .22s; }
.fare-modal-overlay.open { opacity: 1; pointer-events: auto; }
.fare-modal { width: 54rem; background: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0.3rem 0.3rem 2rem rgba(31, 41, 71, .5); transform: translateY(1.6rem); transition: transform .22s; }
.fare-modal-overlay.open .fare-modal { transform: translateY(0); }
/* 회색 헤더 */
.fare-modal-header { background: #F4F6F9; padding: 2.5rem; }
.fare-modal-head { display: flex; align-items: center; justify-content: space-between; }
.fare-modal-label { font-size: 1.5rem; font-weight: 600; color: #6B7484; }
.fare-modal-close { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; color: #202020; border-radius: .8rem; }
.fare-modal-close svg { width: 3rem; height: 3rem; }
.fare-modal-total { display: flex; align-items: baseline; gap: 1rem; margin-top: 1.6rem; }
.fare-modal-bus-ico { width: 5rem; height: 5rem; flex-shrink: 0; border-radius: 1.2rem; background-repeat: no-repeat; background-position: center; background-size: 4.5rem; align-self: center; background-image: url(../img/web_icon_36.png); }
.fare-modal-sum { font-size: 4rem; font-weight: 600; color: #1B2333; }
.fare-modal-won { font-size: 2.5rem; font-weight: 600; color: #1B2333; }
.fare-modal-spent { font-size: 2.5rem; font-weight: 500; color: #838383; }
/* 흰색 바디 */
.fare-modal-body { background: #fff; padding: 0 2.5rem 2.5rem; }
/* 탭 + 인풋 한 줄 */
.fare-modal-input-wrap { display: flex; align-items: center; gap: 1.2rem; padding: 2rem 0 1.6rem; border-bottom: 1px solid #EEF0F4; }
.fare-modal-tabs { display: flex; gap: 0; flex-shrink: 0; flex: 1;}
.fare-modal-tabs .bar{font-size: 1.5rem;line-height: 3rem;color: #ccc;margin: 0 0.7rem;}
.fare-tab { height: 3rem; padding: 0 0.5rem; font-size: 1.5rem; font-weight: 500; color: #474747; background: none; margin-bottom: -2px; }
.fare-tab.active { color: #2C5CFF; border-bottom: 2px solid #2C5CFF; }
.fare-modal-input-row { display: flex; gap: .8rem;flex: 2;}
.fare-input-price { flex: 1; width: 4rem;flex-shrink: 0; height: 3.6rem; border: 0; font-size: 1.4rem; font-family: 'Pretendard', sans-serif; color: #1B2333; border-bottom: 2px solid #ddd;}
.fare-input-memo { flex: 1; width: 4rem;height: 3.6rem; border: 0; font-size: 1.5rem; font-family: 'Pretendard', sans-serif; color: #1B2333;border-bottom: 2px solid #ddd; }
.fare-input-price::placeholder,
.fare-input-memo::placeholder { color: #414141; }
.fare-input-price:focus,
.fare-input-memo:focus { outline: none; }
.fare-input-price::-webkit-inner-spin-button,
.fare-input-price::-webkit-outer-spin-button { -webkit-appearance: none; }
.fare-input-add { width: 4rem; height: 4rem; flex-shrink: 0; background: #CCDEFF; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; }
.fare-input-add svg { width: 2.2rem; height: 2.2rem; }
/* 리스트 */
.fare-list { display: flex; flex-direction: column; gap: .2rem; max-height: 24rem; overflow-y: auto; margin-top: .4rem; }
.fare-list-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 0;}
.fare-list-date { font-size: 1.4rem; font-weight: 400; color: #9AA3B2; flex-shrink: 0; }
.fare-list-badge { flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 50%; padding: 0; }
.fare-list-badge.시외 { background: #76A7FF; }
.fare-list-badge.공항 { background: #0FD5B5; }
.fare-list-type{font-size: 1.5rem;}
.fare-list-memo { flex: 1; font-size: 1.5rem; }
.fare-list-price { font-size: 1.5rem; font-weight: 700; color: #1B2333; flex-shrink: 0; }
.fare-list-del { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #C2C8D2; }
.fare-list-del svg { width: 1.6rem; height: 1.6rem; }
/* tip card */
.tip-head { display: flex; align-items: center; justify-content: space-between; }
.tip-title { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; font-weight: 700; color: #6B7484; }
.tip-bulb { width: 2rem; height: 2rem; display: flex; }
.tip-bulb img { width: 100%; height: 100%; object-fit: contain; }
.tip-dots { display: flex; gap: .5rem; }
.tip-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: #D7DCE5; transition: background .2s; }
.tip-dots i.on { background: #2C5CFF; }
.tip-slides { margin-top: 2rem; }
.tip-slide { display: none; }
.tip-slide.active { display: block; }
.tip-body { width: 100%; display: flex; align-items: center; gap: 1.4rem; text-align: left; }
.tip-bag { width: 6.5rem; height: 6.5rem; flex-shrink: 0; border-radius: 50%; background: #E8F0FF; background-repeat: no-repeat; background-position: center; background-size: 2.5rem; background-image: url(../img/web_icon_10.png);}
.tip-slide:nth-child(2) .tip-bag{background-image: url(../img/web_icon_40.png);}
.tip-slide:nth-child(3) .tip-bag{background-image: url(../img/web_icon_39.png);}
.tip-texts { flex: 1; }
.tip-q { font-size: 1.8rem;font-weight: 500; color: #1B2333; }
.tip-desc { margin-top: .4rem; font-size: 1.5rem; font-weight: 500; color: #9AA3B2; }
.tip-chevron { width: 2rem; height: 2rem; flex-shrink: 0; color: #333; display: flex; transition: transform .35s ease; }
.tip-chevron svg { width: 100%; height: 100%; }
.tip-slide.open .tip-chevron { transform: rotate(180deg); }
/* 아코디언 */
.tip-detail { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.tip-detail-inner { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid #EEF0F4; }
.tip-list { display: flex; flex-direction: column; gap: 1.8rem; }
.tip-item { position: relative; padding-left: 1.6rem; }
.tip-item::before { content: ''; position: absolute; left: .2rem; top: .7rem; width: .5rem; height: .5rem; border-radius: 50%; background: #1B2333; }
.tip-item-title { font-size: 1.5rem; font-weight: 500; color: #1B2333; line-height: 1.5; }
.tip-item-desc { margin-top: .6rem; font-size: 1.4rem; font-weight: 500; color: #9AA3B2; line-height: 1.65; }
.tip-bullet-list { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.tip-bullet-list li { display: flex; gap: .6rem; font-size: 1.35rem; font-weight: 500; color: #6B7484; line-height: 1.6; }
.tip-bullet-list li::before { content: 'ㆍ'; flex-shrink: 0; }
/* 슬라이드3 그룹형 */
.tip-group-title { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.tip-group-title span { font-size: 1.3rem; font-weight: 600; }
.tip-group-title.danger { color: #E5484D; }
.tip-group-title.safe { color: #1AA179; }
.tip-sublist { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.tip-sublist li { position: relative; padding-left: 1.4rem; font-size: 1.35rem; font-weight: 500; color: #6B7484; line-height: 1.6; }
.tip-sublist li::before { content: ''; position: absolute; left: .3rem; top: .9rem; width: .4rem; height: .4rem; border-radius: 50%; background: #C2C8D2; }
.tip-nav { display: flex; justify-content: space-between; margin-top: 2.4rem; }
.tip-nav button { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.5rem; font-weight: 500; color: #6B7484; }
.tip-nav button img { width: 2.5rem;height: 3rem; }
/* ===== quiz ===== */
.quiz-wrap { display: flex; flex-direction: column; gap: 0; }
/* 문제 카드 공통 */
.quiz-card { position: relative; overflow: hidden; padding: 2.6rem; border-radius: 2rem; color: #fff; cursor: pointer;height: 22.2rem; box-sizing: border-box;}
.quiz-card-top { display: flex; align-items: center; justify-content: space-between; }
.quiz-step { font-size: 1.5rem;}
/* 구슬 */
.quiz-dots { display: flex; gap: .5rem; }
.quiz-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(255,255,255,.35); }
.quiz-dots i.on { background: #fff; width: 2rem;border-radius: 0.5rem;}
.quiz-question { margin-top: 1.4rem; font-size: 2rem; font-weight: 600;}
.quiz-hint { display: inline-flex; align-items: center; height: 3.4rem; padding: 0 1.4rem; margin-top: 1rem; background: rgba(255,255,255,.3); border-radius: 3rem; font-size: 1.4rem; font-weight: 600; }
.quiz-action { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; font-size: 1.5rem;color: #fff; }
.quiz-action img { width: 2.5rem; height: 3rem; }
.quiz-doc { position: absolute; right: 2.2rem; bottom: 2.2rem; width: 7rem; height: 7rem; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../img/web_icon_17.png);}
.quiz-slide:nth-child(2) .quiz-doc{background-image: url(../img/web_icon_42.png);}
.quiz-slide:nth-child(3) .quiz-doc{background-image: url(../img/web_icon_43.png);}
.quiz-slide:nth-child(4) .quiz-doc{background-image: url(../img/web_icon_44.png);}
.quiz-slide:nth-child(5) .quiz-doc{background-image: url(../img/web_icon_45.png);}
/* 정답 카드 */
.quiz-answer { position: relative; overflow: hidden; padding: 2.6rem; border-radius: 2rem; color: #fff; display: none;height: 22.2rem;box-sizing: border-box; }
.quiz-answer-close { display: flex; align-items: center; justify-content: center; width:4rem; height:4rem; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; }
.quiz-answer-close img { width: 2.5rem; height: 2.5rem; }
.quiz-answer-title { margin-top: 1.6rem; font-size: 2.5rem; font-weight: 700; }
.quiz-answer-desc { margin-top: 1.2rem; font-size: 1.5rem; font-weight: 500; line-height: 1.65; }
/* 슬라이드 */
.quiz-slide { display: none; }
.quiz-slide.active { display: block; perspective: 1200px; }
/* 카드 플립 (앞면=문제, 뒷면=정답) */
.quiz-flip { position: relative; width: 100%; height: 22.2rem; transform-style: preserve-3d; transition: transform .6s; }
.quiz-flip.flipped { transform: rotateY(180deg); }
.quiz-flip > .quiz-card,
.quiz-flip > .quiz-answer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.quiz-flip > .quiz-answer { display: block; transform: rotateY(180deg); }
/* 보이는 면에만 클릭이 가도록 (뒷면이 클릭 가로채는 것 방지) */
.quiz-flip > .quiz-answer { pointer-events: none; }
.quiz-flip.flipped > .quiz-card { pointer-events: none; }
.quiz-flip.flipped > .quiz-answer { pointer-events: auto; }
/* 문제카드 배경색 */
.quiz-slide[data-color="blue"] .quiz-card { background: linear-gradient(135deg, #1A6CFF, #104199); }
.quiz-slide[data-color="purple"] .quiz-card { background: linear-gradient(135deg, #7938E7, #42178B); }
.quiz-slide[data-color="indigo"] .quiz-card { background: linear-gradient(135deg, #059367, #076347); }
.quiz-slide[data-color="rose"] .quiz-card { background: linear-gradient(135deg, #03669D, #00456C); }
.quiz-slide[data-color="amber"] .quiz-card { background: linear-gradient(135deg, #AF5009, #713000); }
/* 정답카드 배경색 */
.quiz-answer[data-color="green"] { background: linear-gradient(135deg, #0DCFAE, #09AF93); }
.quiz-answer[data-color="orange"] { background: linear-gradient(135deg, #F39C0B, #DA6600); }
.quiz-answer[data-color="teal"] { background: linear-gradient(135deg, #397FF4, #0345B3); }
.quiz-answer[data-color="sky"] { background: linear-gradient(135deg, #DD1D47, #8E001F); }
.quiz-answer[data-color="lime"] { background: linear-gradient(135deg, #6A26D2, #260060); }
/* 퀴즈 페이저 */
.quiz-pager { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem .4rem 0; }
.quiz-pager button { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.4rem; font-weight: 600; color: #6B7484; }
.quiz-pager img { width: 2.5rem; height: 3rem; }
.quiz-page { font-size: 1.4rem; font-weight: 700; color: #3A4254; }
/* 모바일 바텀시트 - 데스크탑에서 숨김 */
.mo-sheet-overlay { display: none; }
.mo-sheet-top { display: none; }
/* 모바일 카드 하단 영역 + 페이지네이션 - 데스크탑에서 숨김 */
.sc-mo-bottom { display: none; }
.sc-pagination { display: none; }
/* ===== responsive ===== */
@media (max-width: 1024px) {
.board { grid-template-columns: 1fr; }
.select-panel,
.custom-select[data-select="arrive"] .select-panel { left: 0; right: auto; width: 100%; }
}
/* ===== mobile (768px 이하) ===== */
@media (max-width: 768px) {
.pc-only { display: none; }
.mo-only { display: block !important; }
html { font-size: 62.5%; }
.container { padding: 0 2rem; }
/* 헤더 */
.header{box-shadow: 0px 1px 10px rgba(0,0,0,0.1);}
.header-inner { height: 7rem; padding: 0 2rem; }
.logo img { width: 3.2rem; }
.logo-name { font-size: 1.8rem; }
.btn-quick { height: 3.6rem; padding: 0 1.6rem; font-size: 1.4rem; background: #1A6CFF;box-shadow: 0px 0px 5px rgba(0,0,0,0.3);}
/* 보드 */
.board { grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 0 6rem; }
.hero-title { font-size: 2.3rem; }
.hero-sub { font-size: 1.5rem; margin-top: 1rem; }
/* 검색 카드 */
.search-card { padding: 0; margin-top: 2rem; background: none;border: none;box-shadow: none;}
/* 탭 */
.type-tabs {justify-content: center; border-radius: 1.5rem;padding: 0.6rem;width: 100%;box-sizing: border-box;}
.type-tab { flex: 1; justify-content: center; font-size: 1.7rem; height: 4.8rem; border-radius: 1.3rem;}
.type-tab.active{background:#1A6CFF;color: #fff;box-shadow: 0px 0px 5px rgba(0,0,0,0.3);}
/* 출발/도착 route-row → 세로 */
.white-wrap{background: #fff;padding: 1rem 2rem;box-shadow: 0px 0px 10px rgba(0,0,0,0.1);border-radius: 2rem;margin-top: 2rem;}
.route-row { flex-direction: column; gap: 0; position: relative; border-radius: 1.6rem; overflow: visible; margin-top: 0;}
.custom-select { width: 100%; }
.select-trigger { height: 6rem; background: transparent; border-radius: 0; padding: 0;padding-right: 4rem;font-size: 1.8rem;}
.custom-select{border-bottom: 1px solid #ddd;}
.custom-select[data-select="arrive"] .select-trigger { border-bottom: none; }
/* 스왑버튼 - 출발지 오른쪽 absolute */
.swap-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width:4rem; height:4rem; z-index: 5; }
.swap-btn img { width:2.3rem; height:2.3rem; }
/* 날짜 */
.date-select { margin-top: 0;border: none; }
/* 조회 버튼 */
.search-action { margin-top: 1.4rem; gap: 1rem; }
.btn-search { height: 5.6rem; font-size: 1.6rem; border-radius: 1.4rem; }
.btn-fav { width: 5.6rem; height: 5.6rem; border-radius: 1.4rem; }
/* 셀렉트 패널 */
.select-panel { width: 100%; left: 0; right: 0; }
.custom-select[data-select="arrive"] .select-panel { left: 0; right: auto; }
/* 달력 */
.calendar-panel { width: 100%; }
/* 결과 헤더 */
.result-header { font-size: 1.6rem; margin: 2rem 0 1.6rem;gap: 0.5rem; }
.result-date { font-size: 1.5rem; }
.result-count { font-size: 1.4rem; }
/* 시간표 카드 - 모바일 그리드 레이아웃 */
.schedule-list { gap: 1.4rem; }
.schedule-card {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
padding: 0;
gap: 0;
overflow: hidden;
}
/* 상단 3열: 출발 | 노선 | 도착 */
.sc-left { grid-column: 1; grid-row: 1; text-align: left; padding: 2rem 1.4rem 1.6rem 2rem; }
.sc-middle { grid-column: 2; grid-row: 1; align-self: center; padding: 2rem 1rem 1.6rem; }
.sc-right-time { grid-column: 3; grid-row: 1; text-align: right; padding: 2rem 2rem 1.6rem 1.4rem; }
.sc-depart-time { font-size: 2.6rem; }
.sc-arrive-time { font-size: 2.6rem; }
.sc-middle { min-width: 7rem; }
/* PC 전용 영역 숨김 */
.sc-right { display: none; }
/* 모바일 하단 영역 */
.sc-mo-bottom {
grid-column: 1 / -1; grid-row: 2;
display: flex; align-items: flex-start; justify-content: space-between;
padding: 1.4rem 2rem 1.8rem;
border-top: 1px solid #EEF0F4;
gap: 1.2rem;
}
.sc-mo-meta { display: flex; flex-direction: column; gap: .6rem; }
.sc-mo-grade {
display: inline-block; align-self: flex-start;
padding: .4rem 1.2rem; border-radius: 3rem;
background: #EEF2FF; color: #2C5CFF;
font-size: 1.4rem; font-weight: 600;
}
.sc-mo-company { font-size: 1.4rem; font-weight: 600; color: #1A6CFF; background: #EEF2FF;border-radius: 3rem;padding: 0.5rem 1rem;}
.sc-mo-fares { display: flex; flex-direction: column; gap: .5rem; text-align: right; }
.sc-mo-fare { font-size: 1.5rem; color: #3A4254; }
.sc-mo-fare em { font-style: normal; color: #9AA3B2; }
.sc-mo-fare strong { font-weight: 700; color: #1B2333; }
/* 모바일 페이지네이션 */
.sc-pagination {
display: flex; align-items: center; justify-content: center;
margin-top: 2rem; gap: .8rem;
}
.sc-pg-arrow {
width: 4rem; height: 4rem; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 1rem; border: 1px solid #DDE1E9;
background: #fff; color: #3A4254;
}
.sc-pg-arrow svg { width: 1.8rem; height: 1.8rem; }
.sc-pg-arrow:disabled { opacity: .35; cursor: not-allowed; }
.sc-pg-nums { display: flex; gap: .5rem; }
.sc-pg-num {
width: 4rem; height: 4rem;
display: flex; align-items: center; justify-content: center;
border-radius: 1rem; border: 1px solid #DDE1E9;
background: #fff; font-size: 1.5rem; font-weight: 600; color: #3A4254;
}
.sc-pg-num.active { background: #1A6CFF; border-color: #1A6CFF; color: #fff; }
/* empty-state 모바일에서 숨김 */
.empty-state { display: none !important; }
/* 사이드바 → 세로로 그냥 쌓임 */
.board-side { position: static; }
/* 퀴즈 페이저 */
.quiz-pager { padding: 1.2rem 0 0; }
/* index 모바일: 퀴즈 페이저 삭제 (카드 탭 시 quiz.php로 이동) */
.board-side .quiz-pager { display: none; }
/* 요금 모달 */
.fare-modal { width: calc(100% - 4rem); margin: 0 2rem; }
/* ---- 모바일 바텀시트 ---- */
/* 딤 오버레이 */
.mo-sheet-overlay {
display: block;
position: fixed; inset: 0;
background: rgba(25, 31, 46, .5);
z-index: 200;
opacity: 0; pointer-events: none;
transition: opacity .25s;
}
.mo-sheet-overlay.open { opacity: 1; pointer-events: auto; }
/* 바디 스크롤 잠금 */
body.mo-sheet-open { overflow: hidden; }
/* select-panel → 바텀시트 */
.select-panel {
display: block !important;
position: fixed !important;
top: auto !important;
bottom: 0; left: 0; right: 0;
width: 100% !important;
max-height: 85vh;
border-radius: 2rem 2rem 0 0 !important;
z-index: 300;
overflow-y: auto;
transform: translateY(105%);
pointer-events: none;
transition: transform .32s cubic-bezier(.32, .72, 0, 1);
box-shadow: 0 -0.4rem 2.4rem rgba(31, 41, 71, .13);
border: none !important;
padding-bottom: 3.2rem;
}
.custom-select.open .select-panel {
transform: translateY(0);
pointer-events: auto;
box-shadow: 0px -2px 10px rgba(0,0,0,0.3);
}
.custom-select[data-select="arrive"] .select-panel { left: 0; right: 0; }
/* 핸들 + 타이틀 */
.mo-sheet-top {
display: flex; flex-direction: column; align-items: center;
padding: 1.4rem 2.4rem 0; gap: 1.6rem;
}
.mo-sheet-handle {
width: 4rem; height: .4rem;
background: #D1D6E0; border-radius: 2rem;
}
.mo-sheet-title {
align-self: flex-start;
font-size: 2rem; font-weight: 700; color: #1B2333;
}
/* 패널 검색창 */
.panel-search { padding: 1.6rem 2rem 0; }
.panel-search input {
background: #F4F6F9;
border: none !important;
border-radius: 1.4rem !important;
padding-left: 4.4rem !important;
padding-right: 1.6rem !important;
height: 5rem;
}
.panel-search-ico { left: 3.4rem; right: auto; top: 56%; }
/* 터미널 리스트 높이 제한 (달력과 비슷한 높이, 스크롤 가능) */
.terminal-list { max-height: 35vh; overflow-y: auto; }
/* 캘린더 패널 */
.calendar-panel {
max-height: 92vh !important;
padding: 0;
padding-bottom: 2rem;
display: flex !important;
flex-direction: column;
}
.calendar-panel .cal-head { padding: 1.6rem 2.4rem 0; }
.calendar-panel .cal-week { padding: 0 2.4rem; }
.calendar-panel .cal-days { padding: 0 2.4rem; }
.cal-confirm {
margin: 1.6rem 2.4rem 0 !important;
width: calc(100% - 4.8rem) !important;
border-radius: 1.6rem !important;
}
/* index.php 모바일: 퀴즈카드 축소 (클릭 시 quiz.php로 이동하므로) */
.board-side .quiz-action{display: inline-flex;}
.board-side .quiz-card > span{font-size: 1.4rem;}
.board-side .quiz-card {padding:1.5rem;height: auto !important;}
.board-side .quiz-doc{width: 4rem;height: 4rem;}
.board-side .quiz-hint{margin-right: 1rem;}
.board-side .quiz-flip{height: 10rem;}
/* quiz.php 모바일: PC와 동일하게 카드 전체 크기 유지 */
.quiz-page-mode .quiz-card { padding: 2.6rem; height: 22.2rem !important; }
.quiz-page-mode .quiz-flip { height: 22.2rem !important; }
.quiz-page-mode .quiz-doc { width: 7rem !important; height: 7rem !important; }
.quiz-page-mode .quiz-hint { margin-right: 0; }
.quiz-page-mode .quiz-pager { display: flex; }
.quiz-answer-title{font-size: 2.2rem;}
}
/* 모바일 요금카드 */
.fare-card-mo { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; }
.fare-card-mo-left { display: flex; align-items: center; gap: 1.6rem; }
.fare-ico-mo { width: 5.5rem; height: 5.5rem; border-radius: 1.5rem; background: #E8F0FF url(../img/web_icon_14.png) no-repeat center / 3rem; flex-shrink: 0; }
.fare-label-mo { font-size: 1.4rem; font-weight: 500; color: #6B7484; }
.fare-amount-mo { font-size: 1.8rem; font-weight: 700; color: #1B2333; margin-top: .4rem; line-height: 1.3; }
.fare-link-mo { font-size: 1.4rem; font-weight: 600; color: #9AA3B2; margin-top: .4rem; }
.fare-arrow-mo { width: 2rem; height: 2rem; flex-shrink: 0; color: #C2C8D2; position: absolute;right: 2.2rem;top: calc(50% - 1rem); }
/* 모바일 꿀팁카드 */
.tip-card-mo { display: flex; align-items: center; }
.tip-card-mo-inner { display: flex; align-items: center; gap: 1.6rem; width: 100%; }
.tip-bag-mo { width: 5.5rem; height: 5.5rem; flex-shrink: 0; border-radius: 1.5rem; background: #E8F0FF url(../img/web_icon_10.png) no-repeat center / 2.5rem; }
.tip-mo-texts { flex: 1; }
.tip-mo-label { font-size: 1.4rem; font-weight: 600; color: #F59E0B; }
.tip-mo-q { font-size: 1.8rem; font-weight: 600; color: #1B2333; margin-top: .4rem; }
.tip-mo-desc { font-size: 1.4rem; font-weight: 500; color: #9AA3B2; margin-top: .2rem; }
.tip-arrow-mo { width: 2rem; height: 2rem; flex-shrink: 0; color: #C2C8D2; }
/* ===== 버스 요금 메모장 페이지 (모바일) ===== */
/* 기존 PC 모달 클래스(.fare-modal-*, .fare-tab, .fare-input-*, .fare-list-*)를 그대로 재사용 */
.fare-page { max-width: 60rem; margin: 0 auto; padding: 2rem 0 6rem; }
.fare-page-back { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 0 1.6rem -0.8rem; color: #1B2333; }
.fare-page-back svg { width: 2.8rem; height: 2.8rem; }
.fare-page-label { margin-bottom: 0; }
.fare-page-total { margin-top: 1.2rem; }
/* 공통 흰색 카드 */
.fare-page-card { background: #fff; border-radius: 1.6rem; box-shadow: 0 0 1.6rem rgba(31, 41, 71, .15); }
/* 입력 카드 */
.fare-page-input-card { margin-top: 2.4rem; padding: 0 2rem; }
.fare-page-input-card .fare-modal-input-wrap { border-bottom: 0;padding: 1rem 0 1.6rem;gap: 0;}
/* 지출 내역 */
.fare-page-list-title { margin: 2.4rem 0 1.2rem; font-size: 1.5rem; font-weight: 600; color: #6B7484; }
.fare-page-list-card { padding: 0 2rem; }
.fare-page-list-card .fare-list { max-height: none; overflow: visible; margin-top: 0; }
.fare-page-list-card .fare-list-item + .fare-list-item { border-top: 1px solid #EEF0F4; }
.fare-list-empty { padding: 3.2rem 0; text-align: center; font-size: 1.5rem; color: #9AA3B2; }
.fare-modal-bus-ico{background-size: 3rem;width: 4rem;height: 4rem;}
.fare-modal-sum{font-size: 3rem;}
.fare-modal-won{font-size: 2rem;}
.fare-modal-spent{font-size: 2rem;}
.fare-tab{font-size: 1.3rem;padding: 0 0.2rem;}
.fare-input-add{width: 3rem;height: 3rem;}
.fare-modal-input-row{align-items: center;}
.fare-input-price{font-size: 1.3rem;}
.fare-input-memo{font-size: 1.3rem;}
/* ===== 버스 꿀팁 페이지 (모바일) ===== */
/* 기존 PC 꿀팁 클래스(.tip-slide, .tip-body, .tip-detail, .tip-list ...)를 그대로 재사용 */
.tip-page { max-width: 60rem; margin: 0 auto; padding: 2rem 0 6rem; }
.tip-page-back { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 0 1.6rem -0.8rem; color: #1B2333; }
.tip-page-back svg { width: 2.8rem; height: 2.8rem; }
/* 카드별로 항상 펼쳐서 세로로 쌓기 */
.tip-page-slides { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.tip-page-slides .tip-slide { display: block; background: #fff; border: 1px solid #E5E2E2; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 0 1rem rgba(31, 41, 71, .1); }
/* ===== 버스 상식 퀴즈 페이지 ===== */
/* 기존 PC 퀴즈 클래스(.quiz-wrap, .quiz-card, .quiz-flip, .quiz-pager ...)를 그대로 재사용 */
.quiz-page-wrap { max-width: 60rem; margin: 0 auto; padding: 2rem 0 6rem; }
.quiz-page-back { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 0 1.6rem -0.8rem; color: #1B2333; }
.quiz-page-back svg { width: 2.8rem; height: 2.8rem; }
.quiz-page-wrap .quiz-wrap { margin-top: 2.4rem; }
/* 카드 위 진행 점 */
.quiz-page-dots { display: flex; justify-content: center; gap: .6rem; margin-top: 2.8rem; }
.quiz-page-dots i { width: .8rem; height: .8rem; border-radius: 50%; background: #C5D3F5; transition: width .25s ease, background .25s ease; }
.quiz-page-dots i.on { width: 2.2rem; border-radius: .4rem; background: #2C5CFF; }
.quiz-page-dots + .quiz-wrap { margin-top: 1.6rem; }