/* /furima/ フリマ発送サイズ判定ツール */

.fr-notice {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 4px;
  padding: 12px;
  margin: 16px 0;
}

/* ===== カード校正 ===== */
.fr-card-bar {
  height: 54px;
  max-width: 100%;   /* JSがどんな幅を指定しても画面からはみ出させない（幅=viewport拡大の防止） */
  background: linear-gradient(135deg, #5c6bc0, #3949ab);
  border-radius: 4px;
  margin: 12px 0;
}

#fr-card-range { width: 100%; }

/* ===== 厚さゲージ ===== */
.fr-gauge {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin: 16px 0 8px;
}

.fr-gauge-zone { width: 100%; }
.fr-zone-safe { background: #c8e6c9; }
.fr-zone-warn { background: #fff59d; }
.fr-zone-over { background: #ffcdd2; }

.fr-gauge-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #d32f2f;
}

.fr-gauge-help {
  font-size: 0.9em;
  color: #555;
}

.fr-recalib {
  font-size: 0.85em;
  margin-top: 4px;
}

/* ===== タブ ===== */
#fr-gauge-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.fr-tab {
  padding: 8px 12px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  white-space: normal;
  cursor: pointer;
}

.fr-tab[aria-selected="true"] {
  background: #3949ab;
  border-color: #3949ab;
  color: #fff;
}

/* ===== 計算機 ===== */
.fr-calc-inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
}

.fr-calc-inputs label { display: block; }
.fr-calc-inputs input { width: 5.5em; }

#fr-calc-run {
  display: block;
  margin: 12px auto 20px;
}

.fr-result-ok { color: #2e7d32; font-weight: bold; }
.fr-result-ng { color: #999; }
.fr-cheapest {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 4px;
  padding: 12px;
  margin: 12px 0;
}

.fr-checked-at {
  font-size: 0.85em;
  color: #666;
}

/* ===== 資材の提案（_parts/affiliate-tools.php と共通のクラス名）=====
   このページは _parts/affiliate-tools.php を include しておらず、
   同ファイル内の <style> は届かない。buildSuggestions() が動的に生成する
   同名クラスの見た目をここに複製する。装飾を変えるときは両方直すこと。 */
.affiliate-tools {
  max-width: 720px;
  margin: 30px auto;
  padding: 20px;
  background: #fffdf7;
  border: 1px solid #e6d9b8;
  border-radius: 10px;
  line-height: 1.7;
}
.affiliate-tools h2 {
  font-size: 1.25em;
  color: #b3691b;
  margin: 0 0 6px;
  background: transparent;
  border-top: none;
  text-align: left;
  padding: 0;
}
.affiliate-tools__list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}
.affiliate-tools__list li {
  padding: 12px 0;
  border-bottom: 1px dashed #e0d4b0;
}
.affiliate-tools__list li:last-child {
  border-bottom: none;
}
.affiliate-tools__pr {
  color: #9D9D9D;
  font-size: 0.8em;
  margin-right: 6px;
}
.affiliate-tools__link {
  font-weight: bold;
  color: #c0392b;
  text-decoration: none;
}
.affiliate-tools__link:hover {
  text-decoration: underline;
}
.affiliate-tools__note {
  display: block;
  font-size: 0.85em;
  color: #666;
  margin-top: 2px;
}