/* ==========================================================================
   台湾安全トラベルノート / Taiwan Travel Safety Note
   Design System v2 — "Luxury Travel Editorial"
   Concept: 和紙のような温かい紙色 × 台湾ジェイドグリーン × ランタンの灯り
   Pure CSS / No framework / Mobile first
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Paper / Surface（和紙・トラベルノートの質感） --- */
  --paper-100: #FEFDFB;   /* 最も明るい紙（カード面） */
  --paper-200: #FBF9F5;   /* ベース背景 */
  --paper-300: #F6F4EE;   /* セクション背景 */
  --paper-400: #EFEBE1;   /* 罫線・境界 */
  --paper-500: #E3DED1;   /* 強めの境界 */

  /* --- Primary: Taiwan Jade（阿里山の深い緑） --- */
  --jade-900: #0E2A21;
  --jade-800: #133B2F;
  --jade-700: #1B4D3E;    /* Primary */
  --jade-600: #2A6350;
  --jade-400: #6F9587;
  --jade-100: #E4EBE6;
  --jade-050: #F1F5F2;

  /* --- Secondary: Lantern（夜市・ランタンの灯り） --- */
  --amber-700: #76502E;
  --amber-500: #D4A373;   /* Accent */
  --amber-200: #EFDCC6;
  --amber-050: #FAF3EA;
  --lantern-600: #C2634A;
  --lantern-500: #E07A5F;
  --lantern-050: #FCF0EC;

  /* --- Ink / Text --- */
  --ink-900: #1A211E;     /* 見出し */
  --ink-700: #33403B;     /* 本文 */
  --ink-500: #5C6B65;     /* 補足 */
  --ink-400: #64726C;     /* メタ・キャプション（WCAG AA対応） */
  --ink-on-dark: #F4F1EA;
  --ink-on-dark-muted: #A9BDB2;

  /* --- Status（警告標識ではなく「上質なホテルタグ」として） --- */
  --st-prohibited: #9E2B25;  --st-prohibited-bg: #F7EBEA;  --st-prohibited-bd: #E2C6C3;
  --st-warning:    #A86A22;  --st-warning-bg:    #FAF1E4;  --st-warning-bd:    #E8D5B6;
  --st-declare:    #2C5578;  --st-declare-bg:    #EAF0F5;  --st-declare-bd:    #C6D5E2;
  --st-ok:         #2C6E4A;  --st-ok-bg:         #E8F1EA;  --st-ok-bd:         #C4DBCB;
  --st-unknown:    #5F6B66;  --st-unknown-bg:    #F0F1EF;  --st-unknown-bd:    #D8DCD8;

  /* --- Rule Type Badges --- */
  --bd-law:     #26405C;  --bd-law-bg:     #EBEFF4;
  --bd-manner:  #1B6B58;  --bd-manner-bgc: #E6F0EB;
  --bd-transit: #2F5F86;  --bd-transit-bg: #EAF1F7;
  --bd-shop:    #6E4A78;  --bd-shop-bg:    #F2EBF4;

  /* --- Freshness --- */
  --fresh-green:  #3C8A5C;
  --fresh-yellow: #C79A2E;
  --fresh-orange: #C1762F;
  --fresh-red:    #A8382F;

  /* --- Typography（和モダン・エディトリアル） --- */
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Noto Serif TC", "Hiragino Mincho ProN",
                "Yu Mincho", "YuMincho", "Songti TC", serif;
  --font-sans:  "Zen Kaku Gothic New", "Noto Sans JP", "Noto Sans TC", -apple-system,
                BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic Medium", "Segoe UI", Roboto, sans-serif;
  --font-latin: "Cormorant Garamond", "Times New Roman", serif;   /* 欧文アクセント（大文字組み） */

  --fs-hero:   clamp(1.9rem, 4vw, 3rem);
  --fs-h2:     clamp(1.55rem, 3.2vw, 2.5rem);
  --fs-h3:     clamp(1.12rem, 1.8vw, 1.42rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight: 1.32;
  --lh-body:  1.95;   /* 贅沢な行間 */
  --ls-wide:  0.14em; /* 欧文・ラベルのトラッキング */
  --ls-jp:    0.045em;

  /* --- Spacing（ネガティブスペース重視） --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --space-4xl: 10rem;

  /* 後方互換（旧トークン名を参照している箇所のため） */
  --bg-main: var(--paper-200);
  --bg-card: var(--paper-100);
  --color-primary: var(--jade-700);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --badge-law: var(--bd-law);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-hero: 12px;
  --radius-pill: 999px;
  --bg-subtle-green: var(--jade-050);
  --bg-subtle-warm: var(--amber-050);
  --bg-subtle-blue: var(--paper-300);
  --bg-dark-footer: var(--jade-900);
  --color-primary-hover: var(--jade-800);
  --color-secondary: var(--lantern-500);
  --color-accent: var(--amber-500);
  --text-muted: var(--ink-400);
  --text-light: #fff;
  --shadow-card: 0 1px 2px rgba(26,33,30,.04), 0 8px 24px -16px rgba(26,33,30,.16);

  /* --- Radius（ラグジュアリーは「ほぼ直角」）--- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* --- Elevation（濃い影は使わない。空気のような影） --- */
  --shadow-xs: 0 1px 2px rgba(26,33,30,.04);
  --shadow-sm: 0 1px 2px rgba(26,33,30,.04), 0 6px 18px -14px rgba(26,33,30,.18);
  --shadow-md: 0 2px 4px rgba(26,33,30,.04), 0 18px 40px -28px rgba(26,33,30,.28);
  --shadow-lg: 0 4px 8px rgba(26,33,30,.05), 0 40px 80px -48px rgba(26,33,30,.38);

  /* --- Motion（静かで上品に） --- */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .24s;
  --dur-mid:  .5s;
  --dur-slow: .9s;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background-color: var(--paper-200);
  /* 和紙の繊維感：極薄のノイズグラデーション */
  background-image:
    radial-gradient(1200px 600px at 12% -6%, rgba(212,163,115,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(27,77,62,.06), transparent 62%);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-jp);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body[lang="zh-TW"] { font-feature-settings: normal; }
body[lang="en"] { letter-spacing: 0; }

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink-900);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--jade-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--amber-700); }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--jade-100); color: var(--jade-900); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow { max-width: var(--container-narrow); }
.logo-title { white-space: nowrap; }

/* 欧文アクセントラベル（雑誌風の小さな大文字） */
.eyebrow,
.hero-pill,
.search-chip-label,
.section-index {
  font-family: var(--font-latin);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-micro);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Scroll Reveal（静かに浮き上がる）
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.965); }

[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }

/* 細い罫線が横に伸びる演出 */
.rule-line {
  height: 1px;
  background: var(--paper-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-soft);
}
.rule-line.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rule-line { transform: scaleX(1) !important; }
}

/* --------------------------------------------------------------------------
   4. Disclaimer Bar（極細のインフォメーションバー）
   -------------------------------------------------------------------------- */
.disclaimer-banner {
  background: var(--jade-800);
  color: var(--ink-on-dark-muted);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  line-height: 1.7;
  padding: .55rem 0;
}
.disclaimer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.disclaimer-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.disclaimer-left span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.disclaimer-link {
  color: var(--amber-500);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.disclaimer-link:hover { color: var(--amber-200); border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .disclaimer-content { align-items: flex-start; gap: var(--space-sm); }
  /* 細い情報バーの意図を保つため、スマホでは2行までに抑える（続きは「詳しく見る」へ） */
  .disclaimer-left span:last-child {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .disclaimer-link { align-self: flex-start; padding-top: .1rem; }
}

/* --------------------------------------------------------------------------
   5. Header（半透明・スクロールで質感が変わる）
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 245, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(251, 249, 245, .92);
  border-bottom-color: var(--paper-400);
  box-shadow: 0 1px 24px -18px rgba(26,33,30,.5);
}

.header-container {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: .06em;
  flex-shrink: 0;
}
.site-logo:hover { color: var(--jade-700); }
.site-logo-icon { font-size: 1.15rem; }
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  position: relative;
  display: inline-block;
  padding: .5rem .6rem;
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--ink-500);
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem; bottom: .28rem;
  height: 1px;
  background: var(--jade-700);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--jade-700); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--jade-800); font-weight: 600; }
.nav-link.active::after { transform: scaleX(1); background: var(--amber-500); }

/* 言語スイッチャー（グラスモフィズム） */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.55);
  border: 1px solid var(--paper-400);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.lang-btn {
  font-family: var(--font-latin);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .3rem .68rem;
  border-radius: var(--r-pill);
  color: var(--ink-400);
  transition: all var(--dur-fast) var(--ease-out);
}
.lang-btn:hover { color: var(--jade-700); background: rgba(255,255,255,.9); }
.lang-btn.active {
  background: var(--jade-700);
  color: var(--paper-100);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .header-container { gap: var(--space-sm); }
  .site-nav { flex: 1; justify-content: flex-end; gap: .5rem; }
  .nav-links { gap: 0; overflow: visible; }
  .nav-link { padding-inline: .42rem; font-size: .74rem; }
  .nav-links li:last-child { display: none; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .site-nav { gap: var(--space-sm); }
}

@media (max-width: 560px) {
  .header-container { gap: .45rem; }
  .site-logo { font-size: .88rem; letter-spacing: .025em; }
  .site-nav { gap: 0; }
  .lang-btn { padding: .26rem .46rem; font-size: .64rem; }
}

/* --------------------------------------------------------------------------
   6. Hero（エディトリアル・フルブリード）
   -------------------------------------------------------------------------- */
.hero-wrapper {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, calc(100svh - 118px), 740px);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(4.5rem, 12vh, 7.5rem);
  overflow: hidden;
  color: var(--ink-on-dark);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--jade-900);
  background-image: url("../images/hero-bg.jpg?v=5");
  background-size: cover;
  background-position: center 62%;
  transform: scale(1.06);
  animation: heroDrift 22s var(--ease-soft) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

/* 深いジェイドのフィルム。写真の情緒を残しつつ文字を守る */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11,34,27,.97) 0%, rgba(12,37,29,.90) 30%, rgba(14,42,33,.78) 58%, rgba(14,42,33,.82) 100%),
    linear-gradient(to right, rgba(11,34,27,.78), rgba(19,59,47,.12) 72%);
}

/* 紙面へ溶けるボトムフェード */
.hero-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(251,249,245,0), var(--paper-200));
  pointer-events: none;
}

.hero-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  align-items: end;
  gap: var(--space-2xl);
}

.hero-content { max-width: min(100%, 760px); }

.hero-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--space-lg);
}
.hero-pill {
  color: var(--amber-200);
  padding: .3rem .8rem;
  border: 1px solid rgba(239,220,198,.42);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: .045em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
  margin-bottom: var(--space-lg);
}
.hero-title em {
  font-style: normal;
  color: var(--amber-500);
}

.hero-subtitle {
  font-size: clamp(.9rem, 1.35vw, 1.02rem);
  line-height: 2.15;
  color: rgba(244,241,234,.88);
  max-width: 54ch;
  margin-bottom: var(--space-xl);
}

/* 縦書きの欧文/和文アクセント（雑誌のノンブル風） */
.hero-vertical {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: .78rem;
  letter-spacing: .42em;
  color: rgba(239,220,198,.72);
  justify-self: end;
  align-self: end;
  padding-bottom: .5rem;
  border-right: 1px solid rgba(239,220,198,.3);
  padding-right: 1.1rem;
  max-height: 320px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
}

/* スクロールを促す細い縦線 */
.hero-scroll-hint {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-latin);
  font-size: .6rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(244,241,234,.55);
}
.hero-scroll-hint::after {
  content: "";
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(239,220,198,.7), rgba(239,220,198,0));
  animation: scrollPulse 2.6s var(--ease-soft) infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(.25); transform-origin: top; opacity: .3; }
  45%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1);   transform-origin: bottom; opacity: 0; }
}

@media (max-width: 900px) {
  .hero-box { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero-vertical { display: none; }
  .hero-scroll-hint { display: none; }
  .hero-wrapper { min-height: clamp(460px, calc(100svh - 150px), 640px); }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.search-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .09em;
  padding: .95rem 1.9rem;
  border-radius: var(--r-pill);
  transition: all var(--dur-fast) var(--ease-out);
  overflow: hidden;
  white-space: nowrap;
}

.btn-primary {
  background: var(--amber-500);
  color: var(--jade-900);
  box-shadow: 0 12px 30px -18px rgba(212,163,115,.9);
}
.btn-primary:hover {
  background: var(--amber-200);
  color: var(--jade-900);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -18px rgba(212,163,115,1);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  color: rgba(244,241,234,.92);
  border: 1px solid rgba(244,241,234,.45);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(244,241,234,.8);
  color: #fff;
  transform: translateY(-2px);
}

/* 紙面上（明るい背景）に置く場合 */
.on-paper .btn-secondary,
.btn-secondary.on-paper {
  color: var(--jade-700);
  border-color: var(--paper-500);
  background: rgba(255,255,255,.6);
}
.on-paper .btn-secondary:hover,
.btn-secondary.on-paper:hover {
  background: #fff;
  border-color: var(--jade-400);
  color: var(--jade-800);
}

/* --------------------------------------------------------------------------
   8. Search（リゾートの予約UIのような心地よさ）
   -------------------------------------------------------------------------- */
.search-wrapper {
  position: relative;
  margin-top: calc(var(--space-2xl) * -1);
  z-index: 2;
  padding-bottom: var(--space-xl);
}

.search-card {
  background: rgba(254, 253, 251, .82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 3rem);
}

.search-title-bar { margin-bottom: var(--space-lg); }

.search-card-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: .05em;
}

.search-input-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--paper-500);
  padding-bottom: .75rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.search-input-box:focus-within { border-bottom-color: var(--jade-700); }

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--ink-900);
  padding: .35rem 0;
}
.search-input::placeholder { color: var(--ink-400); font-family: var(--font-sans); font-size: .92rem; }
.search-input:focus { outline: none; }
.search-input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.search-action-btn {
  background: var(--jade-700);
  color: var(--paper-100);
  padding: .8rem 1.7rem;
  flex-shrink: 0;
}
.search-action-btn:hover {
  background: var(--jade-800);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgba(27,77,62,.9);
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-lg);
}
.search-chip-label {
  color: var(--ink-400);
  margin-right: .4rem;
}

.search-chip {
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--ink-500);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--paper-400);
  border-radius: var(--r-pill);
  padding: .42rem .95rem;
  transition: all var(--dur-fast) var(--ease-out);
}
.search-chip:hover {
  color: var(--jade-800);
  border-color: var(--jade-400);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.search-chip:active { transform: translateY(0); }

@media (max-width: 640px) {
  .search-input-box { flex-wrap: wrap; }
  .search-action-btn { width: 100%; }
  .search-wrapper { margin-top: calc(var(--space-xl) * -1); }
}

/* --------------------------------------------------------------------------
   9. Section Headings（雑誌の中扉）
   -------------------------------------------------------------------------- */
.site-main { display: block; padding-bottom: var(--space-3xl); }

.section-heading-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--paper-400);
  margin-top: var(--space-2xl);
}

.section-index {
  display: block;
  color: var(--amber-700);
  margin-bottom: .75rem;
}

.section-main-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .06em;
  margin-bottom: .8rem;
}

.section-sub-title {
  font-size: var(--fs-small);
  line-height: 2;
  color: var(--ink-500);
  max-width: 56ch;
}

@media (max-width: 720px) {
  .section-heading-wrap { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   10. Cards（マガジンスタイル・アシンメトリー）
   -------------------------------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  align-items: start;
}

/* 非対称：3n+1 のカードを僅かに下げて誌面にリズムを作る */
@media (min-width: 1100px) {
  .cards-grid > .note-card:nth-child(3n + 2) { transform: translateY(28px); }
  .cards-grid > .note-card:nth-child(3n + 2):hover { transform: translateY(24px); }
}

.note-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-100);
  border: 1px solid var(--paper-400);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-mid) var(--ease-soft),
    box-shadow var(--dur-mid) var(--ease-soft),
    border-color var(--dur-mid) var(--ease-soft);
}

/* 上端に灯る一本の細いランタンライン */
.note-card::before {
  content: "";
  position: absolute;
  top: -1px; left: clamp(1.4rem, 2.4vw, 2rem); right: clamp(1.4rem, 2.4vw, 2rem);
  height: 2px;
  background: linear-gradient(to right, var(--amber-500), var(--lantern-500));
  border-radius: var(--r-pill);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-soft);
}
.note-card:hover {
  transform: translateY(-4px);
  border-color: var(--paper-500);
  box-shadow: var(--shadow-md);
}
.note-card:hover::before { opacity: 1; transform: scaleX(1); }

.card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.card-badges { display: flex; flex-wrap: wrap; gap: .38rem; }

.card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .035em;
  color: var(--ink-900);
  margin-bottom: var(--space-md);
}

/* 結論 — 誌面の「リード文」。左に一本の罫。 */
.card-conclusion {
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--jade-800);
  background: linear-gradient(to right, var(--jade-050), rgba(241,245,242,0));
  border-left: 2px solid var(--jade-700);
  padding: .9rem 1.1rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--space-md);
}

.card-desc {
  font-size: .92rem;
  line-height: 2.05;
  color: var(--ink-500);
  margin-bottom: var(--space-md);
}

/* --- アコーディオン --- */
.card-accordion { margin-top: auto; }

.card-accordion details {
  border-top: 1px solid var(--paper-400);
  padding-top: var(--space-sm);
}

.card-details-summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  list-style: none;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--jade-700);
  padding: .45rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.card-details-summary::-webkit-details-marker { display: none; }
.card-details-summary::after {
  content: "＋";
  margin-left: auto;
  font-size: .85rem;
  color: var(--ink-400);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
details[open] .card-details-summary::after { content: "−"; color: var(--amber-700); }
.card-details-summary:hover { color: var(--amber-700); }

.card-details-content {
  font-size: .875rem;
  line-height: 2.05;
  color: var(--ink-700);
  background: var(--paper-300);
  border-radius: var(--r-sm);
  padding: var(--space-md);
  margin-top: var(--space-xs);
  animation: detailsIn var(--dur-mid) var(--ease-soft);
}
@keyframes detailsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.card-details-content strong { color: var(--jade-800); font-weight: 700; }
.card-details-item { margin-top: .5rem; }
.card-details-example { color: var(--text-secondary); font-size: .85rem; }

/* アコーディオン内の短い段落は均等割りにして、末尾1〜2文字の孤立行を防ぐ */
.card-details-content p { text-wrap: balance; }

/* 法令名（常に中国語表記）— 2行になっても末尾が孤立しないよう均等割り */
.card-law-title {
  margin-top: .55rem;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.85;
  color: var(--bd-law);
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: anywhere;
}

.card-footer-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--paper-500);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  color: var(--ink-400);
}

.card-official-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  color: var(--jade-700);
  border-bottom: 1px solid var(--paper-500);
  padding-bottom: 1px;
}
.card-official-link::after {
  content: "↗";
  transition: transform var(--dur-fast) var(--ease-out);
}
.card-official-link:hover { color: var(--amber-700); border-bottom-color: var(--amber-500); }
.card-official-link:hover::after { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   11. Badges（ラグジュアリーホテルのタグとして）
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  padding: .42rem .78rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.badge-prohibited  { color: var(--st-prohibited); background: var(--st-prohibited-bg); border-color: var(--st-prohibited-bd); }
.badge-warning     { color: var(--st-warning);    background: var(--st-warning-bg);    border-color: var(--st-warning-bd); }
.badge-declaration { color: var(--st-declare);    background: var(--st-declare-bg);    border-color: var(--st-declare-bd); }
.badge-permitted   { color: var(--st-ok);         background: var(--st-ok-bg);         border-color: var(--st-ok-bd); }
.badge-unknown     { color: var(--st-unknown);    background: var(--st-unknown-bg);    border-color: var(--st-unknown-bd); }

/* ルール種別は「型押しのタグ」として、ごく控えめに */
.badge-law,
.badge-manner,
.badge-transit,
.badge-shop {
  font-weight: 600;
  background: transparent;
  border-style: solid;
  border-width: 1px;
}
.badge-law     { color: var(--bd-law);     border-color: #C9D3DE; background: var(--bd-law-bg); }
.badge-manner  { color: var(--bd-manner);  border-color: #C2DBD0; background: var(--bd-manner-bgc); }
.badge-transit { color: var(--bd-transit); border-color: #C6D8E6; background: var(--bd-transit-bg); }
.badge-shop    { color: var(--bd-shop);    border-color: #DCCCE2; background: var(--bd-shop-bg); }

/* --- 鮮度インジケータ --- */
.freshness-tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--font-latin);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-400);
  white-space: nowrap;
}
.fresh-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fresh-green);
  box-shadow: 0 0 0 3px rgba(60,138,92,.14);
}
.fresh-dot.yellow { background: var(--fresh-yellow); box-shadow: 0 0 0 3px rgba(199,154,46,.16); }
.fresh-dot.orange { background: var(--fresh-orange); box-shadow: 0 0 0 3px rgba(193,118,47,.16); }
.fresh-dot.red    { background: var(--fresh-red);    box-shadow: 0 0 0 3px rgba(168,56,47,.16); }

/* --------------------------------------------------------------------------
   12. Editorial Statement（余白を贅沢に使う一枚）
   -------------------------------------------------------------------------- */
.statement {
  padding-block: var(--space-3xl);
  text-align: center;
}
.statement-inner {
  max-width: 46ch;
  margin-inline: auto;
}
.statement-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: .08em;
  color: var(--jade-800);
}
.statement-quote em { font-style: normal; color: var(--amber-700); }
.statement-mark {
  display: block;
  font-family: var(--font-latin);
  font-size: 2.4rem;
  color: var(--amber-200);
  line-height: 1;
  margin-bottom: var(--space-md);
}
.statement-caption {
  margin-top: var(--space-lg);
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--jade-900);
  color: var(--ink-on-dark-muted);
  padding-block: var(--space-3xl) var(--space-xl);
  font-size: var(--fs-small);
  line-height: 2;
}

.footer-top-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink-on-dark);
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(244,241,234,.12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
}

.footer-brand h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-on-dark);
  margin-bottom: var(--space-md);
}
.footer-brand p { font-size: .82rem; line-height: 2.1; }

.footer-column h4 {
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--amber-500);
  margin-bottom: var(--space-md);
}

.footer-links li { font-size: .82rem; margin-bottom: .55rem; }
.footer-links a { color: var(--ink-on-dark-muted); }
.footer-links a:hover { color: var(--amber-200); }
.footer-tagline { margin-top: var(--space-md); color: var(--ink-on-dark-muted); font-size: .82rem; }

.footer-bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(244,241,234,.12);
  font-size: var(--fs-micro);
  color: rgba(169,189,178,.75);
  letter-spacing: .05em;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* --------------------------------------------------------------------------
   14. Mobile Bottom Nav（〜1024px）
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: rgba(251,249,245,.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--paper-400);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  padding: .6rem .25rem .55rem;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--ink-400);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.mobile-nav-icon { font-size: 1.08rem; line-height: 1.4; }
.mobile-nav-item.active { color: var(--jade-800); font-weight: 700; }
.mobile-nav-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 22px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--amber-500);
}

@media (max-width: 1024px) {
  .mobile-bottom-nav { display: block; }
  .site-main { padding-bottom: calc(var(--space-2xl) + 68px); }
  .site-footer { padding-bottom: calc(var(--space-xl) + 68px); }
}

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */
.section-pad    { padding-block: var(--space-2xl); }
.section-pad-lg { padding-block: var(--space-3xl); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.text-muted { color: var(--ink-400); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   16. Article Pages（about / terms / privacy）
   -------------------------------------------------------------------------- */
.article-detail {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-block: var(--space-3xl) var(--space-2xl);
}

.article-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1.5;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--paper-400);
}

.article-section { margin-bottom: var(--space-2xl); }

.article-section-title {
  position: relative;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--jade-800);
  padding-left: 1rem;
  margin-bottom: var(--space-md);
}
.article-section-title::before {
  content: "";
  position: absolute;
  left: 0; top: .35em; bottom: .35em;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--amber-500);
}

.article-section p { margin-bottom: var(--space-md); line-height: 2.1; }
.article-section ul { margin: 0 0 var(--space-md); }
.article-section ul li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .5rem;
  line-height: 2;
}
.article-section ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .95em;
  width: 5px; height: 1px;
  background: var(--amber-700);
}
.article-section a { border-bottom: 1px solid var(--paper-500); }
.article-section a:hover { border-bottom-color: var(--amber-500); }
.article-section strong { color: var(--jade-800); font-weight: 700; }
.article-caution {
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  border: 1px solid var(--paper-500);
  background: var(--amber-050);
  color: var(--ink-700);
  line-height: 2;
}

/* --------------------------------------------------------------------------
   17. 日本語・繁体字の改行制御（禁則・句読点の孤立防止）
   `word-break: auto-phrase` で文節単位に折り返し、
   `text-wrap: balance / pretty` で行末の一文字孤立（「す。」等）を防ぎます。
   未対応ブラウザでも従来どおりの折り返しになるだけで崩れません。
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.hero-title,
.statement-quote,
.section-main-title,
.search-card-title,
.card-title,
.card-conclusion,
.article-title,
.article-section-title,
.footer-top-heading {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p,
li,
.hero-subtitle,
.section-sub-title,
.card-desc,
.card-details-content,
.disclaimer-banner,
.footer-brand p {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* 英語表示では文節折り返しを無効化（単語区切りが正） */
body[lang="en"] h1, body[lang="en"] h2, body[lang="en"] h3, body[lang="en"] h4,
body[lang="en"] p,  body[lang="en"] li {
  word-break: normal;
}

/* URL やソース名など長い連続文字がはみ出さないように */
.card-footer-source,
.footer-links a { overflow-wrap: anywhere; }

/* Resilient navigation, long translations and source citations */
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; background: var(--paper-100); padding: 1rem; }
.skip-link:focus { top: 1rem; }
.policy-container { max-width: 860px; padding-top: var(--space-2xl); }
.policy-updated {
  margin: calc(var(--space-2xl) * -1) 0 var(--space-lg);
  color: var(--ink-400);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
}
.policy-intro {
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  border-left: 2px solid var(--jade-700);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--jade-050);
  color: var(--ink-600);
  line-height: 2.1;
}
.policy-links { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.policy-links li { margin: 0; padding-left: 0 !important; }
.policy-links li::before { display: none; }
.policy-links a { color: var(--jade-700); font-weight: 600; overflow-wrap: anywhere; }
.contact-form-button { margin-top: var(--space-md); }
.contact-pending { margin-top: var(--space-lg); padding: var(--space-md); border: 1px solid var(--paper-500); background: var(--paper-300); color: var(--ink-500); }
.article-detail > p { margin-block: 1rem; }
.load-message { padding: 2rem 1rem; }
.load-message p { margin-bottom: 1rem; }
.source-links { display: flex; flex-direction: column; gap: .5rem; }
.card-footer-source { flex-wrap: wrap; gap: .75rem; }
.card-title, .card-footer-source, .site-logo, .nav-links { overflow-wrap: anywhere; }
.freshness-tag { white-space: normal; font-size: .72rem; }
.badge-guidance { color: var(--jade-700); background: var(--jade-050); }
.preflight { padding-block: 2rem; }
.preflight h2 { font-family: var(--font-serif); font-size: 1.6rem; }
.preflight-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; padding: 1rem 0; }
.preflight-search { width: 100%; height: 100%; text-align: left; padding: 1rem; color: var(--jade-700); background: var(--paper-100); border: 1px solid var(--paper-500); border-radius: .5rem; cursor: pointer; font: inherit; }
#result-count { margin-bottom: 1rem; color: var(--ink-500); }
.search-empty { grid-column: 1 / -1; padding: 4rem 1rem; border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-card); text-align: center; }
.search-empty p { color: var(--text-secondary); font-size: 1.15rem; }
.site-logo [id="logo-title"] { white-space: normal !important; }
@media (max-width: 700px) { .preflight-links { grid-template-columns: 1fr 1fr; } .policy-container .article-detail { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }