/* ============================================================
OVERCLONE 공통 디자인 킷 v1 — 전 페이지 공유 (헤더/푸터/토큰/버튼)
BI: 코발트블루 #1858a8 · 레드 #e11b22 · 차콜 #333233 · Pretendard · 로고 /bi.png
사용: 에
→ oc-common.js 가 헤더/푸터를 자동 삽입합니다. 클래스는 전부 oc- 접두사.
============================================================ */
:root{
--oc-blue:#1858a8; --oc-blue-ink:#12457f; --oc-blue-soft:rgba(24,88,168,.10);
--oc-red:#e11b22; --oc-charcoal:#333233;
--oc-ground:#f4f6fa; --oc-surface:#ffffff; --oc-panel:#eef2f7;
--oc-ink:#1b1e24; --oc-strong:#101318; --oc-muted:#5a6576; --oc-faint:#8b96a6;
--oc-line:#dde3ec; --oc-line-strong:#c6cfdb;
--oc-ok:#1a7a48; --oc-warn:#a9701a; --oc-steel:#5b6b82;
--oc-shadow:0 1px 2px rgba(20,25,35,.05),0 10px 30px rgba(20,25,35,.07);
--oc-shadow-lg:0 2px 6px rgba(20,25,35,.06),0 26px 60px rgba(20,25,35,.13);
--oc-font:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,sans-serif;
--oc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.oc-header,.oc-footer,.oc-header *,.oc-footer *{box-sizing:border-box;font-family:var(--oc-font)}
body{word-break:keep-all;overflow-wrap:break-word}
/* ---------- 헤더 ---------- */
.oc-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--oc-line)}
.oc-header-in{display:flex;align-items:center;gap:22px;height:62px;max-width:1200px;margin:0 auto;padding-inline:22px}
.oc-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.oc-logo img{height:30px;width:auto;display:block}
.oc-nav{display:flex;gap:4px;flex:1}
.oc-nav a{font-size:14px;font-weight:600;color:var(--oc-muted);text-decoration:none;padding:8px 12px;border-radius:8px;transition:color .15s,background .15s}
.oc-nav a:hover,.oc-nav a.on{color:var(--oc-blue);background:var(--oc-blue-soft)}
.oc-header-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.oc-auth{font-size:13px;color:var(--oc-muted);display:flex;align-items:center;gap:8px;white-space:nowrap}
.oc-auth a{color:var(--oc-blue);text-decoration:none;font-weight:700}
.oc-auth .oc-uname{font-weight:700;color:var(--oc-ink)}
.oc-adm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#fff;background:var(--oc-red);padding:8px 12px;border-radius:9px;white-space:nowrap;text-decoration:none;box-shadow:0 6px 16px rgba(225,27,34,.22)}
.oc-nav .oc-nav-auth{display:none}
@media(max-width:820px){.oc-nav .oc-nav-auth{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px;padding-top:12px;border-top:1px solid var(--oc-line);font-size:14px;font-weight:600}.oc-nav .oc-nav-auth a{color:var(--oc-blue);padding:0}.oc-nav .oc-nav-auth .oc-uname{color:var(--oc-ink)}}
.oc-burger{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--oc-line-strong);background:var(--oc-surface);color:var(--oc-ink);cursor:pointer;font-size:17px;line-height:1}
@media(max-width:820px){
.oc-nav{display:none;position:absolute;left:0;right:0;top:62px;flex-direction:column;background:#fff;border-bottom:1px solid var(--oc-line);padding:10px 14px 14px;box-shadow:var(--oc-shadow)}
.oc-header.open .oc-nav{display:flex}
.oc-burger{display:grid;place-items:center}
.oc-auth{display:none}
}
/* ---------- 버튼 ---------- */
.oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-family:var(--oc-font);font-size:14px;font-weight:700;
padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid transparent;text-decoration:none;line-height:1.2;white-space:nowrap;
transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s}
.oc-btn-primary{background:var(--oc-blue);color:#fff;box-shadow:0 6px 18px rgba(24,88,168,.22)}
.oc-btn-primary:hover{transform:translateY(-1px);background:var(--oc-blue-ink);box-shadow:0 10px 26px rgba(24,88,168,.28)}
.oc-btn-ghost{background:transparent;color:var(--oc-ink);border-color:var(--oc-line-strong)}
.oc-btn-ghost:hover{border-color:var(--oc-blue);color:var(--oc-blue)}
.oc-btn-sm{padding:8px 14px;font-size:13px;border-radius:8px}
.oc-btn-danger{background:var(--oc-red);color:#fff}
:where(a,button).oc-btn:focus-visible{outline:2px solid var(--oc-blue);outline-offset:3px}
/* ---------- 상태 뱃지 ---------- */
.oc-pill{font-family:var(--oc-mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.oc-pill-ok{color:var(--oc-ok);background:rgba(26,122,72,.12)}
.oc-pill-new{color:var(--oc-blue);background:var(--oc-blue-soft)}
.oc-pill-warn{color:var(--oc-warn);background:rgba(169,112,26,.14)}
.oc-pill-muted{color:var(--oc-faint);background:var(--oc-panel);border:1px solid var(--oc-line)}
/* ---------- 푸터 ---------- */
.oc-footer{border-top:1px solid var(--oc-line);margin-top:72px;padding-block:40px 40px;color:var(--oc-muted);background:var(--oc-surface)}
.oc-footer-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding-inline:22px}
.oc-footer .oc-logo img{height:26px}
.oc-footer .oc-fine{font-size:12.5px;color:var(--oc-faint);margin:10px 0 0;max-width:36ch;line-height:1.6}
.oc-footer-cols{display:flex;gap:44px;flex-wrap:wrap}
.oc-footer-cols h4{font-family:var(--oc-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--oc-faint);margin:0 0 12px;font-weight:600}
.oc-footer-cols a{display:block;font-size:13.5px;color:var(--oc-muted);text-decoration:none;margin-bottom:8px}
.oc-footer-cols a:hover{color:var(--oc-blue)}
.oc-copy{max-width:1200px;margin:26px auto 0;padding-inline:22px;font-size:11.5px;color:var(--oc-faint);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.oc-copy a{color:inherit;text-decoration:none}
.oc-copy a:hover{color:var(--oc-blue)}
.oc-footer-co{display:block;margin-top:26px;padding-top:22px;border-top:1px solid var(--oc-line)}
.oc-policy{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;font-weight:600}
.oc-policy a{color:var(--oc-muted);text-decoration:none} .oc-policy a:hover{color:var(--oc-blue)} .oc-policy span{color:var(--oc-line-strong)}
.oc-info{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:22px;font-size:12.5px;line-height:1.7}
@media(max-width:900px){.oc-info{grid-template-columns:1fr;gap:20px}}
.oc-info h4{font-size:13px;font-weight:800;color:var(--oc-strong);margin:0 0 8px;font-family:var(--oc-font);letter-spacing:0;text-transform:none}
.oc-info p{margin:0;color:var(--oc-muted)} .oc-info .oc-k{font-weight:700;color:var(--oc-ink)}
.oc-info a{color:var(--oc-blue);text-decoration:none} .oc-info .oc-tel{font-weight:800;font-size:15px} .oc-info .oc-sub{color:var(--oc-faint)}
@media (prefers-reduced-motion:reduce){.oc-header *,.oc-footer *,.oc-btn{transition:none!important}}