@charset "utf-8";

/*!
 * op_tokens.css - Global Design Tokens (CSS Custom Properties)
 * Unified design system tokens for Light and Dark modes.
 */

:root {
    /* Base Surface & Typography */
    --op-bg: #ffffff;
    --op-surface: #ffffff;
    --op-surface-muted: #f8f8f8;
    --op-text: #333333;
    --op-text-muted: #777777;
    --op-text-subtle: #999999;
    --op-border: #dddddd;
    --op-border-light: #eeeeee;
    --op-link: #333333;
    --op-link-hover: crimson;

    /* Modern Typography Tokens */
    --op-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --op-font-mono: "JetBrains Mono", Consolas, Menlo, Monaco, "Courier New", monospace;

    /* Brand & Accent */
    --op-primary: #3dbf62;
    --op-primary-dark: #2f9a4f;
    --op-accent: #ff490f;
    --op-accent-hover: #e03e0a;
    --op-highlight: #ffeb3b;

    /* Topbar & Header */
    --op-topbar-bg: #f8f8f8;
    --op-topbar-border: #dddddd;
    --op-topbar-btn-text: #555555;
    --op-topbar-btn-hover-bg: #e9e9e9;
    --op-navbar-bg: #ffffff;
    --op-navbar-border: #eeeeee;
    --op-navbar-text: #555555;
    --op-affix-bg: rgba(255, 255, 255, 0.95);

    /* PC Main Selector & Box */
    --op-top-selector-bg: #e5e5e5;
    --op-top-selector-border: rgba(0, 0, 0, 0.04);
    --op-top-selector-input-bg: #ffffff;
    --op-top-selector-input-border: #cccccc;
    --op-top-selector-input-text: #333333;
    --op-top-selector-btn-bg: #ffffff;
    --op-top-selector-btn-text: #333333;

    --op-comp-list-bg: #f1f1f1;
    --op-box-bg: #ffffff;
    --op-box-border: #dadcda;
    --op-box-desc-bg: #ffffff;
    --op-box-name: #ff490f;
    --op-box-cat: #000000;
    --op-box-contact: #777777;
    --op-box-addr: #000000;
    --op-box-btn-bg: #ffffff;
    --op-box-btn-border: #d4d4d4;
    --op-box-btn-text: #333333;
    --op-box-thumb-hover-overlay: rgba(255, 255, 255, 0.27);

    /* Side Menu */
    --op-side-bg: #ffffff;
    --op-side-border: #d2dad4;
    --op-side-sub-border: #bad7c2;
    --op-side-text: #333333;
    --op-side-btn-bg: #ffffff;
    --op-side-btn-border: #cccccc;
    --op-side-btn-text: #333333;

    /* Mobile Main */
    --op-m-search-bg: #f8fafc;
    --op-m-search-btn-bg: #3dbf62;
    --op-m-search-btn-border: #3dbf62;
    --op-m-notice-bg: #ffffff;
    --op-m-notice-lbl-bg: #e6f4ea;
    --op-m-notice-lbl-text: #166534;
    --op-m-quick-bg: #ffffff;
    --op-m-quick-border-t: #e2e8f0;
    --op-m-quick-border-b: #e2e8f0;
    --op-m-menu-bg: #f1f5f9;

    /* Board Header */
    --op-board-header-bg: #d1e2d6;
    --op-board-header-title: #000000;
    --op-board-header-badge: #579a6a;

    /* Board Skin Components */
    --op-board-btn-bg: #859c8c;
    --op-board-btn-border: #5f6f64;
    --op-board-btn-hover-bg: #3dbf62;
    --op-board-btn-hover-border: #4fad6a;
    --op-board-row-real: antiquewhite;
    --op-board-row-hide: #e7e7e7;
    --op-board-row-lock: #808080;
    --op-title-tone-wine: #9f1239;
    --op-title-tone-charcoal: #2d3748;
    --op-title-tone-forest: #1e691e;

    /* Footer */
    --op-footer-bg: #2f3542;
    --op-footer-text: #a4b0be;

    /* Sidebar & Outlogin Widgets (Phase 3) */
    --op-partner-btn-blue-bg: #5e8ccb;
    --op-partner-btn-blue-border: #85b4dd;
    --op-partner-btn-orange-bg: #f89e1f;
    --op-partner-btn-orange-border: #ec9415;
    --op-partner-btn-yellow-bg: #ffe500;
    --op-partner-btn-yellow-border: #e8d001;
    --op-partner-btn-yellow-text: #463f01;
    --op-partner-btn-gray-bg: #e7e7e7;
    --op-partner-btn-gray-border: #e0e0e0;
    --op-sidebar-user-grade: #6495ed;

    /* Static Pages & Rank (Phase 4) */
    --op-page-article-title: #0083b9;
    --op-page-table-border-top: #999999;
    --op-page-table-border-bottom: #dddddd;
    --op-rank-border: #dddddd;
    --op-rank-header-bg: #f5f5f5;
    --op-rank-badge-bg: #dddddd;
    --op-rank-badge-color: #403f3f;
}

/* ==========================================================================
   Global Dark Mode Tokens
   ========================================================================== */
html.theme-dark,
html.theme-dark body,
body.theme-dark,
body[data-theme="dark"],
html.theme-dark #thema_wrapper {
    /* Base Surface & Typography */
    --op-bg: #121214;
    --op-surface: #1e1e24;
    --op-surface-muted: #18181d;
    --op-text: #e2e8f0;
    --op-text-muted: #a1a1aa;
    --op-text-subtle: #71717a;
    --op-border: #272730;
    --op-border-light: #22222a;
    --op-link: #93c5fd;
    --op-link-hover: #60a5fa;

    /* Brand & Accent */
    --op-primary: #2563eb;
    --op-primary-dark: #1d4ed8;
    --op-accent: #ff6b4a;
    --op-accent-hover: #f97316;
    --op-highlight: #fde047;

    /* Topbar & Header */
    --op-topbar-bg: #18181d;
    --op-topbar-border: #272730;
    --op-topbar-btn-text: #a1a1aa;
    --op-topbar-btn-hover-bg: #22222a;
    --op-navbar-bg: #18181d;
    --op-navbar-border: #272730;
    --op-navbar-text: #e2e8f0;
    --op-affix-bg: rgba(24, 24, 29, 0.95);

    /* PC Main Selector & Box */
    --op-top-selector-bg: #1e1e24;
    --op-top-selector-border: #2d2d38;
    --op-top-selector-input-bg: #282832;
    --op-top-selector-input-border: #3e3e4c;
    --op-top-selector-input-text: #f1f5f9;
    --op-top-selector-btn-bg: #282832;
    --op-top-selector-btn-text: #d1d5db;

    --op-comp-list-bg: #18181e;
    --op-box-bg: #22222a;
    --op-box-border: #2e2e3a;
    --op-box-desc-bg: #22222a;
    --op-box-name: #ff6b4a;
    --op-box-cat: #94a3b8;
    --op-box-contact: #a1a1aa;
    --op-box-addr: #a1a1aa;
    --op-box-btn-bg: #2c2c36;
    --op-box-btn-border: #3e3e4d;
    --op-box-btn-text: #e2e8f0;
    --op-box-thumb-hover-overlay: rgba(59, 130, 246, 0.28);

    /* Side Menu */
    --op-side-bg: #22222a;
    --op-side-border: #2e2e3a;
    --op-side-sub-border: #2e2e3a;
    --op-side-text: #f1f5f9;
    --op-side-btn-bg: #2c2c36;
    --op-side-btn-border: #3e3e4d;
    --op-side-btn-text: #e2e8f0;

    /* Mobile Main */
    --op-m-search-bg: #1e1e24;
    --op-m-search-btn-bg: #2563eb;
    --op-m-search-btn-border: #2563eb;
    --op-m-notice-bg: #18181d;
    --op-m-notice-lbl-bg: #272730;
    --op-m-notice-lbl-text: #e2e8f0;
    --op-m-quick-bg: #1e1e24;
    --op-m-quick-border-t: #2d2d38;
    --op-m-quick-border-b: #272730;
    --op-m-menu-bg: #272730;

    /* Board Header */
    --op-board-header-bg: #1e1e24;
    --op-board-header-title: #f1f5f9;
    --op-board-header-badge: #3dbf62;

    /* Board Skin Components */
    --op-board-btn-bg: #2e3832;
    --op-board-btn-border: #3e4d44;
    --op-board-btn-hover-bg: #2f9a4f;
    --op-board-btn-hover-border: #3dbf62;
    --op-board-row-real: #2d251e;
    --op-board-row-hide: #2a2a32;
    --op-board-row-lock: #3a3a44;
    --op-title-tone-wine: #fb7185;
    --op-title-tone-charcoal: #e2e8f0;
    --op-title-tone-forest: #4ade80;

    /* Footer */
    --op-footer-bg: #141418;
    --op-footer-text: #71717a;

    /* Sidebar & Outlogin Widgets (Phase 3) */
    --op-partner-btn-blue-bg: #2b4c7e;
    --op-partner-btn-blue-border: #3d68a2;
    --op-partner-btn-orange-bg: #9c5c00;
    --op-partner-btn-orange-border: #c47708;
    --op-partner-btn-yellow-bg: #a69500;
    --op-partner-btn-yellow-border: #c4b000;
    --op-partner-btn-yellow-text: #f0f0f0;
    --op-partner-btn-gray-bg: #2a2a32;
    --op-partner-btn-gray-border: #3f3f4d;
    --op-sidebar-user-grade: #82aaff;

    /* Static Pages & Rank (Phase 4) */
    --op-page-article-title: #4fc3f7;
    --op-page-table-border-top: #555555;
    --op-page-table-border-bottom: #333333;
    --op-rank-border: #333333;
    --op-rank-header-bg: #1e1e24;
    --op-rank-badge-bg: #333333;
    --op-rank-badge-color: #e0e0e0;
}

/* ========================================================
 * Global Typography & Form Control Reset
 * ======================================================== */
html, body {
    font-family: var(--op-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input, button, select, textarea {
    font-family: var(--op-font-sans);
}