@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500&family=Noto+Serif+JP:wght@300;400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;

  /* Base */
  --bg:              #F5F2EC;
  --surface:         #EDE8DF;
  --surface-2:       #E4DFD4;
  --border:          #D6CFC4;
  --border-strong:   #C4BEB2;

  /* Text */
  --fg:              #1E1E1B;
  --fg-muted:        #5C5850;
  --fg-dim:          #9A9488;

  /* Brand Accent */
  --neve:            #7A9EB0;
  --neve-light:      #B8D0DC;
  --clay:            #A05C42;
  --lichen:          #7A8C6A;
  --ash:             #8A8480;

  /* Snow & Ice */
  --crevasse:        #2C3A42;
  --ridgeline:       #D6CFC4;

  /* Inverted / white text */
  --white:           #FFFFFF;
  --fg-inverse:      #FFFFFF;

  /* Hover variants */
  --neve-hover:      #6690A4;
  --clay-hover:      #8A4E38;
  --crevasse-hover:  #3E505A;

  /* Safe Area */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* Functional */
  --fn-safe:         #5E7A64;
  --fn-watch:        #A07830;
  --fn-danger:       #8C3828;
  --fn-info:         #4E6E88;

  /* Slope shading (斜度タイル 2 区分の凡例色)
     真実は blueprints/geo.py _compute_slope_rgba() の RGBA 値。
     変更時は geo.py 側も必ず更新すること (コメント同期方式)。 */
  --slope-30:        rgb(220, 140, 40);   /* 30–34° オレンジ */
  --slope-35:        rgb(200, 50, 30);    /* 35°以上 赤 */

  /* Typography */
  --font-display:    'Source Serif 4', 'Noto Serif JP', Georgia, serif;
  --font-body:       'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:       'DM Mono', monospace;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   28px;
  --space-xl:   44px;
  --space-2xl:  64px;
  --space-3xl:  88px;

  /* Border radius
     ブランドガイド v1.5 準拠: 標準 3px、モーダル/ダイアログ専用に 6px の 2 値のみ。
     旧 --radius-{sm,md,lg,pill} は Phase 1A レーンC (C-A1) で全置換完了:
       --radius-sm  (4px)   → var(--radius)
       --radius-md  (8px)   → var(--radius)             or var(--radius-modal) (文脈判断)
       --radius-lg  (14px)  → var(--radius)
       --radius-pill (999px) → var(--radius)            (角ばったブランド方針) */
  --radius:       3px;
  --radius-modal: 6px;

  /* Transitions */
  --ease-snow:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-base:   400ms;

  /* M2: モバイル分割表示モード(ハーフ展開)のカード可視高さ。
     --panel-half-ratio を変えると CSS のカード高さと JS の flyTo padding が一致する。
     JS 側(_focusMemoCard)も同じ 0.5 を使うこと。 */
  --panel-half-ratio:  0.4;
  --panel-half-height: calc(100vh * var(--panel-half-ratio));
}

/* ── Base reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
}

/* ── Typography utilities ── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.text-primary   { color: var(--fg); }
.text-muted     { color: var(--fg-muted); }
.text-dim       { color: var(--fg-dim); }
.text-neve      { color: var(--neve); }
.text-clay      { color: var(--clay); }

/* ── Minimum readable sizes ── */
/* 全テキストは11px以上。ラベルはfg-muted以上のコントラスト */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
}

/* ── Button base ── */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-snow);
}
.btn:hover { opacity: 0.85; }

.btn-primary  { background: var(--fg);   color: var(--bg); }
.btn-neve     { background: var(--neve); color: white; }
.btn-clay     { background: var(--clay); color: white; }
.btn-outline  { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.btn-ghost    { background: transparent; color: var(--fg-muted); }
.btn-danger   { background: transparent; color: var(--fn-danger); }
.btn-sm       { padding: 6px 14px; font-size: 11px; }

/* ── Card base ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Section label ── */
.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Input base ── */
.input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 16px; /* C-8: iOS Safari 自動 zoom-in 回避のため入力要素は 16px 固定 */
  font-weight: 300;
  color: var(--fg);
  width: 100%;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-snow);
}
.input:focus { border-color: var(--neve); }

/* ── Tag base ── */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 2px;
}
.tag-neve      { background: rgba(122,158,176,0.12); color: var(--neve); }
.tag-clay      { background: rgba(160,92,66,0.12);   color: var(--clay); }
.tag-lichen    { background: rgba(122,140,106,0.12); color: var(--lichen); }
.tag-neutral   { background: var(--surface-2);       color: var(--fg-muted); }
.tag-danger    { background: rgba(140,56,40,0.10);   color: var(--fn-danger); }

/* ── Functional colors ── */
.text-safe   { color: var(--fn-safe); }
.text-watch  { color: var(--fn-watch); }
.text-danger { color: var(--fn-danger); }
.text-info   { color: var(--fn-info); }

/* ── Visibility utility ── */
.is-hidden { display: none !important; }

/* ── Image placeholder (snowy sky gradient — brand guideline #4A7A90→#B8D4E0→#E8F0F4) ── */
.img-placeholder {
  background: linear-gradient(180deg,
    #4A7A90 0%,
    #B8D4E0 60%,
    #E8F0F4 100%) !important;
}

/* ── Log card (Patagonia-inspired surface card — shared: /logs + home) ── */
.log-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(28,30,32,0.05),
              0 4px 14px rgba(28,30,32,0.04);
  transition: transform var(--dur-base) var(--ease-snow),
              box-shadow var(--dur-base) var(--ease-snow);
}
.log-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(28,30,32,0.06),
              0 12px 28px rgba(28,30,32,0.08);
}

/* サムネイル: 16:9 横長。position:relative + absolute img で確実に塗りつぶす */
.log-card .card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--surface-2);
  overflow: hidden;
}
.log-card .card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* プレースホルダ: 冬の空グラデ */
.img-placeholder {
  background: linear-gradient(180deg,
    #4A7A90 0%,
    #B8D4E0 60%,
    #E8F0F4 100%);
}

/* メタ情報エリア（カード内、画像の下に余白を取る） */
.log-card .card-meta {
  padding: 18px 20px 22px;
}
.log-card .card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-card .card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.log-card .card-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.log-card .card-stats .dot {
  color: var(--fg-dim);
  user-select: none;
}

/* C-5: WebGL 非対応ブラウザ向けマップフォールバック */
.map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 240px;
  padding: 24px;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  border-radius: 3px;
}


/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}