/* 基礎代謝・PFC・カロリー計算ツール専用スタイル。本文幅のまま縦に積む(2カラムにしない)。CSSの単位はすべてrem。 */
.pt-cp-tool {
    background: #f0fdf4; border: 0.0625rem solid #bbf7d0; border-radius: 0.8rem; padding: 0.8rem; margin: 1rem 0;
}
.pt-cp-h2 { margin: 0.8rem 0 0.5rem; font-size: 1rem; color: #166534; }
.pt-cp-h2:first-child { margin-top: 0; }
.pt-cp-h2 small { display: block; font-weight: 400; font-size: 0.72rem; color: #4d7c0f; margin-top: 0.1rem; }

.pt-cp-result-panel {
    background: #dcfce7; border: 0.0625rem solid #86efac; border-radius: 0.6rem; padding: 0.7rem 0.8rem; margin: 0 0 0.8rem;
}
.pt-cp-result-panel .pt-cp-h2 { color: #14532d; }

.pt-cp-tool .pt-cp-cards6 { margin-top: 0; }
@media (min-width: 56rem) {
    .pt-cp-tool .pt-cp-cards6 { grid-template-columns: repeat(6, 1fr); }
    .pt-cp-tool .pt-cp-cards6 .pt-hi-card { padding: 0.55rem 0.6rem; }
    .pt-cp-tool .pt-cp-cards6 .pt-hi-card__value { font-size: 0.84rem; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
    .pt-cp-tool .pt-cp-cards6 .pt-hi-card__label { font-size: 0.72rem; min-height: 1.8rem; }
}

.pt-cp-fields {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; margin: 0 0 0.6rem;
    align-items: end; /* 見出しの補足の有無で高さが違っても、入力欄の下端をそろえる */
}
.pt-cp-fields[hidden] { display: none; }
.pt-cp-field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem; color: #166534; font-weight: 700; border: 0; padding: 0; margin: 0; }
.pt-cp-field > span:not(.pt-cp-slider-row), .pt-cp-field > legend { display: block; min-height: 1.4rem; padding: 0; }
.pt-cp-field small { display: block; font-weight: 400; font-size: 0.68rem; color: #4d7c0f; margin-top: 0.1rem; }
.pt-cp-field--wide { grid-column: 1 / -1; }
.pt-cp-input, .pt-cp-select {
    box-sizing: border-box; padding: 0.5rem; border: 0.0625rem solid #cbd5e1; border-radius: 0.4rem;
    font-size: 0.95rem; background: #fff; width: 100%; color: #0f172a; font-weight: 700;
}
/* プレースホルダー(未入力の例)と、実際に入力された値を、はっきり区別できるようにする */
.pt-cp-input::placeholder { color: #94a3b8; font-weight: 400; font-style: italic; opacity: 1; }

.pt-cp-slider-row { display: flex; align-items: center; gap: 0.5rem; }
.pt-cp-range { flex: 1 1 auto; min-width: 0; accent-color: #16a34a; cursor: pointer; }
.pt-cp-range:disabled { cursor: not-allowed; opacity: 0.5; }
.pt-cp-slider-num { flex: 0 0 auto; width: 3.6rem; min-width: 0; padding: 0.35rem; }

.pt-cp-label { font-size: 0.85rem; font-weight: 700; color: #166534; margin: 0 0 0.4rem; }
.pt-cp-label small { display: block; font-weight: 400; font-size: 0.72rem; color: #4d7c0f; }

.pt-cp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.pt-cp-chip { position: relative; cursor: pointer; }
.pt-cp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pt-cp-chip span { display: inline-block; padding: 0.4rem 0.9rem; border: 0.0625rem solid #cbd5e1; border-radius: 999rem; background: #fff; color: #334155; font-size: 0.88rem; }
.pt-cp-chip input:checked + span { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700; }
.pt-cp-chip--btn {
    border: 0.0625rem solid #86efac; background: #fff; color: #166534; border-radius: 999rem;
    padding: 0.35rem 0.8rem; font-size: 0.82rem; cursor: pointer;
}

.pt-cp-adjust { background: #fff; border: 0.0625rem dashed #86efac; border-radius: 0.6rem; padding: 0.6rem; margin: 0 0 0.6rem; }

.pt-cp-sum { font-size: 0.85rem; font-weight: 700; color: #166534; margin: 0 0 0.7rem; }
.pt-cp-sum.is-bad { color: #b91c1c; }

.pt-cp-msg { color: #b91c1c; font-weight: 700; margin: 0.4rem 0; }
.pt-cp-msg[hidden] { display: none; }
.pt-cp-warn { color: #991b1b; font-weight: 700; }

.pt-cp-basic-row { display: block; }
.pt-cp-fields--sex { margin: 0 0 0.7rem; }
@media (min-width: 40rem) {
    .pt-cp-basic-row { display: grid; grid-template-columns: max-content 1fr; gap: 1rem; align-items: start; }
    .pt-cp-fields--sex { margin: 0; }
}

.pt-cp-silhouette {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
    background: #fff; border: 0.0625rem solid #bbf7d0; border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin: 0 0 0.7rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pt-cp-silhouette-svg { width: 2.6rem; height: 4.8rem; overflow: visible; flex: 0 0 auto; }
.pt-cp-sil-head, .pt-cp-sil-part { fill: #4ade80; transition: fill 0.15s ease; }
.pt-cp-sil-scale { transform-origin: 60px 213px; transition: transform 0.15s ease; }
.pt-cp-sil-body { transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease; }
.pt-cp-silhouette.is-male { background: #eff6ff; border-color: #bfdbfe; }
.pt-cp-silhouette.is-male .pt-cp-sil-head, .pt-cp-silhouette.is-male .pt-cp-sil-part { fill: #60a5fa; }
.pt-cp-silhouette.is-female { background: #fdf2f8; border-color: #fbcfe8; }
.pt-cp-silhouette.is-female .pt-cp-sil-head, .pt-cp-silhouette.is-female .pt-cp-sil-part { fill: #f472b6; }
.pt-cp-steppers { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; flex: 1 1 14rem; min-width: 0; }
.pt-cp-stepper { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pt-cp-stepper__label { font-size: 0.72rem; font-weight: 700; color: #166534; white-space: nowrap; }
.pt-cp-stepper__row { display: flex; align-items: center; gap: 0.3rem; }
.pt-cp-stepper__input { width: 4.2rem; min-width: 0; text-align: center; flex: 0 0 auto; }
.pt-cp-stepbtn {
    width: 1.7rem; height: 1.7rem; border-radius: 999rem; border: 0.0625rem solid #16a34a;
    background: #fff; color: #166534; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
@media (min-width: 40rem) {
    .pt-cp-steppers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.5rem; width: 100%; }
    .pt-cp-stepper__label { overflow: hidden; text-overflow: ellipsis; }
    .pt-cp-stepper__row { gap: 0.2rem; }
    .pt-cp-stepper__input { width: 100%; flex: 1 1 auto; padding: 0.4rem 0.2rem; }
    .pt-cp-stepbtn { width: 1.5rem; height: 1.5rem; font-size: 0.9rem; }
}
.pt-cp-stepbtn:active { background: #dcfce7; }

/* カード見出しの行数が1行・2行と揃わないと、太字の数値の高さがずれるため、見出しの高さを固定する */
.pt-cp-tool .pt-hi-card__label { min-height: 2rem; line-height: 1.3; display: block; }

.pt-cp-share { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 0.0625rem solid #bbf7d0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pt-cp-btn {
    border: 0.0625rem solid #16a34a; background: #fff; color: #166534; border-radius: 0.5rem;
    padding: 0.55rem 1rem; font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.pt-cp-share-msg { margin: 0; font-weight: 700; color: #166534; min-height: 1.2rem; width: 100%; }

/* 印刷専用のまとめ(画面上は常に非表示。印刷直前にJSが組み立てる) */
.pt-cp-print-summary { display: none; }

/* 印刷用(A4縦)。入力フォーム・ナビ・広告・コラム等は印刷せず、印刷専用のまとめだけを印刷する */
@media print {
    @page { size: A4 portrait; margin: 15mm; }

    #pt-gnav, .pt-breadcrumb, h1, .pt-cp-intro, .pt-note, .pt-ac-warnbox, .pt-cp-faq-heading, .pt-faq,
    .pt-column-section, .pt-ad-slot, footer {
        display: none !important;
    }
    /* ツール本体は、印刷専用のまとめ(.pt-cp-print-summary)以外の直下の要素をすべて隠す */
    .pt-cp-tool > *:not(.pt-cp-print-summary) { display: none !important; }

    .pt-cp-print-summary { display: block; }
    .pt-cp-print-title { margin: 0 0 0.2rem; font-size: 1.4rem; }
    .pt-cp-print-date { margin: 0 0 1rem; color: #555; font-size: 0.85rem; }
    .pt-cp-print-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.2rem; }
    .pt-cp-print-table th, .pt-cp-print-table td { border: 0.0625rem solid #999; padding: 0.4rem 0.6rem; text-align: left; }
    .pt-cp-print-table th { background: #f2f2f2; width: 40%; }
    .pt-cp-print-footer { margin-top: 0.8rem; font-size: 0.75rem; color: #777; }
}