:root{
  --paper:#F2F2EE;
  --ink:#15150F;
  --tape:#FFCE00;
  --rule:#CBCBC2;
  --muted:#5F5F58;
  --card:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  word-break:keep-all;overflow-wrap:break-word;
  font-family:Pretendard,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:10px 16px;
  font-size:14px;text-decoration:none;
}
.skip:focus{left:0}

/* ---- masthead ---- */
.masthead{border-bottom:2px solid var(--ink);padding:18px 0 14px;margin-bottom:0}
.mark{display:flex;align-items:baseline;gap:10px}
.mark b{
  font-family:Oswald,sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.06em;text-transform:uppercase;
}
.mark span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);letter-spacing:.04em}

/* ---- hero ---- */
.hero{padding:40px 0 20px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
h1{
  font-family:Oswald,sans-serif;font-weight:400;font-size:clamp(30px,6vw,50px);
  line-height:1.15;letter-spacing:-.01em;max-width:20ch;
}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--tape) 62%)}
.lede{margin-top:16px;max-width:52ch;color:#3A3A32;font-size:15px}

/* ---- ruler ---- */
.tool{margin:20px 0 10px}
.tool-label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.ruler{
  position:relative;background:var(--tape);border:2px solid var(--ink);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.ticks{display:flex;height:82px;align-items:flex-end;padding:0 8px;min-width:max-content}
.tick{
  position:relative;flex:0 0 auto;width:34px;height:100%;
  background:none;border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  font-family:Oswald,sans-serif;
}
.tick::after{
  content:"";position:absolute;bottom:0;left:50%;width:1px;
  transform:translateX(-50%);
  height:22px;background:var(--ink);opacity:.55;
}
.tick[data-major="1"]::after{height:38px;width:2px;opacity:1}
.tick i{font-style:normal;font-size:13px;margin-bottom:42px;opacity:0;transition:opacity .12s}
.tick[data-major="1"] i{opacity:1}
.tick:hover i{opacity:1}
.tick[aria-pressed="true"]{background:var(--ink)}
.tick[aria-pressed="true"] i{opacity:1;color:var(--tape);font-weight:600}
.tick[aria-pressed="true"]::after{background:var(--tape)}
.tick:focus-visible{outline:3px solid #0A5BD3;outline-offset:-3px}

/* ---- readout ---- */
.readout{
  border:2px solid var(--ink);border-top:0;background:var(--card);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.cell{padding:14px 8px;text-align:center;border-right:1px solid var(--rule)}
.cell:last-child{border-right:0}
.cell dt{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;
}
.cell dd{font-family:Oswald,sans-serif;font-size:clamp(20px,4.4vw,30px);margin-top:2px}
.cell.is-base dd{color:var(--ink)}
.cell.is-base{background:var(--tape)}

/* ---- brands ---- */
.brands{margin-top:34px}
.brand-list{border-top:1px solid var(--rule)}
.brand{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:14px 2px;border-bottom:1px solid var(--rule);
}
.brand-name{font-weight:600;font-size:15px}
.brand-note{color:var(--muted);font-size:13px;margin-top:2px;line-height:1.5}
.brand-pick{
  font-family:Oswald,sans-serif;font-size:24px;white-space:nowrap;
  padding:2px 10px;border:2px solid var(--ink);
}
.brand-pick.up{background:var(--tape)}
.src{
  display:block;margin-top:6px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:#6B6B63;letter-spacing:.01em;
}
.note-band{
  margin-top:16px;padding:10px 12px;border-left:3px solid var(--rule);
  font-size:13px;color:var(--muted);
}

/* ---- sections ---- */
section{padding:44px 0}
h2{
  font-family:Oswald,sans-serif;font-weight:400;font-size:26px;
  letter-spacing:.01em;padding-bottom:10px;border-bottom:2px solid var(--ink);
}
h3{font-size:16px;font-weight:600;margin:24px 0 6px}
p{margin-top:12px;font-size:15px;color:#33332C;max-width:62ch}

/* ---- table ---- */
.scroller{overflow-x:auto;margin-top:18px;border:1px solid var(--rule);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-family:"IBM Plex Mono",monospace;font-size:13px}
th,td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th{
  background:var(--ink);color:var(--paper);font-weight:500;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0;
}
tbody tr:nth-child(5n) td{border-bottom:1px solid var(--ink)}
tbody th{background:#FAF8EF;font-weight:500;font-size:14px;border-right:1px solid var(--rule)}
caption{caption-side:bottom;padding:10px;font-size:12px;color:var(--muted);text-align:left;font-family:Pretendard,sans-serif}

/* ---- faq ---- */
details{border-bottom:1px solid var(--rule);padding:14px 0}
summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";font-family:"IBM Plex Mono",monospace;color:var(--muted)}
details[open] summary::before{content:"− "}
details p{margin-top:8px}

footer{border-top:2px solid var(--ink);padding:22px 0 50px;font-size:12px;color:var(--muted)}
.disclaimer{margin-top:8px;max-width:60ch;line-height:1.6}

@media (max-width:560px){
  .readout{grid-template-columns:repeat(2,1fr)}
  .cell:nth-child(1){grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--rule)}
  .cell:nth-child(2n+1){border-right:0}
  .cell:nth-child(n+4){border-top:1px solid var(--rule)}
  .brand{grid-template-columns:1fr auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- model page ---- */
.crumb{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  padding:14px 0 0;color:var(--muted);
}
.crumb a{color:var(--muted)}
.verdict{
  border:2px solid var(--ink);background:var(--card);margin:26px 0 8px;
}
.verdict-top{
  background:var(--tape);border-bottom:2px solid var(--ink);
  padding:10px 16px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;
}
.verdict-body{padding:18px 16px}
.verdict-body strong{
  display:block;font-family:Oswald,sans-serif;font-weight:400;
  font-size:clamp(22px,5vw,32px);line-height:1.2;
}
.verdict-body p{margin-top:10px;font-size:14px}
.pick-table thead th:first-child{background:var(--ink)}
.pick-table td.rec{font-weight:500}
.pick-table tr.hit td.rec{font-weight:600}
.width-grid{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:18px}
.width-row{
  display:grid;grid-template-columns:88px 1fr;gap:14px;
  padding:13px 2px;border-bottom:1px solid var(--rule);align-items:baseline;
}
.width-row dt{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;
}
.width-row dd{font-size:14px}
.related{display:grid;gap:10px;margin-top:16px}
.related a{
  display:block;padding:13px 15px;border:1px solid var(--rule);background:var(--card);
  text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;
}
.related a:hover{border-color:var(--ink)}
.related a span{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:3px}
a{color:var(--ink)}
a:focus-visible{outline:3px solid #0A5BD3;outline-offset:2px}
.brand-name a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--tape)}
.brand-name a:hover{border-bottom-color:var(--ink)}

/* ---- 직접 입력 ---- */
.entry{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:12px;
}
.entry label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.entry input{
  font-family:Oswald,sans-serif;font-size:20px;width:104px;
  padding:6px 10px;border:2px solid var(--ink);background:var(--card);
  color:var(--ink);
}
.entry input:focus-visible{outline:3px solid #0A5BD3;outline-offset:2px}
.entry .hint{font-size:12px;color:var(--muted)}
@media (max-width:520px){
  .entry .hint,.entry .warn{flex-basis:100%;margin-top:-2px}
}
.entry .warn{font-size:12px;color:#A3320B;font-weight:500}

/* ---- 표 행 강조 (모델 페이지) ---- */
tbody tr.hit th,tbody tr.hit td{background:var(--tape);font-weight:600;color:var(--ink)}
tbody tr.hit th{box-shadow:inset 5px 0 0 var(--ink)}
tbody tr.hit td,tbody tr.hit th{border-bottom:2px solid var(--ink);border-top:2px solid var(--ink)}