/*
 * 짝꿍 메인 전용 — theme/jjakkung/index.php. 토큰 · 버튼 · 머리글 · 사진 · 등장 효과는 site.css.
 * 움직임은 내용을 더 잘 알게 하는 곳에만 (경로 · 진행 순서와 돈 · 출발 요일). 「움직임 줄이기」 화면은 맨 아래에서 전부 끈다.
 * 스크롤 시차(data-parallax)는 translate 속성을 쓴다 — 등장 효과(transform)와 겹쳐도 서로 지우지 않게.
 */

/* ── 머리말 — 사진 위에서는 투명, 내리면 바탕(home.js 가 .scrolled) ── */
.is-home .site-hd { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none;
                    transition: background .4s var(--ease), border-color .4s var(--ease); }
.is-home .site-hd.scrolled, .is-home.nav-open .site-hd { background: rgba(255, 255, 255, .92); border-bottom-color: var(--line); backdrop-filter: blur(10px); }

/* ── 섹션 공통 ── */
.home-sec { padding: clamp(72px, 8vw, 120px) 0; }   /* 배경색이 구획마다 달라 위아래 모두 여백 */   /* 2026-10-13 「세로폭 줄이자」 — 구획 사이 여백 약 ⅓ 줄임 */
.nw { white-space: nowrap; }
[data-parallax] { will-change: translate; }
.ph img[data-parallax] { scale: 1.14; }

/* ── 1 메인 사진 ── */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 660px; max-height: 1120px; overflow: hidden; background: #F4F2EE; }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 62% center; animation: heroIn 9s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.07); } to { transform: none; } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(90deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.3) 36%, rgba(255,255,255,0) 58%); }
/* 바닷가 세 장 — 둘째 · 셋째 장이 차례로 겹쳐 올라온다. 사람이 두 번 보이는 순간이 짧도록 느리게, 한 번만 */
.hero-next { opacity: 0; animation: heroIn 9s var(--ease) both, heroNext 1.4s ease-in-out forwards; }   /* 겹치는 시간이 길면 두 사람이 두 번 보인다 — 짧게 */   /* 첫 장과 같이 확대가 풀려야 겹칠 때 어긋나지 않는다 */
.hero-f2 { animation-delay: 0s, 3.4s; }
.hero-f3 { animation-delay: 0s, 7.6s; }
@keyframes heroNext { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-next { display: none; } }
.hero-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hd-h); box-sizing: border-box; }
/* 줄마다 차례로 떠오른다 */
.hero-copy > :not(.hero-title), .hero-title .ln { animation: rise 1.3s var(--ease) both; }
.hero-title .ln { display: block; }
.hero-title .ln:nth-child(1) { animation-delay: .12s; }
.hero-title .ln:nth-child(2) { animation-delay: .26s; }
.hero-sub { animation-delay: .42s !important; }
.hero-btns { animation-delay: .56s !important; }
.hero-route { animation-delay: .72s !important; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 4.9vw, 74px); line-height: 1.26; letter-spacing: -.045em; margin: 28px 0 24px; }
.hero-sub { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.85; color: var(--ink-2); margin: 0; }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin: 44px 0 0; }
.hero-btns .jj-btn { min-height: 56px; padding: 0 36px; }

/* 「짝꿍」 둘레 손그림 원 — 글자가 떠오른 뒤 그려진다 */
.mark { position: relative; display: inline-block; margin-right: .06em; }
.mark-ring { position: absolute; left: -10%; top: -20%; width: 120%; height: 138%; overflow: visible; pointer-events: none; }
.mark-ring path { fill: none; stroke: var(--point); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
                  stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s 1.1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* 서울 ✈ 호치민 — 비행기가 점선을 따라 간다 */
.hero-route { display: flex; align-items: center; gap: 14px; margin: 56px 0 0; flex-wrap: wrap; }
.hr-city { font: 600 12px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.hr-line { position: relative; width: 150px; height: 18px; }
.hr-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
                   background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 9px); }
.hr-plane { position: absolute; left: 0; top: 0; width: 18px; height: 18px; fill: var(--point); animation: fly 4.4s var(--ease) infinite; }
@keyframes fly { 0% { transform: translateX(-4px) rotate(90deg); opacity: 0; } 14%, 84% { opacity: 1; }
                 100% { transform: translateX(136px) rotate(90deg); opacity: 0; } }
.hr-meta { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); padding-left: 14px; border-left: 1px solid var(--line-strong); }

.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
               text-decoration: none; font: 600 10.5px/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); }
.hero-scroll::after { content: ""; width: 1px; height: 64px; background: linear-gradient(var(--ink-2), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero-ai { position: absolute; z-index: 2; right: var(--gutter); bottom: 22px; margin: 0; font-size: 11px; letter-spacing: .02em; color: var(--ink-2); }

/* 회전 상담 배지 */
.hero-badge { position: absolute; z-index: 3; right: calc(var(--gutter) + 4px); bottom: 64px; width: 136px; height: 136px;
              display: grid; place-items: center; text-decoration: none; color: var(--ink); }
.hero-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: spin 24s linear infinite; }
.hero-badge text { font: 600 10px var(--font-sans); letter-spacing: .14em; fill: var(--ink); }
.hb-core { width: 66px; height: 66px; border-radius: 50%; background: var(--point); color: #fff; display: grid; place-items: center;
           font-size: 22px; transition: transform .5s var(--ease), background .3s; }
.hero-badge:hover .hb-core, .hero-badge:focus-visible .hb-core { transform: scale(1.08) rotate(-45deg); background: var(--ink); }
.hero-badge:hover svg { animation-duration: 8s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ 2026-10-13 다시 짠 아래 구획들 — 넓은 여백 · 가운데 제목 · 아치 사진 · 선 아이콘 ══ */

/* ── 2 믿을 수 있는 곳인가 — 문장 + 둥근 표식 셋 ── */
.m-trust { padding: clamp(72px, 7vw, 104px) 0 clamp(56px, 6vw, 88px); background: #fff; text-align: center; }
.m-trust .proof-text { max-width: 880px; margin: 0 auto; }
.m-trust .eyebrow { justify-content: center; }
.proof-say { font-family: var(--font-serif); font-weight: 300; font-size: clamp(23px, 2.2vw, 32px); line-height: 1.7; letter-spacing: -.04em; margin: 28px 0 0; word-break: keep-all; }
/* 형광펜 — 화면에 들어오면 왼쪽부터 칠해진다(스크립트가 없으면 처음부터 칠해져 있다) */
.hl { color: inherit; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
      background: linear-gradient(var(--blush-soft), var(--blush-soft)) no-repeat 0 86% / 100% 40%; transition: background-size 1.3s var(--ease), color .3s; }
@supports (background: color-mix(in srgb, red 50%, white)) {
  .hl { background-image: linear-gradient(color-mix(in srgb, var(--point) 22%, white), color-mix(in srgb, var(--point) 22%, white)); }
}
.js .proof-text .hl { background-size: 0% 40%; }
.js .proof-text.is-in .hl { background-size: 100% 40%; }
.js .proof-text.is-in .hl:nth-of-type(2) { transition-delay: .35s; }
.js .proof-text.is-in .hl:nth-of-type(3) { transition-delay: .7s; }
.hl:hover { color: var(--point-ink); }
.hl .num { font: 500 1.12em/1 var(--font-num); color: var(--point); letter-spacing: -.01em;  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* 서류 부채 — 가리키면 펼쳐진다. 크기는 문장 폭에 맞춰(2026-10-13 「크기 밸런스 · 글씨 크기」) */
.fan { --w: clamp(180px, 16vw, 236px); position: relative; display: block; height: calc(var(--w) * 1.4 + 24px); max-width: 760px;
       margin: clamp(36px, 4vw, 52px) auto 0; text-decoration: none; color: inherit; }
.fan-c { position: absolute; left: 50%; bottom: 0; width: var(--w); margin-left: calc(var(--w) / -2); transform-origin: 50% 120%; transition: transform .8s var(--ease); }
.fan-p { display: block; background: #fff; padding: 10px; box-shadow: 0 20px 44px rgba(20, 20, 20, .14), 0 2px 6px rgba(20, 20, 20, .07); transition: box-shadow .6s; }
.fan-p img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.fan-c:nth-child(1) { transform: rotate(-6deg) translateX(-26%); }
.fan-c:nth-child(2) { transform: translateY(-16px); z-index: 2; }
.fan-c:nth-child(3) { transform: rotate(6deg) translateX(26%); }
.fan:hover .fan-c:nth-child(1), .fan:focus-visible .fan-c:nth-child(1) { transform: rotate(-3deg) translateX(-62%); }
.fan:hover .fan-c:nth-child(3), .fan:focus-visible .fan-c:nth-child(3) { transform: rotate(3deg) translateX(62%); }
.fan-c:hover { z-index: 5; } .fan-c:hover .fan-p { box-shadow: 0 30px 60px rgba(20, 20, 20, .2); }
.fan-cap { --w: clamp(180px, 16vw, 236px); margin: calc(var(--w) * .3 + 24px) 0 0;   /* 기울어진 양쪽 서류 끝이 닿지 않게 */ font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fan-cap b { display: block; margin-bottom: 4px; font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--ink); letter-spacing: -.02em; }
.fan-cap + .m-trust-more { margin-top: 20px; }
.m-trust-more { margin: clamp(36px, 4vw, 52px) 0 0; }

/* ── 3 나라 고르기 — 같은 크기 두 장 ── */
/* 반반 파노라마 — 가리키는 나라가 넓어진다 (2026-10-13 시안 A) */
.pano { display: flex; gap: 6px; height: clamp(460px, 38vw, 560px); }
.pano-c { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: #fff; text-decoration: none; transition: flex-grow 1s var(--ease); }
.pano:hover .pano-c:hover, .pano-c:focus-visible { flex-grow: 1.5; }
.pano-ph { position: absolute; inset: 0; }
.pano-ph img { transition: transform 1.6s var(--ease); object-position: 70% center; }
.pano-c.ru .pano-ph img { object-position: 68% center; }
.pano-c:hover .pano-ph img { transform: scale(1.04); }
.pano-c::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 32%, rgba(20, 20, 20, .74) 100%); }
.pano-in { text-shadow: 0 1px 14px rgba(0, 0, 0, .22); position: absolute; left: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px); bottom: clamp(26px, 3vw, 40px); z-index: 1; }
.pano-k { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 600 12px/1.2 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; }
.pano-k span { font: 500 12.5px/1 var(--font-sans); letter-spacing: .04em; text-transform: none; opacity: .8; }
.pano-c h3 { margin: 8px 0 18px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 42px); letter-spacing: -.04em; line-height: 1.25; }
.pano-f { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.pano-f dt { font-size: 12.5px; opacity: .78; }
.pano-f dd { margin: 4px 0 0; font-size: 14px; white-space: nowrap; }
.pano-f b { font: 300 clamp(26px, 2.4vw, 34px)/1 var(--font-num); margin-right: 3px; font-variant-numeric: lining-nums;  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pano-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .85);
           font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pano-go::after { content: "→"; }
.pano-c:hover .pano-go, .pano-c:focus-visible .pano-go { opacity: 1; transform: none; }
@media (hover: none) { .pano-go { opacity: 1; transform: none; } }

/* ── 4 베트남 진행 순서 — 밝은 바탕 · 아이콘 단계 ── */

/* ── 5 짝꿍맞선 — 넓은 사진 위 예약 카드 ── */
.trip-band { position: relative; min-height: clamp(560px, 46vw, 660px); display: flex; align-items: center; overflow: hidden; }
.trip-ph { position: absolute; inset: 0; }
.trip-ph img { object-position: 80% center; }
.trip-wrap { position: relative; z-index: 1; display: flex; justify-content: flex-start; padding: clamp(40px, 4vw, 60px) 0; }
.trip-card { width: min(520px, 100%); background: rgba(255, 255, 255, .96); padding: clamp(28px, 3vw, 44px); box-shadow: 0 30px 60px rgba(20, 20, 20, .12); }
.trip-card .sec-title { margin-top: 18px; }
.trip-where { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.trip-price { margin: 24px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.trip-price b { font: 300 clamp(60px, 5.6vw, 84px)/.9 var(--font-num); letter-spacing: -.02em; color: var(--point); font-variant-numeric: lining-nums;  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.trip-price > span { font-family: var(--font-serif); font-size: 21px; }
.trip-price small { flex-basis: 100%; margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.trip-dep { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.trip-dep li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--paper-2); font-size: 15px; color: var(--ink-2); }
.trip-dep .ico { font-size: 18px; color: var(--point-ink); }
.trip-dep b { color: var(--ink); font-weight: 600; }
.trip-dep span { color: var(--ink-3); }
.trip-inc { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-top: 1px solid var(--ink); }
.trip-inc li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.trip-inc .ico { font-size: 19px; color: var(--ink-2); }
.trip-note { color: var(--ink-3); font-size: 13.5px; margin: 16px 0 0; }
.trip-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 28px 0 0; }

/* ── 6 이야기 — 편지 한 통 + 진행 현황 ── */
/* 탁자 위 편지 세 통 — 비스듬히 놓였다가 가리키면 선다 */
/* 후기 카드 — 반듯한 흰 카드 셋 (2026-10-14 기울기 · 줄 공책 · 따옴표 걷어냄) */
.desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.desk.n1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.desk.n2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.desk-card { display: grid; grid-template-rows: auto 1fr; background: #fff; text-decoration: none; color: inherit; border: 1px solid var(--line);
             transition: border-color .4s var(--ease), box-shadow .5s var(--ease); }
.desk-card:hover, .desk-card:focus-visible { border-color: var(--line-strong); box-shadow: 0 20px 44px rgba(20, 20, 20, .07); }
.desk-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.desk-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.desk-card:hover .desk-ph img { transform: scale(1.03); }
.desk-q { display: flex; align-items: center; aspect-ratio: 4 / 3; padding: clamp(24px, 2.6vw, 34px); background: var(--bg-ivory); border-bottom: 1px solid var(--line); }
.desk-q > span { font-family: var(--font-serif); font-size: 18px; line-height: 1.8; letter-spacing: -.02em; color: var(--ink);
                 display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.desk-cap { display: grid; gap: 4px; padding: 18px 20px 20px; }
.desk-cap b { font-family: var(--font-serif); font-weight: 400; font-size: 17px; line-height: 1.45; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-cap small { font-size: 13px; color: var(--ink-3); }
.m-stories-more { text-align: center; margin: clamp(32px, 4vw, 48px) 0 0; }

/* ── 7 영상 — 흰 바탕, 첫 영상은 크게 ── */
.video-sec .yt-grid.yt-long { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }   /* 같은 크기 목록형 (2026-10-13 사용자) */
.video-sec .yt-title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: -.02em; line-height: 1.45; margin-top: 6px; }
.video-sec .yt-thumb { background: var(--paper-2); }
/* 유튜브 썸네일은 원색이 강하다 — 살짝 눌렀다가 가리키면 원래대로 */
.video-sec .yt-thumb img { filter: saturate(.8); transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.video-sec .yt-card:hover .yt-thumb img, .video-sec .yt-card:focus-visible .yt-thumb img { filter: none; }
.home-shorts { margin: clamp(48px, 5vw, 72px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.shorts-h { margin: 0 0 18px; font: 600 13px/1 var(--font-sans); letter-spacing: .08em; color: var(--point-ink); }
.home-shorts .yt-grid.yt-short { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }
.home-shorts .yt-title { font-size: 13.5px; }
.video-more { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 44px 0 0; }

/* ── 8 자주 묻는 질문 ── */
/* 번호 목록 + 따라오는 상담 카드 (2026-10-13 시안 C) */
.faq-c { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: baseline; padding: 26px 0;
                    font-family: var(--font-serif); font-weight: 500; font-size: clamp(17px, 1.45vw, 19.5px); letter-spacing: -.02em; transition: color .3s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { font: 300 30px/1 var(--font-num); color: var(--ink-3); font-variant-numeric: lining-nums; transition: color .3s;  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.faq-list summary::after { content: "+"; font: 300 26px/1 var(--font-sans); color: var(--ink-3); text-align: right; }
.faq-list summary:hover { color: var(--point-ink); }
.faq-list details[open] summary i { color: var(--point); }
.faq-list details[open] summary::after { content: "\2212"; color: var(--point); }
.faq-list details p { margin: 0 0 28px 56px; color: var(--ink-2); line-height: 1.9; font-size: 15.5px; }
.faq-list details p a { color: var(--point-ink); }
.faq-cta { position: sticky; top: calc(var(--hd-h) + 28px); background: var(--forest); color: #fff; padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 34px); display: grid; gap: 12px; }
.faq-cta p { margin: 0; }
.faq-cta-t { font-family: var(--font-serif); font-size: 23px; line-height: 1.4; letter-spacing: -.02em; }
.faq-cta-h { font-size: 13.5px; color: rgba(255, 255, 255, .68); }
.faq-cta-tel { justify-self: start; margin-top: 4px; font: 300 34px/1 var(--font-num); color: #fff; text-decoration: none; border-bottom: 1px solid var(--point); padding-bottom: 6px;
               font-variant-numeric: lining-nums tabular-nums; }
.faq-cta-tel:hover { color: var(--blush); }
.faq-cta-btns { display: flex; gap: 8px; margin-top: 10px !important; }
.faq-cta-btns a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border: 1px solid rgba(255, 255, 255, .5); color: #fff;
                  text-decoration: none; font-size: 14px; font-weight: 600; transition: background .3s, color .3s; }
.faq-cta-btns a.p { background: var(--point); border-color: var(--point); }
.faq-cta-btns a:not(.p):hover { background: #fff; color: var(--ink); }
.faq-cta-btns .ico { font-size: 17px; }
.faq-cta-btns .ico .a { fill: #fff; }

/* ── 9 상담 마무리 — 사진 위 가운데 카드 ── */
.closing { position: relative; margin-top: 0; min-height: clamp(500px, 40vw, 600px); display: flex; align-items: center; overflow: hidden; }
.closing-ph { position: absolute; inset: 0; }
.closing-ph img { object-position: 76% center; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
                   background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .62) 38%, rgba(255, 255, 255, 0) 62%); }
.closing-in { position: relative; z-index: 2; padding: 56px 0; }
.closing-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.28; margin: 24px 0 0; }
.closing-sub { margin: 16px 0 0; color: var(--ink-2); }
.closing-route { display: flex; align-items: center; gap: 14px; margin: 34px 0 0; font: 600 12px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.closing-route i { position: relative; width: 140px; height: 18px; }
.closing-route i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 9px); }
.closing-route i::after { content: ""; position: absolute; right: -4px; top: 0; width: 18px; height: 18px; background: var(--point); transform: rotate(90deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") no-repeat center / contain; }
.closing-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 34px 0 0; }
.closing-btns .jj-btn { min-height: 54px; padding: 0 28px; background: rgba(255, 255, 255, .85); }
.closing-btns .jj-btn-primary { background: var(--point); }
.closing-btns .ico { margin-right: 8px; font-size: 18px; }
.closing-btns .jj-btn-primary .ico .as { stroke: #fff; }
.closing-tel { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; font: 300 clamp(28px, 2.4vw, 34px)/1 var(--font-num); text-decoration: none; color: var(--ink);
               border-bottom: 1px solid var(--point); padding-bottom: 6px; font-variant-numeric: lining-nums tabular-nums; }
.closing-tel .ico { font-size: 22px; margin: 0; color: var(--point-ink); }
.closing-tel:hover { color: var(--point-ink); }
.closing-hours { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }

@media (max-width: 1023px) { .home-shorts .yt-grid.yt-short { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 860px) { .trip-ph img { object-position: 70% center; } }

/* ── 화면이 좁을 때 ── */
@media (max-width: 860px) {
  .sec-lead br { display: none; }
  .fan { --w: min(40vw, 180px); }
  .fan-c:nth-child(1) { transform: rotate(-5deg) translateX(-24%); }
  .fan-c:nth-child(3) { transform: rotate(5deg) translateX(24%); }
  .fan-cap { margin-top: 36px; }
  .fan-cap b { font-size: 14.5px; }
  .pano { flex-direction: column; height: auto; gap: 6px; }
  .pano-c { flex: none; height: clamp(420px, 110vw, 520px); }
  .pano:hover .pano-c:hover { flex-grow: 0; }
  .pano-go { opacity: 1; transform: none; }
  /* 단계 줄은 옆으로 밀어 넘긴다 */
  .trip-band { display: block; min-height: 0; }
  .trip-ph { position: relative; aspect-ratio: 4 / 3; }
  .trip-wrap { padding: 0 0 64px; margin-top: -72px; }
  .trip-card { box-shadow: 0 18px 40px rgba(20, 20, 20, .1); }
  /* 휴대폰 — 편지 세 장은 옆으로 넘김(세로로 쌓으면 화면 세 장 길이) */
  .desk, .desk.n1, .desk.n2 { display: flex; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 18px var(--gutter) 24px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
  .desk::-webkit-scrollbar { display: none; }
  .desk-card { flex: 0 0 74vw; scroll-snap-align: center; }
  .video-sec .yt-grid.yt-long { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 0 var(--gutter) 8px; margin: 0 calc(var(--gutter) * -1); }
  .video-sec .yt-grid.yt-long li { flex: 0 0 80%; scroll-snap-align: start; }
  .faq-c { grid-template-columns: 1fr; }
  .faq-cta { position: static; }
}
@media (max-width: 640px) {
  .hero { min-height: 600px; }
  .hero-img { object-position: 72% center; }   /* 세로 사진에서 두 사람이 오른쪽 끝에 잘리지 않게 */
  .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.36) 42%, rgba(255,255,255,0) 60%); }
  .hero-copy { justify-content: flex-start; padding-top: calc(var(--hd-h) + 40px); }
  .hero-title { font-size: 36px; margin: 18px 0 16px; }
  .hero-sub { font-size: 15.5px; }
  .hero-btns { margin-top: 28px; gap: 16px 24px; }
  .hero-btns .jj-btn { min-height: 52px; padding: 0 28px; }
  .hero-route { margin-top: 26px; gap: 10px; }
  .hr-city { font-size: 16px; }
  .hr-line { width: 84px; }
  @keyframes fly { 0% { transform: translateX(-4px) rotate(90deg); opacity: 0; } 14%, 84% { opacity: 1; } 100% { transform: translateX(70px) rotate(90deg); opacity: 0; } }
  .hr-meta { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .hero-scroll, .hero-badge { display: none; }
  .hero-ai { left: var(--gutter); right: auto; bottom: 16px; }
  .proof-say { font-size: 22px; text-align: left; }
  .m-trust { text-align: left; }
  .m-trust .eyebrow { justify-content: flex-start; }
  .m-trust-more, .fan-cap { text-align: left; }
  .sec-head.center { text-align: left; }
  .sec-head.center .eyebrow { justify-content: flex-start; }
  .m-stories-more { text-align: left; }
  .pano-f { gap: 8px 22px; }
  .trip-inc { grid-template-columns: 1fr; }
  .trip-card { padding: 28px 22px; }
  .home-shorts .yt-grid.yt-short { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; margin: 0 calc(var(--gutter) * -1); }
  .home-shorts .yt-grid.yt-short li { flex: 0 0 150px; scroll-snap-align: start; }
  .faq-list summary { grid-template-columns: 44px minmax(0, 1fr) 20px; }
  .faq-list details p { margin-left: 44px; }
  /* 상담 마무리 — 사진을 위에 온전히 두고 카드는 그 아래에 겹쳐 */
  /* 휴대폰 — 글을 위에, 사진은 그 아래 따로 (글이 두 사람 위에 겹치지 않게) */
  .closing { display: flex; flex-direction: column; min-height: 0; }
  .closing::before { display: none; }
  .closing-in { order: -1; padding: 0 0 36px; }
  .closing-ph { position: relative; aspect-ratio: 4 / 3; }
  .closing-ph img { object-position: 72% center; }
  .closing-title { font-size: 32px; }
  .closing-route { margin-top: 24px; font-size: 16px; } .closing-route i { width: 90px; }
  .closing-tel { margin: 8px 0 0; flex-basis: 100%; width: max-content; }
}

/* ── 움직임 줄이기 — 같은 내용, 움직임 없이 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-copy > :not(.hero-title), .hero-title .ln, .hero-scroll::after, .hr-plane, .hero-badge svg, .jn-bar i, .jn-panel { animation: none !important; }
  .mark-ring path { animation: none !important; stroke-dashoffset: 0; }
  .hl, .fan-c, .jn-ic { transition: none !important; }
  .js .proof-text .hl { background-size: 100% 40%; }
  .hr-plane { transform: translateX(66px) rotate(90deg); }
}

/* ── 마감 ── */
/* 세리프 숫자는 일반 숫자꼴로 — Cormorant 기본(옛 숫자꼴)은 「01」이 「OI」처럼 읽힌다 */
.trip-price b, .closing-tel, .hl .num, .eyebrow .no, .pano-f b, .jn-money b {
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.is-home .site-hd.scrolled { background: rgba(255, 255, 255, .97); }


/* ── 구획별 배경 (2026-10-14) — 흰색 → 아이보리 → 모래 → 사진 → 아이보리 → 흰색 → 살구 → 사진 ── */
#countries { background: var(--bg-ivory); }
.journey-sec { background: var(--bg-sand); margin-top: 0; }
.home-sec[aria-labelledby="stories-h"] { background: var(--bg-ivory); }
.video-sec { background: #fff; }
.faq-sec { background: var(--bg-blush); }
/* 나라 고르기 — 제목은 왼쪽, 한 줄은 오른쪽 (가운데 정렬만 반복되지 않게) */
#countries .sec-head.center { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; max-width: none; text-align: left; }
#countries .sec-head.center .eyebrow { justify-content: flex-start; }
#countries .sec-head.center .sec-lead { margin: 0; }
#countries .sec-head.center > .eyebrow { flex-basis: 100%; }
/* 이야기 — 편지 카드가 아이보리 위에서 떠 보이게 */

/* ── 대표님 원고 반영 (2026-10-14) ── */
.hero-sub { font-family: var(--font-serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; letter-spacing: -.02em; color: var(--ink); word-break: keep-all; }
.hero-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; animation: rise 1.3s .5s var(--ease) both; }
.hero-checks li { position: relative; padding-left: 22px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hero-checks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 10px; height: 6px; border-left: 2px solid var(--point); border-bottom: 2px solid var(--point); transform: rotate(-45deg); }
/* 신뢰 — 운영 원칙 넷 */
.m-trust .sec-head.center { margin-bottom: clamp(32px, 4vw, 52px); }
.principles { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; text-align: left;
              border-top: 1px solid var(--ink); }
.principles li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 26px 28px 26px 0; border-bottom: 1px solid var(--line); }
.principles li:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--line); }
.pr-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-ivory); display: grid; place-items: center; font-size: 22px; color: var(--ink-2); }
.principles h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -.02em; word-break: keep-all; }
.principles p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); word-break: keep-all; }
.principles a { color: var(--point-ink); font-weight: 600; white-space: nowrap; }
.m-trust .proof-text { margin-top: clamp(48px, 5vw, 72px); }
.m-trust .proof-say { font-size: clamp(19px, 1.7vw, 24px); }
/* 짝꿍맞선 카드 — 시그니처 */
.trip-facts { margin: 22px 0 0; border-top: 1px solid var(--ink); }
.trip-facts div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.trip-facts dt { font-size: 13.5px; color: var(--ink-3); }
.trip-facts dd { margin: 0; font-size: 15px; }
.trip-facts b { font: 300 34px/1 var(--font-num); color: var(--point); letter-spacing: -.03em; margin-right: 3px; font-variant-numeric: tabular-nums; }
.trip-inc-h { margin: 20px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.trip-inc-h + .trip-inc { margin-top: 8px; }
.trip-where { word-break: keep-all; line-height: 1.7; }
@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
  .principles li, .principles li:nth-child(even) { padding: 22px 0; border-left: 0; }
}
.trip-card .sec-title { font-size: clamp(28px, 2.6vw, 38px); }
.trip-card .sec-title, .trip-card .trip-where { word-break: keep-all; }

/* ── 2 믿을 수 있는 곳인가 — 2026-10-14 시안 B 「업체 고를 때 체크리스트」 (design/s-trust) ── */
.m-trust { text-align: left; padding: clamp(72px, 8vw, 120px) 0; }
.m-trust .tc { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.tc-side { position: sticky; top: 110px; }
.tc-side .eyebrow { justify-content: flex-start; }
.tc-side .sec-title { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.28; }
.tc-side .sec-lead { margin-top: 14px; }
.tc-tip { margin-top: 26px; padding: 20px 22px; border-radius: var(--r); background: var(--bg-blush); font-size: 14.5px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.tc-tip b { display: block; margin-bottom: 2px; font-family: var(--font-serif); font-weight: 400; font-size: 17px; color: var(--ink); }
.tc-more { margin: 22px 0 0; }
.tc-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.tc-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px; gap: 20px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.tc-box { width: 44px; height: 44px; border-radius: 12px; background: var(--point); display: grid; place-items: center; }
.tc-box::after { content: ""; width: 16px; height: 9px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -2px); }
.tc-q { font-size: 13px; color: var(--ink-3); }
.tc-list h3 { margin: 4px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 19px; line-height: 1.5; letter-spacing: -.02em; word-break: keep-all; }
.tc-list p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.tc-ev { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font-size: 13px; color: var(--ink-3); text-decoration: none; }
.tc-ev img { width: 72px; height: 92px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(60, 40, 20, .1); transition: transform .4s var(--ease); }
.tc-ev:hover img { transform: translateY(-3px) rotate(-2deg); }
.tc-ev b { font-family: var(--font-num); font-weight: 300; font-size: 24px; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.tc-ev:hover span { color: var(--point-ink); }
@media (max-width: 860px) {
  .m-trust .tc { grid-template-columns: 1fr; gap: 28px; }
  .tc-side { position: static; }
  .tc-side .sec-title br:first-of-type { display: none; }
  .tc-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 0; }
  .tc-box { width: 36px; height: 36px; border-radius: 10px; }
  .tc-box::after { width: 13px; height: 7px; }
  .tc-list h3 { font-size: 17px; }
  .tc-ev { grid-column: 2; justify-self: start; flex-direction: row; align-items: center; gap: 10px; }
  .tc-ev img { width: 44px; height: 56px; }
  .tc-ev b { font-size: 20px; }
}

/* ── 7 영상 — 롱폼 위 · 쇼츠 아래 세로 카드 띠 (2026-10-14 사용자 「위아래 나눠서」) ── */
.vs-shorts { margin-top: clamp(48px, 5.5vw, 72px); padding-top: clamp(32px, 3.6vw, 44px); border-top: 1px solid var(--line); }
.vs-shorts-h { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.vs-shorts-h h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.03em; }
.vs-shorts-h h3 span { margin-left: 8px; font-family: var(--font-num); font-size: 14px; color: var(--ink-3); letter-spacing: 0; }
.vs-ctrl { display: flex; gap: 8px; }
.vs-ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; transition: background .25s, color .25s; }
.vs-ctrl button:hover { background: var(--ink); color: #fff; }
.vs-shorts .yt-grid.yt-short { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 10px; }
.vs-shorts .yt-grid.yt-short::-webkit-scrollbar { display: none; }
.vs-shorts .yt-short li { flex: 0 0 200px; scroll-snap-align: start; }
.vs-shorts .yt-short .yt-thumb { border-radius: 22px; border: 5px solid #fff; box-shadow: 0 12px 28px rgba(60, 40, 20, .12); transition: transform .45s var(--ease); }
.vs-shorts .yt-card:hover .yt-thumb { transform: translateY(-5px); }
.vs-shorts .yt-short .yt-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.vs-shorts .yt-short .yt-play::after { left: 19px; top: 16px; border-width: 8px 0 8px 12px; }
.vs-shorts .yt-title { font-family: var(--font-sans, inherit); font-size: 14px; font-weight: 500; margin-top: 4px; }
@media (max-width: 760px) {
  .vs-ctrl { display: none; }
  .vs-shorts .yt-grid.yt-short { margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px; }
  .vs-shorts .yt-short li { flex-basis: 42%; }
}

.faq-all { margin: 28px 0 0; }

/* 첫 화면 영상 — 사진 위에 얹고 재생이 시작되면 서서히 (2026-10-15) */
/* 첫 장면 사진과 영상이 같은 그림 · 같은 자리 — 줌 없이, 영상은 재생이 시작되는 순간 그대로 바뀐다 */
.hero-poster { animation: none !important; }
.hero-poster, .hero-video { object-position: 62% center; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-video.on { opacity: 1; }
@media (max-width: 640px) { .hero-poster, .hero-video { object-position: 72% center; } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* 휴대폰 — 세로 길이 줄이기 (2026-10-15 「지금 너무 길어」) */
@media (max-width: 760px) {
  .home-sec { padding: 52px 0; }
  .hero-route { display: none; }                 /* 사진 속 두 사람과 겹친다 — 휴대폰에선 뺀다 */
  .pano .pano-c { min-height: 0; height: 300px; }
  .vs-shorts { margin-top: 20px; }
}
@media (max-width: 760px) { .pano-c::after { background: linear-gradient(180deg, rgba(20, 20, 20, .18) 0%, rgba(20, 20, 20, .78) 100%); } }

/* 첫 화면 「짝꿍」 — 손그림 동그라미 대신 분홍 글씨 (2026-10-21 대표님 「동그라미 체크 맘에 안 듦 · 핑크색 글씨로」) */
.hero-title .mark { color: #E45C6A; margin-right: 0; }

/* 첫 화면 「간편상담 문의」 — 화살표 원이 은은하게 깜빡이며 퍼진다 (2026-10-21) */
.hero-badge { width: auto; height: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.hero-badge .hb-core { position: relative; width: 72px; height: 72px; font-size: 26px; box-shadow: 0 10px 26px rgba(200, 105, 63, .35); animation: hb-blink 1.6s ease-in-out infinite; }
.hero-badge .hb-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--point); animation: hb-ring 1.6s ease-out infinite; }
.hb-label { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); font: 700 14px/1.2 var(--font-sans); letter-spacing: -.01em; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.hero-badge:hover .hb-core, .hero-badge:focus-visible .hb-core { animation: none; transform: scale(1.08); background: var(--ink); }
@keyframes hb-blink { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.12); } }
@keyframes hb-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-badge .hb-core, .hero-badge .hb-core::after { animation: none; } }

/* 2026-10-23 카톡 채널 「1:1 문의」가 더해져 단추 셋 — 오픈채팅은 윗줄 전체, 아래 두 개 반반(좁은 칸에서 글자 꺾임 막음) */
.faq-cta-btns { flex-wrap: wrap; }
.faq-cta-btns a { white-space: nowrap; }
.faq-cta-btns a.p { flex-basis: 100%; }

/* 2026-10-27 오픈 점검 (휴대폰) */
@media (max-width: 640px) {
  /* 「비용 먼저 보기」가 사진 속 사람 머리 위에 겹쳤다 — 밝은 바탕을 깔아 또렷하게 */
  .hero-btns .jj-link { padding: 12px 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .86); text-decoration: underline; text-underline-offset: 4px; }
  /* 영상 가로 띠 — 첫 카드가 화면 왼쪽 끝에 붙던 것 */
  .home-shorts .yt-grid.yt-short, .yt-grid { scroll-padding-left: var(--gutter); }
}
@media (max-width: 640px) {
  /* 상담 마무리 — 위 자주 묻는 질문과 붙어 있던 것 · 단추 셋 폭을 같게 */
  .closing-in { padding-top: 56px; }
  .closing-btns .jj-btn { flex: 1 1 100%; justify-content: center; }
}

/* 2026-10-27 사용자 「휴대폰 첫 화면 너무 난잡하다」 — 특징 세 줄 · 「비용 먼저 보기」를 휴대폰에서 뺀다(PC 는 그대로) */
@media (max-width: 640px) {
  .hero-checks, .hero-btns .jj-link { display: none; }
  .hero-btns { margin-top: 30px; }
}
.hero-sub .m-br { display: none; }
@media (max-width: 640px) { .hero-sub .m-br { display: inline; } .hero-sub { font-size: 17px; line-height: 1.65; } }