/* =====================================================================
theme-warm.css — 「やさしい世界」共通テーマ
---------------------------------------------------------------------
対象＝レイヤーが気軽に使う面：道具箱ランディング / acosta / iris /
写真まわり(image-composer・photo-rename) など。明るいパステル。
使い方（新しい"やさしい"ページはこれだけで統一される）:
1) に:
フォント: Google Fonts で Zen Maru Gothic / Zen Kaku Gothic New
2) を付ける
色はここが唯一の正（single source of truth）。ページ側は var(--w-*) を
使い、生の #色 を各ページに散らさない（＝以前バラついた原因）。
もう一方の世界（クール／技術・ポートフォリオ）は theme-cool.css。
===================================================================== */
:root{
--w-bg:#f8f5f2; --w-surface:#ffffff; --w-surface2:#fbf6f8;
--w-ink:#3a2f38; --w-muted:#877a83; --w-faint:#b3a6af;
--w-line:#eee4ea; --w-line2:#f4ecf1;
--w-accent:#e06a9f; /* ソフトなローズ＝acostaのピンクとマスコットの橋渡し */
--w-accent-strong:#d24f8d;
--w-lav:#8f78c9; /* マスコットのラベンダー */
--w-mint:#69b892; /* マスコットのミント（テキストに使える濃さ） */
--w-ok:#5aa17a; --w-warn:#cf8a3c;
--w-radius:16px;
--w-shadow:0 1px 2px rgba(90,50,75,.05), 0 10px 26px rgba(90,50,75,.07);
--w-font-h:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
--w-font-b:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
--w-font-mono:'JetBrains Mono',ui-monospace,monospace;
}
/* ---- base atoms (opt-in via ) ---- */
body.warm{
margin:0; background:var(--w-bg); color:var(--w-ink);
font-family:var(--w-font-b); font-size:15px; line-height:1.75;
-webkit-font-smoothing:antialiased;
}
.warm a{ color:inherit; }
.warm img{ max-width:100%; }
/* KATTAKI ワードマークを明るい背景で読めるように上書き（マークのコーラル線は維持） */
.warm .kattaki-brand{ color:#3a2f38; }
/* 入力（16px＝iOSズーム防止） */
.warm input[type=text], .warm input[type=date], .warm input[type=number],
.warm input[type=search], .warm select, .warm textarea{
width:100%; background:#fff; color:var(--w-ink);
border:1.5px solid var(--w-line); border-radius:12px; padding:12px 13px;
font-family:var(--w-font-b); font-weight:500; font-size:16px;
}
.warm input::placeholder, .warm textarea::placeholder{ color:var(--w-faint); }
.warm input:focus, .warm select:focus, .warm textarea:focus{
outline:none; border-color:var(--w-accent);
}
.warm input[type=range]{ accent-color:var(--w-accent); }
.warm input[type=checkbox], .warm input[type=radio]{ accent-color:var(--w-accent); }
/* ボタン */
.warm .btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
background:var(--w-accent); color:#fff; border:none; border-radius:12px; padding:14px 16px;
font-family:var(--w-font-h); font-weight:700; font-size:15px; cursor:pointer;
transition:opacity .16s ease, transform .06s ease; box-shadow:0 6px 16px rgba(224,106,159,.26);
}
.warm .btn:hover{ opacity:.9; }
.warm .btn:active{ transform:translateY(1px); }
.warm .btn:disabled{ opacity:.45; cursor:default; box-shadow:none; }
.warm .btn.ghost{ background:#fff; color:var(--w-ink); border:1.5px solid var(--w-line); box-shadow:none; }
.warm .btn.lav{ background:var(--w-lav); box-shadow:0 6px 16px rgba(143,120,201,.26); }
/* .coral はクール世界の"実行"強調クラス名。warm では区別のためラベンダーに割当 */
.warm .btn.coral{ background:var(--w-lav); box-shadow:0 6px 16px rgba(143,120,201,.26); }
.warm .btn.lg{ padding:16px; font-size:16px; }