@charset "UTF-8";
/**
 * profit-calculator.css — 販路別 利益比較UI（PHASE B / 2026-09-18）。
 *
 * デザインの筋
 *   「仕入れメモ × 電卓 × レシート」。
 *   店頭で片手に持ち、説明を読まずに数字を3つ書き込める道具にする。
 *   レトロ風・ジョーク風にはしない。紙らしさは、罫線・地の色・数字の組み方だけで出す。
 *
 *   1枚のメモ    入力は1枚の紙の上に上から順。カードを3つ並べない
 *   1つの答え    計算結果はまず1つだけ。大きく、金額が主役
 *   明細         他販路はレシートの明細のような1行。叩いたときだけ内訳
 *
 * ブランド（Design v2.3 と同じ対。新しい色は足さない）
 *   紺 #12294d      文字・太い区切り・重要UI
 *   琥珀 #f0a92c    入力と注目点
 *   ミント #157553  正常な計算結果
 *   クリーム #faf7f2 / 紙 #fffdf8
 *
 * 視覚の優先順位
 *   結論部   利益額 → 販路名 → 説明文 → 注意書き
 *   明細行   金額 → 販路名 → 前提 → 内訳（展開後）
 *   「おすすめ」「1位」は示さない。示しているのは「この条件で最も多く残る」だけなので、
 *   王冠・メダル・BEST・金色・派手な緑は使わない。
 *
 * ここにある数値はすべてレイアウトのためのもので、料金とは無関係。
 */

.pc-root {
  --pc-navy: #12294d;
  --pc-navy-soft: #3c5170;
  --pc-amber: #f0a92c;
  --pc-amber-deep: #8a5c07;      /* クリーム地の上でも4.5:1を満たす琥珀 */
  --pc-amber-tint: #fff4e0;

  --pc-bg: #faf7f2;
  --pc-card: #fffdf8;            /* 紙。真っ白にしない */
  --pc-ink: #2b2622;
  --pc-ink-soft: #5f574f;
  /* 第3階層の文字。白地・クリーム地のどちらでも 4.5:1 を満たす濃さにしてある。
     これより薄くすると公式確認日と出典が読めなくなる。 */
  --pc-ink-faint: #6f665d;
  --pc-line: #e6ded3;
  --pc-line-strong: #d5c9ba;
  --pc-accent: #157553;           /* ミント。正常に計算できた利益 */
  --pc-accent-soft: #eaf4ef;
  --pc-loss: #9c3227;
  --pc-loss-soft: #fdf1ef;
  --pc-radius: 12px;

  background: var(--pc-bg);
  color: var(--pc-ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  .pc-root {
    --pc-navy: #c7d6ea;
    --pc-navy-soft: #93a7c4;
    --pc-amber: #f0a92c;
    --pc-amber-deep: #e9bd6e;
    --pc-amber-tint: #33291a;
    --pc-bg: #1c1a18;
    --pc-card: #26231f;
    --pc-ink: #eee8e0;
    --pc-ink-soft: #bdb4aa;
    --pc-ink-faint: #a99f95;
    --pc-line: #3a3530;
    --pc-line-strong: #4a443d;
    --pc-accent: #93c4a8;
    --pc-accent-soft: #23302a;
    --pc-loss: #ea9e93;
    --pc-loss-soft: #33211e;
  }
}

.pc-root * { box-sizing: border-box; }

/*
 * hidden 属性を必ず効かせる。
 * .pc-bd に display:grid を当てているため、これが無いと
 * ブラウザ既定の [hidden]{display:none} が上書きされ、
 * 折りたたんだはずの内訳が最初から開いてしまう。
 */
.pc-root [hidden] { display: none !important; }

.pc-root :focus-visible {
  outline: 2px solid var(--pc-navy);
  outline-offset: 2px;
}

/* ---------- 単独ページとして出すときの見出し ---------- */
.pc-head h1 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--pc-navy);
}
.pc-fine { margin: 0 0 14px; font-size: .78rem; color: var(--pc-ink-faint); }

/* =====================================================================
   1. 仕入れメモ（入力）
   ---------------------------------------------------------------------
   紙1枚。上辺に紺の太い線を引いて「ここから書き込む」ことを示す。
   入力欄を枠で囲わず、下罫線だけにして、書き込み欄そのものに見せる。
   ===================================================================== */
.pc-memo {
  position: relative;
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  border-top: 4px solid var(--pc-navy);
  border-radius: 3px;                  /* 紙なので角はほぼ立てる */
  padding: 14px 16px 10px;
  box-shadow: 0 1px 2px rgba(43, 38, 34, .05);
}

.pc-memo__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pc-memo__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pc-navy);
}
/* 見出しの下に紺の点線。伝票の記入欄らしさはここだけで出す。 */
.pc-memo__title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 5px;
  background: var(--pc-amber);
}

/* ナビ役のキャラクター。飾りではなく「3つでいい」と伝えるためだけに1回だけ出す。
   メモの右上に貼ったシールのように、紙の外へ少しはみ出して置く。
   流し込みから外すのは見た目のためだけではない。ここに56pxの高さが居座ると、
   その分だけ最初の入力欄が下がる（375pxでは24px分、1画面目の生死に効く）。 */
.pc-memo__navi {
  position: absolute;
  top: -18px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-memo__say {
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pc-navy);
  background: var(--pc-amber-tint);
  border: 1px solid var(--pc-line-strong);
  border-radius: 12px 12px 3px 12px;
  padding: 4px 9px;
  white-space: nowrap;
}
.pc-memo__face {
  width: 60px;
  height: 72px;
  background-image: url("../img/character/sedori-navi@1x.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}

.pc-memo__how {
  margin: 4px 0 14px;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--pc-ink-soft);
}

/* ---------- 入力1件 ---------- */
.pc-field + .pc-field { margin-top: 16px; }
.pc-field label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
  font-size: 1rem;
}
.pc-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pc-navy);
  color: #fffdf8;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .pc-no { color: #1c1a18; }
}
.pc-label-text { font-weight: 700; letter-spacing: .01em; }

/* 「必須」「空欄なら0円」。ラベル本体より一段弱く、でも読める濃さで。 */
.pc-hint {
  font-size: .7rem;
  line-height: 1.5;
  color: var(--pc-ink-soft);
  background: var(--pc-bg);
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* 記入欄。枠では囲わず、下の罫線と薄い地で「ここに書く」を示す。
   2026-09-18（PASS 4）：罫線1本だけだと、初見で入力欄だと分からなかった。
   紙の記入欄と同じく、書く場所だけをうっすら沈ませて罫線を濃くする。 */
.pc-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-bottom: 2px solid var(--pc-navy-soft);
  border-radius: 6px 6px 0 0;
  background: rgba(18, 41, 77, .045);
  padding: 0 8px 2px;
}
.pc-input-wrap:focus-within {
  border-bottom-color: var(--pc-amber);
  background: var(--pc-amber-tint);
}
/* 暗い配色では紺を薄く敷いても沈まない。地より明るくして同じ意味を出す。 */
@media (prefers-color-scheme: dark) {
  .pc-input-wrap { background: rgba(238, 232, 224, .06); }
}

.pc-root input[type="text"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 48px;            /* タップ領域 */
  padding: 4px 6px;
  font-size: 1.35rem;          /* 数字が主役。iOSの自動ズームも避ける */
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-align: right;
  color: var(--pc-ink);
  background: transparent;
  border: 0;
}
/* 実際に入れた数字と例示を見分けられるようにする。
   opacity は重ねない（重ねると実効コントラストがAA未達になる。2026-09-14 監査で実測）。 */
.pc-root input::placeholder {
  color: var(--pc-ink-faint);
  opacity: 1; /* ブラウザ既定（Firefoxは0.54）の薄め表示も打ち消す */
  font-size: .78em;
  font-weight: 400;
  letter-spacing: 0;
}
.pc-unit {
  flex: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pc-ink-soft);
}

.pc-root [aria-invalid="true"] { color: var(--pc-loss); }
.pc-input-wrap:has([aria-invalid="true"]) { border-bottom-color: var(--pc-loss); }

.pc-err { margin: 5px 0 0; font-size: .8rem; color: var(--pc-loss); }
.pc-err:empty { display: none; }
.pc-note { margin: 6px 0 0; font-size: .78rem; line-height: 1.6; color: var(--pc-ink-soft); }

/* ---------- 詳細設定 ---------- */
.pc-details { margin-top: 10px; border-top: 1px dashed var(--pc-line-strong); }
.pc-details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 8px 2px;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--pc-navy);
  background: none;
  border: 0;
  cursor: pointer;
}
.pc-chev { font-size: .8em; }
.pc-details-body { padding: 2px 0 10px; }
.pc-details-body .pc-field + .pc-field { margin-top: 18px; }
.pc-root select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pc-ink);
  background: var(--pc-card);
  border: 1px solid var(--pc-line-strong);
  border-radius: 8px;
}

/* =====================================================================
   2. 計算結果の伝票
   ---------------------------------------------------------------------
   上下を紺の太い罫線ではさむ。面の色ではなく罫線で「答え」を囲う。
   金額はこの画面で最も大きい文字にする。販路名より金額が先に目に入ること。

   2026-09-18（PASS 4）：
   - 斜線の地紋をやめた。紙らしさより先に模様が目に入り、金額の邪魔をしていた。
   - 罫線の内側に置くのは「どの販路か・いくら残るか・それが何の額か」の3つだけ。
     公式確認の印と注意書きは罫線の外へ出し、答えと競わせない。
   ===================================================================== */
.pc-verdict { margin: 10px 0 0; }
.pc-verdict:empty { display: none; }

.pc-verdict--ok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
}

/* 答えそのもの。ここだけを紺の太罫線で挟む。 */
.pc-verdict__slip {
  width: 100%;
  padding: 18px 2px 16px;
  border-top: 4px solid var(--pc-navy);
  border-bottom: 4px solid var(--pc-navy);
}
/* 罫線の外の補足。答えの下に、一段弱い扱いで積む。 */
.pc-verdict__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 2px 0;
}

.pc-verdict-line {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--pc-ink-soft);
}
.pc-verdict-pre,
.pc-verdict-post { color: var(--pc-ink-soft); }
.pc-verdict-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pc-navy);
  padding: 0 2px;
}

.pc-verdict-amount {
  display: block;
  margin: 2px 0 0;
  font-size: clamp(2.5rem, 1.6rem + 4.6vw, 3.3rem);   /* 375pxで約43px */
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--pc-accent);
  overflow-wrap: anywhere;
}
.pc-verdict-sub {
  font-size: .85rem;
  color: var(--pc-ink-soft);
}

/* 公式確認済み。琥珀の小さな強調にとどめ、金額と競わせない。 */
.pc-verdict-check {
  font-size: .76rem;
  font-weight: 700;
  color: var(--pc-amber-deep);
  background: var(--pc-amber-tint);
  border-radius: 4px;
  padding: 3px 8px;
}
.pc-verdict-caveat {
  margin-top: 8px;
  font-size: .75rem;
  line-height: 1.65;
  color: var(--pc-ink-faint);
}

/* ---------- 売値を入れる前の「答えの置き場」 ----------
   2026-09-18（PASS 4）：入力欄しか見えないと「答えがどこに出るか」が分からない。
   結果と同じ位置・同じ罫線で空の伝票を先に見せ、入れる前から出口を示す。
   金額の桁は仮置きなので、読み上げには渡さない。 */
.pc-verdict--wait {
  display: block;
  padding: 12px 2px 12px;
  border-top: 2px dashed var(--pc-line-strong);
  border-bottom: 2px dashed var(--pc-line-strong);
}
.pc-verdict__waitlabel {
  display: block;
  font-size: .85rem;
  color: var(--pc-ink-soft);
}
/* 仮の桁と「ここに出ます」を1行に並べる。
   縦に積むと375pxでは画面の外に落ち、出口を示すという役目を果たせない。 */
.pc-verdict__waitrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.pc-verdict__waitnum {
  flex: none;
  font-size: clamp(2.5rem, 1.6rem + 4.6vw, 3.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--pc-line-strong);
}
.pc-verdict__waithow {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--pc-ink-soft);
}

.pc-verdict--none {
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  padding: 14px 16px;
  font-size: .92rem;
}

.pc-global-error {
  background: var(--pc-loss-soft);
  border: 1px solid var(--pc-loss);
  color: var(--pc-loss);
  border-radius: var(--pc-radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: .9rem;
}

/* =====================================================================
   3. ほかで売ったら？（明細）
   ---------------------------------------------------------------------
   カードにしない。販路名と金額を左右に置いた1行を、罫線で区切って積む。
   金額は右揃え・等幅数字。上下の桁がそろって初めて「比べられる」表になる。
   ===================================================================== */
.pc-others { margin-top: 26px; }
.pc-others__head {
  margin: 0 0 2px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pc-navy);
  letter-spacing: .01em;
}

.pc-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--pc-navy);
}
.pc-line { border-bottom: 1px solid var(--pc-line); }
.pc-line:last-child { border-bottom: 2px solid var(--pc-navy); }

.pc-line__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;            /* 行間を十分に取る。指で押せる高さ */
  padding: 10px 2px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
}
.pc-line__btn { cursor: pointer; }

.pc-line__name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pc-line__label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pc-ink);
}
/* 利益額に影響する前提（Amazonのカテゴリーなど）。隠しすぎない。 */
.pc-line__note {
  font-size: .73rem;
  line-height: 1.5;
  color: var(--pc-ink-faint);
}

/* 明細の金額は結論と同じ色にしない。
   ミントは「この条件でいちばん多く残る額」1か所だけの色にして、
   画面の中でどれが答えなのかを、色でも一度で分かるようにする。 */
.pc-line__amount {
  flex: none;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  text-align: right;
  color: var(--pc-ink);
}
.pc-line__chev {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pc-bg);
  font-size: .8rem;
  line-height: 1;
  color: var(--pc-navy);
}

/* 赤字の行。色だけに頼らず「赤字」の札も出す（.pc-profit-label）。 */
.pc-card--loss .pc-line__amount,
.pc-card--loss .pc-verdict-amount { color: var(--pc-loss); }
.pc-card--loss .pc-profit-label {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  color: var(--pc-loss);
  border: 1px solid currentColor;   /* 色だけに頼らない */
  border-radius: 4px;
  padding: 0 5px;
}
.pc-verdict.pc-card--loss { border-color: var(--pc-loss); }
.pc-verdict.pc-card--loss .pc-profit-label { align-self: flex-start; margin-top: 4px; }

/* 比較対象外（メルカリのフリマアプリ）。
   2026-09-19（PASS 5）: 一覧の最後の1行に混ぜていたものを外へ出した。
   金額の代わりに長い説明が入る行が1つあるだけで、上下に並んだ金額を
   目で追う流れが切れていた。一覧の外に、字を一段落として置く。 */
.pc-outscope { margin: 12px 0 0; }
.pc-outscope__head {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pc-ink-faint);
}
.pc-outscope__body {
  margin: 2px 0 0;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--pc-ink-soft);
}
.pc-outscope__name { color: var(--pc-ink); font-weight: 700; }

/* 計算しない・できない行。金額の列を使わず、理由だけを置く。 */
.pc-line--na .pc-line__row { align-items: flex-start; }
.pc-line--na .pc-line__label { color: var(--pc-ink-soft); font-weight: 700; }
.pc-line__na {
  flex: 1 1 58%;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--pc-ink-soft);
}

/* =====================================================================
   4. 内訳（叩いたときだけ）
   ===================================================================== */
.pc-line__detail { padding: 2px 2px 14px; }
.pc-bd {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 12px;
  background: var(--pc-card);
  border: 1px dashed var(--pc-line-strong);
  border-radius: 4px;
  font-size: .87rem;
  font-variant-numeric: tabular-nums;
}
.pc-bd dt { color: var(--pc-ink-soft); }
.pc-bd dd { margin: 0; text-align: right; overflow-wrap: anywhere; color: var(--pc-ink-soft); }
.pc-bd .is-strong {
  font-weight: 700;
  color: var(--pc-ink);
  border-top: 1px solid var(--pc-line-strong);
  padding-top: 4px;
  margin-top: 2px;
}
.pc-bd .is-neg { color: var(--pc-ink-soft); }

.pc-range-note, .pc-stale {
  margin: 8px 0 0;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--pc-ink-soft);
}
.pc-stale { border-left: 3px solid var(--pc-loss); padding-left: 8px; }

/* 公式確認。内部用語は出さない。日付は月まで。 */
.pc-src {
  margin: 8px 0 0;
  font-size: .76rem;
  color: var(--pc-ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
}
.pc-src__ok { color: var(--pc-amber-deep); font-weight: 700; }
.pc-src a {
  color: var(--pc-navy);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

.pc-privacy { margin: 22px 0 0; font-size: .74rem; color: var(--pc-ink-faint); }

/* =====================================================================
   5. 広い画面
   ---------------------------------------------------------------------
   スマホを横に伸ばしただけにしない。
   左に仕入れメモ、右にいまの計算結果。視線が左→右で一度だけ動く。
   管理画面のようにパネルを並べないよう、最大幅を絞って余白は外へ逃がす。
   ===================================================================== */
@media (min-width: 900px) {
  .pc-root {
    max-width: 960px;
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    grid-template-areas:
      "head    head"
      "err     err"
      "memo    verdict"
      "memo    others"
      "privacy others";
    align-items: start;
    column-gap: 40px;
    row-gap: 0;
  }
  .pc-head { grid-area: head; }
  .pc-global-error { grid-area: err; }
  .pc-memo { grid-area: memo; position: sticky; top: 16px; }
  .pc-verdict { grid-area: verdict; margin-top: 0; }
  .pc-others { grid-area: others; margin-top: 26px; }
  .pc-privacy { grid-area: privacy; margin-top: 18px; align-self: start; }

  .pc-verdict--ok { padding-top: 12px; }
  .pc-verdict-amount { font-size: 3.5rem; }
  .pc-line__row { min-height: 66px; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pc-root *, .pc-root *::before, .pc-root *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}