*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #fbf6ee;
  --surface:  #ffffff;
  --surface2: #f3ece0;
  --ink:      #1a1410;
  --ink2:     #5a4a3a;
  --ink3:     #7d6a55;   /* 補足文。#9a8770 は背景に対し3.21で読みにくかった（AAは4.5） */
  --border:   #ebe2d2;
  --peach:      #e8744f;
  --peach-deep: #c94f28;  /* 白文字を乗せる面用。#e8744f は白との比が2.98しかない */
  --accent-text: var(--peach-deep);
  --peach-lt: #fde6dc;
  --rose:     #c93f5e;
  --cool:     #3a5e8a;
  --cool-lt:  #dde6f0;
  --snow:        #eef4fa;
  --snow-shadow: #c4d3e4;
  --alpine:      #3f6d99;
  --dusk:        #26243a;
  --ok:       #5a7a4a;
  --ok-lt:    #d6edd8;
  --purple:   #7c3aed;
  --rose-deep:   var(--rose);
  --ok-deep:     var(--ok);
  --purple-deep: var(--purple);
  --alpine-deep: var(--alpine);
  --purple-lt:   #ede9fe;
  --snow-mid:    #e3ecf5;
  --nav-bg:      rgba(251,246,238,.96);
  --nav-border:  var(--border);
  --nav-ink:     var(--ink2);
  --nav-active:  var(--peach);
  --topbar-bg:   rgba(251,246,238,.85);
  --weather-bg-1: #fef3ec;
  --weather-bg-2: #fde6dc;
  --code-bg:      rgba(0,0,0,.05);
  --subtle-line:  rgba(0,0,0,.08);
  --snow-line:    rgba(38,36,58,.12);
  --danger-lt:     #fee2e2;
  --danger-border: #fecaca;
  --control-knob: #ffffff;
  --modal-backdrop: rgba(26,20,16,.5);
  --toast-bg:   var(--ink);
  --toast-text: #ffffff;
  --on-strong:  #ffffff;
  --nav-h: 72px;
  /* ホーム画面に追加したとき（standalone）は viewport-fit=cover で画面の隅まで使う。
     ノッチ・ステータスバー・ホームバーの領域を避けるのはこちらの責任になる。
     下だけ見ていたので、上と左右（横向き時のノッチ）が未対応だった。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 16px -6px rgba(60,30,10,.14);
  --shadow-sm: 0 1px 6px rgba(60,30,10,.07);

  /* フォント：欧文だけ自己ホスト（Inter / JetBrains Mono）、和文は端末標準のゴシックを使う。
     Noto Sans JP のWebフォント（数百KB）を読まなくなるので初期表示がかなり速い。 */
  --font-sans: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
               'Yu Gothic Medium', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-editorial: 'Fraunces', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
                     'Yu Gothic Medium', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;
  --font-data: var(--font-mono);
  /* 既存の見出し用指定との互換用 */
  --font-display: var(--font-editorial);
}

/* 全タブ共通の形は変えず、モードごとに色だけを差し替える。 */
body[data-wakuwaku-mode="dark"] {
  --bg:       #0b1020;
  --surface:  #121a30;
  --surface2: #1b2642;
  --ink:      #f4f1ea;
  --ink2:     #d2d6e0;
  --ink3:     #aeb6c9;
  --border:   rgba(255,255,255,.18);
  --peach:      #f2b183;
  --peach-deep: #a94f2f;
  --accent-text: var(--peach);
  --peach-lt:   rgba(232,149,107,.16);
  --rose:       #f08aa1;
  --rose-deep:  #a5354f;
  --cool:       #8eb5eb;
  --cool-lt:    #1b3153;
  --snow:        #172640;
  --snow-mid:    #213653;
  --snow-shadow: #365477;
  --alpine:      #8fc2ed;
  --alpine-deep: #315d87;
  --dusk:        #243452;
  --ok:          #91c897;
  --ok-deep:     #356641;
  --ok-lt:       #183c2a;
  --purple:      #b69cff;
  --purple-deep: #6730b0;
  --purple-lt:   #2a1d49;
  --nav-bg:      rgba(11,16,32,.94);
  --nav-border:  rgba(255,255,255,.09);
  --nav-ink:     #a7aec0;
  --nav-active:  #e8956b;
  --topbar-bg:   rgba(11,16,32,.88);
  --weather-bg-1: #172138;
  --weather-bg-2: #202d49;
  --code-bg:      rgba(255,255,255,.08);
  --subtle-line:  rgba(255,255,255,.14);
  --snow-line:    rgba(255,255,255,.14);
  --danger-lt:     #3b1e29;
  --danger-border: #7e3448;
  --control-knob: #f4f1ea;
  --modal-backdrop: rgba(2,6,18,.72);
  --toast-bg:   #f4f1ea;
  --toast-text: #0b1020;
}

body[data-wakuwaku-mode="light"] {
  --bg:       #f1efe8;
  --surface:  #ffffff;
  --surface2: #e5e2db;
  --ink:      #16181c;
  --ink2:     #51535b;
  --ink3:     #676870;
  --border:   rgba(22,24,28,.24);
  --peach:      #b8410f;
  --peach-deep: #9d350d;
  --accent-text: var(--peach);
  --peach-lt:   #f3ddd4;
  --rose:       #a92f4b;
  --rose-deep:  #92253f;
  --cool:       #315f87;
  --cool-lt:    #dbe7f1;
  --snow:        #e7edf3;
  --snow-mid:    #d8e2eb;
  --snow-shadow: #bac8d5;
  --alpine:      #315f87;
  --alpine-deep: #315f87;
  --dusk:        #26243a;
  --ok:          #3f7047;
  --ok-deep:     #386640;
  --ok-lt:       #dcecdf;
  --purple:      #6535a8;
  --purple-deep: #6535a8;
  --purple-lt:   #ede8f7;
  --nav-bg:      rgba(241,239,232,.96);
  --nav-border:  var(--border);
  --nav-ink:     var(--ink2);
  --nav-active:  var(--peach);
  --topbar-bg:   rgba(241,239,232,.88);
  --weather-bg-1: #f6e8df;
  --weather-bg-2: #eed8ce;
  --code-bg:      rgba(22,24,28,.06);
  --subtle-line:  rgba(22,24,28,.12);
  --snow-line:    rgba(22,24,28,.14);
  --danger-lt:     #f7dfe4;
  --danger-border: #e7aeb9;
  --control-knob: #ffffff;
  --modal-backdrop: rgba(22,24,28,.52);
  --toast-bg:   #16181c;
  --toast-text: #ffffff;
}

body[data-wakuwaku-mode="sticker"] {
  --bg:       #f7f5f0;
  --surface:  #ffffff;
  --surface2: #edf0fa;
  --ink:      #101114;
  --ink2:     #42444b;
  --ink3:     #62646b;
  --border:   #9aa4c3;
  --peach:      #1b46d6;
  --peach-deep: #1537aa;
  --accent-text: var(--peach);
  --peach-lt:   #e5ebff;
  --rose:       #b52950;
  --rose-deep:  #9b2342;
  --cool:       #1b46d6;
  --cool-lt:    #e5ebff;
  --snow:        #edf2ff;
  --snow-mid:    #dae3fa;
  --snow-shadow: #9aacdd;
  --alpine:      #2149bb;
  --alpine-deep: #2149bb;
  --dusk:        #20264a;
  --ok:          #2f7146;
  --ok-deep:     #2f7146;
  --ok-lt:       #dff2e4;
  --purple:      #6935af;
  --purple-deep: #6935af;
  --purple-lt:   #eee6fa;
  --nav-bg:      rgba(247,245,240,.96);
  --nav-border:  var(--border);
  --nav-ink:     var(--ink2);
  --nav-active:  var(--peach);
  --topbar-bg:   rgba(247,245,240,.88);
  --weather-bg-1: #fff8d8;
  --weather-bg-2: #f5e8a7;
  --code-bg:      rgba(16,17,20,.06);
  --subtle-line:  rgba(16,17,20,.12);
  --snow-line:    rgba(16,17,20,.14);
  --danger-lt:     #f8dfe6;
  --danger-border: #e6a8b8;
  --control-knob: #ffffff;
  --modal-backdrop: rgba(16,17,20,.55);
  --toast-bg:   #101114;
  --toast-text: #ffffff;
}

html, body { height: 100%; overflow: hidden; background: var(--bg);
  font-family: var(--font-sans);
  color: var(--ink); -webkit-font-smoothing: antialiased;
  /* iOS は指定が無いと WebKit が勝手に文字を拡大することがある（自動テキストサイズ調整）。
     px 指定でも効くので、iPhone だけ文字が大きくなって左右で切れる原因になる。
     PC のブラウザでは起きないため再現しにくい。100% で固定して止める。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; }

#app {
  display: flex; flex-direction: column;
  height: 100%; max-width: 640px; margin: 0 auto;
  position: relative; overflow: hidden;
  background: var(--bg);
}

/* モバイルではPCサイドバー・トップバーを非表示 */
.pc-sidebar, .pc-topbar { display: none; }

/* ── PC最適化（≥900px：左サイドバー + トップバー + メイン）── */
@media (min-width: 900px) {
  html, body {
    overflow: hidden;
    background: var(--bg);
  }
  body {
    display: flex;
    align-items: stretch;
  }

  /* ── サイドバー（左固定 220px）── */
  .pc-sidebar {
    display: flex; flex-direction: column;
    width: 220px; flex-shrink: 0;
    height: 100vh;
    background: var(--surface);
    border-right: .5px solid var(--border);
    box-sizing: border-box;
  }
  .pc-sb-logo-row {
    display: flex; align-items: center; gap: 10px;
    padding: 24px 24px 24px;
    border-bottom: .5px solid var(--border);
  }
  .pc-sb-logo-mark {
    width: 32px; height: 32px; border-radius: 9px;
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
  }
  .pc-sb-logo-mark img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .pc-sb-logo-name {
    font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  }
  .pc-sb-logo-tag {
    font-size: 9px; color: var(--ink2); letter-spacing: .18em;
    font-weight: 600; margin-top: 1px;
  }
  .pc-sb-nav {
    padding: 16px 12px; flex: 1;
    display: flex; flex-direction: column;
  }
  .pc-sb-section-label {
    font-size: 9px; color: var(--ink2); letter-spacing: .22em;
    font-weight: 700; padding: 8px 12px 10px;
  }
  .pc-nav-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 9px;
    background: transparent; border: none; cursor: pointer;
    color: var(--ink2); font-size: 13px; font-weight: 500;
    margin-bottom: 2px; position: relative;
    text-align: left; font-family: inherit;
    transition: background .12s, color .12s;
  }
  .pc-nav-btn:hover { background: rgba(232,116,79,.06); color: var(--ink); }
  .pc-nav-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
  .pc-nav-btn.active {
    background: var(--peach-lt);
    color: var(--peach);
    font-weight: 600;
  }
  .pc-nav-btn.active::before {
    content: ""; position: absolute;
    left: -12px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px;
    background: var(--peach);
  }
  .pc-sb-trip {
    padding: 14px 18px 16px;
    border-top: .5px solid var(--border);
  }
  .pc-sb-trip-label {
    font-size: 9px; color: var(--ink2); letter-spacing: .18em; font-weight: 700;
  }
  .pc-sb-trip-name {
    font-size: 13px; font-weight: 700; margin-top: 4px;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pc-sb-trip-meta {
    font-size: 10px; color: var(--ink2);
    font-family: var(--font-mono);
    letter-spacing: .06em; margin-top: 2px;
  }
  .pc-sb-trip-row {
    margin-top: 12px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .pc-sb-trip-avs { display: flex; }
  .pc-sb-av {
    width: 22px; height: 22px; border-radius: 50%;
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    border: 2px solid var(--surface);
  }
  .pc-sb-trip-count {
    font-size: 10px; color: var(--ink2);
    font-family: var(--font-mono);
  }

  /* ── #app をサイドバー右側のメインカラムに ── */
  #app {
    flex: 1;
    max-width: none; width: auto;
    height: 100vh;
    margin: 0;
    box-shadow: none;
    overflow: hidden;
  }

  /* ── トップバー（高さ 64px）── */
  .pc-topbar {
    display: flex; align-items: center;
    height: 64px; padding: 0 36px;
    border-bottom: .5px solid var(--border);
    background: var(--topbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-shrink: 0;
  }
  .pc-tb-eyebrow {
    font-size: 10px; color: var(--ink2);
    letter-spacing: .22em; font-weight: 600;
  }
  .pc-tb-title {
    font-size: 20px; font-weight: 600; letter-spacing: -.01em;
    margin-top: 1px; color: var(--ink);
  }
  .pc-tb-sub {
    color: var(--ink3); font-weight: 400; font-size: 14px; margin-left: 4px;
  }

  /* ── メインコンテンツ（スクロール領域）── */
  .main-content {
    padding: 24px 36px 28px;
    padding-bottom: 28px; /* ボトムナビ非表示なので safe-area 不要 */
  }

  /* ── ボトムナビはPCで非表示（モバイル定義を後勝ちで上書き）── */
  .bottom-nav { display: none !important; }

  /* ── ヒーロー：横長レイアウト ── */
  .hero {
    border-radius: 18px;
    margin: 0 0 20px;
    overflow: hidden;
  }
  .hero-top { left: 32px; right: 32px; top: 28px; }
  .hero-bottom { left: 32px; right: 32px; bottom: 24px; }

  /* ── 共通：カード／セクションをメインの幅にリセット（モバイルの margin: 0 16px を無効化）── */
  .card, .h1, .eyebrow,
  .seg-control, .field-list, .pickup-toggle, .btn-search, .search-note,
  .map-container-full, .link-list,
  .weather-card, .forecast-card, .snow-card, .onsen-card, .course-map-card, .route-options,
  .split-hero, .result-hero, .route-card, .pickup-schedule,
  .section-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
  }
  .eyebrow { padding-top: 18px; }
  .h1 { margin-bottom: 14px; }

  /* マップを広く */
  .map-container-full { height: 460px; }
  .map-container { height: 320px; }

  /* ── ホーム本体：実データを反映した2カラムレイアウト ── */
  .home-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    padding: 0;
    max-width: none;
  }
  .home-body > .eyebrow,
  .home-body > .card {
    grid-column: 1 / -1;
  }
  .home-body .home-quote {
    grid-column: 1 / -1;
    font-size: 18px; line-height: 1.55;
    padding-left: 16px; border-left-width: 3px;
  }
  /* メンバー・設定セクションをサブカラムに寄せたい場合は今後拡張可 */

  /* ── 旅程：検索フォーム類は読みやすい幅（中央寄せ）── */
  .field-list, .pickup-toggle, .btn-search, .search-note, .seg-control {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 写真バンドも同じ幅に揃える。横に伸ばすと写真だけ間延びして見える。
     高さは素の .section-banner より後の @media で指定する（下の「素のヒーロー高さより後に」参照） */
  .section-banner {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── ログ：エントリーをグリッド表示 ── */
  .log-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
  .log-entry { margin: 0 !important; }
  /* 写真バンドと同じ幅・同じ中央寄せにする。
     !important が要るのは、この指定より後ろに .log-stats-card の margin ショートハンドが
     あり、そちらが勝って左に 16px 寄ったままになっていたため（実測で224pxずれていた）。 */
  .log-stats-card,
  .log-season-label {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── ゲレンデ：2カラム（コースマップを横に）── */
  .gelende-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* ヒーロー文字を読みやすく */
  .hero-resort { font-size: 38px; }

  /* カード内のアクションボタンが横に伸びすぎないよう上限を設定 */
  .card .btn-sm-primary,
  .card .btn-sm-secondary {
    max-width: 220px;
  }
}

/* ── さらに広い画面（≥1400px）：余白拡大 ── */
@media (min-width: 1400px) {
  .main-content { padding: 28px 56px 36px; }
  .pc-topbar { padding: 0 56px; }
  .home-body { gap: 28px; }
}

.main-content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; min-height: 0;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
}
.main-content::-webkit-scrollbar { display: none; }

/* ── Bottom Nav ── */
.bottom-nav {
  position: sticky; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--nav-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: .5px solid var(--nav-border);
  display: flex; align-items: flex-start; padding-top: 10px;
  z-index: 100; flex-shrink: 0;
}
.nav-btn {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--nav-ink); transition: color .15s; padding: 0;
  min-width: 0; min-height: 44px; justify-content: center;   /* 5タブを等分し、指で押せる高さも保つ */
}
.nav-btn.active { color: var(--nav-active); }
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn span { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }

/* タブバーのレンズ（共通部品 js/liquid-glass-tabs.css）: 色をテーマに合わせる */
[data-lgt] { --lgt-active: var(--nav-active); --lgt-inactive: var(--nav-ink); }
body[data-wakuwaku-mode="dark"] .lgt-lens,
body[data-wakuwaku-mode="dark"] .lgt-trail {
  --lgt-fill: linear-gradient(180deg, rgba(38,46,66,.97) 0%, rgba(24,31,50,.92) 55%, rgba(30,38,58,.95) 100%);
  --lgt-fill-landing: linear-gradient(180deg, rgba(60,70,95,1) 0%, rgba(40,50,75,.98) 55%, rgba(48,58,84,1) 100%);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 .5px rgba(242,177,131,.3), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ── Card ── */
.card {
  background: var(--surface); border-radius: var(--radius);
  padding: 18px 20px; margin: 0 16px 12px;
  box-shadow: var(--shadow-sm); border: .5px solid var(--border);
}
.card-title {
  font-size: 12px; font-weight: 700; color: var(--ink3);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}

/* ── Section heading ── */
.eyebrow {
  font-size: 10px; font-weight: 700; color: var(--ink2);
  letter-spacing: .22em; text-transform: uppercase;
  margin: 0 16px 4px; padding-top: 20px;
}
.h1 {
  font-size: 26px; font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; margin: 0 16px 14px; line-height: 1.1;
}

/* ── Hero (First run) ── */
.hero { position: relative; overflow: hidden; }
.home-hero {
  height: 430px;
  background: #102d50;
  isolation: isolate;
}
/* ホームの写真だけは画面のいちばん上まで見せたい。
   main-content の safe-top ぶんを打ち消して上に伸ばし、
   文字はステータスバーに重ならないよう safe-top ぶん下げる。 */
.home-hero {
  margin-top: calc(-1 * var(--safe-top));
  height: calc(430px + var(--safe-top));
}
.home-hero .hero-top { top: calc(30px + var(--safe-top)); }
.mountain-hero { height: 220px; }
.home-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(90deg, rgba(5,24,44,.82) 0%, rgba(5,24,44,.5) 43%, rgba(5,24,44,.06) 76%),
    linear-gradient(0deg, rgba(5,18,34,.82) 0%, rgba(5,18,34,.07) 58%, rgba(5,18,34,.28) 100%),
    url("img/hero/first-run-mountain.webp");
  background-size: cover;
  background-position: 58% 52%;
  transform: scale(1.015);
  animation: first-run-reveal .8s cubic-bezier(.2,.7,.2,1) both;
}
.home-hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: inherit;
  pointer-events: none;
}
@keyframes first-run-reveal {
  from { opacity: .72; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1.015); }
}
.hero-top {
  position: absolute; top: 30px; left: 22px; right: 22px; color: white;
}
.hero-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .2em; opacity: .84;
  font-family: var(--font-data);
  text-shadow: 0 1px 8px rgba(0,0,0,.24);
}
.hero-greet {
  font-size: 23px; font-family: var(--font-sans);
  font-weight: 700; letter-spacing: .04em; margin-top: 7px;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-bottom {
  position: absolute; bottom: 24px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: white; gap: 12px;
}
.hero-dest { min-width: 0; }
.hero-label {
  font-size: 10px; font-weight: 700; letter-spacing: .22em; opacity: .9;
  font-family: var(--font-data);
}
.hero-resort {
  /* スキー場名は「シャトレーゼスキーリゾート野辺山」のように長いものがある。
     固定サイズだと狭い端末で端いっぱいまで届いてしまうので、画面幅に追従させる。 */
  font-size: clamp(25px, 8vw, 34px);
  font-family: var(--font-editorial);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin-top: 6px;
  text-wrap: balance;
  overflow-wrap: anywhere;                  /* 長い英字名でも途中で折り返す */
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.hero-resort-en {
  font-size: 11px; opacity: .88; font-family: var(--font-sans);
  letter-spacing: .04em; margin-top: 8px; line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.hero-actions {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 9px; flex-shrink: 0;
}
.hero-pill {
  background: rgba(7,28,49,.68); color: white;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px 13px; border-radius: 100px; font-size: 11px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.hero-pill span {
  font-family: var(--font-data); font-size: 14px;
  color: white; font-weight: 700; margin-left: 4px;
}
.hero-cta {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 17px;
  border: 0; border-radius: 100px;
  background: var(--peach-deep); color: white;
  box-shadow: 0 8px 22px -8px rgba(232,116,79,.8);
  font: 700 13px/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.hero-cta:hover { background: #dc6845; box-shadow: 0 10px 26px -8px rgba(232,116,79,.9); }
.hero-cta:active { transform: scale(.97); }
.hero-cta:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 3px; }
.hero-cta svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero-actions { flex-direction: row; align-items: center; width: 100%; }
  /* font-size はここで固定せず、素の clamp()（画面幅に追従）に任せる。
     32px 固定に戻すと狭い端末で名前が端まで届いてしまう */
}

/* ── Home body ── */
.home-body { padding: 24px 22px 24px; }
.home-quote {
  font-family: var(--font-editorial);
  font-size: 17px; font-style: italic; color: var(--ink2);
  line-height: 1.55; margin-bottom: 26px;
  padding-left: 14px; border-left: 2px solid var(--peach);
}

/* ゲレンデヒーロー：雪面に薄い等高線を重ねる */
.mountain-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--snow) 0%, var(--snow-mid) 54%, var(--snow-shadow) 100%);
}
/* 地形図の等高線。山頂を囲む入れ子の閉ループにすることで「地形図」に見える。
   横に流れる波線にすると木目や水面に見えてしまうので、必ず閉じた輪郭にすること。 */
.mountain-contours {
  position: absolute; inset: 0;
  opacity: .09;
  background-size: 420px 260px;
  background-position: 62% 40%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%2326243a' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M212 118c14-4 26 3 27 13s-9 18-22 19-24-6-24-15 6-15 19-17z'/%3E%3Cpath d='M206 96c30-8 55 6 58 27s-19 37-48 39-52-12-53-31 13-30 43-35z'/%3E%3Cpath d='M198 74c48-13 88 9 93 43s-30 59-77 62-84-19-86-50 22-42 70-55z'/%3E%3Cpath d='M188 52c66-18 121 12 128 59s-41 81-106 85S89 176 86 133s36-63 102-81z'/%3E%3Cpath d='M176 30c86-23 157 16 166 76s-53 105-138 110S43 190 39 134s51-81 137-104z'/%3E%3Cpath d='M162 8c105-28 192 20 203 93s-65 128-169 134S-8 200-13 132 57 36 162 8z'/%3E%3C/g%3E%3C/svg%3E");
}
.mountain-hero-copy {
  position: absolute; inset: 0;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--ink);
}
.mountain-hero-label {
  color: var(--ink2); opacity: 1; margin-bottom: 5px;
}
.mountain-hero-resort { color: var(--ink); }
.mountain-hero-coords {
  margin-top: 6px; color: var(--ink2);
  font-family: var(--font-data); font-size: 10px; letter-spacing: .12em;
}

/* ── セクションの写真バンド ──
   ホームのヒーローと同じ扱い（写真＋暗いグラデ＋白文字）で、高さだけ抑えたもの。
   写真は必ずグラデーションを重ねてから文字を載せる。直に載せると
   明るい空の部分で白文字が読めなくなる。 */
.section-banner {
  position: relative; overflow: hidden;
  height: 124px;
  margin: 16px 16px 0;
  border-radius: var(--radius);
  background: #102d50;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 18px 15px;
  color: #fff;
}
.section-banner::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-size: cover;
}
.section-banner--trip::before {
  background-image:
    linear-gradient(0deg, rgba(5,18,34,.80) 0%, rgba(5,18,34,.16) 64%, rgba(5,18,34,.30) 100%),
    url("img/section/trip-dawn-road.webp");
  background-position: 50% 64%;
}
.section-banner--log::before {
  background-image:
    linear-gradient(0deg, rgba(5,18,34,.80) 0%, rgba(5,18,34,.16) 64%, rgba(5,18,34,.26) 100%),
    url("img/section/log-dusk-tracks.webp");
  background-position: 50% 58%;
}
.section-banner-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  font-family: var(--font-data); opacity: .88;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.section-banner-title {
  font-size: 25px; font-family: var(--font-editorial);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin-top: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* 温泉は見出しを写真に載せる。
   文字なしの細い帯にすると、PCの広い画面で 11:1 まで伸びて
   「何の写真か分からない帯」になった。ラベルを載せて意味が分かる形にする。 */
.section-banner--onsen {
  height: 104px;
}
.section-banner--onsen::before {
  background-image:
    linear-gradient(0deg, rgba(5,18,34,.78) 0%, rgba(5,18,34,.20) 62%, rgba(5,18,34,.34) 100%),
    url("img/section/onsen-steam.webp");
  background-position: 50% 62%;
}
.section-banner--onsen .section-banner-title { font-size: 19px; }

/* 素のヒーロー高さより後に置き、ブレークポイント側を確実に勝たせる */
@media (min-width: 900px) {
  .home-hero { height: 390px; }
  .home-hero::before { background-position: 58% 33%; }
  .mountain-hero { height: 240px; }
  .hero-top { left: 32px; right: 32px; top: 28px; }
  .hero-bottom { left: 32px; right: 32px; bottom: 28px; }
  .hero-resort { font-size: 42px; max-width: 720px; }
  .section-banner { height: 156px; padding: 0 22px 18px; }
  .section-banner-title { font-size: 29px; }
  /* 温泉はゲレンデタブにあり、周りのカードが全部フル幅なので合わせる。
     旅程・滑走ログ側の 720px 中央寄せをここで打ち消す（このブロックの方が後ろ） */
  .section-banner--onsen {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 132px;
  }
  .section-banner--onsen .section-banner-title { font-size: 22px; }
}
@media (min-width: 1400px) {
  .home-hero { height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero::before { animation: none; transform: none; }
}
.stat-list { margin-bottom: 26px; }
.stat-unit { font-size: 11px; color: var(--ink2); font-weight: 500; margin-left: 2px; }

/* ── Stat row (numbered list) ── */
.stat-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: .5px solid var(--border);
}
.stat-row:last-child { border-bottom: none; }
.stat-num {
  font-size: 10px; color: var(--ink2); font-family: var(--font-mono);
  font-weight: 600; width: 22px; flex-shrink: 0;
}
.stat-body { flex: 1; }
.stat-label { font-size: 12px; color: var(--ink2); font-weight: 500; }
.stat-sub {
  font-size: 10px; color: var(--ink2); margin-top: 2px;
  font-family: var(--font-mono); letter-spacing: .04em;
}
.stat-val { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; font-family: var(--font-data); }
.stat-val.hi { color: var(--peach); font-weight: 700; }

/* ── Member strip ── */
.member-strip { display: flex; gap: 14px; padding: 0 2px; }
.member-chip { flex: 1; text-align: center; min-width: 0; }
.member-av {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: white;
  margin: 0 auto 5px; position: relative;
}
.member-chip-name { font-size: 11px; font-weight: 600; }

/* ── Search form ── */
.field-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: .5px solid var(--border);
}
.field-row:last-child { border-bottom: none; }
.field-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--peach-lt); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.field-icon svg { width: 18px; height: 18px; }
.field-body { flex: 1; min-width: 0; position: relative; }
.field-label {
  font-size: 9.5px; font-weight: 700; color: var(--ink2);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px;
}
/* ⚠ 入力欄・セレクトの font-size は 16px 未満にしないこと。
   iOS Safari は 16px 未満のフィールドをタップすると自動でページを拡大する。
   拡大されたままになるので、左右が切れて「画面が見切れる」状態になる。
   ゲレンデ検索欄が 15px だったため、スキー場を検索した瞬間にこれが起きていた。 */
.field-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--ink); font-family: inherit; padding: 0;
}
.field-input::placeholder { color: var(--ink3); font-weight: 400; }

/* 検索欄の「×」。入力があるときだけ出す。
   グローブや かじかんだ指でも押せるよう当たり判定は44px確保し、
   見た目のアイコンだけ小さくする。
   入力文字が下に潜らないよう .field-input 側に右余白を取る。 */
.field-clear {
  position: absolute; right: -10px; bottom: -12px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--ink3); -webkit-tap-highlight-color: transparent;
}
.field-clear svg { width: 19px; height: 19px; }
.field-clear:active svg { opacity: .55; }
.field-body > .field-input { padding-right: 30px; }
.field-select {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--ink); font-family: inherit;
  padding: 0; appearance: none; -webkit-appearance: none;
}
.field-arrow { font-size: 18px; color: var(--ink3); flex-shrink: 0; }

/* Autocomplete */
.autocomplete-list {
  position: absolute; top: 100%; left: -50px; right: -28px;
  background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(60,30,10,.2);
  z-index: 200; overflow: hidden; border: .5px solid var(--border);
}
.autocomplete-item {
  padding: 12px 16px; font-size: 14px; cursor: pointer;
  border-bottom: .5px solid var(--border); color: var(--ink);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--peach-lt); }
.autocomplete-item-sub { font-size: 11px; color: var(--ink2); margin-top: 2px; }

/* Toggle */
.toggle-switch {
  width: 44px; height: 26px; border-radius: 13px;
  background: var(--border); border: none; cursor: pointer;
  position: relative; transition: background .2s; flex-shrink: 0;
}
/* スイッチの見た目は26pxのままで、指で押せる範囲だけ44pxに広げる */
.toggle-switch::before {
  content: ""; position: absolute;
  top: -9px; bottom: -9px; left: 0; right: 0;
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--control-knob); transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.toggle-switch.on { background: var(--peach); }
.toggle-switch.on::after { transform: translateX(18px); }

/* Search button */
.btn-search {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 32px); margin: 4px 16px 8px;
  padding: 16px; background: var(--peach-deep); color: white;
  border: none; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 18px -4px rgba(232,116,79,.55); transition: opacity .15s;
}
.btn-search:active { opacity: .85; }
.search-note { text-align: center; font-size: 11px; color: var(--ink2); padding: 0 16px 16px; }
.trip-discount-note {
  font-size: 10px; color: var(--ink3); text-align: center;
  padding: 0 16px 24px; line-height: 1.6;
}

/* Pickup section */
.pickup-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.pickup-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pickup-toggle-label svg { width: 18px; height: 18px; color: var(--ink3); }
.pickup-members-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pickup-member-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  cursor: pointer; border: 1.5px solid var(--border);
  background: var(--surface); transition: all .15s;
}
.pickup-member-item.selected { border-color: var(--peach); background: var(--peach-lt); }
.pickup-checkbox {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--border); display: flex;
  align-items: center; justify-content: center;
  background: var(--surface); flex-shrink: 0;
}
.pickup-member-item.selected .pickup-checkbox { background: var(--peach-deep); border-color: var(--peach-deep); color: white; }
.pickup-checkbox svg { width: 12px; height: 12px; }
.pickup-member-name { font-size: 13px; font-weight: 600; }
.pickup-member-addr { font-size: 11px; color: var(--ink2); margin-top: 2px; }
.pickup-no-members { text-align: center; padding: 16px 0; font-size: 13px; color: var(--ink3); }

/* Segment control */
.seg-control {
  display: flex; background: var(--surface2); border-radius: 100px;
  padding: 4px; margin: 0 16px 14px;
}
.seg-btn {
  flex: 1; padding: 10px; border-radius: 100px; border: none;
  min-height: 44px;                            /* 指で押せる最小サイズ */
  background: transparent; color: var(--ink2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .2s;
}
.seg-btn.active { background: var(--peach-deep); color: white; }

/* Result hero card */
.result-hero {
  background: linear-gradient(135deg, var(--dusk), var(--alpine-deep));
  border-radius: var(--radius); padding: 18px 20px;
  margin: 0 16px 12px; color: white;
}
.result-time-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.result-time-label { font-size: 9px; opacity: .75; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.result-time-value { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-family: var(--font-data); }
.result-time-arrow { flex: 1; text-align: center; opacity: .5; font-size: 18px; }
.result-arrive .result-time-value { color: #fcd34d; }
.result-stats-row { display: flex; border-top: .5px solid rgba(255,255,255,.2); padding-top: 14px; }
.result-stat { flex: 1; text-align: center; }
.result-stat + .result-stat { border-left: .5px solid rgba(255,255,255,.2); }
.result-stat-icon { font-size: 15px; margin-bottom: 3px; }
.result-stat-lbl { font-size: 9px; opacity: .7; letter-spacing: .1em; font-weight: 600; }
.result-stat-val { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.result-stat-unit { font-size: 10px; opacity: .65; font-weight: 400; }

/* ── 到着予想を幅で見せるとき ──
   「10:39〜11:42」「4時間9分〜5時間12分」は素の文字サイズだと
   3列のセルに収まらず不格好に折り返す。幅表示のときだけ小さくする。 */
.result-arrive-range { font-size: 23px; white-space: nowrap; }
.result-stat-val-range { font-size: 13px; line-height: 1.3; }
.result-buffer-note {
  font-size: 10.5px; opacity: .8; line-height: 1.5;
  margin: -6px 0 12px; letter-spacing: .01em;
}

/* Route card (depart → arrive) */
.route-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 16px 20px; margin: 0 16px 12px;
  border: .5px solid var(--border); box-shadow: var(--shadow-sm);
}
.route-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 11px; color: var(--ink2); font-weight: 600; letter-spacing: .08em;
}
.route-card-header svg { color: var(--peach); width: 16px; height: 16px; }
.route-times { display: flex; align-items: center; gap: 12px; }
.route-time-val {
  font-size: 26px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); font-family: var(--font-data);
}
.route-time-loc { font-size: 10px; color: var(--ink2); margin-top: 2px; }
.route-line { flex: 1; height: 2px; background: var(--border); position: relative; }
.route-line-label {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--surface); padding: 0 6px;
  font-size: 9px; color: var(--ink2); font-family: var(--font-mono); white-space: nowrap;
}

/* Map */
.map-container { height: 230px; border-radius: var(--radius); overflow: hidden; margin: 0 16px 12px; border: .5px solid var(--border); }
.map-container-full { height: calc(100vh - 180px); overflow: hidden; margin: 0 16px 12px; border-radius: var(--radius); border: .5px solid var(--border); }
#leafletMap, #leafletMapFull { height: 100%; width: 100%; }

/* Timeline (horizontal) */
.timeline { display: flex; align-items: flex-start; padding: 4px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.timeline::-webkit-scrollbar { display: none; }
.tl-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 58px; position: relative; }
.tl-step:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; left: 50%; right: -50%;
  height: 2px; background: var(--border); z-index: 0;
}
.tl-step.done::after { background: var(--peach); }
.tl-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  border: 2px solid var(--border); background: var(--surface); z-index: 1; position: relative;
}
.tl-step.step-meet .tl-icon  { background: var(--peach-deep); border-color: var(--peach-deep); }
.tl-step.step-pickup .tl-icon { background: var(--purple-deep); border-color: var(--purple-deep); font-size: 13px; }
.tl-step.step-ic .tl-icon    { background: var(--ok-deep); border-color: var(--ok-deep); font-size: 12px; }
.tl-step.step-arrive .tl-icon { background: var(--peach-deep); border-color: var(--peach-deep); }
.tl-time { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 6px; font-family: var(--font-data); }
.tl-label { font-size: 10px; color: var(--ink2); text-align: center; max-width: 64px; line-height: 1.3; margin-top: 2px; }

/* Itinerary (vertical) */
.itin-list { display: flex; flex-direction: column; }
.itin-row { display: flex; gap: 14px; padding-bottom: 14px; }
.itin-row:last-child { padding-bottom: 0; }
.itin-spine { display: flex; flex-direction: column; align-items: center; }
.itin-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.itin-dot.done { background: var(--ok-deep); color: white; }
.itin-dot.current { background: var(--peach-deep); color: white; box-shadow: 0 0 0 5px var(--peach-lt); }
.itin-dot.upcoming { background: var(--surface2); border: 1.5px solid var(--border); color: var(--ink3); }
.itin-line { width: 2px; flex: 1; min-height: 12px; margin-top: 4px; }
.itin-line.done { background: var(--ok); }
.itin-line.pending { background: var(--border); }
.itin-body { flex: 1; padding-top: 3px; }
.itin-time { font-size: 11px; color: var(--ink2); font-family: var(--font-data); font-weight: 600; }
.itin-time.current { color: var(--peach); }
.itin-label { font-size: 13px; font-weight: 500; color: var(--ink2); margin-top: 2px; }
.itin-label.current { font-weight: 700; color: var(--ink); }

/* Pickup schedule */
.pksched-list { display: flex; flex-direction: column; position: relative; }
.pksched-list::before { content: ''; position: absolute; left: 50px; top: 20px; bottom: 20px; width: 2px; background: var(--border); z-index: 0; }
.pksched-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; position: relative; z-index: 1; }
.pksched-time { width: 46px; font-size: 13px; font-weight: 700; color: var(--ink); flex-shrink: 0; text-align: right; padding-top: 4px; font-family: var(--font-data); }
.pksched-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; border: 3px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.pksched-dot-driver { background: var(--peach-deep); color: white; font-size: 13px; }
.pksched-dot-pickup { background: var(--purple-deep); color: white; }
.pksched-dot-ic { background: var(--ok-deep); color: white; font-size: 10px; }
.pksched-body { flex: 1; padding-top: 3px; }
.pksched-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pksched-sub { font-size: 11px; color: var(--ink2); margin-top: 1px; }
.pksched-ready { font-size: 11px; color: var(--purple); background: var(--purple-lt); border-radius: 6px; padding: 4px 8px; margin-top: 4px; display: inline-block; }
.pksched-row.pksched-driver .pksched-name { color: var(--peach); }

/* Recommend */
.recommend-box { background: var(--peach-lt); border-radius: var(--radius-sm); padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.recommend-icon { font-size: 20px; flex-shrink: 0; }
.recommend-title { font-size: 12px; font-weight: 700; color: var(--peach); margin-bottom: 6px; }
.recommend-list { list-style: none; }
.recommend-list li { font-size: 12px; color: var(--ink2); padding: 2px 0 2px 14px; position: relative; line-height: 1.4; }
.recommend-list li::before { content: '·'; position: absolute; left: 0; color: var(--peach); font-weight: 700; }

/* Expense split */
.split-hero { background: linear-gradient(140deg, var(--peach-deep) 0%, var(--rose-deep) 100%); color: white; border-radius: var(--radius); padding: 20px 22px; margin: 0 16px 12px; }
.split-hero-label { font-size: 10px; opacity: .85; letter-spacing: .18em; font-weight: 700; margin-bottom: 6px; }
.split-hero-amount { font-size: 38px; font-weight: 700; letter-spacing: -.03em; }
.split-hero-sub { font-size: 10px; opacity: .7; font-family: var(--font-mono); letter-spacing: .06em; margin-top: 2px; }
.split-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: .5px solid var(--border); }
.split-item:last-child { border-bottom: none; }
.split-who { width: 34px; height: 34px; border-radius: 50%; background: var(--peach-lt); color: var(--peach); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.split-label { flex: 1; }
.split-label-text { font-size: 13px; font-weight: 600; color: var(--ink); }
.split-who-name { font-size: 10px; color: var(--ink2); margin-top: 1px; }

/* 支出の時刻。何時に何を買ったかを一覧で追えるようにする */
.split-when {
  width: 42px; flex-shrink: 0; text-align: center;
  font-family: var(--font-data); line-height: 1.2;
}
.split-when-time { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.split-when-date { font-size: 9.5px; color: var(--ink3); margin-top: 2px; }

/* 立替フォームの種別選択。指で押せるよう最低44px確保する */
.split-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.split-cat-pill {
  display: flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink2);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.split-cat-pill.active {
  background: var(--peach-deep); border-color: var(--peach-deep); color: #fff;
}
.split-cat-icon { font-size: 15px; }

/* 種別ごとの内訳。棒の長さは最大の項目を基準にした相対値 */
.cost-cat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cost-cat-row:last-child { margin-bottom: 0; }
.cost-cat-name { width: 96px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cost-cat-bar { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.cost-cat-bar span { display: block; height: 100%; background: var(--peach); border-radius: 999px; }
.cost-cat-amt {
  width: 92px; flex-shrink: 0; text-align: right;
  font-size: 13px; font-weight: 700; color: var(--ink); font-family: var(--font-data);
}
.cost-cat-pct { font-size: 10px; color: var(--ink3); font-weight: 600; margin-left: 5px; }

/* ── これまでの旅程（滑走ログタブ）── */
.trip-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; min-height: 60px;
  background: none; border: none; border-bottom: .5px solid var(--border);
  text-align: left; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.trip-row:last-child { border-bottom: none; }
.trip-row:active { background: var(--peach-lt); }
.trip-row-date { width: 42px; flex-shrink: 0; text-align: center; font-family: var(--font-data); }
.trip-row-md  { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.trip-row-dow { font-size: 9.5px; color: var(--ink3); margin-top: 1px; }
.trip-row-body { flex: 1; min-width: 0; }
.trip-row-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-row-sub { font-size: 10.5px; color: var(--ink2); margin-top: 2px; }
.trip-row-cost {
  font-size: 14px; font-weight: 700; color: var(--accent-text);
  font-family: var(--font-data); flex-shrink: 0;
}
.trip-row-nocost { font-size: 10.5px; color: var(--ink3); font-weight: 600; font-family: var(--font-sans); }
.trip-row-arrow { color: var(--ink3); font-size: 18px; flex-shrink: 0; }

/* ── 過去の旅程の費用（モーダル）── */
.trip-cost-date { font-size: 11.5px; color: var(--ink2); margin: -8px 0 12px; }
.trip-cost-stats {
  display: flex; gap: 10px; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: .5px solid var(--border);
}
.trip-cost-stats > div { flex: 1; }
.trip-cost-lbl { font-size: 9.5px; font-weight: 700; color: var(--ink2); letter-spacing: .1em; }
.trip-cost-val { font-size: 17px; font-weight: 700; color: var(--ink); font-family: var(--font-data); margin-top: 2px; }
.trip-cost-val span { font-size: 10px; color: var(--ink3); font-weight: 400; }
/* 縦スクロールが出るぶん、右端の金額や％がバーに重なって切れる。その分の余白を取る */
.trip-cost-body { max-height: 46vh; overflow-y: auto; padding-right: 10px; }
.trip-cost-total { text-align: center; margin-bottom: 16px; }
.trip-cost-sum {
  font-size: 30px; font-weight: 700; color: var(--accent-text);
  font-family: var(--font-data); letter-spacing: -.03em; margin-top: 2px;
}
.trip-cost-sec {
  font-size: 9.5px; font-weight: 700; color: var(--ink2); letter-spacing: .14em;
  text-transform: uppercase; margin: 16px 0 8px;
}
.trip-cost-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: .5px solid var(--border);
}
.trip-cost-item:last-child { border-bottom: none; }
.trip-cost-time {
  width: 42px; flex-shrink: 0; font-size: 12px; font-weight: 700;
  color: var(--ink2); font-family: var(--font-data);
}
.trip-cost-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.trip-cost-payer { display: block; font-size: 10px; color: var(--ink3); font-weight: 500; margin-top: 1px; }
.trip-cost-amt { font-size: 13px; font-weight: 700; color: var(--ink); font-family: var(--font-data); flex-shrink: 0; }
.trip-cost-empty { text-align: center; padding: 28px 12px; font-size: 12.5px; color: var(--ink2); line-height: 1.7; }
.split-amount { font-size: 16px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); }
.split-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
/* 16px 未満にすると iOS がタップ時にページを拡大する（.field-input のコメント参照） */
.split-input {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--surface); outline: none;
}
.split-input:focus { border-color: var(--peach); }
.split-select {
  padding: 10px 10px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--surface); outline: none;
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
}
.split-select:focus { border-color: var(--peach); }
.btn-split-add {
  padding: 10px 14px; background: var(--peach-deep); color: white; border: none;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
}

/* Log tab */
.log-stats-card { display: flex; align-items: center; background: linear-gradient(135deg, var(--peach-deep), var(--rose-deep)); color: white; border-radius: var(--radius); padding: 20px 24px; margin: 16px 16px 4px; box-shadow: 0 4px 18px -4px rgba(232,116,79,.4); }
.log-stat-item { flex: 1; text-align: center; }
.log-stat-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.log-stat-label { font-size: 11px; opacity: .8; margin-top: 4px; font-weight: 600; letter-spacing: .05em; }
.log-stat-divider { width: 1px; height: 52px; background: rgba(255,255,255,.3); flex-shrink: 0; }
/* 記録がまだ0件のときは、赤いグラデーションで「0」を大きく見せない。
   中身が無いのに一番目立つ、という状態を避ける。1件でも記録されたら通常の配色に戻る。 */
.log-stats-card.is-empty {
  background: var(--surface);
  color: var(--ink2);
  border: .5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.log-stats-card.is-empty .log-stat-num { color: var(--ink3); font-weight: 700; }
.log-stats-card.is-empty .log-stat-divider { background: var(--border); }

.log-season-label { text-align: center; font-size: 10px; color: var(--ink2); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 6px 16px 14px; font-family: var(--font-editorial); }
.log-entry { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin: 0 16px 10px; border: .5px solid var(--border); box-shadow: var(--shadow-sm); }
.log-entry-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.log-entry-date { font-size: 11px; color: var(--ink2); font-family: var(--font-data); }
.log-entry-stars { display: flex; gap: 1px; }
.star-filled { color: var(--peach); font-size: 14px; }
.star-empty { color: var(--border); font-size: 14px; }
.log-entry-resort { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.log-entry-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.log-badge { font-size: 11px; background: var(--surface2); color: var(--ink2); padding: 3px 9px; border-radius: 100px; border: .5px solid var(--border); }
.log-entry-members { font-size: 12px; color: var(--ink3); margin-bottom: 6px; }
.log-entry-notes { font-size: 12px; color: var(--ink2); background: var(--surface2); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.55; border-left: 2px solid var(--peach); }
.log-entry-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.btn-record { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: 4px 16px 16px; padding: 14px; background: linear-gradient(135deg, var(--peach-deep), var(--rose-deep)); color: white; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 4px 18px -4px rgba(232,116,79,.45); transition: opacity .15s; }
.btn-record:active { opacity: .85; }
.log-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.log-pill { padding: 7px 13px; border: 1.5px solid var(--border); border-radius: 100px; background: var(--surface); font-size: 13px; cursor: pointer; color: var(--ink3); transition: all .15s; font-family: inherit; }
.log-pill.active { border-color: var(--peach); background: var(--peach-lt); color: var(--peach); font-weight: 600; }
.log-member-list { display: flex; flex-wrap: wrap; gap: 10px; }
.log-member-check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.log-member-check input { width: 16px; height: 16px; accent-color: var(--peach); cursor: pointer; }
.log-stars { display: flex; gap: 4px; }
.log-star { font-size: 30px; background: none; border: none; cursor: pointer; color: var(--border); transition: color .1s; padding: 2px; font-family: inherit; }
.log-star.active { color: var(--peach); }

/* Members / Settings */
.member-card { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin: 0 16px 10px; display: flex; align-items: center; gap: 12px; border: .5px solid var(--border); box-shadow: var(--shadow-sm); }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.member-addr { font-size: 12px; color: var(--ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn { width: 34px; height: 34px; border: none; border-radius: 8px; background: var(--surface2); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink3); transition: background .2s; }
.icon-btn:hover { background: var(--border); }
.icon-btn.danger:hover { background: var(--danger-lt); color: var(--rose); }
.icon-btn svg { width: 16px; height: 16px; }
.fab { position: fixed; bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px); right: calc(50% - 300px + 16px); width: 54px; height: 54px; border-radius: 50%; background: var(--peach-deep); color: white; border: none; cursor: pointer; box-shadow: 0 4px 18px rgba(232,116,79,.5); font-size: 24px; display: flex; align-items: center; justify-content: center; z-index: 50; transition: transform .15s; }
.fab:active { transform: scale(.92); }
@media (max-width: 640px) { .fab { right: 16px; } }
.settings-section { margin-bottom: 20px; }
.settings-section-title { font-size: 10px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .2em; padding: 16px 20px 8px; }
.settings-card { background: var(--surface); border-radius: var(--radius); margin: 0 16px; overflow: hidden; border: .5px solid var(--border); }
.settings-item { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: .5px solid var(--border); cursor: pointer; }
.settings-item:last-child { border-bottom: none; }
.settings-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.settings-text { flex: 1; }
.settings-name { font-size: 15px; color: var(--ink); }
.settings-desc { font-size: 12px; color: var(--ink3); margin-top: 1px; }
.settings-value { font-size: 14px; color: var(--ink3); display: flex; align-items: center; gap: 4px; }
.settings-value svg { width: 14px; height: 14px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: var(--modal-backdrop); z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 480px) { .modal-overlay { align-items: center; } }
.modal { background: var(--surface); border-radius: 24px 24px 0 0; padding: 24px 20px 36px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; }
@media (min-width: 480px) { .modal { border-radius: 20px; max-height: 80vh; } }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 20px; color: var(--ink); }
.form-group { margin-bottom: 16px; }
.form-label { font-size: 11px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .5px; }
.form-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; color: var(--ink); background: var(--surface); outline: none; transition: border-color .2s; font-family: inherit; appearance: none; -webkit-appearance: none; }
.form-input:focus { border-color: var(--peach); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-primary { flex: 1; padding: 14px; background: var(--peach-deep); color: white; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-cancel { padding: 14px 20px; background: var(--surface2); color: var(--ink2); border: none; border-radius: var(--radius-sm); font-size: 15px; cursor: pointer; font-family: inherit; }
.btn-sm { flex: 1; padding: 8px; min-height: 44px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: opacity .2s; font-family: inherit; }  /* min-height は指で押せる最小サイズ */
.btn-sm:active { opacity: .8; }
.btn-sm-primary { background: var(--peach-deep); color: white; }
.btn-sm-danger { background: var(--danger-lt); color: var(--rose); border: 1px solid var(--danger-border); }
.btn-sm-secondary { background: var(--surface2); color: var(--ink2); border: .5px solid var(--border); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; }
.badge-peach { background: var(--peach-lt); color: var(--peach); }
.badge-cool  { background: var(--snow); color: var(--alpine); }
.badge-ok    { background: var(--ok-lt);    color: var(--ok); }
.badge-purple { background: var(--purple-lt); color: var(--purple); }

/* Toast */
.toast-wrap { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: 100%; max-width: 480px; padding: 0 16px; }
.toast { background: var(--toast-bg); color: var(--toast-text); padding: 11px 18px; border-radius: 50px; font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--ok-deep); color: var(--on-strong); }
.toast.error { background: var(--rose-deep); color: var(--on-strong); }
.toast.info { background: var(--dusk); color: var(--on-strong); }

/* Loading / Empty */
.loading-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 16px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--peach); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: var(--ink3); }
.empty-state { text-align: center; padding: 48px 20px; color: var(--ink3); }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; }
.empty-sub { font-size: 13px; line-height: 1.5; }

.leaflet-control-attribution { font-size: 9px !important; }

/* ── 天気カード（ゲレンデタブ）── */
.weather-card {
  margin: 0 16px 14px;
  /* 暖色のまま残す。直上のゲレンデヒーローが雪の寒色なので、
     ここを寒色にすると画面から朝焼けの色が消えてしまう。対比が効くのは暖色との組み合わせ。 */
  background: linear-gradient(160deg, var(--weather-bg-1) 0%, var(--weather-bg-2) 100%);
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
}
.weather-loading, .weather-empty {
  text-align: center; padding: 18px 8px; color: var(--ink3); font-size: 12px;
}
.weather-empty code {
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--peach);
}
.weather-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.weather-icon { width: 64px; height: 64px; display: block; flex-shrink: 0; }
.weather-temp-block { flex: 1; }
.weather-temp {
  font-family: var(--font-data); font-size: 44px; font-weight: 600;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.weather-temp-unit { font-size: 22px; color: var(--ink2); margin-left: 2px; }
.weather-desc { font-size: 12px; color: var(--ink2); margin-top: 4px; }
.weather-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding-top: 12px; border-top: .5px solid var(--subtle-line);
}
.weather-stat { text-align: center; }
.weather-stat-label {
  font-size: 9px; color: var(--ink2); letter-spacing: .12em;
  font-family: var(--font-data); font-weight: 600;
}
.weather-stat-val {
  font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 4px;
  font-family: var(--font-data);
}
.weather-stat-val span {
  font-size: 10px; font-weight: 500; color: var(--ink2);
  margin-left: 2px; font-family: inherit;
}

/* ── ルート候補の比較 ── */
.route-options { margin: 0 16px 18px; }
.route-opt {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 9px;
}
.route-opt-head { min-height: 20px; }
.route-opt-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.route-tag {
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 6px; color: #fff; letter-spacing: .02em;
}
.route-tag.fast  { background: var(--peach-deep); }
.route-tag.cheap { background: var(--ok-deep); }
/* 回り方の印。速い・安いの評価ではないので、色は主張させず枠線だけにする */
/* ── 出発前チェック ── */
.pre-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 16px 11px; border-bottom: .5px solid var(--border);
}
.pre-head-count { font-size: 13px; font-weight: 700; color: var(--accent-text); font-family: var(--font-data); }
.pre-head-note  { font-size: 10.5px; color: var(--ink3); }
.pre-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 56px;
  border-bottom: .5px solid var(--border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pre-row:active { background: var(--peach-lt); }
.pre-check {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: transparent;
}
.pre-row.done .pre-check { background: var(--ok-deep); border-color: var(--ok-deep); color: #fff; }
.pre-body { flex: 1; min-width: 0; }
.pre-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.pre-row.done .pre-title { color: var(--ink2); }
.pre-sub { font-size: 10.5px; color: var(--ink2); margin-top: 2px; line-height: 1.5; }
.pre-row.done .pre-sub { color: var(--ok); font-weight: 600; }
.pre-open {
  flex-shrink: 0; min-height: 44px; display: flex; align-items: center;
  padding: 0 10px; font-size: 11.5px; font-weight: 700;
  color: var(--accent-text); text-decoration: none;
}
.pre-foot {
  padding: 11px 16px 13px; font-size: 10px; color: var(--ink3); line-height: 1.6;
}

/* 候補を選ぶボタン。指で押せるよう44px確保する */
.route-opt-use {
  display: block; width: 100%; margin-top: 12px; min-height: 44px;
  border: 1.5px solid var(--peach); border-radius: 10px;
  background: var(--surface); color: var(--accent-text);
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.route-opt-use:active { background: var(--peach-lt); }
/* いま表示中の候補。押せるボタンは出さず、状態だけ示す */
.route-opt.in-use { border-color: var(--peach); background: var(--peach-lt); }
.route-opt-used {
  margin-top: 12px; text-align: center; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--accent-text);
}

.route-tag.via {
  background: transparent; color: var(--ink2);
  border: 1px solid var(--border); font-weight: 600;
}

.route-opt-nums {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 10px;
}
.route-opt-cell { text-align: center; }
.route-opt-label {
  font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--ink2);
}
.route-opt-val {
  font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.route-opt-roads {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  line-height: 1.5;
}
.route-opt-hw {
  font-size: 10px; color: var(--ink2); margin-top: 3px;
  font-family: var(--font-data);
}
.route-opt-note {
  font-size: 9.5px; color: var(--ink2); line-height: 1.65;
  text-align: center; padding: 6px 4px 0;
}

/* ── レシート写真（割り勘）── */
.receipt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;   /* 指で押せる最小サイズ */
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 14px;
  font-family: inherit; padding: 0; line-height: 1;
}
.receipt-btn.has { background: var(--peach-lt); border-color: var(--peach); }
.receipt-btn:active { filter: brightness(.95); }
.receipt-full {
  display: block; width: 100%; max-height: 62vh;
  object-fit: contain; border-radius: 12px;
  background: var(--surface2);
}

/* ── 日帰り温泉（Google Places）── */
.onsen-card { margin: 0 16px 14px; }
.onsen-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 8px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.onsen-item:active { background: var(--surface2); }
.onsen-body { flex: 1; min-width: 0; }
.onsen-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onsen-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--ink2); margin-top: 3px;
}
.onsen-rating { font-weight: 700; color: var(--peach); }
.onsen-open   { color: var(--ok); font-weight: 600; }
.onsen-closed { color: var(--ink3); }
.onsen-arrow { font-size: 14px; color: var(--peach); font-weight: 700; flex-shrink: 0; }
.onsen-empty { padding: 20px 8px; text-align: center; font-size: 12px; color: var(--ink2); }
.onsen-note { font-size: 9.5px; color: var(--ink2); text-align: center; padding-top: 4px; }

/* ── 雪の状況（気象庁アメダス）── */
.snow-card {
  margin: 0 16px 14px;
  background: linear-gradient(160deg, var(--snow) 0%, var(--snow-mid) 100%);
  border: 1px solid var(--snow-shadow);
  border-radius: 18px;
  padding: 16px 18px;
}
.snow-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
/* 区域を特定できていない警報に添える断り書き。バッジの下に回り込ませる */
.snow-warn-scope {
  flex-basis: 100%; font-size: 10.5px; color: var(--ink2); line-height: 1.5;
}
.snow-warn {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px;
  color: #fff; letter-spacing: .02em;
}
.snow-warn-advis { background: var(--alpine-deep); }
.snow-warn-warn  { background: var(--peach-deep); }
.snow-warn-emerg { background: var(--rose-deep); }

.snow-main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-bottom: 13px; border-bottom: 1px solid var(--snow-line);
}
.snow-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink2);
}
.snow-depth, .snow-fresh {
  display: flex; align-items: baseline; gap: 3px; margin-top: 3px;
  font-size: 34px; font-weight: 700; color: var(--ink);
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.snow-fresh.is-snowing { color: var(--alpine); }
.snow-unit { font-size: 13px; font-weight: 600; color: var(--ink2); }

.snow-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 12px;
}
.snow-cell { text-align: center; }
.snow-cell-label {
  font-size: 9px; font-weight: 600; letter-spacing: .1em; color: var(--ink2);
}
.snow-cell-val {
  font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.snow-off { text-align: center; padding: 6px 0 2px; }
.snow-off-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.snow-off-sub { font-size: 11.5px; color: var(--ink2); margin-top: 4px; line-height: 1.6; }

.snow-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--snow-line);
  font-size: 9.5px; color: var(--ink2); line-height: 1.6;
}
.snow-caveat { margin-top: 3px; }

/* ── 5日間予報（ゲレンデタブ）── */
.forecast-card {
  margin: 0 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px 14px 10px;
  overflow: hidden;
}
.fc-row {
  display: grid;
  grid-template-columns: 54px 40px 1fr auto;
  align-items: center; gap: 8px;
  padding: 8px 2px;
  border-bottom: .5px solid var(--border);
}
.fc-row:last-of-type { border-bottom: none; }
.fc-row.today { background: var(--peach-lt); border-radius: 10px; padding-left: 8px; padding-right: 8px; }

.fc-day { display: flex; flex-direction: column; line-height: 1.25; }
.fc-date {
  font-size: 12px; font-weight: 600; color: var(--ink);
  font-family: var(--font-data); letter-spacing: -.02em;
}
.fc-dow { font-size: 10px; color: var(--ink2); font-weight: 600; }
.fc-dow.sat { color: var(--alpine); }
.fc-dow.sun { color: var(--rose); }

.fc-icon { width: 40px; height: 40px; display: block; flex-shrink: 0; }

.fc-temps { display: flex; align-items: baseline; gap: 8px; }
.fc-max {
  font-size: 16px; font-weight: 700; color: var(--ink);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
.fc-min {
  font-size: 13px; font-weight: 600; color: var(--ink2);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}

.fc-precip {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; line-height: 1.2; white-space: nowrap;
}
.fc-snow { font-size: 11.5px; font-weight: 700; color: var(--alpine); }
.fc-rain { font-size: 11.5px; font-weight: 600; color: var(--ink2); }
.fc-none { font-size: 11.5px; color: var(--ink3); }
.fc-pop {
  font-size: 9.5px; color: var(--ink2);
  font-family: var(--font-data); letter-spacing: .04em;
}

.fc-note {
  font-size: 9.5px; color: var(--ink2); line-height: 1.6;
  padding: 8px 2px 2px; border-top: .5px solid var(--border); margin-top: 4px;
}
.fc-error { font-size: 12px; color: var(--ink2); }

/* ── 現在地ボタン（ゲレンデ検索） ── */
.btn-locate {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px; padding: 12px;
  min-height: 44px;                            /* 指で押せる最小サイズ */
  background: var(--snow); color: var(--alpine);
  border: 1px solid var(--snow-shadow); border-radius: 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-locate:active { background: var(--snow-shadow); }
.btn-locate svg { flex-shrink: 0; }

/* ── 公式リンクリスト ── */
.link-list { margin: 0 16px 18px; }
.link-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 8px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.link-item:active { background: var(--surface2); }
.link-icon { font-size: 22px; flex-shrink: 0; }
.link-body { flex: 1; min-width: 0; }
.link-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.link-sub { font-size: 11px; color: var(--ink2); margin-top: 2px; }
.link-arrow { font-size: 14px; color: var(--peach); font-weight: 700; }

/* ── コースマップ画像エリア ── */
.course-map-card {
  margin: 0 16px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.course-map-img { width: 100%; display: block; }
.course-map-actions {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--border); background: var(--surface2);
}
.course-map-empty { padding: 32px 20px; text-align: center; }

/* 座標を持つ地点が1つも無いとき（共有された旅程など）の地図の代わり */
.map-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 24px;
  font-size: 12px; color: var(--ink2); text-align: center;
  background: var(--surface2);
}

.course-map-meta {
  padding: 8px 14px; font-size: 10px; color: var(--ink2);
  border-top: 1px solid var(--border); background: var(--surface2);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.course-map-empty code {
  display: inline-block; background: var(--code-bg); padding: 2px 6px;
  border-radius: 4px; font-family: var(--font-mono);
  font-size: 9.5px; color: var(--peach);
}

/* ── Walica風 割り勘 ── */
.split-form-field { margin-bottom: 12px; }
.split-form-label {
  display: block; font-size: 10px; font-weight: 600; color: var(--ink2);
  letter-spacing: .12em; margin-bottom: 6px; text-transform: uppercase;
}
.split-targets {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.split-target-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 100px; cursor: pointer; font-size: 12px;
  background: var(--surface); transition: all .15s;
  user-select: none;
}
.split-target-chip input { display: none; }
.split-target-chip:has(input:checked) {
  background: var(--peach-deep); color: white; border-color: var(--peach-deep);
}
.split-target-chip span { font-weight: 500; }
.split-target-quick {
  flex: 1; padding: 7px 12px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface2);
  font-size: 11px; font-weight: 600; color: var(--ink2); cursor: pointer;
}
.split-target-quick:active { background: var(--border); }

/* 精算 row */
.settle-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: .5px solid var(--border);
}
.settle-row:last-child { border-bottom: none; }
.settle-from {
  font-size: 13px; font-weight: 600; color: var(--rose); text-align: right;
}
.settle-to {
  font-size: 13px; font-weight: 600; color: var(--ok); text-align: left;
}
.settle-arrow {
  width: 18px; height: 18px; color: var(--ink3); flex-shrink: 0;
}
.settle-amt {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: 0; white-space: nowrap;
}

/* 各人収支 row */
.balance-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: .5px solid var(--border);
}
.balance-row:last-child { border-bottom: none; }
.balance-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.balance-val {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; letter-spacing: 0;
  white-space: nowrap;
}
.balance-sub {
  font-size: 9.5px; color: var(--ink2); margin-top: 1px;
  letter-spacing: .08em; font-family: var(--font-mono);
}

.course-map-pdf {
  width: 100%; height: 480px; display: block; border: none;
  background: var(--surface2);
}

/* ── PC typography scale ───────────────────────────────
   モバイルの情報密度は維持し、視距離が離れるPCだけを一段大きくする。
   地図の著作権表記を除き、意味のある文字は原則11px未満にしない。 */
@media (min-width: 900px) {
  /* サイドバー／トップバー */
  .pc-sidebar { width: 236px; }
  .pc-sb-logo-name { font-size: 16px; }
  .pc-sb-logo-tag,
  .pc-sb-section-label,
  .pc-sb-trip-label { font-size: 11px; }
  .pc-nav-btn { font-size: 15px; padding-top: 13px; padding-bottom: 13px; }
  .pc-sb-trip-name { font-size: 15px; }
  .pc-sb-trip-meta,
  .pc-sb-trip-count { font-size: 12px; line-height: 1.5; }

  .pc-topbar { height: 72px; }
  .pc-tb-eyebrow { font-size: 11px; }
  .pc-tb-title { font-size: 23px; }
  .pc-tb-sub { font-size: 15px; }

  /* 共通の見出し／カード／ボタン */
  .eyebrow { font-size: 12px; margin-bottom: 7px; }
  .h1 { font-size: 32px; line-height: 1.2; margin-bottom: 18px; }
  .card { padding: 22px 24px; }
  .card-title { font-size: 13px; margin-bottom: 16px; }
  .btn-sm { min-height: 42px; padding: 10px 14px; font-size: 14px; }
  .btn-primary,
  .btn-cancel { font-size: 16px; }
  .badge { font-size: 12px; padding: 3px 9px; }
  .toast,
  .loading-text { font-size: 14px; }
  .empty-title { font-size: 18px; }
  .empty-sub { font-size: 14px; line-height: 1.65; }

  /* ホーム */
  .hero-eyebrow,
  .hero-label { font-size: 11px; }
  .hero-greet { font-size: 25px; }
  .hero-resort { font-size: 44px; }
  .hero-resort-en { font-size: 13px; }
  .hero-pill { font-size: 12px; }
  .hero-pill span { font-size: 16px; }
  .hero-cta { min-height: 48px; padding: 0 20px; font-size: 14px; }
  .home-quote { font-size: 20px; line-height: 1.65; }

  .stat-row { padding: 16px 0; gap: 16px; }
  .stat-num { width: 26px; font-size: 11px; }
  .stat-label { font-size: 15px; }
  .stat-sub { font-size: 12px; line-height: 1.5; }
  .stat-val { font-size: 24px; }
  .stat-unit { font-size: 12px; }
  .member-chip-name { font-size: 13px; }

  /* 検索／旅程 */
  .field-row { padding: 17px 0; }
  .field-label { font-size: 11px; margin-bottom: 5px; }
  .field-input,
  .field-select { font-size: 16px; }
  .autocomplete-item { font-size: 15px; padding: 14px 18px; }
  .autocomplete-item-sub { font-size: 12px; }
  .btn-search { font-size: 16px; min-height: 52px; }
  .search-note { font-size: 12px; line-height: 1.6; }
  .trip-discount-note { font-size: 12px; }
  .pickup-toggle-label { font-size: 15px; }
  .pickup-member-name { font-size: 14px; }
  .pickup-member-addr { font-size: 12px; }
  .pickup-no-members { font-size: 14px; }
  .seg-btn { font-size: 14px; padding: 12px; }

  .result-hero { padding: 22px 24px; }
  .result-time-label,
  .result-stat-lbl { font-size: 11px; }
  .result-time-value { font-size: 32px; }
  .result-arrive-range { font-size: 27px; }
  .result-stat-val { font-size: 20px; }
  .result-stat-val-range { font-size: 15px; }
  .result-stat-unit { font-size: 11px; }
  .route-card { padding: 20px 24px; }
  .route-card-header { font-size: 13px; }
  .route-time-val { font-size: 30px; }
  .route-time-loc { font-size: 12px; }
  .route-line-label { font-size: 11px; }

  .tl-time { font-size: 13px; }
  .tl-label { font-size: 12px; max-width: 82px; }
  .itin-time { font-size: 12px; }
  .itin-label { font-size: 14px; }
  .pksched-time,
  .pksched-name { font-size: 14px; }
  .pksched-sub,
  .pksched-ready { font-size: 12px; }
  .recommend-title { font-size: 14px; }
  .recommend-list li { font-size: 13px; line-height: 1.55; }

  /* 割り勘 */
  .split-hero-label { font-size: 11px; }
  .split-hero-amount { font-size: 42px; }
  .split-hero-sub { font-size: 12px; }
  .split-label-text { font-size: 15px; }
  .split-who-name { font-size: 12px; }
  .split-amount { font-size: 18px; }
  .split-input { font-size: 16px; }
  .split-select,
  .btn-split-add { font-size: 14px; }
  .split-form-label { font-size: 11px; }
  .split-target-chip { font-size: 13px; }
  .split-target-quick { font-size: 12px; }
  .settle-from,
  .settle-to { font-size: 14px; }
  .settle-amt { font-size: 17px; }
  .balance-name { font-size: 15px; }
  .balance-val { font-size: 18px; }
  .balance-sub { font-size: 11px; }

  /* 滑走ログ／メンバー／設定 */
  .log-stat-label,
  .log-season-label { font-size: 12px; }
  .log-entry { padding: 18px 20px; }
  .log-entry-date { font-size: 12px; }
  .log-entry-resort { font-size: 19px; }
  .log-badge { font-size: 12px; }
  .log-entry-members { font-size: 13px; }
  .log-entry-notes { font-size: 14px; }
  .btn-record { font-size: 15px; }
  .log-pill { font-size: 14px; }
  .member-name { font-size: 16px; }
  .member-addr { font-size: 13px; }
  .settings-section-title { font-size: 12px; }
  .settings-item { padding: 17px 18px; }
  .settings-name { font-size: 16px; font-weight: 600; }
  .settings-desc { font-size: 13px; }
  .settings-value { font-size: 15px; }

  /* モーダル */
  .modal-title { font-size: 20px; }
  .form-label { font-size: 12px; }
  .form-input { font-size: 16px; }

  /* ゲレンデ／天気／コースマップ */
  .mountain-hero-label { font-size: 11px; }
  .mountain-hero-coords { font-size: 12px; }
  .weather-loading,
  .weather-empty { font-size: 14px; }
  .weather-empty code { font-size: 11px; }
  .weather-temp { font-size: 48px; }
  .weather-desc { font-size: 14px; }
  .weather-stat-label { font-size: 11px; }
  .weather-stat-val { font-size: 18px; }
  .weather-stat-val span { font-size: 11px; }
  .fc-date { font-size: 14px; }
  .fc-dow { font-size: 12px; }
  .fc-max { font-size: 18px; }
  .fc-min { font-size: 15px; }
  .fc-snow,
  .fc-rain,
  .fc-none { font-size: 12.5px; }
  .fc-pop { font-size: 11px; }
  .fc-note,
  .fc-error { font-size: 12px; }
  .link-title { font-size: 15px; }
  .link-sub { font-size: 13px; }
  .course-map-meta { font-size: 11px; }
  .course-map-empty code { font-size: 11px; }
}

/* ===== ゲレンデパスへの外部リンク（ナビ） ===== */
.nav-btn-ext { text-decoration: none; opacity: .78; }
.nav-btn-ext:hover { opacity: 1; }

/* 左端の区切り線。
   ここから右はスワイプで行き来できる4タブの外側（別アプリへの外部リンク）で、
   レンズも入ってこない。それが見て分かるように境界を引く。
   幅を持たせるとタブの等分がずれるので、擬似要素で重ねる。
   色は --border を使うので、3つの表示モードにそのまま追従する。 */
.nav-btn-ext::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: var(--border);
  pointer-events: none;
}

/* 停める場所（駐車場が複数あるスキー場だけ表示） */
.parking-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.parking-chip {
  padding: 9px 14px; border-radius: 100px; cursor: pointer;
  min-height: 44px;                            /* 指で押せる最小サイズ */
  border: 1.5px solid var(--border); background: var(--surface2); color: var(--ink2);
  font-family: inherit; font-size: 12px; font-weight: 600;
  transition: all .18s;
}
.parking-chip:hover { border-color: var(--peach); color: var(--accent-text); }
.parking-chip.active { background: var(--peach-deep); border-color: var(--peach-deep); color: #fff; }
.parking-note { font-size: 10px; color: var(--ink3); margin-top: 5px; line-height: 1.5; }

/* 空状態のアイコンを線画にする。絵文字は端末ごとに絵柄が変わるうえ、
   他が線画アイコンで統一されている中で1つだけ浮いていた。 */
.empty-icon--svg { color: var(--snow-shadow); }
.empty-icon--svg svg { width: 52px; height: 52px; display: block; margin: 0 auto; }

/* ===== Wakuwaku home ===== */

/* 共通の意味変数。各モードは同じ骨格のまま、ここで意味変数を切り替える。 */
.wakuwaku-shell,
.wk-mode-panel,
.wk-picks-panel {
  --wk-font-heading: var(--font-editorial);
  --wk-font-body: var(--font-sans);
  --wk-font-data: var(--font-data);
}

.wakuwaku-shell[data-wakuwaku-mode="dark"],
.wk-mode-panel[data-wakuwaku-mode="dark"],
.wk-picks-panel[data-wakuwaku-mode="dark"],
body.wakuwaku-home[data-wakuwaku-mode="dark"] {
  --wk-bg: #0b1020;
  --wk-surface: #121a30;
  --wk-surface-strong: #18223b;
  --wk-text: #f4f1ea;
  --wk-muted: #a4acc2;
  --wk-line: rgba(255, 255, 255, .13);
  --wk-accent: #e8956b;
  --wk-accent-text: #20130f;
  --wk-highlight: #f2b183;
  --wk-radius-card: 22px;
  --wk-shadow-card: 0 24px 54px rgba(2, 6, 18, .34);
  --wk-border-width: .5px;
}

.wk-mode-panel[data-wakuwaku-mode="light"],
.wk-picks-panel[data-wakuwaku-mode="light"],
.wk-confirmed[data-wakuwaku-mode="light"],
.wk-share-screen[data-wakuwaku-mode="light"],
body.wakuwaku-home[data-wakuwaku-mode="light"] {
  --wk-bg: #f1efe8;
  --wk-surface: rgba(22, 24, 28, .06);
  --wk-surface-strong: #16181c;
  --wk-text: #16181c;
  --wk-muted: #6a6b73;
  --wk-line: rgba(22, 24, 28, .24);
  --wk-accent: #b8410f;
  --wk-accent-text: #fdf7ee;
  --wk-highlight: #cc4a13;
  --wk-radius-card: 0;
  --wk-shadow-card: 0 26px 60px rgba(23, 24, 28, .18);
  --wk-border-width: .5px;
  --wk-font-heading: var(--font-sans);
  --wk-font-body: var(--font-sans);
  --wk-font-data: var(--font-data);
}
.wk-mode-panel[data-wakuwaku-mode="sticker"],
.wk-picks-panel[data-wakuwaku-mode="sticker"],
.wk-confirmed[data-wakuwaku-mode="sticker"],
.wk-share-screen[data-wakuwaku-mode="sticker"],
body.wakuwaku-home[data-wakuwaku-mode="sticker"] {
  --wk-bg: #f7f5f0;
  --wk-surface: #fff;
  --wk-surface-strong: #1b46d6;
  --wk-text: #101114;
  --wk-muted: #6d6e74;
  --wk-line: #101114;
  --wk-accent: #1b46d6;
  --wk-accent-text: #fff;
  --wk-highlight: #f5c518;
  --wk-radius-card: 21px;
  --wk-shadow-card: 5px 5px 0 #101114;
  --wk-border-width: 2px;
  --wk-font-heading: var(--font-sans);
  --wk-font-body: var(--font-sans);
  --wk-font-data: 'Archivo Black', var(--font-sans);
}

body.wakuwaku-home[data-wakuwaku-mode="dark"],
body.wakuwaku-home[data-wakuwaku-mode="dark"] #app,
body.wakuwaku-home[data-wakuwaku-mode="dark"] .main-content {
  background: var(--wk-bg);
}

.wakuwaku-shell {
  min-height: 100%;
  padding: 22px max(20px, var(--safe-right)) 36px max(20px, var(--safe-left));
  color: var(--wk-text);
  background: var(--wk-bg);
  font-family: var(--wk-font-body);
}

.wk-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.wk-season {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1.4;
  text-transform: uppercase;
}
.wk-title {
  margin-top: 8px;
  color: var(--wk-text);
  font-family: var(--wk-font-heading);
  font-size: clamp(29px, 9vw, 38px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.wk-mode-button {
  display: inline-flex;
  min-width: 98px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: var(--wk-muted);
  cursor: pointer;
  font-family: var(--wk-font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
}
.wk-header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.wk-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wk-accent);
  box-shadow: 0 0 16px rgba(232, 149, 107, .7);
}

.wk-hero-card {
  position: relative;
  height: clamp(260px, 61vw, 340px);
  overflow: hidden;
  border: var(--wk-border-width) solid rgba(255, 255, 255, .11);
  border-radius: var(--wk-radius-card);
  background: var(--wk-surface);
  box-shadow: var(--wk-shadow-card);
  isolation: isolate;
}
.wk-hero-placeholder {
  position: absolute;
  inset: 0;
  /* 写真を敷き、下地にグラデーションを残す。
     写真が読めない状況（初回オフラインなど）でも見た目が崩れないようにするため。 */
  background:
    url('../img/wakuwaku/resort-panorama.webp') center 62% / cover no-repeat,
    linear-gradient(180deg, #111a33 0%, #293655 48%, #875d50 77%, #d38e65 100%);
  transform: scale(1.015);
  transition: transform .6s ease;
}
.wk-hero-card:hover .wk-hero-placeholder { transform: scale(1.035); }
.wk-hero-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px 21px 21px;
  background: linear-gradient(180deg, rgba(4, 8, 20, .04) 30%, rgba(4, 8, 20, .8) 100%);
}
.wk-hero-region {
  color: rgba(255, 255, 255, .7);
  font-family: var(--wk-font-data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.wk-hero-name {
  max-width: 100%;
  margin-top: 8px;
  color: #fff;
  font-family: var(--wk-font-heading);
  font-size: clamp(25px, 7.7vw, 36px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.wk-hero-note {
  margin-top: 10px;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
  letter-spacing: .04em;
}

.wk-primary {
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  padding: 0 19px 0 22px;
  border: none;
  border-radius: 999px;
  background: var(--wk-accent);
  color: var(--wk-accent-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wk-font-body);
  font-size: 16px;
  font-weight: 700;
  transition: background .15s, transform .15s;
}
.wk-primary:hover { background: var(--wk-highlight); }
.wk-primary:active { transform: translateY(1px); }
.wk-primary svg { width: 21px; height: 21px; }

.wk-candidates { margin-top: 18px; }
.wk-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 8px;
  border-bottom: var(--wk-border-width) solid var(--wk-line);
}
.wk-section-heading-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.wk-section-heading h2 {
  color: var(--wk-muted);
  font-family: var(--wk-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wk-section-heading span {
  color: var(--wk-muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
}
.wk-candidate-edit {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 13px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 999px;
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  font: 600 12px var(--wk-font-body);
}
.wk-candidate {
  width: 100%;
  min-height: 50px;
  padding: 7px 8px;
  border: none;
  border-bottom: var(--wk-border-width) solid var(--wk-line);
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--wk-font-body);
  text-align: left;
  transition: background .15s, padding .15s;
}
.wk-candidate:hover { background: rgba(255, 255, 255, .045); padding-left: 13px; padding-right: 13px; }
.wk-candidate.is-selected { color: #fff; }
.wk-candidate-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.wk-candidate-name {
  font-family: var(--wk-font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.wk-candidate-region {
  color: var(--wk-muted);
  font-family: var(--wk-font-data);
  font-size: 10px;
  letter-spacing: .09em;
}
.wk-candidate-state {
  flex: 0 0 auto;
  min-width: 54px;
  color: var(--wk-muted);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.wk-candidate.is-selected .wk-candidate-state { color: var(--wk-accent); }
.wk-empty {
  padding: 48px 20px;
  color: var(--wk-muted);
  font-size: 14px;
  text-align: center;
}

/* 5候補でも一般的なスマホ高ではホーム全体が見える密度にする。 */
.wakuwaku-shell:has(.wk-candidate:nth-child(5)) {
  padding-top: 16px;
  padding-bottom: 24px;
}
.wakuwaku-shell:has(.wk-candidate:nth-child(5)) .wk-header { margin-bottom: 12px; }
.wakuwaku-shell:has(.wk-candidate:nth-child(5)) .wk-hero-card { height: clamp(188px, 48vw, 220px); }
.wakuwaku-shell:has(.wk-candidate:nth-child(5)) .wk-primary { min-height: 50px; margin-top: 12px; }
.wakuwaku-shell:has(.wk-candidate:nth-child(5)) .wk-candidates { margin-top: 12px; }

.wk-mode-panel {
  color: var(--wk-text);
  font-family: var(--wk-font-body);
}
body.wakuwaku-home .modal:has(.wk-mode-panel),
body.wakuwaku-home .modal.wk-picks-modal {
  border: var(--wk-border-width) solid var(--wk-line);
  background: var(--wk-surface);
  color: var(--wk-text);
}

.modal.wk-picks-modal {
  max-width: 700px;
  padding: 22px 20px max(24px, var(--safe-bottom));
}
.wk-picks-panel {
  color: var(--wk-text);
  font-family: var(--wk-font-body);
}
.wk-picks-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.wk-picks-head h2 {
  margin-top: 6px;
  font: 600 25px/1.2 var(--wk-font-heading);
}
.wk-picks-x {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 50%;
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
}
.wk-picks-x svg { display: block; width: 100%; height: 100%; }
.wk-picks-count {
  margin-top: 9px;
  color: var(--wk-muted);
  font-size: 11px;
  line-height: 1.5;
}
.wk-picks-current {
  margin-top: 18px;
  padding: 13px 14px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 14px;
  background: var(--wk-surface);
}
.wk-picks-current h3,
.wk-pick-search-label {
  display: block;
  color: var(--wk-muted);
  font: 600 10px/1.4 var(--wk-font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wk-picks-current > div {
  max-height: 154px;
  margin-top: 7px;
  overflow-y: auto;
}
.wk-pick-current,
.wk-pick-result {
  width: 100%;
  min-height: 48px;
  padding: 7px 2px;
  border: 0;
  border-bottom: var(--wk-border-width) solid var(--wk-line);
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: inherit;
  text-align: left;
}
.wk-pick-current:last-child,
.wk-pick-result:last-child { border-bottom: 0; }
.wk-pick-current > span,
.wk-pick-result > span { min-width: 0; }
.wk-pick-current strong,
.wk-pick-current small,
.wk-pick-result strong,
.wk-pick-result small { display: block; }
.wk-pick-current strong,
.wk-pick-result strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}
.wk-pick-current small,
.wk-pick-result small {
  margin-top: 2px;
  color: var(--wk-muted);
  font-size: 10px;
}
.wk-pick-current em,
.wk-pick-result em {
  flex: 0 0 auto;
  color: var(--wk-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.wk-pick-result.is-selected em { color: var(--wk-accent); }
.wk-pick-search-label { margin-top: 18px; }
.wk-pick-search {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 0 14px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 12px;
  outline: none;
  background: var(--wk-surface);
  color: var(--wk-text);
  font: 400 16px var(--wk-font-body);
}
.wk-pick-search:focus { border-color: var(--wk-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wk-accent) 24%, transparent); }
.wk-pick-results {
  max-height: min(34vh, 290px);
  margin-top: 9px;
  overflow-y: auto;
  border-top: var(--wk-border-width) solid var(--wk-line);
}
.wk-pick-empty {
  padding: 18px 4px;
  color: var(--wk-muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.wk-picks-close { margin-top: 14px; }
.wk-mode-kicker {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
}
.wk-mode-title {
  margin-top: 7px;
  font-family: var(--wk-font-heading);
  font-size: 25px;
  font-weight: 600;
}
.wk-mode-options { margin-top: 20px; }
.wk-mode-option {
  width: 100%;
  min-height: 62px;
  padding: 11px 14px;
  border: none;
  border-bottom: var(--wk-border-width) solid var(--wk-line);
  background: transparent;
  color: var(--wk-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: inherit;
  text-align: left;
}
.wk-mode-option > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.wk-mode-option strong { color: var(--wk-text); font-size: 15px; }
.wk-mode-option small { color: var(--wk-muted); font-size: 11px; }
.wk-mode-option > span:last-child { font-size: 11px; font-weight: 600; }
.wk-mode-option.is-current > span:last-child { color: var(--wk-accent); }
.wk-mode-option:disabled { cursor: not-allowed; opacity: .5; }
.wk-mode-close {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 999px;
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

.wk-mode-button:focus-visible,
.wk-primary:focus-visible,
.wk-candidate:focus-visible,
.wk-candidate-edit:focus-visible,
.wk-mode-option:focus-visible,
.wk-mode-close:focus-visible,
.wk-picks-x:focus-visible,
.wk-pick-current:focus-visible,
.wk-pick-result:focus-visible {
  outline: 3px solid var(--wk-highlight);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .wakuwaku-shell {
    max-width: 720px;
    margin: 0 auto;
    padding-right: 34px;
    padding-left: 34px;
  }
  .wk-hero-card { height: 348px; }
}

@media (min-width: 900px) {
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sidebar {
    border-color: var(--wk-line);
    background: #0d1426;
  }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-topbar {
    border-color: var(--wk-line);
    background: rgba(11, 16, 32, .9);
  }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-logo-name,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-trip-name {
    color: var(--wk-text);
  }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-logo-tag,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-section-label,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-nav-btn,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-trip-label,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-trip-meta,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-trip-count,
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-tb-eyebrow {
    color: var(--wk-muted);
  }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-nav-btn:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--wk-text);
  }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-nav-btn.active {
    background: rgba(232, 149, 107, .12);
    color: var(--wk-accent);
  }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-nav-btn.active::before { background: var(--wk-accent); }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-trip { border-color: var(--wk-line); }
  body.wakuwaku-home[data-wakuwaku-mode="dark"] .pc-sb-av { border-color: #0d1426; }

  .wakuwaku-shell {
    padding-top: 26px;
    padding-bottom: 44px;
  }
  .wk-header { margin-bottom: 22px; }
  .wk-title { font-size: 40px; }
  .wk-hero-card { height: 360px; }
  .wk-hero-overlay { padding: 70px 28px 27px; }
  .wk-hero-name { font-size: 38px; }
  .wk-primary { min-height: 58px; }
  .wk-candidate-name { font-size: 17px; }
}

@media (min-width: 1400px) {
  .wakuwaku-shell { max-width: 760px; }
}

@media (max-height: 900px) and (min-width: 900px) {
  .wakuwaku-shell { padding-top: 16px; }
  .wk-header { margin-bottom: 15px; }
  .wk-hero-card { height: 300px; }
  .wk-candidates { margin-top: 16px; }
  .wk-candidate { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-hero-placeholder,
  .wk-primary,
  .wk-candidate { transition: none; }
  .wk-hero-card:hover .wk-hero-placeholder { transform: scale(1.015); }
}

/* ── 画面2：出発を待つ／当日 ─────────────────────── */
.wk-trip-shell {
  --wk-trip-panel: rgba(255, 255, 255, .052);
  --wk-trip-panel-strong: rgba(255, 255, 255, .078);
  padding-top: 18px;
}
.wk-trip-header { margin-bottom: 16px; }
.wk-trip-header .wk-season {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4つのフェーズを、飾りではなく現在地が分かる進行帯として見せる。 */
.wk-phase-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 0 0 14px;
  list-style: none;
}
.wk-phase-step {
  min-width: 0;
  padding: 8px 7px 7px;
  border-top: 2px solid rgba(255, 255, 255, .13);
  color: #717b98;
}
.wk-phase-step.is-passed { border-color: rgba(232, 149, 107, .46); color: #9ba4bb; }
.wk-phase-step.is-active { border-color: var(--wk-accent); color: var(--wk-text); }
.wk-phase-code,
.wk-phase-name { display: block; }
.wk-phase-code {
  font-family: var(--wk-font-data);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}
.wk-phase-name {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
}

.wk-trip-hero {
  position: relative;
  min-height: 224px;
  overflow: hidden;
  padding: 19px 20px 17px;
  border: var(--wk-border-width) solid rgba(255, 255, 255, .15);
  border-radius: var(--wk-radius-card);
  background:
    radial-gradient(ellipse at 78% 112%, rgba(232, 149, 107, .42), transparent 54%),
    linear-gradient(145deg, #111a33 0%, #222e4d 58%, #6e504a 100%);
  box-shadow: var(--wk-shadow-card);
  isolation: isolate;
}
.wk-trip-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: 54px;
  left: -10%;
  height: .5px;
  background: linear-gradient(90deg, transparent, rgba(244, 241, 234, .25), transparent);
}
.wk-trip-hero-label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #d1d5df;
  font-family: var(--wk-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}
.wk-trip-count-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 13px;
  margin-top: 12px;
}
.wk-trip-count-row strong {
  color: var(--wk-accent);
  font-family: var(--wk-font-heading);
  font-size: clamp(62px, 21vw, 86px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
  line-height: .94;
}
.wk-trip-count-row span {
  max-width: 104px;
  padding-bottom: 7px;
  color: var(--wk-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.wk-trip-hero--meeting .wk-trip-count-row strong,
.wk-trip-hero--moving .wk-trip-count-row strong { font-family: var(--wk-font-data); font-size: clamp(52px, 17vw, 72px); }
.wk-trip-hero--onsite .wk-trip-count-row strong { letter-spacing: .01em; }
.wk-trip-hero-note {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  color: #b5bdcf;
  font-size: 10px;
  line-height: 1.45;
}
.wk-trip-departure {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 15px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d7d3ca;
  font-family: var(--wk-font-data);
  font-size: 10px;
  line-height: 1.4;
}
.wk-trip-departure span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--wk-accent);
  vertical-align: middle;
}
.wk-trip-departure span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-trip-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.wk-trip-card {
  padding: 17px 18px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 18px;
  background: var(--wk-trip-panel);
}
.wk-trip-card.is-focus {
  border-color: rgba(232, 149, 107, .42);
  background: linear-gradient(135deg, rgba(232, 149, 107, .095), var(--wk-trip-panel));
}
.wk-trip-card-label,
.wk-snapshot-heading span {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}
.wk-trip-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.wk-trip-card-head > strong {
  color: var(--wk-muted);
  font-size: 11px;
  font-weight: 600;
}

.wk-meeting-pickups {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: var(--wk-border-width) solid var(--wk-line);
}
.wk-meeting-pickups > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
}
.wk-meeting-pickups span {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 11px;
}
.wk-meeting-pickups strong {
  color: var(--wk-text);
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.wk-meeting-pickups small {
  display: inline-block;
  min-width: 74px;
  margin-right: 6px;
  color: var(--wk-muted);
  font-size: 9px;
  font-weight: 500;
}

.wk-member-row {
  display: flex;
  min-height: 43px;
  align-items: center;
  margin-top: 12px;
  padding-left: 3px;
}
.wk-member-avatar {
  width: 42px;
  height: 42px;
  margin-left: -7px;
  border: 2px solid #11192c;
  border-radius: 50%;
  background: var(--wk-member-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.wk-member-avatar:first-child { margin-left: 0; }
.wk-member-avatar.is-lead { background: var(--wk-accent); color: var(--wk-accent-text); }
.wk-member-empty { color: var(--wk-muted); font-size: 11px; }

.wk-schedule-list { margin-top: 12px; }
.wk-schedule-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px 12px minmax(0, 1fr);
  gap: 9px;
  min-height: 49px;
  align-items: start;
}
.wk-schedule-row:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  bottom: -2px;
  left: 53px;
  width: .5px;
  background: var(--wk-line);
}
.wk-schedule-row time {
  color: var(--wk-muted);
  font-family: var(--wk-font-data);
  font-size: 11px;
  font-weight: 600;
}
.wk-schedule-dot {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border: 1px solid #78829c;
  border-radius: 50%;
  background: #10172a;
}
.wk-schedule-row.is-passed .wk-schedule-dot { border-color: #7b849a; background: #7b849a; }
.wk-schedule-row.is-current .wk-schedule-dot {
  border-color: var(--wk-accent);
  background: var(--wk-accent);
  box-shadow: 0 0 0 4px rgba(232, 149, 107, .12);
}
.wk-schedule-row strong,
.wk-schedule-row div span { display: block; }
.wk-schedule-row strong { color: var(--wk-text); font-size: 12px; font-weight: 600; }
.wk-schedule-row div span {
  margin-top: 2px;
  color: var(--wk-muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.wk-schedule-row.is-passed { opacity: .62; }

.wk-moving-card {
  border-color: rgba(232, 149, 107, .42);
  background: linear-gradient(145deg, rgba(232, 149, 107, .11), rgba(255, 255, 255, .045));
}
.wk-moving-time {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.wk-moving-time strong {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 42px;
  line-height: 1;
}
.wk-moving-time span {
  max-width: 95px;
  padding-bottom: 3px;
  color: var(--wk-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.wk-next-stop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding: 11px 0;
  border-top: var(--wk-border-width) solid var(--wk-line);
  border-bottom: var(--wk-border-width) solid var(--wk-line);
}
.wk-next-stop span { color: var(--wk-muted); font-size: 10px; }
.wk-next-stop strong { color: var(--wk-text); font-size: 12px; text-align: right; }
.wk-moving-card p { margin-top: 10px; color: var(--wk-muted); font-size: 10px; line-height: 1.55; }
.wk-travel-arrival {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}
.wk-travel-arrival strong {
  color: var(--wk-text);
  font-family: var(--wk-font-data);
  font-size: 36px;
  letter-spacing: -.04em;
}
.wk-travel-arrival span { color: var(--wk-muted); font-size: 11px; font-weight: 600; }
.wk-travel-preview p { margin-top: 9px; color: var(--wk-muted); font-size: 10px; line-height: 1.5; }

.wk-snapshot-section { padding: 4px 0 0; }
.wk-snapshot-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 0 3px;
}
.wk-snapshot-heading h2 {
  margin-top: 4px;
  color: var(--wk-text);
  font-family: var(--wk-font-heading);
  font-size: 24px;
  font-weight: 600;
}
.wk-snapshot-heading small { color: var(--wk-muted); font-size: 9px; }
.wk-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wk-snapshot-card {
  min-width: 0;
  min-height: 128px;
  padding: 15px;
  border: var(--wk-border-width) solid var(--wk-line);
  border-radius: 16px;
  background: var(--wk-trip-panel-strong);
}
.wk-snapshot-card > span {
  color: var(--wk-muted);
  font-family: var(--wk-font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}
.wk-snapshot-card > strong {
  display: block;
  min-height: 40px;
  margin-top: 10px;
  color: var(--wk-text);
  font-family: var(--wk-font-heading);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.1;
}
.wk-snapshot-card > small {
  display: block;
  margin-top: 7px;
  color: var(--wk-muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wk-trip-actions { padding-top: 2px; }
.wk-trip-primary { margin-top: 0; }
.wk-precheck-status {
  padding: 9px 3px 12px;
  color: var(--wk-muted);
  font-size: 10px;
  text-align: center;
}
.wk-precheck-status strong { color: var(--wk-text); font-family: var(--wk-font-data); }
.wk-action-link {
  width: 100%;
  min-height: 56px;
  padding: 9px 12px;
  border: none;
  border-top: var(--wk-border-width) solid var(--wk-line);
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--wk-font-body);
  text-align: left;
  text-decoration: none;
  transition: background .15s, padding .15s;
}
.wk-action-link:hover { padding-right: 15px; padding-left: 15px; background: rgba(255, 255, 255, .045); }
.wk-action-link span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.wk-action-link small {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}
.wk-action-link strong { font-size: 12px; font-weight: 600; }
.wk-action-link svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--wk-muted); }

.wk-action-link:focus-visible,
.wk-trip-card:focus-visible {
  outline: 3px solid var(--wk-highlight);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .wk-trip-shell { max-width: 680px; }
  .wk-trip-hero { min-height: 242px; padding: 22px 24px 18px; }
  .wk-trip-departure { right: 24px; left: 24px; }
  .wk-trip-card { padding: 20px 22px; }
  .wk-snapshot-card { min-height: 138px; padding: 18px; }
}

@media (min-width: 900px) {
  .wk-trip-shell { padding-top: 22px; padding-bottom: 48px; }
  .wk-trip-header .wk-title { font-size: 38px; }
  .wk-trip-hero { min-height: 250px; }
  .wk-trip-count-row strong { font-size: 84px; }
  .wk-trip-hero--meeting .wk-trip-count-row strong,
  .wk-trip-hero--moving .wk-trip-count-row strong { font-size: 70px; }
}

@media (max-height: 900px) and (min-width: 900px) {
  .wk-trip-shell { padding-top: 12px; }
  .wk-trip-header { margin-bottom: 12px; }
  .wk-phase-rail { margin-bottom: 10px; }
  .wk-trip-hero { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-action-link { transition: none; }
}

/* ダーク時の下部タブは、全タブで同じ共通トークンに追従させる。 */
body[data-wakuwaku-mode="dark"] .bottom-nav {
  background: var(--nav-bg);
  border-top: .5px solid var(--nav-border);
}
body[data-wakuwaku-mode="dark"] .nav-btn { color: var(--nav-ink); }
body[data-wakuwaku-mode="dark"] .nav-btn.active { color: var(--nav-active); }

/* 画面外の余白（アドレスバーの上下やセーフエリア）も背景をそろえる。
   ここが明るいままだと、スクロールの端で色が切り替わって見える。 */
body[data-wakuwaku-mode="dark"] { background: var(--bg); }

/* ── 画面3：日程が確定した瞬間 ── */
.wk-confirmed,
.wk-share-screen {
  --wk-bg: #0b1020;
  --wk-surface: #121a30;
  --wk-surface-strong: #18223b;
  --wk-text: #f4f1ea;
  --wk-muted: #a7aec0;
  --wk-line: rgba(255, 255, 255, .13);
  --wk-accent: #e8956b;
  --wk-accent-text: #20130f;
  --wk-highlight: #f2b183;
  --wk-font-heading: var(--font-editorial);
  --wk-font-body: var(--font-sans);
  --wk-font-data: var(--font-data);
}
.modal-overlay.wk-fullscreen-overlay,
.modal-overlay.wk-share-overlay {
  align-items: stretch;
  background: rgba(3, 6, 15, .88);
}
.modal.wk-fullscreen-modal,
.modal.wk-share-modal {
  width: 100%;
  max-width: 640px;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0b1020;
}
.wk-confirmed {
  position: relative;
  min-height: 100%;
  padding: calc(24px + var(--safe-top)) max(20px, var(--safe-right)) calc(34px + var(--safe-bottom)) max(20px, var(--safe-left));
  background:
    radial-gradient(circle at 100% 0, rgba(232, 149, 107, .12), transparent 30%),
    var(--wk-bg);
  color: var(--wk-text);
  font-family: var(--wk-font-body);
}
.wk-confirmed-close {
  position: absolute;
  z-index: 2;
  top: calc(19px + var(--safe-top));
  right: max(18px, var(--safe-right));
  width: 44px;
  height: 44px;
  padding: 11px;
  border: .5px solid var(--wk-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--wk-muted);
  cursor: pointer;
}
.wk-confirmed-close svg { display: block; width: 100%; height: 100%; }
.wk-confirmed-header { padding: 4px 56px 0 2px; }
.wk-confirmed-kicker {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
}
.wk-confirmed-header h1 {
  margin-top: 7px;
  color: var(--wk-text);
  font-family: var(--wk-font-heading);
  font-size: clamp(32px, 10vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.wk-confirmed-date {
  position: relative;
  margin-top: 20px;
  overflow: hidden;
  padding: 18px 20px 19px;
  border: .5px solid rgba(232, 149, 107, .32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 102%, rgba(232, 149, 107, .3), transparent 42%),
    linear-gradient(145deg, #151f39, #252e4b 62%, #57423f);
  box-shadow: 0 25px 54px rgba(2, 6, 18, .36);
}
.wk-confirmed-date::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 70px;
  left: -18%;
  height: .5px;
  background: linear-gradient(90deg, transparent, rgba(244, 241, 234, .2), transparent);
}
.wk-confirmed-date-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #c3c9d7;
  font-family: var(--wk-font-data);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15em;
}
.wk-confirmed-date-top span:first-child { color: var(--wk-accent); }
.wk-confirmed-date-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-top: 8px;
  color: var(--wk-text);
  font-family: var(--wk-font-heading);
  line-height: .96;
}
.wk-confirmed-date-value strong {
  font-size: clamp(66px, 22vw, 92px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
}
.wk-confirmed-date-value i { color: var(--wk-accent); font-size: 37px; font-style: normal; }
.wk-confirmed-resort {
  position: relative;
  z-index: 1;
  margin-top: 13px;
  color: #fff;
  font-family: var(--wk-font-heading);
  font-size: clamp(19px, 5.8vw, 27px);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.wk-confirmed-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  margin-top: 9px;
  color: #d3d4d8;
  font-size: 11px;
}
.wk-confirmed-route time { color: var(--wk-accent); font-family: var(--wk-font-data); }
.wk-confirmed-route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-confirmed-people,
.wk-confirmed-next { margin-top: 24px; }
.wk-confirmed-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px 9px;
  border-bottom: .5px solid var(--wk-line);
}
.wk-confirmed-section-head h2 {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}
.wk-confirmed-section-head span { color: var(--wk-muted); font-size: 10px; }
.wk-confirmed-member-list {
  display: flex;
  gap: 15px;
  padding: 14px 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wk-confirmed-member-list::-webkit-scrollbar { display: none; }
.wk-confirmed-member {
  min-width: 48px;
  color: var(--wk-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.wk-confirmed-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid #11192c;
  border-radius: 50%;
  background: var(--wk-member-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.wk-confirmed-avatar.is-lead { background: var(--wk-accent); color: var(--wk-accent-text); }
.wk-confirmed-empty { padding: 15px 2px 0; color: var(--wk-muted); font-size: 11px; }
.wk-confirmed-actions { border-bottom: .5px solid var(--wk-line); }
.wk-confirmed-action {
  width: 100%;
  min-height: 65px;
  padding: 10px 5px;
  border: 0;
  border-top: .5px solid var(--wk-line);
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 13px;
  font-family: var(--wk-font-body);
  text-align: left;
  text-decoration: none;
  transition: background .15s, padding .15s;
}
.wk-confirmed-action:first-child { border-top: 0; }
.wk-confirmed-action:hover { padding-right: 10px; padding-left: 10px; background: rgba(255, 255, 255, .045); }
.wk-confirmed-action.is-accent { color: var(--wk-text); }
.wk-confirmed-action > svg { width: 22px; height: 22px; color: var(--wk-muted); }
.wk-confirmed-action.is-accent > svg { color: var(--wk-accent); }
.wk-confirmed-action > svg:last-child { width: 18px; height: 18px; }
.wk-confirmed-action span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.wk-confirmed-action strong { color: inherit; font-size: 13px; font-weight: 600; }
.wk-confirmed-action small { color: var(--wk-muted); font-size: 9px; line-height: 1.4; }

/* ── 画面4：共有・自慢カード ── */
.wk-share-screen {
  min-height: 100%;
  padding: calc(20px + var(--safe-top)) max(18px, var(--safe-right)) calc(26px + var(--safe-bottom)) max(18px, var(--safe-left));
  background: var(--wk-bg);
  color: var(--wk-text);
  font-family: var(--wk-font-body);
}
.wk-share-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wk-share-kicker {
  color: var(--wk-accent);
  font-family: var(--wk-font-data);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
}
.wk-share-header h1 {
  margin-top: 6px;
  font-family: var(--wk-font-heading);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -.03em;
}
.wk-share-header > button {
  width: 44px;
  height: 44px;
  padding: 11px;
  border: .5px solid var(--wk-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--wk-muted);
  cursor: pointer;
}
.wk-share-header svg { display: block; width: 100%; height: 100%; }
.wk-share-preview-wrap { max-width: 430px; margin: 18px auto 0; }
.wk-share-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: .5px solid var(--wks-card-line);
  border-radius: 20px;
  background: var(--wks-card-bg);
  color: var(--wks-card-text);
  box-shadow: 0 26px 58px rgba(0, 0, 0, .34);
}
.wk-share-photo {
  position: absolute;
  inset: 0 0 auto;
  height: 38%;
  background:
    linear-gradient(155deg, transparent 52%, rgba(8, 13, 29, .82) 52.4%, rgba(8, 13, 29, .82) 68%, transparent 68.4%),
    linear-gradient(202deg, transparent 51%, rgba(22, 31, 55, .94) 51.4%, rgba(22, 31, 55, .94) 73%, transparent 73.4%),
    radial-gradient(ellipse at 70% 73%, rgba(244, 171, 124, .56), transparent 48%),
    linear-gradient(180deg, #111a33, #303b5c 56%, #c48161);
}
.wk-share-card-body {
  position: absolute;
  inset: 38% 0 0;
  display: flex;
  flex-direction: column;
  padding: 5.8% 6.6% 5.2%;
  background: linear-gradient(180deg, rgba(11, 16, 32, .92), var(--wks-card-bg) 16%);
}
.wk-share-card-date {
  color: var(--wks-card-accent);
  font-family: var(--font-data);
  font-size: clamp(8px, 2.8vw, 13px);
  font-weight: 600;
  letter-spacing: .09em;
}
.wk-share-card h2 {
  margin-top: 2.2%;
  color: var(--wks-card-text);
  font-family: var(--font-editorial);
  font-size: clamp(19px, 6vw, 30px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.wk-share-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 5%;
  padding-top: 4%;
  border-top: .5px solid var(--wks-card-line);
}
.wk-share-detail { min-width: 0; }
.wk-share-detail span,
.wk-share-card-footer span {
  display: block;
  color: var(--wks-card-muted);
  font-family: var(--font-data);
  font-size: clamp(6px, 1.7vw, 9px);
  font-weight: 600;
  letter-spacing: .08em;
}
.wk-share-detail strong {
  display: block;
  margin-top: 4px;
  color: var(--wks-card-text);
  font-size: clamp(10px, 3vw, 15px);
  line-height: 1.25;
}
.wk-share-notes {
  display: -webkit-box;
  margin-top: 4%;
  overflow: hidden;
  color: var(--wks-card-text);
  font-size: clamp(9px, 2.6vw, 13px);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.wk-share-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: auto;
  padding-top: 4%;
  border-top: .5px solid var(--wks-card-line);
}
.wk-share-card-footer strong {
  display: block;
  margin-top: 4px;
  color: var(--wks-card-text);
  font-size: clamp(8px, 2.5vw, 13px);
  line-height: 1.35;
}
.wk-share-cost { text-align: right; }
.wk-share-cost strong {
  color: var(--wks-card-accent);
  font-family: var(--font-data);
  font-size: clamp(15px, 4.4vw, 22px);
}
.wk-share-privacy {
  max-width: 430px;
  margin: 16px auto 0;
  padding: 13px 14px;
  border: .5px solid var(--wk-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
}
.wk-share-privacy strong,
.wk-share-privacy span,
.wk-share-privacy small { display: block; }
.wk-share-privacy strong { color: var(--wk-text); font-size: 11px; }
.wk-share-privacy span { margin-top: 4px; color: var(--wk-muted); font-size: 9px; line-height: 1.55; }
.wk-share-privacy small { margin-top: 4px; color: var(--wk-accent); font-size: 9px; line-height: 1.55; }
.wk-share-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-width: 430px;
  margin: 14px auto 0;
}
.wk-share-buttons:has(.wk-share-save:only-child) { grid-template-columns: 1fr; }
.wk-share-save,
.wk-share-send {
  min-height: 52px;
  padding: 0 15px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--wk-font-body);
  font-size: 13px;
  font-weight: 700;
}
.wk-share-save { border: 0; background: var(--wk-accent); color: var(--wk-accent-text); }
.wk-share-send { border: .5px solid var(--wk-line); background: rgba(255, 255, 255, .045); color: var(--wk-text); }
.wk-share-save svg,
.wk-share-send svg { width: 19px; height: 19px; }

/* 旅程結果の既存ボタン群と分け、記録カードへの入口を1つにする。 */
.wk-share-entry {
  width: calc(100% - 32px);
  min-height: 50px;
  margin: 0 16px 10px;
  padding: 0 17px;
  border: 1px solid #263a58;
  border-radius: var(--radius-sm);
  background: #17243b;
  color: #f4f1ea;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}
.wk-share-entry svg { width: 20px; height: 20px; color: #e8956b; }

.wk-confirmed-close:focus-visible,
.wk-confirmed-action:focus-visible,
.wk-share-header > button:focus-visible,
.wk-share-save:focus-visible,
.wk-share-send:focus-visible,
.wk-share-entry:focus-visible {
  outline: 3px solid #f2b183;
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .modal-overlay.wk-fullscreen-overlay,
  .modal-overlay.wk-share-overlay { align-items: center; padding: 24px; }
  .modal.wk-fullscreen-modal,
  .modal.wk-share-modal {
    max-height: min(900px, calc(100dvh - 48px));
    border: .5px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
  }
  .wk-confirmed { padding-right: 34px; padding-left: 34px; }
  .wk-share-screen { padding-right: 30px; padding-left: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-confirmed-action { transition: none; }
}

/* ── PCダッシュボード：既存のサイドバー／トップバー内に収める ── */
@media (min-width: 900px) {
  body.wakuwaku-home .pc-topbar {
    justify-content: space-between;
    gap: 24px;
  }
  .wk-pc-top-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .wk-pc-top-actions time {
    color: #a7aec0;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .wk-pc-top-actions button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #e8956b;
    color: #21140f;
    cursor: pointer;
    font: 700 13px var(--font-sans);
    transition: background .15s ease-out, transform .15s ease-out;
  }
  .wk-pc-top-actions button:hover { background: #f0a67e; }
  .wk-pc-top-actions button:active { transform: translateY(1px); }

  .wk-pc-dashboard {
    --wk-pc-bg: #0b1020;
    --wk-pc-panel: rgba(255, 255, 255, .052);
    --wk-pc-panel-strong: rgba(255, 255, 255, .075);
    --wk-pc-text: #f4f1ea;
    --wk-pc-muted: #a7aec0;
    --wk-pc-faint: #7c85a0;
    --wk-pc-line: rgba(255, 255, 255, .11);
    --wk-pc-accent: #e8956b;
    display: grid;
    grid-template-rows: 250px minmax(0, 1fr);
    gap: 20px;
    min-height: 764px;
    color: var(--wk-pc-text);
    font-family: var(--font-sans);
  }
  .wk-pc-upper,
  .wk-pc-lower {
    display: grid;
    min-width: 0;
    gap: 20px;
  }
  .wk-pc-upper { grid-template-columns: minmax(390px, .82fr) minmax(0, 1.18fr); }
  .wk-pc-lower { grid-template-columns: minmax(0, 1fr) 300px 288px; }
  .wk-pc-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: .5px solid var(--wk-pc-line);
    border-radius: 20px;
    background: var(--wk-pc-panel);
  }
  .wk-pc-kicker {
    color: var(--wk-pc-accent);
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    line-height: 1.3;
  }

  .wk-pc-countdown {
    padding: 17px 20px 15px;
    background:
      linear-gradient(145deg, rgba(232, 149, 107, .07), transparent 48%),
      var(--wk-pc-panel);
  }
  .wk-pc-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }
  .wk-pc-dashboard-header > div { min-width: 0; }
  .wk-pc-dashboard-header .wk-mode-button {
    flex: 0 0 auto;
    min-width: 96px;
  }
  .wk-pc-countdown h1 {
    max-width: 100%;
    margin-top: 5px;
    overflow: hidden;
    color: var(--wk-pc-text);
    font-family: var(--font-editorial);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-count-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 7px;
  }
  .wk-pc-count-row strong {
    color: var(--wk-pc-accent);
    font-family: var(--font-editorial);
    font-size: 78px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.06em;
    line-height: .82;
  }
  .wk-pc-count-row span {
    padding-bottom: 4px;
    color: var(--wk-pc-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }
  .wk-pc-note {
    margin-top: 5px;
    overflow: hidden;
    color: var(--wk-pc-muted);
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-trip-facts {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 7px 18px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: .5px solid var(--wk-pc-line);
  }
  .wk-pc-trip-facts > div {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
  }
  .wk-pc-trip-facts dt {
    color: var(--wk-pc-faint);
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  .wk-pc-trip-facts dd {
    min-width: 0;
    overflow: hidden;
    color: #d7d3ca;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wk-pc-mountain {
    position: relative;
    padding: 18px 20px;
    background:
      linear-gradient(180deg, rgba(5, 9, 22, .06) 45%, rgba(5, 9, 22, .55) 100%),
      radial-gradient(ellipse at 82% 108%, rgba(232, 149, 107, .5), transparent 50%),
      linear-gradient(160deg, #111a33 0%, #273653 54%, #755249 100%);
    isolation: isolate;
  }
  .wk-pc-mountain::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -8%;
    bottom: 58px;
    left: 42%;
    height: .5px;
    background: linear-gradient(90deg, transparent, rgba(244, 241, 234, .35), transparent);
  }
  .wk-pc-mountain-head,
  .wk-pc-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }
  .wk-pc-mountain-head h2,
  .wk-pc-section-head h2 {
    margin-top: 4px;
    color: var(--wk-pc-text);
    font-family: var(--font-editorial);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
  }
  .wk-pc-mountain-head > span,
  .wk-pc-section-head > span {
    overflow: hidden;
    color: var(--wk-pc-muted);
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-edit-candidates {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 11px;
    border: .5px solid var(--wk-pc-line);
    border-radius: 999px;
    background: transparent;
    color: var(--wk-pc-text);
    cursor: pointer;
    font: 600 10px var(--font-sans);
  }
  .wk-pc-mountain-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 17px;
  }
  .wk-pc-mountain-stats > div {
    min-width: 0;
    padding-right: 13px;
    border-right: .5px solid rgba(255, 255, 255, .14);
  }
  .wk-pc-mountain-stats > div:last-child { padding-right: 0; border-right: 0; }
  .wk-pc-mountain-stats span {
    display: block;
    color: #c3c9d7;
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
  }
  .wk-pc-mountain-stats strong {
    display: block;
    min-height: 41px;
    margin-top: 7px;
    overflow: hidden;
    color: #fff;
    font-family: var(--font-editorial);
    font-size: 33px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-mountain-stats .wk-pc-official-value {
    padding-top: 7px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
  }
  .wk-pc-mountain-stats small {
    display: block;
    overflow: hidden;
    color: #c1c7d4;
    font-size: 9px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-mountain-actions {
    position: absolute;
    right: 20px;
    bottom: 16px;
    left: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .wk-pc-mountain-actions a,
  .wk-pc-mountain-actions button {
    min-height: 38px;
    padding: 0 12px;
    border: .5px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(8, 13, 27, .28);
    color: #f4f1ea;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 11px var(--font-sans);
    text-decoration: none;
  }
  .wk-pc-mountain-actions a:hover,
  .wk-pc-mountain-actions button:hover { background: rgba(255, 255, 255, .09); }
  .wk-pc-mountain-actions svg { width: 15px; height: 15px; }

  .wk-pc-schedule,
  .wk-pc-compare,
  .wk-pc-cost {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  .wk-pc-section-note {
    margin-top: 8px;
    overflow: hidden;
    color: var(--wk-pc-muted);
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-schedule-list {
    flex: 1;
    margin-top: 20px;
  }
  .wk-pc-schedule-row {
    position: relative;
    display: grid;
    grid-template-columns: 54px 13px minmax(0, 1fr);
    gap: 10px;
    min-height: 67px;
  }
  .wk-pc-schedule-row time {
    color: var(--wk-pc-accent);
    font-family: var(--font-data);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }
  .wk-pc-schedule-line {
    position: relative;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border: 1px solid var(--wk-pc-accent);
    border-radius: 50%;
  }
  .wk-pc-schedule-row:not(:last-child) .wk-pc-schedule-line::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: -50px;
    left: 3px;
    width: .5px;
    background: var(--wk-pc-line);
  }
  .wk-pc-schedule-row strong,
  .wk-pc-schedule-row small { display: block; }
  .wk-pc-schedule-row strong {
    overflow: hidden;
    color: var(--wk-pc-text);
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-schedule-row small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--wk-pc-muted);
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-schedule-row.is-passed { opacity: .58; }

  .wk-pc-candidate-list {
    flex: 1;
    margin-top: 16px;
    border-top: .5px solid var(--wk-pc-line);
  }
  .wk-pc-candidate {
    min-height: 49px;
    padding: 7px 2px;
    border-bottom: .5px solid var(--wk-pc-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .wk-pc-candidate > span { min-width: 0; }
  .wk-pc-candidate strong,
  .wk-pc-candidate small { display: block; }
  .wk-pc-candidate strong {
    overflow: hidden;
    color: var(--wk-pc-text);
    font-family: var(--font-editorial);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-candidate small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--wk-pc-muted);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-candidate em {
    flex: 0 0 auto;
    color: var(--wk-pc-faint);
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
  }
  .wk-pc-candidate.is-selected {
    margin: 0 -8px;
    padding-right: 10px;
    padding-left: 10px;
    border-color: rgba(232, 149, 107, .25);
    background: rgba(232, 149, 107, .09);
  }
  .wk-pc-candidate.is-selected em { color: var(--wk-pc-accent); }

  .wk-pc-cost-total {
    margin-top: 24px;
    padding-bottom: 17px;
    border-bottom: .5px solid var(--wk-pc-line);
  }
  .wk-pc-cost-total strong,
  .wk-pc-cost-total span { display: block; }
  .wk-pc-cost-total strong {
    overflow: hidden;
    color: var(--wk-pc-text);
    font-family: var(--font-data);
    font-size: 32px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-pc-cost-total span {
    margin-top: 7px;
    color: var(--wk-pc-muted);
    font-size: 10px;
    line-height: 1.4;
  }
  .wk-pc-cost-list {
    flex: 1;
    padding-top: 13px;
  }
  .wk-pc-cost-list > div {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: .5px solid rgba(255, 255, 255, .07);
    color: var(--wk-pc-muted);
    font-size: 11px;
  }
  .wk-pc-cost-list > div strong {
    color: var(--wk-pc-text);
    font-family: var(--font-data);
    font-size: 11px;
  }
  .wk-pc-cost-list p {
    color: var(--wk-pc-muted);
    font-size: 10px;
    line-height: 1.55;
  }

  .wk-pc-primary,
  .wk-pc-secondary {
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0 15px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 700 12px var(--font-sans);
    transition: background .15s ease-out, transform .15s ease-out;
  }
  .wk-pc-primary {
    border: 0;
    background: var(--wk-pc-accent);
    color: #21140f;
  }
  .wk-pc-secondary {
    border: .5px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .035);
    color: var(--wk-pc-text);
  }
  .wk-pc-primary:hover { background: #f0a67e; }
  .wk-pc-secondary:hover { background: rgba(255, 255, 255, .08); }
  .wk-pc-primary:active,
  .wk-pc-secondary:active { transform: translateY(1px); }
  .wk-pc-primary svg,
  .wk-pc-secondary svg { width: 17px; height: 17px; }

  .wk-pc-top-actions button:focus-visible,
  .wk-pc-dashboard-header .wk-mode-button:focus-visible,
  .wk-pc-mountain-actions a:focus-visible,
  .wk-pc-mountain-actions button:focus-visible,
  .wk-pc-primary:focus-visible,
  .wk-pc-secondary:focus-visible {
    outline: 3px solid #f2b183;
    outline-offset: 3px;
  }
  .wk-pc-edit-candidates:focus-visible {
    outline: 3px solid #f2b183;
    outline-offset: 3px;
  }
}

@media (min-width: 900px) and (min-height: 900px) {
  body.wakuwaku-home .main-content:has(.wk-pc-dashboard) { overflow-y: hidden; }
  .wk-pc-dashboard { height: 100%; min-height: 0; }
}

@media (min-width: 900px) and (max-width: 1239px) {
  .wk-pc-dashboard {
    grid-template-rows: 250px auto;
    min-height: 1080px;
  }
  .wk-pc-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-pc-cost { grid-column: 1 / -1; min-height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-pc-top-actions button,
  .wk-pc-primary,
  .wk-pc-secondary { transition: none; }
}

/* PCサイドバー幅は競合する既存指定をここで一本化する。 */
@media (min-width: 900px) {
  .pc-sidebar { width: 232px; }
}

/* ===== Wakuwaku modes: light / sticker ===== */

.wk-countdown-progress { display: none; }

/* ── ライト：紙の時刻表 ── */
body.wakuwaku-home[data-wakuwaku-mode="light"],
body.wakuwaku-home[data-wakuwaku-mode="light"] #app,
body.wakuwaku-home[data-wakuwaku-mode="light"] .main-content {
  background: #f1efe8;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wakuwaku-shell {
  color: #16181c;
  background: #f1efe8;
  font-family: var(--font-sans);
  font-weight: 400;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-title,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-candidate-name,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-snapshot-heading h2 {
  font-family: var(--font-sans);
  font-weight: 900;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-title {
  font-size: clamp(24px, 7.2vw, 32px);
  letter-spacing: .01em;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-mode-button {
  border: 1px solid #16181c;
  border-radius: 0;
  background: transparent;
  color: #16181c;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-mode-dot {
  border-radius: 0;
  background: #b8410f;
  box-shadow: none;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-card {
  border: 1px solid #16181c;
  border-radius: 0;
  background: #16181c;
  box-shadow: none;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-placeholder {
  background: #16181c;
  transform: none;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-card:hover .wk-hero-placeholder { transform: none; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-overlay {
  background: transparent;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-region {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(241, 239, 232, .26);
  color: #f5c518;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-name {
  color: #f1efe8;
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: .01em;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-hero-note { color: rgba(241, 239, 232, .58); }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-primary,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-mode-close {
  border-radius: 0;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-primary:hover { background: #cc4a13; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-candidate-edit,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-picks-x,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pick-search { border-radius: 0; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-section-heading {
  padding-right: 0;
  padding-left: 0;
  border-bottom: 1px solid #16181c;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-candidate {
  min-height: 48px;
  padding-right: 4px;
  padding-left: 4px;
  border-bottom: .5px solid rgba(22, 24, 28, .2);
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-candidate:hover,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-action-link:hover,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-confirmed-action:hover {
  background: rgba(22, 24, 28, .045);
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-candidate.is-selected { color: #16181c; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-shell {
  --wk-trip-panel: transparent;
  --wk-trip-panel-strong: rgba(22, 24, 28, .06);
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-phase-step {
  border-color: rgba(22, 24, 28, .16);
  color: #85837c;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-phase-step.is-passed { border-color: rgba(184, 65, 15, .5); color: #6a6b73; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-phase-step.is-active { border-color: #b8410f; color: #16181c; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-hero {
  border: 1px solid #16181c;
  border-radius: 0;
  background: #16181c;
  box-shadow: none;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-hero::after { display: none; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-hero-label,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-hero-note { color: rgba(241, 239, 232, .68); }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-count-row strong {
  color: #f5c518;
  font-family: var(--font-data);
  font-size: clamp(62px, 20vw, 76px);
  font-weight: 700;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-count-row span,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-departure { color: #f1efe8; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-countdown-progress {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  height: 6px;
  margin-top: 14px;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-countdown-progress span { background: rgba(241, 239, 232, .22); }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-countdown-progress .is-elapsed { background: #f5c518; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-card,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-snapshot-card {
  border-radius: 0;
  background: transparent;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-trip-card.is-focus,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-moving-card {
  border-color: #16181c;
  background: rgba(22, 24, 28, .035);
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-member-avatar,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-confirmed-avatar { border-color: #f1efe8; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-schedule-dot {
  border-color: #85837c;
  background: #f1efe8;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-schedule-row.is-current .wk-schedule-dot {
  border-color: #b8410f;
  background: #b8410f;
  box-shadow: none;
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-moving-time strong,
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-meeting-pickups span { color: #b8410f; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-action-link { border-color: rgba(22, 24, 28, .24); }
body.wakuwaku-home[data-wakuwaku-mode="light"] .bottom-nav {
  border-top: 1px solid #16181c;
  background: rgba(241, 239, 232, .96);
}
body.wakuwaku-home[data-wakuwaku-mode="light"] .nav-btn { color: #6a6b73; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .nav-btn.active { color: #b8410f; }
body.wakuwaku-home[data-wakuwaku-mode="light"] .modal:has(.wk-mode-panel) {
  border: 1px solid #16181c;
  border-radius: 0;
  background: #f1efe8;
}

/* ── ステッカー：リフト券 ── */
body.wakuwaku-home[data-wakuwaku-mode="sticker"],
body.wakuwaku-home[data-wakuwaku-mode="sticker"] #app,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .main-content {
  background: #f7f5f0;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wakuwaku-shell {
  color: #101114;
  background: #f7f5f0;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-title,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate-name,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-snapshot-heading h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -.03em;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-title { font-size: clamp(25px, 7.5vw, 34px); }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-season,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-card-label,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-snapshot-heading span { color: #1b46d6; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-mode-button {
  border: 2px solid #101114;
  background: #f5c518;
  color: #101114;
  font-family: 'Archivo Black', var(--font-sans);
  font-weight: 400;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-mode-dot {
  border-radius: 2px;
  background: #101114;
  box-shadow: none;
  transform: rotate(45deg);
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-card {
  height: clamp(300px, 72vw, 380px);
  border: 2.5px solid #101114;
  background: #fff;
  box-shadow: 5px 5px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-placeholder {
  inset: 0 0 auto;
  height: 56%;
  background: #1b46d6;
  transform: none;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-card:hover .wk-hero-placeholder { transform: none; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-overlay {
  top: 56%;
  padding: 18px 18px 17px;
  background: #fff;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-region {
  color: #1b46d6;
  font-family: 'Archivo Black', var(--font-sans);
  font-weight: 400;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-name {
  color: #101114;
  font-family: var(--font-sans);
  font-weight: 900;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-hero-note { color: #6d6e74; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-primary {
  border: 2px solid #101114;
  background: #1b46d6;
  color: #fff;
  box-shadow: 4px 4px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-primary:hover { background: #1b46d6; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-section-heading {
  padding-right: 2px;
  padding-left: 2px;
  border: 0;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-section-heading h2,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-section-heading span {
  font-family: 'Archivo Black', var(--font-sans);
  font-weight: 400;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate-edit,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-picks-x,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pick-search {
  border: 2px solid #101114;
  border-radius: 10px;
  background: #fff;
  color: #101114;
  box-shadow: 2px 2px 0 #101114;
  font-weight: 900;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-picks-current {
  border: 2px solid #101114;
  background: #fff;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate-list { display: grid; gap: 6px; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate {
  min-height: 48px;
  padding: 7px 12px;
  border: 2px solid #101114;
  border-radius: 13px;
  background: #fff;
  box-shadow: 3px 3px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate:hover,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate.is-selected {
  padding-right: 12px;
  padding-left: 12px;
  background: #f5c518;
  color: #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate-state,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate-region { font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-candidate.is-selected .wk-candidate-state { color: #101114; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-shell {
  --wk-trip-panel: #fff;
  --wk-trip-panel-strong: #fff;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-phase-step {
  border-color: rgba(16, 17, 20, .22);
  color: #6d6e74;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-phase-step.is-passed { border-color: #1b46d6; color: #4a4b52; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-phase-step.is-active { border-color: #f5c518; color: #101114; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-phase-code { font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-hero {
  border: 2px solid #101114;
  background: #f5c518;
  box-shadow: 5px 5px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-hero::after {
  right: 20px;
  left: 20px;
  background: #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-hero-label,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-hero-note,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-count-row span,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-departure { color: #101114; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-count-row strong {
  color: #101114;
  font-family: 'Archivo Black', var(--font-sans);
  font-size: clamp(65px, 21vw, 82px);
  font-weight: 400;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-departure span:not(:last-child)::after { background: #101114; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-card,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-snapshot-card {
  border: 2px solid #101114;
  border-radius: 14px;
  background: #fff;
  box-shadow: 4px 4px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-trip-card.is-focus { background: #fff; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card {
  border-color: #101114;
  background: #1b46d6;
  color: #fff;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card .wk-trip-card-label,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card .wk-moving-time strong,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card .wk-moving-time span,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card .wk-next-stop span,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card .wk-next-stop strong,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-card p { color: #fff; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-moving-time strong,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-travel-arrival strong,
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-snapshot-card > strong { font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-member-avatar { border-color: #101114; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-member-avatar.is-lead { background: #1b46d6; color: #fff; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-schedule-dot { border-color: #101114; background: #fff; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-schedule-row.is-current .wk-schedule-dot { border-color: #1b46d6; background: #1b46d6; box-shadow: none; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-action-link {
  margin-top: 8px;
  padding-right: 14px;
  padding-left: 14px;
  border: 2px solid #101114;
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-action-link:hover { padding-right: 14px; padding-left: 14px; background: #f5c518; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-action-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #101114; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .bottom-nav {
  border-top: 2px solid #101114;
  background: rgba(247, 245, 240, .97);
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .nav-btn { color: #4a4b52; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .nav-btn.active { color: #1b46d6; }
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .modal:has(.wk-mode-panel) {
  border: 2px solid #101114;
  border-radius: 20px;
  background: #f7f5f0;
  box-shadow: 5px 5px 0 #101114;
}
body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-mode-close {
  border: 2px solid #101114;
  background: #f5c518;
  box-shadow: 3px 3px 0 #101114;
}

/* 確定／共有は全画面モーダル自身のモード属性で閉じる。他タブの背面には影響させない。 */
.wk-confirmed[data-wakuwaku-mode="light"],
.wk-share-screen[data-wakuwaku-mode="light"] {
  --wk-bg: #f1efe8;
  --wk-surface: rgba(22, 24, 28, .06);
  --wk-text: #16181c;
  --wk-muted: #6a6b73;
  --wk-line: rgba(22, 24, 28, .24);
  --wk-accent: #b8410f;
  --wk-accent-text: #fdf7ee;
  --wk-highlight: #cc4a13;
  --wk-font-heading: var(--font-sans);
  --wk-font-body: var(--font-sans);
  --wk-font-data: var(--font-data);
}
.modal.wk-fullscreen-modal:has(.wk-confirmed[data-wakuwaku-mode="light"]),
.modal.wk-share-modal:has(.wk-share-screen[data-wakuwaku-mode="light"]) { background: #f1efe8; }
.wk-confirmed[data-wakuwaku-mode="light"] {
  background: #f1efe8;
}
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-close,
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-header > button {
  border: 1px solid #16181c;
  border-radius: 0;
  background: transparent;
  color: #16181c;
}
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-header h1,
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-header h1,
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-card h2 {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: .01em;
}
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-header h1 { font-size: clamp(26px, 8vw, 34px); }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date {
  border: 1px solid #16181c;
  border-radius: 0;
  background: #16181c;
  box-shadow: none;
}
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date::after { background: rgba(241, 239, 232, .22); }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date-top { color: rgba(241, 239, 232, .65); }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date-top span:first-child,
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date-value strong,
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date-value i,
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-route time { color: #f5c518; }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-date-value {
  color: #f5c518;
  font-family: var(--font-data);
}
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-resort { color: #f1efe8; font-family: var(--font-sans); font-weight: 900; }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-route { color: rgba(241, 239, 232, .75); }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-section-head { border-bottom: 1px solid #16181c; }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-avatar { border-color: #f1efe8; }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-avatar.is-lead { background: #16181c; color: #f1efe8; }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-actions { border-bottom-color: rgba(22, 24, 28, .24); }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-action { border-top-color: rgba(22, 24, 28, .24); }
.wk-confirmed[data-wakuwaku-mode="light"] .wk-confirmed-action:hover { background: rgba(22, 24, 28, .045); }

.wk-confirmed[data-wakuwaku-mode="sticker"],
.wk-share-screen[data-wakuwaku-mode="sticker"] {
  --wk-bg: #f7f5f0;
  --wk-surface: #fff;
  --wk-text: #101114;
  --wk-muted: #6d6e74;
  --wk-line: #101114;
  --wk-accent: #1b46d6;
  --wk-accent-text: #fff;
  --wk-highlight: #f5c518;
  --wk-font-heading: var(--font-sans);
  --wk-font-body: var(--font-sans);
  --wk-font-data: 'Archivo Black', var(--font-sans);
}
.modal.wk-fullscreen-modal:has(.wk-confirmed[data-wakuwaku-mode="sticker"]),
.modal.wk-share-modal:has(.wk-share-screen[data-wakuwaku-mode="sticker"]) { background: #f7f5f0; }
.wk-confirmed[data-wakuwaku-mode="sticker"] {
  background: #f7f5f0;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-close,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-header > button {
  border: 2px solid #101114;
  background: #fff;
  color: #101114;
  box-shadow: 3px 3px 0 #101114;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-header h1,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-header h1,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-card h2 {
  font-family: var(--font-sans);
  font-weight: 900;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-header h1 { font-size: clamp(25px, 7.8vw, 34px); }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date {
  border: 2px solid #101114;
  border-radius: 20px;
  background: #f5c518;
  box-shadow: 5px 5px 0 #101114;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date::after { background: #101114; }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date-top,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date-top span:first-child,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date-value,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date-value i,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-resort,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-route,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-route time { color: #101114; }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date-value,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-date-value strong { font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-resort { font-family: var(--font-sans); font-weight: 900; }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-member-list {
  margin-top: 12px;
  padding: 14px;
  border: 2px solid #101114;
  border-radius: 14px;
  background: #fff;
  box-shadow: 4px 4px 0 #101114;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-avatar,
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-avatar.is-lead {
  border-color: #101114;
  background: #1b46d6;
  color: #fff;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-actions { display: grid; gap: 10px; border: 0; }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-action {
  min-height: 58px;
  padding: 9px 12px;
  border: 2px solid #101114;
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 #101114;
}
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-action:hover { padding-right: 12px; padding-left: 12px; background: #f5c518; }
.wk-confirmed[data-wakuwaku-mode="sticker"] .wk-confirmed-action:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #101114; }

.wk-share-screen[data-wakuwaku-mode="light"] { background: #f1efe8; }
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-card {
  border: 1px solid #16181c;
  border-radius: 0;
  box-shadow: none;
}
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-photo {
  background: repeating-linear-gradient(135deg, #e6e3db 0 7px, #f1efe8 7px 14px);
}
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-card-body { background: #f1efe8; }
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-privacy,
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-save,
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-send {
  border-radius: 0;
}
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-privacy { background: rgba(22, 24, 28, .04); }
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-save:hover { background: #cc4a13; }
.wk-share-screen[data-wakuwaku-mode="light"] .wk-share-send { border: 1px solid #16181c; background: transparent; }

.wk-share-screen[data-wakuwaku-mode="sticker"] { background: #f7f5f0; }
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-card {
  border: 2px solid #101114;
  border-radius: 20px;
  background: #fff;
  box-shadow: 5px 5px 0 #101114;
}
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-photo { background: #1b46d6; }
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-card-body { background: #fff; }
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-card-date,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-detail span,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-card-footer span,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-cost strong { font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-privacy {
  border: 2px solid #101114;
  border-radius: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 #101114;
}
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-save,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-send {
  border: 2px solid #101114;
  background: #1b46d6;
  color: #fff;
  box-shadow: 3px 3px 0 #101114;
}
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-send { background: #fff; color: #101114; }
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-save:active,
.wk-share-screen[data-wakuwaku-mode="sticker"] .wk-share-send:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #101114; }

.wk-mode-panel[data-wakuwaku-mode="light"] .wk-mode-title { font-family: var(--font-sans); font-weight: 900; }
.wk-mode-panel[data-wakuwaku-mode="light"] .wk-mode-option:hover { background: rgba(22, 24, 28, .045); }
.wk-mode-panel[data-wakuwaku-mode="light"] .wk-mode-close { border-radius: 0; }
.wk-mode-panel[data-wakuwaku-mode="sticker"] .wk-mode-title { font-family: var(--font-sans); font-weight: 900; }
.wk-mode-panel[data-wakuwaku-mode="sticker"] .wk-mode-option:hover { background: #f5c518; }

@media (min-width: 900px) {
  /* ライトのPCクローム */
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sidebar,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-topbar {
    border-color: #16181c;
    background: #f1efe8;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-logo-name,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-trip-name,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-tb-title { color: #16181c; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-logo-tag,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-section-label,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-nav-btn,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-trip-label,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-trip-meta,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-trip-count,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-tb-eyebrow { color: #6a6b73; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-nav-btn { border-radius: 0; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-nav-btn:hover { background: rgba(22, 24, 28, .045); color: #16181c; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-nav-btn.active { background: #16181c; color: #f1efe8; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-nav-btn.active::before { display: none; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-trip { border-color: #16181c; border-radius: 0; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .pc-sb-av { border-color: #f1efe8; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-top-actions time { color: #85837c; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-top-actions button {
    border: 1px solid #16181c;
    border-radius: 0;
    background: transparent;
    color: #16181c;
    font-family: var(--font-sans);
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-top-actions button:hover { background: rgba(22, 24, 28, .07); }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-dashboard {
    --wk-pc-bg: #f1efe8;
    --wk-pc-panel: transparent;
    --wk-pc-panel-strong: rgba(22, 24, 28, .06);
    --wk-pc-text: #16181c;
    --wk-pc-muted: #6a6b73;
    --wk-pc-faint: #85837c;
    --wk-pc-line: rgba(22, 24, 28, .24);
    --wk-pc-accent: #b8410f;
    font-family: var(--font-sans);
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-card {
    border: 1px solid #16181c;
    border-radius: 0;
    background: transparent;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-countdown {
    padding: 14px 20px 12px;
    background: #16181c;
    color: #f1efe8;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-countdown h1,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-count-row span { color: #f1efe8; font-family: var(--font-sans); }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-countdown h1 { font-weight: 900; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-count-row strong {
    color: #f5c518;
    font-family: var(--font-data);
    font-size: 72px;
    font-weight: 700;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-count-row { margin-top: 5px; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-countdown .wk-pc-note,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-trip-facts dt { color: rgba(241, 239, 232, .56); }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-trip-facts { border-color: rgba(241, 239, 232, .25); }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-trip-facts dd { color: #f1efe8; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-countdown .wk-countdown-progress {
    height: 8px;
    margin-top: 8px;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-countdown .wk-pc-note { margin-top: 3px; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-trip-facts { gap: 4px 18px; margin-top: 6px; padding-top: 6px; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain {
    background: #f1efe8;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain::after { display: none; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-head h2,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-section-head h2,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-candidate strong {
    font-family: var(--font-sans);
    font-weight: 900;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-stats > div { border-color: rgba(22, 24, 28, .2); }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-stats span { color: #6a6b73; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-stats strong { color: #16181c; font-family: var(--font-data); font-weight: 700; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-stats small { color: #6a6b73; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-actions a,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-actions button,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-primary,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-secondary {
    border: 1px solid #16181c;
    border-radius: 0;
    background: transparent;
    color: #16181c;
    font-family: var(--font-sans);
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-primary { border-color: #b8410f; background: #b8410f; color: #fdf7ee; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-edit-candidates {
    border: 1px solid #16181c;
    border-radius: 0;
    color: #16181c;
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-primary:hover { background: #cc4a13; }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-secondary:hover,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-actions a:hover,
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-mountain-actions button:hover { background: rgba(22, 24, 28, .07); }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-candidate.is-selected {
    border-color: rgba(184, 65, 15, .35);
    background: rgba(184, 65, 15, .07);
  }
  body.wakuwaku-home[data-wakuwaku-mode="light"] .wk-pc-cost-list > div { border-color: rgba(22, 24, 28, .12); }

  /* ステッカーのPCクローム */
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sidebar,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-topbar {
    border-color: #101114;
    background: #f7f5f0;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-logo-name,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-trip-name,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-tb-title { color: #101114; font-weight: 900; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-logo-tag,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-section-label,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-nav-btn,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-trip-label,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-trip-meta,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-trip-count,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-tb-eyebrow { color: #4a4b52; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-nav-btn {
    margin-bottom: 7px;
    border: 2px solid #101114;
    border-radius: 10px;
    background: #fff;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-nav-btn:hover { background: #f5c518; color: #101114; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-nav-btn.active {
    background: #1b46d6;
    color: #fff;
    box-shadow: 3px 3px 0 #101114;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-nav-btn.active::before { display: none; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-trip {
    border: 2px solid #101114;
    border-radius: 10px;
    background: #f5c518;
    box-shadow: 3px 3px 0 #101114;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .pc-sb-av { border-color: #f5c518; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-top-actions time { color: #6d6e74; font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-top-actions button {
    border: 2px solid #101114;
    background: #fff;
    color: #101114;
    box-shadow: 3px 3px 0 #101114;
    font-weight: 900;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-top-actions button:hover { background: #f5c518; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-dashboard {
    --wk-pc-bg: #f7f5f0;
    --wk-pc-panel: #fff;
    --wk-pc-panel-strong: #fff;
    --wk-pc-text: #101114;
    --wk-pc-muted: #6d6e74;
    --wk-pc-faint: #4a4b52;
    --wk-pc-line: #101114;
    --wk-pc-accent: #1b46d6;
    font-family: var(--font-sans);
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-card {
    border: 2px solid #101114;
    border-radius: 20px;
    background: #fff;
    box-shadow: 6px 6px 0 #101114;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-countdown { background: #f5c518; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-countdown h1,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-section-head h2,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-head h2,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-candidate strong {
    color: #101114;
    font-family: var(--font-sans);
    font-weight: 900;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-count-row strong,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-cost-total strong,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-stats strong {
    color: #101114;
    font-family: 'Archivo Black', var(--font-sans);
    font-weight: 400;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-count-row span,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-countdown .wk-pc-note,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-trip-facts dt,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-trip-facts dd { color: #101114; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-trip-facts { border-color: #101114; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain {
    background: #1b46d6;
    color: #fff;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain::after { display: none; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain .wk-pc-kicker,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-head h2,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-head > span,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-stats span,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-stats strong,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-stats small { color: #fff; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-stats > div { border-color: rgba(255, 255, 255, .45); }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-actions a,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-actions button {
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-actions a:hover,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-mountain-actions button:hover { background: rgba(255, 255, 255, .14); }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-schedule-row time,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-kicker { font-family: 'Archivo Black', var(--font-sans); font-weight: 400; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-schedule-line { border-color: #1b46d6; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-schedule-row:not(:last-child) .wk-pc-schedule-line::after { background: #101114; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-candidate-list { border: 0; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-candidate {
    min-height: 46px;
    margin-top: 5px;
    padding: 6px 9px;
    border: 2px solid #101114;
    border-radius: 10px;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-candidate.is-selected {
    margin: 5px 0 0;
    padding: 6px 9px;
    border-color: #101114;
    background: #f5c518;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-cost-list > div { border-color: rgba(16, 17, 20, .16); }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-primary,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-secondary {
    border: 2px solid #101114;
    background: #fff;
    color: #101114;
    box-shadow: 3px 3px 0 #101114;
    font-weight: 900;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-edit-candidates {
    border: 2px solid #101114;
    background: #fff;
    color: #101114;
    box-shadow: 2px 2px 0 #101114;
    font-weight: 900;
  }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-primary { background: #1b46d6; color: #fff; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-primary:hover { background: #1b46d6; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-secondary:hover { background: #f5c518; }
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-primary:active,
  body.wakuwaku-home[data-wakuwaku-mode="sticker"] .wk-pc-secondary:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #101114;
  }
}

/* 初めての人向け「使い方」 */
.wk-empty-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.wk-empty-actions .wk-primary { margin-top: 16px; }
.wk-howto-button {
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid var(--wk-line);
  border-radius: 999px;
  background: transparent;
  color: var(--wk-text);
  cursor: pointer;
  font: 700 14px var(--wk-font-body);
  white-space: nowrap;
}
.howto-steps { display: grid; gap: 16px; }
.howto-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.howto-icon { font-size: 24px; line-height: 1.2; text-align: center; }
.howto-step h3 { margin: 0 0 4px; color: var(--ink); font-size: 14px; }
.howto-step p { margin: 0; color: var(--ink2); font-size: 12px; line-height: 1.65; }
.howto-note { margin: 18px 0 0; color: var(--ink3); font-size: 10.5px; line-height: 1.6; }

@media (min-width: 1100px) {
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) {
    max-width: 1240px;
    padding-right: 32px;
    padding-left: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
    grid-template-areas:
      "header header"
      "hero cand"
      "primary cand"
      "sample cand";
    column-gap: 28px;
    row-gap: 16px;
    align-items: start;
  }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-header { grid-area: header; }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-hero-card {
    grid-area: hero;
    height: 520px;
  }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-hero-card .wk-hero-name { font-size: 44px; }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-primary {
    grid-area: primary;
    width: 100%;
  }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-empty-actions {
    grid-area: sample;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-empty-actions .wk-primary { width: 100%; }
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-candidates {
    grid-area: cand;
    min-width: 0;
    max-height: calc(100vh - 220px);
    margin-top: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

@media (min-width: 1400px) {
  body.wakuwaku-home .wakuwaku-shell:has(> .wk-hero-card) > .wk-hero-card { height: 600px; }
}

@media (max-width: 420px) {
  .wk-empty-actions { grid-template-columns: 1fr; gap: 8px; }
  .wk-howto-button { min-height: 48px; }
  .howto-steps { gap: 13px; }
  .howto-actions { flex-direction: column; }
  .howto-actions .btn-cancel { width: 100%; }
}