@charset "utf-8";
/* ==========================================================================
   ONCA 테마 — 빨간 윗줄 머리 · 가로 메뉴 · 본문+위젯 2단 · 카드형 게시판
   포인트 색은 --oc-red 하나로 바꾼다 (로고색 초록으로 바꾸려면 #03a94e 계열)
   화면 모드: <html data-theme="light|dark"> (head.sub.php 의 스크립트가 기기 설정/저장값으로 정함)
   ========================================================================== */

/* ---------- 색 토큰 ---------- */
:root {
    --oc-red: #df304b;
    --oc-red-d: #bc203d;
    --oc-red-ink: #b8203e;
    --oc-soft: #fdf0f2;
    --oc-hero: #f9e9ec;
    --oc-hero-line: #f2dce2;
    --oc-hero-ink: #75616b;
    --oc-bg: #f5f6f8;
    --oc-paper: #ffffff;
    --oc-paper-2: #f8f9fb;
    --oc-ink: #23252d;
    --oc-ink-2: #3d404a;
    --oc-muted: #6c707b;
    --oc-faint: #9a9ea8;
    --oc-line: #e6e8ed;
    --oc-line-2: #eff1f4;
    --oc-shadow: 0 12px 28px rgba(21, 24, 35, .07);
    --oc-w: 1320px;
    --oc-logo-ink: #222630;

    /* 기존 comu 컴포넌트가 쓰는 변수를 온카 색으로 */
    --cm-bg: var(--oc-bg);
    --cm-panel: var(--oc-paper);
    --cm-panel-2: var(--oc-paper-2);
    --cm-ink: var(--oc-ink);
    --cm-ink-2: var(--oc-ink-2);
    --cm-muted: var(--oc-muted);
    --cm-faint: var(--oc-faint);
    --cm-line: var(--oc-line);
    --cm-line-2: var(--oc-line-2);
    --cm-accent: var(--oc-red);
    --cm-accent-d: var(--oc-red-d);
    --cm-accent-bg: var(--oc-soft);
    --cm-danger: #e5383b;
    --cm-danger-d: #c92a2d;
    --cm-danger-bg: #fdecec;
    --cm-radius: 14px;
    --cm-radius-s: 8px;
    --cm-shadow: none;
    --cm-shadow-h: var(--oc-shadow);
    color-scheme: light;
}

/* 어두운 화면 (스크립트가 꺼진 경우에도 기기 설정을 따르도록 미디어쿼리도 둔다) */
:root[data-theme="dark"] {
    --oc-red: #ef4a64;
    --oc-red-d: #ff6a82;
    --oc-red-ink: #ff869c;
    --oc-soft: #3a2029;
    --oc-hero: #33212a;
    --oc-hero-line: #52303b;
    --oc-hero-ink: #d6bbc4;
    --oc-bg: #15171d;
    --oc-paper: #1f2128;
    --oc-paper-2: #262932;
    --oc-ink: #e7e8ee;
    --oc-ink-2: #c9cbd4;
    --oc-muted: #a3a6b1;
    --oc-faint: #7d808b;
    --oc-line: #33363f;
    --oc-line-2: #2a2d35;
    --oc-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    --oc-logo-ink: #f8f8fa;
    --cm-danger-bg: #3a2023;
    --cm-warn-bg: #3a3020;
    --cm-info-bg: #1f2b40;
    --cm-gold-bg: #3a3220;
    --cm-accent-bg: var(--oc-soft);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --oc-red: #ef4a64; --oc-red-d: #ff6a82; --oc-red-ink: #ff869c; --oc-soft: #3a2029;
        --oc-hero: #33212a; --oc-hero-line: #52303b; --oc-hero-ink: #d6bbc4;
        --oc-bg: #15171d; --oc-paper: #1f2128; --oc-paper-2: #262932;
        --oc-ink: #e7e8ee; --oc-ink-2: #c9cbd4; --oc-muted: #a3a6b1; --oc-faint: #7d808b;
        --oc-line: #33363f; --oc-line-2: #2a2d35; --cm-danger-bg: #3a2023; --oc-logo-ink: #f8f8fa;
        color-scheme: dark;
    }
}

/* ---------- 바탕 ---------- */
html {background: var(--oc-bg)}
body {background: var(--oc-bg); color: var(--oc-ink); font-size: 14px; line-height: 1.65; letter-spacing: -.025em}
a:hover {color: var(--oc-red)}
::selection {background: #ffd5dd; color: #611225}
:root[data-theme="dark"] ::selection {background: #6b2232; color: #fff}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {outline: 3px solid var(--oc-red); outline-offset: 3px}
.oc-wrap {max-width: var(--oc-w); margin: 0 auto; padding: 0 20px}
.oc-skip {position: fixed; left: 12px; top: -80px; z-index: 3000; padding: 12px 20px; background: var(--oc-ink); color: var(--oc-paper)}
.oc-skip:focus {top: 12px}
.oc-eyebrow {margin: 0 0 14px; color: var(--oc-red); font-size: 10px; font-weight: 800; letter-spacing: .14em}
.oc-eyebrow > span {display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--oc-red); vertical-align: middle}
.oc-empty {padding: 18px 0; color: var(--oc-muted); font-size: 13px}

/* ---------- 머리 ---------- */
.oc-header {position: relative; z-index: 60; background: var(--oc-paper); border-top: 4px solid var(--oc-red)}
.oc-header-inner {display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 108px}
.oc-brand {display: flex; align-items: center; gap: 18px; flex-shrink: 0}
/* 로고 : 마크는 늘 빨강, 글자는 라이트 #222630 / 다크 #f8f8fa */
.oc-logo-link {display: inline-flex; color: var(--oc-logo-ink)}
.oc-logo-link:hover {color: var(--oc-logo-ink)}
.oc-logo {display: inline-flex; align-items: center; gap: 10px; color: var(--oc-logo-ink); white-space: nowrap}
.oc-logo-mark {flex-shrink: 0; width: 40px; height: 40px}
.oc-logo-word {font-size: 29px; font-weight: 900; letter-spacing: -.06em; line-height: 1; color: var(--oc-logo-ink)}
.oc-logo-md .oc-logo-mark {width: 32px; height: 32px}
.oc-logo-md .oc-logo-word {font-size: 23px}
/* 화면 모드 버튼 : 라이트에선 '다크', 다크에선 '라이트' 를 보여 준다 */
.oc-mode-toggle {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-paper); color: var(--oc-ink); font-size: 13px; font-weight: 600; cursor: pointer}
.oc-mode-toggle:hover {border-color: var(--oc-red); color: var(--oc-red)}
.oc-mode-toggle .fa {font-size: 16px}
.oc-mode-to-light {display: none}
:root[data-theme="dark"] .oc-mode-to-dark {display: none}
:root[data-theme="dark"] .oc-mode-to-light {display: inline}
.oc-mode-toggle.is-floating {position: fixed; right: 16px; top: 16px; z-index: 1200; box-shadow: var(--oc-shadow)}
.oc-brand > span {max-width: 100px; color: var(--oc-muted); font-size: 11px; line-height: 1.5; word-break: keep-all}
.oc-search {display: flex; align-items: center; width: 440px; height: 49px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-bg)}
.oc-search input {flex: 1; min-width: 0; height: 100%; padding: 0 18px; border: 0; background: transparent; color: var(--oc-ink); font-size: 14px}
.oc-search input:focus {outline: 0; box-shadow: none !important; border: 0 !important}
.oc-search input::placeholder {color: var(--oc-faint)}
.oc-search button {width: 52px; height: 100%; border: 0; background: transparent; color: var(--oc-red); font-size: 18px}
.oc-search:focus-within {border-color: color-mix(in srgb, var(--oc-red) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-red) 10%, transparent)}
.oc-account {display: flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 600; white-space: nowrap}
.oc-account > a {display: inline-flex; align-items: center; min-height: 44px}
.oc-account-action {padding: 0 16px; border: 1px solid var(--oc-line); border-radius: 8px}
.oc-account-action span {padding-left: 12px; color: var(--oc-red)}

.oc-nav {border-top: 1px solid var(--oc-line); border-bottom: 1px solid var(--oc-line); background: var(--oc-paper)}
.oc-nav-inner {display: flex; align-items: center; gap: 24px; min-height: 58px}
.oc-home {padding-right: 20px; border-right: 1px solid var(--oc-line); color: var(--oc-red); font-size: 20px; line-height: 1}
.oc-menu {display: flex; align-items: stretch; gap: 26px; flex: 1; margin: 0; padding: 0; list-style: none}
.oc-menu > li > a, .oc-menu > li > details > summary {display: block; padding: 17px 0; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer}
.oc-menu > li > a[aria-current], .oc-menu > li > details[data-active] > summary {color: var(--oc-red); box-shadow: inset 0 -2px var(--oc-red)}
.oc-menu details {position: relative}
.oc-menu summary {list-style: none}
.oc-menu-ico {display: inline-block; margin-right: 6px; font-size: 15px; line-height: 1; vertical-align: -1px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif}
.oc-menu details ul .oc-menu-ico {font-size: 14px}
.oc-menu summary::-webkit-details-marker {display: none}
.oc-menu summary:after {content: "⌄"; margin-left: 7px; color: var(--oc-muted); font-size: 12px}
.oc-menu details[open] > summary {color: var(--oc-red)}
.oc-menu details > ul {position: absolute; top: 100%; left: -16px; z-index: 1050; min-width: 190px; margin: 0; padding: 10px; list-style: none; background: var(--oc-paper); border: 1px solid var(--oc-line); border-radius: 12px; box-shadow: var(--oc-shadow)}
.oc-menu details ul a {display: block; padding: 9px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap}
.oc-menu details ul a:hover, .oc-menu details ul a[aria-current] {background: var(--oc-soft); color: var(--oc-red)}
.oc-contact {color: var(--oc-muted); font-size: 12px; white-space: nowrap}
.oc-contact span {margin-left: 6px}

/* ---------- 2단 배치 ---------- */
.oc-main {padding: 28px 0 52px}
.oc-layout {display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px 32px; align-items: start}
.oc-content {min-width: 0}
.oc-sidebar {min-width: 0}

/* ---------- 메인 : 히어로 ---------- */
.oc-hero {position: relative; display: flex; align-items: center; min-height: 316px; margin-bottom: 18px; padding: 34px 38px; border: 1px solid var(--oc-hero-line); border-radius: 20px; background: var(--oc-hero); overflow: hidden}
.oc-hero-copy {position: relative; z-index: 1; width: 62%}
.oc-hero h2 {margin: 0 0 16px; color: var(--oc-ink); font-size: 36px; font-weight: 800; line-height: 1.3; letter-spacing: -.055em; word-break: keep-all}
.oc-hero h2 em {font-style: normal; color: var(--oc-red-ink)}
.oc-hero-description {margin-bottom: 20px; color: var(--oc-hero-ink); font-size: 13px; line-height: 1.8}
.oc-primary-link {display: inline-flex; align-items: center; gap: 26px; min-height: 44px; padding: 0 17px; border-radius: 8px; background: var(--oc-red); color: #fff !important; font-size: 13px; font-weight: 700}
.oc-primary-link:hover {background: var(--oc-red-d)}
.oc-hero-art {position: absolute; right: 34px; top: 30px; width: 255px; height: 255px}
.oc-art-ring {position: absolute; top: 6px; right: 0; width: 238px; height: 238px; border: 1px solid color-mix(in srgb, var(--oc-red) 30%, transparent); border-radius: 50%}
.oc-art-ring:after {content: ""; position: absolute; inset: 18px; border: 1px dashed color-mix(in srgb, var(--oc-red) 30%, transparent); border-radius: 50%}
.oc-art-card {position: absolute; inset: 24px 20px 27px 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 24px; background: var(--oc-red); color: #fff; transform: rotate(-10deg); box-shadow: 12px 16px 0 color-mix(in srgb, var(--oc-red) 22%, transparent)}
.oc-art-brand {font-size: 116px; font-weight: 900; line-height: 1; letter-spacing: -.08em}
.oc-art-caption {margin-top: 10px; font-size: 8px; font-weight: 700; letter-spacing: .14em}
.oc-art-star {position: absolute; right: 12px; top: 0; color: #fff; font-size: 34px; text-shadow: 0 0 0 var(--oc-red)}
.oc-art-dot {position: absolute; left: 14px; bottom: 22px; width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; background: var(--oc-red)}

/* ---------- 메인 : 바로가기·공지 ---------- */
.oc-shortcuts {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; padding: 20px 0; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper)}
.oc-shortcuts > a {display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 21px}
.oc-shortcuts > a + a {border-left: 1px solid var(--oc-line)}
.oc-shortcut-icon {flex-shrink: 0; width: 40px; color: var(--oc-red); font-size: 23px}
.oc-shortcuts strong {display: block; font-size: 14px}
.oc-shortcuts small {display: block; margin-top: 3px; color: var(--oc-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.oc-shortcuts span {min-width: 0}
.oc-shortcuts b {margin-left: auto; color: var(--oc-faint); font-size: 17px; font-weight: 400}
.oc-announcement {display: flex; align-items: center; gap: 18px; margin-bottom: 31px; padding: 13px 18px; border: 1px solid var(--oc-line); border-radius: 10px; background: var(--oc-paper); font-size: 13px}
.oc-announcement > strong {flex-shrink: 0; color: var(--oc-red); font-size: 10px; letter-spacing: .08em}
.oc-announcement > a:not(.oc-notice-more) {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.oc-notice-more {margin-left: auto; font-size: 19px}

/* ---------- 메인 : 커뮤니티 피드 ---------- */
.oc-section-heading {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 17px}
.oc-section-heading .oc-eyebrow {margin-bottom: 4px; font-size: 9px}
.oc-section-heading h2 {margin: 0; font-size: 23px; font-weight: 800}
.oc-section-heading > span {color: var(--oc-muted); font-size: 12px}
.oc-feed-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
.oc-feed-card {height: 100%; padding: 0 22px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper); overflow: hidden}
.oc-feed-heading {display: flex; align-items: center; justify-content: space-between; padding: 19px 0 15px; border-bottom: 1px solid var(--oc-line)}
.oc-feed-heading h3 {margin: 0; font-size: 16px; font-weight: 750}
.oc-feed-heading > a {color: var(--oc-muted); font-size: 20px; line-height: 1}
.oc-feed-card ul {margin: 0; padding: 7px 0 10px; list-style: none}
.oc-feed-card li > a {display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px 0; font-size: 14px}
.oc-post-title {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.oc-feed-cate {margin-right: 6px; color: var(--oc-red); font-size: 12px; font-style: normal; font-weight: 700}
.oc-feed-cmt {color: var(--oc-red); font-size: 12px; font-weight: 700}
.oc-feed-card time {color: var(--oc-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums}
.oc-new {color: var(--oc-red); font-size: 9px; font-weight: 800}
.oc-feed-card .oc-empty {padding: 22px 0}
.oc-guide {display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 26px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper)}
.oc-guide-mark {flex-shrink: 0; color: var(--oc-red); font-size: 44px; font-weight: 900; letter-spacing: -.08em}
.oc-guide .oc-eyebrow {margin-bottom: 5px; font-size: 8px}
.oc-guide h2 {margin-bottom: 8px; font-size: 17px; font-weight: 750}
.oc-guide p:last-child {max-width: 480px; margin: 0; color: var(--oc-muted); font-size: 12px; line-height: 1.9}
.oc-guide > a {margin-left: auto; color: var(--oc-red); font-size: 12px; font-weight: 700; white-space: nowrap}
.is-index .cm-seo-bottom {margin-top: 48px}

/* ---------- 오른쪽 위젯 ---------- */
.oc-side-card {margin-bottom: 20px; padding: 20px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper); overflow: hidden}
.oc-side-heading {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--oc-line)}
.oc-side-heading h2 {margin: 0; font-size: 14px; font-weight: 750}
.oc-side-heading > a, .oc-side-heading > .fa {color: var(--oc-muted); font-size: 16px}
.oc-live-dot {width: 6px; height: 6px; border-radius: 50%; background: var(--oc-red)}
.oc-num-list {margin: 0; padding: 0; list-style: none}
.oc-num-list a {display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px}
.oc-num {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px; background: var(--oc-red); color: #fff; font-size: 11px; font-weight: 700}
.oc-num-title {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.oc-cmt-list {margin: 0; padding: 0; list-style: none}
.oc-cmt-list li + li {border-top: 1px solid var(--oc-line-2)}
.oc-cmt-list a {display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 12px}
.oc-cmt-text {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.oc-cmt-name {flex-shrink: 0; color: var(--oc-muted)}
.oc-rank-tabs {display: flex; gap: 5px; margin: 0 0 12px; padding: 4px; border-radius: 9px; background: var(--oc-bg)}
.oc-rank-tabs button {flex: 1; min-height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--oc-muted); font-size: 12px}
.oc-rank-tabs button[aria-selected="true"] {background: var(--oc-paper); color: var(--oc-red); font-weight: 700; box-shadow: 0 1px 4px rgba(21, 24, 35, .06)}
.oc-rank [hidden] {display: none !important}
.oc-rank-list {margin: 0; padding: 0; list-style: none}
.oc-rank-list a {display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 8px 0; font-size: 12px}
.oc-rank-number {flex-shrink: 0; width: 20px; color: var(--oc-red); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums}
.oc-rank-word {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.oc-rank-change {color: var(--oc-muted); font-size: 10px; white-space: nowrap}
.oc-rank-caption {margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--oc-line); color: var(--oc-muted); font-size: 10px}
.oc-scam-search {display: flex; gap: 6px}
.oc-scam-search input {flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg); color: var(--oc-ink); font-size: 13px}
.oc-scam-search button {padding: 0 14px; border: 0; border-radius: 8px; background: var(--oc-ink); color: var(--oc-paper); font-size: 13px; font-weight: 700}

/* 로그인 카드 (outlogin comu 스킨) */
.oc-login-card {padding: 26px 20px 23px; border-top: 3px solid var(--oc-red)}
.oc-login-card .cm-widget {margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none}
.oc-login-card .cm-w-tit {font-size: 17px; font-weight: 750}
.oc-login-card .cm-w-tit .fa {display: none}
.oc-login-card .cm-ol-join {color: var(--oc-red)}
.oc-login-card .cm-ol-input {height: 44px; border-radius: 8px; background: var(--oc-bg); border-color: var(--oc-line); color: var(--oc-ink); font-size: 13px}
.oc-login-card .cm-btn-primary {height: 44px; border-radius: 8px; background: var(--oc-red); color: #fff; font-weight: 700}
.oc-login-card .cm-btn-primary:hover {background: var(--oc-red-d)}
.oc-login-card .cm-ol-opt {color: var(--oc-muted); font-size: 12px}

/* ---------- 출석체크 (attendance.php) ---------- */
.oc-att-widget p {margin: 0 0 12px; color: var(--oc-muted); font-size: 13px}
.oc-att-widget p b {color: var(--oc-ink)}
.oc-att-widget-btn {display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; background: var(--oc-red); color: #fff !important; font-size: 13px; font-weight: 700}
.oc-att-widget-btn:hover {background: var(--oc-red-d)}
.oc-att-widget-btn.is-done {background: var(--oc-soft); color: var(--oc-red) !important}
.oc-att {display: flex; flex-direction: column; gap: 20px}
.oc-att-flash {margin: 0; padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 600}
.oc-att-flash.is-ok {border: 1px solid color-mix(in srgb, #10b981 40%, transparent); background: color-mix(in srgb, #10b981 10%, var(--oc-paper)); color: var(--oc-ink)}
.oc-att-flash.is-err {border: 1px solid var(--oc-hero-line); background: var(--oc-soft); color: var(--oc-red)}
.oc-att-hero {display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 36px; border: 1px solid var(--oc-hero-line); border-radius: 20px; background: var(--oc-hero)}
.oc-att-hero h2 {margin: 0 0 16px; color: var(--oc-ink); font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -.05em}
.oc-att-hero h2 em {font-style: normal; color: var(--oc-red-ink)}
.oc-att-note {margin: 0 0 16px; color: var(--oc-hero-ink); font-size: 14px}
.oc-att-done {display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--oc-paper); color: var(--oc-ink); font-size: 14px}
.oc-att-done .fa {color: var(--oc-red); font-size: 18px}
.oc-att-done b {color: var(--oc-red)}
.oc-att-form {display: flex; gap: 8px; max-width: 520px}
.oc-att-form input {flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--oc-hero-line); border-radius: 10px; background: var(--oc-paper); color: var(--oc-ink); font-size: 14px}
.oc-att-form input:focus {outline: 0; border-color: var(--oc-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-red) 12%, transparent)}
.oc-att-form button {flex-shrink: 0; height: 50px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--oc-red); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer}
.oc-att-form button:hover {background: var(--oc-red-d)}
.oc-att-me {display: grid; grid-template-columns: repeat(3, 110px); gap: 10px; flex-shrink: 0; margin: 0}
.oc-att-me div {padding: 16px 12px; border-radius: 14px; background: var(--oc-paper); text-align: center}
.oc-att-me dt {color: var(--oc-muted); font-size: 12px}
.oc-att-me dd {margin: 6px 0 0; color: var(--oc-ink); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums}
.oc-att-me small {margin-left: 2px; color: var(--oc-muted); font-size: 12px; font-weight: 600}
.oc-att-tit {margin: 0 0 14px; font-size: 18px; font-weight: 800}
.oc-att-tit small {margin-left: 6px; color: var(--oc-red); font-size: 14px}
.oc-att-points, .oc-att-cal, .oc-att-streak, .oc-att-list {padding: 22px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper)}
.oc-att-point-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; padding: 0; list-style: none}
.oc-att-point-grid.is-bonus {grid-template-columns: repeat(3, minmax(0, 1fr))}
.oc-att-point-grid li {display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-bg)}
.oc-att-point-grid span {color: var(--oc-muted); font-size: 12px; font-weight: 600}
.oc-att-point-grid b {color: var(--oc-ink); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums}
.oc-att-point-grid li.is-gold {border-color: #f2c94c; background: color-mix(in srgb, #f2c94c 14%, var(--oc-paper))}
.oc-att-point-grid li.is-silver {border-color: #b8c0cc; background: color-mix(in srgb, #b8c0cc 16%, var(--oc-paper))}
.oc-att-point-grid li.is-bronze {border-color: #d79b6a; background: color-mix(in srgb, #d79b6a 14%, var(--oc-paper))}
.oc-att-point-grid.is-bonus li {border-color: var(--oc-hero-line); background: var(--oc-soft)}
.oc-att-point-grid.is-bonus b {color: var(--oc-red)}
.oc-att-help {margin: 6px 0 0; color: var(--oc-muted); font-size: 12px; line-height: 1.7}
.oc-att-grid {display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px}
.oc-att-cal-hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px}
.oc-att-cal-hd h2 {margin: 0; font-size: 16px; font-weight: 800}
.oc-att-cal-hd a, .oc-att-cal-hd span {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--oc-line); border-radius: 8px; font-size: 18px}
.oc-att-cal-hd span {border-color: transparent}
.oc-att-cal table {width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed}
.oc-att-cal th {padding: 4px 0; color: var(--oc-muted); font-size: 12px; font-weight: 600}
.oc-att-cal th.is-sun {color: var(--oc-red)}
.oc-att-cal th.is-sat {color: #3b82f6}
.oc-att-cal td {position: relative; height: 46px; border-radius: 8px; background: var(--oc-bg); vertical-align: top; text-align: left}
.oc-att-cal td:empty {background: transparent}
.oc-att-cal td span {display: block; padding: 5px 7px; color: var(--oc-muted); font-size: 12px}
.oc-att-cal td.is-on {background: var(--oc-red)}
.oc-att-cal td.is-on span {color: #fff; font-weight: 700}
.oc-att-cal td.is-on .fa {position: absolute; right: 7px; bottom: 6px; color: #fff; font-size: 13px}
.oc-att-cal td.is-today {box-shadow: inset 0 0 0 2px var(--oc-red)}
.oc-att-streak ol {margin: 0; padding: 0; list-style: none}
.oc-att-streak li {display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--oc-line-2); font-size: 13px}
.oc-att-streak li:last-child {border-bottom: 0}
.oc-att-streak .nick {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.oc-att-streak b {color: var(--oc-red); font-variant-numeric: tabular-nums}
.oc-att-list-hd {display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px}
.oc-att-list-hd .oc-att-tit {margin: 0}
.oc-att-list-hd nav {display: flex; gap: 6px}
.oc-att-list-hd nav a {display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--oc-line); border-radius: 8px; font-size: 12px}
.oc-att-table {width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px}
.oc-att-table th {padding: 10px 8px; border-top: 1px solid var(--oc-line); border-bottom: 1px solid var(--oc-line); background: var(--oc-bg); color: var(--oc-muted); font-size: 12px; font-weight: 600; text-align: left}
.oc-att-table td {padding: 11px 8px; border-bottom: 1px solid var(--oc-line-2); vertical-align: middle}
.oc-att-table tr.is-me td {background: var(--oc-soft)}
.oc-att-table .memo {color: var(--oc-ink-2); word-break: break-all}
.oc-att-table .nick {font-weight: 700; white-space: nowrap}
.oc-att-table .pt {color: var(--oc-red); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums}
.oc-att-table .pt em {display: block; color: var(--oc-muted); font-size: 11px; font-style: normal; font-weight: 600}
.oc-att-table .time {color: var(--oc-muted); white-space: nowrap; font-variant-numeric: tabular-nums}
.oc-att-rank {display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--oc-bg); font-weight: 800; font-variant-numeric: tabular-nums}
.oc-att-rank.r1 {background: #f2c94c; color: #3a2a00}
.oc-att-rank.r2 {background: #c9d0da; color: #24292f}
.oc-att-rank.r3 {background: #d79b6a; color: #3a1d06}
.oc-att-empty {padding: 40px 0; text-align: center}
@media (max-width: 991px) {
    .oc-att-hero {flex-direction: column; align-items: stretch}
    .oc-att-me {grid-template-columns: repeat(3, minmax(0, 1fr))}
    .oc-att-grid {grid-template-columns: minmax(0, 1fr)}
}
@media (max-width: 767px) {
    .oc-att-hero {padding: 24px 20px; border-radius: 16px}
    .oc-att-hero h2 {font-size: 22px}
    .oc-att-form {flex-direction: column}
    .oc-att-form button {width: 100%}
    .oc-att-me dd {font-size: 20px}
    .oc-att-points, .oc-att-cal, .oc-att-streak, .oc-att-list {padding: 16px}
    .oc-att-point-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .oc-att-point-grid.is-bonus {grid-template-columns: repeat(3, minmax(0, 1fr))}
    .oc-att-point-grid li {padding: 12px}
    .oc-att-point-grid b {font-size: 16px}
    .oc-att-cal td {height: 40px}
    .oc-att-table thead {display: none}
    .oc-att-table, .oc-att-table tbody, .oc-att-table tr, .oc-att-table td {display: block; width: 100%}
    .oc-att-table tr {display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--oc-line-2)}
    .oc-att-table td {padding: 0; border: 0}
    .oc-att-table td:nth-child(1) {grid-row: 1 / 3}
    .oc-att-table td.memo {grid-column: 2 / 4; font-size: 12px}
    .oc-att-table td:nth-child(4) {display: none}
    .oc-att-table td.time {display: none}
}

/* ---------- 바닥 ---------- */
.oc-footer {padding: 35px 0 28px; border-top: 1px solid var(--oc-line); background: var(--oc-paper)}
.oc-footer-top {display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 27px}
.oc-footer-top p {margin: 12px 0 0; color: var(--oc-muted); font-size: 12px}
.oc-footer-top nav {display: flex; flex-wrap: wrap; gap: 23px; font-size: 13px}
.oc-footer-bottom {display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--oc-line); color: var(--oc-muted); font-size: 11px; line-height: 1.9}
.oc-footer-bottom p {flex: 1; margin: 0}
.oc-theme-control {display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--oc-line); border-radius: 10px; background: var(--oc-bg)}
.oc-theme-control button {display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--oc-muted); font-size: 12px}
.oc-theme-control button[aria-pressed="true"] {background: var(--oc-ink); color: var(--oc-paper); font-weight: 700}
.oc-top {display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1px solid var(--oc-line); border-radius: 8px; color: var(--oc-ink); font-size: 18px}
#top_btn.oc-top {position: static; width: auto; height: auto; background: transparent; box-shadow: none}
.oc-mobile-dock {display: none}

/* ---------- 하위 페이지 머리 (게시판 제목) ---------- */
.oc-content .cm-phead {margin: 0 0 20px; padding: 0; border: 0; background: transparent; box-shadow: none}
.oc-content .cm-phead-row {padding: 0; align-items: flex-end; justify-content: space-between}
.oc-content .cm-phead-tit {font-size: 26px; font-weight: 800; letter-spacing: -.045em}
.oc-content .cm-phead-tit:before {content: "ONCA COMMUNITY"; display: block; margin-bottom: 4px; color: var(--oc-red); font-size: 10px; font-weight: 800; letter-spacing: .14em}
.oc-content .cm-crumb {color: var(--oc-muted); font-size: 12px}
.oc-content .cm-subtabs {margin: 16px 0 0; gap: 6px; border-top: 0; flex-wrap: wrap}
.oc-content .cm-subtabs a {padding: 8px 14px; border: 1px solid var(--oc-line); border-radius: 999px; background: var(--oc-paper); font-size: 13px}
.oc-content .cm-subtabs li.on a {border-color: var(--oc-red); color: var(--oc-red)}
.oc-content .cm-subtabs li.on a:after {display: none}

/* 보증업체 : 분홍 제목 상자 */
.oc-content:has(.cm-bo-guarantee) .cm-phead {position: relative; margin-bottom: 22px; padding: 32px 36px; border: 1px solid var(--oc-hero-line); border-radius: 20px; background: var(--oc-hero); overflow: hidden}
.oc-content:has(.cm-bo-guarantee) .cm-phead-tit {font-size: 32px; line-height: 1.35}
.oc-content:has(.cm-bo-guarantee) .cm-phead-tit:before {content: "VERIFIED PARTNERS"; margin-bottom: 12px}
.oc-content:has(.cm-bo-guarantee) .cm-phead:after {content: ""; position: absolute; right: -35px; top: -55px; width: 170px; height: 170px; border: 24px solid color-mix(in srgb, var(--oc-red) 5%, transparent); border-radius: 50%; pointer-events: none}

/* ---------- 게시판 공통 카드 ---------- */
.oc-content .cm-bo, .oc-content .cm-write, .oc-content .mz {padding: 22px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper)}
.oc-content #bo_v {padding-bottom: 14px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper); box-shadow: none}
.oc-content .cm-bo-guarantee {padding: 0; border: 0; background: transparent}
.oc-content .cm-btn-primary {background: var(--oc-red); color: #fff}
.oc-content .cm-btn-primary:hover {background: var(--oc-red-d); color: #fff}
.oc-content .cm-btn {border-radius: 8px; min-height: 40px}
.oc-content .cm-ibtn {width: 40px; height: 40px; border-radius: 10px; background: var(--oc-paper); color: var(--oc-ink-2)}
.oc-content .cm-ibtn:hover {border-color: var(--oc-red); color: var(--oc-red)}
.cm-dropdown {background: var(--oc-paper) !important; border-color: var(--oc-line) !important; box-shadow: var(--oc-shadow) !important}
.cm-dropdown a, .cm-dropdown button {color: var(--oc-ink) !important}
.cm-chip {background: var(--oc-soft); color: var(--oc-red)}
a.cm-chip:hover {background: var(--oc-red); color: #fff}
.cm-badge-notice {background: var(--oc-red); color: #fff}
.cm-cmt {color: var(--oc-red)}
.cm-new {background: var(--oc-red); color: #fff}

/* 분류 탭 */
.oc-content .cm-cate {margin-bottom: 14px}
.oc-content .cm-cate ul {display: flex; flex-wrap: wrap; gap: 6px}
.oc-content .cm-cate a {display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--oc-line); border-radius: 999px; background: var(--oc-paper); color: var(--oc-ink-2); font-size: 13px}
.oc-content .cm-cate #bo_cate_on, .oc-content .cm-cate a:hover {border-color: var(--oc-red); background: var(--oc-soft); color: var(--oc-red)}

/* 목록 도구 줄 */
.oc-content .cm-bo-bar {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px}
.oc-content .cm-bo-total {color: var(--oc-muted); font-size: 12px}
.oc-content .cm-bo-total b {color: var(--oc-ink)}

/* 목록 (번호·제목·글쓴이·날짜·조회) */
.oc-content .cm-rows {border-top: 1px solid var(--oc-line); border-bottom: 1px solid var(--oc-line); border-left: 0; border-right: 0; border-radius: 0; background: transparent; box-shadow: none}
.oc-content .cm-rows-hd {background: var(--oc-bg); color: var(--oc-muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--oc-line)}
.oc-content .cm-row {border-bottom: 1px solid var(--oc-line-2); background: transparent}
.oc-content .cm-row:last-of-type {border-bottom: 0}
.oc-content .cm-row:hover {background: var(--oc-paper-2)}
.oc-content .cm-row.is-notice {background: var(--oc-soft)}
.oc-content .cm-row.is-notice .cm-row-a {font-weight: 700}
.oc-content .cm-row-a {font-size: 14px}
.oc-content .cm-row .c-num, .oc-content .cm-row .c-date, .oc-content .cm-row .c-hit {color: var(--oc-muted); font-size: 12px; font-variant-numeric: tabular-nums}

/* 페이지 번호 */
.pg_wrap {float: none; display: flex; justify-content: center; width: 100%; margin: 22px 0 0}
.pg {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px}
.pg_page, .pg_current, .pg_start, .pg_prev, .pg_next, .pg_end {min-width: 36px; height: 36px; line-height: 34px; border: 1px solid var(--oc-line); border-radius: 6px; background-color: var(--oc-paper); color: var(--oc-ink-2); font-size: 13px}
.pg_current {background: var(--oc-red); border-color: var(--oc-red); color: #fff}
.pg_page:hover {border-color: var(--oc-red); color: var(--oc-red); background-color: var(--oc-paper)}
:root[data-theme="dark"] .pg_start, :root[data-theme="dark"] .pg_prev, :root[data-theme="dark"] .pg_next, :root[data-theme="dark"] .pg_end {filter: invert(1) hue-rotate(180deg)}

/* 검색 상자 (게시판) */
.bo_sch_wrap .bo_sch {border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper); color: var(--oc-ink)}
.bo_sch h3 {border-color: var(--oc-line)}
.bo_sch select, .bo_sch .sch_bar {border-color: var(--oc-line); border-radius: 8px; background: var(--oc-bg); color: var(--oc-ink)}
.bo_sch .sch_input {background: transparent; color: var(--oc-ink)}
.bo_sch .sch_btn {color: var(--oc-red)}

/* 먹튀사이트 목록 : 금액·제보자 칸 사이를 띄운다 */
.oc-content .cm-st-row {gap: 14px; border-color: var(--oc-line-2)}
.oc-content .cm-st-row .c-amt {padding-right: 6px}
.oc-content .cm-scam-table {border-color: var(--oc-line); border-radius: 12px; overflow: hidden}

/* ---------- 보증업체 배너 카드 (인증업체 목록) ---------- */
.oc-content .cm-bo-guarantee .cm-guide-strip {margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--oc-line); border-left: 3px solid var(--oc-red); border-radius: 0 10px 10px 0; background: var(--oc-paper); color: var(--oc-ink-2); font-size: 13px}
.oc-content .cm-bo-guarantee .cm-guide-strip .fa {color: var(--oc-red)}
.oc-content .cm-gcards {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px}
.oc-content .cm-gcard {padding: 16px; border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-paper); box-shadow: none}
.oc-content .cm-gcard:hover {transform: none; border-color: var(--oc-red); box-shadow: var(--oc-shadow)}
.oc-content .cm-gcard-img {border-radius: 9px; background: var(--oc-bg); aspect-ratio: 2 / 1}
.oc-content .cm-gcard-img img {object-fit: contain}
.oc-content .cm-gcard:hover .cm-gcard-img img {transform: none}
.oc-content .cm-gcard-ph {color: var(--oc-red); background: var(--oc-soft)}
.oc-content .cm-gcard-badge {background: var(--oc-red); color: #fff}
.oc-content .cm-gcard-body {padding: 18px 0 0}
.oc-content .cm-gcard-name {font-size: 18px; font-weight: 800}
.oc-content .cm-gcard-name .fa {color: var(--oc-red)}
.oc-content .cm-gcard-meta {flex-direction: column; gap: 0; margin-top: 10px}
.oc-content .cm-gcard-meta div {justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--oc-line-2); font-size: 13px}
.oc-content .cm-gcard-meta dt {color: var(--oc-muted)}
.oc-content .cm-gcard-meta dd.is-gold {color: var(--oc-red) !important; font-weight: 750; font-variant-numeric: tabular-nums}
.oc-content .cm-gcard-meta .cm-copy {border: 0; background: transparent; color: var(--oc-ink); font-weight: 700}
.oc-content .cm-gcard-act {gap: 8px; margin-top: 14px; padding: 16px 0 0; border-top: 1px solid var(--oc-line)}
.oc-content .cm-gcard-act .cm-btn {min-height: 44px; border-radius: 8px; font-size: 13px; font-weight: 700}
.oc-content .cm-gcard-act .cm-btn-line {background: var(--oc-paper); border-color: var(--oc-line); color: var(--oc-ink)}
.oc-content .cm-gcard-act .cm-btn-line:hover {background: var(--oc-soft); border-color: var(--oc-red); color: var(--oc-red)}
.oc-content .cm-gcard-act .cm-btn-safe {background: var(--oc-red); border-color: var(--oc-red); color: #fff}
.oc-content .cm-gcard-act .cm-btn-safe:hover {background: var(--oc-red-d)}

/* ---------- 글 보기 ---------- */
.oc-content #bo_v_title {font-size: 24px; font-weight: 800; line-height: 1.4; letter-spacing: -.04em; color: var(--oc-ink)}
.oc-content .cm-view-info {margin-top: 14px; color: var(--oc-muted); font-size: 13px}
.oc-content .cm-view-name {color: var(--oc-ink); font-weight: 700}
.oc-content .cm-view-meta {color: var(--oc-muted)}
.oc-content .cm-view-body {color: var(--oc-ink); font-size: 15px; line-height: 1.85}
.oc-content .cm-cmts .cmt_contents {color: var(--oc-ink)}
.oc-content #bo_v_con a {color: var(--oc-red); text-decoration: underline}
.oc-content .cm-infocard {margin-top: 18px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-bg)}
.oc-content .cm-view-scam .cm-infocard {background: var(--oc-soft); border-color: var(--oc-hero-line)}
.oc-content .cm-view-guarantee .cm-infocard {background: var(--oc-bg); border-color: var(--oc-line)}
.oc-content .cm-vote a, .oc-content .cm-vote > span {border-color: var(--oc-line); background: var(--oc-paper); color: var(--oc-ink-2)}
.oc-content .cm-vote a:hover {border-color: var(--oc-red); color: var(--oc-red)}
.oc-content .cm-attach {border-color: var(--oc-line); background: var(--oc-bg)}
.oc-content .cm-prevnext {margin-top: 18px; border-top: 1px solid var(--oc-line); border-bottom: 1px solid var(--oc-line)}
.oc-content .cm-prevnext li {border-color: var(--oc-line-2)}
.oc-content .cm-prevnext .nb_tit {color: var(--oc-muted)}

/* 댓글 */
.oc-content .cm-cmt-hd {color: var(--oc-ink)}
.oc-content .cm-cmt-hd .total b {color: var(--oc-red)}
.oc-content .cm-cmts article, .oc-content .cm-cmts > li {border-color: var(--oc-line-2)}
.oc-content .cm-cmt-w {border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-bg)}
.oc-content .cm-cmt-w textarea {border-color: var(--oc-line); border-radius: 8px; background: var(--oc-paper); color: var(--oc-ink)}

/* ---------- 글쓰기 ---------- */
.oc-content .cm-write .cm-label {color: var(--oc-ink); font-size: 13px; font-weight: 700}
.oc-content .cm-write .req {color: var(--oc-red)}
.oc-content .cm-write .cm-write-notice {border: 1px solid var(--oc-line); border-left: 3px solid var(--oc-red); border-radius: 0 10px 10px 0; background: var(--oc-bg)}
.frm_input, .oc-content .cm-write input[type="text"], .oc-content .cm-write input[type="password"], .oc-content .cm-write input[type="email"], .oc-content .cm-write input[type="url"], .oc-content .cm-write select, .oc-content .cm-write textarea {border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg); color: var(--oc-ink)}
.frm_input:focus, .oc-content .cm-write textarea:focus, .oc-content .cm-write select:focus {border-color: color-mix(in srgb, var(--oc-red) 50%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-red) 10%, transparent) !important; outline: 0}
.oc-content .cm-write .cm-file {border-color: var(--oc-line); background: var(--oc-bg)}
.oc-content .cm-write-btns {display: flex; justify-content: center; gap: 8px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--oc-line)}
.oc-content .cm-write-btns .cm-btn {min-width: 120px; min-height: 48px; font-size: 14px; font-weight: 700}
.btn_submit {background: var(--oc-red); color: #fff}
.btn_submit:hover {background: var(--oc-red-d)}

/* 체크박스 (그누보드 chk_box) */
.chk_box input[type="checkbox"] + label span {border-color: var(--oc-line); background-color: var(--oc-paper)}
.chk_box input[type="checkbox"]:checked + label span {border-color: var(--oc-red); background-color: var(--oc-red)}

/* ---------- 전체메뉴(모바일) ---------- */
.cm-drawer-hd, .cm-drawer-me {background: var(--oc-paper); color: var(--oc-ink); border-bottom: 1px solid var(--oc-line)}
.cm-drawer-hd .oc-logo-md .oc-logo-word {font-size: 20px}
.cm-drawer-close {background: var(--oc-bg); color: var(--oc-ink)}
.cm-drawer-me b {color: var(--oc-ink)}
.cm-drawer-me .cm-pt {background: var(--oc-soft); color: var(--oc-red)}
.cm-drawer-btns a {background: var(--oc-bg); color: var(--oc-ink-2)}
.cm-drawer-btns a.is-primary {background: var(--oc-red); color: #fff}

/* ---------- 회원 화면 (로그인·가입·정보수정 등 mz 스킨) : 초록 → 포인트 색 ---------- */
.mz {--mz-g: var(--oc-red); --mz-gd: var(--oc-red-d); --mz-gbg: var(--oc-soft)}
.mz .mz-input {background: var(--oc-bg); border-color: var(--oc-line); color: var(--oc-ink)}
.mz .mz-input:focus {box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-red) 14%, transparent) !important}
.mz-auth {background: var(--oc-bg)}
.mz-auth-box {border: 1px solid var(--oc-line); border-top: 4px solid var(--oc-red); box-shadow: var(--oc-shadow)}
.mz-auth-brand {background: var(--oc-hero); color: var(--oc-ink); border-right: 1px solid var(--oc-hero-line)}
.mz-auth-brand:after {border-color: color-mix(in srgb, var(--oc-red) 7%, transparent)}
.mz-auth-copy small {color: var(--oc-hero-ink)}
.mz-auth-copy em {color: var(--oc-red-ink)}
.mz-auth-points .fa {background: var(--oc-paper); color: var(--oc-red)}
.mz-point-sum {background: var(--oc-red)}

/* ---------- 어두운 화면 : 고정색이 남은 부분 ---------- */
:root[data-theme="dark"] img.emoji, :root[data-theme="dark"] .cm-gcard-img img {filter: none}
:root[data-theme="dark"] .cm-row:hover, :root[data-theme="dark"] .cm-wz-item:hover {background: var(--oc-paper-2)}
:root[data-theme="dark"] .cm-bo-sch-on {background: var(--cm-gold-bg); color: #f5c76b}
:root[data-theme="dark"] .mz-note.is-warn {background: var(--cm-warn-bg); color: #f5c76b}
:root[data-theme="dark"] .mz-chip.is-red {background: var(--cm-danger-bg)}
:root[data-theme="dark"] .mz-chip.is-blue {background: var(--cm-info-bg)}
:root[data-theme="dark"] .mz-memos > li.is-new {background: var(--oc-paper-2)}
:root[data-theme="dark"] .mz-file {border-color: var(--oc-line); background: var(--oc-paper-2)}
:root[data-theme="dark"] .mz .sch_word, :root[data-theme="dark"] .sch_word {background: #6b5a14; color: #fff}
:root[data-theme="dark"] .mz-btn-line:hover {background: var(--oc-paper-2)}
:root[data-theme="dark"] .copymove_currentbg {background: var(--oc-paper-2)}
:root[data-theme="dark"] body.mz-pop-body, :root[data-theme="dark"] .mz-auth {background: var(--oc-bg)}
:root[data-theme="dark"] .cm-seo-bottom {--cm-panel: var(--oc-paper)}
:root[data-theme="dark"] .cm-kw.kw-green {--kw-bg: #17302a}
:root[data-theme="dark"] .cm-kw.kw-blue {--kw-bg: #1b2740}
:root[data-theme="dark"] .cm-kw.kw-purple {--kw-bg: #2a2140}
:root[data-theme="dark"] .cm-kw.kw-red {--kw-bg: #3a2023}
:root[data-theme="dark"] .cm-kw.kw-amber {--kw-bg: #352b17}
:root[data-theme="dark"] .cm-kw.kw-teal {--kw-bg: #15302d}
:root[data-theme="dark"] .cm-kw.kw-pink {--kw-bg: #3a1f2d}
:root[data-theme="dark"] .cm-kw-fig img {filter: brightness(.82)}
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {color: var(--oc-ink)}
:root[data-theme="dark"] .cm-select, :root[data-theme="dark"] .mz select.mz-input {background-color: var(--oc-paper)}

/* ---------- 반응형 ---------- */
@media (max-width: 1199px) {
    .oc-brand > span, .oc-contact {display: none}
    .oc-header-inner {gap: 24px}
    .oc-search {width: auto; flex: 1; max-width: 440px}
    .oc-layout {grid-template-columns: minmax(0, 1fr) 280px; gap: 20px 24px}
    .oc-menu {gap: 20px}
    .oc-hero-art {transform: scale(.82); transform-origin: right top}
}
@media (max-width: 991px) {
    .oc-layout {grid-template-columns: minmax(0, 1fr)}
    .oc-sidebar {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px}
    .oc-content .cm-gcards {grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 767px) {
    body {font-size: 13px; padding-bottom: calc(66px + env(safe-area-inset-bottom))}
    .oc-wrap {padding: 0 16px}
    .oc-header-inner {flex-wrap: wrap; min-height: 0; gap: 12px; padding-top: 14px; padding-bottom: 14px}
    .oc-logo-lg .oc-logo-mark {width: 34px; height: 34px}
    .oc-logo-lg .oc-logo-word {font-size: 24px}
    .oc-account .oc-mode-label {display: none}
    .oc-account .oc-mode-toggle {min-height: 40px; padding: 0 10px}
    .oc-account {gap: 10px}
    .oc-account-link {display: none !important}
    .oc-account-action {min-height: 40px !important; padding: 0 12px}
    .oc-search {order: 3; width: 100%; max-width: none; height: 44px}
    .oc-nav-inner {gap: 16px; min-height: 50px}
    .oc-home {padding-right: 14px}
    .oc-menu {gap: 18px; overflow-x: auto; scrollbar-width: none}
    .oc-menu::-webkit-scrollbar {display: none}
    .oc-menu > li > a, .oc-menu > li > details > summary {padding: 14px 0}
    .oc-menu details > ul {position: fixed; top: auto; left: 16px; right: 16px; min-width: 0}
    .oc-main {padding: 18px 0 32px}
    .oc-hero {min-height: 0; padding: 26px 22px 150px; border-radius: 16px}
    .oc-hero-copy {width: 100%}
    .oc-hero h2 {font-size: 27px}
    .oc-hero-art {right: 50%; top: auto; bottom: -96px; transform: translateX(50%) scale(.6); transform-origin: center top}
    .oc-shortcuts {grid-template-columns: minmax(0, 1fr); padding: 6px 0}
    .oc-shortcuts > a {padding: 14px 18px}
    .oc-shortcuts > a + a {border-left: 0; border-top: 1px solid var(--oc-line)}
    .oc-announcement {margin-bottom: 24px}
    .oc-section-heading > span {display: none}
    .oc-feed-grid {grid-template-columns: minmax(0, 1fr); gap: 14px}
    .oc-feed-card {padding: 0 16px}
    .oc-guide {display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 20px}
    .oc-guide-mark {font-size: 30px}
    .oc-guide > a {grid-column: 1 / -1; margin-left: 0}
    .oc-sidebar {display: block}
    .oc-footer {padding: 26px 0 22px}
    .oc-footer-top {flex-direction: column; align-items: flex-start; gap: 16px}
    .oc-footer-top nav {gap: 12px 18px}
    .oc-footer-bottom {flex-wrap: wrap}
    .oc-footer-bottom p {flex-basis: 100%}
    .oc-mobile-dock {position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; justify-content: space-around; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--oc-line); background: var(--oc-paper); box-shadow: 0 -4px 20px rgba(21, 24, 35, .05)}
    .oc-mobile-dock > a, .oc-mobile-dock > button {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 58px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--oc-muted); font-size: 11px}
    .oc-mobile-dock i {font-size: 20px; line-height: 1.2}
    .oc-mobile-dock > a[aria-current] {color: var(--oc-red); font-weight: 700}
    .oc-mobile-dock > a[aria-current]:before {content: ""; position: absolute; top: -9px; width: 22px; height: 2px; border-radius: 2px; background: var(--oc-red)}
    .oc-content .cm-phead-tit {font-size: 23px}
    .oc-content:has(.cm-bo-guarantee) .cm-phead {padding: 25px 22px; border-radius: 16px}
    .oc-content:has(.cm-bo-guarantee) .cm-phead-tit {font-size: 27px}
    .oc-content .cm-gcards {grid-template-columns: minmax(0, 1fr); gap: 16px}
    .oc-content .cm-bo, .oc-content .cm-write, .oc-content .mz {padding: 16px 13px}
    .oc-content .cm-bo-guarantee {padding: 0}
    #top_btn.oc-top {display: none}
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important}
}