/* W5293: karte.tax.men のお客様向け画面(チャット・登録・ログイン・見積・マイページ・免責ほか)を
   lp.tax.men / 入口LP(static/karte_lp_look.css)と同じ配色・書体・頭と足にそろえる。
   🔴 見た目だけ。body.kapp の中だけに効く(管理画面 admin_* は読まない)。
   色: 紺 #173c44 / 薄い水色 #edfaff・#d7f2fa / 橙 #fc8b45(ボタンは橙地に紺文字・角4px) / 罫線 #c9dadb */
body.kapp {
  --ink: #173c44; --muted: #49676c; --sky: #d7f2fa; --sky-soft: #edfaff; --teal: #c0efe1;
  --orange: #fc8b45; --orange-dark: #d9651a; --line: #c9dadb;
  font-family: Arial, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  color: var(--ink); letter-spacing: 0;
}
body.kapp button, body.kapp input, body.kapp select, body.kapp textarea { font-family: inherit; }
body.kapp a:focus-visible, body.kapp button:focus-visible, body.kapp summary:focus-visible { outline: 3px solid #0b758e; outline-offset: 3px; }

/* ===== 頭(ロゴ2つ)・足(会社名) ===== */
.kapp-bar { position: sticky; top: 0; z-index: 20; flex: none; background: #fff; border-bottom: 1px solid var(--line, #c9dadb); }
.kapp-bar-in { max-width: 1280px; margin: 0 auto; min-height: 72px; padding: 0 32px; display: flex; align-items: center; }
.kapp-logos { display: flex; align-items: center; gap: 12px; color: #c9dadb; }
.kapp-logos img { height: 28px; width: auto; display: block; }
.kapp-foot { flex: none; border-top: 1px solid #c9dadb; background: #fff; padding: 28px 32px; font-size: 13px; color: #49676c; text-align: right; }
@media (max-width: 600px) {
  .kapp-bar-in { min-height: 56px; padding: 0 20px; }
  .kapp-logos img { height: 22px; }
  .kapp-foot { padding: 24px 20px; }
}

/* ===== 共通: 背景・ボタン(橙地に紺文字・角4px)・カード(角8px) ===== */
body.kapp { background: #fff; }
html:has(body.kapp) { background: #fff; }
body.kapp > .kapp-bar + * { min-height: calc(100svh - 72px - 78px); }
@media (max-width: 600px) { body.kapp > .kapp-bar + * { min-height: calc(100svh - 56px - 70px); } }
/* 入口と同じ橙のボタン */
body.kapp .st-btn, body.kapp .ev-btn, body.kapp .qv-btn, body.kapp .su-go,
body.kapp .ask-btn.primary { background: #fc8b45; color: #173c44; border-radius: 4px; border: 0; font-weight: 700; }
body.kapp .st-btn:hover, body.kapp .ev-btn:hover:not(:disabled), body.kapp .qv-btn:hover:not(:disabled),
body.kapp .su-go:hover:not(:disabled), body.kapp .ask-btn.primary:hover:not([disabled]) { background: #ee7a33; }
body.kapp .st-btn:disabled, body.kapp .ev-btn:disabled, body.kapp .qv-btn:disabled, body.kapp .su-go:disabled,
body.kapp .ask-btn.primary[disabled] { background: #c9dadb; color: #49676c; }
body.kapp .st-btn.sub { background: transparent; border: 1.5px solid #173c44; color: #173c44; }
body.kapp .qv-rec { color: #173c44; }
/* 面の角は8px・ピル型は4px */
body.kapp .st-card, body.kapp .st-box, body.kapp .ev-card, body.kapp .qv-tier, body.kapp .qv-box, body.kapp .ask-card, body.kapp .card { border-radius: 8px; }
body.kapp .st-filters button, body.kapp .st-qty input, body.kapp .st-form input[type=text], body.kapp .ev-agree input[type=text],
body.kapp .ask-btn, body.kapp .ask-input, body.kapp .ask-select, body.kapp .ask-area, body.kapp .su-input, body.kapp .su-choice label { border-radius: 4px; }
body.kapp .su-input, body.kapp .su-choice label { border-width: 1px; }
body.kapp .su-choice input:checked + label { background: #edfaff; }

/* ===== Tailwind で書かれた画面(ログイン・使い方・SSO) ===== */
body.kapp .bg-gray-50 { background-color: #edfaff; }
body.kapp .bg-gray-900 { background-color: #173c44; }
body.kapp .hover\:bg-gray-50:hover { background-color: #edfaff; }
body.kapp .text-gray-900, body.kapp .text-gray-800, body.kapp .text-gray-700 { color: #173c44; }
body.kapp .text-gray-600, body.kapp .text-gray-500 { color: #49676c; }
body.kapp .text-gray-400 { color: #8aa0a4; }
body.kapp .border-gray-300, body.kapp .border-gray-200 { border-color: #c9dadb; }
body.kapp .bg-gray-300, body.kapp .bg-gray-200 { background-color: #c9dadb; }
body.kapp .bg-blue-600 { background-color: #fc8b45; color: #173c44; }
body.kapp .bg-blue-600:hover, body.kapp .hover\:bg-blue-700:hover { background-color: #ee7a33; }
body.kapp .text-blue-600, body.kapp .hover\:text-blue-600:hover { color: #173c44; }
body.kapp .focus\:ring-blue-500:focus { --tw-ring-color: #0b758e; }
body.kapp .rounded-2xl { border-radius: 8px; }
body.kapp .rounded-xl { border-radius: 4px; }
body.kapp .shadow-lg, body.kapp .shadow-sm { box-shadow: none; border: 1px solid #c9dadb; }
body.kapp .kapp-dup { display: none; }

/* ===== お客様の見積・申込 ===== */
body.kapp .qv-tier.on { border-color: #fc8b45; box-shadow: 0 0 0 3px #fde3d0; }

/* ===== 問診 /ask ===== */
body.kapp .ask-bar i { background: #fc8b45; }
body.kapp .ask-btn:hover:not([disabled]) { border-color: #173c44; }
body.kapp .ask-btn.picked, body.kapp .ask-btn.draft { border-color: #173c44; }

/* ===== チャット(今の画面 chat.html) ===== */
body.kapp .karte-shell { height: calc(100svh - 72px); }
@media (max-width: 600px) { body.kapp .karte-shell { height: calc(100svh - 56px); } }

/* ===== チャット(新しい画面 chat_v2.html)。頭の分だけ縦を縮める ===== */
body.kapp { --kapp-bar-h: 72px; }
body.kapp .app { height: calc(100vh - var(--kapp-bar-h)); height: calc(100dvh - var(--kapp-bar-h)); }
@media (max-width: 600px) { body.kapp { --kapp-bar-h: 56px; } }
body.kapp .kp-aside { top: 72px; }
@media (max-width: 600px) { body.kapp .kp-aside { top: 56px; } }

/* 回答内容の画面は、頭の中にログイン／ログアウトがあるので、自前の #logo-bar を頭と同じ寸法・同じロゴ2つにそろえる */
body.kapp #logo-bar { min-height: 72px; padding: 0 32px; border-bottom: 1px solid #c9dadb; position: sticky; top: 0; z-index: 20; }
body.kapp #logo-bar img { height: 28px; }
body.kapp #auth-area a, body.kapp #auth-area button { font-size: 14px; color: #173c44; }
@media (max-width: 600px) { body.kapp #logo-bar { min-height: 56px; padding: 0 20px; } body.kapp #logo-bar img { height: 22px; } }