/* ==================================================
   WHEEL FITMENT CALCULATOR
   - 全ルールを #wfc 配下にスコープ（サイト共通 common.css と非干渉）
   - フォントは既存サイトと共通（Teko / Noto Sans JP）
   - 画像は ../images/ の実PNGを参照
   - レスポンシブはサイトと同方式：寸法は rem（common.css が html を
     desktop=62.5%(1rem=10px) / mobile(≤768)=1.333vw に切替）。
     モバイルは可読性確保のため @media(max-width:768px) でサイズを再指定。
   - border / box-shadow / 罫線代わりの 1px gap / ヘッダー回避 padding は px 固定。
================================================== */

:root{
  --bg:#0a0c10; --bg2:#12151c; --panel:#161a22; --panel2:#1c212b;
  --line:#2a303c; --line2:#3a4250; --txt:#e8ebf0; --txt-dim:#9aa3b2;
  --gold:#c9a24b; --gold-lt:#e7c983; --gold-dk:#8f7331;
  --cur:#25d0ee; --cur-fill:rgba(37,208,238,.15);
  --aft:#ffb02e; --aft-fill:rgba(255,176,46,.17);
  --steel:#aab3c2;
}

/* このページの地色（絶対配置ヘッダーの後ろも暗色で統一） */
body{background:var(--bg)}

/* 電卓ルート。.header が position:absolute/fixed のため上に px 余白でヘッダー分を空ける */
#wfc{
  color:var(--txt);
  font-family:"Noto Sans JP",sans-serif;
  font-size:1.6rem;
  line-height:1.5;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-top:104px;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/4.4rem 4.4rem,
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/4.4rem 4.4rem,
    radial-gradient(120rem 50rem at 72% -8%,rgba(201,162,75,.10),transparent 60%),
    var(--bg);
}

#wfc .wrap{max-width:148rem;margin:0 auto;padding:.8rem 3.4rem 4rem;
  display:grid;grid-template-columns:1.12fr .88fr;gap:2.6rem;align-items:start}

#wfc .panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);position:relative}
#wfc .panel::before{content:"";position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;
  border-top:2px solid var(--gold);border-left:2px solid var(--gold);opacity:.7}
#wfc .panel::after{content:"";position:absolute;bottom:0;right:0;width:2.6rem;height:2.6rem;
  border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);opacity:.7}
#wfc .phead{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.8rem;border-bottom:1px solid var(--line);
  font-family:"Noto Sans JP",sans-serif;letter-spacing:.2em;text-transform:uppercase;font-size:1.4rem}
#wfc .phead .tag{font-size:1rem;color:var(--txt-dim);letter-spacing:.28em}
#wfc .phead .bar{width:2.2rem;height:.3rem;background:var(--gold);flex:0 0 auto}

/* パネル見出しに統合したページタイトル（旧 WHEEL FITMENT CALCULATOR / OFFSET & TIRE DIAMETER）*/
#wfc .phead .wfc-htitle{display:flex;flex-direction:column;line-height:1.15;font-size:2.2rem;letter-spacing:.12em;font-family:"Teko",sans-serif}
#wfc .phead .wfc-htitle em{font-style:normal;font-size:1.2rem;color:var(--txt-dim);letter-spacing:.22em;margin-top:.2rem}

#wfc .viz-body{padding:.8rem .8rem .4rem}
#wfc #stage{width:100%;height:auto;display:block;aspect-ratio:1/1;max-height:78vh;margin:0 auto}
#wfc .st-img{opacity:.92}
#wfc .legend{display:flex;gap:2.4rem;justify-content:center;padding:.8rem 1.2rem 1.6rem;flex-wrap:wrap}
#wfc .legend .it{display:flex;align-items:center;gap:.9rem;font-size:1.3rem;color:var(--txt-dim)}
#wfc .legend .sw{width:2.6rem;height:1.4rem;border-radius:2px;flex:0 0 auto}
#wfc .legend .sw.cur{border:2px dashed var(--cur);background:var(--cur-fill)}
#wfc .legend .sw.aft{border:2px dashed var(--aft);background:var(--aft-fill)}

#wfc .cards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
#wfc .spec{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line)}
#wfc .spec .sh{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);
  font-family:"Noto Sans JP",sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:1.3rem}
#wfc .spec.cur .sh{border-bottom-color:var(--cur)}
#wfc .spec.aft .sh{border-bottom-color:var(--aft)}
#wfc .spec .dot{width:1.1rem;height:1.1rem;border-radius:50%;flex:0 0 auto}
#wfc .spec.cur .dot{background:var(--cur);box-shadow:0 0 10px var(--cur)}
#wfc .spec.aft .dot{background:var(--aft);box-shadow:0 0 10px var(--aft)}
#wfc .spec .body{padding:1.2rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:1.1rem}
#wfc .grp{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.1rem}
#wfc .ic{width:3.4rem;height:3.4rem;flex:0 0 auto;opacity:.95;display:block}
#wfc .ic.wheel-ic{background:url("../images/wheel-ic.png") center/contain no-repeat}
#wfc .ic.tire-ic{background:url("../images/tire-ic.png") center/contain no-repeat;filter:drop-shadow(0 0 1px rgba(220,228,238,.55)) drop-shadow(0 0 2px rgba(220,228,238,.35))}
#wfc .fieldlab{font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:.5rem}

#wfc .stepper{display:flex;align-items:stretch;border:1px solid var(--line2);background:#0c0f15;height:3.8rem}
#wfc .stepper button{width:3.8rem;border:none;background:#171c25;color:var(--gold-lt);font-size:2rem;cursor:pointer;
  font-family:"Noto Sans JP",sans-serif;line-height:1;transition:background .12s}
#wfc .stepper button:hover{background:#232b37}
#wfc .stepper button:active{background:var(--gold-dk);color:#111}
#wfc .stepper .val{flex:1;display:flex;align-items:center;justify-content:center;
  font-family:"Noto Sans JP",sans-serif;font-size:1.9rem;letter-spacing:.04em}
#wfc select{width:100%;height:3.8rem;background:#0c0f15;color:var(--txt);border:1px solid var(--line2);
  font-family:"Noto Sans JP",sans-serif;font-size:1.6rem;letter-spacing:.05em;padding:0 1.2rem;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-lt) 50%),linear-gradient(135deg,var(--gold-lt) 50%,transparent 50%);
  background-position:calc(100% - 1.8rem) 1.6rem,calc(100% - 1.2rem) 1.6rem;background-size:.6rem .6rem,.6rem .6rem;background-repeat:no-repeat}
#wfc select:focus{outline:none;border-color:var(--gold)}
#wfc .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

#wfc .results{margin-top:1.6rem}
#wfc .rowset{padding:.4rem .4rem}
#wfc .rrow{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:1.3rem 1.6rem;border-bottom:1px solid var(--line)}
#wfc .rrow .lab{font-family:"Noto Sans JP",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:1.3rem;color:var(--txt-dim)}
#wfc .rrow .big{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:2.6rem;line-height:1}
#wfc .rrow .msg{font-size:1.3rem;color:var(--txt-dim);text-align:right;max-width:23rem;margin-top:.4rem}
#wfc .pos-out .big{color:var(--txt)} #wfc .pos-in .big{color:var(--txt)}
#wfc .chip{display:inline-block;font-family:"Noto Sans JP",sans-serif;font-size:1.1rem;letter-spacing:.14em;
  padding:.2rem .9rem;border:1px solid var(--line2);color:var(--txt-dim);text-transform:uppercase;margin-top:.6rem}
#wfc .tirecmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
#wfc .tirecmp .c{background:var(--panel);padding:1.3rem 1.5rem}
#wfc .tirecmp .c .t{font-family:"Noto Sans JP",sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:1.2rem;margin-bottom:.9rem}
#wfc .tirecmp .c.cur .t{color:var(--cur)} #wfc .tirecmp .c.aft .t{color:var(--aft)}
#wfc .tirecmp .kv{display:flex;justify-content:space-between;font-size:1.4rem;padding:.3rem 0;color:var(--txt-dim)}
#wfc .tirecmp .kv b{color:var(--txt);font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:1.6rem}
#wfc .speed{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.6rem;gap:1.2rem;border-top:1px solid var(--line)}
#wfc .speed .lab{font-family:"Noto Sans JP",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:1.2rem;color:var(--txt-dim)}
#wfc .speed .err{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:3rem;margin-top:.3rem}
#wfc .speed .err.pos{color:var(--txt)} #wfc .speed .err.neg{color:var(--txt)} #wfc .speed .err.zero{color:var(--txt)}
#wfc .speed .note{font-size:1.3rem;color:var(--txt-dim);text-align:right}
#wfc .speed .note b{color:var(--txt);font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:1.9rem}

#wfc .wfc-note{max-width:148rem;margin:0 auto;padding:0 3.4rem 4.4rem;color:var(--txt-dim);font-size:1.25rem;line-height:1.9}
#wfc .wfc-note .n{color:#8a93a4}
#wfc .wfc-note .basis{color:var(--gold-lt);letter-spacing:.06em;margin-bottom:.5rem}

/* ==================================================
   MOBILE（≤768px：サイトと同じ 1rem=1.333vw スケール）
   1カラム化＋可読サイズへ再指定（実機 ~375px で概ね読みやすい px になるよう調整）
================================================== */
@media(max-width:768px){
  #wfc{padding-top:68px}
  #wfc .wrap{grid-template-columns:1fr;padding:.8rem 3rem 3.6rem;gap:2.4rem}
  #wfc .cards{grid-template-columns:1fr;gap:2.4rem}

  #wfc .phead{font-size:2.6rem;gap:1.6rem;padding:2rem 2.4rem}
  #wfc .phead .tag{font-size:1.8rem}
  #wfc .phead .bar{width:3.4rem;height:.4rem}
  #wfc .phead .wfc-htitle{font-size:3.8rem}
  #wfc .phead .wfc-htitle em{font-size:2.4rem}

  #wfc .legend{gap:3rem}
  #wfc .legend .it{font-size:2.4rem}
  #wfc .legend .sw{width:4.4rem;height:2.4rem}

  #wfc .spec .sh{font-size:2.6rem;padding:1.8rem 2.2rem;gap:1.4rem}
  #wfc .spec .dot{width:1.8rem;height:1.8rem}
  #wfc .spec .body{padding:2.2rem 2.2rem 2.6rem;gap:2rem}
  #wfc .grp{gap:1.8rem}
  #wfc .ic{width:6rem;height:6rem}
  #wfc .fieldlab{font-size:2.1rem;margin-bottom:.9rem}

  #wfc .stepper{height:8rem}
  #wfc .stepper button{width:8rem;font-size:3.8rem}
  #wfc .stepper .val{font-size:3.6rem}
  #wfc select{height:8rem;font-size:2.9rem;padding:0 2.4rem;
    background-position:calc(100% - 3.4rem) 3.4rem,calc(100% - 2.6rem) 3.4rem;background-size:1.2rem 1.2rem,1.2rem 1.2rem}
  #wfc .two{gap:1.8rem}

  #wfc .results{margin-top:2.4rem}
  #wfc .rrow{padding:2rem 2.2rem;gap:2rem}
  #wfc .rrow .lab{font-size:2.4rem}
  #wfc .rrow .big{font-size:4.6rem}
  #wfc .rrow .msg{font-size:2.2rem;max-width:38rem}
  #wfc .chip{font-size:2rem;padding:.4rem 1.4rem;margin-top:1rem}

  #wfc .tirecmp .c{padding:2.2rem}
  #wfc .tirecmp .c .t{font-size:2.2rem;margin-bottom:1.4rem}
  #wfc .tirecmp .kv{font-size:2.4rem;padding:.5rem 0}
  #wfc .tirecmp .kv b{font-size:2.8rem}

  #wfc .speed{padding:2.2rem}
  #wfc .speed .lab{font-size:2.2rem}
  #wfc .speed .err{font-size:5rem}
  #wfc .speed .note{font-size:2.2rem}
  #wfc .speed .note b{font-size:3.2rem}

  #wfc .wfc-note{font-size:2rem;padding:0 3rem 4.4rem}
}