/* ============================================================
   skins/zerocell.css — 「제로셀」 테마 전용 스킨
   ------------------------------------------------------------
   · config 의 preset 이 'zerocell' 일 때만 로드된다.
   · 크림슨/금색 무드 확장 자리. style.css 안의 기존
     html[data-preset="zerocell"] 규칙 위에 얹힌다.
   ============================================================ */

/* 예시

.hotsearch-head, .nboard-head { letter-spacing: .06em; text-transform: uppercase; }

.rc-new { color: var(--gold); border-color: var(--gold); }
*/

/* ============================================================
   제로셀 사이버펑크 — 각진 클립 박스
   ------------------------------------------------------------
   · 이 테마는 라운드를 쓰지 않는다(--box-radius 를 0으로).
   · 박스는 오른쪽 위·왼쪽 아래 모서리를 깎아 낸 「노치」 모양.
   · 잘린 대각선에도 테두리 선이 이어지도록,
     바깥 면(테두리색) 위에 ::before 로 1px 안쪽 면을 덮는다.
   ============================================================ */
html[data-preset="zerocell"] { --box-radius: 0; }

html[data-preset="zerocell"] .article,
html[data-preset="zerocell"] .article-cats,
html[data-preset="zerocell"] .fn-section--card,
html[data-preset="zerocell"] .comments-card {
  --notch: 16px;
  --edge: color-mix(in srgb, var(--crimson) 38%, var(--line-strong));
  position: relative;
  background-color: var(--card);      /* 본문 바탕은 반드시 어두운 카드색 — 가독성 우선 */
  /* 잘려 나간 대각선 자리에 테두리 선을 배경으로 그린다.
     가상요소(::before/::after)를 쓰지 않으므로 다른 규칙과 부딪히지 않는다.
     45deg 그라데이션의 경계선이 정확히 모서리 사각형의 대각선과 겹친다. */
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px));
  background-repeat: no-repeat;
  background-position: top right, bottom left;
  background-size: var(--notch) var(--notch);
  border: 1px solid var(--edge);
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

html[data-preset="zerocell"] .article-cats { --notch: 11px; }
/* 상단 네온 라인은 style.css 의 .article::before 가 이미 그린다(건드리지 않는다). */

/* 라벨은 단말기 글씨체로 */
html[data-preset="zerocell"] .cats-label,
html[data-preset="zerocell"] .fn-title {
  font-family: var(--mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-preset="zerocell"] .fn-title { border-bottom-color: color-mix(in srgb, var(--crimson) 50%, var(--line)); }

/* 분류 태그 — 비스듬히 깎은 칩.
   작은 칩에 1px 테두리를 사선으로 그리는 것은 어긋나기 쉬우므로
   테두리 대신 '채운 칩'으로 만든다(잘려도 윤곽이 깨지지 않는다). */
html[data-preset="zerocell"] .cat-tag {
  border-radius: 0;
  border-color: transparent;
  background: color-mix(in srgb, var(--crimson) 24%, var(--card));
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
html[data-preset="zerocell"] .cat-tag:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--crimson) 42%, var(--card));
  color: #fff;
}


/* 우측 버튼바 · 목차 패널 */
/* 우측 버튼바 — 양쪽 모서리 노치. 잘린 대각선에도 그라데이션으로 테두리 선을 넣는다. */
html[data-preset="zerocell"] .wiki-btnbar-btn {
  --notch: 7px;
  --edge: color-mix(in srgb, var(--crimson) 45%, var(--line-strong));
  border-radius: 0;
  border-color: var(--edge);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px), var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px), var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px));
  background-repeat: no-repeat;
  background-position: top right, bottom left;
  background-size: var(--notch) var(--notch);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

html[data-preset="zerocell"] .wiki-btnbar-panel {
  --notch: 12px;
  --edge: color-mix(in srgb, var(--crimson) 45%, var(--line-strong));
  border-radius: 0;
  border-color: var(--edge);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px));
  background-repeat: no-repeat;
  background-position: top right, bottom left;
  background-size: var(--notch) var(--notch);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}


/* CTA 버튼 — 배경이 꽉 찬 색이라 대각선 안쪽은 채워져 있다.
   잘려 나간 두 모서리에만 사선 선을 얹어 각진 윤곽을 또렷하게 한다. */
html[data-preset="zerocell"] .herob-cta,
html[data-preset="zerocell"] .slide-cta,
html[data-preset="zerocell"] .cta-btn {
  --notch: 9px;
  --edge: var(--gold);
  border-radius: 0;
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px), var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px), var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px));
  background-repeat: no-repeat;
  background-position: top right, bottom left;
  background-size: var(--notch) var(--notch);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

/* ============================================================
   제로셀 — 박스 디자인 통일
   ① 모든 박스의 둥근 모서리를 없앤다(원형 50%는 그대로).
   ② 주요 패널은 모서리를 깎고(노치), 잘린 사선에도 테두리 선을 넣는다.
   ③ 테두리는 크림슨 계열로 물들여 한 벌로 보이게 한다.
   ============================================================ */

/* ① 각지게 */
html[data-preset="zerocell"] #wikitext,
html[data-preset="zerocell"] .acct-create input,
html[data-preset="zerocell"] .acct-create select,
html[data-preset="zerocell"] .acct-table .nickform input[type="text"],
html[data-preset="zerocell"] .act-btn,
html[data-preset="zerocell"] .activity,
html[data-preset="zerocell"] .activity-bar,
html[data-preset="zerocell"] .adm-choice-card,
html[data-preset="zerocell"] .adm-danger,
html[data-preset="zerocell"] .adm-input,
html[data-preset="zerocell"] .adm-kv,
html[data-preset="zerocell"] .adm-notice-preview .site-notice,
html[data-preset="zerocell"] .adm-select,
html[data-preset="zerocell"] .adm-textarea,
html[data-preset="zerocell"] .adm-warn,
html[data-preset="zerocell"] .article,
html[data-preset="zerocell"] .article-cats,
html[data-preset="zerocell"] .article.article,
html[data-preset="zerocell"] .authgate-box,
html[data-preset="zerocell"] .authgate-mark,
html[data-preset="zerocell"] .avatar,
html[data-preset="zerocell"] .badge-cur,
html[data-preset="zerocell"] .badge-del,
html[data-preset="zerocell"] .bar-fill,
html[data-preset="zerocell"] .bar-track,
html[data-preset="zerocell"] .brand-logo-img,
html[data-preset="zerocell"] .btn,
html[data-preset="zerocell"] .btn-edit-top,
html[data-preset="zerocell"] .btn-small,
html[data-preset="zerocell"] .cat-chip,
html[data-preset="zerocell"] .cat-chip-n,
html[data-preset="zerocell"] .cat-tag,
html[data-preset="zerocell"] .cat-tile,
html[data-preset="zerocell"] .cat-tile-glyph,
html[data-preset="zerocell"] .charbanner-stage,
html[data-preset="zerocell"] .charcard,
html[data-preset="zerocell"] .charcard-empty,
html[data-preset="zerocell"] .cheatsheet,
html[data-preset="zerocell"] .cmt-del,
html[data-preset="zerocell"] .cmt-guest,
html[data-preset="zerocell"] .cmts-count,
html[data-preset="zerocell"] .cmts-input,
html[data-preset="zerocell"] .cmts-name,
html[data-preset="zerocell"] .codewrap,
html[data-preset="zerocell"] .codewrap #wikitext,
html[data-preset="zerocell"] .comments-card,
html[data-preset="zerocell"] .contrib-head,
html[data-preset="zerocell"] .contrib-new,
html[data-preset="zerocell"] .contrib-pick a,
html[data-preset="zerocell"] .count-pill,
html[data-preset="zerocell"] .cp-attrs,
html[data-preset="zerocell"] .cp-avatar,
html[data-preset="zerocell"] .cp-btn,
html[data-preset="zerocell"] .cp-hero,
html[data-preset="zerocell"] .cp-quote,
html[data-preset="zerocell"] .cp-tag,
html[data-preset="zerocell"] .diff,
html[data-preset="zerocell"] .diff-col,
html[data-preset="zerocell"] .doc-overview,
html[data-preset="zerocell"] .edit-actions .btn,
html[data-preset="zerocell"] .edit-form input[type="text"],
html[data-preset="zerocell"] .edit-form textarea,
html[data-preset="zerocell"] .edit-inline-warn,
html[data-preset="zerocell"] .edit-toolbar,
html[data-preset="zerocell"] .edit-toolbar button.tb,
html[data-preset="zerocell"] .edit-toolbar select.tb-opt,
html[data-preset="zerocell"] .edit-warn-fix,
html[data-preset="zerocell"] .editbox,
html[data-preset="zerocell"] .editor-split,
html[data-preset="zerocell"] .emblem-cell,
html[data-preset="zerocell"] .featured-card,
html[data-preset="zerocell"] .featured-chip,
html[data-preset="zerocell"] .featured-empty,
html[data-preset="zerocell"] .field input,
html[data-preset="zerocell"] .field-static,
html[data-preset="zerocell"] .fn-pop,
html[data-preset="zerocell"] .fn-ref.is-open a,
html[data-preset="zerocell"] .fn-section,
html[data-preset="zerocell"] .fn-section--card,
html[data-preset="zerocell"] .hero-btn,
html[data-preset="zerocell"] .herob,
html[data-preset="zerocell"] .herob-cta,
html[data-preset="zerocell"] .hidden-box,
html[data-preset="zerocell"] .hidden-guest,
html[data-preset="zerocell"] .hotsearch,
html[data-preset="zerocell"] .hotsearch-rank,
html[data-preset="zerocell"] .idcard-corner,
html[data-preset="zerocell"] .idcard-face,
html[data-preset="zerocell"] .idcard-oldtag,
html[data-preset="zerocell"] .idcard-qr,
html[data-preset="zerocell"] .infobox,
html[data-preset="zerocell"] .langsw,
html[data-preset="zerocell"] .langsw-item,
html[data-preset="zerocell"] .loadintro--drawn .loadintro-strip,
html[data-preset="zerocell"] .lock-box,
html[data-preset="zerocell"] .log-badge,
html[data-preset="zerocell"] .log-filter-tab,
html[data-preset="zerocell"] .login-form input[type="password"],
html[data-preset="zerocell"] .menu-protect-sel,
html[data-preset="zerocell"] .menu-toggle,
html[data-preset="zerocell"] .menu-toggle span,
html[data-preset="zerocell"] .mini-btn,
html[data-preset="zerocell"] .more-list,
html[data-preset="zerocell"] .more-list a,
html[data-preset="zerocell"] .more-list button,
html[data-preset="zerocell"] .more-toggle,
html[data-preset="zerocell"] .nav-badge,
html[data-preset="zerocell"] .nav-link,
html[data-preset="zerocell"] .navbox,
html[data-preset="zerocell"] .navgrp-btn,
html[data-preset="zerocell"] .navgrp-panel,
html[data-preset="zerocell"] .nboard,
html[data-preset="zerocell"] .netbar-tab,
html[data-preset="zerocell"] .nfeed,
html[data-preset="zerocell"] .nfeed-thumb,
html[data-preset="zerocell"] .notice,
html[data-preset="zerocell"] .notice-box,
html[data-preset="zerocell"] .notice-label,
html[data-preset="zerocell"] .notif-kind,
html[data-preset="zerocell"] .ns-badge,
html[data-preset="zerocell"] .ns-lock,
html[data-preset="zerocell"] .ns-tab,
html[data-preset="zerocell"] .page-tab,
html[data-preset="zerocell"] .page-tabs,
html[data-preset="zerocell"] .pager a,
html[data-preset="zerocell"] .pc-avatar .avatar,
html[data-preset="zerocell"] .pc-badge,
html[data-preset="zerocell"] .pc-bar,
html[data-preset="zerocell"] .pc-blocked,
html[data-preset="zerocell"] .pc-cell,
html[data-preset="zerocell"] .pc-links a,
html[data-preset="zerocell"] .pc-nick-form input[type="text"],
html[data-preset="zerocell"] .pc-role,
html[data-preset="zerocell"] .pc-stats,
html[data-preset="zerocell"] .pc-streak,
html[data-preset="zerocell"] .pc-tier,
html[data-preset="zerocell"] .pc-today,
html[data-preset="zerocell"] .pcard,
html[data-preset="zerocell"] .preview-box,
html[data-preset="zerocell"] .preview-live,
html[data-preset="zerocell"] .profile-card,
html[data-preset="zerocell"] .pwreset input,
html[data-preset="zerocell"] .rank-tier,
html[data-preset="zerocell"] .rc-list,
html[data-preset="zerocell"] .rc-new,
html[data-preset="zerocell"] .redacted-box,
html[data-preset="zerocell"] .redacted-mark,
html[data-preset="zerocell"] .role-pill,
html[data-preset="zerocell"] .search-box,
html[data-preset="zerocell"] .secauth-approval .secauth-allbtn,
html[data-preset="zerocell"] .secauth-reveal,
html[data-preset="zerocell"] .side-brand-img,
html[data-preset="zerocell"] .side-stats,
html[data-preset="zerocell"] .sidebar .nav-link,
html[data-preset="zerocell"] .site-notice-x,
html[data-preset="zerocell"] .skip-link,
html[data-preset="zerocell"] .slide-cta,
html[data-preset="zerocell"] .slider,
html[data-preset="zerocell"] .slider-dot,
html[data-preset="zerocell"] .sp-card,
html[data-preset="zerocell"] .sp-card-ic,
html[data-preset="zerocell"] .srcpage,
html[data-preset="zerocell"] .ss-img,
html[data-preset="zerocell"] .statpanel,
html[data-preset="zerocell"] .statpanel-bars.standalone,
html[data-preset="zerocell"] .stats-col,
html[data-preset="zerocell"] .stats-hero,
html[data-preset="zerocell"] .syntaxbox-code,
html[data-preset="zerocell"] .tb,
html[data-preset="zerocell"] .theme-card,
html[data-preset="zerocell"] .theme-card-tag,
html[data-preset="zerocell"] .theme-swatch,
html[data-preset="zerocell"] .themebar-x,
html[data-preset="zerocell"] .toast,
html[data-preset="zerocell"] .topnav .nav-link,
html[data-preset="zerocell"] .topnav-more-btn,
html[data-preset="zerocell"] .topnav-more-panel,
html[data-preset="zerocell"] .topnav-more-panel .nav-link,
html[data-preset="zerocell"] .tpl-box,
html[data-preset="zerocell"] .tpl-userlist li,
html[data-preset="zerocell"] .tpldoc,
html[data-preset="zerocell"] .tpldoc-form,
html[data-preset="zerocell"] .tpldoc-tag,
html[data-preset="zerocell"] .um-btn,
html[data-preset="zerocell"] .um-me,
html[data-preset="zerocell"] .um-role,
html[data-preset="zerocell"] .um-tag-block,
html[data-preset="zerocell"] .upload-card,
html[data-preset="zerocell"] .upload-drop,
html[data-preset="zerocell"] .upload-tile,
html[data-preset="zerocell"] .upload-tile-syntax,
html[data-preset="zerocell"] .user-bell,
html[data-preset="zerocell"] .user-bell-n,
html[data-preset="zerocell"] .wall-form textarea,
html[data-preset="zerocell"] .watch-del,
html[data-preset="zerocell"] .watch-list a,
html[data-preset="zerocell"] .widget-err,
html[data-preset="zerocell"] .wiki-boxed-section,
html[data-preset="zerocell"] .wiki-btnbar-btn,
html[data-preset="zerocell"] .wiki-btnbar-panel,
html[data-preset="zerocell"] .wiki-code,
html[data-preset="zerocell"] .wiki-figure--thumb,
html[data-preset="zerocell"] .wiki-file-missing,
html[data-preset="zerocell"] .wiki-fold,
html[data-preset="zerocell"] .wiki-missing-tpl,
html[data-preset="zerocell"] .wiki-music,
html[data-preset="zerocell"] .wiki-notice,
html[data-preset="zerocell"] .wiki-pre,
html[data-preset="zerocell"] .wiki-table-wrap,
html[data-preset="zerocell"] .wiki-toc,
html[data-preset="zerocell"] .wmap-year-next,
html[data-preset="zerocell"] .wmap-year-prev,
html[data-preset="zerocell"] .worldslide-dot.is-active,
html[data-preset="zerocell"] .worldslide-wrap,
html[data-preset="zerocell"] .wpanel,
html[data-preset="zerocell"] .wpanel .rc-list,
html[data-preset="zerocell"] .wswitch-btn,
html[data-preset="zerocell"] .wswitch-here,
html[data-preset="zerocell"] .wswitch-item,
html[data-preset="zerocell"] .wswitch-menu,
html[data-preset="zerocell"] a.btn,
html[data-preset="zerocell"] blockquote.wiki-pullquote,
html[data-preset="zerocell"] button.btn,
html[data-preset="zerocell"] code,
html[data-preset="zerocell"] code.wiki-code,
html[data-preset="zerocell"] details.wiki-fold,
html[data-preset="zerocell"] img.wiki-img,
html[data-preset="zerocell"] mark,
html[data-preset="zerocell"] pre.wiki-pre { border-radius: 0; }

/* ② 주요 패널 — 모서리 노치 + 사선 테두리 */
html[data-preset="zerocell"] .infobox,
html[data-preset="zerocell"] .wiki-boxed-section,
html[data-preset="zerocell"] .navbox,
html[data-preset="zerocell"] .cheatsheet,
html[data-preset="zerocell"] .hotsearch,
html[data-preset="zerocell"] .nfeed,
html[data-preset="zerocell"] .rc-list,
html[data-preset="zerocell"] .side-stats,
html[data-preset="zerocell"] .statpanel,
html[data-preset="zerocell"] .nboard,
html[data-preset="zerocell"] .wpanel,
html[data-preset="zerocell"] .wiki-toc,
html[data-preset="zerocell"] .tpldoc,
html[data-preset="zerocell"] .cat-tile,
html[data-preset="zerocell"] .featured-card,
html[data-preset="zerocell"] .sp-card,
html[data-preset="zerocell"] .pcard,
html[data-preset="zerocell"] .emblem-cell,
html[data-preset="zerocell"] .charcard-empty,
html[data-preset="zerocell"] .worldslide-wrap,
html[data-preset="zerocell"] .upload-card,
html[data-preset="zerocell"] .activity,
html[data-preset="zerocell"] .stats-hero,
html[data-preset="zerocell"] .stats-col,
html[data-preset="zerocell"] .preview-box,
html[data-preset="zerocell"] .redacted-box,
html[data-preset="zerocell"] .hidden-box,
html[data-preset="zerocell"] .lock-box,
html[data-preset="zerocell"] .authgate-box,
html[data-preset="zerocell"] .wmap,
html[data-preset="zerocell"] .diff,
html[data-preset="zerocell"] .srcpage {
  --notch: 10px;
  --edge: color-mix(in srgb, var(--crimson) 40%, var(--line-strong));
  border-color: var(--edge);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px));
  background-repeat: no-repeat;
  background-position: top right, bottom left;
  background-size: var(--notch) var(--notch);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

/* ③ 안내·경고 상자 — 배경 그라데이션을 쓰므로 테두리 선은 덧대는 층(::before)으로 그린다 */
html[data-preset="zerocell"] .notice-box {
  --notch: 12px;
  --edge: color-mix(in srgb, var(--nc) 60%, #000);
  position: relative;
  border-color: var(--edge);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
                     100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
html[data-preset="zerocell"] .notice-box::before {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(45deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px),
                    var(--edge) calc(50% + 1.2px), transparent calc(50% + 1.2px));
  background-repeat: no-repeat;
  background-position: top right, bottom left;
  background-size: var(--notch) var(--notch);
}

/* ④ 알약·꼬리표 — 각진 칩으로(테두리를 사선으로 그리지 않아 깨질 일이 없다) */
html[data-preset="zerocell"] .cat-chip,
html[data-preset="zerocell"] .role-pill,
html[data-preset="zerocell"] .ns-badge,
html[data-preset="zerocell"] .log-badge,
html[data-preset="zerocell"] .featured-chip,
html[data-preset="zerocell"] .cp-tag,
html[data-preset="zerocell"] .rank-tier,
html[data-preset="zerocell"] .theme-card-tag {
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  border-color: transparent;
  background: color-mix(in srgb, var(--crimson) 22%, var(--card));
}

/* ⑤ 표 — 머리줄을 크림슨으로 */
html[data-preset="zerocell"] .wikitable th,
html[data-preset="zerocell"] .wiki-table th {
  border-color: color-mix(in srgb, var(--crimson) 35%, var(--line-strong));
  background: color-mix(in srgb, var(--crimson) 16%, transparent);
}