/* =====================================================================
ARM — Agave REC Manager
ダーク＆ギャラリー テーマ / 実装用スタイル
---------------------------------------------------------------------
方向性: 暗い背景で写真を主役に、明朝見出し × サンセリフ本文の上質トーン
ホーム: 案A（ギャラリー・ヒーロー）
アイコン: Lucide（線アイコン）を推奨。 + lucide.createIcons()
===================================================================== */
/* ---- フォント（ に でも可。@import でも動作）---------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@600&display=swap');
/* =====================================================================
1. デザイントークン
===================================================================== */
:root {
/* --- サーフェス（暗→明）--- */
--bg: #14140F; /* 最背面 */
--surface: #1E1E17; /* カード */
--surface-2: #24251C; /* 一段上のサーフェス */
--surface-bar: rgba(16, 16, 11, 0.92); /* タブバー等の半透明 */
/* --- 文字 --- */
--text: #F2F0E9; /* 主 */
--text-sub: #9A988E; /* 副 */
--text-mute: #6B695F; /* 微（キャプション・無効）*/
--on-accent: #14140F; /* アクセント上の文字 */
/* --- アクセント & 主要ボタン --- */
--accent: #7FB069; /* 植物グリーン */
--accent-soft: rgba(127, 176, 105, 0.14);
--primary: #3E5C3A; /* 主要ボタン（深緑）*/
--primary-text: #EAF3DE;
/* --- 状態色 --- */
--water: #5E92C2; /* 水やり 💧 */
--photo: #C9925A; /* 撮影 📷 */
--danger: #C4584E; /* 削除・警告 */
/* --- 罫線 --- */
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
/* --- 角丸 --- */
--r-card: 14px;
--r-btn: 10px;
--r-pill: 999px;
--r-thumb: 9px;
--r-screen: 34px; /* デバイスモック用。実機では不要 */
/* --- 余白スケール（4の倍数）--- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
--sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
/* --- 影（やわらかい立体感）--- */
--shadow-card: 0 3px 14px rgba(0, 0, 0, 0.40);
--shadow-pop: 0 8px 30px rgba(0, 0, 0, 0.50);
--shadow-fab: 0 6px 20px rgba(127, 176, 105, 0.35);
/* --- タイポ --- */
--font-serif: 'Noto Serif JP', serif; /* 見出し */
--font-sans: 'Noto Sans JP', sans-serif; /* 本文・UI */
--font-mono: ui-monospace, 'SFMono-Regular', monospace; /* 日付・数値 */
}
/* =====================================================================
2. ベース / リセット
===================================================================== */
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* =====================================================================
3. タイポグラフィ
===================================================================== */
.display { font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1.25; letter-spacing: .01em; }
h1, .h1 { font-family: var(--font-serif); font-weight: 600; font-size: 22px; line-height: 1.4; margin: 0; }
h2, .h2 { font-family: var(--font-serif); font-weight: 600; font-size: 17px; line-height: 1.4; margin: 0; }
.body { font-size: 15px; line-height: 1.7; }
.caption { font-size: 13px; line-height: 1.6; color: var(--text-sub); }
.label { font-size: 12px; letter-spacing: .06em; color: var(--text-sub); }
.num { font-family: var(--font-serif); font-weight: 600; } /* 統計などの数値強調 */
.mono { font-family: var(--font-mono); }
.text-sub { color: var(--text-sub); }
.text-mute { color: var(--text-mute); }
/* =====================================================================
4. レイアウト / アプリシェル
===================================================================== */
.app {
max-width: 480px; /* スマホ中心。中央寄せ */
margin: 0 auto;
min-height: 100vh;
padding-bottom: 84px; /* タブバー分 */
}
.screen-pad { padding: var(--sp-6) 22px; } /* 画面の標準左右余白 */
/* PC: 2カラムになる画面用のユーティリティ（株詳細など）*/
@media (min-width: 900px) {
.app--wide { max-width: 1040px; }
.two-col {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--sp-8);
align-items: start;
}
}
/* =====================================================================
5. ボタン
===================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-size: 14px; font-weight: 500;
padding: 12px 22px; border-radius: var(--r-btn);
border: 1px solid transparent; cursor: pointer;
transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn .lucide, .btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--primary); color: var(--primary-text); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.btn--secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn--danger { background: transparent; color: var(--danger); border-color: rgba(196,88,78,.45); }
.btn--ghost { background: transparent; color: var(--text-sub); padding-left: 10px; padding-right: 10px; }
.btn--block { width: 100%; }
/* ラベル付き FAB（pill）*/
.fab {
display: inline-flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 700;
padding: 14px 20px; border-radius: var(--r-pill);
background: var(--accent); color: var(--on-accent);
border: none; cursor: pointer; box-shadow: var(--shadow-fab);
}
.fab--water { background: var(--water); color: #0E1A24; box-shadow: 0 6px 20px rgba(94,146,194,.3); }
.fab--photo { background: var(--photo); color: var(--on-accent); box-shadow: 0 6px 20px rgba(201,146,90,.3); }
.fab--fixed { position: fixed; right: 20px; bottom: 96px; z-index: 20; } /* タブバー上に浮かせる */
/* =====================================================================
6. カード
===================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.card--pad { padding: 16px 18px; }
.card--gradient{ background: linear-gradient(160deg, var(--surface-2), #191912); } /* 微グラデで立体感 */
/* 写真サムネ付きカード（株リスト・横並び）*/
.card-plant {
display: flex; gap: 14px; padding: 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.card-plant__thumb {
width: 74px; height: 74px; flex-shrink: 0;
border-radius: var(--r-thumb); object-fit: cover;
border: 1px solid rgba(255,255,255,.06); background: var(--surface-2);
}
.card-plant__name { font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.card-plant__meta { font-size: 12.5px; color: var(--text-sub); margin-top: 3px; }
.card-plant__place { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-mute); margin-top: 8px; }
/* ヒント等のテキストカード */
.card-note__title { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; letter-spacing: .05em; }
.card-note__body { font-size: 13.5px; line-height: 1.65; margin-top: 10px; }
/* 株リストのギャラリーグリッド */
.plant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.plant-grid .card { overflow: hidden; }
.plant-grid__thumb { aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.plant-grid__info { padding: 11px 12px 13px; }
/* =====================================================================
7. 統計（ホーム案A）
===================================================================== */
.stat-row { display: flex; gap: 10px; }
.stat {
flex: 1; padding: 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 13px;
}
.stat__num { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1; }
.stat__num--water { color: var(--water); }
.stat__num--photo { color: var(--photo); }
.stat__label { font-size: 11px; color: var(--text-sub); margin-top: 6px; }
/* ホームのギャラリーヒーロー（案A）*/
.hero { position: relative; height: 340px; overflow: hidden; background: var(--surface-2); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, var(--bg) 4%, rgba(20,20,15,.2) 45%, rgba(20,20,15,.45) 100%);
}
.hero__copy { position: absolute; left: 22px; right: 22px; bottom: 22px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.hero__greet { font-size: 13px; color: #cfcdc2; }
.hero__title { font-family: var(--font-serif); font-weight: 600; font-size: 27px; margin-top: 6px; }
.hero__sub { font-size: 12px; color: #bdbbb0; margin-top: 6px; }
/* クイック操作（縦アイコン＋ラベル）*/
.quick-row { display: flex; gap: 10px; }
.quick {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 14px 0; border-radius: 12px; cursor: pointer;
background: var(--surface); border: 1px solid var(--border); color: var(--text-sub);
font-size: 12px; font-weight: 600;
}
.quick--primary { background: var(--primary); color: var(--primary-text); border-color: transparent; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.quick--water { color: var(--water); border-color: rgba(94,146,194,.4); }
/* =====================================================================
8. 下部タブバー（5項目）
===================================================================== */
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
max-width: 480px; margin: 0 auto;
display: flex; justify-content: space-around;
padding: 9px 4px calc(22px + env(safe-area-inset-bottom));
background: var(--surface-bar);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
}
.tab {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
color: var(--text-mute); font-size: 10px; cursor: pointer;
}
.tab .lucide, .tab svg { width: 21px; height: 21px; }
.tab.is-active { color: var(--accent); font-weight: 500; }
/* =====================================================================
9. フォーム要素
===================================================================== */
.field { margin-bottom: 16px; }
.field__label { font-size: 12px; color: var(--text-sub); margin-bottom: 7px; display: block; }
input[type="text"], input[type="email"], input[type="number"], textarea, select, .input {
width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
background: var(--bg);
border: 1px solid var(--border-strong); border-radius: var(--r-btn);
padding: 12px 14px;
appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.select-wrap { position: relative; }
.select-wrap::after {
content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
border-right: 1.5px solid var(--text-mute); border-bottom: 1.5px solid var(--text-mute);
transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
/* レンジ（水やり頻度など）*/
input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,.5); cursor: pointer;
}
/* 進捗の塗りはJSで background: linear-gradient(...) を設定するか、下記クラスで */
.range-track { position: relative; height: 4px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); }
.range-fill { position: absolute; left: 0; top: 0; height: 4px; background: var(--accent); border-radius: var(--r-pill); }
/* チェックボックス */
.check { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; }
.check__box {
width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
border: 1px solid var(--border-strong); background: var(--bg);
display: flex; align-items: center; justify-content: center; color: transparent;
}
.check input { display: none; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check__box .lucide { width: 14px; height: 14px; }
/* =====================================================================
10. 画像の見せ方
===================================================================== */
/* 4アングルのサムネ枠 */
.angle-grid { display: flex; gap: 10px; }
.angle {
flex: 1; aspect-ratio: 1; border-radius: var(--r-thumb);
object-fit: cover; background: var(--surface-2);
border: 1px solid rgba(255,255,255,.06);
}
/* 撮影セッション（日付見出し＋4枚）*/
.session__date { font-size: 11.5px; color: var(--text-sub); font-family: var(--font-mono); margin: 0 0 9px; }
.session + .session { margin-top: 16px; }
/* タイムライン（同一アングルの時系列・横スクロール）*/
.timeline { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding-bottom: 4px; }
.timeline__item { width: 78px; flex-shrink: 0; }
.timeline__img { aspect-ratio: 3/4; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid rgba(255,255,255,.06); }
.timeline__date { font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); margin-top: 5px; text-align: center; }
.timeline__item.is-latest .timeline__img { border-color: rgba(127,176,105,.4); }
.timeline__item.is-latest .timeline__date { color: var(--accent); }
/* ライトボックス（全画面）*/
.lightbox {
position: fixed; inset: 0; z-index: 100;
background: rgba(10,10,7,.96);
display: flex; align-items: center; justify-content: center;
}
.lightbox__img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.lightbox__close { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 18px; color: var(--text); width: 40px; height: 40px; }
/* =====================================================================
11. チップ / バッジ（基本情報・フィルタ）
===================================================================== */
.chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; color: var(--text-sub);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-pill); padding: 7px 13px;
}
.chip .lucide { width: 13px; height: 13px; }
.chip--active { color: var(--accent); border-color: rgba(127,176,105,.35); }
.chip__icon--green { color: var(--accent); }
.chip__icon--water { color: var(--water); }
/* =====================================================================
12. Lucide アイコン共通
===================================================================== */
.lucide, svg.lucide { stroke-width: 1.75; vertical-align: -.14em; }
/* 状態色アイコンは識別性のため着色（緑/青/茶）、それ以外は currentColor */
/* =====================================================================
13. アプリ固有コンポーネント補完（ARM実装用）
===================================================================== */
/* 共通ヘッダー（各画面上部） */
.appbar {
position: sticky; top: 0; z-index: 25;
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 14px 18px calc(14px);
background: var(--surface-bar);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.appbar h1 { font-family: var(--font-serif); font-weight: 600; font-size: 18px; margin: 0; }
.appbar a, .appbar .appbar__link { color: var(--text-sub); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.appbar .spacer { flex: 1; }
/* 空状態 */
.empty-state { text-align: center; color: var(--text-mute); padding: 48px 16px; font-size: 14px; line-height: 1.8; }
/* セクション見出し */
.section-title { font-size: 12px; letter-spacing: .05em; color: var(--text-sub); margin: 18px 0 8px; }
/* 株詳細：基本情報 */
.plant-head__name { font-family: var(--font-serif); font-weight: 600; font-size: 22px; margin: 0 0 6px; }
.plant-head__row { font-size: 13px; color: var(--text-sub); margin: 2px 0; }
.plant-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.plant-actions .btn { padding: 9px 14px; font-size: 13px; }
/* メモ表示/編集 */
.note-view { font-size: 13px; color: var(--text-sub); cursor: pointer; padding: 4px 0; }
.note-view .ph { color: var(--text-mute); }
.note-edit { margin: 6px 0; }
.note-edit .row { display: flex; gap: 8px; margin-top: 8px; }
.note-edit .row .btn { flex: 1; }
/* 撮影し直すリンク */
.session__head { display: flex; align-items: center; justify-content: space-between; }
.reshoot-link { font-size: 12px; color: var(--text-sub); border: 1px solid var(--border-strong); padding: 6px 12px; border-radius: var(--r-pill); }
/* カレンダー */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-header .cal-title { font-family: var(--font-serif); font-weight: 600; font-size: 17px; }
.cal-header button { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-btn); padding: 7px 14px; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekday { text-align: center; font-size: 11px; color: var(--text-mute); padding: 2px 0; }
.cal-cell { background: var(--surface); border-radius: 8px; min-height: 54px; padding: 4px 2px; font-size: 12px; border: 1px solid transparent; }
.cal-cell.empty { background: transparent; }
.cal-cell.has-event { cursor: pointer; border-color: var(--border); }
.cal-cell.today { border-color: var(--accent); }
.cal-daynum { color: var(--text-sub); text-align: center; }
.cal-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: 3px; }
.cal-badge { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--text-sub); }
.day-detail-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.day-detail-type { display: block; font-weight: 500; font-size: 13px; margin-bottom: 2px; color: var(--text); }
.day-detail-names { font-size: 13px; color: var(--text-sub); }
/* タイムライン比較のタブ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { flex: 1 1 40%; background: var(--surface); color: var(--text-sub); border: 1px solid var(--border); border-radius: var(--r-btn); padding: 9px; cursor: pointer; }
.tabs button.active { background: var(--primary); color: var(--primary-text); border-color: transparent; }
.timeline-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.timeline-item img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); }
.timeline-item .meta { font-size: 13px; color: var(--text-sub); }
.timeline-item .meta .date { font-weight: 500; color: var(--text); font-size: 14px; font-family: var(--font-mono); }
.compare-row { display: flex; gap: 10px; }
.compare-col { flex: 1; text-align: center; }
.compare-col img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.compare-col select { margin-bottom: 8px; }
/* ライトボックス（情報トグル等） */
.lightbox { display: none; }
.lightbox.open { display: flex; }
.lightbox-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); color: #fff; pointer-events: none; }
.lightbox-name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
.lightbox-date { font-size: 14px; opacity: .85; margin-top: 2px; font-family: var(--font-mono); }
.lightbox-toggle { position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top)); background: rgba(255,255,255,.16); color: #fff; font-size: 13px; padding: 8px 12px; border-radius: var(--r-pill); border: none; }
.lightbox-close { background: rgba(255,255,255,.16); border: none; border-radius: 50%; font-size: 18px; }
/* シェア画像作成 */
.preview-wrap { position: sticky; top: 64px; z-index: 5; background: var(--bg); padding: 8px 0 10px; margin: 0 auto 8px; max-width: 420px; text-align: center; }
#preview { max-width: 100%; max-height: 50vh; width: auto; height: auto; border-radius: var(--r-card); display: inline-block; background: var(--surface-2); box-shadow: var(--shadow-card); }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 2px solid transparent; cursor: pointer; }
.thumb.sel { border-color: var(--accent); }
.opt-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; }
.opt-row input { width: auto; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; background: var(--surface-2); padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.actions { display: flex; gap: 10px; margin-top: 12px; }
.actions .btn { flex: 1; }
.field-label { font-size: 13px; color: var(--text-sub); margin: 12px 0 4px; }
.share-layout { display: flex; flex-direction: column; }
@media (min-width: 760px) {
.share-main { max-width: 1000px; }
.share-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
.preview-wrap { flex: 0 0 46%; max-width: none; top: 80px; padding: 0; margin: 0; }
#preview { max-height: 78vh; }
.controls { flex: 1; min-width: 0; }
}
/* ログイン / 初回設定 */
.center-card { max-width: 420px; margin: 0 auto; }
/* =====================================================================
14. 互換レイヤー（既存マークアップをダーク基調に適用）
===================================================================== */
header {
position: sticky; top: 0; z-index: 25;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 18px;
background: var(--surface-bar);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
header h1 { font-family: var(--font-serif); font-weight: 600; font-size: 18px; margin: 0; }
header a { color: var(--text-sub); font-size: 14px; }
main { max-width: 720px; margin: 0 auto; padding: 16px; padding-bottom: 96px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.card a { color: inherit; }
.card h2 { font-family: var(--font-serif); font-weight: 600; font-size: 16px; margin: 0 0 4px; }
.card p { margin: 2px 0; font-size: 13px; color: var(--text-sub); }
.plant-card-link { display: flex; align-items: center; gap: 12px; }
.plant-thumb { width: 64px; height: 64px; border-radius: var(--r-thumb); object-fit: cover; flex-shrink: 0; background: var(--surface-2); border: 1px solid rgba(255,255,255,.06); }
.plant-thumb.empty { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-mute); }
form { display: flex; flex-direction: column; gap: 10px; }
label { font-size: 13px; color: var(--text-sub); display: flex; flex-direction: column; gap: 4px; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
font-size: 16px; padding: 11px 12px; color: var(--text);
background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-btn);
appearance: none;
}
/* チェックボックス・ラジオはネイティブ表示のまま（緑でチェック）*/
input[type="checkbox"], input[type="radio"] {
width: auto; accent-color: var(--accent); transform: scale(1.2); cursor: pointer;
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
button {
font-size: 15px; padding: 12px; border: 1px solid transparent; border-radius: var(--r-btn);
background: var(--primary); color: var(--primary-text); cursor: pointer;
}
button.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.fab {
position: fixed; right: 16px; bottom: 76px; z-index: 20;
display: inline-flex; align-items: center; gap: 9px;
padding: 13px 18px; border-radius: var(--r-pill);
background: var(--accent); color: var(--on-accent);
font-size: 14px; font-weight: 700; box-shadow: var(--shadow-fab);
}
.fab .fab-icon { font-size: 18px; line-height: 1; }
.fab.fab-photo { background: var(--photo); color: #2A1A0C; box-shadow: 0 6px 20px rgba(201,146,90,.32); }
.fab.fab-care { background: var(--water); color: #0E1A24; box-shadow: 0 6px 20px rgba(94,146,194,.32); }
.angles-row { display: flex; gap: 8px; flex-wrap: wrap; }
.angle-box { flex: 1 1 40%; min-width: 90px; text-align: center; }
.angle-box span { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 4px; }
.angle-box img, .angle-box .empty {
width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-thumb);
background: var(--surface-2); border: 1px solid rgba(255,255,255,.06);
}
.angle-box .empty { display: flex; align-items: center; justify-content: center; color: var(--text-mute); font-size: 12px; }
.angle-box img { cursor: pointer; }
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; padding-bottom: env(safe-area-inset-bottom, 0);
background: var(--surface-bar);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
}
.tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 7px; color: var(--text-mute); font-size: 10px; }
.tabbar-item .tabbar-label { white-space: nowrap; }
.tabbar-item .tabbar-icon { font-size: 19px; line-height: 1; }
.tabbar-item.active { color: var(--accent); font-weight: 500; }
/* 株リストのギャラリーカードはサムネを全幅にするため余白を消す */
.plant-grid .card { padding: 0; margin-bottom: 0; }
/* Lucideアイコンのサイズ調整 */
.lucide { stroke-width: 1.75; }
.tabbar-item svg.tabbar-icon { width: 21px; height: 21px; }
.fab svg { width: 18px; height: 18px; }
/* =====================================================================
15. 広告スロット（タブバー直上の固定バナー。無課金時のみ表示）
===================================================================== */
.ad-slot {
position: fixed; left: 0; right: 0;
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
z-index: 28;
height: 54px;
display: flex; align-items: center; justify-content: center;
background: var(--surface-2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
color: var(--text-mute); font-size: 11px; letter-spacing: .08em;
overflow: hidden;
pointer-events: none;
}
.ad-slot__label { opacity: .7; }
/* 広告表示中はコンテンツ・FABの下端を広告ぶん持ち上げる */
body.has-ad main { padding-bottom: 152px; }
body.has-ad .fab { bottom: 128px; }
/* 株の状態タグ（撮影時のトグル＋詳細表示） */
.state-row { display: flex; flex-wrap: wrap; gap: 8px; }
.state-chip {
background: transparent; color: var(--text-sub);
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
padding: 8px 14px; font-size: 13px; cursor: pointer;
}
.state-chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 500; }
.state-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.state-tag {
display: inline-flex; align-items: center;
background: var(--accent-soft); color: var(--accent);
border: 1px solid rgba(127,176,105,.3); border-radius: var(--r-pill);
padding: 4px 11px; font-size: 12px;
}
/* 言語切り替えボタン */
.lang-btn { background: var(--surface-2); color: var(--text-sub); border: 1px solid var(--border-strong); }
.lang-btn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 500; }
/* ケア対象の株選択（チップ式トグル。ネイティブcheckboxより確実） */
#plant-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip {
background: transparent; color: var(--text-sub);
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
padding: 9px 14px; font-size: 14px; cursor: pointer;
}
.check-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 500; }
/* =====================================================================
16. 公開エリア（未ログイン）
===================================================================== */
.pubnav {
position: sticky; top: 0; z-index: 25;
display: flex; align-items: center; gap: 14px;
padding: 12px 16px;
background: var(--surface-bar);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.pubnav__logo { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--text); }
.pubnav__links { display: flex; gap: 14px; margin-left: 6px; overflow-x: auto; flex: 1; }
.pubnav__links a { font-size: 14px; color: var(--text-sub); white-space: nowrap; padding: 4px 0; }
.pubnav__links a.active { color: var(--accent); font-weight: 500; }
.pubnav__login {
flex-shrink: 0; background: var(--primary); color: var(--primary-text);
font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill);
}
.pub-main { max-width: 820px; margin: 0 auto; padding: 20px 16px 60px; }
.pub-hero {
text-align: center; padding: 40px 16px 32px;
}
.pub-hero h1 { font-family: var(--font-serif); font-weight: 600; font-size: 30px; margin: 0 0 10px; }
.pub-hero p { color: var(--text-sub); font-size: 15px; margin: 0 auto; max-width: 520px; }
.pub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; }
.pub-card {
display: block; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow-card);
}
.pub-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.pub-card p { color: var(--text-sub); font-size: 13px; margin: 0; }
.pub-card .ico { font-size: 26px; display: block; margin-bottom: 10px; }
.pub-cta {
display: inline-block; background: var(--accent); color: var(--on-accent);
font-weight: 700; padding: 14px 28px; border-radius: var(--r-pill); margin-top: 8px;
}
.pub-ad {
display: flex; align-items: center; justify-content: center;
height: 90px; margin: 22px 0; border-radius: var(--r-card);
background: var(--surface-2); border: 1px dashed var(--border-strong);
color: var(--text-mute); font-size: 12px; letter-spacing: .08em;
}
.pubfoot {
display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap;
padding: 24px 16px 40px; border-top: 1px solid var(--border);
font-size: 12px; color: var(--text-mute);
}
.pubfoot a { color: var(--text-sub); }
.pub-section-title { font-family: var(--font-serif); font-weight: 600; font-size: 20px; margin: 28px 0 12px; }