/* GitSeonjeap 디자인 시스템 — 다크 우선 · 한/일/영 · 숫자는 tabular */
@import url("/static/fonts/pretendard/pretendard.css");

:root{
  --bg:#0a0c10; --surface:#11151b; --surface-2:#171c24; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --fg:#eef1f5; --mut:#9aa5b3; --mut-2:#8f9aa8;
  --c-computers:#60a5fa; --c-ar:#c4a1ff; --c-robots:#fbbf24;
  --g-own:#34d399; --g-third:#7dd3fc; --g-calc:#fbbf24;
  --p-go3:#fb923c; --p-io:#22d3ee; --p-hey2:#a3e635; --p-g2:#f0abfc; --p-rokid:#93c5fd;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eef1f5; --line:rgba(12,20,32,.1); --line-2:rgba(12,20,32,.2);
  --fg:#0e1620; --mut:#586373; --mut-2:#667282;
  --c-computers:#2563eb; --c-ar:#7c3aed; --c-robots:#b45309;
  --g-own:#059669; --g-third:#0369a1; --g-calc:#b45309; --shadow:0 10px 30px rgba(20,30,50,.08); color-scheme:light;}}
:root[data-theme="light"]{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eef1f5; --line:rgba(12,20,32,.1); --line-2:rgba(12,20,32,.2);
  --fg:#0e1620; --mut:#586373; --mut-2:#667282;
  --c-computers:#2563eb; --c-ar:#7c3aed; --c-robots:#b45309;
  --g-own:#059669; --g-third:#0369a1; --g-calc:#b45309; --shadow:0 10px 30px rgba(20,30,50,.08); color-scheme:light;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang="ja"] body{line-break:strict;overflow-wrap:break-word}
a{color:inherit}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--c-computers);outline-offset:2px;border-radius:6px}

/* 헤더 */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;height:60px;padding:0 20px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;text-decoration:none;font-size:1.05rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand i{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--c-computers),var(--c-ar));display:inline-block}
.top nav{display:flex;gap:4px;margin-left:8px}
.top nav a{text-decoration:none;color:var(--mut);padding:6px 12px;border-radius:999px;font-size:.93rem}
.top nav a:hover{color:var(--fg);background:var(--surface-2)}
.top nav a.on{color:var(--fg);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.top .grow{flex:1}
.langs{display:flex;gap:2px;font-size:.84rem}
.langs a{color:var(--mut);text-decoration:none;padding:4px 8px;border-radius:8px}
.langs a.on{color:var(--fg);background:var(--surface-2)}
.themebtn{border:1px solid var(--line);background:transparent;color:var(--mut);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:1rem;line-height:1}
.themebtn:hover{color:var(--fg);border-color:var(--line-2)}
@media (max-width:760px){.top{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px}.top nav{order:3;width:100%;margin:0;overflow-x:auto}.top .grow{display:none}}

.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
main.narrow{max-width:760px;margin:0 auto;padding:64px 20px}
main.wide{max-width:1160px;margin:0 auto;padding:36px 20px 24px}
.lead{color:var(--mut);font-size:1.08rem;margin:0 0 28px}
.foot{border-top:1px solid var(--line);margin-top:72px}
.foot .wrap{padding:28px 20px 56px;color:var(--mut);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:.9rem}

/* 홈: 히어로 */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(60% 50% at 18% 20%,color-mix(in srgb,var(--c-computers) 26%,transparent),transparent 70%),
             radial-gradient(50% 45% at 85% 10%,color-mix(in srgb,var(--c-ar) 22%,transparent),transparent 70%),
             radial-gradient(40% 40% at 60% 90%,color-mix(in srgb,var(--c-robots) 14%,transparent),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(80% 70% at 50% 30%,#000 30%,transparent 80%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:76px;padding-bottom:84px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:.85rem;color:var(--mut);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;margin-bottom:18px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--g-own);display:inline-block;box-shadow:0 0 0 4px color-mix(in srgb,var(--g-own) 25%,transparent)}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.9rem);line-height:1.12;margin:0 0 18px;font-weight:800;letter-spacing:-.035em}
html[lang="ja"] .hero h1{letter-spacing:-.01em;line-height:1.25}
.hero h1 em{font-style:normal;background:linear-gradient(95deg,var(--c-computers),var(--c-ar) 55%,var(--c-robots));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:1.14rem;color:var(--mut);max-width:34em;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700;font-size:.98rem;border:1px solid var(--line-2);color:var(--fg);background:transparent;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.primary:hover{transform:translateY(-1px)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn small{font-weight:500;opacity:.8}

/* 홈: 순위 카드(실제 측정값) */
.board{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line-2);border-radius:18px;padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.board header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.board h2{font-size:1rem;margin:0}
.board .meta{font-size:.8rem;color:var(--mut)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bar{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center}
.bar .rk{font-weight:800;color:var(--mut);text-align:right}
.bar:nth-child(-n+3) .rk{color:var(--fg)}
.bar .nm{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .sb{display:block;font-size:.78rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{display:block;height:8px;border-radius:99px;background:var(--surface-2);margin-top:5px;overflow:hidden}
.bar .fill{display:block;height:100%;width:calc(var(--w) * 1%);border-radius:99px;background:linear-gradient(90deg,var(--c-computers),color-mix(in srgb,var(--c-computers) 50%,var(--c-ar)));transform-origin:left;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
.bar .val{font-weight:800;font-size:1.02rem;min-width:4.6em;text-align:right}
.bar .val small{font-weight:500;color:var(--mut);font-size:.72rem;margin-left:3px}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.bar .fill{animation:none}}
.board footer{margin-top:14px;font-size:.78rem;color:var(--mut);display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* 신뢰 등급 배지 — 색 + 모양 */
.grade{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);white-space:nowrap}
.grade::before{content:"";width:9px;height:9px;border-radius:50%;display:inline-block}
.grade.own{color:var(--g-own)}.grade.own::before{background:var(--g-own)}
.grade.third{color:var(--g-third)}.grade.third::before{background:linear-gradient(90deg,var(--g-third) 50%,transparent 50%);border:1.5px solid var(--g-third)}
.grade.calc{color:var(--g-calc);border-style:dashed}.grade.calc::before{border:1.5px dashed var(--g-calc);background:transparent}

/* 홈: 숫자 띠 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:-36px 0 0;position:relative;z-index:2}
.stat{padding:22px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stat span{color:var(--mut);font-size:.88rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* 홈: 섹션 */
.block{padding:76px 0 0}
.block h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:0 0 8px;letter-spacing:-.025em}
.block .lead2{color:var(--mut);margin:0 0 28px;max-width:44em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;overflow:hidden;transition:transform .2s,border-color .2s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--cc)}
.card::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cc) 28%,transparent),transparent 70%);pointer-events:none}
.card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.card .ico{width:44px;height:44px;color:var(--cc)}
.card h3{margin:4px 0 0;font-size:1.3rem}
.card p{margin:0;color:var(--mut);font-size:.96rem}
.card .tag{margin-top:auto;font-size:.82rem;color:var(--cc);font-weight:700}
.card.soon{opacity:.85}
.c-computers{--cc:var(--c-computers)}.c-ar{--cc:var(--c-ar)}.c-robots{--cc:var(--c-robots)}.c-community{--cc:#34d399}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:64px}.cards{grid-template-columns:1fr}}

.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.legend div{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--surface)}
.legend p{margin:8px 0 0;color:var(--mut);font-size:.93rem}
@media (max-width:760px){.legend{grid-template-columns:1fr}}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;border:1px solid var(--line);border-radius:14px;padding:18px 18px 18px 18px;background:var(--surface)}
.steps li::before{content:counter(s);display:inline-flex;width:28px;height:28px;border-radius:9px;background:var(--fg);color:var(--bg);align-items:center;justify-content:center;font-weight:800;margin-bottom:10px}
.steps strong{display:block;margin-bottom:4px}
.steps span{color:var(--mut);font-size:.93rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* 공통 컴포넌트 */
.notice{border:1px solid var(--line);border-left:4px solid var(--c-robots);border-radius:12px;padding:12px 16px;margin:0 0 20px;font-size:.94rem;background:var(--surface)}
.note-box{border:1px dashed var(--line-2);border-radius:12px;padding:10px 14px;color:var(--mut);font-size:.92rem}
.verdict{font-size:1.06rem;border-left:4px solid var(--c-ar);padding:2px 0 2px 16px;margin:0 0 24px}

/* AR 글래스 페이지 */
.pagehead{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.pagehead h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0;letter-spacing:-.03em}
.pagehead h1 em{font-style:normal;color:var(--c-ar)}
.pchips{display:flex;gap:6px;flex-wrap:wrap}
.pchips span{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--mut);padding:3px 10px;border:1px solid var(--line);border-radius:999px}
.pchips i{width:8px;height:8px;border-radius:50%;background:var(--pc)}
.picker{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;position:sticky;top:64px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);z-index:20;margin-bottom:14px}
.picker>span{color:var(--mut);font-size:.88rem;margin-right:4px}
.picker label{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;font-size:.9rem;user-select:none}
.picker label:has(input:checked){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--pc)}
.picker label i{width:9px;height:9px;border-radius:50%;background:var(--pc)}
.picker input{position:absolute;opacity:0;pointer-events:none}
.picker button{margin-left:auto;font:inherit;font-size:.86rem;background:none;border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;color:var(--mut);cursor:pointer}
.toc{display:flex;gap:6px;overflow-x:auto;padding:2px 0 14px;margin:0 0 6px;scrollbar-width:thin}
.toc a{white-space:nowrap;text-decoration:none;color:var(--mut);padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.88rem}
.toc a:hover{color:var(--fg);border-color:var(--line-2)}
section[id]{scroll-margin-top:130px}
main.wide section{margin-top:44px}
main.wide section>h2{font-size:1.55rem;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);letter-spacing:-.02em}
article{margin:0 0 30px}
article h3{margin:22px 0 8px;font-size:1.14rem}
article p,article li{max-width:60em}
.tbl{overflow-x:auto;margin:12px 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:separate;border-spacing:0;font-size:.9rem;min-width:100%}
th,td{padding:10px 14px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{background:var(--surface-2);font-weight:700;font-size:.86rem;white-space:nowrap}
td:first-child,th:first-child{position:sticky;left:0;background:var(--surface);z-index:1;font-weight:700}
th:first-child{background:var(--surface-2);z-index:2}
table.cmp th[data-p]{border-top:3px solid var(--pc)}
table.cmp td[data-p],table.cmp th[data-p]{min-width:12em}
[data-p="go3"]{--pc:var(--p-go3)}[data-p="io"]{--pc:var(--p-io)}[data-p="hey2"]{--pc:var(--p-hey2)}[data-p="g2"]{--pc:var(--p-g2)}[data-p="rokid"]{--pc:var(--p-rokid)}
tr[data-prow="go3"] td:first-child{box-shadow:inset 3px 0 var(--p-go3)}tr[data-prow="io"] td:first-child{box-shadow:inset 3px 0 var(--p-io)}
tr[data-prow="hey2"] td:first-child{box-shadow:inset 3px 0 var(--p-hey2)}tr[data-prow="g2"] td:first-child{box-shadow:inset 3px 0 var(--p-g2)}tr[data-prow="rokid"] td:first-child{box-shadow:inset 3px 0 var(--p-rokid)}
blockquote{margin:12px 0;padding:6px 14px;border-left:4px solid var(--line-2);color:var(--mut)}
code{font-family:var(--mono);font-size:.88em}

/* 영상 카드 */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin:10px 0 28px}
.vcard{margin:0}
.vframe{position:relative;aspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .2s}
.vframe:hover{border-color:var(--line-2)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{width:54px;height:54px;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.2rem;padding-left:3px}
.vprod{position:absolute;left:12px;bottom:10px;font-size:.78rem;color:var(--mut)}
.vcard figcaption{display:flex;flex-direction:column;gap:3px;padding-top:9px;font-size:.92rem}
.vmeta,.vnote{color:var(--mut);font-size:.85rem}
.vspon{font-size:.78rem;display:inline-block;padding:1px 9px;border-radius:999px;border:1px solid var(--line-2);width:fit-content;color:var(--mut)}
.vspon-unsponsored{color:var(--g-own)}.vspon-official{color:var(--c-computers)}.vspon-loan{color:var(--g-calc)}
.log{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.log li{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap}
.log li:last-child{border-bottom:0}
.log time{color:var(--mut);font-size:.88rem;min-width:7em}

/* 열 너비: 첫 칸이 짧은 표는 글자 폭에 맞추고, 나머지는 내용 칸이 쓴다 */
table.kfit td:first-child,table.kfit th:first-child{width:1%;white-space:nowrap}
table:not(.kfit):not(.cmp) td:not(:first-child),table:not(.kfit):not(.cmp) th:not(:first-child){min-width:9em}
table:not(.kfit):not(.cmp) td:first-child,table:not(.kfit):not(.cmp) th:first-child{min-width:7em;max-width:16em}

/* 값 옆 출처 표시 */
.srcs{margin-left:2px;white-space:nowrap}
a.src{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;margin-left:3px;vertical-align:baseline;
  font-size:.72rem;line-height:1;text-decoration:none;color:var(--mut);border:1px solid var(--line-2);border-radius:50%;background:var(--surface)}
a.src:hover,a.src:focus-visible{color:var(--fg);border-color:var(--fg)}
a.src::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:40;
  width:max-content;max-width:16em;white-space:normal;text-align:left;padding:6px 9px;border-radius:8px;font-size:.78rem;line-height:1.4;font-weight:500;
  background:var(--fg);color:var(--bg);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .12s}
a.src:hover::after,a.src:focus-visible::after{opacity:1}
th a.src{background:transparent}
main a[target="_blank"]:not(.src):not(.vframe)::after{content:"↗";font-size:.72em;margin-left:2px;opacity:.65}
.vcard a[target="_blank"]::after{content:"↗"}
.srcbox{border:1px solid var(--line);border-radius:12px;padding:4px 16px;background:var(--surface)}
.srcbox summary{cursor:pointer;padding:10px 0;font-weight:700}
.badge-line{margin:2px 0 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.badge-line a{color:var(--mut)}

/* 탭 · 접이식 */
.tabbar{display:flex;gap:6px;overflow-x:auto;position:sticky;top:60px;z-index:25;padding:10px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-bottom:14px;scrollbar-width:none}
.tabbar button,.tabbar [role=tab]{font:inherit;white-space:nowrap;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer;font-weight:600;font-size:.95rem}
.tabbar [role=tab]:hover{color:var(--fg);border-color:var(--line-2)}
.tabbar [role=tab][aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.js .panel[data-off]{display:none}
.picker{top:118px}
.picker[hidden]{display:none}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 14px;padding-bottom:10px}
.sechead h2{margin:0;padding:0;border:0}
main.wide section>h2{border-bottom:0}
.accbtns{display:flex;gap:4px}
.linkbtn{font:inherit;font-size:.82rem;background:none;border:0;color:var(--mut);cursor:pointer;padding:4px 8px;border-radius:8px}
.linkbtn:hover{color:var(--fg);background:var(--surface-2)}
details.acc{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:0 0 10px}
details.acc>summary{cursor:pointer;list-style:none;padding:14px 18px;display:flex;align-items:center;gap:10px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"▸";color:var(--mut);transition:transform .15s;flex:none}
details.acc[open]>summary::before{transform:rotate(90deg)}
details.acc>summary h3{margin:0;font-size:1.04rem;font-weight:700}
details.acc[open]>summary{border-bottom:1px solid var(--line)}
.accbody{padding:14px 18px 8px}
.accbody .tbl{margin-top:4px}
section[id]{scroll-margin-top:190px}

/* 조건으로 찾기 */
.finder{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start;margin-top:14px}
.fpanel{position:sticky;top:130px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;max-height:calc(100vh - 150px);overflow:auto}
.fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fpanel fieldset{border:0;border-top:1px solid var(--line);margin:10px 0 0;padding:10px 0 0}
.fpanel legend{font-size:.82rem;color:var(--mut);padding:0 6px 0 0;font-weight:700}
.fopt{display:flex;gap:9px;align-items:flex-start;padding:5px 2px;cursor:pointer;font-size:.92rem;line-height:1.4}
.fopt input{margin-top:3px;accent-color:var(--c-ar);flex:none;width:16px;height:16px}
.funk{border-top:1px solid var(--line);margin-top:10px;padding-top:12px;color:var(--mut)}
#fprice{width:100%;font:inherit;padding:7px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg)}
.fcount{font-weight:700;margin:0 0 12px}
.fnone{border:1px dashed var(--line-2);border-radius:12px;padding:14px;color:var(--mut)}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.fcard{border:1px solid var(--line);border-top:3px solid var(--pc);border-radius:14px;background:var(--surface);padding:14px 16px}
.fcard[hidden]{display:none}
.fcard header{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fcard h3{margin:0;font-size:1.1rem}
.fprice b{font-size:1.15rem}
.fpn{margin:4px 0 8px;color:var(--mut);font-size:.84rem}
.fhint{margin:6px 0 0;color:var(--mut-2);font-size:.86rem}
.fpartial{display:inline-block;margin-bottom:8px;font-size:.78rem;color:var(--g-calc);border:1px dashed var(--g-calc);border-radius:999px;padding:1px 9px}
.fmatch{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fmatch li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem}
.fmatch li[hidden]{display:none}
.fs{flex:none;width:21px;height:21px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;margin-top:1px}
.fs-yes{background:var(--g-own);color:#06140f}
.fs-unk{border:1.5px dashed var(--g-calc);color:var(--g-calc)}
.fs-no{border:1.5px solid var(--mut-2);color:var(--mut)}
.ft{display:flex;flex-direction:column;gap:1px;min-width:0}
.fn{color:var(--mut);font-size:.84rem}
@media (max-width:900px){.finder{grid-template-columns:1fr}.fpanel{position:static;max-height:none}}
.tabjump{margin:14px 0 0}.tabjump a{color:var(--c-ar);text-decoration:none;font-weight:700}.tabjump a:hover{text-decoration:underline}
[hidden]{display:none!important}

/* 전체 사양 비교표 */
.spectools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 10px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.segbtn{font:inherit;font-size:.9rem;padding:6px 14px;border:0;background:transparent;color:var(--mut);cursor:pointer;font-weight:600}
.segbtn.on{background:var(--fg);color:var(--bg)}
.chip{display:inline-flex;gap:7px;align-items:center;padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:.9rem;cursor:pointer}
.chip:has(input:checked){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--fg)}
#spec-q{font:inherit;font-size:.9rem;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);min-width:14em}
.speccount{margin-left:auto;color:var(--mut);font-size:.86rem}
.specbtns{display:flex;gap:2px}
.specwrap{border:1px solid var(--line);border-radius:14px;overflow:auto;max-height:calc(100vh - 150px);background:var(--surface);margin-bottom:16px}
table.spec{border-collapse:separate;border-spacing:0;min-width:980px;width:100%;font-size:.9rem}
table.spec thead th{position:sticky;top:0;z-index:4;background:var(--surface-2);white-space:nowrap}
table.spec thead th:first-child{left:0;z-index:6}
table.spec tbody th[scope=row]{position:sticky;left:0;z-index:2;background:var(--surface);min-width:10.5em;max-width:13em;font-weight:600;font-size:.88rem}
table.spec td{min-width:12em;max-width:19em;padding:9px 12px}
table.spec tr.sg th{background:var(--surface-2);position:sticky;left:0;padding:0}
table.spec tr.sg th[colspan]{position:static}
.sgbtn{width:100%;text-align:left;font:inherit;font-weight:800;padding:9px 14px;border:0;background:transparent;color:var(--fg);cursor:pointer}
.sgbtn::before{content:"▾ ";color:var(--mut)}
tr.sg.shut .sgbtn::before{content:"▸ "}
.sgbtn small{color:var(--mut);font-weight:500}
td.sv{vertical-align:top}
td.sv .fs{margin-right:6px;width:18px;height:18px;font-size:.7rem;vertical-align:-3px}
td.sv-unk .svt{font-style:italic;color:var(--mut-2)}
td.sv-unk{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--line) 70%,transparent) 6px 7px)}
em.doc{font-style:normal;font-size:.7rem;color:var(--g-calc);border:1px dashed var(--g-calc);border-radius:999px;padding:0 6px;margin-left:3px;white-space:nowrap}
.svn{display:block;color:var(--mut);font-size:.78rem;margin-top:2px}
table.spec tr.sr[hidden]{display:none}

/* 조건으로 찾기 v2 — 조건 상단 · 결과 하단 · 상세 창 */
.ffilter{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px 18px;margin:0 0 14px}
.ffgrid{display:block}
.fgroup{border:0;margin:0;padding:0;min-width:0}
.fgroup legend{font-weight:800;font-size:.9rem;padding:0 0 6px;margin-bottom:4px;border-bottom:1px solid var(--line);width:100%}
.ffilter:not(.open) .fgroup.more{display:none}
.fnum{display:flex;flex-direction:column;gap:3px;margin:6px 0;font-size:.88rem;color:var(--mut)}
.fnum select{font:inherit;padding:6px 9px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg)}
.ffbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ffbar .funk{border:0;margin:0;padding:0}
.fresbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.fresbar .fcount{margin:0}
.fsort{display:inline-flex;gap:8px;align-items:center;color:var(--mut);font-size:.9rem}
.fsort select{font:inherit;padding:6px 10px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg)}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.fcard{display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s,transform .15s}
.fcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.fchips span{font-size:.8rem;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.fopen{margin-top:auto;justify-content:center;font-size:.9rem;padding:9px 14px}
.fmatch{margin-bottom:12px}
.fcard .fhint{margin-bottom:12px}
dialog.fdlg{width:min(1040px,96vw);max-height:92vh;border:1px solid var(--line-2);border-top:4px solid var(--pc);border-radius:18px;background:var(--bg);color:var(--fg);padding:22px 24px;box-shadow:var(--shadow);overflow:auto}
dialog.fdlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.fdhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;position:sticky;top:-22px;background:var(--bg);padding:6px 0 10px;z-index:3;border-bottom:1px solid var(--line);margin-bottom:6px}
.fdhead h2{margin:0 0 4px}
.fdsec{margin:22px 0 8px;font-size:1.05rem}
.fdl{margin:0;padding:6px 18px 10px;display:grid;grid-template-columns:1fr}
.fdl>div{display:grid;grid-template-columns:minmax(8em,13em) 1fr;gap:6px 14px;padding:8px 0;border-bottom:1px solid var(--line)}
.fdl>div:last-child{border-bottom:0}
.fdl dt{font-weight:700;font-size:.88rem;color:var(--mut)}
.fdl dd{margin:0;font-size:.92rem}
.fdl .sv-unk .svt{font-style:italic;color:var(--mut-2)}
@media (max-width:640px){.fdl>div{grid-template-columns:1fr}dialog.fdlg{padding:16px}}

/* 조건 행 — 다나와식(왼쪽 항목명 · 오른쪽 체크 목록) */
.ffilter{padding:0;overflow:hidden}
.fgh{padding:8px 18px;font-weight:800;font-size:.85rem;letter-spacing:.02em;color:var(--mut);background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgrp:first-child .fgh{border-top:0}
.ffilter:not(.open) .fgrp.more{display:none}
.frow{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line)}
.frl{padding:12px 18px;font-weight:700;font-size:.9rem;background:var(--surface);border-right:1px solid var(--line)}
.fro{display:flex;flex-wrap:wrap;gap:6px 22px;padding:10px 18px;align-items:center}
.fro .fopt{min-width:0}
.ffbar{margin:0;padding:12px 18px}
@media (max-width:640px){.frow{grid-template-columns:1fr}.frl{border-right:0;padding:10px 14px 0;background:none}.fro{padding:6px 14px 10px}.fgh{padding:8px 14px}}

/* 조건 영역 높이 줄이기 — 그룹 머리줄 없이 한 줄씩 */
.fgh{display:none}
.ffilter:not(.open) .frow.more{display:none}
.frow{grid-template-columns:120px 1fr}
.frl{padding:6px 12px;font-size:.82rem;display:flex;align-items:center}
.fro{gap:0 16px;padding:3px 12px}
.fro .fopt{padding:3px 2px;font-size:.84rem;line-height:1.3;gap:6px}
.fro .fopt input{width:14px;height:14px;margin-top:2px}
.ffbar{padding:7px 12px;margin:0}
.ffbar .linkbtn,.ffbar .fopt{font-size:.84rem}
.ffbar .fopt{padding:0}
@media (max-width:640px){.frow{grid-template-columns:1fr}.frl{padding:6px 12px 0}}

/* computers */
:root{--cp-err:#f87171;--cp-bar-a:var(--c-computers)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--cp-err:#b91c1c}}
:root[data-theme="light"]{--cp-err:#b91c1c}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cp-links{display:flex;gap:10px;flex-wrap:wrap}
.cp-links .btn{padding:9px 16px;font-size:.92rem}
.cp-lead{margin-bottom:14px;max-width:52em}
.cp-hint{margin:6px 0 0;color:var(--mut);font-size:.88rem}
.cp-h2{font-size:1.4rem;margin:0 0 12px}
main.wide.cp section>h2.cp-h2{border:0;padding:0}
main.wide.cp section#results{margin-top:28px}

/* 등급 배지(제출 등급 추가) */
.grade.user_verified{color:var(--g-own)}
.grade.user_verified::before{content:"✓";width:auto;height:auto;border-radius:0;font-size:.82em;font-weight:800}
.grade.user_pending{color:var(--mut);border-style:dotted}
.grade.user_pending::before{border:1.5px dotted var(--mut);background:transparent}
.cp-grades{margin:10px 0 4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.cp-grades>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.cp-grades dt{margin:0 0 6px}
.cp-grades dd{margin:0;color:var(--mut);font-size:.9rem}
.cp-legend{margin:0 0 14px}

/* 프리셋 */
.cp-presets{margin:0 0 14px}
.cp-pre-h{font-weight:800;font-size:.92rem}
.cp-prelist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.cp-preset{text-decoration:none;color:var(--fg);background:transparent;line-height:1.35}
.cp-preset:hover{border-color:var(--fg)}
.cp-preset[aria-current="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cp-preset-custom{cursor:default;color:var(--mut);border-style:dashed}

/* 조건 영역 */
.cp-filter{padding:0}
.cp-fold>summary{cursor:pointer;list-style:none;padding:14px 18px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cp-fold>summary::-webkit-details-marker{display:none}
.cp-fold>summary::before{content:"▸";color:var(--mut);transition:transform .15s}
.cp-fold[open]>summary::before{transform:rotate(90deg)}
.cp-fold-t{font-weight:800}
.cp-fsum{color:var(--mut);font-size:.88rem;min-width:0;overflow-wrap:anywhere}
.cp-fold[open] .cp-fsum{display:none}
.cp-fold>.cp-ffgrid,.cp-fold>.ffbar{margin-left:18px;margin-right:18px}
.cp-fold>.ffbar{margin-bottom:16px}
.cp-ffgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 22px;padding-top:2px}
.cp-ffgrid select{width:100%;min-width:0;text-overflow:ellipsis}
.cp-metric{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}
.js .cp-apply{display:none}
.cp-filter .fopt input{accent-color:var(--c-computers)}

/* 결과 막대 순위 */
.cp-defnote{margin:0 0 12px}
.cp-warn ul{margin:6px 0 0;padding-left:1.2em}
.cp-warn li{margin:2px 0}
.cp-head,.cp-row{display:grid;grid-template-columns:2.4rem minmax(11rem,1.35fr) minmax(11rem,1.5fr) 8.6rem 8.6rem 9.6rem 7.6rem;column-gap:14px;align-items:center}
.cp-head{padding:8px 14px;font-size:.8rem;font-weight:700;color:var(--mut);border-bottom:1px solid var(--line-2)}
.cp-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px;margin-top:8px}
.cp-row{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  grid-template-areas:"rk dev bar stat tr ev cmp" ". flags flags flags flags flags flags";row-gap:6px}
.cp-row:hover{border-color:var(--line-2)}
.cp-row.picked{border-color:var(--c-computers);box-shadow:inset 3px 0 var(--c-computers)}
.cp-rk{grid-area:rk;font-weight:800;color:var(--mut);text-align:right;font-size:1.05rem}
.cp-row:nth-child(-n+3) .cp-rk{color:var(--fg)}
.cp-dev{grid-area:dev;display:flex;flex-direction:column;gap:1px;min-width:0}
.cp-devbtn{font:inherit;font-weight:700;font-size:.98rem;text-align:left;background:none;border:0;padding:0;color:var(--fg);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.cp-devbtn:hover{text-decoration-color:var(--c-computers)}
.cp-sub,.cp-cond{color:var(--mut);font-size:.8rem;line-height:1.4;overflow-wrap:anywhere}
.cp-bar{grid-area:bar;min-width:0}
.cp-val{display:block;font-size:1.05rem}
.cp-val b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.cp-val small{color:var(--mut);font-size:.75rem;font-weight:500}
.cp-track{display:block;height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:5px}
.cp-fill{display:block;height:100%;width:calc(var(--w) * 1%);min-width:2px;border-radius:99px;background:linear-gradient(90deg,var(--c-computers),color-mix(in srgb,var(--c-computers) 55%,var(--c-ar)))}
.cp-row[data-trust="third"] .cp-fill{background:repeating-linear-gradient(135deg,var(--g-third) 0 5px,color-mix(in srgb,var(--g-third) 35%,transparent) 5px 9px)}
.cp-row[data-trust="calc"] .cp-fill{background:transparent;box-shadow:inset 0 0 0 1.5px var(--g-calc);border-radius:99px}
.cp-row[data-trust="user_pending"] .cp-fill{background:var(--mut-2);opacity:.6}
@media (prefers-reduced-motion:no-preference){.cp-fill{animation:grow .7s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}}
.cp-stat{grid-area:stat;display:flex;flex-direction:column;font-size:.82rem;color:var(--mut);line-height:1.45}
.cp-tr{grid-area:tr}
.cp-ev{grid-area:ev;font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.cp-ev a{color:var(--c-computers)}
.cp-noev{color:var(--mut-2);font-size:.82rem}
.cp-cmpl{grid-area:cmp;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;font-size:.84rem;white-space:nowrap;justify-self:start;user-select:none}
.cp-cmpl:hover{border-color:var(--fg)}
.cp-cmpl:has(input:checked){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--c-computers)}
.cp-cmpl:has(input:focus-visible){outline:2px solid var(--c-computers);outline-offset:2px}
.cp-pick{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cp-flags{grid-area:flags;font-size:.84rem;color:var(--mut)}
.cp-flags summary{cursor:pointer;color:var(--g-calc);width:fit-content}
.cp-flags ul{margin:6px 0 0;padding-left:1.2em}
.cp-flags li{margin:3px 0;overflow-wrap:anywhere}
.cp-empty{border:1px dashed var(--line-2);border-radius:14px;padding:22px;margin-top:10px;color:var(--mut)}
.cp-empty p{margin:0 0 8px}
.cp-foot{color:var(--mut);font-size:.86rem;margin:14px 0 0;max-width:60em}
.is-loading .cp-rows{opacity:.5;transition:opacity .15s}
@media (max-width:1060px){
  .cp-head{display:none}
  .cp-row{grid-template-columns:2rem minmax(0,1fr) auto;grid-template-areas:"rk dev cmp" "bar bar bar" "stat stat stat" "tr ev ev" "flags flags flags";column-gap:10px}
  .cp-stat{flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .cp-cmpl{justify-self:end;align-self:start}
}
@media (max-width:560px){
  .cp-row{grid-template-areas:"rk dev dev" "bar bar bar" "stat stat stat" "tr tr tr" "ev ev ev" "cmp cmp cmp" "flags flags flags"}
  .cp-cmpl{justify-self:start}
}

/* 비교 바 */
body.cp-hasbar{padding-bottom:84px}
.cp-cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:35;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line-2);box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.cp-cmpinner{max-width:1160px;margin:0 auto;padding:10px 20px;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
.cp-cmpitems{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.cp-pickchip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:.86rem;background:var(--surface)}
.cp-pickchip button{font:inherit;font-size:.78rem;border:0;background:var(--surface-2);color:var(--mut);width:22px;height:22px;border-radius:50%;cursor:pointer;line-height:1}
.cp-pickchip button:hover{color:var(--fg)}
.cp-cmpcount{color:var(--mut);font-size:.86rem}
.cp-cmpbar .btn{padding:8px 16px;font-size:.92rem}
.cp-cmpbar .btn[disabled]{opacity:.45;cursor:not-allowed}

/* 상세 · 비교 창 */
.cp-dlg{width:min(1120px,96vw)}
.cp-vids{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.cp-vids a.chip{text-decoration:none;font-size:.82rem;padding:3px 10px}
.cp-devfilter{font:inherit;font-size:.9rem;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);min-width:min(18em,100%);margin:0 0 10px}
.cp-mt{font-size:.84rem}
.cp-mt td,.cp-mt th{padding:8px 10px}
.cp-mt td:first-child{min-width:11em}
.cp-mt .svn{max-width:22em;overflow-wrap:anywhere}
.cp-mt .cp-flags summary{color:var(--mut)}
.cp-cmptbl th,.cp-cmptbl td{min-width:10em}
.cp-cmptbl th:first-child,.cp-cmptbl td:first-child{min-width:9em}
.cp-cmptbl thead th{vertical-align:bottom}
.cp-ch{display:block;font-size:.98rem}
.cp-big{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.cp-cmptbl .cp-track{max-width:11em}

/* 가이드 */
.cp-guide .toc{position:sticky;top:60px;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);padding-top:10px;margin-top:10px}
.cp-gsec>h2{scroll-margin-top:130px}
.cp-checks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.cp-checks li{position:relative;padding:10px 14px 10px 40px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cp-checks li::before{content:"✓";position:absolute;left:14px;top:9px;color:var(--g-own);font-weight:800}
.cp-gitems{counter-reset:g;list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cp-gitems li{counter-increment:g;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.cp-gitems li::before{content:counter(g);width:26px;height:26px;border-radius:8px;background:var(--fg);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.cp-gitems.warn li::before{background:var(--g-calc);color:#1a1100}
.cp-gitems span{color:var(--mut);font-size:.93rem}
.cp-cmd{margin:18px 0 0;padding:0}
.cp-cmd p{margin:0 0 8px}
.cp-codehead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px 6px 14px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--surface-2);font-size:.82rem;color:var(--mut)}
.cp-codehead .linkbtn{border:1px solid var(--line-2);border-radius:8px;color:var(--fg)}
.cp-code{margin:0;padding:14px 16px;overflow:auto;border:1px solid var(--line);border-radius:0 0 12px 12px;background:var(--surface);font:.86rem/1.6 var(--mono);white-space:pre;word-break:normal;overflow-wrap:normal;tab-size:2}
.cp-rec{margin:10px 0 0}
.cp-next{border:1px solid var(--line-2);border-left:4px solid var(--c-computers);border-radius:14px;padding:18px 20px;background:var(--surface)}
.cp-next p{margin:0 0 12px}

/* 제출 폼 */
main.narrow-form{max-width:880px;margin:0 auto;padding:36px 20px 24px}
.cp-fs{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:6px 18px 18px;margin:0 0 16px;min-width:0}
.cp-fs>legend{font-weight:800;padding:0 8px;font-size:1rem}
.cp-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px 20px}
.cp-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.cp-field.wide{grid-column:1/-1}
.cp-field label{font-weight:700;font-size:.92rem}
.cp-req{font-weight:600;font-size:.74rem;color:var(--c-computers);border:1px solid currentColor;border-radius:999px;padding:0 7px;margin-left:4px;white-space:nowrap}
.cp-req.opt{color:var(--mut)}
.cp-field input,.cp-field select,.cp-field textarea{font:inherit;font-size:.95rem;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);width:100%;min-width:0}
.cp-field textarea{resize:vertical;font-family:var(--mono);font-size:.88rem}
.cp-field input[type=file]{padding:8px;cursor:pointer}
.cp-help{margin:0;color:var(--mut);font-size:.84rem;line-height:1.5}
.cp-err{margin:0;color:var(--cp-err);font-size:.88rem;font-weight:600}
.cp-field.has-err input,.cp-field.has-err select,.cp-field.has-err textarea{border-color:var(--cp-err)}
.cp-fs.has-err{border-color:var(--cp-err)}
.cp-tips{margin:2px 0 6px;padding-left:1.2em;color:var(--mut);font-size:.88rem}
.cp-tips li{margin:3px 0}
.cp-preview{max-width:min(420px,100%);max-height:260px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);margin-top:8px}
.cp-consent{padding:8px 2px}
.cp-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:6px 0 0}
.cp-actions .btn{padding:12px 28px}
.cp-actions .btn[disabled]{opacity:.6;cursor:progress}
.cp-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cp-errsum{border-left-color:var(--cp-err)}
.cp-errsum ul{margin:6px 0 0;padding-left:1.2em}
.cp-errsum a{color:inherit}
.cp-ok{text-align:center;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:44px 24px;margin-top:18px}
.cp-ok .cp-links{justify-content:center;margin-top:18px}
.cp-okmark{display:inline-flex;width:56px;height:56px;border-radius:50%;background:var(--g-own);color:#06140f;font-size:1.7rem;font-weight:800;align-items:center;justify-content:center}
.cp-ok h1{margin:14px 0 8px;font-size:1.7rem}
.cp-ok p{max-width:34em;margin:0 auto 8px}

/* 결과 목록 — 한 줄에 한 제품(다나와식) */
.fcards{grid-template-columns:1fr;gap:10px}
.fcard{display:grid;grid-template-columns:150px 1fr 190px;gap:0 18px;align-items:start;padding:14px 18px}
.fthumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:96px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--pc);padding:10px}
.fthumb svg{width:100%;max-width:112px;height:auto}
.fthumb span{font-size:.72rem;color:var(--mut);text-align:center}
.fbody h3{margin:0 0 4px;font-size:1.05rem}
.fbody .fchips{margin:4px 0}
.fbody .fpn{margin:4px 0}
.fside{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.fside .fprice b{font-size:1.3rem}
.fside .fopen{margin-top:0;width:100%}
.fcard .fmatch{margin:6px 0 0}
@media (max-width:760px){.fcard{grid-template-columns:84px 1fr;gap:8px 12px}.fthumb{min-height:64px;padding:6px}.fthumb span{display:none}.fside{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}.fside .fopen{width:auto}}
.cp-cmd .cp-rec{margin:12px 0 0}

/* 목록 줄: 색 띠 제거 · 핵심 사양 요약 */
.fcard{border-top:1px solid var(--line)}
.fsum{margin:6px 0 4px;display:grid;gap:3px}
.fsum>div{display:grid;grid-template-columns:5.2em 1fr;gap:0 10px;font-size:.86rem;line-height:1.5}
.fsum dt{color:var(--mut);font-weight:700}
.fsum dd{margin:0}
.fcard .fhint{margin:8px 0 0;font-size:.8rem;color:var(--mut-2)}

/* computers: 근거 영상 여러 편을 한 줄씩 */
.cp-evl{display:flex;flex-direction:column;gap:3px}
.cp-evl a{display:block;max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.cp-vids{display:flex;flex-direction:column;gap:6px}
.cp-vids .chip{white-space:normal}
.cp-evl a{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}

/* 챗봇 — 오른쪽 아래 아이콘 + 말풍선 창 */
#gsj-chat{position:fixed;right:20px;bottom:20px;z-index:60;font-family:var(--font)}
.cb-fab{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--c-computers),var(--c-ar));box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .15s}
.cb-fab:hover{transform:scale(1.06)}
.cb-fab.on{opacity:.0;pointer-events:none}
.cb-panel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 40px));display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow),0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.cb-panel[hidden]{display:none}
.cb-head{display:flex;align-items:center;gap:6px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cb-ht{flex:1;display:flex;flex-direction:column;min-width:0}
.cb-ht strong{font-size:.98rem}.cb-ht small{color:var(--mut);font-size:.72rem;line-height:1.3}
.cb-ib{border:0;background:transparent;color:var(--mut);font-size:1rem;width:32px;height:32px;border-radius:8px;cursor:pointer}
.cb-ib:hover{background:var(--line);color:var(--fg)}
.cb-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.cb-msg{max-width:88%;padding:9px 13px;border-radius:14px;font-size:.92rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.cb-bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.cb-user{align-self:flex-end;background:var(--c-computers);color:#06101e;border-bottom-right-radius:4px}
.cb-pending{color:var(--mut);font-style:italic}
.cb-src{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:.76rem;color:var(--mut);display:flex;flex-wrap:wrap;gap:4px 10px}
.cb-src a{color:var(--c-computers)}
.cb-chips{display:flex;flex-direction:column;gap:6px;padding:0 14px 10px}
.cb-chips:empty{display:none}
.cb-chip{text-align:left;border:1px solid var(--line-2);background:transparent;color:var(--fg);border-radius:12px;padding:8px 12px;font:inherit;font-size:.86rem;cursor:pointer}
.cb-chip:hover{background:var(--surface-2)}
.cb-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:flex-end}
.cb-in{flex:1;resize:none;font:inherit;font-size:.92rem;padding:9px 11px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);max-height:110px}
.cb-send{border:0;background:var(--fg);color:var(--bg);font:inherit;font-weight:700;font-size:.88rem;padding:9px 14px;border-radius:12px;cursor:pointer}
.cb-send:disabled,.cb-in:disabled{opacity:.5;cursor:wait}
.cb-note{margin:0;padding:0 14px 10px;font-size:.7rem;color:var(--mut-2);line-height:1.4}
@media (max-width:520px){#gsj-chat{right:12px;bottom:12px}.cb-panel{width:calc(100vw - 24px);height:min(78vh,560px)}}
.cb-clear.arm{background:#b91c1c;color:#fff}
.cb-clear.arm::after{content:"?";font-size:.8rem;margin-left:1px}

/* 큰 가격 아래: 정식 판매국 현지 가격 */
.flocal{display:flex;flex-direction:column;gap:2px;font-size:.78rem;line-height:1.45;color:var(--mut);margin-top:-6px}
.flk{font-weight:700;color:var(--fg)}
.flk.none{font-weight:500;color:var(--mut)}
.flo{max-width:16em}
.fsub{font-size:.8rem;color:var(--mut);margin-top:-8px}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.skip:focus{top:10px}
main:focus{outline:none}
.cb-confirm{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--line);background:var(--surface-2);font-size:.86rem}
.cb-confirm[hidden]{display:none}
.cb-confirm span{flex:1}
.cb-cyes,.cb-cno{font:inherit;font-size:.84rem;font-weight:700;border-radius:9px;padding:6px 12px;cursor:pointer;border:1px solid var(--line-2);background:transparent;color:var(--fg)}
.cb-cyes{background:#b91c1c;border-color:#b91c1c;color:#fff}

.legal{padding-top:32px;padding-bottom:64px}
.legal h2{font-size:1.15rem;margin:32px 0 8px}
.legal p,.legal li{line-height:1.8}
.legal ul{padding-left:1.2em}
.legal-date{color:var(--mut);font-size:.88rem}
.foot a{color:inherit}
.cb-note a{color:var(--c-computers)}

.tabbar [role=tab]{text-decoration:none;display:inline-block}

/* community */
:root{--cm-notice:#f9a8d4;--cm-free:#6ee7b7;--cm-qna:#7dd3fc;--cm-hot:#fbbf24;--cm-new:#34d399}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--cm-notice:#be185d;--cm-free:#047857;--cm-qna:#0369a1;--cm-hot:#92400e;--cm-new:#047857}}
:root[data-theme="light"]{--cm-notice:#be185d;--cm-free:#047857;--cm-qna:#0369a1;--cm-hot:#92400e;--cm-new:#047857}
.cm .b-notice,.b-notice.cm,.cm-card.b-notice{--acc:var(--cm-notice)}
.cm .b-free,.b-free.cm,.cm-card.b-free{--acc:var(--cm-free)}
.cm .b-qna,.b-qna.cm,.cm-card.b-qna{--acc:var(--cm-qna)}
.cm .b-computers,.b-computers.cm,.cm-card.b-computers{--acc:var(--c-computers)}
.cm .b-ar,.b-ar.cm,.cm-card.b-ar{--acc:var(--c-ar)}
.cm .b-robots,.b-robots.cm,.cm-card.b-robots{--acc:var(--c-robots)}
.cm{--acc:var(--c-computers)}
.cm .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cm-dim{color:var(--mut)}
.cm-note{font-size:.84rem;margin:6px 0 0}
.cm-k{color:var(--mut);font-size:.84rem;margin-right:4px}
.cm-h2{font-size:1.2rem;margin:30px 0 12px;letter-spacing:-.02em}
.cm-h3{font-size:1.05rem;margin:0 0 12px}
.cm-crumb{font-size:.88rem;color:var(--mut);margin:0 0 14px}
.cm-crumb a{color:var(--mut)}
.cm-crumb a:hover{color:var(--fg)}
.cm-head .cm-desc{margin:6px 0 0;color:var(--mut)}
.cm-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cm-lead{margin:10px 0 18px}
.cm .btn.danger,.au .btn.danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.cm .btn[disabled]{opacity:.7;cursor:default}
.cm .linkbtn{text-decoration:underline;text-underline-offset:3px}

/* 게시판 바로가기 */
.cm-boards{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 14px}
.cm-boards a{text-decoration:none;color:var(--mut);padding:5px 13px;border:1px solid var(--line);border-radius:999px;font-size:.9rem}
.cm-boards a:hover{color:var(--fg);border-color:var(--line-2)}
.cm-boards a[aria-current="page"]{color:var(--fg);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--acc,var(--fg))}

/* 허브 카드 */
.cm-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cm-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .2s,transform .2s}
.cm-card::before{content:"";height:3px;background:var(--acc)}
.cm-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.cm-card-main{display:block;text-decoration:none;padding:16px 18px 6px;flex:1}
.cm-card-main h3{margin:0 0 6px;font-size:1.15rem;color:var(--fg)}
.cm-card-main h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--acc);margin-right:8px}
.cm-card-main p{margin:0;color:var(--mut);font-size:.9rem;line-height:1.55}
.cm-card-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0;padding:10px 18px 14px;font-size:.82rem;color:var(--mut)}
.cm-hub-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0}

/* 도구 막대 */
.cm-toolbar{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.cm-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.cm-seg a{padding:6px 13px;font-size:.88rem;color:var(--mut);text-decoration:none;border-right:1px solid var(--line)}
.cm-seg a:last-child{border-right:0}
.cm-seg a:hover{color:var(--fg);background:var(--surface-2)}
.cm-seg a[aria-current="true"]{color:var(--fg);background:var(--surface-2);font-weight:700;box-shadow:inset 0 -2px 0 var(--acc)}
.cm-search{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.cm-search select,.cm-search input[type=search],.cm-goto input{font:inherit;font-size:.9rem;padding:7px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);min-width:0}
.cm-search input[type=search]{width:min(240px,50vw)}
.cm-search .btn,.cm-goto .btn{padding:7px 16px;font-size:.9rem}
.cm-resultline{margin:0 0 10px;font-size:.92rem}
.cm-adminonly{margin:0 0 12px}
.cm-empty{text-align:center;padding:40px 14px}
.cm-listfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 8px;font-size:.88rem}

/* 게시판 표 */
.cm-tablewrap{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.cm-table{width:100%;border-collapse:collapse;font-size:.93rem}
.cm-table th{font-size:.8rem;font-weight:700;color:var(--mut);text-align:center;padding:9px 10px;background:var(--surface-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
.cm-table th.c-title{text-align:left}
.cm-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:center}
.cm-table tbody tr:last-child td{border-bottom:0}
table.cm-table:not(.kfit):not(.cmp) td:not(:first-child),table.cm-table:not(.kfit):not(.cmp) th:not(:first-child){min-width:0}
table.cm-table td:first-child,table.cm-table th:first-child{position:static;font-weight:inherit;background:transparent}
table.cm-table th:first-child{background:var(--surface-2);font-weight:700}
.cm-table tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.cm-table .c-no{width:5.2em;color:var(--mut);font-size:.85rem}
.cm-table.with-board .c-no{width:8em}
.cm-table .c-title{text-align:left;overflow-wrap:anywhere}
.cm-table .c-author{width:10em;max-width:10em;overflow-wrap:anywhere;font-size:.88rem}
.cm-table .c-date{width:5em;color:var(--mut);font-size:.85rem;white-space:nowrap}
.cm-table .c-views,.cm-table .c-up{width:4.4em;color:var(--mut);font-size:.85rem}
.cm-row.is-notice td{background:color-mix(in srgb,var(--cm-notice) 7%,transparent)}
table.cm-table .cm-row.is-notice td:first-child{background:color-mix(in srgb,var(--cm-notice) 7%,transparent)}
.cm-row.is-notice .cm-t{font-weight:800}
.cm-row.is-dim .cm-t{color:var(--mut);font-style:italic}
.cm-t{text-decoration:none;color:var(--fg)}
.cm-t:hover{text-decoration:underline;text-underline-offset:3px}
.cm-t:visited{color:var(--mut)}
.cm-cmt{color:var(--mut);font-size:.84rem;font-weight:700;margin-left:2px}
.cm-nick{font-weight:600}
.cm-bd{text-decoration:none;font-size:.8rem;font-weight:700;color:var(--acc);border:1px solid var(--line-2);border-radius:999px;padding:1px 9px;white-space:nowrap;display:inline-block}
.cm-bd:hover{background:var(--surface-2)}
.cm-badge{display:inline-block;font-size:.7rem;font-weight:800;line-height:1.5;padding:0 7px;border-radius:999px;border:1px solid currentColor;vertical-align:1px;white-space:nowrap}
.cm-badge.new{color:var(--cm-new)}
.cm-badge.best{color:var(--cm-hot)}
.cm-badge.notice{color:var(--cm-notice)}
.cm-badge.admin{color:var(--c-ar)}

/* 쪽 번호 */
.cm-pager{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:18px 0 6px}
.cm-pager ol{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.cm-pager a,.cm-pager .pg-cur{display:inline-flex;min-width:36px;height:36px;padding:0 10px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-size:.92rem;color:var(--fg)}
.cm-pager a:hover{background:var(--surface-2);border-color:var(--line-2)}
.cm-pager .pg-cur{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:800}
.cm-pager .pg-gap{display:inline-flex;align-items:center;color:var(--mut);padding:0 2px}
.cm-pager .pg-step{color:var(--mut)}
.cm-goto{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 0;font-size:.88rem}
.cm-goto input{width:5.5em}

/* 글 */
.cm-post{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:22px clamp(16px,3vw,28px) 20px;border-top:3px solid var(--acc)}
.cm-posthead h1{font-size:clamp(1.35rem,3vw,1.85rem);margin:0 0 10px;letter-spacing:-.025em;overflow-wrap:anywhere}
.cm-postmeta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--mut)}
.cm-postmeta .cm-nick{color:var(--fg)}
.cm-body,.cm-cbody{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.cm-body{font-size:1.02rem;line-height:1.85;min-height:6em;margin:0 0 6px}
.cm-body a,.cm-cbody a{color:var(--c-computers);text-underline-offset:3px;word-break:break-all}
.cm-state{margin:10px 0 0}
.cm-postactions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.cm-postactions .btn{padding:9px 18px;font-size:.92rem}
.cm-voteform{margin:0}
.cm-vote b{font-weight:800}
.cm-adminline{margin:14px 0 0;font-size:.86rem;color:var(--mut)}
.cm-report{position:relative}
.cm-report summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none;color:var(--mut);font-size:.88rem;padding:9px 14px;border:1px solid var(--line);border-radius:12px}
.cm-report summary::-webkit-details-marker{display:none}
.cm-report summary:hover{color:var(--fg);border-color:var(--line-2)}
.cm-cactions .cm-report summary{padding:2px 8px;border:0;text-decoration:underline;text-underline-offset:3px;font-size:.82rem}
.cm-reportform{display:grid;gap:8px;margin-top:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);min-width:min(300px,86vw);max-width:380px}
.cm-reportform label{font-weight:700;font-size:.86rem}
.cm-reportform p{margin:0}
.cm-reportform select{font:inherit;font-size:.9rem;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg)}
.cm-reportform .btn{padding:8px 14px;font-size:.9rem;justify-self:start}

/* 댓글 */
.cm-clist{list-style:none;margin:0 0 20px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.cm-c{padding:12px 16px;border-bottom:1px solid var(--line)}
.cm-c:last-child{border-bottom:0}
.cm-c.reply{margin-left:22px;padding-left:16px;border-left:3px solid var(--line-2);background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.cm-c.is-dim .cm-cbody{color:var(--mut)}
.cm-chead{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:.88rem;margin-bottom:4px}
.cm-chead time{font-size:.8rem}
.cm-cbody{line-height:1.7}
.cm-cactions{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.cm-cactions .linkbtn{color:var(--mut);padding:2px 8px;font-size:.82rem;text-decoration:underline}
.cm-reply{display:none}
.js .cm-reply{display:inline-block}
.cm-cform{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cm-replying{margin:0 0 10px;padding:6px 12px;border-radius:10px;background:var(--surface-2);font-size:.9rem}

/* 이전/다음 */
.cm-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 14px}
.cm-prevnext>div{border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.cm-prevnext>div:last-child{text-align:right}
.cm-prevnext a,.cm-prevnext>div>span{display:flex;flex-direction:column;gap:2px;padding:12px 16px;text-decoration:none}
.cm-prevnext a:hover{background:var(--surface-2);border-radius:12px}
.cm-pn-t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-backrow{margin:0}

/* 폼 */
.cm-form{margin-top:14px}
.cm-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 20px;margin-bottom:14px}
.cm-field{display:flex;flex-direction:column;gap:5px;min-width:0;margin-bottom:14px}
.cm-fgrid .cm-field{margin-bottom:0}
.cm-field label{font-weight:700;font-size:.92rem}
.cm-req{font-weight:600;font-size:.72rem;color:var(--c-computers);border:1px solid currentColor;border-radius:999px;padding:0 7px;margin-left:4px;white-space:nowrap}
.cm-field input,.cm-field textarea,.cm-field select{font:inherit;font-size:.96rem;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);width:100%;min-width:0}
.cm-field textarea{resize:vertical;line-height:1.7}
.cm-field.has-err input,.cm-field.has-err textarea{border-color:var(--cp-err)}
.cm-help{margin:0;color:var(--mut);font-size:.84rem;line-height:1.5}
.cm-err{margin:0;color:var(--cp-err);font-size:.88rem;font-weight:700}
.cm-count{margin:0;text-align:right;font-size:.82rem;color:var(--mut)}
.cm-count.over{color:var(--cp-err);font-weight:700}
.cm-actions-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cm-actions-row .btn{padding:11px 26px}
.cm-errsum{border-left-color:var(--cp-err)}
.cm-errsum ul{margin:6px 0 0;padding-left:1.2em}
.cm-errsum a{color:inherit}
.cm-rule-line{margin:0 0 16px}
.cm-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cm-confirm h1{font-size:clamp(1.3rem,3vw,1.7rem);margin:4px 0 14px}
.cm-confirm-target{margin:0 0 14px;overflow-wrap:anywhere}
.cm-rules-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.cm-rules .cm-crumb{margin-bottom:6px}

/* 모바일: 표를 카드형 줄로 */
@media (max-width:640px){
  .cm-search{margin-left:0;width:100%}
  .cm-search input[type=search]{flex:1;width:auto}
  .cm-tablewrap{border:0;background:transparent;border-radius:0;overflow:visible}
  .cm-table,.cm-table tbody{display:block}
  .cm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cm-table tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding:12px 14px;margin:0 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .cm-table td{display:block;padding:0;border:0;text-align:left}
  .cm-table .c-no,.cm-table .c-author,.cm-table .c-date,.cm-table .c-views,.cm-table .c-up{width:auto;max-width:none}
  .cm-table tbody tr:hover td,.cm-row.is-notice td{background:transparent}
  table.cm-table .cm-row.is-notice td:first-child{background:transparent}
  .cm-row.is-notice{background:color-mix(in srgb,var(--cm-notice) 8%,var(--surface))!important}
  .cm-table .c-no{flex:0 0 100%;margin-bottom:4px}
  .cm-table .c-no.num{display:none}
  .cm-table .c-title{flex:0 0 100%;order:1;font-size:1rem;line-height:1.5;min-width:0}
  .cm-table .c-author{order:2;flex:1 1 auto;min-width:0;margin-top:4px;overflow-wrap:anywhere}
  .cm-table .c-date,.cm-table .c-views,.cm-table .c-up{order:3;margin-top:4px}
  .cm-table .c-author,.cm-table .c-date,.cm-table .c-views,.cm-table .c-up{font-size:.82rem;color:var(--mut)}
  .cm-table .c-views::before,.cm-table .c-up::before{content:attr(data-label) " "}
  .cm-prevnext{grid-template-columns:1fr}
  .cm-prevnext>div:last-child{text-align:left}
  .cm-c.reply{margin-left:12px}
  .cm-postactions .btn,.cm-postactions form{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.cm-card{transition:none}.cm-card:hover{transform:none}}

/* auth */
.hdr-auth{display:flex;align-items:center;gap:8px;margin-right:4px}
.hdr-login,.hdr-btn{font:inherit;font-size:.86rem;font-weight:700;text-decoration:none;color:var(--fg);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:5px 14px;cursor:pointer;white-space:nowrap}
.hdr-login{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hdr-login:hover{transform:translateY(-1px)}
.hdr-btn:hover{background:var(--surface-2)}
.hdr-me{text-decoration:none;color:var(--fg);font-size:.9rem;font-weight:700;max-width:10em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 6px;border-radius:8px}
.hdr-me:hover{background:var(--surface-2)}
.hdr-logout{margin:0;display:inline-flex}
@media (max-width:760px){.hdr-auth{margin-left:auto}.top .grow{display:none}.hdr-me{max-width:7em}}

.au .au-lead{margin-bottom:18px}
.au .au-h2{font-size:1.1rem;margin:0 0 10px}
.au-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px clamp(16px,3vw,24px);margin:0 0 16px}
.au-providers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.au-provider{width:100%;justify-content:center;padding:13px 20px;font-size:1rem}
.au-info{margin-top:22px}
.au-list{margin:0 0 14px;padding-left:1.2em;color:var(--mut);line-height:1.75}
.au-policy{margin:0}
.au-policy a{color:var(--fg)}
.au-back{margin:22px 0 0}
.au-dl{margin:0 0 12px;display:grid;gap:0}
.au-dl>div{display:grid;grid-template-columns:8em 1fr;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--line)}
.au-dl>div:last-child{border-bottom:0}
.au-dl dt{color:var(--mut);font-size:.9rem}
.au-dl dd{margin:0;overflow-wrap:anywhere}
.au-nick{font-size:1.1rem}
.au-note{font-size:.86rem;margin:6px 0 0}
.au-btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.au-inline{margin:0;display:inline-flex}
.au-effects{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 20px 14px 38px;margin-bottom:18px}
.au-check{display:flex;gap:10px;align-items:center;margin:0 0 16px;font-weight:600;cursor:pointer}
.au-check input{width:18px;height:18px}
.au-banned,.cm-banned{border-left-color:var(--cp-err)}
.au-errsum{border-left-color:var(--cp-err)}
.au-errsum ul{margin:0;padding-left:1.2em}
.au-errsum a{color:inherit}
@media (max-width:640px){.au-dl>div{grid-template-columns:1fr}}

/* 커뮤니티: 로그인 연동 */
.cm-loginbox{border:1px dashed var(--line-2);border-radius:14px;background:var(--surface);padding:16px 18px;margin:0 0 16px}
.cm-loginbox p{margin:0 0 10px}
.cm-loginbox .cm-actions-row{margin:0}
.cm-loginnote{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.cm-loginnote .btn{padding:7px 16px;font-size:.9rem}
.cm-writingas{margin:0 0 4px;font-size:1rem}
a.cm-vote{text-decoration:none}
.cm-reportlogin{padding:9px 14px;font-size:.88rem;color:var(--mut);font-weight:600}
.cm-badge.anon{color:var(--mut);font-weight:600}
.cm-writingas+.cm-help{margin-bottom:16px}

/* header: language dropdown · login modal */
.langdd{position:relative;font-size:.86rem}
.langdd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg);user-select:none}
.langdd>summary::-webkit-details-marker{display:none}
.langdd>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.langdd[open]>summary{background:var(--surface-2)}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:9.5em;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow)}
.langmenu a{display:block;padding:8px 12px;border-radius:8px;color:var(--mut);text-decoration:none;white-space:nowrap}
.langmenu a:hover{background:var(--surface-2);color:var(--fg)}
.langmenu a.on{color:var(--fg);background:var(--surface-2);font-weight:700}
.hdr-auth{margin:0 0 0 4px}
dialog.logindlg{width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--line-2);border-radius:18px;background:var(--bg);color:var(--fg);padding:22px 24px;box-shadow:var(--shadow),0 20px 50px rgba(0,0,0,.35)}
dialog.logindlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.ld-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ld-head h2{margin:0;font-size:1.3rem}
.ld-x{border:0;background:transparent;color:var(--mut);font-size:1.1rem;width:34px;height:34px;border-radius:8px;cursor:pointer}
.ld-x:hover{background:var(--surface-2);color:var(--fg)}
.ld-lead{color:var(--mut);font-size:.92rem;margin:0 0 16px}
.ld-provs{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ld-prov{width:100%;justify-content:center;padding:13px 18px}
.ld-info{margin:0 0 12px;padding-left:1.1em;color:var(--mut);font-size:.82rem;line-height:1.55}
.ld-policy{margin:0 0 8px;color:var(--mut-2);font-size:.78rem}
.ld-policy a{color:inherit}
.ld-back{margin:0;text-align:center;font-size:.86rem}
.ld-back a{color:var(--mut)}
@media (max-width:760px){.top .grow{display:none}.langdd{margin-left:auto}.hdr-auth{margin-left:0}}
.au-delete{display:inline-block;font-size:.78rem;color:var(--mut);text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.au-delete:hover{color:#f87171}