html { scroll-behavior:auto!important; }
html, body { overflow-x:hidden; }
body { background:#f5f6f8; }

/* ===== 페이지 스코프 ===== */
.mbl-list-page *{ box-sizing:border-box }
.mbl-list-page{
  color:#111827;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  padding-bottom:80px; /* 하단 고정바 삭제 → 여백 축소 */
}
.mbl-list-page .container{ max-width:1240px; margin:0 auto; padding:0 16px }

/* ===== 상단: 검색·비교 ===== */
.compare {
  margin:16px 0 10px;
  border:1px solid #e5e7eb; border-radius:16px; background:#fff;
  padding:14px;
}
.compare .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.compare .title{
  font-weight:900; font-size:18px; letter-spacing:-.3px; margin:0 0 10px; color:#0f172a;
}
.compare .search{
  position:relative; flex:1 1 420px; min-width:220px;
}
.compare input[type="search"]{
  width:100%;
  padding:12px 72px 12px 14px; /* 오른쪽 여백 크게 → 배지 겹침 방지 */
  border:1px solid #d1d5db; border-radius:10px;
  font-size:14px; outline:0;
}
.compare .search .kbd {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:11px; color:#6b7280; border:1px solid #e5e7eb; padding:2px 6px; border-radius:6px; background:#f9fafb;
  pointer-events:none; white-space:nowrap;
}
/* 초소형 화면(≤340px)에서는 배지 숨김 */
@media (max-width:340px){ .compare .search .kbd{ display:none } }

.compare .suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  max-height:280px; overflow:auto; z-index:20; display:none;
}
.compare .suggest.open{ display:block }
.sug-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
}
.sug-item:hover, .sug-item.active{ background:#f3f4f6 }
.sug-thumb{ flex:0 0 40px; height:40px; border:1px solid #eef0f3; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden }
.sug-thumb img{ max-width:100%; max-height:100%; object-fit:contain }
.sug-name{ font-weight:800; font-size:14px; color:#0f172a; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sug-cap{ font-size:11px; color:#374151; border:1px solid #e5e7eb; padding:2px 6px; border-radius:999px; background:#f9fafb }

.compare .picks{
  display:flex; flex-wrap:wrap; gap:8px;
}
.pick{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb;
}
.pick .thumb{ width:28px; height:28px; border:1px solid #eef0f3; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff }
.pick .thumb img{ max-width:100%; max-height:100%; object-fit:contain }
.pick .name{ font-size:12.5px; font-weight:800; color:#111827; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pick .cap{ font-size:11px; color:#374151; border:1px solid #e5e7eb; padding:1px 6px; border-radius:999px; background:#fff }
.pick .x{ border:0; background:transparent; cursor:pointer; font-size:14px; line-height:1; color:#6b7280 }
.pick .x:hover{ color:#ef4444 }

.compare .btns{ display:flex; gap:8px; margin-left:auto }
.compare .btn{
  appearance:none; border:1px solid transparent; border-radius:10px; padding:11px 14px; font-weight:900; font-size:14px; cursor:pointer;
  background:#4f46e5; color:#fff;
}
.compare .btn:disabled{ opacity:.5; cursor:not-allowed }
.compare .btn.sec{ background:#111827 }
.compare .hint{ font-size:12px; color:#6b7280 }

/* ===== 비교 패널(오버레이) ===== */
.compare-panel{
  position:fixed; inset:0; background:rgba(0,0,0,.36); z-index:40; display:none; align-items:flex-end; justify-content:center;
}
.compare-panel.open{ display:flex }
.cp-sheet{
  background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
  width:100%; max-width:1240px; max-height:90vh; overflow:auto;
  box-shadow:0 -12px 28px rgba(0,0,0,.18);
}
@media (min-width:801px){
  .cp-sheet{ margin:40px 16px; border-radius:16px; max-height:80vh }
}
.cp-head{
  position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 14px; display:flex; align-items:center; gap:10px; z-index:1;
}
.cp-title{ font-weight:900; font-size:16px; color:#0f172a }
.cp-close{ margin-left:auto; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; padding:8px 10px; cursor:pointer }

/* 데스크톱: 표 비교 */
.cp-body{ padding:14px; overflow:auto }
.cp-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
.cp-table th, .cp-table td{ border:1px solid #e5e7eb; padding:10px; font-size:13.5px; vertical-align:top; background:#fff; word-break:keep-all }
.cp-table th{ background:#f9fafb; font-weight:900; text-align:left; width:160px }
.cp-col-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.cp-col-head .meta{ display:flex; align-items:center; gap:10px; min-width:0 }
.cp-col-head .thumb{ flex:0 0 40px; height:40px; border:1px solid #eef0f3; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cp-col-head .thumb img{ max-width:100%; max-height:100%; object-fit:contain }
.cp-col-head .name{ font-weight:900; font-size:14px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px }
.cp-col-head .go{ flex:0 0 auto }
.cp-col-head .go .btn{ background:#4f46e5; color:#fff; border:0; border-radius:8px; padding:7px 10px; font-weight:900; font-size:12.5px }
.tag{ display:inline-block; padding:3px 7px; border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb; font-size:11px; color:#374151; margin-right:6px; margin-bottom:6px }
.price{ font-weight:900; font-family:ui-monospace,Menlo,Consolas,monospace }
.price-red{ color:#dc2626; font-weight:900; font-family:ui-monospace,Menlo,Consolas,monospace }

/* 모바일: 카드형 세로 비교 */
.cp-mobile{ display:none; padding:14px; }
.cp-mcard{
  border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:12px; display:flex; gap:12px; margin-bottom:12px;
}
.cp-mthumb{ flex:0 0 64px; height:64px; border:1px solid #eef0f3; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; }
.cp-mthumb img{ max-width:100%; max-height:100%; object-fit:contain }
.cp-minfo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px }
.cp-mtitle{ margin:0; font-weight:900; font-size:14px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-mcaps{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-mcaps .chip{ font-size:11px; padding:3px 7px; border:1px solid #e5e7eb; border-radius:999px; background:#f9fafb }
.cp-mprices{ display:grid; grid-template-columns:1fr; gap:6px; margin-top:4px }
.cp-mrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cp-mrow .lbl{ font-size:12px; color:#374151; }
.cp-mrow .val{ font-weight:900; }
.cp-mtel{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px }
.cp-mtel .tel{ font-size:11px; border:1px solid #e5e7eb; padding:2px 6px; border-radius:999px; background:#f9fafb; color:#374151 }
.cp-mgo .btn{ margin-top:6px; width:100%; background:#4f46e5; color:#fff; border:0; border-radius:8px; padding:10px 12px; font-weight:900; font-size:13px }

/* 모바일 전용 전환 */
@media (max-width:560px){
  .cp-body{ display:none; }
  .cp-mobile{ display:block; }
}

/* ===== 상단 얇은 배너 ===== */
.promo { margin:16px 0 6px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:center; gap:10px; }
.promo .dot { width:8px; height:8px; border-radius:50%; background:#4f46e5; flex:0 0 8px }
.promo .txt { font-size:13px; color:#4b5563; text-align:center }
@media (max-width:560px){ .promo .txt{ font-size:12px } }

/* ===== 섹션 공통/카드/브랜드/캐러셀 등 (그대로) ===== */
.section{ margin:40px 0; }
.section .shell{ position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px 14px; }
.section .head{ margin:0 0 12px; text-align:center; }
.section .title{ display:inline-block; margin:0; padding:6px 14px; font-size:18px; font-weight:900; letter-spacing:-.3px; color:#0f172a; border-radius:999px; background:#f9fafb; border:1px solid #e5e7eb; }
.section .desc{ margin:8px auto 0; font-size:12px; color:#6b7280; text-align:center; }

.brand-tabs{ display:flex; justify-content:center; gap:10px; margin:10px 0 14px; flex-wrap:wrap }
.brand-tabs button{ padding:9px 14px; border:1px solid #d1d5db; border-radius:999px; background:#fff; cursor:pointer; font-weight:800; font-size:13px; color:#374151; transition:background .12s ease, transform .05s ease, border-color .12s ease; }
.brand-tabs button:active{ transform:translateY(1px) }
.brand-tabs button.active{ background:#111827; color:#fff; border-color:#111827; }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1200px){ .grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){  .grid{ grid-template-columns:repeat(2,1fr) } }

@media (max-width:560px){
  .grid.is-carousel{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:0 2px; -webkit-overflow-scrolling:touch; }
  .grid.is-carousel::-webkit-scrollbar{ display:none; }
  .grid.is-carousel > .card{ flex:0 0 100%; scroll-snap-align:start; }
}
.carousel-btn{ position:absolute; top:calc(50% + 14px); transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:0; display:none; align-items:center; justify-content:center; color:#fff; background:rgba(20,20,20,.5); backdrop-filter: blur(6px); box-shadow:0 6px 16px rgba(0,0,0,.18); z-index:5; cursor:pointer; user-select:none; }
.carousel-btn:active{ transform:translateY(-50%) scale(.98) }
.carousel-prev{ left:8px; } .carousel-next{ right:8px; }
@media (max-width:560px){ .carousel-btn{ display:flex; } }

.card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; transition:transform .06s ease, border-color .12s ease; cursor:pointer; }
.card:hover{ transform:translateY(-2px); border-color:#d1d5db }
.card:active{ transform:translateY(-1px) }
.img{ height:160px; border:1px solid #eef0f3; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden }
.img img{ max-width:100%; max-height:100%; object-fit:contain }
.title-card{ text-align:center; font-weight:900; font-size:15px; color:#0f172a; line-height:1.35; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.capbar{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:4px }
.cap{ display:inline-block; padding:4px 9px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; font-size:11px; color:#374151; }
.cap.active{ background:#eef2ff; border-color:#c7d2fe; font-weight:800 }
.price-retail{ text-align:center; margin:6px 0 0; font-size:13px; font-weight:900; color:#111827 }
.price-retail .label{ font-size:11px; font-weight:700; color:#6b7280; margin-right:6px }
.kv{ font-size:12.5px; border:1px dashed #e5e7eb; border-radius:10px; padding:8px; background:#fafafa; margin-top:10px; }
.kv-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 2px; }
.kleft{ display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; }
.kname{ font-weight:800; color:#111827 }
.pill{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #c7d2fe; background:#eef2ff; color:#111827; font-size:10.5px; font-weight:800 }
.card-footer{ margin-top:6px; padding-top:0; border-top:0; }
.btn{ width:100%; appearance:none; border:1px solid transparent; border-radius:10px; padding:12px 0; font-weight:900; font-size:14px; cursor:pointer; background:#4f46e5; color:#fff; transition:background .12s ease, transform .05s ease, box-shadow .12s ease; }
.btn:hover{ background:#4338ca; box-shadow:0 8px 18px rgba(79,70,229,.25) }
.btn:active{ transform:translateY(1px) }

/* 브랜드 전용 */
.brand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px){  .brand-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){  .brand-grid{ grid-template-columns:1fr } }
.brand-card{ display:flex; align-items:center; gap:12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:10px; cursor:pointer; transition:border-color .12s ease, transform .05s ease; }
.brand-card:hover{ border-color:#d1d5db; transform:translateY(-1px) }
.brand-thumb{ flex:0 0 74px; height:74px; border:1px solid #eef0f3; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.brand-thumb img{ max-width:100%; max-height:100%; object-fit:contain }
.brand-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px }
.brand-title{ margin:0; font-weight:800; font-size:14px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-capbar{ display:flex; flex-wrap:wrap; gap:6px; }
.brand-cap{ font-size:11px; padding:3px 7px; border:1px solid #e5e7eb; border-radius:6px; background:#f9fafb; color:#374151 }
.brand-go .btn{ padding:9px 10px; font-size:13px; border-radius:8px; min-width:104px; }

/* 힌트 숨김 */
#hint{ display:none; }

/* 모바일 카드 내부 레이아웃(추천/가성비) */
@media (max-width:560px){
  .card-body{
    display:grid;
    grid-template-columns:110px 1fr;
    grid-template-areas: "img info" "kv kv";
    column-gap:12px; row-gap:8px; align-items:center;
  }
  .img{ grid-area:img; height:110px }
  .info{ grid-area:info; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .title-card{ text-align:left }
  .capbar{ justify-content:flex-start }
  .price-retail{ text-align:left; margin-top:0 }
  .kv{ grid-area:kv }
}

/* ================================================================== */
/* === Subtle tighten: border radius & stroke — 아래는 오버라이드(추가) === */
/* ================================================================== */
:root{
  --q-bd: #d9dee7;  /* 선색: 기존보다 아주 살짝 진하게 */
  --q-r1: 10px;     /* 큰 박스 둥글기 (기존 16px → 10px) */
  --q-r2: 8px;      /* 카드/썸네일 둥글기 (기존 12~14px → 8px) */
}

/* 큰 프레임(섹션/프로모/비교패널) */
.compare,
.section .shell,
.promo,
.cp-sheet {
  border-radius: var(--q-r1) !important;
  border-color: var(--q-bd) !important;
}

/* 카드/브랜드/모바일 비교 카드 + 작은 박스들 */
.card,
.brand-card,
.cp-mcard,
.pick,
.sug-thumb,
.cp-col-head .thumb,
.img,
.brand-thumb,
.kv {
  border-radius: var(--q-r2) !important;
  border-color: var(--q-bd) !important;
}

/* 표/칩/태그 라인 톤 맞춤 */
.cp-table th,
.cp-table td,
.tag,
.cap,
.brand-cap,
.compare,
.compare .suggest {
  border-color: var(--q-bd) !important;
}

/* 호버 시 라인도 살짝만 진하게 */
.card:hover,
.brand-card:hover {
  border-color: #cfd6e0 !important;
}

/* 입력/버튼 테두리 톤 통일 */
.compare input[type="search"],
.compare .btn,
.cp-close {
  border-color: var(--q-bd) !important;
  border-radius: var(--q-r2) !important;
}

/* 테이블/구분선 전반 톤 맞춤 */
.cp-body,
.cp-head,
.cp-table,
.cp-table th,
.cp-table td {
  border-color: var(--q-bd) !important;
}

/* 추천모델 헤더를 '읽어두면 좋은것들' 스타일로 */
#sec-reco-home .q-head {
  padding:12px 16px;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
#sec-reco-home .q-title {
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#111;
}
#sec-reco-home .q-title small {
  font-size:13px;
  font-weight:400;
  color:#666;
  margin-left:6px;
}
#sec-reco-home .more-btn {
  font-size:.875rem;
  font-weight:600;
  color:#555;
  border:1px solid #c8cfdb;
  border-radius:16px;
  padding:4px 12px;
  background:#fff;
  text-decoration:none;
  white-space:nowrap;
}
#sec-reco-home .more-btn:hover {
  background:#f4f6fa;
  color:#111;
  border-color:#b8c0cf;
}