/* 글꼴은 직접 올림: optional 이라 늦게 와도 화면을 다시 짜지 않는다(새로 고침 밀림 방지). */
@font-face{font-family:'WO Sans';font-weight:400;font-display:optional;src:url(/fonts/sans-400.woff2) format('woff2')}
@font-face{font-family:'WO Sans';font-weight:500;font-display:optional;src:url(/fonts/sans-500.woff2) format('woff2')}
@font-face{font-family:'WO Sans';font-weight:600;font-display:optional;src:url(/fonts/sans-600.woff2) format('woff2')}
@font-face{font-family:'WO Sans';font-weight:700;font-display:optional;src:url(/fonts/sans-700.woff2) format('woff2')}
@font-face{font-family:'WO Mono';font-weight:400;font-display:optional;src:url(/fonts/mono-400.woff2) format('woff2')}
@font-face{font-family:'WO Mono';font-weight:500;font-display:optional;src:url(/fonts/mono-500.woff2) format('woff2')}
@font-face{font-family:'WO Mono';font-weight:600;font-display:optional;src:url(/fonts/mono-600.woff2) format('woff2')}

/* 디자인 값은 여기 한 곳에서만 정한다. 다른 곳에 숫자를 직접 쓰지 말 것(_tools/design-check.mjs 가 잡는다).
   글자: 설명 12 / 보조 13 / 표·입력 14 / 본문 15 / 소제목 18 / 큰 숫자 24 / 제목 28 / 시세 36
   간격: 4배수. 조작 요소 높이: 40. 모서리: 태그 6 / 단추·입력 8 / 판 12. 글자 굵기: 400·500·600·700 */
:root{
 --bg:#0B0E14;--hd:#0E121A;--panel:#121722;--panel2:#171C27;--field:#0F131C;--hover:#1A2130;--photo:#F4F5F7;
 --line:#1F2633;--line2:#2A3342;--line3:#3F4B5F;
 --tx:#E8ECF3;--tx2:#C6CEDB;--tx3:#A9B3C4;--mut:#929DB0;
 --up:#FF5A5F;--dn:#4C9BFF;--gold:#D9B24C;--on-gold:#14110A;--ok:#3DBE7B;--warn:#E5B454;
 --up-bg:rgba(255,90,95,.14);--dn-bg:rgba(76,155,255,.14);--warn-bg:rgba(229,180,84,.1);--warn-line:rgba(229,180,84,.35);
 --t-xs:12px;--t-sm:13px;--t-md:14px;--t-base:15px;--t-lg:18px;--t-xl:24px;--t-h1:28px;--t-big:36px;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:48px;
 --r-s:6px;--r:8px;--r-l:12px;
 --t-ch:12px;--ctl:40px;--ph:48px;--ph-s:32px;--gut:32px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;overflow-y:scroll}
body{background:var(--bg);color:var(--tx);font-family:'WO Sans','Malgun Gothic','Apple SD Gothic Neo',sans-serif;font-size:var(--t-base);line-height:1.5;letter-spacing:-.01em;min-height:100vh;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
em{font-style:normal}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-s)}
.num{font-family:'WO Mono',ui-monospace,monospace;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.up{color:var(--up)}.dn{color:var(--dn)}.flat{color:var(--mut)}
.r{text-align:right}
.sample{display:block;color:var(--mut);font-size:var(--t-xs)}
.sample b{color:var(--warn);font-weight:500}
.vs-m{display:block;color:var(--mut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.show-m{display:none}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:100;padding:var(--s2) var(--s4);background:var(--gold);color:var(--on-gold);border-radius:var(--r)}
.skip:focus{top:var(--s2)}

/* 글자 단계 */
h1{font-size:var(--t-h1);font-weight:700;line-height:1.3}
h2{font-size:var(--t-lg);font-weight:600;line-height:1.4}
.desc,.sub,.ref,.note,.nm em,.stat em,.cells span,.tick-label,.foot,.rb-t,.chart-x,.crumb{color:var(--mut)}
.desc,.note,.crumb,.more{font-size:var(--t-sm)}
.sub,.ref,.nm em,.stat em,.cells span,.rb-t,.chart-x,.foot{font-size:var(--t-xs)}
.sub,.ref,.desc{display:block}
.note{margin-top:var(--s3)}
.note.below{margin:0 0 var(--s3)}
.ref{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{margin-left:var(--s1);color:var(--mut);font-size:var(--t-sm);font-weight:400}

/* 단추·입력: 높이 40, 모서리 8 로 전부 같다 */
.btn,.ctl{display:inline-flex;align-items:center;justify-content:center;height:var(--ctl);padding:0 var(--s4);border:1px solid var(--line2);border-radius:var(--r);background:var(--panel2);color:var(--tx);font:inherit;font-size:var(--t-md);white-space:nowrap}
.btn{cursor:pointer;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--line3);background:var(--hover)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
.ctl{padding:0 var(--s3);font-size:16px}
.ctl:focus{outline:0;border-color:var(--gold)}
.lnk{text-decoration:underline;text-underline-offset:2px}.lnk:hover{color:#fff}
.more{color:var(--mut);white-space:nowrap}.more:hover{color:#fff}
.links{display:flex;flex-wrap:wrap;gap:var(--s2)}
.star{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl);height:var(--ctl);border-radius:var(--r);color:var(--line3)}
.star svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.star:hover{color:var(--tx2);background:var(--hover)}
.star.on{color:var(--gold)}.star.on svg{fill:currentColor}

/* 태그·등락: 모서리 6, 글자 12 */
.tag,.pill{display:inline-block;padding:2px var(--s2);border-radius:var(--r-s);font-size:var(--t-xs);white-space:nowrap}
.tag{border:1px solid currentColor}
.tag.ok{color:var(--ok)}.tag.warn{color:var(--warn)}.tag.off{color:var(--mut)}
.pill.up{background:var(--up-bg)}.pill.dn{background:var(--dn-bg)}

/* 머리 */
.top{position:sticky;top:0;z-index:50;background:var(--hd);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:var(--s7);height:64px}
.logo{flex:none;font-size:var(--t-lg);font-weight:500;letter-spacing:.08em}
.logo b{font-weight:700;color:var(--gold)}
.main{display:flex;gap:var(--s6);color:var(--tx3);white-space:nowrap}
.main a{padding:var(--s2) 0;border-bottom:2px solid transparent}
.main a:hover{color:#fff}
.main a.on{color:#fff;font-weight:600;border-bottom-color:var(--gold)}
.search{position:relative;margin-left:auto;flex:0 1 360px;min-width:140px}
.search svg{position:absolute;left:var(--s3);top:var(--s3);color:var(--mut)}
.search input{width:100%;height:var(--ctl);padding:0 var(--s3) 0 36px;border-radius:var(--r);background:var(--panel2);border:1px solid var(--line2);color:var(--tx);font:inherit;font-size:16px;outline:0}
.search input:focus{border-color:var(--gold)}
.search input::placeholder{color:var(--mut);font-size:var(--t-md)}
.sug{position:absolute;top:calc(var(--ctl) + var(--s1));right:0;width:max(100%,440px);max-width:calc(100vw - var(--s7));max-height:70vh;overflow-y:auto;display:none;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-l);box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:60}
.sug.show{display:block}
.sug a{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.sug a:last-child{border:0}
.sug a:hover,.sug a.sel{background:var(--hover)}
.sug .nm{flex:1}
.sug strong{font-weight:500}
.sug-none{padding:var(--s4);color:var(--mut);font-size:var(--t-md)}
.unit{display:flex;flex:none;height:var(--ctl);padding:2px;gap:2px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r)}
.unit button{width:36px;border-radius:var(--r-s);color:var(--mut)}
.unit button:hover{color:#fff}
.unit button.on{background:var(--gold);color:var(--on-gold);font-weight:600}
.banner{padding:var(--s2) var(--gut);background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--warn);font-size:var(--t-md);text-align:center}

/* 롤링바 */
.tick{display:flex;height:var(--s8);overflow:hidden;background:var(--hd);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.tick-label{flex:none;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4) 0 var(--gut);border-right:1px solid var(--line);white-space:nowrap}
.tick-label i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.tick-view{flex:1;overflow:hidden}
.tick-track{display:flex;width:max-content;height:100%}
.tick-track.run{animation:roll var(--dur,120s) linear infinite}
.tick:hover .tick-track,.tick:focus-within .tick-track{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.tick-track a{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4);white-space:nowrap}
.tick-track a:hover{background:var(--hover)}
.tick-t{display:flex;flex-direction:column;line-height:1.3}
.tick-t b{font-weight:500;color:var(--tx2)}
.tick-t .num{color:var(--tx3);font-size:var(--t-xs)}

/* 판과 줄 간격: 판 사이 20, 판 안쪽 20, 제목 아래 12 */
main.wrap{padding-top:var(--s7);padding-bottom:var(--s8)}
.page-head{margin-bottom:var(--s5)}
.page-head p{margin-top:var(--s1);color:var(--tx3);font-size:var(--t-md)}
.page-head b{color:var(--tx);font-weight:500}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s5);min-width:0}
main>.panel,.grid-main,.dt{margin-bottom:var(--s5)}
.panel.flush{padding:0;overflow:hidden}
.panel>h2{margin-bottom:var(--s3)}
.sec-t{padding:var(--s4) var(--s5) var(--s2)}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s5)}
.stack{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s3)}
.head.mt{margin-top:var(--s6)}
.empty{color:var(--mut);padding:var(--s7) var(--s5);text-align:center;font-size:var(--t-md)}
.empty.small{padding:var(--s3) 0;text-align:left;font-size:var(--t-sm)}
.side{display:flex;flex-direction:column;gap:var(--s5)}
.side h2{margin-bottom:var(--s2)}
.side h2,.calc h2{font-size:var(--t-base)}
.calc h2{margin-bottom:var(--s3)}

/* 사진: 판매처마다 배경이 달라 밝은 판 위에 잘리지 않게 놓는다 */
.ph{display:block;flex:none;width:var(--ph);height:var(--ph);border-radius:var(--r);overflow:hidden;background:var(--photo)}
.ph img{width:100%;height:100%;object-fit:contain}
.ph-s{width:var(--ph-s);height:var(--ph-s);border-radius:var(--r-s)}
.ph-l{width:100%;height:auto;aspect-ratio:1;margin-bottom:var(--s2)}
.noimg{background:var(--panel2) center/40% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23929DB0' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 10.5V16l3.5 2.5M12 7l1-5h6l1 5M12 25l1 5h6l1-5'/%3E%3C/svg%3E")}

/* 이름 묶음: 어디서나 브랜드 12 / 이름 15 굵게 / 레퍼런스 12 */
.nm{display:block;min-width:0}
.nm em{display:block}
.nm strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttl{display:block;font-size:var(--t-md);color:var(--tx2)}

/* 요약 칸 */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.stat{padding:var(--s3) var(--s4);background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r)}
.stat span{display:block;color:var(--tx3);font-size:var(--t-sm)}
.stat strong{display:block;margin:2px 0;font-size:var(--t-xl);font-weight:500;line-height:1.3}

/* 브랜드 줄 */
.br{display:grid;grid-template-columns:minmax(120px,1fr) 72px 72px 160px;gap:var(--s3);align-items:center}
.br.br-head{min-height:0;padding:0 var(--s2) var(--s2);border-bottom:1px solid var(--line2);color:var(--mut);font-size:var(--t-sm)}
.br.br-head:hover{background:none}
.br{min-height:var(--ctl);padding:var(--s2);border-bottom:1px solid var(--line)}
.br:last-child{border-bottom:0}
.br:hover{background:var(--hover)}
.br-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-bar{display:block;height:6px;border-radius:3px;background:var(--line2);overflow:hidden}
.br-bar i{display:block;height:100%;background:var(--gold)}
.br strong{font-weight:500}

/* 사진 카드: 띠와 진열이 같은 모양 */
.hero{display:flex;flex-direction:column}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin-top:auto;padding-top:var(--s5)}
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.pc{display:block;min-width:0}
.pc:hover strong{text-decoration:underline}
.pc em{display:block;color:var(--mut);font-size:var(--t-xs)}
.pc strong{display:block;font-size:var(--t-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc .num{display:block;color:var(--tx3);font-size:var(--t-sm)}

/* 순위 묶음 */
.rk{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0}
.rk:hover{background:var(--hover)}
.rk .nm{flex:1}
.rk .r{flex:none}
.rk .r strong{display:block;font-weight:500}
.rk .r span{font-size:var(--t-sm)}

/* 시장 분위기 */
.mood{display:flex;height:8px;gap:2px;border-radius:4px;overflow:hidden}
.mood .u{background:var(--up)}.mood .d{background:var(--dn)}
.mood-t{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s2);font-size:var(--t-sm)}

/* 표: 머리 13, 값 15, 줄 안쪽 12 */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{position:relative;padding:var(--s3);border-bottom:1px solid var(--line2);color:var(--mut);font-size:var(--t-sm);font-weight:400;text-align:left;white-space:nowrap}
th.r{text-align:right}
th a:hover,th a.on{color:#fff}
td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.rw{cursor:pointer}
.rw:hover,.lst tr:hover{background:var(--hover)}
.rank{color:var(--mut);width:var(--ctl)}
.cell-name{min-width:240px}
.cell-name a{display:flex;align-items:center;gap:var(--s3);min-width:0}
.cell-price{white-space:nowrap}
td strong.num{font-weight:500}
.cell-star{width:56px;padding-left:0;padding-right:var(--s2)}
.lst .cell-name a:hover .ttl{text-decoration:underline}
.rb{position:relative;display:block;width:120px;height:6px;border-radius:3px;background:var(--line2)}
.rb i{position:absolute;top:0;height:100%;border-radius:3px;background:var(--line3)}
.rb b{position:absolute;top:-3px;width:3px;height:12px;margin-left:-1px;border-radius:2px;background:var(--gold)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-bottom:var(--s3);color:var(--tx3);font-size:var(--t-md)}
.filters label{display:inline-flex;align-items:center;gap:var(--s2)}
.chk{min-height:var(--ctl);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--gold)}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);margin-top:var(--s5);color:var(--tx3)}
.pager a:first-child{justify-self:end}
.pager a:last-child{justify-self:start}

/* 시장 지도 */
.map{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:88px;grid-auto-flow:dense;gap:var(--s1)}
.tile{display:flex;gap:var(--s2);padding:var(--s2);min-width:0;overflow:hidden;border-radius:var(--r-s);background:var(--panel2)}
.tile:hover{outline:2px solid var(--gold);outline-offset:-2px}
.x4{grid-column:span 4;grid-row:span 3}.x3{grid-column:span 4;grid-row:span 2}.x2{grid-column:span 3;grid-row:span 2}.x1{grid-column:span 3;grid-row:span 1}
.tile-ph{flex:1 1 45%;width:auto;height:auto;min-width:0;border-radius:var(--r-s)}
.tile-t{flex:1 1 55%;min-width:0;display:flex;flex-direction:column;justify-content:center;font-size:var(--t-sm)}
.tile-t em{color:var(--tx2);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-t strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-v{color:#fff;font-size:var(--t-xs)}
.tile .sample{color:var(--tx2)}
.x2{flex-direction:column}.x2 .tile-ph{flex:1 1 0;min-height:0}.x2 .tile-t{flex:none}
.x1 .tile-ph{flex:0 0 var(--s8)}
.x4 .tile-t strong{font-size:var(--t-lg);white-space:normal}

/* 브랜드 목록 */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.panel.row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3)}
.panel.row:hover{border-color:var(--line3)}

/* 상세 */
.crumb{margin-bottom:var(--s3)}
.crumb a:hover{color:#fff}
.dt{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--s5)}
.dt-ph{width:100%;height:100%;min-height:320px;border-radius:var(--r-l)}
.dt-img{display:flex;flex-direction:column}
.dt-img .dt-ph{flex:1}
.dt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.dt-brand{color:var(--mut);font-size:var(--t-md)}
.dt-top .ref{font-size:var(--t-md)}
.dt-act{display:flex;flex:none;align-items:center;gap:var(--s2)}
.dt-price{margin-top:var(--s4)}
.lbl{display:block;color:var(--tx3);font-size:var(--t-sm)}
.big{display:block;margin:var(--s1) 0;font-size:var(--t-big);font-weight:600;line-height:1.2}
.vs{display:block;margin-top:var(--s2);color:var(--tx3);font-size:var(--t-sm)}
.chg{display:flex;gap:var(--s6);margin-top:var(--s3)}
.chg em{display:block;color:var(--mut);font-size:var(--t-xs)}
.chg b{font-weight:500;font-size:var(--t-md)}
.dt-range{margin-top:var(--s4);max-width:480px}
.dt-range .rb{width:100%}
.rb-t{display:flex;justify-content:space-between;margin-top:var(--s2)}
.warnbox{margin-top:var(--s4);padding:var(--s3);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r);color:var(--warn);font-size:var(--t-md)}
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--s5);background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cells div{padding:var(--s3) var(--s4);background:var(--panel)}
.cells span{display:block}
.cells strong{font-size:var(--t-md);font-weight:500}
.chart{display:block;width:100%;height:auto}
.chart-x{display:flex;justify-content:space-between}
.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:var(--s5);background:var(--field);border:1px dashed var(--line2);border-radius:var(--r);text-align:center}
.chart-empty p{margin-top:var(--s1);color:var(--mut);font-size:var(--t-sm)}
.mini-r{display:grid;grid-template-columns:1fr auto 120px;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t-md)}
.mini-r:last-of-type{border-bottom:0}
.mini-r strong{text-align:right;font-weight:500}

/* 비용 계산 */
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.calc h2,.calc .note,.calc-r{grid-column:1/-1}
.calc .note{margin-top:0}
.field{display:flex;flex-direction:column;gap:var(--s1);color:var(--tx3);font-size:var(--t-sm)}
.field .ctl{width:100%;justify-content:flex-start;text-align:right}
.calc-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6);font-size:var(--t-md)}
.calc-r div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.calc-r dt{color:var(--tx3);font-family:'WO Sans','Malgun Gothic',sans-serif;letter-spacing:-.01em}
.calc-r .tot dd{color:var(--gold);font-weight:600}

/* 문서 */
.doc{max-width:760px}
.doc h2{margin:var(--s6) 0 var(--s2)}
.doc p,.doc li{color:var(--tx2)}
.doc ol{padding-left:var(--s5)}
.doc li{margin-top:var(--s1)}

.foot{padding-top:var(--s5);padding-bottom:var(--s7);border-top:1px solid var(--line)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s2);font-size:var(--t-sm);color:var(--tx3)}
.foot nav a{text-decoration:underline;text-underline-offset:2px}
.foot nav a:hover{color:#fff}
.foot p{margin-top:var(--s1)}

/* 자료 상태 줄 */
.status{background:var(--panel);border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--mut)}
.status-in{display:flex;align-items:center;gap:var(--s5);min-height:var(--s7);overflow:hidden;white-space:nowrap}
.st b{color:var(--tx2);font-weight:500}
.st i{display:inline-block;width:6px;height:6px;margin-right:var(--s2);border-radius:50%;background:var(--ok);vertical-align:middle}
.src{margin-left:var(--s2)}
.lnk-q{margin-left:auto;color:var(--tx3);text-decoration:underline;text-underline-offset:2px}
.lnk-q:hover{color:#fff}
.logo{display:inline-flex;align-items:center;gap:var(--s2)}
.logo img{display:block}

/* 근거 띠 */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:var(--s5);background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.trust div{padding:var(--s4) var(--s5);background:var(--panel)}
.trust b{display:block;font-size:var(--t-md);font-weight:600}
.trust span{display:block;margin-top:2px;color:var(--mut);font-size:var(--t-sm)}
.stat-row.four{margin-bottom:var(--s5)}

/* 지수 칸 */
.idx-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s4)}
.idx{display:block;position:relative;min-width:0;padding:var(--s3);overflow:hidden;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);text-align:left}
.idx:hover{border-color:var(--line3)}
.idx.on{border-color:var(--gold)}
.idx-n{display:block;color:var(--tx3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx strong{display:block;margin-top:2px;font-size:var(--t-base);font-weight:600;white-space:nowrap}
.idx-s{display:block;color:var(--mut);font-size:var(--t-xs)}
.mini{display:block;width:100%;height:var(--s7);margin-top:var(--s2)}
.quote{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.kv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.kv span{display:block;color:var(--mut);font-size:var(--t-xs);font-family:'WO Sans','Malgun Gothic',sans-serif;letter-spacing:-.01em}
.kv b{font-size:var(--t-md);font-weight:500}
.chart-t{margin:var(--s5) 0 var(--s2);color:var(--tx3);font-size:var(--t-sm);font-weight:500}

/* 차트 */
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-t{fill:var(--mut);font-size:var(--t-ch);font-family:'WO Mono',ui-monospace,monospace}
.ch-area{fill:var(--gold);opacity:.14}
.ch-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
.ch-line.thin{stroke-width:1}
.ch-med{stroke:var(--tx3);stroke-width:1;stroke-dasharray:4 4}
.ch-medt{fill:var(--tx2);font-size:var(--t-ch)}
.ch-hit{fill:transparent}
.ch-hit:hover{fill:rgba(217,178,76,.12)}
.d-a{fill:var(--gold);fill-opacity:.9}
.d-s{fill:var(--mut);fill-opacity:.45}
.strip-svg{display:block;width:112px;height:var(--s5)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2);color:var(--mut);font-size:var(--t-xs)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:var(--s2)}
.legend i:first-child{margin-left:0}
.k-a{background:var(--gold)}.k-s{background:var(--mut)}.k-u{background:var(--up)}.k-d{background:var(--dn)}.k-n{background:var(--line3)}
.tip{position:fixed;left:0;top:0;z-index:90;padding:var(--s1) var(--s2);background:var(--bg);border:1px solid var(--line3);border-radius:var(--r-s);color:var(--tx);font-size:var(--t-xs);white-space:nowrap;pointer-events:none}

/* 탭: 시세 화면의 기간 단추 모양 */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.tab:not(.idx){height:var(--ctl);padding:0 var(--s3);border-radius:var(--r);color:var(--tx3);font-size:var(--t-md)}
.tab:not(.idx):hover{color:#fff;background:var(--hover)}
.tab:not(.idx).on{background:var(--panel2);color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px var(--line3)}
.head .tabs{margin-bottom:0}
/* 시세판 브랜드 탭 = 실제 브랜드 로고(흰색 한 색, _tools/brand-logos.mjs). 고른 탭만 또렷하게 */
.tabs-logo .tab:not(.idx){display:inline-flex;align-items:center;justify-content:center;height:var(--s8);padding:0 var(--s4)}
.blogo{display:block;max-width:none;opacity:.55;transition:opacity .15s}
.tab:hover .blogo{opacity:.85}
.tab.on .blogo{opacity:1}

/* 순위 번호·한 줄 제목 */
.rk-n{flex:none;width:var(--s4);color:var(--mut);font-size:var(--t-sm);text-align:center}
.ttl.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mood-v{font-size:var(--t-md);font-weight:600;white-space:nowrap}
.cell-spec{white-space:nowrap;color:var(--tx3);font-size:var(--t-sm)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-bottom:var(--s5)}

/* 호가창 */
.ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.lh{display:flex;justify-content:space-between;padding-bottom:var(--s2);border-bottom:1px solid var(--line2);color:var(--mut);font-size:var(--t-xs)}
.lr{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:var(--s7);padding:0 var(--s2);border-bottom:1px solid var(--line);overflow:hidden;font-size:var(--t-sm)}
.lr i{position:absolute;left:0;top:0;bottom:0}
.lr.ask i{background:rgba(217,178,76,.14)}
.lr.done i{background:rgba(146,157,176,.12)}
.lr b,.lr span{position:relative;font-weight:500}
.lr span{color:var(--mut);font-size:var(--t-xs)}
.lr:hover{background:var(--hover)}

/* 사양 */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-bottom:var(--s5)}
.spec div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t-md)}
.spec div:last-child{border-bottom:0}
.spec dt{flex:none;color:var(--mut)}
.spec dd{margin:0;text-align:right;overflow-wrap:anywhere}

/* 시장 지도 브랜드 묶음 */
.map-b{margin-bottom:var(--s6)}
.map-b h2 a:hover{text-decoration:underline}
.x4{grid-column:span 6;grid-row:span 3}
.x1{grid-column:span 3;grid-row:span 2;flex-direction:column}
.x1 .tile-ph{flex:1 1 0;min-height:0}
.x1 .tile-t{flex:none}
.tile-v{font-weight:500}

/* 영상 */
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.vd{min-width:0}
.vd.on{grid-column:span 2}
.vd-th,.vd-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);overflow:hidden;background:var(--field)}
.vd-th,.vd-frame{position:relative}
.vd-frame>div,.vd-frame>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd-th img{width:100%;height:100%;object-fit:cover}
.vd-th i{position:absolute;left:50%;top:50%;width:var(--s8);height:var(--s7);transform:translate(-50%,-50%);border-radius:var(--r);background:rgba(11,14,20,.8)}
.vd-th i::after{content:'';position:absolute;left:19px;top:9px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--tx)}
.vd-th:hover i{background:var(--gold)}
.vd h3{display:-webkit-box;margin-top:var(--s2);overflow:hidden;font-size:var(--t-md);font-weight:500;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vd p{margin-top:var(--s1);font-size:var(--t-xs)}
.vd-ch{color:var(--mut)}
.fam-t{margin:var(--s4) 0 var(--s2);color:var(--tx3);font-size:var(--t-md);font-weight:600}
.fam-t:first-of-type{margin-top:0}
.below-t{margin-top:var(--s5)}

/* 시세판 */
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4)}
.bc{display:block;min-width:0}
.bc:hover strong{text-decoration:underline}
.bc em{display:block;color:var(--mut);font-size:var(--t-xs)}
.bc strong{display:block;font-size:var(--t-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-p{display:block;margin:var(--s1) 0;font-size:var(--t-base);font-weight:600}
.bc-k{display:block;margin-top:var(--s1);color:var(--mut);font-size:var(--t-xs)}
.sample .tag{margin-right:2px}

/* 한국 구매·판매 안내 */
.kr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
.kr div{padding:var(--s3) var(--s4);background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r)}
.kr span{display:block;color:var(--tx3);font-size:var(--t-sm)}
.kr strong{display:block;margin:2px 0;font-size:var(--t-lg);font-weight:600}
.kr a{font-size:var(--t-sm);color:var(--tx3)}

/* 접는 칸 */
.fold summary{cursor:pointer;list-style-position:inside}
.fold summary h2{display:inline}
.fold[open] summary{margin-bottom:var(--s3)}
main>.fold{margin-bottom:var(--s5)}

/* 비교 */
.cmp th[scope=col]{min-width:160px;vertical-align:top;white-space:normal}
.cmp th[scope=row]{color:var(--mut)}
.cmp td{font-size:var(--t-md)}
.cmp-b{display:block;color:var(--mut);font-size:var(--t-xs)}
.cmp strong{display:block;color:var(--tx);font-weight:600}
.cmp-x{margin-top:var(--s1);text-decoration:underline}

.links.col{flex-direction:column}
.links.col .btn{justify-content:flex-start}
.links.scope{margin-bottom:var(--s3)}
.doc ul{padding-left:var(--s5)}
.doc b{color:var(--tx);font-weight:600}

@media (max-width:1320px){
 .top-in{gap:var(--s5)}.main{gap:var(--s4)}
 .grid-main{grid-template-columns:minmax(0,1fr) 340px}
 .dt{grid-template-columns:320px minmax(0,1fr)}
 .hide-t{display:none}
 .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
 .board{grid-template-columns:repeat(4,minmax(0,1fr))}
 .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
 .idx-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 th a{display:inline-block;padding:var(--s3) 0;margin:calc(var(--s3) * -1) 0}
}
@media (max-width:1040px){
 :root{--gut:16px}
 /* 좁은 화면: 로고·통화 / 검색 / 메뉴 세 줄이라 따라다니면 본문을 가린다. 위에 그대로 둔다 */
 .top{position:static}
 .top-in{flex-wrap:wrap;height:auto;padding-top:var(--s2);padding-bottom:var(--s2);gap:var(--s2) var(--s4)}
 .unit{order:1;margin-left:auto}
 .search{order:2;flex:1 1 100%;margin-left:0}
 .main{order:3;width:100%;overflow-x:auto;gap:var(--s5);scrollbar-width:none}
 .main::-webkit-scrollbar{display:none}
 .main a{display:inline-flex;align-items:center;min-height:var(--ctl);padding:0;flex:none}
 .unit{padding:0}
 .unit button{width:var(--ctl)}
 .grid-main,.dt{grid-template-columns:minmax(0,1fr)}
 .dt-ph{min-height:280px;max-height:360px}
 .map{grid-template-columns:repeat(6,1fr)}
 .x4{grid-column:span 6}.x3,.x2,.x1{grid-column:span 3}
}
@media (max-width:760px){
 :root{--ph:48px;--t-ch:28px}
 .d-a,.d-s{r:9px}
 main.wrap{padding-top:var(--s5)}
 h1{font-size:var(--t-xl)}
 .panel{padding:var(--s4)}
 .sec-t{padding:var(--s3) var(--s4) 0}
 .hide-m{display:none}
 .show-m{display:block;margin-top:2px;font-size:var(--t-xs);white-space:normal}
 /* 폰 표: 칸 폭을 고정해 긴 이름이 시세와 별표를 밀어내지 못하게 한다 */
 .tbl table{table-layout:fixed}
 .cell-price{width:136px}
 .vs-m{white-space:nowrap}
 .cell-name .nm strong{white-space:normal;overflow-wrap:anywhere}
 .filters label:not(.chk){flex:1 1 100%;justify-content:space-between}
 .filters .ctl{flex:0 0 72%;min-width:0}
 .lst td:last-child{width:112px}
 .ttl{overflow-wrap:anywhere;font-size:var(--t-sm)}
 .cells{grid-template-columns:minmax(0,1fr)}
 .more{padding:var(--s3) 0;margin:calc(var(--s3) * -1) 0}
 .logo{padding:var(--s2) 0}
 .stat-row{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
 .stat{padding:var(--s3)}
 .stat strong{font-size:var(--t-lg)}
 .br{grid-template-columns:minmax(0,1fr) 56px 112px}
 .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
 .tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);padding:0 var(--s4);scrollbar-width:none}
 .tab{flex:none}
 .page-head p{font-size:var(--t-sm)}
 .kr{grid-template-columns:minmax(0,1fr)}
 .tick{display:none}
 .dt-act .btn{padding:0 var(--s3)}
 .idx-row{display:flex;overflow-x:auto;margin:0 calc(var(--s4) * -1) var(--s3);padding:0 var(--s4);scrollbar-width:none}
 .idx{flex:0 0 132px}
 .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ladder{gap:var(--s2)}
 .trust{grid-template-columns:minmax(0,1fr)}
 .grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
 .quote .btn{display:none}
 .vgrid{grid-template-columns:minmax(0,1fr)}
 .vd.on{grid-column:auto}
 .x4,.x1{grid-column:span 3;grid-row:span 3;flex-direction:column}
 .x4 .tile-ph,.x1 .tile-ph{flex:1 1 0;min-height:0}
 .x4 .tile-t,.x1 .tile-t{flex:none}
 thead{display:none}
 td{padding:var(--s2)}
 .panel.flush td{padding:var(--s2) var(--s3)}
 .cell-name{min-width:0}
 td.cell-star,.panel.flush td.cell-star{width:44px;padding:0}
 .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
 .strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
 .strip a:nth-child(n+4){display:none}
 .big{font-size:var(--t-h1)}
 .mini-r{grid-template-columns:1fr auto 112px}
 .calc,.calc-r{grid-template-columns:minmax(0,1fr)}
 .tick-label{padding-left:var(--s3);padding-right:var(--s3)}
 .map{grid-auto-rows:80px}
 .x3{grid-row:span 3;flex-direction:column}.x3 .tile-ph{flex:1 1 0;min-height:0}.x3 .tile-t{flex:none}
 .x1 .tile-v{display:none}
 .x4 .tile-t strong{font-size:var(--t-base)}
}
@media (prefers-reduced-motion:reduce){.tick-track.run{animation:none}.tick-view{overflow-x:auto}.btn{transition:none}}