/* SEO 노선 페이지(/ko-kr/flights/서울-후쿠오카) — 2026-10-03~04
   기능(구성)은 노선 문서: 검색 → 요약 → 출발일·월별 가격 → 최저가 항공권 → 항공사·일수별 → 질문 → 다른 노선.
   2026-10-04 소유자 "트립닷컴과 디자인적으로 차이 나는 이유" → 넷을 맞췄다:
     ① 폭 전체 사진 첫 화면 + 가운데 제목 + 큰 검색 판  ② 항공사 로고(앱 급락 목록과 같은 kiwi 주소)
     ③ 흰 띠·회색 띠를 번갈아 깔아 구획을 가름  ④ 가격은 크게 + '최저가' 딱지
   색 역할(같은 날 "빨강·보라 같이 있으니 정신 사납다"): 보라 = 누르는 것·가장 싼 것(검색 버튼·최저가 딱지·가장 싼 막대),
   빨강 = 가격이 떨어졌다는 뜻(하락률)에만, 가격 자체는 검정 굵게 — 앱 급락 목록과 같은 규칙.
   앱 쪽 요소: 셸·토큰 pc-shell.css · 숫자 카드(내 일정) · 막대 줄 · 칩 알약 · 주 동작 보라(검색 버튼·가장 싼 막대).
   한글 음수 자간 없음. 보조 글자는 --sub 이상, 12px 미만 없음. */
.frPage { --fr-ink:#17181d; --fr-red:#ee2b4a; --fr-band:#F4F5F8; color:var(--text); font-variant-numeric:tabular-nums; font-family:'Pretendard',sans-serif; }   /* 2026-10-04 시험: 마이리얼트립과 같은 Pretendard(이 페이지만) */
.frPage *, .frPage *::before, .frPage *::after { box-sizing:border-box; }
:where(.frShell) a { color:inherit; text-decoration:none; }
:where(.frShell) :is(h1, h2, h3, p, ul, ol) { margin:0; padding:0; }
:where(.frShell) :is(ul, ol) { list-style:none; }
.frPage .sidebar { position:fixed; inset:0 auto 0 0; height:100dvh; z-index:40; }
.frShell svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.frShell .frChart svg { width:auto; height:auto; fill:initial; stroke:initial; stroke-width:initial; stroke-linecap:initial; stroke-linejoin:initial; }   /* 그래프는 모듈 속성 그대로 */
.frShell { margin-left:var(--pc-sidebar-w); min-width:0; min-height:100vh; background:var(--bg); transition:margin-left .47s cubic-bezier(.4,.6,0,1); }

/* PC 스크롤바(§12) */
html::-webkit-scrollbar, .pkList::-webkit-scrollbar { width:10px; height:10px; }
html::-webkit-scrollbar-track, .pkList::-webkit-scrollbar-track { background:transparent; }
html::-webkit-scrollbar-thumb, .pkList::-webkit-scrollbar-thumb { background:rgba(0,0,0,.18); border:3px solid transparent; border-radius:999px; background-clip:padding-box; }
html::-webkit-scrollbar-button, .pkList::-webkit-scrollbar-button { display:none; }

/* ── ① 첫 화면: 폭 전체 사진(흐리게 깔고 어둡게 덮음) + 가운데 제목 + 큰 검색 판 ── */
.frHero { position:relative; overflow:hidden; padding:64px var(--pc-gutter) 56px; background:#1b1e2b; color:#fff; }
.hBg { position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(10px); transform:scale(1.06); }
.frHero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,16,30,.50) 0%, rgba(12,16,30,.66) 100%); }
.hIn { position:relative; z-index:1; max-width:1080px; margin:0 auto; text-align:center; }
.frCrumb { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:rgba(255,255,255,.78); }
.frCrumb a { transition:color .15s; }
.frCrumb a:hover { color:#fff; }
.hTitle { margin-top:12px; color:#fff; font-size:clamp(30px,3.2vw,42px); line-height:1.2; font-weight:800; }
.hPrice { margin-top:10px; font-size:16px; font-weight:500; color:rgba(255,255,255,.9); }
.hPrice b { color:#fff; font-size:20px; font-weight:800; }
.hAlert { position:absolute; top:18px; right:var(--pc-gutter); z-index:2; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.95); color:var(--fr-ink); font-size:13px; font-weight:700; transition:background .14s; }
.hAlert:hover { background:#fff; }
.hAlert svg { width:14px; height:14px; fill:currentColor; stroke:none; }

/* 큰 검색 판 — 칸마다 테두리 상자(라벨 + 값), 오른쪽 큰 버튼 */
.frBar { display:flex; align-items:stretch; gap:10px; margin:28px auto 0; padding:14px; max-width:1000px; background:#fff; border-radius:18px; box-shadow:0 22px 50px rgba(0,0,0,.34); text-align:left; }
.frSeg { position:relative; display:flex; align-items:center; gap:10px; min-width:0; height:62px; padding:0 14px; border:1px solid var(--ctrl-line); border-radius:12px; background:#fff; font:inherit; color:var(--sub); cursor:pointer; transition:border-color .15s, background .15s; }
.frSeg:hover { border-color:var(--ctrl-line-2); }
.frSeg[aria-expanded=true] { border-color:var(--fr-ink); }
.frSeg .t { display:flex; flex-direction:column; min-width:0; text-align:left; }
.frSeg .t small { color:var(--sub); font-size:12px; font-weight:600; }
.frSeg .v { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; font-size:16px; font-weight:700; color:var(--fr-ink); }
.frSeg .v.ph { font-weight:500; color:var(--sub); }
.frSeg .cv { display:flex; margin-left:auto; color:var(--sub); transition:transform .15s; }
.frSeg .cv svg { width:16px; height:16px; }
.frSeg[aria-expanded=true] .cv { transform:rotate(180deg); }
.frDep { flex:1 1 170px; }
.frArr { flex:1 1 190px; }
.frDates { flex:1.6 1 260px; }
.frGo { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:62px; padding:0 30px; border:0; border-radius:12px; background:var(--accent); color:#fff; font:inherit; font-size:17px; font-weight:700; cursor:pointer; transition:background .15s; }
.frGo:hover { background:var(--accent-strong); }
.frGo svg { width:20px; height:20px; stroke-width:2.2; }

/* 떠 있는 메뉴·고르기·달력 (§12) */
.frPop[hidden], .pkList li[hidden] { display:none !important; }
.frPop { position:absolute; z-index:60; background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.18); color:var(--text); }
.frMenu { display:flex; flex-direction:column; min-width:150px; padding:6px; }
.frMenu a { padding:10px 12px; border-radius:8px; font-size:15px; font-weight:500; color:var(--fr-ink); transition:background .15s; }
.frMenu a:hover { background:var(--surface); }
.frMenu a.on { background:var(--tint); font-weight:700; }
.frPick { width:min(520px, calc(100vw - 32px)); padding:18px 14px 10px; border-radius:20px; }
.pkT { padding:0 6px; font-size:17px; font-weight:700; color:var(--fr-ink); }
.pkQ { display:flex; align-items:center; gap:8px; height:44px; margin:12px 6px 6px; padding:0 14px; border:1px solid var(--ctrl-line); border-radius:12px; background:var(--bg); color:var(--sub); transition:border-color .15s, box-shadow .15s; }
.pkQ:focus-within { border-color:var(--fr-ink); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.pkQ input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--fr-ink); }
.pkList { max-height:min(360px, 52vh); overflow-y:auto; }
.pkList a { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:10px; font-size:15px; font-weight:500; color:var(--fr-ink); transition:background .15s; }
.pkList a:hover { background:var(--surface); }
.pkList a.on { background:var(--tint); font-weight:700; }
.pkList small { font-size:13px; color:var(--sub); }
.frCal { padding:14px 16px 12px; }
.cNav { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; pointer-events:none; }
.cNav button { pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--fr-ink); cursor:pointer; transition:background .15s; }
.cNav button:hover { background:var(--surface); }
.cNav button:disabled { color:var(--line); cursor:default; background:transparent; }
.cMs { display:flex; gap:24px; }
.cM { width:266px; }
.cT { height:30px; line-height:30px; text-align:center; font-size:15px; font-weight:700; color:var(--fr-ink); }
.cG { display:grid; grid-template-columns:repeat(7, 38px); margin-top:6px; }
.cW { height:26px; line-height:26px; text-align:center; font-size:12px; color:var(--sub); }
.cD { display:flex; flex-direction:column; align-items:center; justify-content:center; width:38px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; font:inherit; color:var(--fr-ink); cursor:pointer; transition:background .15s; }
.cD b { font-size:14px; font-weight:600; line-height:1.1; }
.cD small { margin-top:2px; font-size:10.5px; color:var(--sub); line-height:1; }
.cD:hover { background:var(--surface); }
.cD:disabled { color:#c5c6cc; cursor:default; background:transparent; }
.cD.in { background:var(--tint); border-radius:0; }
.cD.sel { background:var(--accent); color:#fff; }
.cD.sel small { color:rgba(255,255,255,.8); }
.cFoot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.cSum { font-size:14px; font-weight:700; color:var(--fr-ink); }
.cReset { height:32px; padding:0 12px; border:1px solid var(--ctrl-line); border-radius:6px; background:var(--bg); font:inherit; font-size:13px; font-weight:600; color:var(--fr-ink); cursor:pointer; transition:border-color .15s; }
.cReset:hover { border-color:var(--ctrl-line-2); }
.cReset:disabled { opacity:.4; cursor:default; }

/* ── ③ 띠 — 흰 띠·회색 띠 번갈아. 안쪽 폭은 1180 ── */
.frBand { padding:44px var(--pc-gutter) 52px; }
.frBand.alt { background:var(--fr-band); }
.frIn { max-width:1180px; margin:0 auto; }
.frSec { margin-top:40px; min-width:0; }
.frIn > .frSec:first-child, .frIn > .frDuo:first-child > .frSec { margin-top:0; }
.frH2 { margin:0 0 16px; color:var(--fr-ink); font-size:24px; line-height:1.3; font-weight:800; }
.frCard { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.frBand.alt .frCard, .frBand.alt .frTickets a { border-color:transparent; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.frDuo { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:24px; }
.frDuo.even { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; }
.frDuo > .frSec { display:flex; flex-direction:column; }
.frDuo:not(.even) > .frSec > .frCard { flex:1; }

/* 요약 — 내 일정 숫자 카드(검은 카드 하나 + 흰 카드) */
.frStats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.frStat { display:flex; flex-direction:column; gap:5px; min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.frStat.dark { border-color:transparent; background:var(--fr-ink); }
.sLbl { color:var(--sub); font-size:12.5px; font-weight:600; }
.sBig { color:var(--fr-ink); font-size:28px; line-height:1.15; font-weight:800; white-space:nowrap; }
.sBig em { margin-left:3px; color:var(--sub); font-style:normal; font-size:14px; font-weight:600; }
.sSub { color:var(--sub); font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frStat.dark .sLbl, .frStat.dark .sSub, .frStat.dark .sBig em { color:rgba(255,255,255,.72); }
.frStat.dark .sBig { color:#fff; }
.frDuo { margin-top:40px; }
.frIn > .frDuo:first-child { margin-top:0; }   /* 요약 칸을 뺀 뒤(2026-10-04) 첫 띠가 그래프로 시작한다 */

/* 출발일별 그래프 */
.frChartCard { display:flex; align-items:center; padding:10px 14px 4px; }
.frChart { flex:1; height:220px; touch-action:pan-y; }

/* 월별 — 세로 막대. 회색 막대, 가장 싼 달만 보라 */
.frColsCard { display:flex; align-items:flex-end; }
.frCols { flex:1; min-width:0; display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:212px; }
.frCols li { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; height:100%; }
.frCols .cv { margin-bottom:6px; color:var(--text); font-size:11px; font-weight:700; white-space:nowrap; }
.frCols .cb { width:100%; max-width:30px; border-radius:6px 6px 2px 2px; background:var(--ctrl-line); transition:background .14s; }
.frCols li:hover .cb { background:var(--ctrl-line-2); }
.frCols .cm { margin-top:8px; color:var(--text); font-size:12.5px; font-weight:600; white-space:nowrap; }
.frCols li.lo .cb { background:var(--accent); }
.frCols li.lo .cv, .frCols li.lo .cm { color:var(--accent); font-weight:700; }

/* ── 최저가 항공권 — 날짜 먼저 · 로고 + 항공사 · ④ 빨간 가격 ── */
.frTickets { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.frTickets a { display:grid; grid-template-columns:minmax(0, 1fr) 132px; height:100%; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; transition:box-shadow .14s ease, transform .14s ease; }
.frTickets a:hover { box-shadow:0 8px 22px rgba(15,23,42,.10); transform:translateY(-1px); }
.tL { min-width:0; padding:16px 18px 15px; }
.tWhen { display:flex; align-items:center; gap:8px; color:var(--fr-ink); font-size:17px; font-weight:700; white-space:nowrap; }
.tWhen i { display:flex; color:var(--sub); }
.tWhen i svg { width:16px; height:16px; fill:currentColor; stroke:none; transform:rotate(90deg); }
.tWho { display:flex; align-items:center; gap:8px; margin-top:8px; }
.tWho b { color:var(--fr-ink); font-size:14.5px; font-weight:600; }
.tWho span { color:var(--sub); font-size:13.5px; font-weight:500; }
.tCode { margin-top:4px; color:var(--sub); font-size:12.5px; font-weight:500; }
.alSlot { flex:none; display:inline-flex; width:20px; height:20px; border-radius:5px; background:var(--surface); overflow:hidden; }
.alLogo { width:20px; height:20px; object-fit:contain; background:#fff; }
.tR { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:12px 10px; background:#FAFAFB; border-left:2px dashed rgba(15,23,42,.14); text-align:center; }
.tR s { font-size:12.5px; color:var(--sub); }
.tR b { font-size:20px; font-weight:800; color:var(--fr-ink); white-space:nowrap; }
.tR b small { margin-left:1px; font-size:13px; font-weight:700; }
.tR em { font-style:normal; font-size:13px; font-weight:700; color:var(--fr-red); }
.frTag { display:inline-flex; align-items:center; height:20px; margin-left:6px; padding:0 7px; border-radius:5px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; }
.frBtn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; margin-top:18px; padding:0 20px; border:1px solid var(--ctrl-line); border-radius:999px; background:#fff; font-size:14px; font-weight:700; color:var(--fr-ink); transition:border-color .14s; }
.frBtn:hover { border-color:var(--ctrl-line-2); }

/* 항공사별 — 로고 + 이름, 빨간 가격 */
.frRows { padding:4px 18px; }
.frRows li { display:grid; grid-template-columns:minmax(118px, auto) minmax(0, 1fr) auto; align-items:center; gap:12px; padding:11px 0; }
.frRows li + li { border-top:1px solid var(--line-soft, #f3f3f4); }
.frRows .k { display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--fr-ink); white-space:nowrap; }
.frRows .s { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:var(--sub); }
.frRows b { display:flex; align-items:center; font-size:15px; font-weight:800; color:var(--fr-ink); white-space:nowrap; }
.frRows b .frTag { margin:0 8px 0 0; }

/* 일수별 — 막대 줄(회색 막대, 가장 싼 줄만 보라) */
.frBars { display:grid; gap:11px; }
.frBarRow { display:grid; grid-template-columns:68px minmax(0, 1fr) 82px; align-items:center; gap:10px; }
.frBarRow em { color:var(--text); font-style:normal; font-size:13.5px; font-weight:600; white-space:nowrap; }
.frBarRow .trk { position:relative; height:8px; border-radius:999px; background:var(--surface2); }
.frBarRow .trk i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--ctrl-line-2); }
.frBarRow .pv { color:var(--fr-ink); font-size:14px; font-weight:700; text-align:right; white-space:nowrap; }
.frBarRow.lo em, .frBarRow.lo .pv { color:var(--accent); font-weight:700; }
.frBarRow.lo .trk i { background:var(--accent); }

/* 자주 묻는 질문 */
.frFaq { padding:2px 18px; }
.frFaq details + details { border-top:1px solid var(--line-soft, #f3f3f4); }
.frFaq summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; font-size:15.5px; font-weight:700; color:var(--fr-ink); cursor:pointer; list-style:none; }
.frFaq summary::-webkit-details-marker { display:none; }
.frFaq summary svg { color:var(--sub); transition:transform .15s; }
.frFaq details[open] summary svg { transform:rotate(180deg); }
.frFaq p { padding:0 0 16px; font-size:15px; line-height:1.7; color:var(--text); }

/* 다른 노선 — 알약. 크롤 경로라 전부 <a> */
.frChips { display:flex; flex-wrap:wrap; gap:8px; }
.frChips a { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 16px; border:1px solid var(--ctrl-line); border-radius:999px; background:#fff; font-size:14px; font-weight:600; color:var(--fr-ink); transition:border-color .14s, background .14s; }
.frChips a:hover { border-color:var(--ctrl-line-2); background:var(--surface); }
.frChips small { font-size:13px; font-weight:500; color:var(--sub); }
.frFoot { margin-top:44px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--sub); }

@media (max-width:1400px) { .frDuo { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }   /* 좁으면 월별 막대 가격 글자가 붙는다 — 반반으로 */
@media (max-width:1100px) {
	.frStats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.frDuo, .frDuo.even { grid-template-columns:minmax(0, 1fr); gap:0; }
	.frIn .frDuo > .frSec + .frSec { margin-top:40px; }   /* 첫 띠 0 규칙(.frIn > .frDuo:first-child > .frSec)보다 세게 */
	.frBar { flex-wrap:wrap; }
	.frDep, .frArr { flex:1 1 40%; }
	.frDates { flex:1 1 60%; }
}
@media (max-width:860px) {
	.frPage .sidebar { display:none; }
	.frShell { margin-left:0; }
	.frHero { padding:52px 16px 28px; }
	.hAlert { top:12px; right:12px; }
	.hTitle { font-size:28px; }
	.frBar { gap:8px; padding:10px; margin-top:20px; }
	.frSeg { height:56px; }
	.frDates { flex:1 1 100%; }
	.frGo { width:100%; height:52px; }
	.frBand { padding:32px 16px 40px; }
	.frH2 { font-size:21px; }
	.frTickets { grid-template-columns:1fr; }
	.frCal .cMs { flex-direction:column; gap:12px; }
	.frCal .cM:last-child { display:none; }
}
@media (max-width:520px) {
	.frTickets a { grid-template-columns:minmax(0, 1fr) 116px; }
	.tL { padding:14px 14px 12px; }
	.tWhen { font-size:15.5px; gap:6px; }
	.tR b { font-size:18px; }
	.frRows { padding:2px 14px; }
	.frRows li { grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; }
	.frRows .s { display:none; }
	.frBarRow { grid-template-columns:58px minmax(0, 1fr) 76px; }
	.frCols { gap:3px; }
	.frCols li:not(.lo) .cv { display:none; }   /* 좁으면 가격 글자가 넘친다 — 가장 싼 달만 남긴다(값은 title 에 있다) */
	.frCols .cm { font-size:10.5px; }
	.frCal { left:16px !important; right:16px; }
	.cM { width:auto; }
	.cG { grid-template-columns:repeat(7, minmax(0, 1fr)); }
	.cD { width:auto; }
}
@media (prefers-reduced-motion:reduce) { .frPage * { transition-duration:.01ms !important; } }