/*
 * 노선 카드 — 접었다 펼치는 노선 목록 (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 다. */
.gl-route-group {
    margin: 22px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #4B1979;
}

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

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

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

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

.gl-route-head {
    display: block;
    position: relative;
    width: 100%;
    padding: 14px 44px 14px 14px; /* 우측은 화살표(32px) 자리 */
    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: 50%;
    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");
}

.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: 10px;
    flex: 1;
    min-width: 0;
}

.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;
}

/* --- 최소수량 뱃지 (가격 머리말 옆) --- */

/* 최소 예약 수량은 금액과 붙어 있어야 읽힌다 — 표의 단가가 그 수량만큼 곱해지기 때문이다.
   카드 머리에 두면 어느 값에 걸리는 조건인지 알 수 없다. */
.gl-route-min {
    font-size: 11px;
    font-weight: 400;
    color: #FF7F3E;
    border: 1px solid #FF7F3E;
    border-radius: 4px;
    padding: 1px 5px;
    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: 13px;
    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-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;
}

.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: 7px 8px;
    border-bottom: 1px solid #EAEAF0;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}

.gl-route-table thead th {
    font-size: 11.5px;
    font-weight: 400;
    color: #8A8A96;
    background-color: #F4F4F8;
    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: 700;
    color: #050505;
    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;
}

.gl-route-table .gl-route-amount {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: #050505;
}

.gl-route-list-price {
    display: inline-block;
    margin-right: 4px;
    font-weight: 400;
    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;
}

/* 한도·이용불가 안내 — D2D 요금 계산기의 .d2d-luggage-note 와 같은 빨강.
   크기 표 바로 아래 붙는 줄이라 표의 행 간격(line-height 1.5, 여백 최소)에 맞춘다. */
.gl-route-terms p.gl-route-note--warn {
    margin: 0 0 2px;
    color: #FF0000;
    line-height: 1.5;
}

/* 한도 안내와 보관 안내 사이의 구분선 — 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;
}