/* Tripper Korea — GENERATED by build.py (r11). Shared tokens/components come from variants.py (the home), page rules from sub.css. Edit those, not this file. */

*,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto} figure{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} h1,h2,h3{margin:0;text-wrap:balance} p{margin:0}
.wrap{width:min(100% - 40px,1240px);margin-inline:auto} @media(max-width:768px){.wrap{width:min(100% - 32px,1240px)}}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;z-index:99;border-radius:8px}.skip:focus{left:8px}
.hd-in{display:flex;align-items:center;gap:20px;min-height:64px}.logo{display:flex;align-items:center;min-height:44px}.logo img{height:36px;width:auto}.nv{display:flex;gap:26px;margin-left:12px;font-weight:600}.nv a{min-height:44px;display:inline-flex;align-items:center}.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ic{display:none;width:44px;height:44px;border:0;background:transparent;align-items:center;justify-content:center;border-radius:12px}.ic svg{width:24px;height:24px}.ic svg,.fact svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.nv{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:0;padding:8px 16px 16px;background:inherit;border-bottom:1px solid rgba(128,128,128,.25)}.nv a{padding:14px 4px;min-height:48px;display:flex;align-items:center}.hd.open .nv{display:flex}.ic{display:inline-flex}.hd-r .btn.sm{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;font-weight:700;border:1.5px solid transparent;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s,color .18s,border-color .18s}.btn:active{transform:scale(.98)}.btn.sm{min-height:42px;padding:0 16px;font-size:15px}
:focus-visible{outline:3px solid #7C1B28;outline-offset:3px}
.rt{display:inline-flex;align-items:center;gap:5px;font-weight:700}.rt i{font-style:normal}.rt small{font-weight:500;opacity:.75;font-size:13px}.rt.new{font-weight:700}
.pr b{font-size:1.15em}.pr small{opacity:.75;font-size:13px}
.tg{position:absolute;left:10px;top:10px;font-size:12px;font-weight:800;letter-spacing:.02em;padding:5px 9px;background:#7C1B28;color:#fff}.tg.alt{background:#17191C}
.sec{padding:56px 0}@media(min-width:900px){.sec{padding:88px 0}}
.sh{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.sh p{margin-top:6px;max-width:60ch}.sh .more{font-weight:700;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.ft{padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ln,#E4E4E2);font-size:14px}.ft-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}.ft-nav{display:flex;flex-wrap:wrap;margin:0 -8px}.ft-g{display:flex;flex-wrap:wrap}.ft-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 8px;font-weight:600;white-space:nowrap}.ft-legal{margin-top:6px;font-size:12px;line-height:1.6;color:var(--mu,#6E6E6B)}.ft-legal p{margin:0}@media(max-width:600px){.ft-nav{flex:0 0 100%;justify-content:space-between;margin:0}.ft-g{display:contents}.ft-nav a{padding:0}}@media(max-width:380px){.ft-nav a{font-size:13px}}@media(max-width:339px){.ft-nav{justify-content:flex-start;margin:0 -8px}.ft-g{display:flex;flex-basis:100%}.ft-nav a{padding:0 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

:root{--bg:#fff;--sf:#F3F3F2;--ln:#E4E4E2;--ink:#111;--tx:#3A3A3A;--mu:#6E6E6B;--br:#7C1B28;--ok:#1B7A3E;--sky:linear-gradient(180deg,#EDF1F5 0%,#E6E2DC 100%)}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--bg);color:var(--tx)} h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.025em}
.hd{position:sticky;top:0;z-index:20;margin-bottom:-64px;color:#fff}.hd .lg-d{display:none}.nv a{color:#fff}.ic{color:#fff}.hd .btn.sm{background:#fff;color:var(--ink)}
.th{display:inline-flex}.th .mo{display:none}html[data-theme=dark] .th .su{display:none}html[data-theme=dark] .th .mo{display:block}
.hd.on,.hd.open{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--ln)}.hd.on .lg-w,.hd.open .lg-w{display:none}.hd.on .lg-d,.hd.open .lg-d{display:block}.hd.on .nv a,.hd.open .nv a{color:var(--ink)}.hd.on .ic,.hd.open .ic{color:var(--ink)}.hd.on .btn.sm,.hd.open .btn.sm{background:var(--br);color:#fff}
@media(max-width:900px){.nv{background:#fff;color:var(--ink)}.nv a{color:var(--ink)}}
.btn{border-radius:12px;background:var(--br);color:#fff}.btn:hover{background:#5F1420}.btn.white{background:#fff;color:var(--ink)}.btn.white:hover{background:#eee}.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}.btn.line{background:#fff;color:var(--ink);border-color:var(--ln)}.btn.line:hover{border-color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 16px 0;margin:0 -16px;scrollbar-width:none}@media(min-width:900px){.chips{padding:22px 0 0;margin:0}}.chips::-webkit-scrollbar{display:none}.chips a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--ln);border-radius:999px;background:#fff;font-weight:700;font-size:14px;color:var(--ink)}.chips a:hover{border-color:var(--ink)}
.sec{padding:32px 0}@media(min-width:900px){.sec{padding:52px 0}}.sh{margin-bottom:16px}.sh h2{font-size:clamp(22px,2.6vw,30px)}.sh p{color:var(--mu);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.card{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}.card:hover{box-shadow:0 12px 28px -14px rgba(16,20,24,.35);transform:translateY(-2px)}
.card .ph{position:relative;aspect-ratio:4/3;background:var(--sf)}.card img{width:100%;height:100%;object-fit:cover}.card .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.card .mt{font-size:12px;color:var(--mu);font-weight:600}.card h3{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .rt{font-size:13px;color:var(--ink)}.card .rt i{color:var(--br)}.card .fc{font-size:12px;color:var(--ok);font-weight:700}.card .pr{margin-top:auto;padding-top:6px;color:var(--ink);font-size:13px}.card .pr b{font-size:17px}
.tg{border-radius:6px;font-size:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111;color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50;max-width:calc(100% - 32px);text-align:center}.toast.is-on{opacity:1;transform:translate(-50%,0)}
.more{display:flex;justify-content:center;margin-top:22px}.more .btn{min-height:46px;padding:0 22px}
.pl{display:inline-flex;align-items:center;height:14px;flex:none}.pl img{height:100%;width:auto;display:block}.pl-tk{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--br)}
.ft{background:var(--bg);color:var(--tx)}.ft a:hover{color:var(--br)}
.card .ph{overflow:hidden}.card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.card:hover img{transform:scale(1.05)}.card:hover{box-shadow:0 16px 32px -14px rgba(124,27,40,.35);border-color:#E7C9CD}
.chips a:hover{border-color:var(--br);color:var(--br)}.btn{transition:background .2s,transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(124,27,40,.6)}
/* r11 (CEO 2026-10-12 "해당 디자인으로 모든 페이지 적용"): one header on every page. .solid = sub pages (bar from the first pixel, no hero overlap); .hd-acc / .nv .acc = account links (PC: text link left of the button; phones: inside the menu). */
.hd.solid{margin-bottom:0}.hd-acc{font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 8px}.hd-acc:hover{color:var(--br)}.hd:not(.on):not(.open) .hd-acc:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}.nv .acc{display:none}@media(max-width:900px){.hd-acc{display:none}.nv .acc{display:flex}.nv .acc:first-of-type{border-top:1px solid var(--ln);margin-top:6px;padding-top:16px}}

html[data-theme=dark]{--bg:#121212;--sf:#1C1A1A;--ln:rgba(255,255,255,.1);--ink:#F4F0EA;--tx:#D9D3CA;--mu:#A39E96;--br:#7C1B28;--hi:#DE5466;--ok:#6FCF8E;--sky:linear-gradient(180deg,#0E1217 0%,#1B1C20 100%)}
html[data-theme=dark] body{background:var(--bg);color:var(--tx)}
html[data-theme=dark] :focus-visible{outline-color:var(--hi)}
html[data-theme=dark] .hd.on,html[data-theme=dark] .hd.open{background:#121212;color:var(--ink);box-shadow:0 1px 0 var(--ln)}html[data-theme=dark] .hd.on .lg-w,html[data-theme=dark] .hd.open .lg-w{display:block}html[data-theme=dark] .hd.on .lg-d,html[data-theme=dark] .hd.open .lg-d{display:none}html[data-theme=dark] .hd.on .nv a,html[data-theme=dark] .hd.open .nv a{color:var(--ink)}html[data-theme=dark] .hd.on .ic,html[data-theme=dark] .hd.open .ic{color:var(--ink)}
@media(max-width:900px){html[data-theme=dark] .nv{background:#121212;color:var(--ink)}html[data-theme=dark] .nv a{color:var(--ink)}}
html[data-theme=dark] .btn:hover{background:#962233}html[data-theme=dark] .btn.white{background:#fff;color:#111}html[data-theme=dark] .btn.white:hover{background:#eee}html[data-theme=dark] .hd:not(.on):not(.open) .btn.sm{color:#111}html[data-theme=dark] .btn.line{background:var(--sf);color:var(--ink);border-color:var(--ln)}html[data-theme=dark] .btn.line:hover{border-color:var(--ink)}
html[data-theme=dark] .hero::after{background:linear-gradient(180deg,rgba(18,18,18,.3) 4px,rgba(18,18,18,0) calc(35% + 1.2px),rgba(18,18,18,.75) calc(78% - 2.24px),#121212 calc(100% - 4px))}
html[data-theme=dark] .kick{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hi);margin-bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.6);animation:up .7s cubic-bezier(.2,.7,.2,1) both}
html[data-theme=dark] .chips a{background:var(--sf);border-color:var(--ln);color:var(--ink)}html[data-theme=dark] .chips a:hover{border-color:var(--hi);color:var(--hi)}
html[data-theme=dark] .card{background:var(--sf);border-color:var(--ln)}html[data-theme=dark] .card:hover{border-color:rgba(255,255,255,.24);box-shadow:none}html[data-theme=dark] .card .ph{background:#000}html[data-theme=dark] .card img{opacity:.92}html[data-theme=dark] .card .rt i{color:var(--hi)}html[data-theme=dark] .card .fc{color:var(--ok)}
html[data-theme=dark] .inq{background:#171515}html[data-theme=dark] .inq input,html[data-theme=dark] .inq textarea{background:#121212;border-color:rgba(255,255,255,.18)}html[data-theme=dark] .inq input::placeholder,html[data-theme=dark] .inq textarea::placeholder{color:#6F6A63}
html[data-theme=dark] .rvc{background:var(--sf);border-color:var(--ln)}html[data-theme=dark] .rvc .st{color:var(--hi)}html[data-theme=dark] .rv-sum i{color:var(--hi)}html[data-theme=dark] .rc-ctl .ar{background:var(--sf);color:var(--ink);border-color:var(--ln)}html[data-theme=dark] .rc-ctl .ar:hover{border-color:var(--ink)}
html[data-theme=dark] .pl img{filter:grayscale(1) invert(1) brightness(1.4)}html[data-theme=dark] .pls .pl{opacity:.55}html[data-theme=dark] .pls:hover .pl{opacity:.95}html[data-theme=dark] .pl-tk{color:var(--hi)}
html[data-theme=dark] .px .px-bg{filter:brightness(.55) saturate(.85)}
html[data-theme=dark] .ft{background:var(--bg);color:var(--tx)}html[data-theme=dark] .ft a:hover{color:var(--hi)}
@media(max-width:760px){html[data-theme=dark] .hero{background:#121212}html[data-theme=dark] .hero .slides::after{background:linear-gradient(180deg,rgba(0,0,0,.22) 4px,rgba(0,0,0,0) calc(38% + .96px),rgba(18,18,18,0) calc(62% - .96px),#121212 calc(100% - 4px))}}
@media(prefers-reduced-motion:reduce){html[data-theme=dark] .kick{animation:none!important}}

/* ---- sub pages (sub.css) ---- */
*, *::before, *::after { box-sizing: border-box; }
h4 { font-family: var(--trp-serif); color: var(--ink); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
input, textarea, select, button { font: inherit; color: inherit; }
input, textarea, select { font-size: 16px; }
button, [role="button"], .tab, summary { touch-action: manipulation; }
button, [role="button"], .tab, summary, .qty button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.num, .total, .qty output { font-variant-numeric: tabular-nums; }
.photo img, .gallery img, .hero-media img { outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
.section { padding-block: 44px; }
.section + .section { border-top: 1px solid var(--ln); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head p { color: var(--mu); margin-top: 6px; max-width: 60ch; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--br); margin-bottom: 10px; }
@media (min-width: 768px) {
  .section { padding-block: 64px; }
}
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; background: #111; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; outline: 0; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.78) 80%, rgba(0,0,0,.92) 100%); }
.hero .wrap { padding: 32px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.hero .eyebrow { color: #fff; opacity: .85; }
.hero h1 { color: #fff; max-width: 14ch; font-size: clamp(34px, 8.2vw, 64px); }
.hero p.lead { margin-top: 14px; max-width: 48ch; font-size: clamp(16px, 2.2vw, 19px); color: rgba(255,255,255,.88); }
.hero .ctas { display: grid; gap: 10px; margin-top: 22px; }
.hero .trust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.84); }
.hero .trust b { color: #fff; font-weight: 700; }
.hero .trust .star { color: #F3C66B; }
@media (min-width: 768px) {
  .hero { min-height: min(86svh, 760px); }
  .hero .wrap { padding-block: 72px; }
  .hero .ctas { display: flex; }
}
.facts { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.fact { padding: 16px; border: 1px solid var(--ln); border-radius: var(--trp-radius-card); background: var(--bg); }
.fact svg { width: 22px; height: 22px; stroke: var(--br); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.fact b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.fact p { font-size: 14px; color: var(--mu); }
@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .fact { padding: 22px; }
}
.band { position: relative; color: #fff; background: #111; border-radius: var(--trp-radius-card); overflow: hidden; isolation: isolate; padding: 28px 22px; display: grid; gap: 16px; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .55; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 100%); }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.85); max-width: 52ch; }
.band ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: rgba(255,255,255,.9); font-size: 15px; }
.band ul li::before { content: "— "; color: #fff; }
@media (min-width: 768px) {
  .band { padding: 48px; grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.reviews { display: grid; gap: 12px; align-items: start; }
.review { padding: 14px 16px; border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); display: grid; gap: 8px; align-content: start; }
.review p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review.open p { display: block; -webkit-line-clamp: unset; }
.review .rm { justify-self: start; min-height: 32px; padding: 0 2px; border: 0; background: transparent; color: var(--br); font-weight: 700; font-size: 13px; cursor: pointer; }
.review .rm[hidden] { display: none; }
.review .who { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mu); }
.review .who b { color: var(--ink); font-weight: 600; }
.review .stars { color: var(--star); letter-spacing: 1px; font-size: 14px; }
.review p { font-size: 14px; line-height: 1.55; color: var(--tx); }
.review .src { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--br); }
@media (min-width: 768px) {
  .reviews { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.review-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 18px; border: 1px solid var(--ln); background: var(--sf); border-radius: var(--trp-radius-card); margin-bottom: 14px; }
.review-sum .big { font-family: var(--trp-serif); font-size: 36px; color: var(--ink); line-height: 1; }
.review-sum .sub { font-size: 14px; color: var(--mu); }
.review-sum .sub b { color: var(--ink); font-weight: 600; }
.faq details { border-top: 1px solid var(--ln); }
.faq details:last-child { border-bottom: 1px solid var(--ln); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-weight: 600; color: var(--ink); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--trp-serif); font-size: 24px; color: var(--br); transition: transform 160ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 18px; color: var(--tx); max-width: 70ch; }
.page-head { padding: 28px 0 8px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--mu); margin-bottom: 12px; }
.crumbs a { color: var(--mu); }
.crumbs li { list-style: none; }
.crumbs ol { display: contents; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ln); }
.page-head p.lead { margin-top: 10px; max-width: 62ch; color: var(--mu); font-size: 17px; }
.filterbar { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 10px 0; border-bottom: 1px solid var(--ln); margin-bottom: 20px; }
.filterbar .row { display: flex; align-items: center; gap: 10px; }
.filterbar .chips { flex: 1 1 auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.select { position: relative; flex: 0 0 auto; }
.select select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--ln); border-radius: 999px; background: var(--bg); font-size: 16px; color: var(--ink); }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.count { font-size: 14px; color: var(--mu); }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.count-row .select select { min-height: 40px; font-size: 16px; }
.empty { padding: 40px 20px; text-align: center; color: var(--mu); border: 1px dashed var(--ln); border-radius: var(--trp-radius-card); }
/* r29 photo gallery: track (1 photo on phones, 2 on wider screens) + prev/next + counter + thumbnail strip + full-screen viewer */
.pg { position: relative; }
.pg-stage { position: relative; }
.gallery { position: relative; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: var(--trp-radius-card); }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--trp-radius-card); background: var(--sf); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.pg-nav { position: absolute; top: 50%; translate: 0 -50%; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .94); color: #111; box-shadow: 0 2px 10px rgb(0 0 0 / .22); cursor: pointer; transition: opacity .2s; z-index: 2; }
.pg-prev { left: 10px; } .pg-next { right: 10px; }
.pg-nav[disabled] { opacity: 0; pointer-events: none; }
.pg-nav::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }   /* r30: smaller circle, touch area stays 44px */
.pg-count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font: 600 13px/1 var(--trp-sans, inherit); font-variant-numeric: tabular-nums; cursor: pointer; z-index: 2; }
.pg:not(.pg-js) .pg-nav, .pg:not(.pg-js) .pg-count, .pg:not(.pg-js) .pg-thumbs { display: none; }   /* no JS: the track still swipes */
.pg-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 3px; overflow-x: auto; scrollbar-width: none; position: relative; }
.pg-thumbs::-webkit-scrollbar { display: none; }
.pg-thumb { flex: 0 0 64px; height: 48px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--sf); opacity: .55; cursor: pointer; transition: opacity .15s; outline: 2px solid transparent; outline-offset: 1px; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb:hover, .pg-thumb.in-view { opacity: 1; }
.pg-thumb[aria-current="true"] { opacity: 1; outline-color: var(--br); }
html[data-theme=dark] .pg-thumb[aria-current="true"] { outline-color: var(--hi); }
.pg-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.pg-lb::backdrop { background: #000; }
html:has(.pg-lb[open]) { overflow: hidden; }
.pg-lb-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.pg-lb-track::-webkit-scrollbar { display: none; }
.pg-lb-track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; padding: 56px 0; }
.pg-lb-track img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-lb .pg-nav { background: rgb(255 255 255 / .16); color: #fff; box-shadow: none; }
.pg-lb-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; cursor: pointer; z-index: 3; }
.pg-lb-count { position: absolute; top: 22px; left: 0; right: 0; margin: 0; text-align: center; font: 600 14px/1 var(--trp-sans, inherit); font-variant-numeric: tabular-nums; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pg-nav, .pg-thumb { transition: none; } }
@media (min-width: 768px) {   /* r29: tablets and up — two photos side by side (one 4:3 photo would be ~550px tall) */
  .gallery figure { flex-basis: calc(50% - 4px); aspect-ratio: 3 / 2; }
  .pg-nav { width: 38px; height: 38px; } .pg-prev { left: 14px; } .pg-next { right: 14px; }
  .pg-thumb { flex-basis: 84px; height: 60px; }
  .pg-lb .pg-prev { left: 20px; } .pg-lb .pg-next { right: 20px; }
}
.detail { display: grid; gap: 34px; padding-block: 24px 40px; }
.detail-main { display: grid; gap: 32px; min-width: 0; }
.detail-main > *, .block, .tabs, .reviews, .gallery { min-width: 0; }
.detail h1 { font-size: clamp(26px, 4.4vw, 38px); }
.summary { color: var(--tx); font-size: 17px; margin-top: 10px; max-width: 70ch; }
.factrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.factrow div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--trp-radius-card); background: var(--bg); }
.factrow dt { font-size: 11px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); white-space: nowrap; }
.factrow dd { margin: 0; font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.35; text-wrap: balance; font-variant-numeric: tabular-nums; }
.factrow dd .nw { white-space: nowrap; }   /* r28: wrap only between items */
@media (min-width: 768px) {
  .factrow { grid-template-columns: repeat(4, 1fr); }
}
.block h2 { font-size: 22px; margin-bottom: 14px; }
.block ul.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.block ul.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--tx); }
.block ul.checks li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sf) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C1B28' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.block ul.checks.no li::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362605B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-color: #F1ECE3; }
.twocol { display: grid; gap: 22px; }
@media (min-width: 768px) {
  .twocol { grid-template-columns: 1fr 1fr; }
}
.trp-itin-sum { margin: -4px 0 20px; font-size: 14px; color: var(--mu); }
.trp-itin-sum b { color: var(--ink); font-weight: 600; }
.trp-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 26px; font-size: 13px; }
.trp-route span { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--trp-radius); padding: 5px 12px; color: var(--ink); }
.trp-route i { font-style: normal; color: var(--ln); }
.trp-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.trp-timeline::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 26px; border-left: 2px solid var(--ln); }
.trp-stop { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px; column-gap: 18px; align-items: start; padding: 0 0 26px; margin: 0; }
.trp-stop-num { box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1px solid var(--br); color: var(--br); font-family: var(--trp-serif); font-size: 17px; font-weight: 400; line-height: 34px; text-align: center; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.trp-stop-when { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--br); }
.trp-stop-body h3 { font-family: var(--trp-serif); font-size: 21px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; margin: 5px 0 6px; color: var(--ink); }
.trp-stop-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tx); }
.trp-stop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trp-stop-chips span { font-size: 12px; padding: 3px 9px; border-radius: var(--trp-radius); background: var(--sf); border: 1px solid var(--ln); color: var(--mu); white-space: nowrap; }
.trp-stop-chips .trp-chip-opt { background: var(--sf); color: var(--br); border-color: var(--sf); font-weight: 700; }
.trp-stop > img { width: 150px; height: 104px; object-fit: cover; border-radius: var(--trp-radius); display: block; background: var(--sf); }
.trp-leg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 0 0 26px; margin: -8px 0 0; }
.trp-leg span { font-size: 12px; color: var(--mu); letter-spacing: .02em; }
.trp-leg .trp-rl-move { margin-right: 2px; vertical-align: middle; }
.trp-leg .trp-rl-move b { font-weight: 600; color: var(--br); letter-spacing: .02em; }
.trp-leg .trp-rl-leg { width: 22px; height: 0; border: 0; border-top: 3px solid var(--br); border-radius: 0; background: none; justify-self: auto; }
.trp-leg .trp-rl-leg.walk { border-top-style: dashed; }
html[data-theme=dark] .trp-leg .trp-rl-leg { border-top-color: var(--hi); }
.trp-leg i { justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ln); position: relative; z-index: 1; }
.trp-end { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px; align-items: center; margin: 0; }
.trp-end i { justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--br); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.trp-end span { font-size: 14px; color: var(--mu); }
.trp-itin-note { margin: 22px 0 0; padding: 12px 16px 12px 19px; background: var(--sf); border-radius: var(--trp-radius); box-shadow: inset 3px 0 0 var(--br); font-size: 13px; line-height: 1.6; color: var(--mu); }
@media (max-width: 768px) {
  .trp-timeline::before { left: 15px; }
  .trp-stop { grid-template-columns: 32px minmax(0, 1fr) 96px; column-gap: 12px; }
  .trp-stop-num { width: 32px; height: 32px; line-height: 30px; font-size: 16px; }
  .trp-stop > img { width: 96px; height: 96px; }
  .trp-stop-body h3 { font-size: 18px; margin-top: 2px; }
  .trp-leg, .trp-end { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .trp-route { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .trp-route::-webkit-scrollbar { display: none; }
  .trp-route span { white-space: nowrap; }
}
.route { font-size: 14px; color: var(--mu); margin-bottom: 14px; }
.desc { max-width: 72ch; white-space: pre-line; color: var(--tx); }
.desc[data-clamp="1"] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.desc.about { white-space: normal; }
.desc.about p { margin: 0 0 12px; }
.desc.about p:last-child { margin-bottom: 0; }   /* r12: "About this tour" = three short paragraphs from copy/seo-copy.json */
.linkbtn { background: none; border: 0; padding: 0; margin-top: 10px; color: var(--br); font-weight: 600; border-bottom: 1px solid currentColor; cursor: pointer; }
.meet { display: grid; gap: 12px; }
.meet ul { margin: 0; padding-left: 18px; color: var(--tx); }
.map { aspect-ratio: 16 / 9; border: 1px solid var(--ln); border-radius: var(--trp-radius-card); overflow: hidden; background: var(--sf); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cards-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cards-info li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); font-size: 14.5px; color: var(--tx); }
.cards-info li::before { content: ""; width: 32px; height: 32px; border-radius: var(--trp-radius); background: var(--sf) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C1B28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v4M12 17.5v.5'/%3E%3C/svg%3E") center/18px no-repeat; }
@media (min-width: 768px) {
  .cards-info { grid-template-columns: 1fr 1fr; }
}
/* r15: icon tiles (highlights) + policy tiles. .ico = 34px tile holding an 18px line icon from the page's own <symbol> sprite. */
.ico { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: var(--trp-radius); background: var(--sf); color: var(--br); flex: none; }
ul.hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.hl li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; min-height: 34px; color: var(--tx); }
.pol-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pol { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); }
.pol .ico { border-radius: 50%; }
.pol.ok .ico { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pol.no .ico { color: var(--mu); }
.pol.re .ico { color: var(--br); background: color-mix(in srgb, var(--br) 10%, transparent); }
.pol b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.pol p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mu); }
.pol-note { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; margin: 10px 0 0; padding: 12px 14px; border-radius: var(--trp-radius-card); background: var(--sf); color: var(--tx); font-size: 14.5px; }
.pol-note .ico { background: var(--bg); }
html[data-theme=dark] .ico, html[data-theme=dark] .pol.re .ico { color: var(--hi); }   /* dark mode: the lighter crimson the stars and links use, so the icons read on the dark tile */
@media (min-width: 720px) {
  .pol-grid { grid-template-columns: repeat(3, 1fr); }
  .pol { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
}
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--ln); border-radius: 999px; background: var(--bg); font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform var(--press) var(--ease-out), background-color var(--press), color var(--press), border-color var(--press); }
.tab:active { transform: scale(0.96); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab small { opacity: .7; }
.book-panel { display: none; }
.book { position: sticky; top: calc(var(--header-h) + 16px); border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); padding: 20px; display: grid; gap: 14px; }
.book .from { font-size: 14px; color: var(--mu); }
.book .from b { display: block; font-size: 28px; color: var(--ink); font-family: var(--trp-serif); font-weight: 500; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { min-height: 48px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--trp-radius); background: var(--bg); width: 100%; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--br); outline: 2px solid rgba(124,27,40,.18); outline-offset: 0; }
.field .hint { font-size: 12.5px; color: var(--mu); }
.field.err input { border-color: var(--err); }
.field .error { display: none; font-size: 12.5px; color: var(--err); }
.field.err .error { display: block; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ln); }
.opt .name { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.opt .sub { font-size: 13px; color: var(--mu); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ln); border-radius: 999px; }
.qty button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 999px; transition: transform var(--press) var(--ease-out), background-color var(--press); color: var(--ink); }
.qty button:active { transform: scale(0.9); background: var(--sf); }
.qty button[disabled] { opacity: .35; cursor: default; }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--ln); }
.total b { font-size: 22px; color: var(--ink); }
.total small { color: var(--mu); font-size: 13px; }
.trust-lines { display: grid; gap: 6px; font-size: 13px; color: var(--mu); }
.trust-lines li { list-style: none; }
.trust-lines ul { margin: 0; padding: 0; }
@media (min-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .book-panel { display: block; }
}
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--ln); box-shadow: var(--trp-float); }
.sticky-bar .from { font-size: 12.5px; color: var(--mu); line-height: 1.2; }
.sticky-bar .from b { display: block; font-size: 20px; color: var(--ink); font-family: var(--trp-serif); font-weight: 500; }
.sticky-bar .btn { flex: 0 0 auto; min-width: 58%; }
@media (min-width: 1000px) {
  .sticky-bar { display: none; }
}
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: 12px 12px 0 0; padding: 8px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 240ms var(--ease-out); }
.sheet .handle { width: 36px; height: 4px; border-radius: 2px; background: var(--ln); margin: 6px auto 14px; }
.sheet.is-open { transform: none; }
.sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease-out), visibility 0s; }
.sheet .book { position: static; border: 0; padding: 0; }
@media (min-width: 1000px) {
  .sheet, .sheet-backdrop { display: none; }
}
.narrow { max-width: 520px; margin-inline: auto; padding-block: 28px 48px; display: grid; gap: 18px; }
.narrow h1 { font-size: 30px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--mu); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--ln); }
.google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--ln); border-radius: var(--trp-radius); background: var(--bg); font-weight: 600; color: var(--ink); cursor: pointer; transition: transform var(--press) var(--ease-out), background-color var(--press); }
.google:active { transform: scale(0.98); background: var(--sf); }
.google svg { width: 20px; height: 20px; }
.check { display: flex; gap: 10px; align-items: start; font-size: 14.5px; color: var(--tx); min-height: 44px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--br); flex: 0 0 auto; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.links a { color: var(--br); font-weight: 600; }
.steps { display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.step .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sf); color: var(--br); font-weight: 700; font-family: var(--trp-serif); }
.step b { display: block; color: var(--ink); margin-bottom: 2px; }
.step p { color: var(--mu); font-size: 14.5px; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.checkout { display: grid; gap: 28px; padding-block: 8px 40px; }
.panel { border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); padding: 18px; display: grid; gap: 14px; }
.panel h2 { font-size: 20px; }
.panel .row2 { display: grid; gap: 12px; }
@media (min-width: 600px) {
  .panel .row2 { grid-template-columns: 1fr 1fr; }
}
.summary-card { display: grid; gap: 12px; }
.summary-card .tour { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.summary-card .tour img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--trp-radius-card); }
.summary-card .tour b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.3; }
.summary-card .tour small { color: var(--mu); }
.line { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--tx); }
.line.total { font-size: 16px; }
.pay { display: grid; gap: 10px; }
.paybtn { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border: 1px solid var(--ln); border-radius: var(--trp-radius); background: var(--bg); font-weight: 600; cursor: pointer; transition: transform var(--press) var(--ease-out), border-color var(--press), background-color var(--press); }
.paybtn:active { transform: scale(0.98); }
.paybtn[aria-pressed="true"] { border-color: var(--br); box-shadow: inset 0 0 0 1px var(--br); background: var(--sf); }
.paybtn small { font-weight: 500; color: var(--mu); }
.note { font-size: 13px; color: var(--mu); }
.demo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #FFF3C4; color: #6B4E00; border-radius: var(--trp-radius); }
@media (min-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .checkout aside { position: sticky; top: calc(var(--header-h) + 16px); }
}
.confirm-hero { text-align: center; padding: 40px 0 10px; display: grid; gap: 10px; justify-items: center; }
.confirm-hero .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--sf); display: grid; place-items: center; color: var(--br); }
.confirm-hero .ok svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ref { font-family: var(--trp-serif); font-size: 22px; letter-spacing: .08em; color: var(--ink); }
.booking-list { display: grid; gap: 12px; }
.booking-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); color: var(--ink); }
.booking-row img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--trp-radius-card); }
.booking-row b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.booking-row small { color: var(--mu); display: block; margin-top: 2px; }
.status { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--trp-radius); background: #E5F3E8; color: #1E6B32; white-space: nowrap; }
.status.pending { background: #FFF3C4; color: #6B4E00; }
.status.done { background: var(--sf); color: var(--mu); }
.kv { display: grid; gap: 10px; }
.kv div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 14.5px; }
.kv dt { color: var(--mu); }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.prose { max-width: 72ch; display: grid; gap: 14px; color: var(--tx); }
.prose h2 { font-size: 22px; margin-top: 10px; }
.prose ul { margin: 0; padding-left: 20px; }
.about-grid { display: grid; gap: 24px; }
.about-grid .photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--trp-radius-card); }
.about-grid .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.notfound { text-align: center; padding: 64px 0; display: grid; gap: 14px; justify-items: center; }
.notfound .big { font-family: var(--trp-serif); font-size: 72px; color: var(--ln); line-height: 1; }
.linkbtn, .links a, .crumbs a, .trust-lines a, .note a, .check a, .prose a, .kv a { display: inline-flex; align-items: center; min-height: 40px; margin-block: -10px; }
.crumbs { align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { padding-inline: 4px; margin-inline: -4px; }
.links { align-items: center; }
.trp-route-map { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ln); }
.trp-route-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.trp-route-head h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.trp-route-head .btn { min-height: 44px; }
.trp-rl-sample { font-family: var(--trp-sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mu); border: 1px solid var(--ln); border-radius: 999px; padding: 3px 8px; }
.trp-map { display: block; width: 100%; height: 300px; border: 1px solid var(--ln); border-radius: var(--trp-radius-card); background: #EEF0EA; isolation: isolate; }
.trp-map.leaflet-container { font-family: var(--trp-sans); z-index: 0; }
.trp-map:focus-visible { outline: 3px solid var(--br); outline-offset: 3px; }
@media (min-width: 900px) {
  .trp-map { height: 420px; }
}
iframe.trp-map { border: 1px solid var(--ln); }
.trp-map-attr { margin: 8px 0 0; font-size: 12px; color: var(--mu); }
.trp-map-attr a { color: inherit; display: inline-block; padding: 13px 0; margin: -13px 0; }
.trp-pin { width: 28px; height: 28px; border-radius: 50%; background: var(--br); color: #fff; font: 700 13px/28px var(--trp-sans); text-align: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.trp-pin.start { background: var(--ink); }
.trp-map .leaflet-popup-content { margin: 10px 14px; font: 500 14px/1.4 var(--trp-sans); color: var(--ink); }
.trp-map .leaflet-popup-content-wrapper { border-radius: 8px; }
.trp-map .leaflet-bar a, .leaflet-touch .trp-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.trp-map .leaflet-control-attribution { display: none; }
.trp-route-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.trp-route-legend li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; font-size: 14px; min-height: 28px; }
.trp-route-legend li > span:nth-child(2) { min-width: 0; }
.trp-route-legend b { width: 24px; height: 24px; border-radius: 50%; background: var(--br); color: #fff; font: 700 12px/24px var(--trp-sans); text-align: center; }
.trp-route-legend b.start { background: var(--ink); }
.trp-route-legend li.unpinned b { background: transparent; color: var(--mu); border: 1.5px solid var(--ln); line-height: 21px; }
.trp-route-legend li.unpinned span { color: var(--mu); }
.trp-route-legend small { color: var(--mu); font-size: 12px; }
.trp-rl-leg { display: inline-block; width: 28px; height: 0; border-top: 3px solid var(--br); margin-right: 6px; vertical-align: middle; }
.trp-rl-leg.walk { border-top-style: dashed; }
.trp-rl-move { display: inline-flex; align-items: center; white-space: nowrap; }
.trp-route-note { margin-top: 14px; }
.co-meet { padding: 12px 16px 12px 19px; background: var(--sf); border-radius: var(--trp-radius); box-shadow: inset 3px 0 0 var(--br); font-size: 14px; line-height: 1.55; }
.co-meet b { display: block; margin-bottom: 4px; font-family: var(--trp-sans); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--br); }
.co-meet p { margin: 0; }
.co-meet .co-meet-sub { margin-top: 6px; font-size: 13px; color: var(--mu); }
.co-meet .co-meet-map { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--br); text-decoration: underline; text-underline-offset: 3px; }
.co-meet .co-meet-map:hover { text-decoration-thickness: 2px; }
.co-meet .co-meet-map[hidden] { display: none; }

/* ---- r11 (CEO 2026-10-12 "해당 디자인으로 모든 페이지 적용"): sub-page tokens on top of the home's, headings, the button/chip/tag variants the sub pages use ---- */
:root{--brd:#5F1420;--err:#C0392B;--star:var(--br);--header-h:64px;--gutter:20px;--trp-radius:10px;--trp-radius-card:14px;--trp-serif:"Plus Jakarta Sans",system-ui,sans-serif;--trp-sans:"Plus Jakarta Sans",system-ui,sans-serif;--trp-elev:0 1px 2px rgba(0,0,0,.05),0 10px 28px -16px rgba(16,20,24,.3);--trp-float:0 -8px 20px -14px rgba(0,0,0,.3);--ease-out:cubic-bezier(.2,0,0,1);--press:100ms}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (max-width: 768px) { :root { --gutter: 16px; } }   /* r17: match .wrap (100% - 32px) so the full-bleed scrollers (gallery, chips, route) stop overshooting 4px per side */
html[data-theme=dark]{--brd:#962233;--err:#FF8A80;--star:var(--hi)}
h1{font-size:clamp(30px,5vw,44px);line-height:1.1}h2{font-size:clamp(22px,2.6vw,30px);line-height:1.15}h3{font-size:clamp(17px,2vw,20px);line-height:1.3}h4{margin:0;color:var(--ink);font-weight:700;letter-spacing:-.01em}
main{display:block;min-height:40vh}
.ft{margin-top:40px}
.btn.secondary{background:transparent;color:var(--br);border-color:var(--br)}.btn.secondary:hover{background:var(--sf);color:var(--brd);border-color:var(--brd);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ln)}.btn.ghost:hover{background:var(--sf);border-color:var(--ink);box-shadow:none}
.btn.on-dark{background:#fff;color:#111;border-color:#fff}.btn.on-dark:hover{background:#eee;box-shadow:none}
.btn.on-dark.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}.btn.on-dark.secondary:hover{background:rgba(255,255,255,.12)}
.filterbar .chips,.tabs .chips,main .chips{padding-block:0;margin-block:0}
.hd.solid{z-index:60}   /* above the sticky filter bar (40) and the bottom booking bar (45), below the booking sheet (70) */
.btn.block{width:100%}.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
a.more{display:inline-flex;align-items:center;min-height:40px;margin:0;font-weight:700;color:var(--br);justify-content:flex-start}a.more:hover{color:var(--brd);text-decoration:underline;text-underline-offset:3px}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--ln);border-radius:999px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .18s}
.chip:active{transform:scale(.97)}.chip:hover{border-color:var(--br);color:var(--br)}.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;font-size:12px;font-weight:800;letter-spacing:.02em;border-radius:6px;background:var(--br);color:#fff}.tag.dark{background:#17191C;color:#fff}
.rt i{color:var(--br)}.rt b{color:var(--ink)}.rt-row{margin-top:10px;font-size:15px}.rt-row .rt small{font-size:14px}.rt-row .mu{color:var(--mu);font-size:14px}
/* detail header meta row + the sheet close button (kept from the old sheet, in the home's tokens) */
.card-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;font-weight:600;color:var(--mu)}.card-meta span+span::before{content:"·";margin-right:10px;color:var(--ln)}.card-meta .tag{font-weight:800}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:var(--ink)}.icon-btn:active{transform:scale(.96);background:var(--sf)}.icon-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--br);margin-bottom:8px}
.price{color:var(--ink)}.price b{font-weight:700}.price em,.price small{font-style:normal;color:var(--mu);font-size:13px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.one{grid-template-columns:1fr}@media (min-width: 900px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.section-head .more{white-space:nowrap}
.hero{border-radius:0}.hero h1{letter-spacing:-.025em}
/* dark mode: the few sub-page surfaces that are not pure token swaps */
html[data-theme=dark] .rt i,html[data-theme=dark] .review .stars,html[data-theme=dark] .review .src,html[data-theme=dark] .eyebrow,html[data-theme=dark] a.more,html[data-theme=dark] .links a{color:var(--hi)}
html[data-theme=dark] .hero .eyebrow,html[data-theme=dark] .band .eyebrow{color:#fff}   /* photo bands keep the white eyebrow in dark mode too */
html[data-theme=dark] .filterbar{background:rgba(18,18,18,.94)}
html[data-theme=dark] .status{background:#1E3A2A;color:#9FE2B3}html[data-theme=dark] .status.pending{background:#3F3412;color:#F3D36B}html[data-theme=dark] .status.done{background:var(--sf);color:var(--mu)}
html[data-theme=dark] .chip,html[data-theme=dark] .tab,html[data-theme=dark] .select select,html[data-theme=dark] .google,html[data-theme=dark] .paybtn,html[data-theme=dark] .qty{background:var(--sf)}
/* r18 (CEO 2026-10-13 "다크모드 버튼 클릭시에 하이라이트가 제대로 표시되지 않는 문제"): the dark `.chip`/`.tab` surface rule above outranks `.chip[aria-pressed=true]` / `.tab[aria-selected=true]`, so the selected pill kept the dark surface while its text turned page-black (1.08:1). Dark hover also used the dim brand red. */
html[data-theme=dark] .chip:hover,html[data-theme=dark] .tab:hover{border-color:var(--hi);color:var(--hi)}
html[data-theme=dark] .chip[aria-pressed="true"],html[data-theme=dark] .chip.is-on,html[data-theme=dark] .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* r18: remaining brand-red text on dark surfaces (1.7-1.8:1) → bright accent, same as links/stars */
html[data-theme=dark] .review .rm,html[data-theme=dark] .trp-stop-num,html[data-theme=dark] .trp-stop-when,html[data-theme=dark] .trp-stop-chips .trp-chip-opt,html[data-theme=dark] .linkbtn,html[data-theme=dark] .co-meet b,html[data-theme=dark] .trp-leg .trp-rl-move b,html[data-theme=dark] .co-meet .co-meet-map{color:var(--hi)}
html[data-theme=dark] .trp-stop-num{border-color:var(--hi)}
/* r18: start pin "S" was white on the cream --ink circle (1.14:1) */
html[data-theme=dark] .trp-pin.start,html[data-theme=dark] .trp-route-legend b.start{color:var(--bg)}
html[data-theme=dark] .trp-pin{border-color:var(--sf)}
/* r18: "Know before you go" triangle is a data-URI with the brand red baked in → bright variant for dark */
html[data-theme=dark] .cards-info li::before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE5466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v4M12 17.5v.5'/%3E%3C/svg%3E")}
html[data-theme=dark] .field input,html[data-theme=dark] .field select,html[data-theme=dark] .field textarea{background:#121212;border-color:rgba(255,255,255,.18);color:var(--ink)}
html[data-theme=dark] .btn.secondary{color:var(--hi);border-color:var(--hi)}html[data-theme=dark] .btn.secondary:hover{color:#fff;background:var(--br);border-color:var(--br)}
html[data-theme=dark] .btn.ghost{color:var(--ink);border-color:rgba(255,255,255,.3)}html[data-theme=dark] .btn.ghost:hover{border-color:var(--ink);background:var(--sf)}
/* r18: the destructive "Cancel booking" ghost button was an inline red (#B3261E, 2.9:1 on dark) → class with a dark variant */
.btn.ghost.danger{color:#B3261E;border-color:#E6C9C6}
html[data-theme=dark] .btn.ghost.danger{color:#F0A0A8;border-color:rgba(240,160,168,.4)}html[data-theme=dark] .btn.ghost.danger:hover{border-color:#F0A0A8;background:var(--sf)}
html[data-theme=dark] .fact svg,html[data-theme=dark] .faq summary::after,html[data-theme=dark] .step .n,html[data-theme=dark] .confirm-hero .ok{color:var(--hi);stroke:var(--hi)}
html[data-theme=dark] .gallery figure,html[data-theme=dark] .card-img,html[data-theme=dark] .summary-card .tour img,html[data-theme=dark] .booking-row img,html[data-theme=dark] .about-grid .photo{background:#000}
html[data-theme=dark] .gallery img,html[data-theme=dark] .about-grid .photo img,html[data-theme=dark] .summary-card .tour img,html[data-theme=dark] .booking-row img{opacity:.92}
/* r31: "Show more reviews" + "Show fewer reviews" side by side, wrapping on narrow phones */
.rv-more { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.rv-more [hidden] { display: none; }
@media (max-width: 559px) { .rv-more .btn { flex: 1 1 100%; } }   /* phones: two full-width rows instead of two ragged widths */

/* ===== 운영 이식 추가분 (2026-10-13) — 데모에 없는 운영 공통 위젯을 F 디자인으로 =====
   jquery.modal(fnMsgModal·confirmMsgModal), blockUI 로딩, 공통 폼 요소. 화면별 규칙은 /assets/css/user/f/<화면>.css 에 둔다. */
.blocker{position:fixed;inset:0;z-index:1000;padding:20px;overflow:auto;background:rgba(10,10,12,.55);text-align:center;display:flex;align-items:center;justify-content:center}
.blocker:before{content:none}
.blocker .modal{position:relative;display:block;width:min(100%,440px);max-width:440px;text-align:left;padding:28px 24px 22px;border-radius:16px;background:var(--bg,#fff);color:var(--tx,#141414);box-shadow:0 20px 60px rgba(0,0,0,.25)}
html[data-theme=dark] .blocker .modal{background:#1b1b1d;color:#f2f1ee}
.modal-txt__tit{font-size:18px;font-weight:700;margin:0 0 8px}
.modal-txt__tit:empty{display:none}
.modal-txt__cont{font-size:15px;line-height:1.55}
.modal__btn{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal__btn .btn{min-height:44px;padding:0 20px;border-radius:999px;background:#7C1B28;color:#fff;border:0;font-weight:700}
.modal__btn .btn.gray02{background:transparent;color:inherit;border:1.5px solid rgba(128,128,128,.45)}
.modal a.close-modal{display:none}
.f-spin{display:inline-block;width:36px;height:36px;border-radius:50%;border:3px solid rgba(124,27,40,.25);border-top-color:#7C1B28;animation:f-spin .8s linear infinite}
@keyframes f-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.f-spin{animation-duration:2.4s}}

/* 2026-10-14 상세 리뷰 박스 크기 통일 — 글 길이와 상관없이 같은 높이(본문 6줄 자리 확보·출처 줄 맨 아래·Read more 자리 항상 확보). 펼친 카드(.open)만 늘어나고 옆 카드는 그대로. */
.review { display: flex; flex-direction: column; gap: 8px; }
.review p { min-height: calc(1.55em * 6); }
.review.open p { min-height: 0; }
.review .rm[hidden] { display: block !important; visibility: hidden; pointer-events: none; }   /* 전역 [hidden]{display:none!important} 보다 우선 — 자리만 남긴다 */
.review > .who { min-height: 22px; }
.review > .who:last-child { margin-top: auto; }