/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 3건은 전부 원형 요소(화살표 아이콘 원판·평론가 아바타·도트(LED)) 전용
   — CLAUDE.md §8-2 ② 사유 주석. 전건 셀렉터를 대조해 확인했다(2026-08-06). */
/* home-zine.css — 진 스타일 컴포넌트(시안 <style> 이식). 마크업 교체 E3~E5. 토큰=base.css.
   전역 베이스(.led/.card 하위/.hd/.topbar/.links/.shell/.ad/.foot/.mono/.barbar)는 components.css로
   이관(zine_CSS_누출_봉합_v1 §전역 베이스 이관). 값 변경 없음 — 이동만. 이 파일엔 홈 전용 변형(.main 스코프)만 남는다. */

  /* ===== shell =====
     .shell/.ad 베이스는 components.css로 이관. .rail/.sb는 현재 마크업 미사용(0건, 3열 셸 미도입)이라
     스코프 유지 목적으로만 .main 접두 — 재도입 시 .shell > .rail/.main/.sb 구조부터 확인 */
  .main .rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:74px}
  .main{min-width:0;display:flex;flex-direction:column;gap:32px}

  /* ===== section header ===== */
  .main .sh{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:nowrap}
  .main .sh .num{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br);flex:none}
  .main .sh h2{font-family:var(--font);font-weight:700;font-size:19px;letter-spacing:-.4px;white-space:nowrap;flex:none}
  .main .sh .jp{font-family:'Space Mono';font-size:11px;color:var(--t3);flex:none;display:inline-flex;align-items:center;gap:6px}
  .main .sh .more{margin-left:auto;font-size:12px;color:var(--t2);display:flex;align-items:center;gap:3px;cursor:pointer}
  .main .sh .more:hover{color:var(--acc-br)}

  /* ===== tabs (매체) ===== */
  .main .tabs{display:flex;gap:4px;margin-bottom:13px}
  .main .tab{font-size:12.5px;font-weight:700;color:var(--t2);padding:6px 13px;border:1px solid var(--hair);background:var(--pane);cursor:pointer;transition:.12s}
  .main .tab:hover{color:var(--t1);border-color:var(--bor)}
  .main .tab.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br)}
  html[data-theme="light"] .main .tab.on{color:#fff}
  /* day tabs */
  .main .daytabs{display:flex;gap:3px;margin-bottom:13px;flex-wrap:wrap}
  .main .dtab{font-size:12.5px;font-weight:600;color:var(--t2);padding:6px 12px;border:1px solid var(--hair);background:var(--pane);cursor:pointer;font-family:var(--font)}
  .main .dtab:hover{color:var(--t1)}
  .main .dtab.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim)}
  .main .dtab.fin{margin-left:6px}

  /* ===== horizontal scroll ===== */
  .main .hs-wrap{position:relative}
  .main .hs{display:flex;gap:13px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
  .main .hs::-webkit-scrollbar{display:none}
  .main .hs .card{flex:none;width:150px}
  .main .hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;background:var(--pane);border:1px solid var(--bor);color:var(--t1);display:grid;place-items:center;font-size:18px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.4)}
  .main .hs-arrow:hover{background:var(--acc-br);color:var(--ink);border-color:var(--acc-br)}
  .main .hs-arrow-left{left:-12px}.main .hs-arrow-right{right:-12px}
  .main .hs-arrow.hidden{display:none}

  /* ===== card ===== */
  .main .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
  .main .grid.r34{grid-template-columns:repeat(4,1fr)}
  .main .empty{padding:34px 0;text-align:center;font-size:13px;color:var(--t3);font-family:'Space Mono'}
  /* duotone rows — 현재 마크업 미사용(0건). 카드 베이스(.cover/.ci, components.css) 위의 변형이라 여기 유지 */
  .main .duo .ci{mix-blend-mode:luminosity;background-color:var(--acc)}
  .main .duo .cover{background:var(--acc)}
  .main .duo .ht2{position:absolute;inset:0;mix-blend-mode:multiply;background-image:radial-gradient(var(--ink) 26%,transparent 28%);background-size:4px 4px;opacity:.4}

  /* ===== community list ===== */
  .main .comlist{border:1px solid var(--bor)}
  .main .crow{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--hair);cursor:pointer}
  .main .crow:last-child{border-bottom:none}
  .main .crow:hover{background:var(--pane)}
  .main .crow .hub{font-size:10.5px;font-weight:700;color:var(--acc-br);width:42px;flex:none}
  .main .crow .ct{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
  .main .crow .cc{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:4px}
  .main .crow .cc svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.7;fill:none}
  .main .twocol{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
  .main .ad.box{height:250px}

  /* ===== critic pick ===== */
  .main .critic-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .main .critic-card{display:flex;gap:13px;padding:15px;border:1px solid var(--bor);background:var(--pane);cursor:pointer;transition:border-color .12s}
  .main .critic-card:hover{border-color:var(--acc)}
  .main .critic-av{width:44px;height:44px;border-radius:50%;background:var(--pane2);display:grid;place-items:center;font-size:22px;flex:none;border:1px solid var(--hair)}
  .main .critic-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
  .main .critic-name .badge{font-family:'Space Mono';font-size:8.5px;font-weight:700;color:var(--acc-br);border:1px solid var(--acc);padding:1px 5px}
  .main .critic-meta{font-size:11px;color:var(--t3);margin-top:3px}
  .main .critic-rev{margin-top:9px;padding-top:9px;border-top:1px solid var(--hair)}
  .main .critic-rev .cw{font-size:12.5px;font-weight:700;color:var(--t1)}
  .main .critic-rev .cs{font-family:'Space Mono';font-size:10px;color:var(--t3);margin-top:3px}

  /* ===== right sidebar — 현재 마크업 미사용(0건, §shell 주석 참고) ===== */
  .main .sb{display:flex;flex-direction:column;gap:18px;position:sticky;top:74px}
  .main .side-section{border:1px solid var(--bor);background:var(--pane);padding:14px}
  .main .side-head{display:flex;align-items:center;gap:8px;margin-bottom:11px}
  .main .side-title{font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:-.3px;display:flex;align-items:center;gap:6px}
  .main .side-gender{margin-left:auto;font-family:'Space Mono';font-size:10px;color:var(--t3);display:flex;align-items:center;gap:5px}
  .main .side-gender a{cursor:pointer}.main .side-gender a.on{color:var(--acc-br)}.main .side-gender .sep{opacity:.4}
  .main .side-tabs{display:flex;gap:3px;margin-bottom:11px}
  .main .side-tab{font-size:11px;font-weight:700;color:var(--t2);padding:4px 9px;border:1px solid var(--hair);cursor:pointer}
  .main .side-tab.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br)}
  html[data-theme="light"] .main .side-tab.on{color:#fff}
  .main .side-rank-list{display:flex;flex-direction:column}
  .main .srow{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--hair);cursor:pointer}
  .main .srow:last-child{border-bottom:none}
  .main .srow .rn{font-family:'Chakra Petch';font-weight:700;font-size:17px;width:20px;text-align:center;color:var(--t3);flex:none}
  .main .srow .rn.top{color:var(--acc-br)}
  .main .srow .rth{width:30px;height:40px;background-size:cover;background-position:center;border:1px solid var(--hair);flex:none}
  .main .srow .rmain{flex:1;min-width:0}
  .main .srow .rt{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main .srow .rs{display:block;font-size:10px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main .srow .rsc{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br);flex:none}
  .main .side-all{margin-top:10px;font-size:11.5px;color:var(--t2);text-align:center;border-top:1px solid var(--hair);padding-top:10px;cursor:pointer}
  .main .side-all:hover{color:var(--acc-br)}
  .main .side-post-list{display:flex;flex-direction:column}
  .main .prow{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer}
  .main .prow:hover .pt{color:var(--acc-br)}
  .main .prow .pn{font-family:'Chakra Petch';font-weight:700;font-size:13px;width:16px;text-align:center;color:var(--t3);flex:none}
  .main .prow .pn.top{color:var(--acc-br)}
  .main .prow .pt{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s}
  .main .prow .src{font-size:9px;font-weight:700;color:var(--t3);border:1px solid var(--hair);padding:1px 4px;flex:none}

  /* ===== ZINE HERO ===== */
  .main .jhero{position:relative;background:var(--bg);border:1px solid var(--bor);overflow:hidden;height:480px;display:grid;grid-template-columns:1.15fr .85fr;font-family:var(--font)}
  .main .jhero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.3;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .main .jhero .bgrid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(120deg,#000,transparent 70%)}
  .main .jhero .mast{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--bor);font-family:'Space Mono';font-size:10.5px;letter-spacing:.12em;color:var(--t3);text-transform:uppercase;z-index:5;background:var(--bg)}
  .main .jhero .mast .dotled{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led);animation:ledpulse 1.7s ease-in-out infinite}
  .main .jhero .mast .sp{flex:1}
  .main .jhero .mast .m-issue{color:var(--acc-br)}
  .main .jhero .left{position:relative;padding:50px 30px 44px 34px;display:flex;flex-direction:column;z-index:3}
  .main .jhero .genre{display:flex;align-items:center;gap:8px;font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--acc-br);text-transform:uppercase;margin-bottom:14px}
  .main .jhero .genre .tg{border:1px solid var(--acc);padding:3px 8px}
  .main .jhero .genre .tg.fill{background:var(--led);color:#0a0b0c;border-color:var(--led)}
  .main .jhero .title{font-family:'Do Hyeon',sans-serif;font-weight:400;line-height:.98;letter-spacing:-.5px;color:var(--t1);font-size:58px;margin-bottom:6px;position:relative;overflow:hidden}
  .main .jhero .title .ln{display:block}
  .main .jhero .subt{font-family:'Black Han Sans';font-size:28px;letter-spacing:-.5px;color:var(--t1);margin-bottom:18px}
  .main .jhero .subt .ko{color:var(--acc-br)}
  .main .jhero .blurb{font-size:12.5px;line-height:1.75;color:var(--t2);max-width:40ch;margin-bottom:auto;border-left:2px solid var(--acc);padding-left:12px}
  .main .jhero .blurb .blurb-empty{color:var(--t3);font-style:italic}
  .main .jhero .meta{display:flex;align-items:flex-end;gap:20px;margin-top:20px}
  .main .jhero .scorebox{display:flex;flex-direction:column;gap:1px}
  .main .jhero .scorebox .lbl{font-family:'Space Mono';font-size:9px;letter-spacing:.14em;color:var(--t3)}
  .main .jhero .scorebox .v{font-family:'Chakra Petch';font-weight:700;font-size:40px;line-height:.9;color:var(--t1);display:flex;align-items:center;gap:7px}
  .main .jhero .scorebox .v .leaf{width:22px;height:22px;color:var(--acc-br)}
  .main .jhero .axes{display:flex;gap:14px;font-family:'Space Mono';font-size:10px;color:var(--t3);padding-bottom:5px}
  .main .jhero .axes b{display:block;font-size:14px;color:var(--t1);font-family:var(--font);font-weight:700;margin-top:2px}
  .main .jhero .btns{display:flex;gap:8px;margin-top:18px}
  .main .jhero .bp{background:var(--acc);color:#06281a;font-weight:700;font-size:13px;padding:11px 20px;display:flex;align-items:center;gap:7px;font-family:var(--font)}
  .main .jhero .bp:hover{background:var(--acc-br)}
  .main .jhero .bs{background:transparent;border:1px solid var(--bor);color:var(--t1);font-weight:700;font-size:13px;padding:11px 16px;display:flex;align-items:center;gap:7px;font-family:var(--font)}
  .main .jhero .bs:hover{border-color:var(--acc)}
  .main .jhero .bs svg{width:14px;height:14px;fill:currentColor}
  .main .jhero .vcap{position:absolute;left:6px;top:44px;writing-mode:vertical-rl;font-family:'Black Han Sans';font-size:15px;letter-spacing:3px;color:var(--acc-br);opacity:.5;z-index:2}
  .main .jhero .right{position:relative;border-left:1px solid var(--bor);overflow:hidden;display:grid;place-items:center;background:#0a0b0c}
  .main .jhero .stage{position:absolute;inset:0}
  .main .jhero .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
  .main .jhero .slide.on{opacity:1}
  .main .jhero .slide .art{position:absolute;inset:0;background-size:cover;background-position:center top;filter:contrast(1.04)}
  .main .jhero .slide .vig{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,12,.55),transparent 38%),linear-gradient(90deg,rgba(10,11,12,.4),transparent 30%)}
  .main .jhero .kanji{position:absolute;right:-8px;top:-26px;font-family:'Black Han Sans';font-size:150px;line-height:.78;color:#0a0b0c;opacity:.16;writing-mode:vertical-rl;z-index:2;pointer-events:none}
  .main .jhero .scan{position:absolute;left:0;right:0;height:32%;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(217,224,33,.10) 50%,transparent);mix-blend-mode:screen;animation:jsweep 5.5s linear infinite}
  @keyframes jsweep{0%{transform:translateY(-40%)}100%{transform:translateY(360%)}}
  .main .jhero .numtag{position:absolute;right:22px;bottom:46px;z-index:5;display:flex;align-items:flex-end;gap:6px}
  .main .jhero .numtag .ae{font-family:'Space Mono';font-weight:700;font-size:12px;color:var(--t1);line-height:1;writing-mode:vertical-rl;letter-spacing:1px}
  .main .jhero .numtag .no{font-family:'Chakra Petch';font-weight:700;font-size:46px;line-height:1;color:var(--led)}
  .main .jhero .brk{position:absolute;width:22px;height:22px;border:2px solid var(--led);z-index:5}
  .main .jhero .brk.tl{left:12px;top:46px;border-right:none;border-bottom:none}
  .main .jhero .brk.br{right:12px;bottom:36px;width:26px;height:26px;border-left:none;border-top:none}
  .main .jhero .hfoot{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;gap:12px;padding:0 16px;border-top:1px solid var(--bor);background:var(--bg);z-index:5}
  .main .jhero .barcode{flex:1;height:14px;background-image:repeating-linear-gradient(90deg,var(--t2) 0 1px,transparent 1px 3px,var(--t2) 3px 5px,transparent 5px 6px,var(--t2) 6px 9px,transparent 9px 11px)}
  .main .jhero .hfoot .mono{font-family:'Space Mono';font-size:10px;color:var(--t3);letter-spacing:.06em;white-space:nowrap}
  .main .jhero .qr{width:18px;height:18px;flex:none;background:conic-gradient(from 0deg,var(--t2) 25%,transparent 0 50%,var(--t2) 0 75%,transparent 0) 0 0/8px 8px;-webkit-mask:repeating-linear-gradient(90deg,#000 0 1.5px,transparent 1.5px 3px),repeating-linear-gradient(0deg,#000 0 1.5px,transparent 1.5px 3px);mask:repeating-linear-gradient(90deg,#000 0 1.5px,transparent 1.5px 3px),repeating-linear-gradient(0deg,#000 0 1.5px,transparent 1.5px 3px)}
  .main .jhero .dots{display:flex;gap:6px;margin-top:16px;z-index:5}
  .main .jhero .dots i{width:7px;height:7px;background:var(--t3);cursor:pointer;transition:.2s}
  .main .jhero .dots i.on{width:22px;background:var(--led)}
  .main .jhero .genre,.main .jhero .title .ln,.main .jhero .subt,.main .jhero .blurb,.main .jhero .meta,.main .jhero .btns{animation:jrise .55s cubic-bezier(.2,.7,.2,1) backwards}
  .main .jhero .genre{animation-delay:.05s}.main .jhero .title .l1{animation-delay:.1s}
  .main .jhero .subt{animation-delay:.24s}.main .jhero .blurb{animation-delay:.3s}.main .jhero .meta{animation-delay:.36s}.main .jhero .btns{animation-delay:.42s}
  @keyframes jrise{from{transform:translateY(14px)}to{transform:none}}
  @media(prefers-reduced-motion:reduce){.main .jhero .scan,.main .jhero .mast .dotled{animation:none}.main .jhero *{animation:none!important}}

  /* ===== MOTION ===== */
  .main .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .main .reveal.in{opacity:1;transform:none}
  /* 카드 등장 스태거(E6) — CSS만(마크업 무손상). 8개 이후 --d 기본0. reduced-motion=.card animation:none이 무효화(components.css) */
  .main .hs .card:nth-child(1),.main .grid .card:nth-child(1){--d:0s}
  .main .hs .card:nth-child(2),.main .grid .card:nth-child(2){--d:.04s}
  .main .hs .card:nth-child(3),.main .grid .card:nth-child(3){--d:.08s}
  .main .hs .card:nth-child(4),.main .grid .card:nth-child(4){--d:.12s}
  .main .hs .card:nth-child(5),.main .grid .card:nth-child(5){--d:.16s}
  .main .hs .card:nth-child(6),.main .grid .card:nth-child(6){--d:.2s}
  .main .hs .card:nth-child(7),.main .grid .card:nth-child(7){--d:.24s}
  .main .hs .card:nth-child(8),.main .grid .card:nth-child(8){--d:.28s}
  /* live ticker */
  .main .ticker{display:flex;align-items:center;height:36px;border:1px solid var(--bor);background:var(--pane);overflow:hidden;font-family:'Space Mono'}
  .main .ticker .lbl{flex:none;align-self:stretch;display:flex;align-items:center;gap:7px;background:var(--acc);color:#06281a;font-weight:700;font-size:10.5px;letter-spacing:.1em;padding:0 13px}
  .main .ticker .lbl .led{box-shadow:0 0 7px var(--led)}
  .main .ticker .vp{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .main .ticker .track{display:inline-flex;white-space:nowrap;animation:tick 34s linear infinite}
  .main .ticker:hover .track{animation-play-state:paused}
  .main .ticker .it{font-size:11px;color:var(--t2);padding:0 22px;border-right:1px solid var(--hair);display:inline-flex;align-items:center;gap:7px}
  .main .ticker .it b{color:var(--acc-br);font-weight:700}.main .ticker .it i{color:var(--gold);font-style:normal;font-weight:700}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* hero score: \ubcc4\uc810 \uba54\uc778 + \ud5c8\ube0c\uc2a4\ucf54\uc5b4 \uc7a0\uae08 */
  .main .jhero .scorebox .v .starbig{color:var(--gold);font-size:34px;line-height:.86}
  .main .jhero .herblock{align-self:flex-end;display:inline-flex;align-items:center;gap:5px;font-family:'Space Mono';font-size:9px;letter-spacing:.07em;color:var(--t3);border:1px solid var(--bor);padding:5px 8px}
  .main .jhero .herblock .leaf{width:11px;height:11px;color:var(--acc-br);opacity:.7}
  .main .jhero .herblock .lk{width:9px;height:9px}
  @media(prefers-reduced-motion:reduce){.main .reveal{opacity:1;transform:none;transition:none}.main .ticker .track{animation:none}}

  @media(max-width:1100px){.main .rail.left{display:none}}
  @media(max-width:860px){.main .sb{display:none}.main .jhero{grid-template-columns:1fr;height:auto}.main .jhero .right{height:300px;border-left:none;border-top:1px solid var(--bor)}.main .jhero .title{font-size:46px}.main .grid{grid-template-columns:repeat(3,1fr)}.main .twocol{grid-template-columns:1fr}}