/*
 * 노선 카드 — 접었다 펼치는 노선 목록 (GL-2417 / #497)
 *
 * 같은 페이지의 FAQ(css/common/faq.css)와 같은 토글 규약을 쓴다: 기본 접힘,
 * 머리는 <button aria-expanded>, 펼침은 .is-open 클래스로만 제어한다.
 * 자바스크립트로 목록을 그리지 않으므로 접혀 있어도 본문이 문서에 남아 있다 —
 * 크롤러가 노선·시간·가격을 읽을 수 있어야 한다는 것이 이 화면의 목적 절반이다.
 *
 * 카드 머리의 출발/도착 표기는 기존 .service-item(koreaDelivery/index.html) 마크업을
 * 그대로 쓴다. 아이콘·화살표·글자 크기가 이미 이 페이지의 언어라 새로 만들지 않는다.
 */

/* 제목 바로 아래 한 줄 — 카드가 눌러서 펼치는 것임을 알린다. */
.gl-route-hint {
    margin: -12px 0 16px;
    font-size: 13px;
    color: #6D6D6D;
    line-height: 1.5;
}

/* 묶음 제목(서울 / 도시 간). 문서 개요상 섹션 제목(h2)과 카드 안 제목(h4) 사이의 h3 다.
   #566: 작은 보라 라벨이 잘 안 보인다는 의견에 보라 막대 + 굵은 제목 + 회색 보조문구로 키웠다. */
.gl-route-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 28px 0 12px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.35;
    color: #1A1424;
}

.gl-route-group:before {
    content: "";
    flex: none;
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background-color: #4B1979;
}

.gl-route-group:first-of-type {
    margin-top: 4px;
}

.gl-route-group-sub {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: #8A8496;
}

.gl-route-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gl-route {
    background-color: #FFFFFF;
    border: 1px solid #E7E8EF;
    border-radius: 10px;
    overflow: hidden;
}

/* --- 머리 = 토글 대상 --- */

.gl-route-head {
    display: block;
    position: relative;
    width: 100%;
    padding: 10px 40px 10px 12px; /* 우측은 화살표(32px) 자리. #566: 카드가 띄엄띄엄 보여 세로 여백을 줄였다 */
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.gl-route-head:after {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 6px;
    top: 28px; /* 이름 줄 가운데(위 여백 10 + 아이콘 36 / 2) — 카드 가운데면 아래 금액 줄과 부딪혔다 (#566) */
    content: "";
    transform: translate(0, -50%);
    background: url("/images/icd/ic_arrow_down-37b683e3ace0f9b9e30ff217788d00da.svg") no-repeat;
    background-size: 32px 32px;
}

.gl-route-head[aria-expanded="true"]:after {
    background-image: url("/images/icd/ic_arrow_up-25bdc94908dea9d1ccd990cbd920dddc.svg");
}

/* 펼친 카드는 테두리와 머리 바탕으로 구분한다 — 여러 카드 중 어느 것이 열렸는지 한눈에 보이게 (#566) */
.gl-route-head[aria-expanded="true"] {
    background-color: #F6F1FB;
}

.gl-route:has(.gl-route-body.is-open) {
    border-color: #B9A3D6; /* 진보라(#4B1979)는 너무 무거워 연보라로 */
}

.gl-route-head:focus-visible {
    outline: 2px solid #4B1979;
    outline-offset: -2px;
}

/* 카드 머리 안에서는 .service-item 이 버튼 안에 들어가므로 인라인 요소로 쓴다. */
.gl-route-head .service-item {
    display: flex;
    align-items: center;
}

.gl-route-head .service-from,
.gl-route-head .service-to {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* 카드 머리 아이콘은 페이지 공용(.service-icon 44px)보다 작게 — 카드 높이를 줄인다 (#566) */
.gl-route-head .service-icon {
    width: 36px;
    height: 36px;
    background-size: 22px 22px;
}

.gl-route-head .service-arrow {
    width: 24px;
    height: 24px;
    margin: 0 10px;
    flex-shrink: 0;
    background: url("/images/kd/service_arrow-677aa83effdc0cd37eeca9707051ce8f.svg") no-repeat center;
}

.gl-route-head .service-text {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    word-break: keep-all;
}

/* --- 카드 머리 최저가 (#566) ---
   오른쪽 끝에 [짐 2개부터] 29,700원~. 금액은 호텔 이름(15px/700 검정)보다 확실히 약하게(13px/500 회색) 둔다 —
   카드는 노선 이름으로 먼저 찾고, 금액은 그다음에 읽힌다. */
.gl-route-from {
    /*
     * 머리 아래 줄 — [짐 2개부터] 29,700원~ 를 한 덩어리로 오른쪽 끝에 (#566).
     * 조건과 금액이 흩어지면 산만해서 붙여 둔다. 오른쪽 끝은 화살표(⌄) 오른쪽 끝선에 맞춘다:
     * 머리 오른쪽 여백 40px 중 화살표 그림 바깥 14px 만 남기도록 -26px 당긴다.
     */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
    margin-right: -26px;
}

.gl-route-from-price {
    font-size: 12px;
    font-weight: 400; /* "From"·"~" 같은 틀 글자는 가볍게 — 숫자만 눈에 띄게 */
    color: #8A8496;
    white-space: nowrap;
}

/* 금액 숫자 — 호텔 이름(15px)보다 작게 두어 이름과 부딪히지 않으면서, 굵기로 눈이 먼저 가게 (#566) */
.gl-route-from-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1A1424;
    font-variant-numeric: tabular-nums;
}

.gl-route-from-min {
    font-size: 11.5px;
    font-weight: 600;
    color: #B4501A;
    background-color: #FFF1E6;
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* --- 본문 = 펼침 대상 --- */

.gl-route-body {
    display: none;
    padding: 4px 14px 18px;
    border-top: 1px solid #EFEFF4;
    background-color: #FBFBFD;
}

.gl-route-body.is-open {
    display: block;
}

.gl-route-section-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px; /* #566: 13px → 15px — 운영시간·가격이 잘 안 보인다는 의견 */
    font-weight: 700;
    color: #050505;
    margin: 16px 0 8px;
}

/* 제목 앞 아이콘. 파일을 새로 두지 않고 data URI 로 한 번만 정의한다 — 요청도 늘지 않고
   currentColor 대신 고정 회색이라 두 제목이 같은 무게로 읽힌다. */
.gl-route-section-title:before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

/* 시계 */
.gl-route-section-title.is-hours:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* 가격표 */
.gl-route-section-title.is-price:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4' fill='%23050505' stroke='none'/%3E%3C/svg%3E");
}

/* 표의 금액이 짐 1개·편도·당일 기준임을 밝힌다. 운영시간의 "*현지 시간"(.gl-route-local)과 같은 위계 (#566) */
.gl-route-unit {
    font-size: 11px;
    font-weight: 400;
    color: #8A8A96;
}

/* 운영시간이 한국 현지 시간임을 밝힌다 — 해외에서 보는 고객이 대부분이다. */
.gl-route-local {
    font-size: 11px;
    font-weight: 400;
    color: #8A8A96;
}

/* --- 표 --- */

.gl-route-scroll {
    overflow-x: auto;
    /* #566: 표에 외곽선이 없어 카드 바탕에 묻혀 보였다 — 테두리와 흰 바탕으로 표 영역을 세운다 */
    border: 1px solid #E2DEEA;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.gl-route-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.5;
}

.gl-route-table th,
.gl-route-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #EAEAF0;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}

.gl-route-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: #4A4256;
    background-color: #EFEAF6; /* #566: 열 제목이 흐려 안 보였다 — 연보라 머리 + 진한 글씨 */
    border-bottom: 1px solid #E2DEEA;
    white-space: nowrap;
}

.gl-route-table tbody tr:last-child th,
.gl-route-table tbody tr:last-child td {
    border-bottom: 0;
}

/*
 * 방향 이름은 줄바꿈을 허용한다. 운영 김포 끝점이 "김포공항 국제선 터미널"(EN "Gimpo Airport
 * International Terminal → Seoul", 44자)이라 한 줄로 묶으면 모바일에서 표가 칸보다 넓어져
 * 맡기는·받는 시간 칸이 잘렸다(375px 에서 표 393px > 칸 305px). 알파는 끝점이 "김포공항"이라 드러나지 않았다.
 * 일본어·중국어는 띄어쓰기가 드물어 keep-all 만으로는 안 끊길 수 있어 overflow-wrap 으로 받친다.
 */
.gl-route-table .gl-route-dir {
    font-weight: 600;
    color: #4A4256;
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * 시간·금액 칸은 한 줄로 둔다. 방향 이름이 줄바꿈되면서 남은 폭이 줄면 "07:00-15:00" 이
 * "07:00-" / "15:00" 으로, "After 20:00" 이 두 줄로 쪼개졌다. 좁아지는 쪽은 방향 이름이 맡는다.
 * 운영 페이지 실측: 폭 320~430 × 5개 언어 모두 표 넘침 0, 시간 칸 1줄.
 */
.gl-route-table td {
    white-space: nowrap;
}

/*
 * #566 위계: 굵게 강조하는 것은 소제목(700)과 금액(700) 둘뿐이다. 시간·짐 이름은 크기와 진한 색으로
 * 읽히게 하고 굵기는 낮춘다 — 전부 굵으면 강조가 사라지고 눈이 피곤하다.
 */
.gl-route-table tbody td {
    font-size: 14px;
    font-weight: 500;
    color: #1A1424;
    font-variant-numeric: tabular-nums;
}

/* 가격표 여백 (#566) — 좌우는 넉넉히(14px) 두어 테두리에 붙지 않게, 행 사이는 촘촘히(8px).
   표 맨 위·맨 아래만 12px 로 테두리와 띄운다. */
.gl-route-table--price th,
.gl-route-table--price td {
    padding: 8px 14px;
}

.gl-route-table--price tr:first-child > th,
.gl-route-table--price tr:first-child > td {
    padding-top: 12px;
}

.gl-route-table--price tr:last-child > th,
.gl-route-table--price tr:last-child > td {
    padding-bottom: 12px;
}

/* 가격표 짐 종류 — 이름(굵게) 아래 크기·포함 품목(작게) 두 단 (#566) */
.gl-route-luggage {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1A1424;
}

.gl-route-luggage-size {
    display: block;
    margin-top: 2px;
    white-space: pre-line; /* 문구의 줄바꿈을 그대로 — 특대는 "크기(줄바꿈)포함 품목" 두 줄 (#566) */
    font-size: 11.5px;
    font-weight: 400;
    color: #8A8A96;
}

.gl-route-table .gl-route-amount {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #050505;
}

/* 할인 전 가격은 작게 위에, 할인가는 그 아래 — 한 줄에 붙으면 "49,000원47,000원" 으로 읽힌다 (#566) */
.gl-route-list-price {
    display: block;
    margin-bottom: 1px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    color: #A0A0AC;
    text-decoration: line-through;
}

/* 방향마다 가격이 다를 때만 나오는 방향 머리말 */
.gl-route-direction-title {
    font-size: 12px;
    font-weight: 700;
    color: #6D6D6D;
    margin: 12px 0 6px;
}

.gl-route-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #8A8A96;
    line-height: 1.6;
}

/* --- 목록 아래 요금 안내 (카드마다 반복하지 않는다) --- */

.gl-route-terms {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #E7E8EF;
}

.gl-route-terms p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #6D6D6D;
    line-height: 1.6;
}

.gl-route-terms p:last-child {
    margin-bottom: 0;
}

/* 한도·이용불가 안내 — #566 에서 빨강을 주황 두 줄로 바꿨다(경고보다 안내에 가까운 톤). */
.gl-route-terms p.gl-route-note--warn {
    margin: 0 0 3px;
    color: #C2530F;
    line-height: 1.55;
}

/* 보관 안내 — 무료 일수를 굵게 강조하고 추가 요금을 아래에 (#566) */
.gl-route-storage {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: #F4EEFA;
}

.gl-route-storage strong {
    font-size: 14px;
    font-weight: 800;
    color: #4B1979;
}

.gl-route-storage span {
    font-size: 12px;
    color: #4A4256;
}

/* 한도 안내와 보관 안내 사이의 구분선 — D2D 요금 계산기의 .d2d-luggage-divider 와 같은 자리 */
.gl-route-terms .gl-route-divider {
    margin: 10px 0 8px;
    border: 0;
    border-top: 1px solid #EFEFF4;
}

/* 짐 종류별 크기 기준 — 열 제목 없이 짐 종류를 행 머리로 세운 세 줄짜리 표 */
.gl-route-sizes {
    width: 100%;
    border-collapse: collapse;
    margin: 2px 0 6px;
    font-size: 12px;
    line-height: 1.5;
}

/* 마지막 행 아래 선은 빼고, 구분선은 한도 안내 뒤(.gl-route-divider)에 둔다 */
.gl-route-sizes tr:last-child th,
.gl-route-sizes tr:last-child td {
    border-bottom: 0;
}

.gl-route-sizes th,
.gl-route-sizes td {
    padding: 7px 0;
    border-bottom: 1px solid #EFEFF4;
    text-align: left;
    vertical-align: top;
}

.gl-route-sizes tr:first-child th,
.gl-route-sizes tr:first-child td {
    border-top: 1px solid #EFEFF4;
}

.gl-route-sizes th {
    width: 36%;
    padding-right: 12px;
    font-weight: 700;
    color: #050505;
}

.gl-route-sizes td {
    color: #6D6D6D;
    overflow-wrap: anywhere;
}

/*
 * 한국어는 낱말 중간에서 끊지 않는다("캐리\n어" 방지).
 * 일본어·중국어에는 걸지 않는다 — 띄어쓰기가 없어 keep-all 이면 줄이 아예 안 바뀌고 칸을 뚫고 나간다.
 */
html:lang(ko) .gl-route-sizes th,
html:lang(ko) .gl-route-sizes td {
    word-break: keep-all;
}