/* Korea Trip — Editorial Travel Zine */
:root{
  --paper:#f5f1ea;
  --paper-2:#efe9df;
  --ink:#1b1815;
  --ink-2:#3a3530;
  --muted:#7a726a;
  --rule:#d9d2c5;
  --rule-soft:#e6dfd2;
  --accent:#b23a28; /* stamp red */
  --card:#fbf8f2;
  --shadow: 0 1px 0 rgba(27,24,21,.04), 0 8px 30px -18px rgba(27,24,21,.25);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;overflow-x:clip}
html,body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.5;font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom));min-height:100vh;overscroll-behavior:none;-webkit-overflow-scrolling:touch;overflow-x:clip;width:100%;max-width:100vw;position:relative}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
a{color:inherit;touch-action:manipulation}
input,select,textarea{font-family:inherit;font-size:16px}  /* 16px prevents iOS zoom on focus */

/* ——— Layout shell ——— */
.shell{max-width:480px;margin:0 auto;position:relative;overflow-x:hidden}
@media (min-width:600px){
  body{padding:24px 0 108px}
  .shell{box-shadow:0 0 0 1px var(--rule), 0 30px 80px -40px rgba(27,24,21,.25);background:var(--paper)}
}

/* ——— Masthead ——— */
.masthead{padding:calc(26px + env(safe-area-inset-top)) 22px 18px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.masthead .eyebrow{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.masthead .vol{display:flex;gap:10px;align-items:center}
.masthead .vol .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.masthead h1{font-size:58px;line-height:.95;letter-spacing:-.025em;margin-bottom:6px}
.masthead h1 .kr{font-family:'Noto Serif KR',serif;font-weight:500;display:block;font-size:28px;letter-spacing:-.01em;color:var(--ink-2);margin-top:4px}
.masthead .sub{font-size:13.5px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px dashed var(--rule)}
.masthead .sub b{color:var(--ink);font-weight:600}
.stamp{position:absolute;top:22px;right:18px;width:74px;height:74px;border:1.5px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-14deg);color:var(--accent);font-family:'Instrument Serif',serif;text-align:center;line-height:1;opacity:.9}
.stamp .big{font-size:22px;letter-spacing:.02em}
.stamp .sm{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:4px;font-family:'Inter',sans-serif;font-weight:600}

/* ——— Section ——— */
.section{padding:26px 22px;border-bottom:1px solid var(--rule)}
.section:last-child{border-bottom:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:14px}
.section-head .num{font-family:'Instrument Serif',serif;font-size:13px;color:var(--accent);letter-spacing:.1em}
.section-head h2{font-size:28px;line-height:1;letter-spacing:-.02em;flex:1}
.section-head .aside{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ——— Day filter chips ——— */
.chips{display:flex;gap:6px;overflow-x:auto;padding:14px 22px;scrollbar-width:none;position:sticky;top:env(safe-area-inset-top);background:var(--paper);z-index:10;border-bottom:1px solid var(--rule-soft);-webkit-overflow-scrolling:touch;touch-action:pan-x}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 13px;border:1px solid var(--rule);border-radius:999px;font-size:12px;background:var(--card);white-space:nowrap;display:flex;align-items:center;gap:7px;transition:all .15s}
.chip .cdot{width:7px;height:7px;border-radius:50%}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .n{font-family:'Instrument Serif',serif;font-size:14px;margin-right:2px;opacity:.7}
.chip.on .n{opacity:1}

/* ——— Day card ——— */
.day{padding:8px 22px 28px;border-bottom:1px solid var(--rule)}
.day:last-of-type{border-bottom:0}
.day-head{padding:18px 0 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.day-num{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.day-num .big{font-family:'Instrument Serif',serif;font-size:44px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-weight:400}
.day-date{font-size:12.5px;color:var(--muted);text-align:right}
.day-date .tag{display:inline-block;padding:3px 8px;border-radius:3px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:4px}
.day-title{font-size:30px;line-height:1.05;letter-spacing:-.025em;margin:8px 0 10px;text-wrap:pretty}
.day-summary{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:40ch}

.day-toggle{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--ink)}
.day-toggle .arr{transition:transform .2s}
.day.open .day-toggle .arr{transform:rotate(90deg)}

/* ——— Timeline ——— */
.timeline{margin-top:20px;position:relative;padding-left:18px;display:none}
.day.open .timeline{display:block}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.stop{position:relative;padding:0 0 22px 18px}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;left:-16px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.stop.active::before{background:var(--ink)}
.stop-time{font-family:'Instrument Serif',serif;font-size:16px;color:var(--accent);margin-bottom:2px}
.stop-name{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-bottom:4px}
.stop-name .kr{display:block;font-family:'Noto Serif KR',serif;font-weight:400;color:var(--muted);font-size:12.5px;letter-spacing:-.005em;margin-top:2px}
.stop-desc{font-size:13.5px;color:var(--ink-2);line-height:1.5;text-wrap:pretty}
.stop-mode{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:8px;padding:4px 8px;background:var(--paper-2);border-radius:3px}
.stop-mode svg{width:11px;height:11px;opacity:.6}
.badges{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.badge{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:3px 6px;border-radius:2px;font-weight:600}
.badge.stay{background:#e7ecf4;color:#3b5b8c}
.badge.food{background:#f4e8de;color:#a85a2c}
.badge.beer{background:#dfeae6;color:#2f7a6b}
.badge.book{background:#ecdede;color:#b23a28}
.stop-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.stop-actions a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:7px 11px;border:1px solid var(--rule);border-radius:3px;text-decoration:none;color:var(--ink);background:var(--card);display:inline-flex;align-items:center;gap:6px}
.stop-actions a:active{background:var(--paper-2)}

/* ——— Notes (callouts) ——— */
.notes{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.note{display:flex;gap:10px;padding:11px 13px;border-radius:4px;font-size:12.5px;line-height:1.45;align-items:flex-start}
.note.warn{background:#f8ecd9;color:#6b4a1a;border-left:2px solid #b37d2b}
.note.tip{background:#e7ecf4;color:#2e4766;border-left:2px solid #3b5b8c}
.note .l{font-weight:700;letter-spacing:.08em;font-size:9.5px;text-transform:uppercase;flex:0 0 auto;margin-top:2px}
.coordination{margin-top:14px;padding:14px;border:1px dashed var(--rule);border-radius:4px;background:var(--card)}
.coordination h4{font-family:'Instrument Serif',serif;font-size:18px;margin-bottom:8px}
.coordination ul{list-style:none;font-size:13px;line-height:1.55}
.coordination li{padding:5px 0 5px 18px;position:relative;color:var(--ink-2)}
.coordination li::before{content:"→";position:absolute;left:0;color:var(--accent)}

/* ——— Map ——— */
#map{height:380px;width:100%;border-radius:4px;border:1px solid var(--rule);background:var(--paper-2);touch-action:pan-x pan-y pinch-zoom}
.map-legend{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px}
.map-legend .item{display:flex;align-items:center;gap:6px;color:var(--muted)}
.map-legend .sw{width:10px;height:10px;border-radius:50%}
.leaflet-container{font-family:'Inter',sans-serif!important}
.pin{background:transparent;border:0}
.pin div{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;font-family:'Instrument Serif',serif}

/* ——— Phrases ——— */
.phrase-list{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.phrase{background:var(--card);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.phrase .en{font-size:13px;color:var(--muted);grid-column:1;grid-row:1}
.phrase .kr{font-family:'Noto Serif KR',serif;font-size:20px;grid-column:1;grid-row:2;line-height:1.2;letter-spacing:-.01em}
.phrase .rom{grid-column:2;grid-row:1/3;font-family:'Instrument Serif',serif;font-size:14px;color:var(--accent);font-style:italic;text-align:right;align-self:center}

/* ——— Customs ——— */
.custom-list{display:flex;flex-direction:column;gap:0}
.custom{padding:14px 0;border-bottom:1px solid var(--rule-soft);display:flex;gap:12px}
.custom:last-child{border-bottom:0}
.custom .mark{font-family:'Instrument Serif',serif;font-size:22px;color:var(--accent);line-height:1;flex:0 0 auto;width:20px}
.custom .txt{font-size:14px;line-height:1.5;color:var(--ink-2)}
.custom .txt b{color:var(--ink);font-weight:600}

/* ——— Subway ——— */
.lines{display:flex;flex-direction:column;gap:8px}
.line{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:1px solid var(--rule-soft);border-radius:4px}
.line .badge-num{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.line .stops{font-size:12.5px;color:var(--ink-2);line-height:1.3}

/* ——— Packing ——— */
.packing{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.pack{display:flex;align-items:center;gap:10px;font-size:13px;padding:7px 0;cursor:pointer;user-select:none}
.pack .box{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:2px;flex:0 0 auto;position:relative;transition:background .12s}
.pack.done .box{background:var(--ink)}
.pack.done .box::after{content:"";position:absolute;left:3px;top:0px;width:5px;height:9px;border-right:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:rotate(45deg)}
.pack.done span{color:var(--muted);text-decoration:line-through}

/* ——— Emergency ——— */
.emerg{display:flex;flex-direction:column;gap:6px}
.emerg a, .emerg div{display:flex;justify-content:space-between;padding:12px 14px;background:var(--card);border:1px solid var(--rule-soft);border-radius:4px;text-decoration:none;font-size:13.5px;align-items:center}
.emerg .n{font-family:'Instrument Serif',serif;font-size:20px;color:var(--accent);letter-spacing:.02em}

/* ——— A2HS banner ——— */
.a2hs{position:sticky;top:env(safe-area-inset-top);z-index:50;background:var(--ink);color:var(--paper);padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:12px;font-size:12.5px;line-height:1.35;animation:a2hs-in .3s ease-out}
.a2hs .ico{flex:0 0 auto;width:28px;height:28px;border:1.5px solid var(--paper);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:16px}
.a2hs .txt{flex:1}
.a2hs .txt b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px;opacity:.7;font-weight:600}
.a2hs .txt .inline{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin:0 3px;padding:1px 5px;border:1px solid rgba(245,241,234,.35);border-radius:3px;font-size:11px}
.a2hs .x{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;opacity:.7;font-size:18px}
@keyframes a2hs-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.sheet-backdrop{position:fixed;inset:0;background:rgba(27,24,21,.18);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
.sheet-backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top-left-radius:14px;border-top-right-radius:14px;box-shadow:0 -10px 40px -10px rgba(27,24,21,.25);z-index:160;transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:78vh;overflow-y:auto;padding:10px 20px calc(22px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.sheet.on{transform:translateY(0)}
.sheet .grab{width:40px;height:4px;background:var(--rule);border-radius:2px;margin:4px auto 14px}
.sheet .s-day{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;margin-bottom:4px}
.sheet .s-time{font-family:'Instrument Serif',serif;font-size:22px;color:var(--accent);margin-bottom:2px}
.sheet .s-name{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-bottom:4px}
.sheet .s-name .kr{display:block;font-family:'Noto Serif KR',serif;font-weight:400;color:var(--muted);font-size:13px;margin-top:3px}
.sheet .s-desc{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:10px;text-wrap:pretty}
.sheet .s-mode{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:10px;padding:5px 9px;background:var(--paper-2);border-radius:3px}
.sheet .s-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.sheet .s-acts a{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border:1px solid var(--rule);border-radius:6px;background:var(--card);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none}
.sheet .s-acts a.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);grid-column:1/-1}

/* ——— Swipe nav removed — gesture-only ——— */

/* ——— Bottom nav ——— */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--rule);padding:10px 0 calc(10px + env(safe-area-inset-bottom));z-index:100;backdrop-filter:blur(12px);background:rgba(245,241,234,.94)}
.tabbar-inner{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:0 8px}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;border-radius:4px}
.tab svg{width:20px;height:20px;stroke-width:1.5}
.tab.on{color:var(--ink)}
.tab.on svg{stroke-width:1.8}

/* ——— Section visibility ——— */
.view{display:none}
.view.on{display:block}

/* ——— Stats row ——— */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 -22px;padding:14px 22px;background:var(--card)}
.stat{text-align:center;border-right:1px solid var(--rule-soft);padding:2px 0}
.stat:last-child{border-right:0}
.stat .v{font-family:'Instrument Serif',serif;font-size:26px;line-height:1;letter-spacing:-.02em}
.stat .l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:600}

/* ——— Tweaks panel ——— */
.tweaks{position:fixed;bottom:80px;right:12px;width:240px;background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:14px;box-shadow:0 20px 50px -20px rgba(27,24,21,.4);z-index:200;display:none;font-size:13px}
.tweaks.on{display:block}
.tweaks h5{font-family:'Instrument Serif',serif;font-size:17px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.tweaks h5 .x{font-size:12px;color:var(--muted);font-family:'Inter',sans-serif;cursor:pointer}
.tweaks .row{margin-bottom:10px}
.tweaks label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:600}
.tweaks .swatches{display:flex;gap:5px}
.tweaks .sw{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.tweaks .sw.on{border-color:var(--ink)}
.tweaks .btns{display:flex;gap:4px}
.tweaks .btns button{flex:1;padding:6px;font-size:11px;border:1px solid var(--rule);border-radius:3px;background:var(--paper)}
.tweaks .btns button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}