/* 솔픽 공통 스타일 · 모바일 먼저, 960px 이상에서 PC 배치 */
:root{
  --ink:#16191F; --sub:#4E5661; --mute:#6B7380; --faint:#9AA1AB;
  --line:#E5E8EC; --line2:#EEF0F3; --soft:#F4F5F7; --bg:#FFFFFF;
  --brand:#FFC940; --brand-deep:#F5B400; --cream:#FFF8E6;
  --up:#E0243A; --down:#1F52C4; --ok:#0F7A4A; --accent:#C2410C; --navy:#1B2340;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 'IBM Plex Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;word-break:keep-all;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* 오픈 전 띠 */
.prebar{background:var(--ink);color:#fff;font-size:12px;text-align:center;padding:6px 12px}

/* 머리말 */
.gh{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.gh-in{display:flex;align-items:center;gap:12px;height:56px}
.logo{display:flex;align-items:center;gap:8px;flex:none}
.logo img{width:30px;height:30px}
.logo b{font-size:22px;font-weight:700;letter-spacing:-.04em;position:relative;padding-right:8px}
.logo b i{position:absolute;right:0;bottom:6px;width:6px;height:6px;border-radius:50%;background:var(--brand-deep)}
.logo span{font-size:12px;color:var(--mute);margin-left:2px}
.gnav{display:none}
.gsearch{flex:1;display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:10px;padding:0 12px;height:38px;min-width:0}
.gsearch svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:2;flex:none}
.gsearch input{border:0;background:none;outline:0;font:inherit;font-size:14px;width:100%;min-width:0;color:var(--ink)}
.gh-my{display:none}
.gh-my svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8}
@media (max-width:420px){.logo span{display:none}}

/* 본문 */
.gm{padding-top:16px;padding-bottom:40px;min-height:60vh}
.sec{margin:0 0 28px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.sec-h h2{font-size:19px;margin:0;letter-spacing:-.02em}
.sec-h h2 small{font-size:12px;font-weight:400;color:var(--mute);margin-left:6px}
.sec-h .more{font-size:13px;color:var(--accent);font-weight:600;white-space:nowrap}
.page-h{margin:4px 0 18px}
.page-h h1{font-size:24px;margin:0 0 4px;letter-spacing:-.03em}
.page-h p{margin:0;color:var(--mute);font-size:14px}
.card{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:#fff}
.muted{color:var(--mute)} .small{font-size:12px}
.upd{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin:0 0 12px}
.upd i{width:7px;height:7px;border-radius:50%;background:#18A058;display:inline-block}

/* 숫자 변화 */
.chg{font-family:var(--mono);font-size:12px;color:var(--mute);white-space:nowrap}
.chg.up{color:var(--up)} .chg.down{color:var(--down)}

/* KPI 3칸 */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 24px}
.kpi div{background:var(--soft);border-radius:12px;padding:12px}
.kpi span{display:block;font-size:12px;color:var(--sub)}
.kpi b{display:block;font-family:var(--mono);font-size:22px;letter-spacing:-.03em;margin:2px 0}
.kpi b small{font-family:inherit;font-size:13px;font-weight:500;margin-left:1px}

/* 칩(기간·구분) */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips a{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--sub);background:#fff}
.chips a.on{background:var(--brand);border-color:var(--brand);color:var(--ink);font-weight:700}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 14px}
.searchline{display:flex;gap:6px}
.searchline input{height:36px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:14px;width:200px}
.searchline button{height:36px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:0 14px;cursor:pointer}

/* 목록(거래·순위·공고) */
.list{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 2px;border-bottom:1px solid var(--line2);align-items:start}
.row .t{font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.row .s{font-size:12px;color:var(--mute);grid-column:1}
.row .r{text-align:right;grid-row:1 / span 2;grid-column:2}
.row .r b{display:block;font-family:var(--mono);font-size:15px;white-space:nowrap}
.row .r span{font-size:12px;color:var(--mute);white-space:nowrap}
.row a.t:hover{text-decoration:underline}
.tag{display:inline-block;font-size:11px;font-weight:600;border-radius:5px;padding:1px 6px;background:var(--soft);color:var(--sub);margin-right:4px;vertical-align:1px;white-space:nowrap}
.tag.svc{background:#EEF3FF;color:#1F3F7A} .tag.ad{background:var(--ink);color:#fff} .tag.house{background:var(--cream);color:#8A5A00}
.dday{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--sub);margin-right:6px}
.dday.hot{color:var(--up)} .dday.end{color:var(--faint)}

/* 순위 */
.rank-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line2)}
.rank-row .no{font-family:var(--mono);font-weight:600;font-size:16px;text-align:center}
.rank-row:nth-child(-n+3) .no{color:var(--accent)}
.rank-row .nm{font-weight:600;line-height:1.35}
.rank-row .nm small{display:block;font-weight:400;font-size:12px;color:var(--mute)}
.rank-row .v{text-align:right}
.rank-row .v b{display:block;font-family:var(--mono);font-size:15px}

/* 분류 타일 */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tiles a{background:var(--soft);border-radius:12px;padding:12px 14px}
.tiles a b{display:block;font-size:15px}
.tiles a span{font-size:12px;color:var(--mute)}

/* 광고 롤링 */
.adroll{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy);color:#fff;min-height:132px}
.adroll .slide{display:none;padding:20px 20px 44px}
.adroll .slide.on{display:block}
.adroll .slide .lb{font-size:11px;opacity:.8}
.adroll .slide b{display:block;font-size:20px;margin:6px 0 2px;letter-spacing:-.02em}
.adroll .slide p{margin:0;font-size:13px;opacity:.85}
.adroll .slide img{width:100%;height:auto;display:block;border-radius:10px}
.adroll .ctl{position:absolute;right:12px;bottom:10px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px}
.adroll .ctl button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer;font-size:14px;line-height:1}
.adnote{font-size:11px;color:var(--faint);margin:6px 0 0}
.adbox{border:1px dashed var(--line);border-radius:var(--r);padding:20px;text-align:center;color:var(--mute);font-size:13px}
.adbox b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* 주목 솔루션 카드 */
.picks{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.pick{scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.pick .k{font-size:11px;font-weight:700;color:var(--accent)}
.pick b{display:block;font-size:17px;margin:4px 0 0}
.pick .big{font-family:var(--mono);font-size:26px;font-weight:600;margin:10px 0 2px}
.pick p{margin:0;font-size:12px;color:var(--mute)}

/* 빈 화면 (까픽) */
.empty{display:flex;gap:14px;align-items:center;background:var(--soft);border-radius:var(--r);padding:18px}
.empty img{width:72px;height:72px;flex:none}
.empty b{display:block;font-size:15px}
.empty p{margin:2px 0 0;font-size:13px;color:var(--sub)}
.empty .more{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--accent)}

/* 쪽 번호 */
.pager{display:flex;justify-content:center;gap:4px;margin:20px 0 0;flex-wrap:wrap}
.pager a,.pager b{min-width:34px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px}
.pager a{border:1px solid var(--line);color:var(--sub)} .pager b{background:var(--ink);color:#fff}

/* 솔루션 상세 */
.sol-h{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.sol-h .crumb{font-size:12px;color:var(--mute)}
.sol-h h1{font-size:24px;margin:0;letter-spacing:-.03em}
.badges{display:flex;gap:6px;flex-wrap:wrap}

/* 꼬리말 */
.gf{background:var(--soft);border-top:1px solid var(--line);color:var(--mute);font-size:12px;margin-top:24px}
.gf .wrap{padding-top:20px;padding-bottom:28px}
.gf-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px}
.gf-links a{color:var(--sub)}
.gf p{margin:0 0 6px;line-height:1.7}
.gf .src{color:var(--faint)}

/* 모바일 아래 탭 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;font-size:11px;color:var(--mute)}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tabbar a.on{color:var(--accent);font-weight:600}

/* ── PC (960px 이상) ── */
@media (min-width:960px){
  body{padding-bottom:0}
  .tabbar{display:none}
  .gh-in{height:64px;gap:24px}
  .gnav{display:flex;gap:2px;height:64px}
  .gnav a{display:flex;align-items:center;padding:0 11px;font-size:15px;color:var(--sub);border-bottom:2px solid transparent}
  .gnav a.on{color:var(--ink);font-weight:700;border-color:var(--ink)}
  .gnav a:hover{color:var(--ink)}
  .gsearch{max-width:300px;margin-left:auto}
  .gh-my{display:block}
  .gm{padding-top:28px}
  .home{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .side .sec{margin-bottom:22px}
  .kpi{grid-template-columns:repeat(3,1fr);gap:12px}
  .kpi div{padding:16px}
  .kpi b{font-size:28px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .picks{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;overflow:visible}
  .row{grid-template-columns:90px minmax(0,1fr) 200px 130px;align-items:center;padding:11px 4px}
  .row .d{grid-column:1;grid-row:1;font-family:var(--mono);font-size:13px;color:var(--mute)}
  .row .t{grid-column:2;grid-row:1}
  .row .s{grid-column:3;grid-row:1;font-size:13px}
  .row .r{grid-column:4;grid-row:1}
  .page-h h1{font-size:28px}
}
@media (max-width:959px){
  .row .d{display:none}
  .side{margin-top:8px}
}

/* 작은 도우미 */
.adroll .slide{position:relative}
@media (min-width:960px){.mobile-only,.pc-hide{display:none}}
.row.one{grid-template-columns:minmax(0,1fr)}
.row.one>*{grid-column:1 !important;grid-row:auto !important}
.pc-only{display:none}
@media (min-width:960px){.pc-only{display:inline}}
@media (max-width:380px){.kpi b{font-size:18px}.kpi div{padding:10px}}