/* 整体院向け：白い壁＋節のある杉の板張り＋オークの床＋墨色の家具。ダウンライトの光と、しっかりした影 */
body.theme-wood {
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #f6f2ec;
  --line: #e6dfd5;
  --text: #24211e;
  --muted: #847a70;
  --accent: #2b2926;        /* 墨色（黒いテーブル） */
  --accent-ink: #fbf7f0;
  --accent-soft: #eeeae4;
  --stone: #6e6a65;          /* グレーのいす */
  --cedar: #c8955a;          /* 杉の色 */
  --cedar-deep: #8f5f2e;
  --oak-ink: #3a2a1a;
  --radius: 16px;
  --shadow:
    0 1px 2px rgba(40, 28, 16, .08),
    0 10px 24px -6px rgba(40, 28, 16, .16),
    0 34px 60px -24px rgba(40, 28, 16, .28);
  --shadow-lift:
    0 2px 4px rgba(40, 28, 16, .1),
    0 18px 34px -8px rgba(40, 28, 16, .22),
    0 48px 80px -28px rgba(40, 28, 16, .34);
  --font-head: "Noto Serif JP", serif;
  --font-latin: "Noto Serif JP", serif;
  /* 杉の板張り：縦に並ぶ板、板ごとの色むら、細い木目、節、継ぎ目 */
  --cedar-boards: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='900'><defs><radialGradient id='k'><stop offset='0' stop-color='%23603617' stop-opacity='.95'/><stop offset='.3' stop-color='%23875527' stop-opacity='.7'/><stop offset='.6' stop-color='%23b07a40' stop-opacity='.3'/><stop offset='1' stop-color='%23c99a60' stop-opacity='0'/></radialGradient><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.13 0.0024' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.3  0 0 0 0 0.12  0 0 0 1.25 -0.3'/></filter></defs><rect width='300' height='900' fill='%23ebc994'/><rect x='75' width='75' height='900' fill='%23e2b97f'/><rect x='150' width='75' height='900' fill='%23efd3a3'/><rect x='225' width='75' height='900' fill='%23dcb075'/><rect width='300' height='900' filter='url(%23g)'/><ellipse cx='38' cy='170' rx='9' ry='15' fill='url(%23k)'/><ellipse cx='112' cy='520' rx='11' ry='18' fill='url(%23k)'/><ellipse cx='96' cy='80' rx='6' ry='10' fill='url(%23k)'/><ellipse cx='190' cy='330' rx='8' ry='13' fill='url(%23k)'/><ellipse cx='262' cy='760' rx='10' ry='17' fill='url(%23k)'/><ellipse cx='30' cy='690' rx='6' ry='9' fill='url(%23k)'/><ellipse cx='205' cy='840' rx='6' ry='10' fill='url(%23k)'/><ellipse cx='250' cy='120' rx='7' ry='11' fill='url(%23k)'/><ellipse cx='170' cy='610' rx='5' ry='8' fill='url(%23k)'/><ellipse cx='55' cy='420' rx='5' ry='8' fill='url(%23k)'/><path d='M75 0V900M150 0V900M225 0V900M300 0V900' stroke='%238a5a2b' stroke-opacity='.4' stroke-width='1.2'/><path d='M76 0V900M151 0V900M226 0V900M1 0V900' stroke='%23fff6e6' stroke-opacity='.5'/><path d='M0 430H75M75 760H150M150 250H225M225 560H300' stroke='%238a5a2b' stroke-opacity='.35'/></svg>");
  /* オークの床：明るい黄みの板。床は奥へ流れるように縦長の板 */
  --oak-floor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.09 0.006' numOctaves='4' seed='21'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.38  0 0 0 0 0.16  0 0 0 0.6 -0.12'/></filter><rect width='480' height='240' fill='%23e7c08a'/><rect x='80' width='80' height='240' fill='%23e1b57a'/><rect x='240' width='80' height='240' fill='%23ebc796'/><rect x='400' width='80' height='240' fill='%23dfb176'/><rect width='480' height='240' filter='url(%23f)'/><path d='M80 0V240M160 0V240M240 0V240M320 0V240M400 0V240M480 0V240' stroke='%23946232' stroke-opacity='.35'/><path d='M0 150H80M160 60H240M320 190H400' stroke='%23946232' stroke-opacity='.3'/></svg>");
  background:
    radial-gradient(70% 45% at 55% -12%, rgba(255, 238, 205, .7), transparent 70%),
    linear-gradient(180deg, #fbfaf7 0%, #f3f0ea 100%);
  background-attachment: fixed;
}

/* 床：画面の下に、壁との境の白い幅木と、オークの床を敷く（文字やカードの後ろ） */
body.theme-wood::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 15vh; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, #fdfcf9 0 7px, rgba(60, 40, 20, .28) 7px, rgba(60, 40, 20, 0) 26px),
    linear-gradient(180deg, rgba(255, 245, 225, .35), rgba(120, 80, 40, .12)),
    var(--oak-floor);
  background-size: auto, auto, 480px 240px;
}

/* ヘッダー＝杉の板張り。パソコンでは左の縦長パネル、スマホでは上の帯 */
.theme-wood .app-header {
  position: relative;
  color: var(--oak-ink);
  background:
    radial-gradient(90px 70px at 22% 0, rgba(255, 246, 222, .85), transparent 75%),
    radial-gradient(90px 70px at 78% 0, rgba(255, 246, 222, .85), transparent 75%),
    linear-gradient(180deg, rgba(255, 250, 238, .12), rgba(120, 75, 30, .1)),
    var(--cedar-boards);
  background-size: auto, auto, auto, 300px 900px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -3px 0 rgba(120, 80, 40, .18),
    0 4px 8px rgba(40, 28, 16, .1),
    0 22px 44px -10px rgba(40, 28, 16, .3);
  border-radius: 0 0 26px 26px;
  padding-bottom: 6px;
}
/* ダウンライト */
.theme-wood .app-header::before {
  content: ""; position: absolute; top: 10px; left: 22%; width: 56%; height: 8px; pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, #fffdf6 0 3px, rgba(255, 236, 190, .6) 4px, transparent 8px),
    radial-gradient(circle at 100% 50%, #fffdf6 0 3px, rgba(255, 236, 190, .6) 4px, transparent 8px);
}
.theme-wood .brand { align-items: center; }
.theme-wood .brand-name {
  font-weight: 700; letter-spacing: .1em; font-size: 22px; color: var(--accent);
  padding: 4px 14px; border: 2px solid var(--accent); border-radius: 12px; background: rgba(255, 253, 248, .7);
  box-shadow: 0 6px 14px -4px rgba(40, 28, 16, .25);
}
.theme-wood .brand-sub { color: #4e3a27; opacity: 1; font-weight: 500; }
.theme-wood .brand-ai { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.theme-wood .demo-note { color: #5a4530; opacity: 1; }
.theme-wood .tab { color: var(--oak-ink); opacity: .85; border-radius: 99px; border-bottom: 0; padding: 9px 16px; font-weight: 500; transition: background .2s, box-shadow .2s, transform .2s; }
.theme-wood .tab:hover { background: rgba(255, 253, 248, .55); opacity: 1; }
.theme-wood .tab[aria-selected="true"] {
  background: var(--accent); color: var(--accent-ink); opacity: 1; font-weight: 700;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2), 0 12px 22px -6px rgba(30, 20, 10, .45);
}

@media (min-width: 900px) {
  .theme-wood .app-header {
    position: fixed; left: 16px; top: 16px; bottom: 16px; width: 268px; z-index: 20;
    border-radius: 28px; padding: 30px 18px; overflow-y: auto;
  }
  .theme-wood .app-header .inner { max-width: none; display: flex; flex-direction: column; height: 100%; }
  .theme-wood .brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .theme-wood .tabs { flex-direction: column; gap: 6px; margin-top: 26px; overflow: visible; }
  .theme-wood .tabs::before { content: "メニュー"; font-size: 12px; color: #5a4530; padding: 0 6px 4px; }
  .theme-wood .tab { text-align: left; padding: 12px 18px; font-size: 15px; }
  .theme-wood .tab:hover { transform: translateX(3px); }
  .theme-wood .demo-note { order: 3; margin-top: auto; padding: 12px; font-size: 11.5px; background: rgba(255, 253, 248, .6); border-radius: 14px; box-shadow: 0 6px 16px -6px rgba(40, 28, 16, .25); }
  .theme-wood main, .theme-wood .app-foot { margin-left: 300px; max-width: 1180px; padding-left: 24px; padding-right: 32px; }
  .theme-wood main { padding-top: 34px; padding-bottom: 16vh; }
}

/* 本文：白い面に、しっかりした影。差し色は墨色と杉色 */
.theme-wood h2.sec { display: flex; align-items: center; gap: 10px; font-size: 21px; }
.theme-wood h2.sec::before { content: ""; width: 5px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, #d9ad74, var(--cedar-deep)); box-shadow: 0 2px 4px rgba(90, 55, 20, .3); }
.theme-wood .card { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow); transition: box-shadow .25s, transform .25s; }
.theme-wood .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-lift); }
.theme-wood .kpi-tile { position: relative; overflow: hidden; }
.theme-wood .kpi-tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #e2bd86, var(--cedar-deep)); }
.theme-wood .kpi-tile .value { color: var(--accent); font-weight: 700; }
.theme-wood .btn { border-radius: 99px; box-shadow: 0 1px 2px rgba(40, 28, 16, .08), 0 6px 14px -6px rgba(40, 28, 16, .25); }
.theme-wood .btn.primary {
  background: linear-gradient(180deg, #3a3733, #22201d); border-color: #1d1b19; color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 3px rgba(0, 0, 0, .2), 0 14px 26px -8px rgba(20, 14, 8, .5);
}
.theme-wood .btn.primary:hover { transform: translateY(-1px); }
.theme-wood .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 16px -6px rgba(20, 14, 8, .45); }
.theme-wood .badge { background: #f3e6d2; color: var(--cedar-deep); }
.theme-wood .bar > i { background: linear-gradient(90deg, #d9ad74, var(--cedar-deep)); }
.theme-wood .ai-box { border: 1px solid #e3d3bd; background: linear-gradient(180deg, #fbf6ee, #fff); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(90, 55, 20, .3); }
.theme-wood .ai-box .label { color: var(--cedar-deep); }
.theme-wood .callout.info { border-left-color: var(--cedar); background: #fbf4e9; }
.theme-wood .list-btn[aria-current="true"] { background: #f4ece0; box-shadow: inset 3px 0 0 var(--cedar); }
.theme-wood .input:focus { border-color: var(--cedar); box-shadow: 0 0 0 3px rgba(200, 149, 90, .22); }