/* AI査定エンジン — フロントUI */
.ai-appraisal-root{
  --c-ink:#0B1220; --c-red:#E8342A; --c-blue:#1E5FE6; --c-yellow:#FFD23F;
  --c-cream:#F5F1E8; --c-white:#FFFFFF; --c-green:#34c759;
  --c-disp:'Archivo Black','Impact',sans-serif;
  --c-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --c-jp:'Noto Sans JP','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
  font-family:var(--c-jp); color:var(--c-ink);
  background:var(--c-cream);
  max-width:1200px; margin:0 auto; padding:0;
}
.ai-appraisal-root *{box-sizing:border-box;}
.aia-head{background:var(--c-ink); color:var(--c-white); padding:32px 32px 28px; border-bottom:4px solid var(--c-yellow); position:relative; overflow:hidden;}
.aia-head .en{font-family:var(--c-mono); font-size:11px; letter-spacing:.3em; color:var(--c-yellow); font-weight:700;}
.aia-head h1{font-family:var(--c-jp); font-size:34px; font-weight:900; margin:6px 0 0; letter-spacing:-.02em;}
.aia-head .crumbs{font-family:var(--c-mono); font-size:10px; color:var(--c-yellow); opacity:.6; letter-spacing:.2em; margin-top:10px;}

/* ============ INTRO ============ */
.aia-intro{padding:36px 32px; display:grid; grid-template-columns:1.2fr 1fr; gap:28px;}
.aia-label{font-family:var(--c-mono); font-size:11px; letter-spacing:.3em; font-weight:700; margin-bottom:6px;}
.aia-label.red{color:var(--c-red);} .aia-label.blue{color:var(--c-blue);}
.aia-h2{font-family:var(--c-jp); font-size:28px; font-weight:900; margin:0 0 18px; color:var(--c-ink);}
.aia-h2 .red{color:var(--c-red);} .aia-h2 .blue{color:var(--c-blue);}
.aia-drop{
  background:var(--c-white); border:4px dashed var(--c-ink);
  box-shadow:6px 6px 0 var(--c-ink); padding:28px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; min-height:340px;
  position:relative; transition:border-color .15s;
}
.aia-drop.dragover{border-color:var(--c-red);}
.aia-drop-empty{text-align:center;}
.aia-drop-empty .icon{font-family:var(--c-disp); font-size:72px; color:var(--c-blue); font-weight:900; line-height:1;}
.aia-drop-empty .jp{font-family:var(--c-jp); font-size:17px; font-weight:900; margin-top:14px;}
.aia-drop-empty .en{font-family:var(--c-mono); font-size:11px; opacity:.5; letter-spacing:.2em; margin-top:6px;}
.aia-drop-empty .hint{font-family:var(--c-jp); font-size:11px; opacity:.5; margin-top:16px; line-height:1.7;}
.aia-drop img.preview{max-width:100%; max-height:400px; border:3px solid var(--c-ink); box-shadow:4px 4px 0 var(--c-yellow);}
.aia-drop .ready{position:absolute; top:-10px; right:-10px; background:var(--c-blue); color:#fff; padding:5px 14px; font-family:var(--c-disp); font-size:11px; font-weight:900; border:2px solid var(--c-ink); box-shadow:3px 3px 0 var(--c-ink); transform:rotate(-3deg);}
.aia-change{margin-top:16px; background:var(--c-cream); border:2px solid var(--c-ink); padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--c-jp);}

.aia-panel{background:var(--c-white); border:3px solid var(--c-ink); box-shadow:5px 5px 0 var(--c-ink); padding:18px; margin-bottom:14px;}
.aia-panel-title{font-family:var(--c-jp); font-size:13px; font-weight:900; margin-bottom:10px;}
.aia-chips{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.aia-chips.c4{grid-template-columns:repeat(4,1fr);}
.aia-chip{font-family:var(--c-jp); font-size:12px; font-weight:700; padding:9px 4px; background:var(--c-cream); border:2px solid var(--c-ink); cursor:pointer; color:var(--c-ink);}
.aia-chip.on{box-shadow:3px 3px 0 var(--c-ink);}
.aia-chip[data-on=yellow].on{background:var(--c-yellow);}
.aia-chip[data-on=red].on{background:var(--c-red); color:#fff;}
.aia-chip[data-on=blue].on{background:var(--c-blue); color:#fff;}
.aia-chip[data-on=ink].on{background:var(--c-ink); color:#fff;}

.aia-submit{width:100%; font-family:var(--c-jp); background:var(--c-red); color:#fff; border:4px solid var(--c-ink); padding:20px; font-size:18px; font-weight:900; cursor:pointer; box-shadow:6px 6px 0 var(--c-ink); letter-spacing:.05em; margin-top:4px;}
.aia-submit[disabled]{background:#ccc; cursor:not-allowed; box-shadow:none;}
.aia-note{margin-top:16px; background:var(--c-yellow); border:3px solid var(--c-ink); padding:12px 16px; box-shadow:4px 4px 0 var(--c-ink);}
.aia-note b{font-size:11px; letter-spacing:.1em;}
.aia-note p{font-size:11px; margin:4px 0 0; line-height:1.7;}

/* ============ ANALYZING ============ */
.aia-analyzing{background:var(--c-ink); color:#fff; padding:56px 32px; position:relative; overflow:hidden;}
.aia-analyzing::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(30,95,230,.15) 0 40px, rgba(11,63,179,.15) 40px 80px);}
.aia-analyzing-inner{position:relative; display:grid; grid-template-columns:1fr 1.3fr; gap:36px; align-items:center;}
.aia-scan-wrap{position:relative; border:4px solid var(--c-yellow); box-shadow:8px 8px 0 var(--c-red); overflow:hidden; background:var(--c-ink);}
.aia-scan-wrap img{width:100%; display:block; opacity:.85;}
.aia-scan-line{position:absolute; left:0; right:0; height:4px; background:var(--c-red); box-shadow:0 0 20px var(--c-red),0 0 40px var(--c-red); transition:top .1s linear;}
.aia-corner{position:absolute; width:22px; height:22px;}
.aia-corner.tl{top:6px; left:6px; border-top:3px solid var(--c-yellow); border-left:3px solid var(--c-yellow);}
.aia-corner.tr{top:6px; right:6px; border-top:3px solid var(--c-yellow); border-right:3px solid var(--c-yellow);}
.aia-corner.bl{bottom:6px; left:6px; border-bottom:3px solid var(--c-yellow); border-left:3px solid var(--c-yellow);}
.aia-corner.br{bottom:6px; right:6px; border-bottom:3px solid var(--c-yellow); border-right:3px solid var(--c-yellow);}
.aia-live{position:absolute; top:12px; left:12px; background:var(--c-red); color:#fff; font-family:var(--c-disp); font-size:11px; font-weight:900; padding:4px 10px; border:2px solid #fff; letter-spacing:.2em; animation:cblink 1s infinite;}
.aia-score{background:var(--c-ink); border:4px solid var(--c-yellow); box-shadow:0 0 0 2px var(--c-ink),8px 8px 0 var(--c-red); padding:28px 32px; margin-bottom:18px; position:relative;}
.aia-score .top{display:flex; justify-content:space-between; margin-bottom:12px;}
.aia-score .top .label{font-family:var(--c-mono); font-size:11px; color:var(--c-yellow); letter-spacing:.3em; font-weight:700;}
.aia-score .top .status{font-family:var(--c-mono); font-size:10px; color:var(--c-red); letter-spacing:.2em; font-weight:700; animation:cblink 1s infinite;}
.aia-score .row{display:flex; align-items:baseline; gap:14px;}
.aia-time{font-family:var(--c-disp); font-size:120px; font-weight:900; color:var(--c-yellow); line-height:1; letter-spacing:-.04em; text-shadow:0 0 30px var(--c-yellow);}
.aia-sec{font-family:var(--c-disp); font-size:20px; color:#fff; font-weight:900;}
.aia-sec .sub{font-family:var(--c-mono); font-size:10px; color:var(--c-yellow); opacity:.7; letter-spacing:.2em; margin-top:4px;}
.aia-pct{flex:1; text-align:right; font-family:var(--c-disp); font-size:44px; color:var(--c-red); font-weight:900; line-height:1;}
.aia-pct .u{font-size:22px;}
.aia-pct .sub{display:block; font-family:var(--c-mono); font-size:10px; color:var(--c-yellow); opacity:.7; letter-spacing:.2em; margin-top:4px;}
.aia-bar{margin-top:18px; height:14px; background:rgba(255,210,63,.15); border:2px solid var(--c-yellow); position:relative; overflow:hidden;}
.aia-bar > div{position:absolute; inset:0; background:repeating-linear-gradient(-45deg, var(--c-red) 0 8px, var(--c-yellow) 8px 16px); transition:width .1s linear;}
.aia-phase{font-family:var(--c-jp); font-size:14px; font-weight:900; color:#fff; margin-top:14px;}
.aia-phase .code{font-family:var(--c-mono); font-size:11px; color:var(--c-yellow); margin-left:10px;}
.aia-log{background:#000; border:3px solid var(--c-blue); box-shadow:5px 5px 0 var(--c-blue); padding:14px; height:140px; overflow-y:auto; font-family:var(--c-mono); font-size:11px; color:var(--c-green);}
.aia-log .hdr{color:var(--c-yellow); margin-bottom:6px;}
.aia-log .ts{color:var(--c-blue); margin-right:8px;}

@keyframes cblink { 50% { opacity: 0 } }

/* ============ RESULT ============ */
.aia-result{padding:40px 32px;}
.aia-banner{background:var(--c-ink); color:#fff; padding:24px 28px; border:4px solid var(--c-yellow); box-shadow:8px 8px 0 var(--c-red); display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.aia-banner .en{font-family:var(--c-mono); font-size:11px; color:var(--c-yellow); letter-spacing:.3em; font-weight:700;}
.aia-banner h2{font-family:var(--c-disp); font-size:38px; font-weight:900; margin:4px 0 0;}
.aia-banner h2 .yellow{color:var(--c-yellow);}
.aia-banner .meta .k{font-family:var(--c-mono); font-size:10px; color:var(--c-yellow); opacity:.7; letter-spacing:.2em;}
.aia-banner .meta .v{font-family:var(--c-mono); font-size:14px; color:#fff;}

/* .aia-top: スコア(価格+メタ) を先に、商品情報を下部へ横長配置 */
.aia-top{display:flex; flex-direction:column; gap:20px; margin-bottom:20px;}
.aia-top > div:not(.aia-top-img){order:1;}
.aia-top > .aia-top-img{order:2;}

.aia-top-img{
  background:var(--c-white); border:4px solid var(--c-ink); box-shadow:6px 6px 0 var(--c-ink); padding:18px;
  display:grid;
  grid-template-columns:220px minmax(200px,1fr) 1.4fr;
  grid-template-rows:auto auto auto auto;
  gap:6px 22px;
  align-items:start;
}
.aia-top-img > .wrap{position:relative; grid-column:1; grid-row:1 / -1; align-self:start;}
.aia-top-img img{width:100%; display:block; border:2px solid var(--c-ink);}
.aia-grade-badge{position:absolute; top:-10px; right:-10px; border:3px solid var(--c-ink); padding:6px 10px; font-family:var(--c-disp); font-size:28px; font-weight:900; box-shadow:4px 4px 0 var(--c-ink); transform:rotate(4deg);}
.aia-top-img .cat{grid-column:2; grid-row:1; font-family:var(--c-mono); font-size:10px; letter-spacing:.2em; font-weight:700; margin-top:0;}
.aia-top-img h3{grid-column:2; grid-row:2; font-family:var(--c-jp); font-size:18px; font-weight:900; margin:2px 0;}
.aia-top-img .brand{grid-column:2; grid-row:3; font-family:var(--c-disp); font-size:14px; color:var(--c-blue); font-weight:900;}
.aia-top-img .en{grid-column:2; grid-row:4; font-family:var(--c-mono); font-size:10px; opacity:.5; align-self:start;}
.aia-grade-reason{grid-column:3; grid-row:1 / -1; margin-top:0; padding:12px; background:var(--c-cream); border:2px solid var(--c-ink); align-self:stretch;}
.aia-grade-reason .k{font-family:var(--c-mono); font-size:10px; letter-spacing:.2em; font-weight:700;}
.aia-grade-reason .v{font-size:12px; margin-top:4px; line-height:1.7;}

.aia-prices{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:10px;}
.aia-price{background:var(--c-white); border:4px solid; padding:18px 16px; position:relative;}
.aia-price.mid{padding:22px 18px; transform:scale(1.02); box-shadow:8px 8px 0 var(--c-yellow);}
.aia-price:not(.mid){box-shadow:5px 5px 0 var(--c-ink);}
.aia-price .k{font-family:var(--c-mono); font-size:10px; letter-spacing:.25em; font-weight:700;}
.aia-price .ja{font-size:11px; opacity:.6; margin-top:2px;}
.aia-price .val{font-family:var(--c-disp); font-size:30px; font-weight:900; margin-top:8px; line-height:1; letter-spacing:-.03em;}
.aia-price.mid .val{font-size:42px;}
.aia-price .note{font-family:var(--c-mono); font-size:10px; opacity:.55; margin-top:6px;}
.aia-best{position:absolute; top:-14px; right:-12px; background:var(--c-red); color:#fff; padding:5px 12px; font-family:var(--c-disp); font-size:11px; font-weight:900; border:2px solid var(--c-ink); box-shadow:3px 3px 0 var(--c-ink); transform:rotate(-4deg);}

.aia-meta{margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.aia-meta .b{background:var(--c-white); border:3px solid var(--c-ink); padding:10px 14px; box-shadow:4px 4px 0 var(--c-ink);}
.aia-meta .k{font-family:var(--c-mono); font-size:9px; letter-spacing:.2em; font-weight:700;}
.aia-meta .v{font-family:var(--c-disp); font-size:22px; font-weight:900; margin-top:2px;}

.aia-ai{background:var(--c-white); border:4px solid var(--c-ink); box-shadow:6px 6px 0 var(--c-ink); margin-bottom:20px; display:grid; grid-template-columns:200px 1fr;}
.aia-ai .l{background:var(--c-ink); color:#fff; padding:20px 16px;}
.aia-ai .l .k{font-family:var(--c-mono); font-size:9px; color:var(--c-yellow); letter-spacing:.2em; font-weight:700;}
.aia-ai .l .n{font-family:var(--c-disp); font-size:28px; font-weight:900; margin-top:4px; line-height:1;}
.aia-ai .l .v{font-family:var(--c-mono); font-size:9px; color:var(--c-yellow); opacity:.6; margin-top:8px; letter-spacing:.15em;}
.aia-ai .r{padding:20px 24px;}
.aia-ai .r .k{font-family:var(--c-mono); font-size:10px; color:var(--c-red); letter-spacing:.2em; font-weight:700;}
.aia-ai .r .body{font-size:15px; line-height:1.9; margin-top:8px; font-weight:500;}

.aia-hlc{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.aia-hlc .b{background:var(--c-white); border:4px solid; box-shadow:6px 6px 0 var(--c-ink); padding:20px;}
.aia-hlc .plus{border-color:var(--c-blue);}
.aia-hlc .minus{border-color:var(--c-red);}
.aia-hlc .k{font-family:var(--c-mono); font-size:10px; letter-spacing:.25em; font-weight:700;}
.aia-hlc .h{font-family:var(--c-jp); font-size:18px; font-weight:900; margin-top:4px;}
.aia-hlc ul{margin:14px 0 0; padding:0; list-style:none;}
.aia-hlc li{font-size:13px; padding:10px 0; border-bottom:2px solid var(--c-cream); display:flex; gap:12px;}
.aia-hlc li .n{font-family:var(--c-disp); font-size:16px; font-weight:900; min-width:24px;}

.aia-sim{background:var(--c-white); border:4px solid var(--c-ink); box-shadow:6px 6px 0 var(--c-ink); margin-bottom:20px;}
.aia-sim .hd{padding:14px 20px; background:var(--c-ink); color:var(--c-yellow); display:flex; justify-content:space-between; border-bottom:3px solid var(--c-yellow); font-family:var(--c-mono); font-size:11px; letter-spacing:.25em; font-weight:700;}
.aia-sim .hd a{color:var(--c-yellow); text-decoration:underline;}
.aia-sim .row{display:grid; grid-template-columns:60px 1fr 140px 180px; padding:14px 20px; border-bottom:2px solid var(--c-cream); align-items:center;}
.aia-sim .row:last-child{border-bottom:none;}
.aia-sim .row .n{font-family:var(--c-disp); font-size:18px; color:var(--c-red); font-weight:900;}
.aia-sim .row .nm{font-family:var(--c-jp); font-size:14px; font-weight:700;}
.aia-sim .row .dt{font-family:var(--c-mono); font-size:11px; opacity:.6;}
.aia-sim .row .pr{font-family:var(--c-disp); font-size:20px; color:var(--c-red); font-weight:900; text-align:right;}

.aia-cta{background:var(--c-ink); color:#fff; padding:36px 32px; border:4px solid var(--c-yellow); box-shadow:8px 8px 0 var(--c-red);}
.aia-cta h3{font-family:var(--c-jp); font-size:32px; font-weight:900; margin:4px 0 6px;}
.aia-cta h3 .y{color:var(--c-yellow);}
.aia-cta .sub{color:var(--c-yellow); opacity:.8; margin-bottom:20px; font-size:13px;}
.aia-cta .btns{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.aia-cta a, .aia-cta button{display:block; text-decoration:none; text-align:center; padding:18px; border:3px solid #fff; font-family:var(--c-jp); font-weight:900; cursor:pointer; color:#fff;}
.aia-cta .a1{background:var(--c-red); box-shadow:5px 5px 0 var(--c-yellow);}
.aia-cta .a2{background:var(--c-blue); box-shadow:5px 5px 0 var(--c-yellow);}
.aia-cta .a3{background:var(--c-yellow); color:var(--c-ink); box-shadow:5px 5px 0 var(--c-red);}
.aia-cta .mini{font-family:var(--c-mono); font-size:10px; color:var(--c-yellow); margin-top:4px; letter-spacing:.15em;}
.aia-cta .a3 .mini{color:var(--c-red);}

/* ============ LEAD FORM MODAL ============ */
.aia-modal{position:fixed; inset:0; background:rgba(11,18,32,.85); display:none; align-items:center; justify-content:center; z-index:99999;}
.aia-modal.on{display:flex;}
.aia-modal .box{background:var(--c-cream); border:5px solid var(--c-ink); max-width:560px; width:90%; padding:28px; box-shadow:10px 10px 0 var(--c-red); max-height:90vh; overflow:auto;}
.aia-modal h3{font-family:var(--c-jp); font-size:24px; font-weight:900; margin:0 0 6px;}
.aia-modal .close{float:right; background:none; border:2px solid var(--c-ink); padding:4px 10px; cursor:pointer; font-weight:700;}
.aia-modal label{display:block; margin:14px 0 6px; font-size:12px; font-weight:700;}
.aia-modal input, .aia-modal textarea, .aia-modal select{width:100%; padding:10px 12px; border:2px solid var(--c-ink); background:#fff; font-family:var(--c-jp); font-size:14px;}
.aia-modal textarea{min-height:80px;}
.aia-modal .submit{margin-top:18px; width:100%; background:var(--c-red); color:#fff; border:3px solid var(--c-ink); padding:14px; font-weight:900; font-size:16px; cursor:pointer; box-shadow:4px 4px 0 var(--c-ink);}
.aia-modal .ok{padding:40px; text-align:center;}
.aia-modal .ok .ic{font-size:72px; color:var(--c-blue);}
.aia-modal .ok h4{font-size:22px; margin:14px 0 6px; font-weight:900;}

/* ============ ERROR ============ */
.aia-error{padding:80px 32px; text-align:center;}
.aia-error .big{font-family:var(--c-disp); font-size:88px; font-weight:900; color:var(--c-red); line-height:1;}
.aia-error h3{font-size:20px; font-weight:900; margin:20px 0 10px;}
.aia-error p{opacity:.7; font-size:14px; max-width:500px; margin:0 auto;}
.aia-error button{margin-top:30px; background:var(--c-red); color:#fff; padding:14px 36px; border:4px solid var(--c-ink); box-shadow:5px 5px 0 var(--c-ink); font-weight:900; font-size:16px; cursor:pointer;}

/* responsive */
@media (max-width:800px){
  /* 全要素が親幅を超えないように強制（突き抜け対策） */
  .ai-appraisal-root,
  .ai-appraisal-root *{max-width:100%; min-width:0;}
  .ai-appraisal-root{overflow-x:hidden; width:100%;}

  /* セクション内側パディングを大幅に縮小 */
  .aia-head{padding:16px 12px 14px !important;}
  .aia-intro{padding:16px 10px !important;}
  .aia-analyzing{padding:24px 10px !important;}
  .aia-result{padding:14px 10px !important;}
  .aia-top-result,.aia-top,.aia-ai,.aia-hlc,.aia-cta,.aia-sim,.aia-panel{padding-left:10px !important; padding-right:10px !important;}

  /* グリッドを1列に */
  .aia-intro,.aia-analyzing-inner,.aia-ai,.aia-hlc,.aia-cta .btns{grid-template-columns:1fr !important;}
  .aia-prices{grid-template-columns:1fr !important;}
  .aia-price.mid{transform:none;}

  /* CONFIDENCE/VS MARKET/GRADE を2列グリッド (box 高さを揃える) */
  .aia-meta{grid-template-columns:repeat(2,1fr) !important; gap:8px !important;}
  .aia-meta .b{padding:8px 10px !important; box-shadow:3px 3px 0 var(--c-ink) !important;}
  .aia-meta .v{font-size:18px !important; white-space:nowrap;}
  .aia-meta .k{white-space:nowrap;}
  .aia-sim .row{grid-template-columns:40px 1fr; gap:4px;}
  .aia-sim .row .dt,.aia-sim .row .pr{grid-column:span 2; text-align:left;}

  /* タイポ縮小 */
  .aia-time{font-size:72px;}
  .aia-head h1{font-size:22px !important;}
  .aia-h2{font-size:22px !important;}
  .aia-head{font-size:14px;}
  .aia-drop-empty .icon{font-size:56px !important;}
  .aia-drop-empty .jp{font-size:15px !important;}

  /* バナー (結果画面) */
  .aia-banner{flex-direction:column; align-items:flex-start; padding:16px !important;}
  .aia-banner h2{font-size:22px !important;}

  /* SP: 商品カードはシングルカラムに戻す */
  .aia-top-img{grid-template-columns:1fr; padding:14px !important;}
  .aia-top-img > .wrap{grid-column:1; grid-row:auto;}
  .aia-top-img > .cat,.aia-top-img > h3,.aia-top-img > .brand,.aia-top-img > .en,.aia-top-img > .aia-grade-reason{grid-column:1; grid-row:auto;}

  /* Drop エリア */
  .aia-drop{padding:20px 14px !important; min-height:240px;}
  .aia-drop img.preview{max-height:280px;}

  /* Analyzing 画像＆ログ */
  .aia-scan-wrap{margin:0 auto;}
  .aia-log{height:100px;}

  /* アイコンバッジが外に飛び出すのを抑える */
  .aia-grade-badge{top:-6px !important; right:-6px !important; font-size:20px !important; padding:4px 8px !important;}
}

/* 420px 以下でさらにタイト */
@media (max-width:420px){
  .aia-head h1{font-size:19px !important;}
  .aia-h2{font-size:18px !important;}
  .aia-submit{font-size:14px !important; padding:14px !important;}
  .aia-price{padding:14px 10px !important;}
  .aia-chips.c4{grid-template-columns:repeat(2,1fr);}
}