/* =========================================================================
   ULTRA SEOUL — 旅のしおり  |  Design System
   Editorial travel-zine × Korean poster.
   Paper + ink base, vermilion/cobalt accents, acid pop, night hero.
   ========================================================================= */

/* ---------- Fonts ---------- */
/* Loaded via <link> in HTML (Google Fonts):
   Anton, Space Grotesk, Zen Kaku Gothic New, Noto Sans KR, Caveat, DM Mono */

/* ---------- Tokens ---------- */
:root{
  --paper:      #F2ECDF;
  --paper-2:    #E9E1CF;
  --paper-3:    #DED3BC;
  --card:       #FBF7EE;
  --ink:        #16130E;
  --ink-2:      #322C21;
  --ink-3:      #6B6152;
  --flame:      #FF4A23;   /* primary accent  */
  --flame-deep: #E23206;
  --cobalt:     #1D3BEA;   /* secondary       */
  --cobalt-2:   #0F1E9E;
  --acid:       #D8FF3E;   /* rare pop        */
  --night:      #0E0C12;
  --night-2:    #171423;
  --line:       #16130E;

  --edge: 2px;             /* signature hairline weight */
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 50px -22px rgba(22,19,14,.45);

  --f-display: "Anton", "Zen Kaku Gothic New", sans-serif;
  --f-grotesk: "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  --f-jp:      "Zen Kaku Gothic New", "Noto Sans KR", sans-serif;
  --f-kr:      "Noto Sans KR", "Zen Kaku Gothic New", sans-serif;
  --f-hand:    "Caveat", "Zen Kaku Gothic New", cursive;
  --f-mono:    "DM Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --gutter: clamp(18px, 5vw, 64px);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-jp);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:var(--flame); color:var(--paper); }

/* Global paper grain + grid overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.05;
}

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow .idx{ color:var(--flame); font-weight:500; }
.eyebrow::before{ content:"✺"; color:var(--flame); }
.hand{ font-family:var(--f-hand); }
.mono{ font-family:var(--f-mono); }
.flame{ color:var(--flame); }
.cobalt{ color:var(--cobalt); }
.tape{
  position:absolute; width:96px; height:26px; background:rgba(255,74,35,.28);
  border:1px dashed rgba(226,50,6,.5); backdrop-filter:blur(1px);
  transform:rotate(-6deg);
}

.section{ position:relative; padding-block:clamp(64px,11vw,140px); }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(32px,5vw,60px); }
.section-title{
  font-family:var(--f-display); font-weight:400; line-height:.92;
  font-size:clamp(2.6rem,8vw,6rem); letter-spacing:.01em; text-transform:uppercase;
}
.section-title .sub{
  display:block; font-family:var(--f-jp); font-weight:700; text-transform:none;
  font-size:clamp(.95rem,2.4vw,1.25rem); letter-spacing:.02em; color:var(--ink-2); margin-top:.5em; line-height:1.5;
}

/* Reveal animation */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* =========================================================================
   TOP NAV
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter); mix-blend-mode:difference; color:#fff;
  transition:transform .4s ease;
}
.nav.hide{ transform:translateY(-120%); }
.nav__brand{ font-family:var(--f-display); font-size:1.25rem; letter-spacing:.04em; }
.nav__links{ display:flex; gap:22px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.nav__links a{ opacity:.85; transition:opacity .2s; }
.nav__links a:hover{ opacity:1; }
@media (max-width:720px){ .nav__links{ display:none; } }

/* =========================================================================
   TICKER / MARQUEE
   ========================================================================= */
.ticker{
  background:var(--ink); color:var(--paper); border-block:var(--edge) solid var(--ink);
  overflow:hidden; white-space:nowrap; padding-block:11px;
}
.ticker--flame{ background:var(--flame); color:var(--ink); border-color:var(--ink); }
.ticker__row{ display:inline-flex; gap:34px; padding-left:34px; animation:marq 26s linear infinite; }
.ticker--rev .ticker__row{ animation-direction:reverse; animation-duration:32s; }
.ticker span{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:34px; }
.ticker b{ font-family:var(--f-display); font-weight:400; font-size:1rem; letter-spacing:.04em; }
.ticker .dot{ color:var(--flame); }
.ticker--flame .dot{ color:var(--ink); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative; background:var(--night); color:var(--paper);
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(1.1) contrast(1.05); transform:scale(1.08); }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 40%, rgba(14,12,18,.6) 100%),
    linear-gradient(180deg, rgba(14,12,18,.55) 0%, rgba(14,12,18,.15) 40%, rgba(14,12,18,.85) 100%);
}
.hero__glow{
  position:absolute; z-index:0; width:60vw; height:60vw; max-width:720px; max-height:720px;
  border-radius:50%; filter:blur(90px); opacity:.55; pointer-events:none;
}
.hero__glow--f{ background:radial-gradient(circle,var(--flame),transparent 70%); top:-8%; right:-6%; }
.hero__glow--c{ background:radial-gradient(circle,var(--cobalt),transparent 70%); bottom:-14%; left:-10%; opacity:.5; }

.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.hero__kicker{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--paper); opacity:.9; display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.hero__kicker::before{ content:""; width:44px; height:2px; background:var(--flame); }
.hero__title{
  font-family:var(--f-display); font-weight:400; line-height:.84; text-transform:uppercase;
  font-size:clamp(4.4rem,20vw,17rem); letter-spacing:.005em; margin:0;
}
.hero__title .l1{ display:block; }
.hero__title .l2{ display:block; color:transparent; -webkit-text-stroke:2px var(--paper); }
.hero__title .l2 em{ font-style:normal; color:var(--flame); -webkit-text-stroke:0; }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px;
  font-family:var(--f-grotesk); font-weight:500;
}
.hero__dates{ font-family:var(--f-mono); font-size:clamp(1rem,2.6vw,1.4rem); letter-spacing:.06em; }
.hero__dates b{ color:var(--acid); }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  border:1.5px solid rgba(242,236,223,.35); font-size:.82rem; letter-spacing:.04em; backdrop-filter:blur(3px);
}
.chip svg{ width:16px; height:16px; }
.chip--f{ background:var(--flame); color:var(--ink); border-color:var(--flame); font-weight:700; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper);
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.85;
}
.hero__scroll .bar{ width:1.5px; height:44px; background:linear-gradient(var(--paper),transparent); animation:scrolldrop 1.8s ease-in-out infinite; }
@keyframes scrolldrop{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4;} 50%{ transform:scaleY(1); opacity:1; } }

/* =========================================================================
   BOARDING / DASHBOARD
   ========================================================================= */
.dash{ background:var(--paper); }
.dash__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; }
@media (max-width:860px){ .dash__grid{ grid-template-columns:1fr; } }

/* Boarding pass */
.pass{
  position:relative; background:var(--card); border:var(--edge) solid var(--ink); border-radius:var(--r-md);
  box-shadow:var(--shadow-hard); overflow:hidden;
}
.pass__top{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; background:var(--ink); color:var(--paper); }
.pass__top .brand{ font-family:var(--f-display); font-size:1.1rem; letter-spacing:.05em; }
.pass__top .flt{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; color:var(--acid); }
.pass__route{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:26px 22px 10px; }
.pass__ap{ text-align:center; }
.pass__ap .code{ font-family:var(--f-display); font-size:clamp(2.4rem,7vw,3.6rem); line-height:.9; }
.pass__ap .city{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pass__ap .time{ font-family:var(--f-grotesk); font-weight:600; margin-top:4px; }
.pass__mid{ display:flex; flex-direction:column; align-items:center; color:var(--flame); }
.pass__mid .dur{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-3); margin-bottom:2px; }
.pass__line{ display:flex; align-items:center; gap:6px; }
.pass__line .dash-l{ width:44px; height:2px; background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 11px); }
.pass__line svg{ width:22px; height:22px; }
.pass__perf{ height:0; border-top:2px dashed var(--paper-3); margin:8px 0; position:relative; }
.pass__perf::before,.pass__perf::after{ content:""; position:absolute; top:-13px; width:24px; height:24px; border-radius:50%; background:var(--paper); border:var(--edge) solid var(--ink); }
.pass__perf::before{ left:-14px; } .pass__perf::after{ right:-14px; }
.pass__foot{ display:flex; flex-wrap:wrap; gap:18px 30px; padding:14px 22px 20px; }
.pass__cell .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pass__cell .v{ font-family:var(--f-grotesk); font-weight:600; }
.pass__ret{ padding:12px 22px; border-top:var(--edge) dashed var(--paper-3); display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; color:var(--ink-2); }
.pass__ret .rt{ margin-left:auto; }

/* Info tiles */
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-content:start; }
.tile{
  background:var(--card); border:var(--edge) solid var(--ink); border-radius:var(--r-md);
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px; min-height:118px; position:relative; overflow:hidden;
}
.tile .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.tile .v{ font-family:var(--f-display); font-size:clamp(1.5rem,4vw,2.2rem); line-height:1; }
.tile .s{ font-size:.82rem; color:var(--ink-2); }
.tile--flame{ background:var(--flame); color:var(--ink); border-color:var(--ink); }
.tile--flame .k{ color:rgba(22,19,14,.7); }
.tile--ink{ background:var(--ink); color:var(--paper); }
.tile--ink .k{ color:rgba(242,236,223,.6); }
.tile--ink .v{ color:var(--acid); }
.tile__cd{ display:flex; gap:10px; }
.tile__cd div{ text-align:center; }
.tile__cd .n{ font-family:var(--f-display); font-size:clamp(1.6rem,4.5vw,2.4rem); line-height:1; }
.tile__cd .u{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,236,223,.6); }
@media (max-width:520px){ .tiles{ grid-template-columns:1fr; } }

/* concept ribbon */
.concept{ margin-top:22px; background:var(--ink); color:var(--paper); border:var(--edge) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-hard); padding:20px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.concept__tag{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; padding:5px 11px; border:1.5px solid var(--acid); color:var(--acid); border-radius:999px; }
.concept__main{ font-family:var(--f-display); font-size:clamp(1.5rem,4vw,2.4rem); line-height:1; }
.concept__main span{ color:var(--flame); margin:0 .1em; }
.concept__must{ font-size:.86rem; color:rgba(242,236,223,.85); margin-left:auto; line-height:1.6; }
.concept__must b{ color:var(--paper); }
.concept__must .star{ color:var(--flame); margin-left:.6em; }
@media (max-width:640px){ .concept__must{ margin-left:0; } }

/* =========================================================================
   MAP
   ========================================================================= */
.map{ background:var(--paper-2); border-block:var(--edge) solid var(--ink); }
.map__frame{
  position:relative; background:var(--card); border:var(--edge) solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard); padding:clamp(16px,3vw,30px); overflow:hidden;
}
.map__grid-bg{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--paper-3) 1px,transparent 1px),linear-gradient(90deg,var(--paper-3) 1px,transparent 1px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 55%,transparent 90%); }
.map__svg{ position:relative; width:100%; height:auto; display:block; }
.map__legend{ position:relative; display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; }
.map__legend .lg{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-2); }
.map__legend .pin{ width:18px; height:18px; border-radius:50%; background:var(--flame); border:2px solid var(--ink); display:inline-grid; place-items:center; color:var(--ink); font-weight:700; font-size:.6rem; }

/* map pin animation */
.mpin{ transform-box:fill-box; transform-origin:center bottom; opacity:0; }
.mpin.in{ animation:pindrop .55s cubic-bezier(.2,1.4,.3,1) forwards; }
@keyframes pindrop{ 0%{ opacity:0; transform:translateY(-22px) scale(.6);} 100%{ opacity:1; transform:none; } }
.mroute{ stroke-dasharray:6 8; stroke-dashoffset:600; opacity:.7; }
.mroute.in{ animation:draw 2.2s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* =========================================================================
   ITINERARY (しおり timeline)
   ========================================================================= */
.itin{ background:var(--paper); }
.day{ position:relative; padding-top:clamp(30px,6vw,70px); }
.day__head{ display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.day__no{ font-family:var(--f-display); font-size:clamp(4rem,15vw,10rem); line-height:.8; color:transparent; -webkit-text-stroke:2.4px var(--ink); }
.day__no em{ font-style:normal; color:var(--flame); -webkit-text-stroke:0; }
.day__meta{ padding-bottom:.6em; }
.day__date{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.14em; color:var(--ink-3); }
.day__theme{ font-family:var(--f-jp); font-weight:700; font-size:clamp(1.1rem,3vw,1.6rem); }

.tl{ position:relative; margin-top:26px; }
.tl::before{ content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:repeating-linear-gradient(var(--ink) 0 7px,transparent 7px 14px); }
.tl__item{ position:relative; width:50%; padding:14px 40px; }
.tl__item:nth-child(odd){ left:0; text-align:right; }
.tl__item:nth-child(even){ left:50%; }
.tl__node{ position:absolute; top:22px; width:46px; height:46px; border-radius:50%; background:var(--card); border:var(--edge) solid var(--ink); display:grid; place-items:center; z-index:2; box-shadow:2px 2px 0 var(--ink); }
.tl__node svg{ width:24px; height:24px; }
.tl__item:nth-child(odd) .tl__node{ right:-23px; }
.tl__item:nth-child(even) .tl__node{ left:-23px; }
.tl__time{ font-family:var(--f-mono); font-size:.95rem; letter-spacing:.06em; color:var(--flame); font-weight:500; }
.tl__name{ font-family:var(--f-jp); font-weight:700; font-size:1.12rem; line-height:1.35; margin-top:2px; }
.tl__en{ font-family:var(--f-grotesk); font-size:.76rem; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; }
.tl__hook{ font-size:.9rem; color:var(--ink-2); margin-top:6px; }
.tl__tags{ display:inline-flex; gap:6px; margin-top:8px; }
.tl__cat{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border:1.5px solid var(--ink); border-radius:999px; }
.tl__must{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; padding:3px 9px; border-radius:999px; background:var(--flame); color:var(--paper); font-weight:500; }
.tl__map{ display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px 3px 7px; border-radius:999px; border:1.5px solid var(--cobalt); color:var(--cobalt); transition:background .2s,color .2s; }
.tl__map svg{ width:13px; height:13px; }
.tl__map:hover{ background:var(--cobalt); color:var(--paper); }
/* highlight must-do nodes */
.tl__item--must .tl__node{ background:var(--flame); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink), 0 0 0 4px rgba(255,74,35,.2); }
.tl__item--must .tl__node svg{ color:var(--paper); }
.tl__item--must .tl__name{ }

@media (max-width:760px){
  .tl::before{ left:22px; }
  .tl__item{ width:100%; left:0 !important; text-align:left !important; padding:14px 14px 14px 60px; }
  .tl__node{ left:0 !important; right:auto !important; }
}

/* =========================================================================
   SPOTS GALLERY
   ========================================================================= */
.spots{ background:var(--night); color:var(--paper); border-block:var(--edge) solid var(--ink); position:relative; }
.spots .section-title{ color:var(--paper); }
.spots .section-title .sub{ color:rgba(242,236,223,.7); }
.spots .eyebrow{ color:rgba(242,236,223,.65); }
.spots .eyebrow .idx{ color:var(--flame); }
.spots__scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,340px); gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:thin;
}
.spots__scroll::-webkit-scrollbar{ height:8px; }
.spots__scroll::-webkit-scrollbar-thumb{ background:var(--flame); border-radius:99px; }
.spots__scroll::-webkit-scrollbar-track{ background:var(--night-2); }
.spotcard{ scroll-snap-align:start; position:relative; border-radius:var(--r-md); overflow:hidden; border:var(--edge) solid var(--paper); background:var(--night-2); }
.spotcard__img{ aspect-ratio:4/5; overflow:hidden; }
.spotcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.spotcard:hover .spotcard__img img{ transform:scale(1.07); }
.spotcard__no{ position:absolute; top:12px; left:12px; font-family:var(--f-display); font-size:1.4rem; color:var(--acid); mix-blend-mode:difference; }
.spotcard__body{ position:absolute; left:0; right:0; bottom:0; padding:18px 16px 16px; background:linear-gradient(transparent,rgba(14,12,18,.92) 55%); }
.spotcard__name{ font-family:var(--f-jp); font-weight:700; font-size:1.1rem; }
.spotcard__en{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--flame); }
.spotcard__hook{ font-size:.84rem; color:rgba(242,236,223,.82); margin-top:4px; }
.spotcard__map{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px 5px 8px; border-radius:999px; border:1.5px solid rgba(242,236,223,.4); color:var(--paper); transition:background .2s,border-color .2s; }
.spotcard__map svg{ width:14px; height:14px; color:var(--acid); }
.spotcard__map:hover{ background:var(--flame); border-color:var(--flame); }
.spotcard__map:hover svg{ color:var(--ink); }
.spots__hint{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,236,223,.5); margin-top:12px; display:flex; align-items:center; gap:8px; }

/* =========================================================================
   HOTEL
   ========================================================================= */
.hotel{ background:var(--paper); }
.hotel__card{ display:grid; grid-template-columns:1.1fr 1fr; background:var(--card); border:var(--edge) solid var(--ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-hard); }
.hotel__img{ position:relative; min-height:320px; }
.hotel__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hotel__body{ padding:clamp(22px,4vw,42px); display:flex; flex-direction:column; gap:12px; }
.hotel__stay{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--flame); }
.hotel__name{ font-family:var(--f-display); font-size:clamp(2rem,5vw,3.2rem); line-height:.95; text-transform:uppercase; }
.hotel__jp{ font-family:var(--f-jp); font-weight:700; color:var(--ink-2); }
.hotel__row{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink-2); }
.hotel__row svg{ width:18px; height:18px; color:var(--flame); flex:none; }
.hotel__qr{ margin-top:auto; display:flex; align-items:center; gap:14px; padding-top:14px; border-top:2px dashed var(--paper-3); }
.hotel__qr svg{ width:64px; height:64px; border:2px solid var(--ink); border-radius:8px; padding:4px; background:#fff; }
.hotel__qr .cap{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--ink-3); }
@media (max-width:760px){ .hotel__card{ grid-template-columns:1fr; } .hotel__img{ min-height:240px; } }

/* =========================================================================
   CHECKLIST
   ========================================================================= */
.pack{ background:var(--cobalt); color:var(--paper); border-block:var(--edge) solid var(--ink); }
.pack .section-title{ color:var(--paper); }
.pack .eyebrow{ color:rgba(242,236,223,.7); }
.pack .eyebrow::before{ color:var(--acid); }
.pack__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.pack__item{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.07); border:1.5px solid rgba(242,236,223,.28); border-radius:var(--r-sm); padding:13px 15px; font-family:var(--f-jp); font-weight:500; }
.pack__box{ width:22px; height:22px; border:2px solid var(--paper); border-radius:5px; flex:none; display:grid; place-items:center; }
.pack__box svg{ width:14px; height:14px; color:var(--acid); opacity:0; transform:scale(.4); transition:.35s cubic-bezier(.2,1.6,.4,1); }
.pack__item.in .pack__box svg{ opacity:1; transform:none; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{ background:var(--ink); color:var(--paper); padding-block:clamp(60px,10vw,120px); position:relative; overflow:hidden; }
.foot__big{ font-family:var(--f-display); font-size:clamp(3rem,14vw,11rem); line-height:.82; text-transform:uppercase; }
.foot__big em{ font-style:normal; color:transparent; -webkit-text-stroke:2px var(--flame); }
.foot__kr{ font-family:var(--f-kr); font-weight:700; font-size:clamp(1.1rem,3vw,1.8rem); color:var(--acid); margin-top:10px; }
.foot__meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:44px; padding-top:22px; border-top:1.5px solid rgba(242,236,223,.2); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:rgba(242,236,223,.7); }
.foot__meta a{ color:var(--flame); }
.totop{ position:fixed; right:20px; bottom:20px; z-index:90; width:52px; height:52px; border-radius:50%; background:var(--flame); color:var(--ink); border:var(--edge) solid var(--ink); display:grid; place-items:center; box-shadow:var(--shadow-hard); opacity:0; transform:translateY(20px); transition:.3s; }
.totop.show{ opacity:1; transform:none; }
.totop svg{ width:22px; height:22px; }

/* wave divider */
.wave{ display:block; width:100%; height:auto; color:var(--paper); }