/* ===== JSLALALAND SEOUL 2.1 — start here, day photos inside each day, one "My trip" button ===== */
:root{--s21-ink:#382a24;--s21-ink2:#6f5a4b;--s21-gold:#d7a73d;--s21-red:#963e34;--s21-ivory:#faf5eb;--s21-sand:#f0e7d9;--s21-line:rgba(56,42,36,.16)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--s21-ink:#f3eadb;--s21-ink2:#cdbca7;--s21-ivory:#221b16;--s21-sand:#2b231d;--s21-line:rgba(243,234,219,.18)}}
:root[data-theme="dark"]{--s21-ink:#f3eadb;--s21-ink2:#cdbca7;--s21-ivory:#221b16;--s21-sand:#2b231d;--s21-line:rgba(243,234,219,.18)}

/* --- start here (replaces the chapter pills, chapter cards and the six "for you" tiles) --- */
section#about.s21-start{display:block!important;background:var(--s21-ivory);color:var(--s21-ink);padding-block:clamp(36px,7vw,72px)}
.s21-start .wrap{display:grid;gap:14px}
.s21-k{margin:0;font:600 .72rem/1.3 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--s21-red)}
.s21-h{margin:0;font-family:Georgia,'Noto Serif TC',serif;font-weight:700;font-size:clamp(1.6rem,4.6vw,2.4rem);line-height:1.25;text-wrap:balance;color:var(--s21-ink)}
.s21-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;counter-reset:s}
.s21-step{position:relative;display:grid;gap:6px;align-content:start;height:100%;box-sizing:border-box;padding:18px 18px 18px 64px;border-radius:14px;
  background:color-mix(in oklab,var(--s21-sand) 70%,var(--s21-ivory));border:1px solid var(--s21-line);color:var(--s21-ink);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.s21-step b{font-family:Georgia,'Noto Serif TC',serif;font-size:1.12rem;line-height:1.35}
.s21-d{font-size:.88rem;line-height:1.65;color:var(--s21-ink2)}
.s21-n{position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--s21-ink);color:var(--s21-ivory);font:700 .95rem/1 Georgia,serif}
.s21-step:hover,.s21-step:focus-visible{transform:translateY(-3px);border-color:var(--s21-gold);box-shadow:0 16px 30px -22px rgba(56,42,36,.7);outline:none}
.s21-step:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.s21-step{transition:none}}

/* --- photos and meals inside each day --- */
.s21-dayphotos,.s21-daymeals{display:grid;gap:10px;margin:18px 0 6px;min-width:0}
.chapter.folded .s21-dayphotos,.chapter.folded .s21-daymeals{display:none}
.s21-dayphotos .s21-k,.s21-daymeals .s21-k{display:flex;align-items:center;gap:8px}
.s21-kn{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:color-mix(in oklab,var(--s21-red) 14%,transparent);color:var(--s21-red);letter-spacing:0;font-size:.72rem}
.s21-dayphotos .ph-day{margin-top:0!important;gap:10px}
.s21-dayphotos .ph-dh .ph-date,.s21-dayphotos .ph-dh h3{display:none}
.s21-dayphotos .ph-dh p:not(.ph-swipe){font-size:.88rem;line-height:1.7}
.s21-dayphotos .ph-day.cc-photo-day-hidden{display:grid!important}
.s21-mchips{display:flex;flex-wrap:wrap;gap:8px}
.s21-mchip{font:inherit;font-size:.86rem;min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid var(--s21-line);background:var(--s21-ivory);color:var(--s21-ink);cursor:pointer;transition:border-color .2s,background .2s}
.s21-mchip:hover,.s21-mchip:focus-visible{border-color:var(--s21-gold);background:color-mix(in oklab,var(--s21-gold) 14%,var(--s21-ivory));outline:none}
#photos.s21-merged{display:none!important}

/* --- saved places sit at the top of the planner --- */
#build .s21-wish{margin:0 0 18px}
.s21-wact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 4px}
.s21-wn{font-size:.82rem;color:var(--s21-ink2)}
.s21-ours{display:inline-block;margin-left:8px;font-size:.78rem;color:var(--s21-ink2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.s21-ours:hover{color:var(--s21-red)}

/* --- My trip button (above the bottom bar) --- */
.s21-trip{position:fixed;z-index:60;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));display:grid;gap:1px;justify-items:start;text-align:left;
  padding:9px 16px;border-radius:14px;border:1px solid var(--s21-gold);background:var(--s21-ivory);color:var(--s21-ink);cursor:pointer;box-shadow:0 12px 28px -16px rgba(0,0,0,.55);font:inherit;transition:transform .2s ease}
.s21-trip .s21-pl{font:700 .86rem/1.2 Georgia,'Noto Serif TC',serif}
.s21-trip .s21-ps{font-size:.72rem;color:var(--s21-ink2)}
.s21-trip.has{border-color:var(--s21-red)}
.s21-trip.has .s21-ps{color:var(--s21-red);font-weight:600}
.s21-trip:hover{transform:translateY(-2px)}
html.ph-lock .s21-trip{display:none}
@media (min-width:900px){.s21-trip{bottom:24px}}

/* --- open chapters: the cover photo, then a clean page with one content column ---
   2.0 let the opened content run edge to edge, glued to the bottom of the cover (cards and rings clipped,
   the chapter colour showing down the sides). Every opened chapter now gets the same page: same paper,
   same side margins as the cover text, room above and below. */
html.s21{--s21-gut:clamp(18px,5.5vw,64px);--s21-pad:max(var(--s21-gut),calc((100vw - 1200px) / 2));--s21-page:#faf5eb;--s21-page-ink:#35291f}
html.s21 :is(#build,#trip,#musts,#hot,#heal,#guide,#now,#tools,#transport,#pack,#wear,#money,#tax,#tips,#apps).cc-is-open>.wrap>.fold-body{
  box-sizing:border-box!important;width:100%!important;max-width:none!important;margin:0!important;
  padding:clamp(34px,4.6vw,64px) var(--s21-pad) clamp(46px,6vw,88px)!important;
  background:var(--s21-page)!important;color:var(--s21-page-ink)!important;border:0!important}
html.s21 :is(#build,#trip,#musts,#hot,#heal,#guide,#now,#tools,#transport,#pack,#wear,#money,#tax,#tips,#apps)>.wrap>.ec-rail{
  padding-left:var(--s21-pad)!important;padding-right:var(--s21-pad)!important;background:var(--s21-page)!important}
html.s21 :is(#build,#trip,#musts,#hot,#heal,#guide,#now,#tools,#transport,#pack,#wear,#money,#tax,#tips,#apps)>.wrap>.fold-body>:first-child{margin-top:0!important}
html.s21 :is(#build,#trip,#musts,#hot,#heal,#guide,#now,#tools,#transport,#pack,#wear,#money,#tax,#tips,#apps)>.wrap>.fold-body>:last-child{margin-bottom:0!important}
/* side-scrolling rows run to the screen edge instead of being cut at the margin */
html.s21 .fold-body .rail-wrap{margin-left:calc(-1 * var(--s21-pad))!important;margin-right:calc(-1 * var(--s21-pad))!important}
html.s21 .fold-body .rail-wrap>.rail{padding-left:var(--s21-pad)!important;padding-right:var(--s21-pad)!important;scroll-padding-inline:var(--s21-pad)}
html.s21 .fold-body .rail-wrap>.rail-ft{padding-left:var(--s21-pad)!important;padding-right:var(--s21-pad)!important}
/* the four outfit notes fit side by side on a tablet or computer */
@media (min-width:700px){html.s21 #wear .wear-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;padding-bottom:0!important}}
@media (min-width:900px){html.s21 #wear .wear-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* on wider screens the cover text lines up with the page below it */
@media (min-width:900px){
  html.s21 :is(#build,#trip,#musts,#hot,#heal,#guide,#now,#tools,#transport,#pack,#wear,#money,#tax,#tips,#apps)>.wrap>.sec-head{padding-left:var(--s21-pad)!important;padding-right:var(--s21-pad)!important}
  html.s21 :is(#build,#trip,#musts,#hot,#heal,#guide,#now,#tools,#transport,#pack,#wear,#money,#tax,#tips,#apps)>.wrap>.sec-head>.ec-index{left:var(--s21-pad)!important}}
@media (max-width:699px){html.s21 #wear .wear-grid{margin-inline:calc(-1 * var(--s21-pad))!important;padding-inline:var(--s21-pad)!important;scroll-padding-inline:var(--s21-pad)}}
/* each day uses the same side margins as the chapters around it */
html.s21 #days .chapter>.ch-grid{box-sizing:border-box!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:var(--s21-pad)!important;padding-right:var(--s21-pad)!important}
@media (min-width:900px){html.s21 #days .chapter>.ch-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important}}
/* packing: two even columns (three left the last one empty next to the long to-do list) */
html.s21 #pack .pack-grid{columns:2 320px!important;column-gap:18px!important}
html.s21 #pack .pack-grid>*{break-inside:avoid}
/* plan: one column, no box around the presets, the form as wide as everything else */
html.s21 #build .mt-pre{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0 0 18px!important}
html.s21 #build .mt-form{max-width:none!important}
/* the chapter sub-menu is solid, so text never shows through it */
html.s21 .subnav-w{background:#faf5eb!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 12px 22px -20px rgba(56,42,36,.55)}
/* Slow Seoul cover: a quiet autumn path in Samcheong park, not a portrait */
html.s21 section#heal{--vr-img:url('img/d3-17-e91ce692-m.webp')!important;--vr-focus:center 62%!important}

/* --- meal-story photos open large --- */
#sm-detail img{cursor:zoom-in}
dialog.s21-lb{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(14,10,8,.95);color:#f6efe4;display:grid;place-items:center;overflow:hidden}
dialog.s21-lb:not([open]){display:none}
dialog.s21-lb::backdrop{background:rgba(14,10,8,.6)}
.s21-lb-f{margin:0;display:grid;gap:10px;justify-items:center;max-width:min(94vw,1400px);padding:56px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px));box-sizing:border-box}
.s21-lb-f img{max-width:100%;max-height:calc(100dvh - 170px);object-fit:contain;border-radius:6px;cursor:default}
.s21-lb-f figcaption{font-size:.95rem;line-height:1.6;text-align:center;max-width:60ch;color:#f6efe4}
.s21-lb-x,.s21-lb-nav{position:absolute;border:0;background:rgba(246,239,228,.14);color:#f6efe4;cursor:pointer;font:400 1.6rem/1 Georgia,serif;border-radius:999px;display:grid;place-items:center}
.s21-lb-x{top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));width:44px;height:44px;font-size:1.1rem}
.s21-lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.s21-lb-prev{left:max(10px,env(safe-area-inset-left,0px))}.s21-lb-next{right:max(10px,env(safe-area-inset-right,0px))}
.s21-lb-x:hover,.s21-lb-nav:hover,.s21-lb-x:focus-visible,.s21-lb-nav:focus-visible{background:rgba(246,239,228,.3);outline:none}
.s21-lb-n{position:absolute;bottom:max(14px,env(safe-area-inset-bottom,0px));left:0;right:0;margin:0;text-align:center;font-size:.8rem;letter-spacing:.12em;opacity:.8}

/* --- today, before you have a plan --- */
.s21-noplan .mn-big{font-size:1.15rem}