/* ttshop shell — minimal CSS to render header + footer without pulling in bootstrap.
   Scoped to .ts-shell wrapper so it never bleeds into Blowfish article content. */

/* ============ ARTICLE BODY MOBILE SAFETY NET ============
   Source articles use Tailwind class names (w-full, flex, grid-cols-2) that
   Blowfish's compiled CSS only defines at >=1536px. On mobile, raw <img>
   renders at natural pixel size and overflows. Enforce a baseline so any
   .ttshop-body content stays inside its column. */
.ttshop-body img,
.ttshop-body video,
.ttshop-body iframe,
.ttshop-body svg { max-width: 100%; height: auto; }
.ttshop-body { overflow-wrap: anywhere; }
/* CJK text + justify alignment = ugly inter-character stretching (no spaces
   to absorb the slack). Override unconditionally — articles that meant to
   center / right-align still get that via more specific rules. */
main#main-content .ttshop-body,
main#main-content .ttshop-body p,
main#main-content .ttshop-body li,
main#main-content .ttshop-body td,
main#main-content .ttshop-body th,
main#main-content .ttshop-body div { text-align: start; }
/* Inline `style="text-align: justify"` wins specificity-wise; force it back
   to `start` via attribute selector + !important. */
main#main-content .ttshop-body [style*="text-align: justify"],
main#main-content .ttshop-body [style*="text-align:justify"] { text-align: start !important; }
/* Honor explicit alignment intent from inline style="text-align: center|right". */
main#main-content .ttshop-body [style*="text-align: center"],
main#main-content .ttshop-body [style*="text-align:center"] { text-align: center !important; }
main#main-content .ttshop-body [style*="text-align: right"],
main#main-content .ttshop-body [style*="text-align:right"] { text-align: right !important; }
/* Common semantic classes that benefit from centering. */
main#main-content .ttshop-body :is(.intro, .conclusion, .text-center, .center) { text-align: center; }
/* Single-button containers — always centered.
   Catches known class names plus the generic "div whose only child is a
   button/anchor" pattern via :has(). */
main#main-content .ttshop-body :is(
  .purchase-button-container,
  .single-button-container,
  .button-container,
  .btn-container,
  .cta-container
) { text-align: center; }
main#main-content .ttshop-body div:has(> :is(a, button):only-child) { text-align: center; }
.ttshop-body * { box-sizing: border-box; max-width: 100%; min-width: 0; }
/* Force normal table layout, overriding article-level "responsive card"
   patterns (display:block + position:absolute thead) that the source CMS
   sometimes injects. Our standard table style below handles small viewports
   on its own. */
main#main-content .ttshop-body table { display: table !important; }
main#main-content .ttshop-body table thead { display: table-header-group !important; position: static !important; }
main#main-content .ttshop-body table tbody { display: table-row-group !important; }
main#main-content .ttshop-body table tr { display: table-row !important; position: static !important; }
main#main-content .ttshop-body table th,
main#main-content .ttshop-body table td { display: table-cell !important; position: static !important; padding-left: 14px !important; text-align: left !important; }
main#main-content .ttshop-body table td::before,
main#main-content .ttshop-body table th::before { content: none !important; }
/* Source cards/sections frequently use Tailwind grid/flex helpers that are
   only compiled at md+. Force a single-column stack on mobile so children
   never get an implicit row of 3-4 columns from inline grid-template-columns. */
@media (max-width: 767px) {
  .ttshop-body .grid { grid-template-columns: 1fr !important; }
  .ttshop-body [class*="md:grid-cols-"] { grid-template-columns: 1fr !important; }
  .ttshop-body .flex,
  .ttshop-body [class*="md:flex-"] { flex-wrap: wrap; }
}

/* ============ DARK MODE ADAPTATION FOR MIGRATED BODIES ============
   Migration normalizes hardcoded light colors in inline `style="..."`
   attributes to these CSS custom properties (see scripts/darkify_inline.py).
   At runtime, light mode = original look, dark mode = inverted palette,
   with zero per-article CSS edits. */
/* ─── Force-light subsections (Korea SIM Guide etc.) ──────────────────
   Pages opting in via `params.no_dark: true` get `data-force-light="true"`
   on the <html> element (see baseof.html). We:
   - Always paint the chrome with the light palette regardless of OS
     preference or any leftover `.dark` class.
   - Hide the appearance switcher so the user can't re-enter dark mode.
   - Pin the body background to white so the page reads as a product
     LP, matching the adjacent /kt_sim_buy PHP pages on ttshop.jp. */
html[data-force-light] .ttshop-body,
html[data-force-light].dark .ttshop-body,
html[data-force-light].dark .ttshop-body * {
  /* Reset the dark token overrides — force light values. */
  --tt-card-bg: #ffffff;
  --tt-soft-bg: #f9fafb;
  --tt-page-bg: #ffffff;
  --tt-body-text: #111827;
  --tt-muted-text: #4b5563;
  --tt-border-soft: #e5e7eb;
  --tt-table-line: #d1d5db;
  --tt-callout-bg: #f1f5f9;
  --tt-callout-accent: #0ea5e9;
}
html[data-force-light] body {
  background-color: #ffffff !important;
  color: #111827 !important;
}
html[data-force-light] #appearance-switcher {
  display: none !important;
}
/* Belt-and-suspenders: even if the appearance.js toggles `.dark` on
   <html>, ignore it under force-light. */
html[data-force-light].dark {
  color-scheme: light;
}

.ttshop-body {
  --tt-card-bg: #ffffff;
  --tt-soft-bg: #f9fafb;
  --tt-page-bg: #ffffff;
  --tt-body-text: #111827;
  --tt-muted-text: #4b5563;
  --tt-border-soft: #e5e7eb;
  color: var(--tt-body-text);
}
html.dark .ttshop-body {
  /* Card lifts ~2 steps above Blowfish body bg (#1e293b) so cards remain
     visible against page background. Soft-bg sinks slightly for nested
     callouts. */
  --tt-card-bg: #334155;       /* slate-700, lighter than body */
  --tt-soft-bg: #283447;       /* slate-750-ish, between body and card */
  --tt-page-bg: #0f172a;
  --tt-body-text: #f3f4f6;
  --tt-muted-text: #d1d5db;
  --tt-border-soft: #475569;   /* slate-600 for visible edges */
}
/* Give every card-shaped element a subtle border in dark mode so they
   read as distinct surfaces, not floating text. Catches both the
   normalized `var(--tt-card-bg)` and the soft variant. */
html.dark .ttshop-body [style*="var(--tt-card-bg)"],
html.dark .ttshop-body [style*="var(--tt-soft-bg)"],
html.dark .ttshop-body [style*="var(--container-bg-color)"] {
  border: 1px solid var(--tt-border-soft);
}

/* ============ STANDARD CALLOUT / INFO-BOX VISUAL ============
   Source CMS uses many class names for promo/conclusion/highlight boxes
   that look different per article and break in dark mode. Force the same
   tasteful "conclusion-style" treatment globally: brand-tinted background,
   left border accent, centered text. Per-article <style> rules still set
   their own background — those get overridden by these tokens via higher
   specificity (.ttshop-body + .class is (0,2,0), so we use main#main-content
   prefix to reach (1,0,2) and beat them). */
.ttshop-body {
  --tt-callout-bg: #e6fffd;          /* light cyan brand tint */
  --tt-callout-accent: #27cdc9;
}
html.dark .ttshop-body {
  --tt-callout-bg: #1e293b;           /* dark slate, matches conclusion var */
  --tt-callout-accent: #27cdc9;
}
main#main-content .ttshop-body :is(
  .ttshop-promo,
  .eg-summary,
  .promo-box,
  .highlight-box,
  .summary-box,
  .final-summary,
  .editor-highlight-box,
  .intro,
  .conclusion
) {
  background-color: var(--tt-callout-bg);
  color: var(--tt-body-text);
  border: none;
  border-left: 5px solid var(--tt-callout-accent);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 28px 0;
  font-size: 1.05em;
  line-height: 1.75;
  text-align: left;
  box-shadow: none;
}
main#main-content .ttshop-body :is(.intro, .conclusion) {
  text-align: center;
  font-size: 1.1em;
}
html.dark main#main-content .ttshop-body :is(
  .ttshop-promo, .eg-summary, .promo-box, .highlight-box,
  .summary-box, .final-summary, .editor-highlight-box,
  .intro, .conclusion
) {
  border-top: 1px solid var(--tt-border-soft);
  border-right: 1px solid var(--tt-border-soft);
  border-bottom: 1px solid var(--tt-border-soft);
}

/* Standard info-box (address, store-info, contact-info) — neutral card,
   not brand-tinted. */
main#main-content .ttshop-body :is(
  .store-info-box,
  .store-info,
  .address-info,
  .contact-info,
  .event-info-box,
  .event-details-box,
  .attraction-details,
  .baking-times,
  .eg-coupon-box
) {
  background-color: var(--tt-card-bg);
  color: var(--tt-body-text);
  border: 1px solid var(--tt-border-soft);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 24px 0;
  line-height: 1.7;
  box-shadow: none;
}

/* ============ STANDARD TABLE STYLE ============
   Single uniform border color across all internal/external lines so the
   table reads as one shape, not a patchwork. Border token is the same in
   both light and dark via :is(.dark *) override on --tt-table-line. */
.ttshop-body { --tt-table-line: #d1d5db; }
html.dark .ttshop-body { --tt-table-line: #475569; }
main#main-content .ttshop-body table {
  width: 100%;             /* fill the prose column on all viewports */
  max-width: 100%;
  display: block;          /* allow horizontal scroll for wide-content tables */
  overflow-x: auto;
  margin: 24px 0;
  border-collapse: collapse;
  border: 1px solid var(--tt-table-line);
  border-radius: 10px;
  font-size: 0.97em;
  line-height: 1.6;
  background-color: var(--tt-card-bg);
  color: var(--tt-body-text);
}
/* Allow long unbreakable strings (Korean addresses, URLs, etc.) to wrap
   inside cells so the table prefers wrapping over horizontal scrolling. */
main#main-content .ttshop-body table th,
main#main-content .ttshop-body table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}
main#main-content .ttshop-body table th,
main#main-content .ttshop-body table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--tt-table-line);
}
main#main-content .ttshop-body table th {
  background-color: var(--tt-soft-bg);
  font-weight: 600;
  color: var(--tt-body-text);
}
/* Auto-detect "header row":
   - Explicit <thead> always styled as header.
   - Tables WITHOUT <thead> get their first <tbody> row styled as header
     (covers source tables that mis-used <tr><th>label</th><td>label</td>).
   - Tables WITH <thead> must NOT also paint their first <tbody> row, or the
     real header is duplicated. */
main#main-content .ttshop-body table thead th,
main#main-content .ttshop-body table thead td,
main#main-content .ttshop-body table:not(:has(thead)) tbody tr:first-child th,
main#main-content .ttshop-body table:not(:has(thead)) tbody tr:first-child td {
  background-color: var(--tt-callout-accent);
  color: #ffffff;
  border-color: var(--tt-callout-accent);
  font-weight: 600;
}
/* Mobile: tighter padding so wide tables fit. */
@media (max-width: 640px) {
  main#main-content .ttshop-body table th,
  main#main-content .ttshop-body table td {
    padding: 8px 10px;
  }
}
/* Bridge the palettes most articles already define under .ttshop-body —
   make their custom props re-derive from our tokens so dark mode follows. */
html.dark .ttshop-body {
  --background-color: var(--tt-page-bg);
  --container-bg-color: var(--tt-card-bg);
  --text-color: var(--tt-body-text);
  --secondary-text-color: var(--tt-muted-text);
  --border-color: var(--tt-border-soft);
  --light-primary-color: #1e293b;
}
/* Safety net: any bare child element with no inline color inherits body text. */
html.dark .ttshop-body :where(p, li, span, div, h1, h2, h3, h4, h5, h6, strong, em, td, th) {
  color: inherit;
}
/* Catch lingering hardcoded literals from articles not yet re-migrated.
   These selectors only fire when the inline style still has the legacy
   value — they no-op after the sweep. */
html.dark .ttshop-body [style*="background-color: white"],
html.dark .ttshop-body [style*="background-color:#fff"],
html.dark .ttshop-body [style*="background: white"],
html.dark .ttshop-body [style*="background-color: #FFFFFF"],
html.dark .ttshop-body .bg-white {
  background-color: var(--tt-card-bg) !important;
  color: var(--tt-body-text) !important;
}
html.dark .ttshop-body [style*="background-color: #F9FAFB"],
html.dark .ttshop-body [style*="background-color: #f9fafb"],
html.dark .ttshop-body [style*="background-color: #f3f4f6"],
html.dark .ttshop-body .bg-gray-50,
html.dark .ttshop-body .bg-gray-100 {
  background-color: var(--tt-soft-bg) !important;
  color: var(--tt-body-text) !important;
}
html.dark .ttshop-body [style*="color: #4b5563"],
html.dark .ttshop-body [style*="color: #6b7280"],
html.dark .ttshop-body [style*="color: #374151"],
html.dark .ttshop-body [style*="color: #343a40"],
html.dark .ttshop-body [style*="color: #555"],
html.dark .ttshop-body .text-gray-600,
html.dark .ttshop-body .text-gray-700 { color: var(--tt-muted-text) !important; }

/* ============ CHROME TOKENS (header + footer + offcanvas) ============
   Brand mint #27CDC9 stays in both modes — high enough contrast on dark.
   Other neutrals switch via these tokens. Only the chrome (.ts-shell) uses
   --ts-chrome-*; article body uses --tt-* (defined earlier). */
.ts-shell {
  --ts-chrome-bg:        #ffffff;
  --ts-chrome-soft-bg:   #f6f7f9;
  --ts-chrome-text:      #111111;
  --ts-chrome-text-2:    #333333;     /* secondary text (depth2 menu) */
  --ts-chrome-muted:     #555555;
  --ts-chrome-muted-2:   #777777;     /* footer links */
  --ts-chrome-border:    #eeeeee;
  --ts-chrome-input-border: #dddddd;
  --ts-chrome-hover-bg:  #f9fafb;
  --ts-chrome-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
  --ts-chrome-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.06);
}
html.dark .ts-shell {
  --ts-chrome-bg:        #0f172a;
  --ts-chrome-soft-bg:   #111827;
  --ts-chrome-text:      #f3f4f6;
  --ts-chrome-text-2:    #e5e7eb;
  --ts-chrome-muted:     #94a3b8;
  --ts-chrome-muted-2:   #94a3b8;
  --ts-chrome-border:    #1e293b;
  --ts-chrome-input-border: #334155;
  --ts-chrome-hover-bg:  #1e293b;
  --ts-chrome-shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
  --ts-chrome-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.55);
}

/* ============ HEADER (fixed top) ============ */
.ts-shell #header_wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ts-chrome-bg);
  border-bottom: 1px solid var(--ts-chrome-border);
  box-shadow: var(--ts-chrome-shadow);
  z-index: 1000;
  height: 88px;             /* matches ttshop.jp reference */
  font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 14px;
}
.ts-shell #header_wrap .container,
.ts-shell #header_wrap > .container[style] {
  max-width: 1320px !important;
  width: auto !important;
  margin: 0 auto !important;
  height: 100%;
  position: relative;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Header logo — force identical visual box across light/dark variants.
   Source PNG aspect ratios differ (1.87 vs 2.10) so a height-only rule
   makes the light variant look narrower. Lock both width and height. */
.ts-shell .div_32 img { width: 140px !important; height: 68px !important; object-fit: contain; }

/* Light/dark logo swap. Both variants are output in the HTML; CSS picks
   one based on the active theme. Affects header + footer + offcanvas. */
.ts-shell .logo-dark { display: none; }
html.dark .ts-shell .logo-light { display: none; }
html.dark .ts-shell .logo-dark { display: inline-block; }
.ts-shell .div_top_cart { display: none; } /* hidden on desktop, shown on mobile via overrides below */
.ts-shell .navbar-toggle { display: none; }

/* Override inline width/margin from ttshop legacy CSS */
.ts-shell .menu_wrap,
.ts-shell .menu_wrap[style] {
  width: auto !important;
  margin: 0 !important;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-shell #gnb {
  margin: 0 auto !important;
  gap: 0;
  flex: none;
}
.ts-shell #gnb > li.depth1,
.ts-shell #gnb > li.depth1[style] { width: auto !important; }

/* Hide search lightbox by default — only show when triggered */
.ts-shell .lightbox { display: none; }
.ts-shell .lightbox.is-open {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1200;
  padding: 80px 20px;
}
.ts-shell .lightbox.is-open > div {
  max-width: 520px;
  margin: 0 auto;
  background: var(--ts-chrome-bg);
  color: var(--ts-chrome-text);
  border-radius: 8px;
  padding: 28px;
}
.ts-shell .lightbox h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--ts-chrome-text); }
.ts-shell .lightbox legend { display: none; }
.ts-shell .lightbox input[type="text"] {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ts-chrome-input-border);
  background: var(--ts-chrome-bg);
  color: var(--ts-chrome-text);
  border-radius: 6px;
  padding: 0 12px;
  font-size: 15px;
  margin-bottom: 10px;
}
.ts-shell .lightbox button[type="submit"] {
  background: #27CDC9;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
}

/* GNB (top menu) */
.ts-shell #gnb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.ts-shell #gnb > li.depth1 {
  position: relative;
  padding: 0;
  width: auto !important;
}
.ts-shell #gnb > li.depth1 > a {
  display: inline-block;
  padding: 26px 24px;       /* tighter to fit 76px header */
  color: var(--ts-chrome-text) !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.ts-shell #gnb > li.depth1 > a:hover { color: #27CDC9 !important; }

/* Mega-menu (depth2) — ttshop-style: hover the header → ALL depth2 panels open as one fullwidth panel */
.ts-shell #gnb > li.depth1 {
  position: relative;
}
.ts-shell #gnb .depth2 {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 14px 16px 20px;
  list-style: none;
  min-width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1001;
}
.ts-shell #gnb > li.depth1 ul.depth2:not(:first-of-type) {
  /* Second .depth2 block (used in About US menu) sits below first */
  top: calc(100% + 90px);
}
.ts-shell #gnb .depth2 li { padding: 0; list-style: none; }
.ts-shell #gnb .depth2 a {
  display: block;
  padding: 4px 8px;
  color: var(--ts-chrome-text-2) !important;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
}
.ts-shell #gnb .depth2 a:hover { color: #27CDC9 !important; }
.ts-shell #gnb .depth2 a[style*="color:#999"] { font-size: 13px; padding-left: 24px; }
.ts-shell #gnb .depth2 br { display: none; }
.ts-shell #gnb .depth2 .fa { margin-right: 8px; color: #27CDC9; font-size: 13px; }
/* Make FA4 arrow-circle-o-right render via fallback unicode for FA5-only environments */
.ts-shell #gnb .depth2 i.fa-arrow-circle-o-right { font-family: 'FontAwesome', 'Font Awesome 5 Free'; font-weight: 900; }
.ts-shell #gnb .depth2 i.fa-arrow-circle-o-right::before { content: '\f138'; }

/* Fullwidth white panel behind the mega-menu, only visible on header hover */
.ts-shell #header_wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  background: var(--ts-chrome-bg);
  border-bottom: 1px solid var(--ts-chrome-border);
  box-shadow: var(--ts-chrome-shadow-lg);
  transition: height 0.18s ease;
  pointer-events: none;
  z-index: 999;
}
.ts-shell #header_wrap:hover::after { height: 500px; }
.ts-shell #header_wrap:hover .depth2 { visibility: visible; opacity: 1; }

/* Right-side buttons */
.ts-shell .top_right_menu {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.ts-shell .btn-mint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #27CDC9;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ts-shell .btn-mint:hover { background: #1eb2af; }
.ts-shell .btn-mint.btn-mint-alt { background: #2DBAB4; }
.ts-shell .btn-mint.btn-mint-alt:hover { background: #1ea39e; }
.ts-shell .top_right_menu .btn-mint .fa { margin-right: 4px; }
.ts-shell .top_right_menu .span_1 button { font-family: inherit; }
/* Enforce uniform sizing across the 3 top-right buttons.
   Some buttons inherit inline `padding: 0px 10px;` from the legacy PHP source
   (preserved for parity), while the search <a> has no inline override —
   that asymmetry made each slot render at a different height. Force the same
   box for every .btn-mint in the menu, regardless of element type or inline. */
.ts-shell .top_right_menu .btn-mint,
.ts-shell .top_right_menu .span_1 > .btn-mint {
  padding: 8px 16px !important;
  line-height: 1.4 !important;
  box-sizing: border-box;
}

/* Hide ttshop's extra header decor (eSIM QR sidebar, kt japan banner inside header) on PoC */
.ts-shell #header_wrap .div_33,
.ts-shell #header_wrap .div_35 { display: none; }

/* ============ ttshop-body wrapper (HTML-preserved articles) ============
   Articles migrated from ttshop preserve their original body markup
   (Tailwind classes, inline <style>, <figure>, custom card layouts).
   The <style> blocks are auto-prefixed with `.ttshop-body` during
   migration so they only apply inside this wrapper. We don't add many
   defaults here — fewer rules = fewer conflicts with the source CSS.
*/
/* TOC hierarchy — H2 stays default, H3 (nested ul) one notch smaller so
   sub-sections visually read as children of their parent H2. */
#TOCView nav ul ul a,
#TOCView nav ul ul li,
nav#TableOfContents ul ul a,
nav#TableOfContents ul ul li {
  font-size: 0.88em;
  opacity: 0.85;
}

main#main-content .ttshop-body {
  /* Strip Tailwind utility-style background/padding the source page-level
     <body> rule may try to apply via the scoped rule. */
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  text-align: left;
  /* Body text uses default Japanese line-break behavior (break almost
     anywhere except certain JIS X 4051 forbidden points) for natural
     wrap. Strict no-break rules (word-break: keep-all + line-break:
     strict) are reserved for short marketing/CTA snippets where every
     phrase boundary matters — applying them to the whole body forced
     awkward breaks. Long unbreakable Latin URLs still wrap via the
     `overflow-wrap` default. */
}
main#main-content .ttshop-body img {
  max-width: 100%;
  height: auto;
}
/* (table-specific layout handled in STANDARD TABLE STYLE block above) */
main#main-content .ttshop-body iframe {
  max-width: 100%;
}
/* Caption sits tight under its image. Pull it up with negative margin
   to fully collapse the image's inline baseline whitespace + the
   wrapper's bottom margin. */
main#main-content .ttshop-body .image-caption,
main#main-content .ttshop-body p.image-caption,
main#main-content .ttshop-body span.image-caption,
main#main-content .ttshop-body figcaption {
  margin-top: -16px !important;
  margin-bottom: 16px !important;
  padding-top: 0 !important;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tt-muted-text);
  text-align: center;
}
/* Strip the bottom margin from the immediately-preceding image wrapper
   so the caption can sit flush. Avoid `div:has(+ .image-caption)` —
   that would also match shortcode wrappers (.bf-shortcode containing
   an iframe), where `line-height: 0` was collapsing map embeds. */
main#main-content .ttshop-body p:has(> img + .image-caption),
main#main-content .ttshop-body p:has(> a > img):has(+ .image-caption),
main#main-content .ttshop-body a:has(+ .image-caption) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0;
}
/* Source CMS sometimes places `<br style="clear:both">` between the
   image and its caption (legacy float-clear hack). In our flex-column
   .image-container the <br> just adds a phantom line-height row. Hide
   it so the caption sits directly under the image. */
main#main-content .ttshop-body .image-container br,
main#main-content .ttshop-body .map-container br {
  display: none;
}
/* Eliminate any flex gap between image and caption in containers that
   are explicitly column-flex from inline styles. */
main#main-content .ttshop-body .image-container,
main#main-content .ttshop-body .map-container {
  gap: 0 !important;
  row-gap: 0 !important;
}
/* List markers (ul bullets, ol numbers) inherit `currentColor` from the
   <li>. Source CMS often sets li color to a dark grey (#333 etc.) for
   light mode, which becomes invisible-on-dark. Force markers to use
   the body-text token in dark mode so they stay readable. */
html.dark main#main-content .ttshop-body li::marker {
  color: var(--tt-body-text);
}
html.dark main#main-content .ttshop-body ul,
html.dark main#main-content .ttshop-body ol,
html.dark main#main-content .ttshop-body li {
  color: var(--tt-body-text);
}
/* Unify the article-body surface across all migrated articles. Source
   CMS pages set `.ttshop-body { background: ... }` AND wrap content in
   an `.eg-container` / `.editor-container` "card" with its own bg, so
   every article ends up with a 2-tone card-on-page look that varies
   article-to-article. Force the outer wrapper AND the article-level
   container both transparent so every article reads as plain page bg
   from edge to edge. Smaller inner accents (.product-box / .eg-summary
   / .editor-highlight-box) keep their own surface — those are
   intentional callouts, not the article container. */
main#main-content .ttshop-body,
main#main-content .ttshop-body .eg-container,
main#main-content .ttshop-body .editor-container,
main#main-content .ttshop-body .editor-body,
main#main-content .ttshop-body .esim-container,
main#main-content .ttshop-body .tada-guide-container,
main#main-content .ttshop-body .ttshop-post-container,
main#main-content .ttshop-body .container,
/* Some articles use Tailwind-style utility classes (bg-white, bg-gray-50,
   bg-gray-100, bg-neutral-*, bg-slate-*) on inline cards. Tailwind classes
   don't adapt to dark mode unless paired with `dark:bg-*` variants, so
   neutralize the LIGHT-tone surfaces here for unified appearance across
   migrated articles. Dark-tone variants (bg-gray-700/800/900, etc.) are
   intentional dark surfaces (e.g. footer with text-white) — leave them. */
main#main-content .ttshop-body [class*="bg-white"],
main#main-content .ttshop-body [class*="bg-gray-50"],
main#main-content .ttshop-body [class*="bg-gray-100"],
main#main-content .ttshop-body [class*="bg-gray-200"],
main#main-content .ttshop-body [class*="bg-gray-300"],
main#main-content .ttshop-body [class*="bg-neutral-50"],
main#main-content .ttshop-body [class*="bg-neutral-100"],
main#main-content .ttshop-body [class*="bg-neutral-200"],
main#main-content .ttshop-body [class*="bg-slate-50"],
main#main-content .ttshop-body [class*="bg-slate-100"],
main#main-content .ttshop-body [class*="bg-slate-200"] {
  background: transparent !important;
  box-shadow: none !important;
}
/* The same wrapper classes above sometimes also carry an inline `border:`
   that drew the card edge — once we go transparent, that border becomes
   a free-standing outline rectangle. Strip it on the article-wrapper
   classes only. Inner callouts (.product-box, .eg-summary, etc.) keep
   their borders because they're intentional. */
main#main-content .ttshop-body .eg-container,
main#main-content .ttshop-body .editor-container,
main#main-content .ttshop-body .editor-body,
main#main-content .ttshop-body .esim-container,
main#main-content .ttshop-body .tada-guide-container,
main#main-content .ttshop-body .ttshop-post-container {
  border: 0 !important;
  border-radius: 0 !important;
}
/* Tailwind `text-gray-*` / `text-neutral-*` / `text-slate-*` utilities
   are hardcoded dark greys that go invisible on the dark page bg.
   Remap to our body/muted-text tokens in dark mode. */
html.dark main#main-content .ttshop-body [class*="text-gray-9"],
html.dark main#main-content .ttshop-body [class*="text-gray-8"],
html.dark main#main-content .ttshop-body [class*="text-gray-7"],
html.dark main#main-content .ttshop-body [class*="text-neutral-9"],
html.dark main#main-content .ttshop-body [class*="text-neutral-8"],
html.dark main#main-content .ttshop-body [class*="text-neutral-7"],
html.dark main#main-content .ttshop-body [class*="text-slate-9"],
html.dark main#main-content .ttshop-body [class*="text-slate-8"],
html.dark main#main-content .ttshop-body [class*="text-slate-7"] {
  color: var(--tt-body-text) !important;
}
html.dark main#main-content .ttshop-body [class*="text-gray-6"],
html.dark main#main-content .ttshop-body [class*="text-gray-5"],
html.dark main#main-content .ttshop-body [class*="text-neutral-6"],
html.dark main#main-content .ttshop-body [class*="text-neutral-5"],
html.dark main#main-content .ttshop-body [class*="text-slate-6"],
html.dark main#main-content .ttshop-body [class*="text-slate-5"] {
  color: var(--tt-muted-text) !important;
}
main#main-content .bf-shortcode {
  margin: 1.5em 0;
}
/* Safety net: source CMS sometimes wraps a map embed in
   `<div class="eg-image-container" style="border:1px solid #ccc;...">`,
   producing a duplicate frame around .bf-embed. Strip any wrapper
   border/radius when the wrapper directly contains an embed shortcode. */
main#main-content .ttshop-body div:has(> .bf-shortcode > .bf-embed),
main#main-content .ttshop-body div:has(> .bf-embed) {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* When .bf-embed sits inside .map-container (flex column with
   align-items:center), .bf-shortcode and .bf-embed inherit auto width
   from the centered axis. Children of .bf-embed are position:absolute
   so they don't contribute to its size — the box collapses to 0 and
   the iframe map becomes invisible. Force a usable width. */
main#main-content .ttshop-body .map-container,
main#main-content .ttshop-body .map-container .bf-shortcode,
main#main-content .ttshop-body .map-container .bf-embed {
  width: 100%;
  max-width: 700px;
}

/* ============ 2-IMAGE SIDE-BY-SIDE NORMALIZATION ============
   Source CMS articles use many different markup shapes for "two
   images in a row" — Tailwind grid-cols-2, eg-image-grid-container,
   image-container grid+grid-cols-2, image-grid-container, flex-wrap.
   Heights differ per article and gap is inconsistent. Standardize:
   uniform 3/2 aspect-ratio + object-fit: cover so each row reads as
   a clean pair, 8px gap, 16px vertical margin. Light crop is the
   accepted trade-off for visual consistency. */
main#main-content .ttshop-body .eg-image-grid-container,
main#main-content .ttshop-body .image-grid-container,
main#main-content .ttshop-body .image-container[class*="grid-cols-2"],
main#main-content .ttshop-body .image-container[class*="md:grid-cols-2"],
main#main-content .ttshop-body [class*="grid-cols-2"]:not([class*="grid-cols-1"]),
main#main-content .ttshop-body [class*="md:grid-cols-2"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}
/* `grid md:grid-cols-3` (3-image rows) */
main#main-content .ttshop-body [class*="md:grid-cols-3"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}
/* Each direct child holds one image. Force uniform 3/2 aspect so
   heights match; cover so the image fills without letterboxing. */
main#main-content .ttshop-body .eg-image-grid-container > *,
main#main-content .ttshop-body .image-grid-container > *,
main#main-content .ttshop-body [class*="grid-cols-2"]:not([class*="grid-cols-1"]) > *,
main#main-content .ttshop-body [class*="md:grid-cols-2"] > *,
main#main-content .ttshop-body [class*="md:grid-cols-3"] > * {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 !important;
}
main#main-content .ttshop-body .eg-image-grid-container img,
main#main-content .ttshop-body .image-grid-container img,
main#main-content .ttshop-body [class*="grid-cols-2"]:not([class*="grid-cols-1"]) img,
main#main-content .ttshop-body [class*="md:grid-cols-2"] img,
main#main-content .ttshop-body [class*="md:grid-cols-3"] img {
  width: 100% !important;
  height: auto !important;             /* let aspect-ratio drive height */
  aspect-ratio: 3 / 2 !important;       /* uniform cell shape — must beat HTML width/height attrs */
  object-fit: cover !important;
  display: block;
  border: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
}
/* Flex-based 2-image row (Tailwind `flex flex-wrap md:flex-nowrap`).
   Children are also images — normalize same way. */
main#main-content .ttshop-body div[class*="flex"][class*="flex-wrap"][class*="md:flex-nowrap"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}
main#main-content .ttshop-body div[class*="flex"][class*="flex-wrap"][class*="md:flex-nowrap"] > *,
main#main-content .ttshop-body div[class*="flex"][class*="flex-wrap"][class*="md:flex-nowrap"] img {
  aspect-ratio: 3 / 2;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 !important;
}
/* ============ UNIFIED IMAGE BORDER-RADIUS ============
   Source CMS sets per-article inline border-radius (0, 4, 8, 10, 12px).
   Standardize editorial body images on 8px (Tailwind rounded-md tone).
   Sharp utility-sized icons (Tailwind w-/h-) keep their original square
   look — they're meant to be UI marks, not editorial photos. */
main#main-content .ttshop-body .image-container img,
main#main-content .ttshop-body .eg-image-container img,
main#main-content .ttshop-body .editor-image-container img,
main#main-content .ttshop-body .image-link-container img,
main#main-content .ttshop-body figure img,
main#main-content .ttshop-body .div_31 img,
main#main-content .ttshop-body p > img,
main#main-content .ttshop-body p > a > img,
main#main-content .ttshop-body picture > img {
  border-radius: 8px !important;
}
/* Sharp icons: utility classes signal "small UI mark" intent.
   Override the radius back to 0 so step icons / inline badges / etc.
   stay crisp. */
main#main-content .ttshop-body img[class*="w-4"],
main#main-content .ttshop-body img[class*="w-5"],
main#main-content .ttshop-body img[class*="w-6"],
main#main-content .ttshop-body img[class*="w-7"],
main#main-content .ttshop-body img[class*="w-8"],
main#main-content .ttshop-body img[class*="w-10"],
main#main-content .ttshop-body img[class*="w-12"],
main#main-content .ttshop-body img[class*="w-16"],
main#main-content .ttshop-body img[class*="flex-shrink-0"] {
  border-radius: 0 !important;
}

/* Mobile: stack to 1 column instead of squashing to ~50% width pairs. */
@media (max-width: 640px) {
  main#main-content .ttshop-body .eg-image-grid-container,
  main#main-content .ttshop-body .image-grid-container,
  main#main-content .ttshop-body [class*="grid-cols-2"]:not([class*="grid-cols-1"]),
  main#main-content .ttshop-body [class*="md:grid-cols-2"],
  main#main-content .ttshop-body [class*="md:grid-cols-3"],
  main#main-content .ttshop-body div[class*="flex"][class*="flex-wrap"][class*="md:flex-nowrap"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============ KT SIM CTA shortcode (used in article body) ============ */
main#main-content .kt-cta {
  margin: 2.5em 0;
  text-align: center;
}
main#main-content .kt-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #27CDC9 0%, #1eb2af 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 24px;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(39, 205, 201, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  max-width: 100%;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}
main#main-content .kt-cta-label,
main#main-content .kt-cta-arrow {
  white-space: nowrap;
}
@media (max-width: 400px) {
  main#main-content .kt-cta-btn { font-size: 14px; padding: 12px 18px; }
}

/* Card variant — eyebrow label, teaser (one phrase per line), button.
   Tighter spacing to body, mobile-first Japanese line-break. */
main#main-content .kt-cta-card {
  max-width: 560px;
  margin: 1.2em auto 1.6em;        /* tighter to surrounding prose */
  padding: 20px 22px 22px;
  background: linear-gradient(135deg,
    rgba(39, 205, 201, 0.08) 0%,
    rgba(39, 205, 201, 0.02) 60%,
    var(--tt-card-bg) 100%);
  border: 1px solid rgba(39, 205, 201, 0.35);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(39, 205, 201, 0.08);
}
html.dark main#main-content .kt-cta-card {
  background: linear-gradient(135deg,
    rgba(39, 205, 201, 0.18) 0%,
    rgba(39, 205, 201, 0.04) 60%,
    var(--tt-card-bg) 100%);
  border-color: rgba(39, 205, 201, 0.4);
}
main#main-content .kt-cta-card .kt-cta-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1aa59e;
  margin-bottom: 8px;
  text-align: left;
}
html.dark main#main-content .kt-cta-card .kt-cta-eyebrow { color: #27CDC9; }

main#main-content .kt-cta-card .kt-cta-teaser {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tt-body-text);
  text-align: left;
  font-weight: 600;
  /* Short teaser stays on one line. Long teaser wraps only when it
     would overflow the card — the shortcode inserts `<wbr>` after
     every 「、」「。」 so those are the preferred break points. With
     word-break:keep-all browsers won't split mid-character / mid-word. */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: anywhere;
}
main#main-content .kt-cta-card .kt-cta-btn {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 15.5px;
}
@media (max-width: 640px) {
  main#main-content .kt-cta-card {
    margin: 1em 0 1.4em;
    padding: 16px 16px 18px;
    border-radius: 12px;
  }
  main#main-content .kt-cta-card .kt-cta-eyebrow { font-size: 11px; }
  main#main-content .kt-cta-card .kt-cta-teaser {
    font-size: 14.5px;
    line-height: 1.65;
  }
  main#main-content .kt-cta-card .kt-cta-btn { font-size: 14.5px; padding: 12px 20px; }
}
@media (max-width: 380px) {
  main#main-content .kt-cta-card .kt-cta-teaser { font-size: 13.5px; }
}
main#main-content .kt-cta-label {
  text-align: center;
}
main#main-content .kt-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(39, 205, 201, 0.36);
}
main#main-content .kt-cta-arrow {
  font-size: 18px;
  line-height: 1;
}

/* ============ Map link card (naver.me / maps.app.goo.gl — non-embeddable) ============ */
main#main-content .bf-map-link {
  margin: 1.2em 0;
  text-align: left;
}
main#main-content .bf-map-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f4f6f8;
  border: 1px solid #d8dde2;
  border-radius: 8px;
  color: #1f2937 !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
main#main-content .bf-map-link a:hover {
  background: #e9eef3;
  border-color: #b6bfc8;
}
main#main-content .bf-map-link-arrow {
  margin-left: auto;
  color: #27CDC9;
  font-weight: 700;
}

/* ============ Body padding so fixed header doesn't overlap ============ */
body { padding-top: 88px; }   /* matches header height — keep these in sync */
/* Breathing room between fixed header and main content + bottom space before footer */
main#main-content {
  padding-top: 40px;
  padding-bottom: 120px;
  min-height: 70vh;
}
@media (max-width: 1100px) {
  main#main-content {
    padding-top: 20px;
    padding-bottom: 80px;
    min-height: 60vh;
  }
}

/* ============ Magazine content polish ============ */
/* H2 inside article body (Blowfish adds class "relative group" to body H2s) */
main#main-content article h2.relative.group {
  position: relative;
  padding-left: 16px;
  margin-top: 2.5em !important;
  margin-bottom: 0.8em !important;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.4em;
}
html.dark main#main-content article h2.relative.group {
  border-bottom-color: #374151;
}
main#main-content article h2.relative.group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.45em;
  width: 4px;
  background: #27CDC9;
  border-radius: 2px;
}
main#main-content article h3 {
  color: #1f2937;
}
html.dark main#main-content article h3 {
  color: #f3f4f6;
}

/* Hero image breathing margin */
main#main-content article header img,
main#main-content article > img:first-child {
  margin-bottom: 1.5em;
  border-radius: 8px;
}

/* Home hero */
body[data-page="home"] main#main-content > article > header {
  text-align: center;
  padding: 2rem 0 1rem;
}
body[data-page="home"] main#main-content > article > header h1 {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
body[data-page="home"] main#main-content > article > .prose,
body[data-page="home"] main#main-content > article > div.prose {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: #555;
}

/* ============ FOOTER ============ */
.ts-shell footer {
  background: var(--ts-chrome-soft-bg);
  border-top: 1px solid var(--ts-chrome-border);
  padding: 40px 0 20px;
  font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
  font-size: 14px;
  color: var(--ts-chrome-muted);
}
.ts-shell footer .container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ts-shell footer .row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}
.ts-shell footer .col-md-5 { text-align: center; }
/* Footer logos — fixed box (same in light + dark), centered. We avoid
   `display: block !important` on the bare `img` selector because that
   would force BOTH variants visible at once; instead toggle display
   per variant so the light/dark swap still works. */
.ts-shell footer .col-md-5 img {
  margin: 6px auto !important;
  width: 180px !important;
  height: 70px !important;
  object-fit: contain;
}
.ts-shell footer .col-md-5 img.logo-light { display: block !important; }
.ts-shell footer .col-md-5 img.logo-dark  { display: none !important; }
html.dark .ts-shell footer .col-md-5 img.logo-light { display: none !important; }
html.dark .ts-shell footer .col-md-5 img.logo-dark  { display: block !important; }
/* KT Japan logo is intentionally smaller than tt-shop. */
.ts-shell footer .col-md-5 a[href*="ktjapan"] img {
  width: 140px !important;
  height: 50px !important;
}
.ts-shell footer .col-md-7 .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ts-shell footer .col-md-4 { padding: 0; }
.ts-shell footer h3 {
  font-size: 14px !important;
  font-weight: 700;
  color: var(--ts-chrome-text);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ts-chrome-input-border);
}
.ts-shell footer ul { list-style: none; padding: 0; margin: 0; }
.ts-shell footer ul li { margin: 6px 0; }
.ts-shell footer a { color: var(--ts-chrome-muted-2) !important; text-decoration: none; }
.ts-shell footer a:hover { color: #27CDC9 !important; }
/* Copyright bar stays dark in both modes (it's the brand's signature footer) */
.ts-shell .ts-copyright {
  background: #121212;
  color: #fff;
  text-align: center;
  padding: 16px 0;
  font-size: 13px;
}
.ts-shell .ts-social {
  background: var(--ts-chrome-bg);
  text-align: center;
  padding: 14px 0;
}
.ts-shell .ts-social a { color: #F00075; font-size: 22px; }

/* ============ MOBILE / TABLET ============ */
@media (max-width: 1100px) {
  .ts-shell #header_wrap { height: 64px; }
  body { padding-top: 64px; }
  .ts-shell #gnb,
  .ts-shell .top_right_menu,
  .ts-shell .menu_wrap { display: none !important; }
  .ts-shell .navbar-toggle {
    display: inline-flex !important;
    margin-left: auto;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .ts-shell .navbar-toggle .hiraku-open-btn-line,
  .ts-shell .navbar-toggle .hiraku-open-btn-line::before,
  .ts-shell .navbar-toggle .hiraku-open-btn-line::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ts-chrome-text-2);
    position: relative;
  }
  .ts-shell .navbar-toggle .hiraku-open-btn-line::before { position: absolute; top: -8px; }
  .ts-shell .navbar-toggle .hiraku-open-btn-line::after { position: absolute; top: 8px; }
  .ts-shell .div_top_cart { display: flex !important; gap: 14px; margin-left: auto; align-items: center; }
  .ts-shell .div_top_cart a { color: var(--ts-chrome-muted) !important; font-size: 18px; margin-right: 0 !important; position: relative; }
  .ts-shell .div_top_cart .fa,
  .ts-shell .div_top_cart a .fa[style] { font-size: 20px !important; color: var(--ts-chrome-muted) !important; }
  .ts-shell .cart-count_mobile {
    display: inline-flex;
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #27CDC9;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .ts-shell .div_32 img { height: 36px; }
  /* Match body Tailwind responsive padding (px-6 sm:px-14 md:px-24 lg:px-32)
     so the header content edge aligns with the main content edge at each
     breakpoint. Previously hard-coded 14px caused header to look ~10px wider
     than body on mobile (24px) and much wider on tablet (56-128px). */
  .ts-shell #header_wrap .container { padding: 0 24px; gap: 8px; }
  .ts-shell .navbar-toggle { margin-left: 6px !important; width: 36px; height: 36px; }
  .ts-shell footer { padding: 24px 0 0; }
  .ts-shell footer .row,
  .ts-shell footer .col-md-7 .row { grid-template-columns: 1fr !important; gap: 20px; }
  .ts-shell footer .col-md-5 { padding: 0 16px; }
  .ts-shell footer .col-md-7 .col-md-4 { padding: 0 16px; }
}

/* Header padding tracks body Tailwind responsive padding
   (px-6 sm:px-14 md:px-24 lg:px-32) within mobile/tablet mode (<1100px).
   Base padding 24px set in the rule above (inside max-width:1100px block);
   these progressively enhance for larger viewports up to the desktop
   breakpoint where the mega-menu takes over (≥1100px, default 24px). */
@media (min-width: 640px) and (max-width: 1099px) {
  .ts-shell #header_wrap .container { padding: 0 56px; }  /* sm: px-14 */
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ts-shell #header_wrap .container { padding: 0 96px; }  /* md: px-24 */
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .ts-shell #header_wrap .container { padding: 0 128px; }  /* lg: px-32 */
}

/* ============ Offcanvas mobile sidebar ============ */
.ts-shell .sidebar-offcanvas {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  max-width: 90vw;
  height: 100vh;
  background: var(--ts-chrome-bg);
  color: var(--ts-chrome-text);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  padding: 20px 20px 40px;
  overflow-y: auto;
  z-index: 1100;
  transition: right 0.3s ease;
  font-family: 'Hiragino Sans', sans-serif;
}
.ts-shell .sidebar-offcanvas .btn-blue_new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1f4ba8;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  margin: 4px 4px;
  font-size: 13px;
  cursor: pointer;
}
.ts-shell .sidebar-offcanvas .btn-blue_new:hover { background: #173b85; }
.ts-shell .sidebar-offcanvas.is-open { right: 0; }
.ts-shell .sidebar-offcanvas .close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 22px;
  cursor: pointer;
  color: var(--ts-chrome-muted);
}
.ts-shell .sidebar-menu { list-style: none; margin: 0; padding: 0; }
.ts-shell .sidebar-menu > li { border-bottom: 1px solid var(--ts-chrome-border); }
.ts-shell .sidebar-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  color: var(--ts-chrome-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.ts-shell .sidebar-submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 8px 16px;
}
.ts-shell .sidebar-menu > li.is-open .sidebar-submenu { display: block; }
.ts-shell .sidebar-submenu a {
  display: block;
  padding: 8px 8px;
  color: var(--ts-chrome-muted);
  text-decoration: none;
  font-size: 14px;
}
.ts-shell .sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1099;
  display: none;
}
.ts-shell .sidebar-backdrop.is-open { display: block; }

/* Tour booking CTA — used by articles that link out to an external
   booking landing (e.g. /tour_incheon_special/medicoper). Mint button
   matches the KT brand accent. */
.ttshop-body .tour-booking-cta {
  text-align: center;
  margin: 1.5em 0;
}
.ttshop-body .tour-booking-cta a {
  display: inline-block;
  padding: 12px 28px;
  background: #1ec8a5;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.ttshop-body .tour-booking-cta a:hover {
  background: #19b394;
}
html.dark .ttshop-body .tour-booking-cta a {
  background: #1ec8a5;
  color: #fff;
}

/* Home page (K Magazine landing) — mobile card breathing room.
   The body already has px-6 (24px) padding, but the latest-posts grid
   on home goes very close to the screen edge on narrow mobiles because
   the card image is bold + fills the full card. Add a touch of extra
   horizontal margin around the home grid on mobile only so the cards
   look visually contained (matching the category index look). */
@media (max-width: 639px) {
  body[data-page="home"] main#main-content > section > section.grid,
  body[data-page="home"] main#main-content > section > h2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* Home page — mobile shows first 7 cards (desktop still shows 12).
   showRecentItems=12 in params.toml gives 4 rows × 3 cols on desktop;
   on mobile (single column under 640px) hide cards 8-12 so it stays
   scannable. */
@media (max-width: 639px) {
  body[data-page="home"] main#main-content > section > section.grid > *:nth-child(n+8) {
    display: none;
  }
}