/* =====================================================================
   デザインスキン「上品ナチュラル」（demo2.php 専用）
   - index.php に DESIGN_SKIN=natural が定義された時だけ読み込まれる。
     現行デザイン（index.php 通常表示・demo.php）には一切影響しない。
   - アクセント色は既存テーマ機構（--green 系CSS変数）をそのまま利用。
     skin_natural.js がパレットをくすみカラーへ差し替える（既定=ローズ）。
   - 生成りベージュ背景＋白カード＋アクセント1色。フォントは
     Zen Maru Gothic（本文）＋ Shippori Mincho（見出し・数字）。
   ===================================================================== */
:root{
  --ink:#4d4643;            /* 温かみのある墨色（本文） */
  --sub:#a89e97;            /* サブテキスト（グレージュ） */
  --line:#efe8e1;           /* 罫線（ほぼ見えない） */
  --sk-bg:#faf6f2;          /* 生成りの背景 */
  --sk-shadow:0 3px 16px rgba(120,90,80,.07);
}
body{
  font-family:"Zen Maru Gothic",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif !important;
  /* ブランド自動配色の下地（--bg1/--bg2）を活かす。未設定時は生成り一色 */
  background:linear-gradient(180deg, var(--bg1, var(--sk-bg)), var(--bg2, var(--sk-bg)) 260px) !important;
  color:var(--ink);
  font-weight:500;
}

/* ---- ヘッダー：白の細いバーに（skin_natural.js が中身をブランドロゴ表記へ差し替え） ---- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.93) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--ink) !important;
  border-radius:0 !important; box-shadow:none !important;
  border-bottom:1px solid var(--line);
  padding:12px 18px !important;
}
header .hdrtheme-lbl{ color:var(--sub) !important; }
header .hdrlogos{ border:1px solid var(--line); }
.sk-b1{ font-family:"Shippori Mincho",serif; font-size:21px; font-weight:600; letter-spacing:.06em; color:var(--ink); }
.sk-b2{ font-size:10px; color:var(--sub); letter-spacing:.22em; margin-left:8px; font-weight:700; }

/* ---- カード共通：枠線を消して余白と影で区切る ---- */
.card{
  border:0 !important;
  border-radius:20px;
  box-shadow:var(--sk-shadow);
  padding:18px;
  margin-bottom:16px;
}

/* ---- あいさつカード：カード面を消して背景に直接置く（skin_natural.jsが挨拶を組み替え） ---- */
.card.hello{ background:transparent; box-shadow:none; padding:4px 2px 0; }
.sk-hl{ font-size:12px; color:var(--sub); letter-spacing:.12em; margin-bottom:3px; }
.sk-hn{ font-family:"Shippori Mincho",serif; font-size:23px; font-weight:600; letter-spacing:.04em; color:var(--ink); }
.sk-hn small{ font-size:13px; font-weight:500; color:var(--sub); margin-left:6px; letter-spacing:.08em; }
/* 次回のご予約バッジ（名前の右横・淡いチップで） */
.sk-hrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sk-hgrp{ min-width:0; }
.sk-next{ display:inline-block; margin-top:0; background:var(--acc-bg,#f7ece9) !important;
  border:1px solid rgba(var(--green-rgb),.3) !important; color:var(--green-d) !important;
  font-size:11.5px !important; font-weight:700 !important; border-radius:14px; padding:6px 12px !important;
  white-space:nowrap !important; text-align:left; line-height:1.35; flex:0 0 auto; }

/* ---- 記録メニューの固定ドック ---- */
#fisDock{ background:rgba(255,252,250,.97) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--line) !important; box-shadow:0 -6px 22px rgba(120,90,80,.12) !important; }
#dockToggle{ color:var(--sub) !important; }
#fisDock .featbtn .fbi{ box-shadow:0 2px 8px rgba(120,90,80,.12); }
/* デスクトップではドックをコンパクトに */
@media (min-width:700px){
  #fisDock .featbtn .fbi{ width:36px; height:36px; font-size:15px; }
  #fisDock .featbtn .fbi svg{ width:15px; height:15px; }
}

/* ---- ホームの機能ボタン：白い丸にアイコン（絵文字→細線SVGはJSが差し替え） ---- */
.featrow{ margin-top:16px; }
.featbtn .fbi{
  width:50px; height:50px; border-radius:50%;
  background:#fff; box-shadow:0 2px 10px rgba(120,90,80,.10);
  font-size:21px;                       /* 天気など絵文字のまま残るものはこのサイズで表示 */
  display:flex; align-items:center; justify-content:center;
  color:var(--green-d);                 /* SVGアイコン(currentColor)の線色 */
}
.featbtn:active .fbi{ transform:scale(.92); }
.featbtn .fbi svg{ width:21px; height:21px; }
.featbtn .fbl{ color:var(--sub); font-weight:700; }
.featbtn .fbv{ color:var(--ink); }

/* ---- 目標ボックス：淡いベージュのカードに ---- */
.goalbox{
  background:linear-gradient(135deg,#fdf9f6,#f7efe9) !important;
  border:1px solid #f3e6df !important;
  border-radius:16px;
}
.goalbox .gh{ letter-spacing:.14em; font-size:11px; }

/* ---- プランカード（リング進捗は skin_natural.js が組み立てる） ---- */
.card.plan{ background:#fff !important; border:0 !important; font-weight:500; }
.card.plan.sk-plan{ display:flex; align-items:center; gap:16px; }
.card.plan.sk-plan .sk-pi{ min-width:0; flex:1; }
.sk-ring{ position:relative; width:84px; height:84px; flex:0 0 auto; }
.sk-ring svg{ display:block; transform:rotate(-90deg); }
.sk-ring .n{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sk-ring .n b{ font-family:"Shippori Mincho",serif; font-size:24px; font-weight:600; line-height:1; color:var(--green-d); }
.sk-ring .n span{ font-size:9px; color:var(--sub); margin-top:3px; letter-spacing:.08em; }

/* ---- ボタン類 ---- */
.btn{ border-radius:14px; box-shadow:0 5px 14px rgba(var(--green-rgb),.28); }
.storebtn{ border-width:1.5px; border-radius:16px; }
.storesel{ border:1px solid var(--line); border-radius:14px; color:var(--ink); font-weight:700; }
.freqchip{ border-width:1.5px; border-radius:999px; }
.usagebtn{ border:1px solid var(--line); border-radius:14px; }

/* ---- タブ：ベージュのトラックに白いピル ---- */
.tabs{ background:#f1e9e2; border-radius:999px; padding:4px; }
.tab{ border-radius:999px; color:var(--sub); }
.tab.on{ color:var(--green-d); box-shadow:0 2px 8px rgba(120,90,80,.12); }

/* ---- 本日の空き枠：角丸ボタン（白地＋アクセント枠） ---- */
.todaypill{
  background:#fff !important;
  border:1.5px solid var(--green);
  color:var(--green-d) !important;
  font-weight:700; font-size:13px;
  padding:8px 15px; border-radius:999px;
}

/* ---- カレンダー：四角い枠→丸い日付＋予約可能日はアクセントの点 ---- */
.calnav .caltitle{ font-family:"Shippori Mincho",serif; font-weight:600; letter-spacing:.08em; color:var(--ink); }
.calnav button{ width:32px; height:32px; border:1px solid var(--line); border-radius:50%; font-size:15px; }
.calhead{ color:var(--sub); letter-spacing:.05em; }
.calhead .sat{ color:#8da4cf; } .calhead .sun{ color:#cf8d8d; }
.calgrid{ gap:4px; row-gap:6px; }
.cday{
  border:0 !important; background:transparent;
  border-radius:50%; width:82%; margin:0 auto;
  font-weight:600; font-size:14px; position:relative;
}
.cday.sat{ color:#8da4cf; } .cday.sun{ color:#cf8d8d; }
.cday.gray{ opacity:1; color:#d8d0c9; }
/* 空き状況は点でなく記号（◎△×−）＝本体CSSの .cav が描く（2026-07-17 本人依頼） */
.cday{ flex-direction:column; gap:0; }
.cday.on{ background:var(--green); color:#fff !important; box-shadow:0 4px 12px rgba(var(--green-rgb),.4); }

/* ---- 空き枠タイル ---- */
.slot{ border:0; border-left:0; border-radius:14px; box-shadow:0 1px 8px rgba(120,90,80,.07); }
.slot.wl{ background:#f4efe9; box-shadow:none; }

/* ---- 注意事項（skin_natural.jsが折りたたみ化） ---- */
.notice{ background:transparent; color:#8d847f; }
.sk-notes-h{ cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; margin-bottom:0 !important; color:var(--ink) !important; }
.sk-notes-h .sk-ar{ color:var(--green-d); font-size:11px; transition:transform .2s; }

/* ---- モーダル・ガイド・その他の緑ベタ部分をトーン合わせ ---- */
.modal{ border-radius:22px; }
.modal-title{ font-family:"Shippori Mincho",serif; font-weight:600; }
.modal-note{ background:#f7efe9; color:#7a6a60; }
.storebtn .tag{ background:#f7efe9; color:var(--green-d); }
.histhead{ border:0; box-shadow:var(--sk-shadow); border-radius:14px; }
.picker-card{ border-radius:20px; }
.picker-it{ border:1px solid var(--line); border-radius:12px; }
.gcard{ border:0; border-left:3px solid var(--green); box-shadow:var(--sk-shadow); }
.wlhead{ background:#faf3e6; border-color:#eee0c4; border-radius:12px; }

/* ---- 研修デモの切替バー：黒→墨色でトーン合わせ ---- */
#demoSwitch{ background:#4d4643 !important; }

/* ---- 「DEMO」透かし：白ヘッダーでは白文字が見えない→濃いローズではっきり表示（本人指摘 2026-07-17） ---- */
#demoBadge{ color:var(--green-d) !important; opacity:1 !important; text-shadow:none !important; font-size:20px !important; }

/* ---- 天気/UV/洗濯の説明ポップアップ（weather.js共通部品）：閉じるボタンをテーマ色に ---- */
.wpX{ background:var(--green) !important; border-radius:14px !important; }

/* ---- 本日の空き枠：見出し＝べた塗りバッジ＋時間はテキスト（本人指摘 2026-07-17「ボタンに見えると押せそうで紛らわしい」） ---- */
.sk-avrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.sk-avb{ background:var(--green); color:#fff !important; border-radius:999px; padding:8px 16px;
  font-size:12.5px; font-weight:700; flex:0 0 auto; margin:0 !important; }
.sk-avt{ display:flex !important; flex-wrap:wrap; gap:2px 12px; align-items:center; margin:0 !important; }
.sk-avt .todaypill{ border:0 !important; background:none !important; padding:0 !important;
  color:var(--ink) !important; font-size:13.5px; font-weight:700; border-radius:0; }