[hidden]{display:none!important}
/* 무채록 — 정사각형을 기본 단위로 쓰는 단색 스타일 */
:root{
  --bg:#101010; --bg2:#171717; --ink:#ebe9e4; --mute:#8d8b86; --line:#2b2b2a; --line2:#3a3a38;
  --paper:#ebe9e4; --sw-black:#171717; --sw-white:#ebe8e0; --sw-silver:#b4b5b8;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;border-radius:0}
button{cursor:pointer;background:none;border:0}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono)}
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}

/* 헤더 */
.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
.site .row{display:flex;align-items:center;justify-content:space-between;height:52px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.04em}
.mark{display:grid;grid-template-columns:repeat(2,8px);gap:2px}
.mark i{width:8px;height:8px;display:block}
.mark i:nth-child(1){background:#2a2a2a;outline:1px solid #555;outline-offset:-1px}
.mark i:nth-child(2){background:var(--sw-white)}
.mark i:nth-child(3){background:var(--sw-silver)}
.mark i:nth-child(4){background:repeating-conic-gradient(#555 0 25%,#ddd 0 50%) 0 0/4px 4px}
.nav2{display:flex;gap:18px;font-size:13px;color:var(--mute)}
.nav2 a:hover,.nav2 a.on{color:var(--ink)}
.cnav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.cnav a{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;font-size:13px;font-weight:600;color:var(--mute);border-right:1px solid var(--line)}
.cnav a:last-child{border-right:0}
.cnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.dot{width:10px;height:10px;display:inline-block;flex:none}
.dot.black{background:var(--sw-black);outline:1px solid #666;outline-offset:-1px}
.dot.white{background:var(--sw-white)}
.dot.silver{background:var(--sw-silver)}
.dot.clear{background:repeating-conic-gradient(#666 0 25%,#ddd 0 50%) 0 0/5px 5px}

/* 공통 블록 */
.sec{padding:28px 0 8px}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.sh h2{font-size:15px;font-weight:700;letter-spacing:-.02em}
.sh a{font-size:12px;color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:1px solid var(--ink);font-size:14px;font-weight:600}
.btn.pri{background:var(--ink);color:var(--bg)}
.btn.sm{height:34px;padding:0 12px;font-size:12px}
.btn:disabled{opacity:.4;cursor:default}
.btn.danger{border-color:#a55;color:#e99}
.grid .empty{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.empty{border:1px solid var(--line);padding:40px 16px;text-align:center;color:var(--mute);font-size:14px}

/* 정사각형 카드 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bg);display:block;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.sq{aspect-ratio:1/1;background:var(--bg2);overflow:hidden;position:relative}
.sq img{width:100%;height:100%;object-fit:cover}
.sq .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.sq .ph.black{background:var(--sw-black);color:#888}
.sq .ph.white{background:var(--sw-white);color:#777}
.sq .ph.silver{background:var(--sw-silver);color:#666}
.sq .ph.clear{background:repeating-conic-gradient(#242424 0 25%,#2e2e2e 0 50%) 0 0/20px 20px;color:#888}
.ct{padding:10px 12px 16px}
.ct h3{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:-.03em;margin:4px 0 6px;word-break:keep-all}
.ct .mt{font-size:11px;color:var(--mute)}
.card:hover h3{text-decoration:underline;text-underline-offset:3px}

/* 대표 글 */
.feature{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line)}
@media(min-width:720px){.feature{grid-template-columns:1fr 1fr}}
.feature .sq{border-bottom:1px solid var(--line)}
@media(min-width:720px){.feature .sq{border-bottom:0;border-right:1px solid var(--line)}}
.feature .ft{padding:18px 16px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.feature h1{font-size:26px;line-height:1.28;letter-spacing:-.05em;font-weight:800;word-break:keep-all}
.feature p{color:var(--mute);font-size:14px;line-height:1.65}

/* 컬러 정사각형 */
.colors{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:720px){.colors{grid-template-columns:repeat(4,1fr)}}
.csq{aspect-ratio:1/1;position:relative;display:block}
.csq.black{background:var(--sw-black)}.csq.white{background:var(--sw-white);color:#111}.csq.silver{background:var(--sw-silver);color:#111}
.csq.clear{background:repeating-conic-gradient(#1e1e1e 0 25%,#262626 0 50%) 0 0/24px 24px}
.csq .in{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:flex-end}
.csq b{font-size:20px;letter-spacing:-.04em;font-weight:800;line-height:1.1}
.csq span{font-family:var(--mono);font-size:10.5px;opacity:.7}
.csq .top{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:10.5px;opacity:.6}
.csq:hover{outline:2px solid var(--ink);outline-offset:-2px}

/* 인기 글 */
.rank a{display:grid;grid-template-columns:24px 56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rank i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mute)}
.rank .th{width:56px;height:56px;background:var(--bg2);overflow:hidden}
.rank .th img{width:100%;height:100%;object-fit:cover}
.rank b{font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1.4;word-break:keep-all}
.rank em{font-style:normal;font-size:11px;color:var(--mute);font-family:var(--mono)}

/* 소개 블록 */
.intro{border-top:1px solid var(--line);margin-top:36px;padding:24px 0 8px;color:var(--mute);font-size:13.5px;line-height:1.8}
.intro b{color:var(--ink)}

/* 컬러 페이지 */
.chead{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
@media(min-width:720px){.chead{grid-template-columns:1fr 1fr}}
.chead .big{aspect-ratio:1/1}
.chead .big.black{background:#000;box-shadow:inset 0 0 0 1px #2a2a2a}.chead .big.white{background:var(--sw-white)}.chead .big.silver{background:var(--sw-silver)}
.chead .big.clear{background:repeating-conic-gradient(#1e1e1e 0 25%,#262626 0 50%) 0 0/28px 28px}
.chead .big{position:relative}
.chead .big .lab{position:absolute;left:16px;top:14px;color:#8a8a8a}
.chead .big h1{position:absolute;left:16px;bottom:14px;font-size:56px;letter-spacing:-.07em;font-weight:800;line-height:1;color:#ebe9e4}
.chead .big.white .lab,.chead .big.silver .lab{color:#666}
.chead .big.white h1,.chead .big.silver h1{color:#111}
.chead .tx{padding:20px 16px 24px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.chead p{color:var(--mute);font-size:14px;line-height:1.75;word-break:keep-all}
.chead ul{list-style:none;font-size:13px;color:var(--mute);border-top:1px solid var(--line);margin-top:4px}
.chead li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.chead li:before{content:"";width:6px;height:6px;background:var(--ink);margin-top:8px;flex:none}
.filters{display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line2);font-size:12.5px;color:var(--mute);background:transparent}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.more{display:flex;justify-content:center;padding:22px 0 8px}
.sbar{display:flex;gap:8px;margin:16px 0 0}
.sbar input{flex:1;height:44px;background:var(--bg2);border:1px solid var(--line2);padding:0 12px;outline:0}
.sbar input:focus{border-color:var(--ink)}
.sbar select{height:44px;background:var(--bg2);border:1px solid var(--line2);padding:0 8px}

/* 글 상세 */
.art{max-width:720px;margin:0 auto;padding:0 16px}
.art .meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding-top:22px}
.tagc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.art h1{font-size:28px;line-height:1.3;letter-spacing:-.05em;font-weight:800;margin:10px 0 12px;word-break:keep-all}
.art .by{color:var(--mute);font-size:12px;font-family:var(--mono);padding-bottom:18px}
.art .cover{aspect-ratio:1/1;background:var(--bg2);overflow:hidden;margin:0 -16px}
@media(min-width:760px){.art .cover{margin:0}}
.art .cover img{width:100%;height:100%;object-fit:cover}
.spec{margin:22px 0;border-top:1px solid var(--ink)}
.spec .r{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec .r span:first-child{color:var(--mute);font-size:12px;font-family:var(--mono);padding-top:2px}
.spec a{text-decoration:underline;text-underline-offset:3px}
.swp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0}
.swp div{background:var(--bg)}
.swp .c{aspect-ratio:1/1}
.swp p{padding:9px 12px 11px;font-size:12px;color:var(--mute);display:flex;justify-content:space-between;font-family:var(--mono)}
.swp p b{color:var(--ink);font-weight:500}
.verdict{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ink);padding:16px;margin:22px 0}
.verdict b{font-size:22px;letter-spacing:-.04em}
.prose{font-size:16.5px;line-height:1.9;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:21px;letter-spacing:-.04em;line-height:1.4;margin-top:2em;padding-top:.2em}
.prose h3{font-size:18px;letter-spacing:-.03em;margin-top:1.6em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:2px solid var(--ink);padding:2px 0 2px 16px;color:#cfcdc8}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.3em}
.prose hr{border:0;border-top:1px solid var(--line2);margin:2em 0}
.prose figure{margin:1.6em 0}
.prose figure img{width:100%;height:auto}
.prose figcaption{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.5}
.prose figcaption:empty{display:none}
.prose .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:1.6em 0}
.prose .pair figure{margin:0}
.prose .pair img{aspect-ratio:1/1;object-fit:cover}
.prose .pc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2)}
.prose .pc>div{padding:14px 14px 12px}
.prose .pc>div+div{border-left:1px solid var(--line2)}
.prose .pc h4{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute);margin-bottom:8px;font-weight:500}
.prose .pc ul{font-size:14.5px;line-height:1.7}
.prose .note{border:1px solid var(--ink);padding:14px 16px;font-size:15px;line-height:1.75}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0}
.tags a{font-size:12px;color:var(--mute);border:1px solid var(--line);padding:4px 9px}
.share{display:flex;gap:8px;margin:22px 0 0}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.pn a{background:var(--bg);padding:14px 14px 16px;font-size:13px;font-weight:600;line-height:1.45;letter-spacing:-.02em;word-break:keep-all}
.pn a span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-bottom:4px;font-weight:400}
.pn a.r{text-align:right}

/* 광고 */
.ad{display:none;margin:26px 0}
.ad.on{display:block}
.ad small{display:block;font-size:10px;color:var(--mute);margin-bottom:4px;font-family:var(--mono)}

/* 문서 페이지 */
.doc{max-width:720px;margin:0 auto;padding:36px 16px 20px}
.doc h1{font-size:28px;letter-spacing:-.05em;margin-bottom:20px;font-weight:800}
.doc h2{font-size:17px;margin:28px 0 8px;letter-spacing:-.03em}
.doc p,.doc li{color:#c9c7c2;font-size:14.5px;line-height:1.85;word-break:keep-all}
.doc p+p{margin-top:10px}
.doc ul{padding-left:1.2em;margin-top:6px}
.doc a{text-decoration:underline;text-underline-offset:3px}

/* 푸터 */
.foot{border-top:1px solid var(--line);margin-top:44px;padding:22px 0 34px;font-size:12px;color:var(--mute)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px}
.foot nav a:hover{color:var(--ink)}
.foot p{line-height:1.7}

/* 폼 (로그인·관리자) */
.narrow{max-width:420px;margin:0 auto;padding:48px 16px}
.narrow h1{font-size:24px;letter-spacing:-.04em;margin-bottom:6px}
.narrow .sub{color:var(--mute);font-size:13px;margin-bottom:22px}
.field{margin-bottom:10px}
input.t,textarea.t,select.t{width:100%;background:var(--bg2);border:1px solid var(--line2);padding:12px;font-size:15px;outline:0}
input.t:focus,textarea.t:focus,select.t:focus{border-color:var(--ink)}
.err{color:#e99;font-size:13px;min-height:18px;margin-bottom:8px}
.sep{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px;margin:18px 0}
.sep:before,.sep:after{content:"";flex:1;border-top:1px solid var(--line)}
.btn.block{width:100%;margin-bottom:8px}

/* 관리자 목록 */
.adm{max-width:960px;margin:0 auto;padding:22px 16px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:16px 0}
.stats div{background:var(--bg);padding:12px}
.stats b{display:block;font-size:22px;letter-spacing:-.04em}
.stats span{font-size:11px;color:var(--mute)}
.prow{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.prow .th{width:56px;height:56px;background:var(--bg2);overflow:hidden}
.prow .th img{width:100%;height:100%;object-fit:cover}
.prow b{display:block;font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.02em;word-break:keep-all}
.prow .sub2{font-size:11.5px;color:var(--mute);margin-top:3px}
.st{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:1px 6px;border:1px solid var(--line2);margin-right:6px;color:var(--mute)}
.st.pub{border-color:var(--ink);color:var(--ink)}
.st.sch{border-style:dashed;color:var(--ink);border-color:var(--ink)}
.acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:150px}
.acts a,.acts button{font-size:11.5px;padding:5px 8px;border:1px solid var(--line2);color:var(--mute)}
.acts a:hover,.acts button:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:520px){.prow{grid-template-columns:56px 1fr}.acts{grid-column:1/-1;justify-content:flex-start;max-width:none}}

/* 글쓰기 */
.wbar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.wbar .row{display:flex;align-items:center;gap:8px;height:52px;max-width:760px;margin:0 auto;padding:0 16px}
.wbar .stt{flex:1;font-size:11.5px;color:var(--mute);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w{max-width:760px;margin:0 auto;padding:18px 16px 60px}
.w label.l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mute);margin:22px 0 8px;text-transform:uppercase}
.w .ttl{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line2);font-size:26px;font-weight:800;letter-spacing:-.05em;padding:6px 0 12px;outline:0;line-height:1.3}
.w .ttl:focus{border-color:var(--ink)}
.colsel{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.colsel button{background:var(--bg);padding:0;text-align:left}
.colsel .sw{aspect-ratio:1/1;position:relative}
.colsel .sw.black{background:var(--sw-black)}.colsel .sw.white{background:var(--sw-white)}.colsel .sw.silver{background:var(--sw-silver)}
.colsel .sw.clear{background:repeating-conic-gradient(#1e1e1e 0 25%,#262626 0 50%) 0 0/16px 16px}
.colsel b{display:block;font-size:12.5px;padding:7px 8px 8px;font-weight:600;color:var(--mute)}
.colsel button.on{outline:2px solid var(--ink);outline-offset:-2px}
.colsel button.on b{color:var(--ink)}
.colsel button.on .sw:after{content:"";position:absolute;right:8px;top:8px;width:10px;height:10px;background:#c9c9c9;outline:2px solid #111}
.tbar{position:sticky;top:52px;z-index:25;background:var(--bg);display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line2);border-bottom:0;overflow-x:auto}
.tbar button{width:38px;height:38px;border-right:1px solid var(--line);font-size:13px;font-weight:700;color:var(--mute);flex:none;display:flex;align-items:center;justify-content:center}
.tbar button.wide{width:auto;padding:0 10px;font-size:12px}
.tbar button:hover{color:var(--ink);background:var(--bg2)}
.tbar button.on{background:var(--ink);color:var(--bg)}
.tbar .gap{width:1px;background:var(--line2);flex:none}
.ed{min-height:380px;border:1px solid var(--line2);padding:16px;outline:0;font-size:16px;line-height:1.85;background:var(--bg)}
.ed:focus{border-color:var(--ink)}
.ed:empty:before{content:attr(data-ph);color:#666}
.ed>*+*{margin-top:1em}
.ed h2{font-size:21px;letter-spacing:-.04em}.ed h3{font-size:18px}
.ed blockquote{border-left:2px solid var(--ink);padding-left:14px;color:#cfcdc8}
.ed ul,.ed ol{padding-left:1.3em}
.ed hr{border:0;border-top:1px solid var(--line2);margin:1.6em 0}
.ed figure{margin:1.4em 0;position:relative}
.ed figure img{width:100%;height:auto;cursor:pointer}
.ed figure.up img{opacity:.45}
.ed figure.cv img{outline:2px solid var(--ink);outline-offset:2px}
.ed figcaption{font-size:12px;color:var(--mute);margin-top:6px;outline:0}
.ed figcaption:empty:before{content:"사진 설명 (선택)";color:#555}
.ed .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ed .pair figure{margin:0}.ed .pair img{aspect-ratio:1/1;object-fit:cover}
.ed .pc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2)}
.ed .pc>div{padding:12px}.ed .pc>div+div{border-left:1px solid var(--line2)}
.ed .pc h4{font-family:var(--mono);font-size:11px;color:var(--mute);font-weight:500;margin-bottom:6px}
.ed .note{border:1px solid var(--ink);padding:12px 14px}
.imgbar{position:absolute;z-index:40;display:flex;background:var(--bg);border:1px solid var(--ink)}
.imgbar button{height:32px;padding:0 10px;font-size:12px;border-right:1px solid var(--line2)}
.imgbar button:last-child{border-right:0}
.imgbar button:hover{background:var(--ink);color:var(--bg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kinds{display:flex;flex-wrap:wrap;gap:6px}
.vsel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.vsel button{background:var(--bg);height:44px;font-size:13px;color:var(--mute)}
.vsel button.on{background:var(--ink);color:var(--bg);font-weight:700}
.swin{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.swin .box{border:1px solid var(--line2);padding:10px}
.swin .box .pv{aspect-ratio:2/1;margin-bottom:8px;border:1px solid var(--line2)}
.swin .hx{display:flex;gap:6px}
.swin input[type=color]{width:38px;height:38px;border:1px solid var(--line2);background:var(--bg2);padding:2px}
.swin input[type=text]{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);padding:0 8px;font-family:var(--mono);font-size:13px;outline:0}
.tagin{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line2);padding:8px;background:var(--bg2)}
.tagin span{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line2);padding:3px 8px;font-size:12px}
.tagin span button{color:var(--mute);font-size:13px;line-height:1}
.tagin input{flex:1;min-width:100px;background:transparent;border:0;outline:0;font-size:14px;padding:4px}
.pubset{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:560px){.pubset{grid-template-columns:repeat(4,1fr)}}
.pubset button{background:var(--bg);padding:12px;text-align:left;font-size:13px;font-weight:600;color:var(--mute);line-height:1.4}
.pubset button small{display:block;font-weight:400;font-size:11px;margin-top:2px}
.pubset button.on{background:var(--ink);color:var(--bg)}
.hint{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.6}
details.opt{border-top:1px solid var(--line);margin-top:22px}
details.opt>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:48px;font-size:14px;font-weight:600}
details.opt>summary::-webkit-details-marker{display:none}
details.opt>summary:after{content:"+";font-family:var(--mono);color:var(--mute)}
details.opt[open]>summary:after{content:"−"}
details.opt .body{padding-bottom:10px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;font-size:13px;font-weight:600;z-index:100;max-width:90vw}
.banner{border:1px solid var(--ink);padding:12px 14px;margin:0 0 16px;font-size:13px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:var(--bg);z-index:80;overflow:auto}
.modal .mh{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:0 16px;height:52px;border-bottom:1px solid var(--line);background:var(--bg);z-index:2}

.disc{font-size:12.5px;color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--ink);padding:9px 12px;margin:0 0 14px;line-height:1.6}
.brand .en{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;color:var(--mute);margin-top:3px}

/* ================= PC 화면 (1024px 이상) : 모바일과 다른 배치 ================= */
@media(min-width:1024px){
  .wrap{max-width:1200px;padding:0 32px}
  /* 헤더: 한 줄 — 왼쪽 이름, 가운데 컬러, 오른쪽 메뉴 */
  .site .row{height:60px}
  .site .cnav{position:absolute;left:50%;top:0;transform:translateX(-50%);width:440px;height:60px;border:0}
  .site .cnav a{height:60px;border-right:0;font-size:13.5px}
  .nav2{gap:24px;font-size:13.5px}
  /* 홈: 왼쪽 큰 글, 오른쪽 컬러·인기 글 */
  .hm{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:48px;align-items:start}
  .hm>#feat{grid-column:1/-1}
  .hm>#recentSec{grid-column:1;grid-row:2/span 3}
  .hm>#colorSec{grid-column:2;grid-row:2}
  .hm>#popSec{grid-column:2;grid-row:3}
  .hm>#homeAd{grid-column:1;grid-row:5}
  .hm>#introSec{grid-column:1/-1;grid-row:6}
  .hm .colors{grid-template-columns:repeat(2,1fr)}
  .hm .rank a{grid-template-columns:20px 44px 1fr auto;gap:10px}
  .hm .rank .th{width:44px;height:44px}
  .hm .rank b{font-size:13px}
  .feature{grid-template-columns:5fr 7fr}
  .feature .ft{padding:32px 32px 36px}
  .feature h1{font-size:34px}
  .feature p{font-size:15px}
  .hm #recent .grid{grid-template-columns:repeat(3,1fr)}
  /* 목록·컬러 페이지: 4열 */
  .grid{grid-template-columns:repeat(4,1fr)}
  .chead .tx{padding:40px 40px 44px}
  .chead p{font-size:15.5px}
  /* 글 상세: 왼쪽 본문, 오른쪽 고정 정보 칸 */
  .art{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;padding:0 32px}
  .art>*{grid-column:1}
  .art>.side{grid-column:2;grid-row:1/span 40;position:sticky;top:84px;align-self:start;margin-top:22px}
  .art .cover{margin:0}
  .art h1{font-size:34px}
  /* 글쓰기: 왼쪽 글, 오른쪽 설정 */
  .wbar .row{max-width:1180px;padding:0 32px}
  .w{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:44px;padding:18px 32px 60px;align-items:start}
  .wside{position:sticky;top:70px;max-height:calc(100vh - 86px);overflow-y:auto;padding-bottom:24px}
  .wmain{min-width:0}
  .ed{min-height:560px}
  .adm{max-width:1100px;padding:28px 32px 0}
}
@media(min-width:1024px){
  .wside .swin{grid-template-columns:1fr}
}

/* ================= 소개 페이지: 스크롤하면 글자가 나타나요 ================= */
.ab-s{padding:14vh 0;border-bottom:1px solid var(--line)}
.ab-hero{min-height:84vh;display:flex;align-items:center;padding:8vh 0}
.ab-last{border-bottom:0;padding-bottom:18vh}
.ab .lab{margin-bottom:22px}
.rv{font-weight:800;letter-spacing:-.04em;line-height:1.38;word-break:keep-all}
.rv.big{font-size:clamp(30px,6.4vw,64px)}
.rv.mid{font-size:clamp(22px,4.2vw,36px);font-weight:700}
.rv.small{font-size:clamp(15px,2.4vw,18px);font-weight:500;line-height:1.8;color:var(--mute);margin-top:28px;max-width:640px}
.js .rv .wd{opacity:.16;transition:opacity .35s ease}
.js .rv .wd.on{opacity:1}
.ab-hint{margin-top:36px;font-size:12px;color:var(--mute);font-family:var(--mono);letter-spacing:.08em}
.js .fade{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .fade.in{opacity:1;transform:none}
.ab-colors{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:6px}
.abc{aspect-ratio:1/1;position:relative;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.abc span{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:11px;opacity:.6}
.abc b{font-size:clamp(22px,5vw,34px);letter-spacing:-.05em;font-weight:800;line-height:1.1}
.abc p{font-size:clamp(11.5px,2.8vw,14px);line-height:1.55;word-break:keep-all;opacity:.85}
.abc.black{background:#000;color:#ebe9e4}
.abc.white{background:var(--sw-white);color:#111}
.abc.silver{background:var(--sw-silver);color:#111}
.abc.clear{background:repeating-conic-gradient(#1e1e1e 0 25%,#262626 0 50%) 0 0/26px 26px;color:#ebe9e4}
.ab-pills{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.ab-pills span{border:1px solid var(--ink);padding:9px 18px;font-size:15px;font-weight:700}
@media(min-width:720px){.ab-colors{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.ab-s{padding:18vh 0}.ab .wrap{max-width:980px}}
@media(prefers-reduced-motion:reduce){.js .fade{opacity:1;transform:none;transition:none}.js .rv .wd{opacity:1;transition:none}}