/* ===================================================================
   CARTEX — app.css
   トークン設計: 自動車専門ECサイト(信頼感・情報密度)とフリマ/ECアプリ
   (親しみやすさ・カード型UI)を掛け合わせたトーン&マナー。
   ブランドカラー(ネイビー)+ CTA/価格アクセント(コーラルオレンジ)の2色構成。
=================================================================== */
:root{
  --paper:#EEF1F5;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --ink:#131A24;
  --ink-soft:#57626F;
  --line:#E1E6EC;
  --line-strong:#C7CFD9;
  --steel:#8A94A0;

  --brand:#16305C;
  --brand-2:#1E3E73;
  --brand-ink:#FFFFFF;

  --accent:#FF5A36;
  --accent-hover:#E2481F;
  --accent-ink:#FFFFFF;
  --accent-soft:#FFE8DE;

  --ok:#1E9A5C;
  --ok-soft:#E1F5E9;
  --warn:#C98A2E;
  --warn-soft:#FBF0DD;
  --danger:#D93025;
  --danger-soft:#FBE4E1;

  --cat-1:#3B5A82; --cat-1-soft:#E7EDF5;
  --cat-2:#2F8F82; --cat-2-soft:#E1F3F0;
  --cat-3:#8A6FCB; --cat-3-soft:#EEE9FA;
  --cat-4:#C98A2E; --cat-4-soft:#FBF0DD;
  --cat-5:#C2607A; --cat-5-soft:#FBE9EE;
  --cat-6:#5E7480; --cat-6-soft:#EAEEF0;

  --shadow-card: 0 1px 2px rgba(20,30,45,.06), 0 10px 22px -14px rgba(20,30,45,.20);
  --shadow-frame: 0 30px 70px -25px rgba(20,30,45,.35);
  --shadow-header: 0 8px 18px -14px rgba(10,20,35,.45);
  --font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", "Menlo", "Consolas", monospace;
}
/* ダークモードはOS設定に追従させず、常にライトテーマを既定にする
   (data-theme="dark" を明示的に指定した場合のみダーク配色を適用) */
:root[data-theme="dark"]{
  --paper:#0A1018; --surface:#121924; --surface-2:#19222E;
  --ink:#EDF1F5; --ink-soft:#A6B1BE; --line:#232E3B; --line-strong:#324053; --steel:#7E8A99;
  --brand:#1B3B66; --brand-2:#234B7E; --brand-ink:#FFFFFF;
  --accent:#FF7A52; --accent-hover:#FF8F6C; --accent-ink:#1A0800; --accent-soft:#3A2013;
  --ok:#3FBF82; --ok-soft:#123A26; --warn:#E3B84E; --warn-soft:#3A2E10;
  --danger:#E3695F; --danger-soft:#3A1714;
  --cat-1:#7FA3D6; --cat-1-soft:#1C2A3B;
  --cat-2:#5FC2B2; --cat-2-soft:#12302B;
  --cat-3:#B3A0EA; --cat-3-soft:#2A2340;
  --cat-4:#E4B15F; --cat-4-soft:#3A2C13;
  --cat-5:#E38FA6; --cat-5-soft:#3A1E26;
  --cat-6:#A6AEB8; --cat-6-soft:#242B31;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 26px -14px rgba(0,0,0,.6);
  --shadow-frame: 0 30px 70px -25px rgba(0,0,0,.6);
  --shadow-header: 0 8px 18px -14px rgba(0,0,0,.7);
}

.cat-1{--cat-color:var(--cat-1); --cat-soft:var(--cat-1-soft);}
.cat-2{--cat-color:var(--cat-2); --cat-soft:var(--cat-2-soft);}
.cat-3{--cat-color:var(--cat-3); --cat-soft:var(--cat-3-soft);}
.cat-4{--cat-color:var(--cat-4); --cat-soft:var(--cat-4-soft);}
.cat-5{--cat-color:var(--cat-5); --cat-soft:var(--cat-5-soft);}
.cat-6{--cat-color:var(--cat-6); --cat-soft:var(--cat-6-soft);}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
button{font:inherit; color:inherit;}
input{font:inherit; color:inherit;}
::selection{background:var(--accent); color:var(--accent-ink);}
.num{font-variant-numeric: tabular-nums;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ===================================================================
   STAGE / LANDING SHELL (PC: 2カラム / モバイル: アプリのみ)
=================================================================== */
.stage{min-height:100%; display:flex; flex-direction:column; align-items:center; padding:32px 16px 48px; gap:32px;}
.hero-col{display:none;}
.phone-frame{
  width:100%; max-width:412px; background:var(--surface);
  border:1px solid var(--line); border-radius:26px;
  box-shadow:var(--shadow-frame); overflow:hidden; position:relative;
}
@media (max-width: 1023px){
  /* PC 2カラム(hero-col)が出ない幅は、スマホ・タブレットとも「浮いたカード」ではなく
     フルブリードのツール画面にする(中途半端な幅で余白付きカードになる状態を作らない) */
  .stage{padding:0; gap:0;}
  .phone-frame{max-width:none; border:none; border-radius:0; box-shadow:none; min-height:100vh;}
}
@media (min-width: 1024px){
  .stage{
    flex-direction:row; align-items:flex-start; justify-content:center; gap:64px;
    max-width:1240px; margin:0 auto; padding:64px 32px;
  }
  .hero-col{display:flex; flex-direction:column; gap:30px; flex:1; max-width:540px;}
  .phone-frame{flex-shrink:0; height:auto;}
}

/* Hero (PC左カラム) ------------------------------------------------- */
.hero-illustration{
  border-radius:20px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.hero-illustration img{width:100%; height:auto; display:block;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  letter-spacing:.08em; color:var(--accent-hover); text-transform:uppercase; margin:0 0 10px;
}
.hero-title{margin:0 0 12px; font-size:28px; line-height:1.3; font-weight:800; letter-spacing:-.01em; color:var(--ink); text-wrap:balance;}
.hero-title em{color:var(--accent); font-style:normal;}
.hero-sub{margin:0; font-size:14px; line-height:1.8; color:var(--ink-soft); max-width:46ch;}
.hero-steps{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.hero-steps li{display:flex; gap:12px; align-items:flex-start;}
.step-num{
  flex-shrink:0; width:28px; height:28px; border-radius:9px; background:var(--brand); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
}
.hero-steps strong{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px;}
.hero-steps p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6;}

.hero-malls{margin-top:2px;}
.hero-malls-label{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin:0 0 8px;}
.hero-malls-row{display:flex; flex-wrap:wrap; gap:8px;}
.mall-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  box-shadow:var(--shadow-card);
}

/* ===================================================================
   APP SHELL
=================================================================== */
.app{display:flex; flex-direction:column; height:844px; max-height:calc(100vh - 64px); background:var(--surface); position:relative;}
@media (max-width: 1023px){ .app{height:auto; min-height:100vh; max-height:none;} }
@media (min-width: 1024px){
  /* PC(2カラム)幅: ウィンドウの高さに応じて可変(固定844pxをやめる) */
  .app{height:calc(100vh - 128px); max-height:860px; min-height:640px;}
}
.app-scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:36px; background:var(--paper);}
.app-scroll::-webkit-scrollbar{width:0; height:0;}

/* アプリ内導入バナー(SPのみ。PCは左カラムに独立したヒーローがあるため非表示) --------- */
.app-intro{display:block; background:var(--surface); border-bottom:1px solid var(--line);}
.app-intro-image{width:100%; max-height:190px; overflow:hidden;}
.app-intro-image img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;}
.app-intro-copy{padding:16px 16px 18px;}
.app-intro-title{margin:0 0 8px; font-size:19px; line-height:1.4; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
.app-intro-title em{color:var(--accent); font-style:normal;}
.app-intro-sub{margin:0; font-size:13px; line-height:1.6; color:var(--ink-soft);}
@media (min-width: 1024px){
  .app-intro{display:none;}
}

/* Header (ブランドカラー) ------------------------------------------- */
.app-header{
  position:sticky; top:0; z-index:20; background:var(--brand); color:var(--brand-ink);
  padding:14px 16px 16px;
  transition:box-shadow .18s ease;
}
.app-header.scrolled{box-shadow:var(--shadow-header);}
.brand-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.brand-plate{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark{
  width:34px; height:34px; border-radius:10px; background:var(--accent); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
}
.brand-mark svg{width:19px; height:19px;}
.brand-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.brand-text .mark{font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--brand-ink);}
.brand-text .sub{font-size:10px; font-weight:600; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.header-actions{display:flex; gap:8px; flex-shrink:0;}
.icon-btn{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.12); cursor:pointer;
}
.icon-btn:hover{background:rgba(255,255,255,.2);}
.icon-btn:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.icon-btn svg{width:16px; height:16px; color:#fff;}

.search-bar{
  display:flex; align-items:center; gap:8px; background:var(--surface);
  border:none; border-radius:12px; padding:10px 12px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.search-bar svg{width:16px; height:16px; color:var(--steel); flex-shrink:0;}
.search-bar input{flex:1; border:none; background:transparent; outline:none; font-size:14px; color:var(--ink);}
.search-bar input::placeholder{color:var(--steel);}
.search-spinner{width:14px; height:14px; flex-shrink:0; display:none;}
.search-bar.loading .search-spinner{display:block;}
.search-bar.loading svg.icon-search{display:none;}
.vin-toggle{
  border:none; background:none; display:flex; align-items:center; gap:4px;
  color:var(--accent-hover); font-size:12px; font-weight:700; padding:2px; cursor:pointer; flex-shrink:0;
}
.vin-toggle svg{width:14px; height:14px;}

/* VIN panel ------------------------------------------------------ */
.vin-panel{overflow:hidden; max-height:0; transition:max-height .28s ease;}
.vin-panel.open{max-height:160px;}
.vin-panel-inner{padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);}
.vin-row{display:flex; gap:8px;}
.vin-row input{
  flex:1; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:13px;
  border:1px solid var(--line-strong); border-radius:9px; padding:8px 10px; background:var(--surface);
}
.vin-row button{
  border:none; border-radius:9px; background:var(--brand); color:var(--brand-ink);
  font-size:13px; font-weight:700; padding:0 16px; cursor:pointer;
  display:flex; align-items:center; gap:6px; min-width:64px; justify-content:center;
}
.vin-row button:disabled{opacity:.6; cursor:default;}
.vin-feedback{margin:8px 0 2px; font-size:12px; min-height:16px;}
.vin-feedback.match{color:var(--ok);}
.vin-feedback.no-match{color:var(--danger);}
.vin-feedback .hint{color:var(--steel); display:block; margin-top:2px; font-size:11px;}

/* Maker chips(横スクロール。ブランド数が増えても破綻しないようタブ式をやめた) ------ */
.maker-tabs{display:flex; gap:8px; padding:12px 16px; overflow-x:auto; background:var(--surface); border-bottom:1px solid var(--line);}
.maker-tabs::-webkit-scrollbar{display:none;}
.maker-tab{
  flex-shrink:0; border:1px solid var(--line-strong); background:var(--surface); border-radius:999px;
  padding:7px 15px; font-size:12px; font-weight:700; cursor:pointer; color:var(--ink-soft);
  white-space:nowrap; letter-spacing:.01em;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.maker-tab.active{background:var(--brand); color:var(--brand-ink); border-color:var(--brand);}

/* Model chips ------------------------------------------------------ */
.model-row{display:flex; gap:8px; padding:12px 16px; overflow-x:auto; background:var(--surface);}
.model-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0; border:1px solid var(--line-strong); background:var(--surface); border-radius:999px;
  padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer; color:var(--ink-soft);
  letter-spacing:.01em; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.chip.active{background:var(--brand); color:var(--brand-ink); border-color:var(--brand);}

/* Category chips ---------------------------------------------------- */
.category-row-label{margin:0; padding:14px 16px 8px; background:var(--surface); font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--steel); text-transform:uppercase;}
.category-row-label-hint{display:block; margin-top:2px; font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-soft);}
.category-row{display:flex; gap:8px; padding:0 16px 14px; overflow-x:auto; background:var(--surface);}
.category-row::-webkit-scrollbar{display:none;}
.pill{
  flex-shrink:0; display:flex; align-items:center; gap:5px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:999px; padding:6px 13px 6px 10px; font-size:12px; font-weight:600;
  cursor:pointer; color:var(--ink-soft); transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.pill svg{width:13px; height:13px;}
.pill.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

.section-heading{display:flex; align-items:baseline; justify-content:space-between; padding:16px 16px 10px;}
.section-heading h2{margin:0; font-size:14px; font-weight:800; color:var(--ink);}
.section-heading .count{font-size:12px; font-weight:600; color:var(--steel);}

/* Part cards -------------------------------------------------------- */
.part-list{display:flex; flex-direction:column; gap:14px; padding:0 16px;}
.part-card{
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow-card);
  animation: card-in .32s cubic-bezier(.2,.7,.3,1) both;
  transition:transform .12s ease, box-shadow .12s ease;
}
.part-card:hover{transform:translateY(-1px);}
.part-card.selected{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}
@keyframes card-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.part-list .part-card:nth-child(1){animation-delay:0ms;}
.part-list .part-card:nth-child(2){animation-delay:35ms;}
.part-list .part-card:nth-child(3){animation-delay:70ms;}
.part-list .part-card:nth-child(4){animation-delay:105ms;}
.part-list .part-card:nth-child(n+5){animation-delay:130ms;}

.part-card-head{padding:14px 14px 12px; border-bottom:1px solid var(--line); display:flex; gap:12px;}
.part-card-body{flex:1; min-width:0;}
.part-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px;}
.cat-tag{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--cat-color, var(--steel));}
.cat-tag svg{width:13px; height:13px;}
.fit-tag{font-family:var(--font-mono); font-size:11px; color:var(--steel); flex-shrink:0;}
.part-name{margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--ink);}

/* Thumbnail ----------------------------------------------------------- */
.thumb{
  width:72px; height:72px; flex-shrink:0; border-radius:13px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--surface-2);
}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--cat-soft, var(--surface-2));
  position:relative;
}
.thumb-placeholder svg{width:30px; height:30px; color:var(--cat-color, var(--line-strong));}
.thumb-placeholder .thumb-tag{
  position:absolute; top:4px; right:5px; font-family:var(--font-mono); font-size:8px; font-weight:700;
  letter-spacing:.05em; color:var(--cat-color, var(--steel)); opacity:.7; text-transform:uppercase;
}
.thumb-placeholder .thumb-brand{
  position:absolute; bottom:4px; left:5px; font-size:9px; font-weight:800;
  background:var(--surface); color:var(--ink-soft); border:1px solid var(--line); border-radius:4px; padding:0 4px; line-height:1.5;
}

.pn-row{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; gap:10px;}
.pn-row + .pn-row{border-top:1px dashed var(--line);}
.pn-left{min-width:0;}
.pn-label{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--steel); margin-bottom:2px; display:flex; align-items:center; gap:6px;}
.brand-badge{font-size:10px; font-weight:800; background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; color:var(--ink-soft);}
.pn-code{font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.pn-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.pn-price{font-size:15px; font-weight:800; color:var(--ink);}
.pn-price .yen{font-size:10px; font-weight:600; margin-right:1px; color:var(--ink-soft);}
.copy-btn{width:29px; height:29px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; flex-shrink:0; transition:background .15s ease, border-color .15s ease, transform .1s ease;}
.copy-btn:active{transform:scale(.92);}
.copy-btn svg{width:13px; height:13px; color:var(--ink-soft);}
.copy-btn.copied{background:var(--ok-soft); border-color:var(--ok);}
.copy-btn.copied svg{color:var(--ok);}

.discount-strip{display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:var(--accent-soft); border-top:1px solid var(--line);}
.discount-strip .label{font-size:11px; color:var(--accent-hover); font-weight:700;}
.discount-strip .badge{font-weight:800; font-size:14px; color:var(--accent-hover);}

.mall-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 14px 14px;}
.mall-cell{
  padding:10px 11px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface-2);
  cursor:pointer; transition:background .12s ease, border-color .12s ease;
}
.mall-cell:hover{border-color:var(--line-strong);}
.mall-cell.picked{background:var(--accent-soft); border-color:var(--accent);}
.mall-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:6px;}
.mall-name{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--ink-soft); min-width:0;}
.mall-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mall-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.mall-dot.rakuten{background:#C0433D;}
.mall-dot.yahoo{background:#8C6FD1;}
.mall-dot.yahoo_auction{background:#D98A2B;}
.mall-dot.mercari{background:#DB5A53;}
.mall-dot.amazon{background:#3A6152;}
.mall-dot.ebay{background:#5A7FBF;}

.mall-cell-search{
  display:flex; flex-direction:column; justify-content:space-between;
  text-decoration:none; color:inherit; background:var(--surface);
  border:1.5px dashed var(--line-strong);
}
.mall-cell-search:hover{border-color:var(--accent); border-style:solid; background:var(--accent-soft);}
.mall-cell-search .mall-top svg{width:14px; height:14px; color:var(--steel); flex-shrink:0;}
.mall-search-label{font-size:12px; font-weight:700; color:var(--accent-hover);}
.stock-pill{display:flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.02em; padding:1px 6px; border-radius:999px; flex-shrink:0;}
.stock-pill .dot{width:5px; height:5px; border-radius:50%;}
.stock-pill.in{background:var(--ok-soft); color:var(--ok);}
.stock-pill.in .dot{background:var(--ok);}
.stock-pill.low{background:var(--warn-soft); color:var(--warn);}
.stock-pill.low .dot{background:var(--warn);}
.stock-pill.out{background:var(--danger-soft); color:var(--danger);}
.stock-pill.out .dot{background:var(--danger);}
.mall-price{font-size:16px; font-weight:800; color:var(--accent-hover);}
.mall-price .yen{font-size:10px; font-weight:700; color:var(--accent-hover); opacity:.8; margin-right:1px;}
.mall-foot{display:flex; align-items:center; justify-content:space-between; margin-top:3px; min-height:14px;}
.mall-best{font-size:10px; color:var(--ok); font-weight:800;}
.mall-live{
  font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--ok);
  border:1px solid var(--ok); border-radius:4px; padding:0 4px; line-height:1.5;
}

/* Skeleton loading ----------------------------------------------------- */
.skeleton-card{border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden; padding:14px; box-shadow:var(--shadow-card);}
.sk{border-radius:6px; background:linear-gradient(100deg, var(--surface-2) 30%, var(--line) 45%, var(--surface-2) 60%); background-size:200% 100%; animation:sk-shimmer 1.3s ease-in-out infinite;}
@keyframes sk-shimmer{ 0%{background-position:120% 0;} 100%{background-position:-20% 0;} }
.sk-row{display:flex; gap:12px; margin-bottom:12px;}
.sk-thumb{width:72px; height:72px; border-radius:13px; flex-shrink:0;}
.sk-lines{flex:1; display:flex; flex-direction:column; gap:8px; justify-content:center;}
.sk-line{height:10px;}
.sk-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.sk-cell{height:48px; border-radius:10px;}

/* Empty / error state --------------------------------------------------- */
.state-block{padding:60px 24px; text-align:center; color:var(--steel);}
.state-block svg{width:34px; height:34px; margin:0 auto 12px; color:var(--line-strong);}
.state-block p{margin:0 0 14px; font-size:13px; line-height:1.6;}
.state-block.error svg{color:var(--danger);}
.retry-btn{border:1px solid var(--line-strong); background:var(--surface); border-radius:999px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; color:var(--ink);}
.retry-btn:hover{border-color:var(--ink);}

/* 自由検索フォールバック(未登録キーワードでもモールへ直接案内) --------------- */
.free-search-card{
  margin:0 16px; border:1px solid var(--line); border-radius:16px; background:var(--surface);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.free-search-head{display:flex; gap:12px; align-items:flex-start; padding:18px 16px 14px;}
.free-search-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--cat-soft, var(--surface-2)); color:var(--cat-color, var(--steel));
}
.free-search-icon svg{width:19px; height:19px;}
.free-search-title{margin:0 0 3px; font-size:14px; font-weight:800; color:var(--ink);}
.free-search-sub{margin:0 0 6px; font-size:12px; color:var(--ink-soft); line-height:1.6;}
.free-search-keyword{margin:0; font-size:11px; color:var(--steel); font-weight:600;}

.legal-note{display:flex; gap:8px; align-items:flex-start; margin:6px 16px 20px; padding:12px 13px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; color:var(--ink-soft); font-size:12px; line-height:1.55;}
.legal-note svg{width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--steel);}

/* Site footer ---------------------------------------------------------- */
.site-footer-links{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:10px;}
.footer-link{
  border:none; background:none; padding:0; cursor:pointer;
  font-size:12px; color:var(--ink-soft); text-decoration:none;
  font-family:var(--font-ui);
}
.footer-link:hover{color:var(--ink); text-decoration:underline;}
.footer-link-btn{font:inherit;}
.site-footer-copy{margin:0; font-size:11px; letter-spacing:.02em; color:var(--steel);}

/* モバイル/タブレット: アプリのスクロール内、通常フローで表示(固定はしない)
   PC(2カラム)幅では、ページ全体のフッターに役割を譲るため非表示にする */
.site-footer--mobile{border-top:1px solid var(--line); margin-top:4px; padding:16px 16px calc(20px + env(safe-area-inset-bottom));}

/* PC(2カラム時): ページ全体のフッターとして最下部に表示 */
.site-footer--desktop{display:none;}
@media (min-width: 1024px){
  .site-footer--mobile{display:none;}
  .site-footer--desktop{
    display:block; border-top:1px solid var(--line); background:var(--surface);
  }
  .site-footer--desktop .site-footer-inner{
    max-width:1240px; margin:0 auto; padding:24px 32px;
  }
}

/* Sticky bottom bar --------------------------------------------------- */
.bottom-bar{
  position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 20px -12px rgba(20,24,27,.18);
  transform:translateY(120%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.bottom-bar.visible{transform:translateY(0);}
.bottom-left{min-width:0;}
.bottom-eyebrow{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); font-weight:700; display:flex; align-items:center; gap:5px; margin-bottom:2px;}
.bottom-eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--ok);}
.bottom-name{font-size:13px; color:var(--ink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;}
.bottom-price{font-size:20px; font-weight:800; color:var(--accent-hover);}
.bottom-price .yen{font-size:12px; font-weight:700; color:var(--accent-hover); opacity:.8; margin-right:1px;}
.bottom-cta{flex-shrink:0; border:none; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:800; padding:12px 20px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s ease, transform .1s ease;}
.bottom-cta:hover{background:var(--accent-hover);}
.bottom-cta:active{transform:scale(.97);}
.bottom-cta svg{width:14px; height:14px;}

/* Modal ----------------------------------------------------------- */
.modal-overlay{position:fixed; inset:0; z-index:100; background:rgba(10,15,25,.55); display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-card{width:100%; max-width:412px; background:var(--surface); border-radius:20px 20px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(16px); transition:transform .22s ease; border:1px solid var(--line); border-bottom:none;}
.modal-overlay.open .modal-card{transform:translateY(0);}
.modal-icon{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-hover); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.modal-icon svg{width:19px; height:19px;}
.modal-card h3{margin:0 0 8px; font-size:16px; font-weight:800; color:var(--ink);}
.modal-card p{margin:0 0 10px; font-size:13px; color:var(--ink-soft); line-height:1.7;}
.modal-card ul{margin:0 0 16px; padding-left:18px; font-size:13px; color:var(--ink-soft); line-height:1.75;}
.modal-actions{display:flex; gap:10px;}
.btn-primary{flex:1; border:none; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:800; padding:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-primary:disabled{opacity:.6; cursor:default;}
.btn-secondary{flex:1; border:1.5px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink); font-size:14px; font-weight:700; padding:13px; cursor:pointer;}
.btn-secondary:hover{border-color:var(--ink);}

/* 初回訪問オンボーディング ------------------------------------------- */
.onboarding-card{position:relative; text-align:center; padding-top:44px;}
.onboarding-skip{
  position:absolute; top:16px; right:18px; border:none; background:none; cursor:pointer;
  font-size:12px; font-weight:700; color:var(--steel); padding:4px;
}
.onboarding-skip:hover{color:var(--ink-soft);}
.onboarding-step-icon{
  width:56px; height:56px; border-radius:16px; background:var(--accent-soft); color:var(--accent-hover);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.onboarding-step-icon svg{width:27px; height:27px;}
.onboarding-card h3{font-size:17px; margin-bottom:8px;}
.onboarding-card p{font-size:13.5px; margin-bottom:0;}
.onboarding-dots{display:flex; align-items:center; justify-content:center; gap:6px; margin:18px 0;}
.onboarding-dot{width:6px; height:6px; border-radius:3px; background:var(--line-strong); transition:width .18s ease, background .18s ease;}
.onboarding-dot.active{width:18px; background:var(--accent);}
.onboarding-card .btn-secondary:disabled{visibility:hidden;}

/* Form fields (お問い合わせ等) ------------------------------------------ */
.form-field{margin-bottom:12px;}
.form-field label{display:block; font-size:11px; font-weight:700; color:var(--ink-soft); margin-bottom:5px;}
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface);
  padding:9px 12px; font-size:13px; color:var(--ink); font-family:var(--font-ui); resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.hp-field{position:absolute; left:-9999px; top:-9999px;}
.form-feedback{min-height:16px; font-size:12px; margin:2px 0 14px;}
.form-feedback.error{color:var(--danger);}
.form-feedback.success{color:var(--ok);}

/* Toast ------------------------------------------------------------ */
.toast-region{position:fixed; left:0; right:0; bottom:22px; z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px;}
.toast{display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--surface); font-size:13px; font-weight:600; padding:10px 16px; border-radius:999px; box-shadow:0 12px 24px -10px rgba(0,0,0,.4); opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; max-width:380px;}
.toast svg{width:14px; height:14px; flex-shrink:0; color:var(--ok);}
.toast.toast-error svg{color:var(--danger);}
.toast.toast-info svg{color:var(--steel);}
.toast.show{opacity:1; transform:translateY(0);}

/* Spinner ------------------------------------------------------------ */
.spinner{width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:currentColor; animation:spin .7s linear infinite;}
.spinner-ink{border:2px solid var(--line-strong); border-top-color:var(--ink-soft);}
@keyframes spin{ to{transform:rotate(360deg);} }

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
}