/* =====================================================================
 * THV Clean 테마(5.96.0) — thv-blue 를 바탕으로 맨 아래 'THV Clean' 묶음이 하이웍스처럼 깔끔하게 덮음
 * default.css(공통 뼈대) 위에 덮어씁니다. 신뢰감 있는 파랑 · 남색, 가운데 첫 화면 + 질문 상자, 기능 탭, 선택 4단계, 남색 꼬리.
 * 내용은 관리자 '메인화면 관리' · 제품 · 요금제 그대로(이 파일은 모양만).
 * ===================================================================== */
:root {
    --bs-primary: #1a5fe0;
    --bs-primary-d: #0d47b8;
    --bs-primary-l: #eaf1ff;
    --bs-ink: #0f1b33;
    --bs-ink-2: #2c3a55;
    --bs-muted: #5f6b82;
    --bs-line: #dfe6f2;
    --bs-soft: #f3f7fd;
    --bs-navy: #0a1f44;
    --bs-radius: 14px;
    --bs-shadow: 0 8px 24px rgba(13, 40, 90, .07);
    --bs-shadow-lg: 0 24px 56px rgba(13, 40, 90, .14);
    --ok-deep: #0a3a8c;
}

/* ---------- 버튼 ---------- */
.bs-btn { font-weight: 700; border-radius: 99px; }
.bs-btn-sm { border-radius: 99px; }
.bs-btn-lg { border-radius: 99px; }
.bs-btn-primary { background: var(--ok-deep); box-shadow: 0 8px 20px rgba(10, 58, 140, .28); }
.bs-btn-primary:hover { background: var(--bs-primary); }
.bs-btn-line { color: var(--ok-deep); border: 1.5px solid var(--ok-deep); background: #fff; }
.bs-btn-line:hover { background: var(--bs-primary-l); border-color: var(--bs-primary); color: var(--bs-primary); }
.bs-btn-ghost { border-color: var(--bs-line); }
.bs-link { color: var(--bs-primary); }

/* ---------- 머리 : 흰 바탕 + 오른쪽 두 버튼(채운 남색 · 테두리) ---------- */
#bs-header { background: #fff; border-bottom: 1px solid var(--bs-line); }
.bs-logo-mark { border-radius: 20%; background: linear-gradient(135deg, #3b82f6, var(--bs-primary) 55%, var(--ok-deep)); box-shadow: 0 6px 14px rgba(26, 95, 224, .3); }
.bs-gnb a { font-weight: 700; }
.bs-gnb a:hover, .bs-gnb .is-active a { color: var(--bs-primary); }

/* ---------- 첫 화면 : 가운데 정렬 · 질문 상자 · 아래 큰 화면 ---------- */
.ok-hero { background: radial-gradient(ellipse 60% 55% at 85% 20%, rgba(59, 130, 246, .14), transparent 70%),
                      radial-gradient(ellipse 50% 50% at 10% 70%, rgba(26, 95, 224, .10), transparent 70%),
                      linear-gradient(180deg, #f1f6ff 0%, #fff 100%); }
.ok-hero::before { display: none; }
.ok-hero::after { display: none; }
.ok-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.ok-kicker { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--bs-ink-2); }
.ok-hero .bs-hero-title { font-size: 56px; font-weight: 900; line-height: 1.22; letter-spacing: -.035em; color: var(--bs-ink); }
.ok-hero .bs-hero-text { max-width: 640px; margin-left: auto; margin-right: auto; color: var(--bs-muted); }
.ok-q { display: flex; align-items: center; gap: 14px; width: min(680px, 100%); margin: 30px auto 0; padding: 14px 22px; background: #fff; border: 2px solid #c9dafb; border-radius: 99px; box-shadow: 0 12px 30px rgba(13, 40, 90, .08); }
.ok-q-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; color: #fff; background: var(--bs-primary); border-radius: 50%; }
.ok-q-list { position: relative; flex: 1; height: 28px; margin: 0; padding: 0; list-style: none; overflow: hidden; text-align: left; }
.ok-q-list li { position: absolute; inset: 0; font-size: 17px; font-weight: 600; line-height: 28px; color: var(--bs-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(100%); transition: opacity .4s, transform .4s; }
.ok-q-list li.is-on { opacity: 1; transform: none; }
.ok-q-list li::after { content: '?'; color: var(--bs-primary); margin-left: 2px; }
.ok-hero-btns { justify-content: center; margin-top: 26px; }
.ok-trust { justify-content: center; }
.ok-trust li i { color: var(--bs-primary); }
.ok-hero-visual { width: min(980px, 100%); margin: 48px auto 0; }
.ok-hero-visual > .bs-shot, .ok-hero-visual > .bs-mock { border-radius: 16px; box-shadow: 0 30px 70px rgba(13, 40, 90, .18); }
.bs-mock-side { background: var(--bs-navy); }
.bs-stats ul { border-radius: 16px; }
.bs-stats b { color: var(--bs-primary); }

/* ---------- 구역 공통 ---------- */
.bs-section { padding: 100px 0; }
.bs-eyebrow { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--bs-primary); }
.bs-title { font-size: 38px; font-weight: 900; letter-spacing: -.03em; color: var(--bs-ink); }
.bs-bg-pain, .bs-bg-price, .bs-bg-faq { background: var(--bs-soft); }
.bs-bg-pain::before, .bs-bg-pain::after, .bs-bg-price::before, .bs-bg-price::after, .bs-bg-faq::before, .bs-bg-faq::after { display: none; }
.bs-bg-dots::before { background-image: radial-gradient(rgba(26, 95, 224, .2) 1.5px, transparent 1.6px); }

/* 고민 카드 */
.bs-pains li { border: 1px solid var(--bs-line); border-radius: 14px; box-shadow: var(--bs-shadow); }
.bs-pain-tabs button.is-on { color: #fff; background: var(--ok-deep); border-color: var(--ok-deep); }
.bs-pain-solve { border-radius: 99px; background: var(--ok-deep); }

/* ---------- 기능 탭 ---------- */
.ok-feat { background: #fff; }
.ok-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px auto 0; padding: 8px; max-width: 1000px; background: var(--bs-soft); border-radius: 99px; }
.ok-tabs button { padding: 11px 20px; font-size: 15px; font-weight: 700; color: var(--bs-muted); background: transparent; border: 0; border-radius: 99px; cursor: pointer; transition: background .2s, color .2s; }
.ok-tabs button:hover { color: var(--bs-ink); }
.ok-tabs button.is-on { color: #fff; background: var(--ok-deep); box-shadow: 0 6px 16px rgba(10, 58, 140, .25); }
.ok-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; margin-top: 48px; padding: 44px 48px; background: linear-gradient(135deg, #f5f8ff, #eaf1ff); border-radius: 24px; }
.ok-pane[hidden] { display: none; }
.ok-pane-text h3 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: var(--bs-ink); }
.ok-pane-text p { margin: 16px 0 26px; font-size: 17px; line-height: 1.75; color: var(--bs-muted); }
.ok-pane-visual > * { max-width: 100%; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(13, 40, 90, .14); }
.bs-feat-foot { justify-content: center; margin-top: 36px; }

/* 요금 카드 */
.bs-plan { border-radius: 16px; }
.bs-plan.is-best { border-color: var(--bs-primary); box-shadow: 0 20px 50px rgba(26, 95, 224, .15); }
.bs-plan-badge { background: var(--bs-primary); }

/* 장점 : 남색 */
.bs-bg-dark { background: radial-gradient(ellipse 55% 75% at 8% 0%, rgba(26, 95, 224, .5), transparent 62%), linear-gradient(160deg, #081a3b 0%, #0d2a5e 100%); }
.bs-bg-dark .bs-eyebrow { color: #8fb6ff; }

/* 도입 절차 */
.bs-steps li em { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-style: normal; font-weight: 900; color: #fff; background: var(--bs-primary); border-radius: 50%; }

/* 자주 묻는 질문 */
.bs-faq-item { margin-bottom: 8px; background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; }
.bs-faq-q { padding-left: 18px; padding-right: 18px; }
.bs-faq-q span { color: var(--bs-primary); }
.bs-faq-a { padding: 0 18px 16px; }

/* ---------- 선택 4단계 ---------- */
.ok-choose { background: #fff; }
.ok-choose-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.ok-choose-list li { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--bs-soft); border: 1px solid var(--bs-line); border-radius: 16px; transition: transform .2s, box-shadow .2s; }
.ok-choose-list li:hover { transform: translateY(-4px); box-shadow: var(--bs-shadow-lg); background: #fff; }
.ok-step { font-size: 14px; font-weight: 900; color: var(--bs-primary); letter-spacing: .06em; }
.ok-choose-list p { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; color: var(--bs-ink); }
.ok-choose-list .bs-link { margin-top: auto; }
.ok-choose-ic { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; color: var(--bs-primary); background: var(--bs-primary-l); border-radius: 50%; pointer-events: none; transition: color .2s, background .2s; }     /* 6.35.2 카드 오른쪽 위 아이콘 — 번호 줄 높이 안에(글 위로 겹치지 않게) */
.ok-choose-list li:hover .ok-choose-ic { color: #fff; background: var(--bs-primary); }

/* 마무리 띠 : 남색 → 파랑 */
.bs-cta-inner { border-radius: 20px; background: linear-gradient(120deg, var(--bs-navy) 0%, var(--ok-deep) 55%, var(--bs-primary) 100%); }

/* 서브 화면 */
.bs-pagehead { background: linear-gradient(180deg, #eef4ff 0%, #fff 100%); }
.bs-chip.is-on { color: #fff; background: var(--ok-deep); border-color: var(--ok-deep); }
.bs-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(26, 95, 224, .16); }

/* 꼬리 : 짙은 남색 */
#bs-footer { background: #061532; }

@media (max-width: 960px) {
    .ok-hero .bs-hero-title { font-size: 40px; }
    .ok-pane { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 22px; }
    .ok-choose-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ok-tabs { border-radius: 18px; }
}
@media (max-width: 600px) {
    .ok-hero .bs-hero-title { font-size: 32px; }
    .ok-kicker { font-size: 15px; }
    .bs-title { font-size: 28px; }
    .ok-q { padding: 10px 14px; }
    .ok-q-list li { font-size: 15px; }
    .ok-choose-list { grid-template-columns: minmax(0, 1fr); }
}

/* 4.51.1 메뉴 일곱 개 : 글자 · 간격을 줄이고, 1200px 아래에서는 전체메뉴(☰)로 */
.bs-header-inner { gap: 24px; }
.bs-gnb ul { gap: 2px; }
.bs-gnb a { padding: 8px 11px; font-size: 15px; white-space: nowrap; }
@media (max-width: 1200px) { .bs-gnb { display: none; } .bs-burger { display: block; } }

/* 4.51.1 기능 탭 칸을 채움 — 번호 · 핵심 점 · 해시태그 · 버튼 둘 · 창 틀 그림 + 떠 있는 카드 */
.ok-pane { position: relative; overflow: hidden; gap: 64px; padding: 56px 60px; background: linear-gradient(135deg, #f6f9ff 0%, #e9f1ff 100%); border: 1px solid #dbe6fb; }
.ok-pane::before { content: ''; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(26, 95, 224, .14), transparent 70%); pointer-events: none; }
.ok-pane-text, .ok-pane-visual { position: relative; }
.ok-pane-no { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--bs-muted); }
.ok-pane-no b { color: var(--bs-primary); font-size: 15px; }
.ok-pane-text h3 { font-size: 34px; }
.ok-pane-desc { margin: 14px 0 0 !important; font-size: 17px; line-height: 1.75; color: var(--bs-ink-2); }
.ok-points { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ok-points li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--bs-ink); }
.ok-points i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; font-size: 11px; color: #fff; background: var(--bs-primary); border-radius: 50%; }
.ok-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ok-tags span { padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--ok-deep); background: #fff; border: 1px solid #cfdcf6; border-radius: 99px; }
.ok-pane-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ok-frame { overflow: hidden; background: #fff; border: 1px solid #d6e2f7; border-radius: 18px; box-shadow: 0 30px 70px rgba(13, 40, 90, .18); }
.ok-frame-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; background: #f5f8fd; border-bottom: 1px solid var(--bs-line); }
.ok-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; }
.ok-frame-bar i:nth-child(2) { background: #ffbd2e; }
.ok-frame-bar i:nth-child(3) { background: #28c940; }
.ok-frame-bar span { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--bs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-pane-visual > .ok-frame { max-width: 100%; border-radius: 18px; }
/* 그림은 줄이지 않고 다 보임 — 한 화면 스크롤(.is-snap)의 작은 그림 규칙보다 앞서게 */
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fmock { height: auto; min-height: 320px; padding: 22px; gap: 12px; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(160deg, #fbfcff, #f2f6fd); }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-people li:nth-child(n), .th-clean .ok-pane .ok-pane-visual .ok-frame .bs-mock-apps div:nth-child(n), .th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-timeline li:nth-child(n) { display: grid; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fmock-usage .bs-mock-apps { display: grid; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-table tr:nth-child(n) { display: table-row; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-block li:nth-child(n), .th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-head, .th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-toast, .th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-legend { display: flex; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-head span { display: inline; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-people li { padding: 9px 12px; font-size: 13px; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-mock-status div { padding: 10px 6px; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-mock-status b { font-size: 26px; line-height: 1.2; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-donut { width: 110px; height: 110px; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-donut::after { inset: 14px; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-donut b { font-size: 22px; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-table th, .th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fm-table td { padding: 8px 10px; }
.ok-float { position: absolute; left: -36px; bottom: -50px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--bs-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(13, 40, 90, .16); animation: ok-bob 4s ease-in-out infinite; }
.ok-float span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; background: var(--bs-primary); border-radius: 12px; }
.ok-float b { display: block; font-size: 15px; color: var(--bs-ink); }
.ok-float small { font-size: 12px; color: var(--bs-muted); }
@keyframes ok-bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ok-float { animation: none; } }
@media (max-width: 960px) {
    .ok-pane { padding: 32px 22px; gap: 40px; }
    .ok-float { left: 12px; bottom: -18px; }
}

/* 4.51.2 기능 탭 그림을 실제 근무관리 화면처럼 자세히 (inc/ok_mocks.php 의 ok_mock_app — okm-* 클래스만) */
.okm { display: grid; grid-template-columns: 46px minmax(0, 1fr); min-height: 410px; font-size: 12px; line-height: 1.4; text-align: left; color: #1e2a44; background: #f4f7fc; }
.okm b { font-weight: 700; }
.okm small { font-size: 10.5px; color: #7a869e; }
.okm-nav { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: #0a1f44; }
.okm-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 6px; font-weight: 900; font-size: 13px; color: #fff; background: linear-gradient(135deg, #4d8bff, #1a5fe0); border-radius: 8px; }
.okm-nav i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; color: rgba(255, 255, 255, .45); border-radius: 8px; }
.okm-nav i.is-on { color: #fff; background: #1a5fe0; box-shadow: 0 6px 14px rgba(26, 95, 224, .45); }
.okm-nav .okm-nav-end { margin-top: auto; }
.okm-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px 14px; }
.okm-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.okm-top > b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.okm-chip { padding: 3px 9px; font-size: 10.5px; color: #3d4a66; white-space: nowrap; background: #fff; border: 1px solid #e3e9f4; border-radius: 99px; }
.okm-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 10px; font-weight: 800; color: #e5484d; background: #fdecec; border-radius: 99px; }
.okm-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; animation: okm-blink 1.4s infinite; }
@keyframes okm-blink { 50% { opacity: .25; } }
.okm-search { margin-left: auto; padding: 4px 10px; font-size: 10.5px; color: #98a2b6; white-space: nowrap; background: #fff; border: 1px solid #e3e9f4; border-radius: 99px; }
.okm-av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 10px; font-weight: 800; color: #fff; background: #0a1f44; border-radius: 50%; }

/* 숫자 카드 */
.okm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.okm-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.okm-kpis > div { position: relative; overflow: hidden; padding: 9px 10px 8px; color: #1a5fe0; background: #fff; border: 1px solid #e3e9f4; border-top: 3px solid currentColor; border-radius: 10px; }
.okm-kpis > div.is-gray { color: #64748b; }
.okm-kpis > div.is-red { color: #e5484d; }
.okm-kpis > div.is-dark { color: #0a1f44; }
.okm-kpis small { display: block; }
.okm-kpis b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; }
.okm-kpis b em { margin: 0 1px; font-size: 11px; font-style: normal; font-weight: 600; color: #7a869e; }
.okm-kpis span { display: block; margin-top: 3px; font-size: 10px; color: #7a869e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-kpis span.okm-up, .okm-kpis span.okm-down { color: #12a150; font-weight: 700; }
.okm-spark { position: absolute; right: 8px; top: 10px; display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.okm-spark s { width: 4px; height: var(--h); background: currentColor; opacity: .3; border-radius: 2px; }
.okm-spark s:last-child { opacity: .9; }

/* 탭 · 표 */
.okm-tabs { display: flex; align-items: center; gap: 5px; }
.okm-tabs span { padding: 4px 10px; font-size: 10.5px; font-weight: 600; color: #3d4a66; white-space: nowrap; background: #fff; border: 1px solid #e3e9f4; border-radius: 99px; }
.okm-tabs span.is-on { color: #fff; background: #0a1f44; border-color: #0a1f44; }
.okm-tabs .okm-tabs-end { margin-left: auto; color: #12a150; }
.okm-table { overflow: hidden; background: #fff; border: 1px solid #e3e9f4; border-radius: 10px; }
.okm-tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.55fr) minmax(0, .9fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-top: 1px solid #eef2f8; }
.okm-tr:first-child { border-top: 0; }
.okm-th { padding-top: 6px; padding-bottom: 6px; font-size: 10.5px; font-weight: 700; color: #7a869e; background: #f8fafd; }
.okm-who, .okm-site { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
.okm-who .okm-pic, .okm-site .okm-ico { grid-row: span 2; }
.okm-who b, .okm-site b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-who small, .okm-site small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-pic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 11px; font-style: normal; font-weight: 800; color: #1a5fe0; background: #e8f0fd; border-radius: 50%; }
.okm-pic.is-lg { flex: none; width: 36px; height: 36px; font-size: 14px; color: #fff; background: linear-gradient(135deg, #4d8bff, #1a5fe0); }
.okm-app { font-size: 11px; color: #3d4a66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-app i { margin-right: 5px; color: #1a5fe0; }
.okm-act { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.okm-act s { height: 14px; border-radius: 2px; background: #1a5fe0; }
.okm-act s.a-a { background: #cbd5e1; }
.okm-act s.a-i { background: #e5484d; }
.okm-pill { display: inline-block; padding: 3px 8px; font-size: 10.5px; font-style: normal; font-weight: 700; white-space: nowrap; color: #1a5fe0; background: #e8f0fd; border-radius: 99px; }
.okm-pill.is-away, .okm-pill.is-none { color: #64748b; background: #eef1f5; }
.okm-pill.is-idle, .okm-pill.is-early { color: #d93036; background: #fdecec; }
.okm-pill.is-ok { color: #12a150; background: #e7f7ee; }
.okm-pill.is-late { color: #c26a00; background: #fff4e5; }

/* 카드 · 차트 */
.okm-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; flex: 1; }
.okm-card { padding: 10px 12px; background: #fff; border: 1px solid #e3e9f4; border-radius: 10px; }
.okm-h { margin: 0 0 8px !important; font-size: 11.5px !important; font-weight: 800; line-height: 1.4 !important; color: #1e2a44 !important; }
.okm-h small { margin-left: 4px; font-weight: 500; }
.okm-card .okm-h + * + .okm-h { margin-top: 12px !important; }
.okm-donut-wrap { display: flex; align-items: center; gap: 12px; }
.okm-donut { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#1a5fe0 0 72%, #cbd5e1 0 92%, #e5484d 0); }
.okm-donut::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.okm-donut span { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.okm-donut b { font-size: 17px; font-weight: 800; color: #1a5fe0; }
.okm-legend { display: grid; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 11px; }
.okm-legend li { display: flex; align-items: center; gap: 6px; }
.okm-legend b { margin-left: auto; white-space: nowrap; }
.okm em.c-w, .okm em.c-n, .okm em.c-i, .okm em.c-a, .okm em.c-now { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; background: #1a5fe0; }
.okm em.c-n { background: #cbd5e1; }
.okm em.c-i, .okm em.c-now { background: #e5484d; }
.okm em.c-a { background: #f5a524; }
.okm em.c-now { width: 2px; height: 10px; }
.okm-bars { display: flex; align-items: flex-end; gap: 10px; height: 78px; padding-top: 14px; }
.okm-bars div { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.okm-bars s { position: relative; width: 100%; max-width: 24px; height: var(--h); background: linear-gradient(#5b95ff, #1a5fe0); border-radius: 4px 4px 0 0; }
.okm-bars s b { position: absolute; left: 50%; top: -14px; font-size: 9.5px; color: #7a869e; transform: translateX(-50%); }
.okm-bars span { margin-top: 4px; font-size: 10px; color: #7a869e; }
.okm-rank { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.okm-rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.okm-rank span { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-rank b, .okm-time b { font-size: 11px; white-space: nowrap; }
.okm-rank i, .okm-time i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: #1a5fe0; }
.okm i.is-none { background: #94a3b8; }
.okm i.is-idle { background: #e5484d; }
.okm-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 10px; font-style: normal; font-weight: 800; color: #fff; background: #1a5fe0; border-radius: 6px; }
.okm-site .okm-ico { width: 26px; height: 26px; }
.okm-ico.is-none { background: #94a3b8; }
.okm-ico.is-idle { background: #e5484d; }

/* 인터넷 */
.okm-alert { padding: 7px 10px; font-size: 11.5px; color: #8a5a00; background: #fff6e5; border: 1px solid #fde2b0; border-radius: 8px; }
.okm-alert i { margin-right: 6px; color: #f59e0b; }
.okm-alert b { margin-right: 6px; }
.okm-sites .okm-tr { grid-template-columns: minmax(0, 1fr) auto 92px; }
.okm-time { display: grid; gap: 4px; justify-items: end; }
.okm-sites .okm-th span:last-child { text-align: right; }
.okm-main > .okm-h { margin-bottom: -4px !important; }

/* 이용 제한 */
.okm-rules { display: grid; gap: 6px; }
.okm-rule { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 30px; align-items: center; gap: 10px; padding: 7px 10px; background: #fff; border: 1px solid #e3e9f4; border-radius: 10px; }
.okm-rico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #1a5fe0; background: #e8f0fd; border-radius: 8px; }
.okm-rule > span:nth-child(2) { min-width: 0; }
.okm-rule b { display: block; font-size: 12px; }
.okm-rule small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-seg { display: flex; padding: 2px; background: #f1f5f9; border-radius: 7px; }
.okm-seg s { padding: 3px 7px; font-size: 10.5px; text-decoration: none; color: #98a2b6; border-radius: 5px; }
.okm-seg s.is-on { font-weight: 800; background: #fff; box-shadow: 0 1px 3px rgba(15, 30, 60, .14); }
.okm-seg s.is-l0 { color: #1a5fe0; }
.okm-seg s.is-l1 { color: #c26a00; }
.okm-seg s.is-l2 { color: #e5484d; }
.okm-sw { position: relative; width: 30px; height: 17px; background: #cbd5e1; border-radius: 99px; }
.okm-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: left .2s; }
.okm-sw.is-on { background: #1a5fe0; }
.okm-sw.is-on::after { left: 15px; }
.okm-log { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #e3e9f4; border-radius: 10px; }
.okm-log li { padding: 6px 10px; line-height: 20px; text-overflow: ellipsis; font-size: 11.5px; color: #3d4a66; white-space: nowrap; overflow: hidden; border-top: 1px solid #eef2f8; }
.okm-log li:first-child { border-top: 0; }
.okm-log time { display: inline-block; width: 38px; vertical-align: middle; font-size: 10.5px; color: #98a2b6; }
.okm-log i { display: inline-flex; margin-right: 6px; vertical-align: middle; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 10px; color: #1a5fe0; background: #e8f0fd; border-radius: 50%; }
.okm-block .okm-log i { color: #e5484d; background: #fdecec; }
.okm-log b { color: #1e2a44; }

/* 근태 */
.okm-tl { display: grid; gap: 7px; }
.okm-tl-axis, .okm-tl-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.okm-tl-axis div { display: flex; justify-content: space-between; font-size: 9.5px; color: #98a2b6; }
.okm-tl-axis s { text-decoration: none; }
.okm-tl-row > span b { display: block; font-size: 11.5px; }
.okm-tl-row > div { position: relative; height: 16px; background: repeating-linear-gradient(90deg, #f1f4f9 0, #f1f4f9 calc(100% / 6 - 1px), #e3e9f4 calc(100% / 6 - 1px), #e3e9f4 calc(100% / 6)); border-radius: 4px; }
.okm-tl-row i, .okm-tl-row em:not(.okm-pill) { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: linear-gradient(90deg, #4d8bff, #1a5fe0); border-radius: 4px; }
.okm-tl-row em:not(.okm-pill) { background: #f5a524; border-radius: 0; }
.okm-tl-row .okm-now { position: absolute; left: 92%; top: -4px; bottom: -4px; width: 2px; background: #e5484d; }
.okm-tl-row .okm-pill { justify-self: end; padding: 2px 7px; }
.okm-legend2 { display: flex; align-items: center; gap: 5px; margin: 2px 0 0 !important; font-size: 10.5px !important; color: #7a869e !important; }
.okm-legend2 em { margin-left: 6px; }

/* 직원별 기록 */
.okm-prof { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid #e3e9f4; border-radius: 10px; }
.okm-prof > span:nth-child(2) { min-width: 0; }
.okm-prof > span b { display: block; font-size: 13px; }
.okm-prof-stat { margin-left: auto; text-align: right; white-space: nowrap; }
.okm-prof-stat + .okm-prof-stat { margin-left: 14px; padding-left: 14px; border-left: 1px solid #eef2f8; }
.okm-prof-stat small { display: block; }
.okm-prof-stat b { font-size: 15px !important; font-weight: 800; }
.okm-prof-stat b.is-blue { color: #1a5fe0; }
.okm-day { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; margin-bottom: 10px; }
.okm-day s { height: 18px; background: #1a5fe0; border-radius: 3px; }
.okm-day s.d-n { background: #cbd5e1; }
.okm-day s.d-a { background: #f5a524; }
.okm-day s.d-i { background: #e5484d; }
.okm-day s.d-x { background: #eef2f8; }
.okm-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.okm-shot { display: grid; align-content: start; gap: 4px; padding: 7px; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #dbe6fb, #eef3fc); border: 1px solid #d6e2f7; border-radius: 6px; }
.okm-shot i { display: block; height: 4px; background: #fff; border-radius: 2px; }
.okm-shot i:first-child { width: 55%; background: rgba(26, 95, 224, .55); }
.okm-shot i:last-child { width: 75%; }
.okm-shots small { display: block; margin-top: 4px; text-align: center; }

@media (max-width: 1200px) { .okm-search { display: none; } .okm-av { margin-left: auto; } }
@media (max-width: 600px) {
    .okm { grid-template-columns: 36px minmax(0, 1fr); min-height: 0; }
    .okm-nav i { width: 26px; height: 26px; font-size: 12px; }
    .okm-main { padding: 10px; }
    .okm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .okm-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .okm-spark, .okm-chip { display: none; }
    .okm-tr { grid-template-columns: minmax(0, 1fr) auto; }
    .okm-tr > span:nth-child(2), .okm-tr > span:nth-child(3) { display: none; }
    .okm-sites .okm-tr { grid-template-columns: minmax(0, 1fr) 80px; }
    .okm-sites .okm-tr > span:nth-child(3) { display: grid; }
    .okm-grid2 { grid-template-columns: minmax(0, 1fr); }
    .okm-seg { display: none; }
    .okm-rule { grid-template-columns: 30px minmax(0, 1fr) 30px; }
    .okm-prof-stat + .okm-prof-stat { display: none; }
    .okm-tabs { overflow: hidden; }
    .ok-float { display: none; }
}

/* 4.51.2 도입 절차 채움 — 위 '도입 한눈에' 띠 · 단계 카드(번호 + 큰 아이콘) · 아래 버튼 */
.ok-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 56px; padding: 0; list-style: none; }
.ok-sum li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid #dfe8f8; border-radius: 16px; box-shadow: 0 10px 28px rgba(13, 40, 90, .07); }
.ok-sum span { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; font-size: 19px; color: var(--bs-primary); background: #e8f0fd; border-radius: 14px; }
.ok-sum b { display: block; font-size: 16px; color: var(--bs-ink); }
.ok-sum small { font-size: 13px; color: var(--bs-muted); }
.ok-steps { gap: 22px; margin-top: 8px; }
.ok-steps::before { top: 58px; z-index: 0; }
.ok-steps li { position: relative; z-index: 1; overflow: hidden; padding: 30px 24px 30px !important; text-align: center; background: #fff; border: 1px solid #dfe8f8; border-radius: 20px; box-shadow: 0 14px 34px rgba(13, 40, 90, .08); transition: transform .25s, box-shadow .25s; }
.ok-steps li:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(13, 40, 90, .13); }
.ok-steps .ok-step-ic { position: absolute; right: 16px; top: 14px; font-size: 56px; line-height: 1; color: rgba(26, 95, 224, .06); pointer-events: none; }
.ok-steps .ok-step-no { display: block; margin-top: 14px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--bs-primary); }
.ok-steps h3 { margin: 6px 0 8px; }
.ok-steps p { max-width: none; }
.ok-steps-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
@media (max-width: 1200px) { .ok-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 40px; } }
@media (max-width: 600px) {
    .ok-sum { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ok-sum li { padding: 14px 16px; }
    .ok-steps-cta .bs-btn { flex: 1 1 100%; }
}
@media (max-width: 768px) {
    .ok-steps li { padding: 20px 18px !important; text-align: left; }
    .ok-steps em { grid-row: span 3; }
    .ok-steps .ok-step-no, .ok-steps h3, .ok-steps p { grid-column: 2; }
    .ok-steps .ok-step-no { margin-top: 2px; }
    .ok-steps .ok-step-ic { font-size: 40px; }
}
/* 한 화면 스크롤일 때 : 화면 높이에 맞게 조금 줄임 */
.is-snap .ok-sum { margin-bottom: 36px; }
.is-snap .ok-steps-cta { margin-top: 32px; }
@media (max-height: 820px) { .is-snap .ok-sum small, .is-snap .ok-steps .ok-step-no { display: none; } .is-snap .ok-sum { margin-bottom: 24px; } .is-snap .ok-steps li { padding: 22px 20px !important; } }

/* 4.51.2 검수 : 실제 기능에 맞춰 바꾼 그림 부품 */
.okm-sel { color: #3d4a66 !important; }
.okm-alert.is-info { color: #1e3a6e; background: #eef4ff; border-color: #d6e2f7; }
.okm-alert.is-info i { color: #1a5fe0; }
.okm-bk { margin-left: 4px; padding: 1px 6px; font-size: 9.5px; font-weight: 800; text-decoration: none; color: #d93036; background: #fdecec; border-radius: 99px; }
.okm-rank span { display: block; }
.okm-rank span i { margin-top: 4px; }
.okm-prof-stat b.is-red { color: #e5484d; }
.okm-dayline { position: relative; height: 22px; background: #eef2f8; border-radius: 6px; overflow: hidden; }
.okm-dayline i, .okm-dayline em { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: linear-gradient(90deg, #4d8bff, #1a5fe0); }
.okm-dayline em { background: #f5a524; }
.okm-dayline u { position: absolute; top: 0; bottom: 0; left: var(--l); width: 3px; background: #e5484d; }
.okm-dayaxis { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; color: #98a2b6; }
.okm-dayaxis s { text-decoration: none; }
.okm-grid2.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.okm-log.is-flat { border: 0; }
.okm-log.is-flat li { padding: 5px 0; }
.okm-bars span { font-size: 9.5px; white-space: nowrap; }
@media (max-width: 600px) { .okm-grid2.is-even { grid-template-columns: minmax(0, 1fr); } .okm-prof-stat + .okm-prof-stat + .okm-prof-stat { display: none; } }

/* 4.51.2 로그인 · 회원 화면 (THV Blue) — 남색 왼쪽 · 흰 오른쪽 · 각진 파란 버튼 */
html.th-clean #mb_login.wda { background: #f4f7fc; }
html.th-clean .wda-visual { padding: 44px 52px; background: radial-gradient(ellipse 70% 60% at 90% 10%, rgba(77, 139, 255, .35), transparent 70%), linear-gradient(160deg, #061532 0%, #0a1f44 45%, #123a85 100%); }
html.th-clean .wda-visual::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 56px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 56px); }
html.th-clean .wda-brand .bs-logo-mark { color: #fff; background: linear-gradient(135deg, #4d8bff, #1a5fe0); }
html.th-clean .wda-quote .wda-eyebrow { color: #8fb6ff; }
html.th-clean .wda-tagline { font-size: 34px; font-weight: 800; line-height: 1.35; }
html.th-clean .wda-feats li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); border-radius: 10px; }
html.th-clean .wda-feats i { color: #fff; background: #1a5fe0; }
html.th-clean .lg-card { max-width: 380px; margin-top: 22px; padding: 16px 18px; background: #fff; border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); }
html.th-clean .lg-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 800; color: #0a1f44; }
html.th-clean .lg-live { padding: 2px 8px; font-size: 10px; font-weight: 800; color: #e5484d; background: #fdecec; border-radius: 99px; }
html.th-clean .lg-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.th-clean .lg-kpi div { padding: 8px 10px; border: 1px solid #e3e9f4; border-top: 3px solid #1a5fe0; border-radius: 8px; }
html.th-clean .lg-kpi .is-a { border-top-color: #64748b; }
html.th-clean .lg-kpi .is-i { border-top-color: #e5484d; }
html.th-clean .lg-kpi small { display: block; font-size: 11px; color: #7a869e; }
html.th-clean .lg-kpi b { font-size: 22px; font-weight: 800; color: #1a5fe0; }
html.th-clean .lg-kpi .is-a b { color: #475569; }
html.th-clean .lg-kpi .is-i b { color: #e5484d; }
html.th-clean #mb_login .wda-box { border: 1px solid #dfe8f8; border-radius: 18px; box-shadow: 0 24px 60px rgba(13, 40, 90, .10); }
html.th-clean .wda-eyebrow, html.th-clean .wdr-eyebrow { color: #1a5fe0; }
html.th-clean #mb_login .wda-field .frm_input, html.th-clean .wdr-form .frm_input, html.th-clean .mbskin .frm_input { border-color: #d6e0f0; border-radius: 10px; }
html.th-clean #mb_login .wda-field .frm_input:focus, html.th-clean .wdr-form .frm_input:focus, html.th-clean .mbskin .frm_input:focus { border-color: #1a5fe0 !important; box-shadow: 0 0 0 3px rgba(26, 95, 224, .15); }
html.th-clean #mb_login .wda-submit, html.th-clean .register.wdr .btn_submit, html.th-clean .mbskin .btn_submit, html.th-clean .new_win .btn_submit { color: #fff; background: #1a5fe0; border-color: #1a5fe0; border-radius: 10px; box-shadow: 0 10px 22px rgba(26, 95, 224, .25); }
html.th-clean #mb_login .wda-submit:hover, html.th-clean .register.wdr .btn_submit:hover, html.th-clean .mbskin .btn_submit:hover { background: #0a3a8c; }
html.th-clean .register.wdr .btn_close { border-radius: 10px; }
html.th-clean .wda .chk_box input[type="checkbox"]:checked + label span, html.th-clean .wdr .chk_box input[type="checkbox"]:checked + label span, html.th-clean .wdr .fregister_agree input[type="checkbox"]:checked + label span { background-color: #1a5fe0; border-color: #1a5fe0; }
html.th-clean .wda-join a.join, html.th-clean #fregister p.wdr-login a { color: #1a5fe0; }
html.th-clean .wdr-steps li.is-on b, html.th-clean .wdr-steps li.is-done b { background: #1a5fe0; border-color: #1a5fe0; }
html.th-clean #fregister .wdr-all { border-color: #1a5fe0; }
html.th-clean .wdr-done, html.th-clean .wdr-form .register_form_inner, html.th-clean #fregister .wdr-term { border-color: #dfe8f8; }
@media (max-width: 900px) { html.th-clean .lg-card { display: none; } html.th-clean .wda-visual { padding: 22px 20px 64px; } html.th-clean .wda-tagline { font-size: 22px; } }

/* 4.51.2 소셜 로그인 버튼 — 한 줄에 하나(폭 100%), 높이 · 모서리는 로그인 버튼과 같게, 색은 각 회사 규칙대로 */
html.th-clean #mb_login #sns_login { width: 100%; margin: 20px 0 0; padding: 0; border: 0; }
html.th-clean #mb_login #sns_login h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0; font-size: 12px; font-weight: 600; color: var(--bs-muted); background: none; border: 0; }
html.th-clean #mb_login #sns_login h3::before, html.th-clean #mb_login #sns_login h3::after { content: ''; flex: 1; height: 1px; background: var(--bs-line); }
html.th-clean #mb_login #sns_login .sns-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; }
html.th-clean #mb_login #sns_login .sns-wrap::after { display: none; }
html.th-clean #mb_login #sns_login .sns-icon { position: relative; display: flex !important; align-items: center; justify-content: center; float: none !important; box-sizing: border-box; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 48px !important; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; border: 1px solid transparent; border-radius: 10px; transition: filter .15s, box-shadow .15s; }
html.th-clean #mb_login #sns_login .sns-icon:hover { filter: brightness(.97); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
html.th-clean #mb_login #sns_login .sns-icon .ico { position: absolute !important; left: 14px; top: 50%; margin: 0 !important; transform: translateY(-50%); border: 0 !important; }
html.th-clean #mb_login #sns_login .sns-icon .txt { position: static !important; display: inline; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 14px; font-weight: 700; color: inherit; background: none !important; border: 0 !important; }
html.th-clean #mb_login #sns_login .sns-icon .txt i { display: inline; font-style: normal; }
html.th-clean #mb_login #sns_login .sns-naver { color: #fff; background-color: #03c75a; border-color: #03c75a; }
html.th-clean #mb_login #sns_login .sns-kakao { color: rgba(0, 0, 0, .85); background-color: #fee500; border-color: #fee500; }
html.th-clean #mb_login #sns_login .sns-google { color: #3c4043; background-color: #fff; border-color: #dadce0; }
html.th-clean #mb_login #sns_login .sns-facebook { color: #fff; background-color: #1877f2; border-color: #1877f2; }
html.th-clean #mb_login #sns_login .sns-twitter { color: #fff; background-color: #111; border-color: #111; }
html.th-clean #mb_login #sns_login .sns-payco { color: #fff; background-color: #fa2828; border-color: #fa2828; }

/* 4.51.4 로그인 왼쪽 칸 채움 (THV Blue) — 머리글 · 핵심 셋 · 실제 근무 현황 화면 그림 + 떠 있는 카드 · 아래 링크 */
html.th-clean .wda-visual.lgb { justify-content: flex-start; gap: 24px; padding: 40px 56px 28px; overflow: hidden; }
html.th-clean .lgb-body { display: flex; flex: 1; flex-direction: column; justify-content: center; max-width: 760px; }
html.th-clean .lgb-body .wda-tagline { margin-top: 12px; }
html.th-clean .lgb-pts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: rgba(255, 255, 255, .82); }
html.th-clean .lgb-pts i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 7px; font-size: 10px; color: #fff; background: #1a5fe0; border-radius: 50%; }
html.th-clean .lgb-shot { position: relative; margin-top: 34px; }
html.th-clean .lgb-shot .ok-frame { border: 0; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
html.th-clean .lgb-shot .okm { min-height: 0; }
html.th-clean .lgb-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #0a1f44; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: ok-bob 4s ease-in-out infinite; }
html.th-clean .lgb-float span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #fff; background: #1a5fe0; border-radius: 10px; }
html.th-clean .lgb-float.is-b span { background: #e5484d; }
html.th-clean .lgb-float b { display: block; font-size: 14px; }
html.th-clean .lgb-float small { font-size: 12px; color: #7a869e; }
html.th-clean .lgb-float.is-a { left: -22px; bottom: -22px; }
html.th-clean .lgb-float.is-b { right: -18px; top: 70px; animation-delay: -2s; }
html.th-clean .lg-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
html.th-clean .lg-foot a { color: rgba(255, 255, 255, .6); }
html.th-clean .lg-foot a:hover, html.th-clean .lg-foot b { color: #fff; }
@media (max-width: 1280px) { html.th-clean .okm-tr > span:nth-child(3) { display: none; } html.th-clean .lgb-shot .okm-tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; } }
@media (max-height: 760px) { html.th-clean .lgb-pts { display: none; } html.th-clean .lgb-shot { margin-top: 20px; } }
@media (max-width: 900px) { html.th-clean .lgb-pts, html.th-clean .lgb-shot, html.th-clean .lg-foot { display: none; } html.th-clean .wda-visual.lgb { padding: 22px 20px 64px; } }

/* 4.51.5 로그인 왼쪽 내용을 가운데로(넓은 화면에서 왼쪽에 붙던 것) — 글은 왼쪽 맞춤 그대로, 묶음만 가운데 */
html.th-clean .lgb-body { width: 100%; max-width: 860px; margin: 0 auto; }
html.th-clean .wda-visual.lgb .lg-foot { justify-content: center; }
@media (min-width: 1600px) { html.th-clean .lgb-body .wda-tagline { font-size: 38px; } html.th-clean .lgb-pts { font-size: 15.5px; } }

/* =====================================================================
 * 5.96.0 THV Clean — 하이웍스(main.hiworks.com)처럼 깔끔 · 단순하게(위 thv-blue 규칙을 덮음)
 *   색 하나(#167AD8) + 연한 파랑(#ECF2F9) · 본문 #333 · 꼬리 짙은 회색(#2D2F31)
 *   글꼴 Pretendard(6.278.0 — 전 나눔스퀘어, 굵기 800) · 모서리 4px(단추) / 8px(카드) · 그림자 1 ~ 2px · 구역 위아래 96px · 무늬 · 그라데이션 없음
 * ===================================================================== */
:root {
    --bs-primary: #167ad8;
    --bs-primary-d: #0f63b5;
    --bs-primary-l: #ecf2f9;
    --bs-ink: #333;
    --bs-ink-2: #444;
    --bs-muted: #777;
    --bs-line: #e5e8ec;
    --bs-soft: #f6f8fa;
    --bs-navy: #2d2f31;
    --bs-radius: 8px;
    --bs-shadow: 0 1px 2px rgba(87, 96, 107, .16);
    --bs-shadow-lg: 0 0 6px rgba(68, 75, 83, .18);
    --bs-header-h: 70px;
    --bs-max: 1280px;
    --bs-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;     /* 6.278.0 나눔스퀘어 → Pretendard(head.sub.php) */
    --ok-deep: #167ad8;
    --cl-a: #dcebf9;     /* 첫 화면 바탕 — 연한 파랑 · 연보라 · 연한 민트 · 연한 청록 */
    --cl-b: #efedf9;
    --cl-c: #e8f3fb;
    --cl-d: #e3f4f1;
    --cl-e: #e8f5ec;     /* 6.35.2 패밀리 기능 장 — 연한 초록 */
}
body { color: #333; letter-spacing: -.01em; }
h1, h2, h3, h4, b, strong, th { font-weight: 800; }

/* ---------- 단추: 모서리 4px · 그림자 없음 · 진한 파랑 / 연한 파랑 두 가지 ---------- */
.bs-btn, .bs-btn-sm, .bs-btn-lg { border-radius: 4px; font-weight: 800; box-shadow: none; }
.bs-btn:hover { transform: none; }
.bs-btn-sm { height: 36px; }
.bs-btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.bs-btn-primary { color: #fff; background: var(--bs-primary); box-shadow: none; }
.bs-btn-primary:hover { background: var(--bs-primary-d); }
.bs-btn-soft { color: var(--bs-primary); background: var(--bs-primary-l); border-color: transparent; }
.bs-btn-soft:hover { background: #dde8f5; }
.bs-btn-line { color: var(--bs-primary); background: #fff; border: 1px solid #b9d3ef; }
.bs-btn-line:hover { color: var(--bs-primary); background: var(--bs-primary-l); border-color: var(--bs-primary); }
.bs-btn-ghost { color: #333; background: #fff; border: 1px solid var(--bs-line); }
.bs-btn-white { color: var(--bs-primary); }
.bs-btn-white:hover { box-shadow: none; }
.bs-link { color: var(--bs-primary); font-weight: 800; }

/* ---------- 머리: 흰 70px · 아래 1px 옅은 선 ---------- */
#bs-header { height: var(--bs-header-h); background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .1); box-shadow: none !important; }
#bs-header.is-scrolled { box-shadow: none !important; }
.bs-logo-mark { background: var(--bs-primary); border-radius: 6px; box-shadow: none; }
.bs-gnb a { font-size: 15px; font-weight: 800; color: #333; }
.bs-gnb a:hover, .bs-gnb .is-active a { color: var(--bs-primary); background: none; }

/* ---------- 구역 공통: 위아래 96px · 가운데 36px 제목 · 무늬 없음 ---------- */
.bs-section { padding: 96px 0; }
.bs-head { margin-bottom: 0; }
.bs-eyebrow { margin-bottom: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--bs-primary); }
.bs-title { font-size: 36px; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; color: #333; }
.bs-lead { font-size: 16px; line-height: 1.7; color: var(--bs-muted); }
.bs-bg::before, .bs-bg::after { display: none !important; }
.bs-bg-pain, .bs-bg-dots, .bs-bg-wave, .bs-bg-quote { background: #fff !important; }
.bs-bg-price, .bs-bg-faq { background: var(--bs-soft) !important; }
/* 장점 = 파랑 띠(하이웍스 '기능' 띠처럼) */
.bs-bg-dark { background: var(--bs-primary) !important; }
.bs-bg-dark .bs-eyebrow { color: rgba(255, 255, 255, .75); }
.bs-bg-dark .bs-benefits li { background: #fff; border: 0; border-radius: 8px; box-shadow: var(--bs-shadow); }
.bs-bg-dark .bs-benefits h3 { color: #333; }
.bs-bg-dark .bs-benefits p { color: var(--bs-muted); }

/* 카드: 테두리 없음 · 8px · 아주 옅은 그림자 */
.bs-pains li, .bs-plan, .ok-choose-list li, .ok-sum li, .ok-steps li, .bs-faq-item, .bs-product-card, .bs-review {
    border: 0 !important; border-radius: 8px !important; box-shadow: var(--bs-shadow-lg) !important; }
.ok-choose-list li:hover, .ok-steps li:hover, .bs-product-card:hover { transform: none; box-shadow: 0 0 10px rgba(68, 75, 83, .26) !important; }
/* 6.35.2 고민 카드: 한 줄에 놓인 카드끼리 제목 · 설명 · 해결 줄 높이를 맞춤(subgrid) — 제목 · 설명이 한 줄이든 두 줄이든 해결 줄(.bs-pain-fix) 시작 자리가 같게(사용자 2026-10-14) */
@supports (grid-template-rows: subgrid) {
    .bs-pains li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .bs-pains li > .bs-pain-top { grid-row: 1; }
    .bs-pains li > p { grid-row: 2; }
    .bs-pains li > .bs-pain-fix { grid-row: 3; align-self: start; }
}
.bs-pain-tabs { margin-top: 24px; margin-bottom: 28px; border-radius: 8px; border-color: var(--bs-line); box-shadow: var(--bs-shadow-lg); }     /* 6.35.2 제목과 띄움(전에는 위 여백 -6px 이라 제목에 붙어 겹침) */     /* 6.35.2 바깥 틀도 각지게(전에는 기본 테마의 둥근 알약 · 분홍 테두리 그대로 — 안 단추만 4px) */
.bs-pain-tabs button { border-radius: 4px; font-weight: 800; }
.bs-pain-tabs button span { border-radius: 4px; }
.bs-pain-tabs button.is-on, .bs-chip.is-on { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); }
.bs-pain-solve { border-radius: 4px; background: var(--bs-primary); box-shadow: none; }
.bs-plan.is-best { box-shadow: 0 0 0 2px var(--bs-primary) !important; }
.bs-plan-badge { border-radius: 4px; background: var(--bs-primary); }
.bs-steps li em { border-radius: 8px; background: var(--bs-primary); }
.ok-sum span, .ok-float span, .ok-points i { border-radius: 8px; background: var(--bs-primary-l); color: var(--bs-primary); }
.ok-points i { border-radius: 50%; color: #fff; background: var(--bs-primary); }
.ok-steps .ok-step-ic { color: rgba(22, 122, 216, .07); }
.ok-step, .ok-steps .ok-step-no, .ok-pane-no b { color: var(--bs-primary); }
.ok-tags span { color: var(--bs-primary); background: #fff; border-color: #cfe0f3; border-radius: 4px; }

/* 기능 탭: 밑줄 탭 · 평평한 회색 상자 */
.ok-tabs { gap: 0; padding: 0; background: none; border-bottom: 1px solid var(--bs-line); border-radius: 0; max-width: none; }
.ok-tabs button { padding: 14px 20px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 800; color: var(--bs-muted); }
.ok-tabs button.is-on { color: var(--bs-primary); background: none; border-bottom-color: var(--bs-primary); box-shadow: none; }
.ok-pane { background: var(--bs-soft); border: 0; border-radius: 8px; }
.ok-pane::before { display: none; }
.ok-pane-text h3 { font-size: 32px; font-weight: 800; line-height: 1.5; }
.ok-frame { border: 1px solid var(--bs-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(87, 96, 107, .16), 0 12px 32px rgba(23, 64, 120, .10); }
.ok-pane-visual > .ok-frame { border-radius: 8px; }
.ok-float { border: 0; border-radius: 8px; box-shadow: var(--bs-shadow-lg); animation: none; }
.th-clean .ok-pane .ok-pane-visual .ok-frame .bs-fmock { background: #f9fafb; }
.okm-nav { background: #2d2f31; }
.okm-logo { background: var(--bs-primary); }
.okm-nav i.is-on { background: var(--bs-primary); box-shadow: none; }

/* 요금 월 · 연 고르기 · 고르기 칩: 파랑 · 4px */
.bs-billing { border-radius: 4px; }
.bs-billing button { border-radius: 4px; font-weight: 800; }
.bs-billing button.is-on { background: var(--bs-primary); }
.bs-billing button.is-on em { color: #d6f5e6; }
.bs-chip { border-radius: 4px; font-weight: 800; }

/* 자주 묻는 질문 */
.bs-faq-item { margin-bottom: 8px; }
.bs-faq-q span { color: var(--bs-primary); }

/* 마무리 띠: 짙은 회색 */
.bs-cta-inner { border-radius: 8px; background: var(--bs-navy); }
.bs-cta .bs-btn-white { color: #fff; background: var(--bs-primary); }
.bs-cta .bs-btn-white:hover { background: var(--bs-primary-d); }

/* 서브 화면 · 입력 */
.bs-pagehead { background: var(--bs-soft); }
.bs-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(22, 122, 216, .15); }

/* 꼬리: 짙은 회색 */
#bs-footer { background: var(--bs-navy); }

/* ---------- 1. 첫 화면 넘김(슬라이드) ---------- */
.cl-hero { position: relative; overflow: hidden; }
.cl-slides { display: grid; }
.cl-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.cl-slide.is-on { opacity: 1; visibility: visible; }
.cl-slide.tone-a { background-color: var(--cl-a); }
.cl-slide.tone-b { background-color: var(--cl-b); }
.cl-slide.tone-c { background-color: var(--cl-c); }
.cl-slide.tone-d { background-color: var(--cl-d); }
.cl-slide.tone-e { background-color: var(--cl-e); }
/* 6.35.2 장 바탕 무늬(은은하게 — 사용자 2026-10-14 '배경이 없어서 밋밋해'): 빛 번짐 둘 · 오른쪽으로 갈수록 보이는 점 무늬 · 오른쪽 아래 큰 원 테두리. 색 = --cl-dec(패밀리는 패밀리 색) */
.cl-hero { --cl-dec: #167ad8; }
.cl-hero.is-fam { --cl-dec: var(--fm-c, #0f9f8f); }
.cl-slide { position: relative; overflow: hidden;
    background-image: radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 40%),
                      radial-gradient(circle at 6% 96%, rgba(22, 122, 216, .08) 0, rgba(22, 122, 216, 0) 34%);
    background-image: radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 40%),
                      radial-gradient(circle at 6% 96%, color-mix(in srgb, var(--cl-dec) 8%, transparent) 0, transparent 34%); }
.cl-slide::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(22, 122, 216, .14) 1px, transparent 1.5px);
    background-image: radial-gradient(color-mix(in srgb, var(--cl-dec) 14%, transparent) 1px, transparent 1.5px);
    background-size: 22px 22px; -webkit-mask-image: linear-gradient(110deg, transparent 38%, #000 78%); mask-image: linear-gradient(110deg, transparent 38%, #000 78%); }
.cl-slide::after { content: ''; position: absolute; right: -180px; bottom: -300px; width: 620px; height: 620px; border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(22, 122, 216, .10); box-shadow: 0 0 0 70px rgba(255, 255, 255, .16), 0 0 0 71px rgba(22, 122, 216, .07);
    border-color: color-mix(in srgb, var(--cl-dec) 10%, transparent); box-shadow: 0 0 0 70px rgba(255, 255, 255, .16), 0 0 0 71px color-mix(in srgb, var(--cl-dec) 7%, transparent); }
.cl-slide-in { position: relative; z-index: 1; }
.cl-hero.is-fam .cl-kicker { color: var(--fm-c); }     /* 6.35.2 패밀리 첫 화면 넘김(inc/family_hero.php) — 작은 제목만 패밀리 색 */
.cl-slide-visual .fm-phone { max-height: 460px; overflow: hidden; }     /* 패밀리 첫 장 보호자 화면 그림 — 장 높이가 컴퍼니 장과 비슷하게 위쪽만 */
.cl-slide-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 56px; min-height: 520px; padding-top: 56px; padding-bottom: 92px; }
.cl-kicker { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--bs-primary); }
.cl-title { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; color: #333; word-break: keep-all; }
.cl-text { margin: 16px 0 0; font-size: 16px; line-height: 1.75; color: #555; word-break: keep-all; }
.cl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.cl-slide-visual { min-width: 0; }
.cl-slide-visual > * { max-width: 100%; }
.cl-slide-visual .bs-mock, .cl-shot img, .cl-frame { border-radius: 8px; box-shadow: 0 1px 2px rgba(87, 96, 107, .16), 0 16px 40px rgba(23, 64, 120, .14); }
.cl-shot img { display: block; width: 100%; }
.cl-frame .okm { min-height: 360px; }
.cl-ctrl { z-index: 2; position: absolute; left: 0; right: 0; bottom: 28px; display: flex; align-items: center; gap: 6px; }
.cl-ctrl button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 15px; color: #333; background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .1); border-radius: 4px; cursor: pointer; }
.cl-ctrl button:hover { color: var(--bs-primary); background: #fff; }
.cl-ctrl button:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.cl-count { min-width: 52px; font-size: 13px; text-align: center; color: #555; }
.cl-count b { color: #333; }
/* ---------- 1-1. 바로가기 줄 ---------- */
.cl-quick { background: #fff; border-bottom: 1px solid var(--bs-line); }
.cl-quick .bs-wrap { display: flex; align-items: center; gap: 4px; height: 58px; overflow-x: auto; scrollbar-width: none; }
.cl-quick .bs-wrap::-webkit-scrollbar { display: none; }
.cl-quick a { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 800; color: #555; text-decoration: none; border-radius: 4px; }
.cl-quick a:hover { color: var(--bs-primary); background: var(--bs-primary-l); }
.cl-quick a i { color: var(--bs-primary); }

@media (max-width: 960px) {
    .cl-slide-in { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding-top: 40px; padding-bottom: 84px; }
    .cl-title, .bs-title { font-size: 28px; }
    .cl-frame .okm { min-height: 0; }
    .ok-tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
    .ok-tabs button { flex: none; }
}
@media (max-width: 600px) {
    .cl-title, .bs-title { font-size: 24px; }
    .cl-text { font-size: 15px; }
    .cl-btns .bs-btn { flex: 1 1 auto; }
    .bs-section { padding: 64px 0; }
    .cl-slide-visual :is(.cl-frame, .fm-phone) { max-height: 380px; overflow: hidden; }
    .cl-slide::after { right: -140px; bottom: -200px; width: 380px; height: 380px; box-shadow: 0 0 0 44px rgba(255, 255, 255, .16), 0 0 0 45px color-mix(in srgb, var(--cl-dec) 7%, transparent); }     /* 6.35.2 휴대폰은 원을 작게 */     /* 6.35.2 휴대폰: 기능 장 그림도 보임(숨기면 2번째 장부터 빈칸) — 장 높이가 너무 달라지지 않게 그림 높이만 줄임 */
}
@media (prefers-reduced-motion: reduce) { .cl-slide { transition: none; } }

/* ---------- 로그인 · 회원 화면: 파랑 한 색 · 모서리 4 / 8px ---------- */
html.th-clean #mb_login.wda { background: var(--bs-soft); }
html.th-clean .wda-visual { background: var(--bs-primary); }
html.th-clean .wda-visual::before { display: none; }
html.th-clean .wda-brand .bs-logo-mark { color: var(--bs-primary); background: #fff; }
html.th-clean .wda-quote .wda-eyebrow { color: rgba(255, 255, 255, .8); }
html.th-clean .wda-tagline { font-weight: 800; }
html.th-clean .lgb-pts i, html.th-clean .wda-feats i { background: rgba(255, 255, 255, .2); }
html.th-clean .lgb-shot .ok-frame { box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
html.th-clean .lgb-float, html.th-clean .lg-card { border-radius: 8px; animation: none; }
html.th-clean .lgb-float span { background: var(--bs-primary); border-radius: 8px; }
html.th-clean #mb_login .wda-box { border: 0; border-radius: 8px; box-shadow: var(--bs-shadow-lg); }
html.th-clean #mb_login .wda-field .frm_input, html.th-clean .wdr-form .frm_input, html.th-clean .mbskin .frm_input { border-radius: 4px; }
html.th-clean #mb_login .wda-submit, html.th-clean .register.wdr .btn_submit, html.th-clean .mbskin .btn_submit, html.th-clean .new_win .btn_submit { border-radius: 4px; box-shadow: none; }
html.th-clean #mb_login .wda-submit:hover, html.th-clean .register.wdr .btn_submit:hover, html.th-clean .mbskin .btn_submit:hover { background: var(--bs-primary-d); }
html.th-clean #mb_login #sns_login .sns-icon, html.th-clean .register.wdr .btn_close { border-radius: 4px; }
/* 6.26.0 기능 탭 화면 열넷 더(inc/ok_mocks.php — leave · report · screen · notice · ask · alarm · sec · remote · pay · org · asset · api · ftime · youtube) — okm-* 만 */
.okm-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #1a5fe0; vertical-align: middle; }
.okm-dot.is-away { background: #94a3b8; }
.okm-dot.is-idle { background: #e5484d; }
.okm-w52 { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.okm-w52 li { display: grid; grid-template-columns: 42px minmax(0, 1fr) 30px; align-items: center; gap: 8px; font-size: 11px; }
.okm-w52 i { display: block; height: 9px; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #4d8bff, #1a5fe0); }
.okm-w52 i.is-warn { background: linear-gradient(90deg, #f5a524, #e8711c); }
.okm-w52 b { font-size: 11px; text-align: right; }
.okm-t3 .okm-tr { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .8fr)); gap: 6px; font-size: 11px; }
.okm-t5 .okm-tr { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) repeat(3, minmax(0, .9fr)); gap: 8px; font-size: 11px; }
.okm-t5 .okm-tr > span:nth-child(n+3) { text-align: right; }
.okm-tr .is-muted { color: #7a869e; }
.okm-heat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.okm-heat s { aspect-ratio: 1; border-radius: 3px; background: #eef2f8; }
.okm-heat s.h1 { background: #cfe0fd; } .okm-heat s.h2 { background: #9bbffb; } .okm-heat s.h3 { background: #5b95ff; } .okm-heat s.h4 { background: #1a5fe0; }
.okm-scr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.okm-sc p { display: flex; align-items: center; gap: 6px; margin: 5px 0 0 !important; font-size: 11px !important; color: #3d4a66 !important; }
.okm-sc p small { margin-left: auto; color: #98a2b6; }
.okm-sc-img { position: relative; display: grid; align-content: start; gap: 5px; padding: 10px; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #dbe6fb, #eef3fc); border: 1px solid #d6e2f7; border-radius: 8px; overflow: hidden; }
.okm-sc-img i { display: block; height: 5px; background: #fff; border-radius: 3px; }
.okm-sc-img i:first-child { width: 55%; background: rgba(26, 95, 224, .55); }
.okm-sc-img i:last-child { width: 75%; }
.okm-sc-img.is-sheet { background: linear-gradient(160deg, #d8f0e2, #eef8f2); border-color: #c9e8d6; }
.okm-sc-img.is-sheet i:first-child { background: rgba(18, 161, 80, .55); }
.okm-sc-img.is-mail { background: linear-gradient(160deg, #fdeccf, #fff6e5); border-color: #fde2b0; }
.okm-sc-img.is-mail i:first-child { background: rgba(232, 113, 28, .55); }
.okm-sc-img.is-lock { background: #1e2a44; border-color: #1e2a44; }
.okm-sc-img.is-lock i { opacity: 0; }
.okm-sc-img em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(255, 255, 255, .7); }
.okm-shots-line { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #7a869e; }
.okm-shots-line > span { margin-right: 4px; font-weight: 700; }
.okm-shots-line s { padding: 3px 7px; text-decoration: none; background: #fff; border: 1px solid #e3e9f4; border-radius: 99px; }
.okm-shots-line s.is-on { color: #fff; background: #1a5fe0; border-color: #1a5fe0; }
.okm-form { display: grid; gap: 7px; }
.okm-form > span { display: grid; gap: 3px; padding: 6px 9px; background: #f8fafd; border: 1px solid #e3e9f4; border-radius: 8px; }
.okm-form b { font-size: 11.5px; }
.okm-pos { display: grid !important; grid-template-columns: repeat(3, 14px); gap: 3px; }
.okm-pos i { height: 10px; background: #e3e9f4; border-radius: 2px; }
.okm-pos i.is-on { background: #1a5fe0; }
.okm-pop-wrap { display: flex; align-items: center; justify-content: center; padding: 14px 8px; background: repeating-linear-gradient(0deg, #eef2f8 0 8px, #f6f8fc 8px 16px); border-radius: 8px; }
.okm-pop { width: 82%; padding: 10px 12px; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px rgba(13, 40, 90, .18); }
.okm-pop p { margin: 0 0 6px !important; font-size: 10.5px !important; line-height: 1.5 !important; color: #3d4a66 !important; }
.okm-pop .okm-pop-h { display: flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 800; color: #1e2a44 !important; }
.okm-pop .okm-logo { width: 20px; height: 20px; margin: 0; font-size: 10px; border-radius: 6px; }
.okm-pop-btn { display: block; padding: 5px; font-size: 11px; font-weight: 700; text-align: center; color: #fff; background: #1a5fe0; border-radius: 7px; }
.okm-prog { height: 8px; background: #eef2f8; border-radius: 5px; overflow: hidden; }
.okm-prog i { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, #4d8bff, #1a5fe0); }
.okm-askcard { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; text-align: center; background: #0a1f44; border-radius: 12px; color: #fff; }
.okm-askcard b { font-size: 14px; }
.okm-askcard small { color: rgba(255, 255, 255, .7); }
.okm-askcard div { display: flex; gap: 8px; }
.okm-askcard s { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 16px; font-weight: 800; text-decoration: none; color: #0a1f44; background: #fff; border-radius: 9px; }
.okm-askcard s.is-on { color: #fff; background: #1a5fe0; box-shadow: 0 0 0 3px rgba(77, 139, 255, .45); }
.okm-askcard em { font-size: 10.5px; font-style: normal; color: #f5a524; }
.okm-log i.fa-times { color: #e5484d; background: #fdecec; }
.okm-rule.is-sm { grid-template-columns: 26px minmax(0, 1fr) 0 30px; padding: 5px 8px; }
.okm-rule.is-sm .okm-rico { width: 26px; height: 26px; }
.okm-phone { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #0f172a; border-radius: 16px; }
.okm-phone-top { display: flex; justify-content: space-between; padding: 0 4px 2px; font-size: 10.5px; color: rgba(255, 255, 255, .75); }
.okm-noti { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; background: rgba(255, 255, 255, .94); border-radius: 10px; }
.okm-noti > i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11px; color: #fff; background: #1a5fe0; border-radius: 7px; }
.okm-noti.is-red > i { background: #e5484d; }
.okm-noti span { display: grid; min-width: 0; }
.okm-noti b { font-size: 11px; }
.okm-noti small { font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-rm { display: grid; gap: 8px; }
.okm-rm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; font-size: 11px; background: #fff; border: 1px solid #e3e9f4; border-radius: 10px; }
.okm-rm-bar > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.okm-rm-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.okm-rm-tools i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11px; color: #3d4a66; background: #f1f5f9; border-radius: 6px; }
.okm-rm-tools s { padding: 4px 9px; font-size: 10.5px; font-weight: 700; text-decoration: none; color: #fff; background: #e5484d; border-radius: 6px; }
.okm-rm-screen { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7.5; background: linear-gradient(135deg, #1d4ed8, #0a1f44); border-radius: 10px; }
.okm-rm-win { display: grid; gap: 6px; width: 46%; padding: 10px 12px; background: #fff; border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.okm-rm-win p { display: flex; align-items: center; gap: 4px; margin: 0 0 4px !important; font-size: 11px !important; font-weight: 800; color: #1e2a44 !important; }
.okm-rm-win p i { width: 6px; height: 6px; border-radius: 50%; background: #e3e9f4; }
.okm-rm-win > span { height: 7px; background: #eef2f8; border-radius: 4px; }
.okm-rm-win > span.is-short { width: 60%; }
.okm-rm-win em { justify-self: end; padding: 3px 12px; font-size: 10.5px; font-style: normal; font-weight: 700; color: #fff; background: #1a5fe0; border-radius: 6px; }
.okm-rm-cur { position: absolute; left: 66%; top: 70%; font-size: 16px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.okm-orgc { display: grid; gap: 14px; justify-items: center; }     /* .okm-org 는 화면 틀 자체 클래스(okm okm-org)라 다른 이름 */
.okm-org-top { position: relative; }
.okm-org-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; padding-top: 14px; border-top: 2px solid #d6e2f7; }
.okm-org-col { display: grid; align-content: start; gap: 6px; }
.okm-ob { display: flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 11px; background: #fff; border: 1px solid #e3e9f4; border-radius: 8px; }
.okm-ob small { margin-left: auto; color: #98a2b6; }
.okm-ob.is-head { padding: 8px 14px; border-color: #1a5fe0; box-shadow: 0 6px 14px rgba(26, 95, 224, .15); }
.okm-ob.is-head b { font-size: 12.5px; }
.okm-ob.is-dept { color: #fff; background: #0a1f44; border-color: #0a1f44; }
.okm-ob.is-dept small { color: rgba(255, 255, 255, .7); }
.okm-spec { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.okm-spec li { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11px; }
.okm-spec b { display: grid; gap: 4px; font-size: 11px; }
.okm-spec i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: #1a5fe0; }
.okm-wg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.okm-wg > div { padding: 7px 9px; background: #f8fafd; border: 1px solid #e3e9f4; border-radius: 8px; }
.okm-wg b { display: block; font-size: 18px; font-weight: 800; color: #1a5fe0; }
.okm-wg-b b { color: #64748b; }
.okm-wg-c { grid-column: 1 / -1; }
.okm-wg-c p { display: flex; align-items: center; gap: 6px; margin: 3px 0 0 !important; font-size: 11px !important; color: #3d4a66 !important; }
.okm-code { display: block; padding: 7px 10px; font: 600 10.5px/1.4 Consolas, monospace; color: #c7d7fe; background: #0f172a; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okm-frule { grid-template-columns: 30px minmax(0, 1fr) auto 64px; }
.okm-frule > span:nth-child(2) { display: grid; gap: 3px; }
.okm-fbar { display: block; width: var(--w); height: 5px; border-radius: 3px; background: linear-gradient(90deg, #4d8bff, #1a5fe0); }
.okm-fleft { font-size: 11px; text-align: right; white-space: nowrap; }
.okm-n { display: inline-block; min-width: 16px; margin-left: 3px; padding: 0 4px; font-size: 9.5px; font-style: normal; line-height: 16px; text-align: center; color: #fff; background: #e5484d; border-radius: 99px; }
.okm-yt .okm-tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, .8fr) auto; }
.okm-alert .okm-pill { margin-left: 4px; }
@media (max-width: 600px) {
    .okm-t3 .okm-tr { grid-template-columns: minmax(0, 1fr) auto; }
    .okm-t3 .okm-tr > span:nth-child(3) { display: none; }
    .okm-t5 .okm-tr { grid-template-columns: minmax(0, 1fr) auto; }
    .okm-t5 .okm-tr > span:nth-child(2), .okm-t5 .okm-tr > span:nth-child(3), .okm-t5 .okm-tr > span:nth-child(4) { display: none; }
    .okm-yt .okm-tr { grid-template-columns: minmax(0, 1fr) auto; }
    .okm-frule { grid-template-columns: 30px minmax(0, 1fr) 60px; }
    .okm-frule .okm-seg { display: none; }
    .okm-rm-tools i { display: none; }
    .okm-org-row { grid-template-columns: minmax(0, 1fr); }
}

/* 6.26.0 기능 탭 좌우로 넘기기(index.php — 판을 끌거나 밀어 앞 · 뒤 기능) · 휴대폰은 탭을 한 줄로 옆으로 밀기 */
.ok-panes { position: relative; touch-action: pan-y; }
.ok-panes.is-drag { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.ok-panes.is-drag .ok-pane:not([hidden]) { transition: none; }
.ok-pane { transition: transform .25s ease, opacity .25s ease; }
.ok-pane.is-in-l { animation: ok-in-l .3s ease; }
.ok-pane.is-in-r { animation: ok-in-r .3s ease; }
@keyframes ok-in-l { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes ok-in-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.ok-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.ok-nav button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; color: var(--bs-ink, #1e2a44); background: #fff; border: 1px solid #dbe3f0; border-radius: 50%; cursor: pointer; }
.ok-nav button:hover { border-color: var(--bs-primary, #1a5fe0); color: var(--bs-primary, #1a5fe0); }
.ok-dots { display: flex; gap: 6px; }
.ok-dots i { width: 7px; height: 7px; border-radius: 99px; background: #cbd5e1; transition: width .2s, background .2s; }
.ok-dots i.is-on { width: 22px; background: var(--bs-primary, #1a5fe0); }
@media (max-width: 768px) {
    .ok-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ok-tabs::-webkit-scrollbar { display: none; }
    .ok-tabs button { flex: none; scroll-snap-align: center; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ok-pane, .ok-pane.is-in-l, .ok-pane.is-in-r { transition: none; animation: none; } }
@media (min-width: 601px) { html :is(.okm-t3, .okm-t5, .okm-yt) .okm-tr > span:nth-child(3) { display: block; } }     /* 6.26.0 넓은 화면 셋째 칸 숨김(활동 막대용 규칙)에서 이 표들은 뺌 */
/* 6.27.0 기능 탭 그림 = 실제 대시보드 디자인(inc/ok_mocks.php — oks-* 만). 색은 실제 화면에서 읽은 값:
   컴퍼니 오피스 블루(왼쪽 메뉴 #16325f · 고른 메뉴 #2f73c0 · 카드 머리 띠 #2259aa → #1b4f9c · 바탕 #edf1f7) / 패밀리 청록(흰 메뉴 · #0f9f8f · 카드 머리 청록 글자) */
.oks { --a: #1c5fbd; --a-on: #2f73c0; --side: #16325f; --side-t: #cfdcf0; --bg: #edf1f7; --line: #d3dcea; --t: #1a2333; --mut: #62708a; --p2: #f1f5fb;
    --strip: linear-gradient(#2259aa, #1b4f9c); --r: 6px; --br: 3px; --work: #1f66d1; --non: #e5484d; --away: #94a3b8; --warn: #d97706; --ok: #16a34a;
    display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 380px; font: 400 10.5px/1.45 Pretendard, "Malgun Gothic", sans-serif; color: var(--t); background: var(--bg); text-align: left; }
.oks.oks-ed-family { --a: #0f9f8f; --a-on: #0f9f8f; --side: #ffffff; --side-t: #2c4a50; --bg: #f3f5f9; --line: #e1e6ee; --t: #1c2230; --mut: #6b7486; --p2: #f5f7fb;
    --strip: none; --r: 10px; --br: 8px; --work: #0f9f8f; }
.oks * { box-sizing: border-box; }
.oks i, .oks s, .oks em { font-style: normal; text-decoration: none; }
.oks b { font-weight: 700; }
.oks small { font-size: 9.5px; color: var(--mut); }
.oks p { margin: 0; }
.oks ul, .oks ol { margin: 0; padding: 0; list-style: none; }
/* 왼쪽 메뉴 */
.oks-side { padding: 8px 0; background: var(--side); color: var(--side-t); border-right: 1px solid rgba(0, 0, 0, .06); overflow: hidden; }
.oks-ed-family .oks-side { border-right-color: #dcecea; }
.oks-brand { display: flex; align-items: center; gap: 6px; padding: 2px 10px 10px; }
.oks-brand b { font-size: 14px; font-weight: 900; letter-spacing: .5px; color: #fff; }
.oks-ed-family .oks-brand b { color: #0b6b62; }
.oks-logo-s { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #4b7bff, #1d3fb8); border-radius: 6px; }
.oks-ed-family .oks-logo-s { background: linear-gradient(135deg, #22c3b0, #0b7d72); }
.oks-menu li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; white-space: nowrap; overflow: hidden; }
.oks-g { font-weight: 700; }
.oks-g.is-open { color: #fff; background: rgba(255, 255, 255, .06); }
.oks-ed-family .oks-g.is-open { color: #0b6b62; background: #eef8f6; }
.oks-g.is-on { color: #fff !important; background: var(--a-on) !important; border-radius: 0 12px 12px 0; margin-right: 8px; }
.oks-ic { flex: none; width: 14px; text-align: center; font-size: 10.5px; }
.oks-gt { overflow: hidden; text-overflow: ellipsis; }
.oks-k { position: relative; padding-left: 26px !important; font-size: 10px; opacity: .85; }
.oks-k::before { content: ''; position: absolute; left: 14px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border: 1px solid currentColor; border-radius: 50%; }
.oks-k.is-on { opacity: 1; color: #fff; font-weight: 700; background: var(--a-on); margin-right: 8px; border-radius: 0 12px 12px 0; }
.oks-k.is-on::before { background: #fff; border-color: #fff; }
/* 위 막대 · 내용 */
.oks-main { display: flex; flex-direction: column; min-width: 0; }
.oks-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.oks-top > b { font-size: 12.5px; white-space: nowrap; }
.oks-edsw { display: inline-flex; gap: 1px; padding: 2px; background: var(--p2); border: 1px solid var(--line); border-radius: 99px; }
.oks-edsw s { padding: 1px 7px; font-size: 9.5px; font-weight: 700; color: var(--mut); border-radius: 99px; }
.oks-edsw s.is-on { color: #fff; background: var(--a); }
.oks-ed-family .oks-edsw s.is-on { background: #0f9f8f; }
.oks-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--a); border-radius: 50%; }
.oks-av.is-lg { width: 30px; height: 30px; font-size: 12px; }
.oks-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-width: 0; }
/* 6.43.1 화면 그림이 카드(액자) 아래까지 차게 — 내용이 짧으면 마지막 줄(카드)이 늘어남(사용자 2026-10-14 '레이아웃에 화면 하단까지 채워 줘, 없어 보여') */
.oks-main { min-height: 0; }
.oks-body { flex: 1 1 auto; }
.oks-body > :last-child { flex: 1 1 auto; }
.oks-grow { flex: 1; }
/* 카드 — 컴퍼니 = 파란 띠 머리, 패밀리 = 청록 글자 머리 */
.oks-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(20, 40, 80, .06); }
.oks-card > h4 { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 9px; font-size: 11px; font-weight: 700; color: #fff; background: var(--strip); }
.oks-card > h4 small { color: rgba(255, 255, 255, .78); font-weight: 400; }
.oks-ed-family .oks-card > h4 { color: #0b7d72; background: none; border-bottom: 1px solid var(--line); }
.oks-ed-family .oks-card > h4 small { color: var(--mut); }
.oks-hr { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.oks-cb { padding: 8px 9px; }
.oks-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oks-row2.is-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.oks-row2.is-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
/* 단추 · 뱃지 · 막대 */
.oks-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.oks-btn { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 19px; padding: 0 7px; font-size: 9.5px; font-weight: 600; color: #1b3a6b; background: #fff; border: 1px solid #b8c7de; border-radius: var(--br); white-space: nowrap; }
.oks-ed-family .oks-btn { color: #0b6b62; border-color: #cfe3e0; }
.oks-btn.is-p { color: #fff; background: var(--a); border-color: var(--a); }
.oks-btn.is-danger { color: #e5484d; border-color: #f4b4b6; }
.oks-btn.is-warn { color: #8a4b00; background: #fff4e5; border-color: #f5c77e; }
.oks-mon { padding: 0 4px; font-size: 11px; }
.oks-n { display: inline-block; min-width: 13px; padding: 0 3px; font-size: 8.5px; line-height: 13px; text-align: center; color: #3a2800; background: #ffb020; border-radius: 99px; }
.oks-n.is-b { color: var(--a); background: #fff; }
.oks-b { display: inline-flex; align-items: center; height: 15px; padding: 0 6px; font-size: 9px; font-weight: 700; white-space: nowrap; color: var(--mut); background: var(--p2); border-radius: 99px; }
.oks-b.is-work { color: var(--work); background: color-mix(in srgb, var(--work) 12%, #fff); }
.oks-b.is-ok { color: #15803d; background: #e7f7ee; }
.oks-b.is-non, .oks-b.is-red { color: #d93036; background: #fdecec; }
.oks-b.is-warn { color: #a15c00; background: #fff4e5; }
.oks-b.is-away, .oks-b.is-off { color: #64748b; background: #eef1f5; }
.oks-b.is-cat { color: #1e3a6e; background: #e8eef9; }
.oks-b.is-live { gap: 3px; color: #e5484d; background: #fdecec; }
.oks-b.is-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #e5484d; animation: oks-blink 1.4s infinite; }
@keyframes oks-blink { 50% { opacity: .25; } }
.oks-bar { display: block; height: 6px; background: #eef2f8; border-radius: 99px; overflow: hidden; }
.oks-bar s { display: block; height: 100%; background: var(--work); border-radius: 99px; }
.oks-bar.is-warn s { background: #f59e0b; }
.oks-bar.is-non s { background: #e5484d; }
.oks-bar.is-none s { background: #94a3b8; }
.oks-dot { display: inline-block; flex: none; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--work); vertical-align: middle; }
.oks-dot.is-away, .oks-dot.is-off { background: #94a3b8; }
.oks-dot.is-off { background: transparent; border: 1px solid #94a3b8; }
.oks-dot.is-non { background: #e5484d; }
.oks-sw { position: relative; display: inline-block; flex: none; width: 24px; height: 13px; background: #cbd5e1; border-radius: 99px; }
.oks-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; background: #fff; border-radius: 50%; }
.oks-sw.is-on { background: var(--a); }
.oks-sw.is-on::after { left: 13px; }
.oks-seg { display: inline-flex; flex: none; padding: 2px; background: var(--p2); border-radius: 6px; }
.oks-seg s { padding: 1px 5px; font-size: 9px; color: #98a2b6; border-radius: 4px; }
.oks-seg s.is-on { font-weight: 800; color: var(--a); background: #fff; box-shadow: 0 1px 2px rgba(15, 30, 60, .14); }
.oks-seg s.is-on.is-warn { color: #b45309; }
.oks-seg s.is-on.is-red { color: #e5484d; }
.oks-chip { display: inline-flex; align-items: center; gap: 2px; height: 19px; padding: 0 7px; font-size: 9.5px; background: #fff; border: 1px solid var(--line); border-radius: var(--br); white-space: nowrap; }
.oks-chip.is-none { color: var(--mut); }
.oks-tabs { display: flex; align-items: center; gap: 3px; margin-bottom: 6px; }
.oks-tabs s { padding: 2px 7px; font-size: 9.5px; font-weight: 600; color: var(--mut); background: #fff; border: 1px solid var(--line); border-radius: var(--br); }
.oks-tabs s.is-on { color: #fff; background: var(--a); border-color: var(--a); }
.oks-tabs-r { margin-left: auto; }
.oks-info, .oks-note { font-size: 9.5px; color: var(--mut); }
.oks-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 6px !important; font-size: 10px; }
.oks-mini .oks-bar { flex: 1; min-width: 60px; }
/* 표 */
.oks-t { width: 100%; border-collapse: collapse; font-size: 9.5px; table-layout: auto; }
.oks-t th { padding: 4px 5px; font-weight: 700; color: var(--mut); text-align: left; background: var(--p2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.oks-t td { padding: 4px 5px; border-bottom: 1px solid #eef2f8; vertical-align: middle; white-space: nowrap; }
.oks-t tr:last-child td { border-bottom: 0; }
.oks-t td.oks-th { font-weight: 700; color: var(--t); }
.oks-t td.oks-th small { display: block; font-weight: 400; }
.oks-t td.is-num { text-align: right; }
.oks-t td.is-mut { color: var(--mut); }
.oks-t td .oks-bar { min-width: 40px; }
.oks-t td small { margin-left: 3px; }
.oks-t.is-grid td { text-align: center; font-size: 9px; line-height: 1.25; color: #3d4a66; }
.oks-t.is-grid td.oks-th { text-align: left; }
.oks-t.is-grid td.is-wk { background: #fdf3f4; }
.oks-t.is-grid .is-late { color: #e5484d; }
.oks-t.is-w52 td:last-child { min-width: 80px; }
.oks-t.is-w52 td:last-child small { display: block; margin: 2px 0 0; }
.oks-t.is-sw td:not(:first-child), .oks-t.is-sw th:not(:first-child) { text-align: center; }
/* 화면마다 */
.oks-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
.oks-kpi > div { padding: 5px 7px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--work); border-radius: 4px; }
.oks-kpi > div.is-away { border-top-color: #94a3b8; }
.oks-kpi > div.is-off { border-top: 3px dashed #94a3b8; }
.oks-kpi > div.is-non { border-top-color: #e5484d; }
.oks-kpi b { display: block; font-size: 16px; line-height: 1.2; color: var(--work); }
.oks-kpi .is-away b, .oks-kpi .is-off b { color: #64748b; }
.oks-kpi .is-non b { color: #e5484d; }
.oks-ppl li, .oks-rl li, .oks-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid #eef2f8; }
.oks-ppl li:first-child, .oks-rl li:first-child, .oks-list li:first-child { border-top: 0; }
.oks-ppl li .oks-b, .oks-list li .oks-b { margin-left: auto; }
.oks-rl li span { flex: 1; }
.oks-who { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.oks-who small { margin-left: 4px; }
.oks-list li small { margin-left: 4px; }
.oks-tl > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 4px; }
.oks-tl span, .oks-day, .oks-week span { position: relative; display: block; height: 10px; background: #eef2f8; border-radius: 3px; overflow: hidden; }
.oks-tl span > s, .oks-day > s, .oks-week span > s { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #4d8bff, var(--work)); border-radius: 3px; }
.oks-ed-family .oks-day > s { background: linear-gradient(90deg, #34c7b6, #0f9f8f); }
.oks-tl span > em, .oks-day > em, .oks-week span > em { position: absolute; top: 0; bottom: 0; width: 5%; background: #f5a524; }
.oks-day > u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #e5484d; }
.oks-day { height: 14px; }
.oks-axis { display: flex; justify-content: space-between; margin: 2px 0 0 46px !important; font-size: 8.5px; color: #98a2b6; }
.oks-day + .oks-axis { margin-left: 0 !important; }
.oks-week > div { display: grid; grid-template-columns: 16px minmax(0, 1fr) 70px; align-items: center; gap: 6px; margin-bottom: 4px; }
.oks-week + .oks-axis, .oks-week .oks-axis { margin-left: 22px !important; margin-right: 76px !important; }
.oks-mon + .oks-btn { margin-left: 0; }
.oks-askc { display: grid; justify-items: center; gap: 4px; padding: 10px; color: #fff; text-align: center; background: #0a1f44; border-radius: 10px; }
.oks-askc small { color: rgba(255, 255, 255, .7); }
.oks-askc p { display: flex; gap: 6px; }
.oks-askc s { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 12px; font-weight: 800; color: #0a1f44; background: #fff; border-radius: 6px; }
.oks-askc s.is-on { color: #fff; background: #1c5fbd; box-shadow: 0 0 0 2px rgba(77, 139, 255, .5); }
.oks-askc em { color: #f5a524; font-size: 9.5px; }
.oks-org { display: grid; justify-items: center; gap: 10px; }
.oks-orgrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; padding-top: 10px; border-top: 2px solid #d6e2f7; }
.oks-orgcol { display: grid; align-content: start; gap: 4px; }
.oks-ob { display: flex; align-items: center; gap: 3px; padding: 4px 7px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.oks-ob small { margin-left: auto; }
.oks-ob.is-head { padding: 6px 14px; border-color: var(--a); box-shadow: 0 4px 10px rgba(28, 95, 189, .15); }
.oks-ob.is-head small { margin-left: 8px; }
.oks-ob.is-dept { color: #fff; background: var(--strip), var(--a); border-color: transparent; }
.oks-ob.is-dept small { color: rgba(255, 255, 255, .8); }
.oks-sheet { padding: 8px 10px; background: #fff; border: 1px solid #c9d3e3; box-shadow: 0 2px 6px rgba(20, 40, 80, .08); }
.oks-sheet-h { margin-bottom: 4px !important; font-size: 12px; font-weight: 800; text-align: center; }
.oks-sheet-h small { margin-left: 4px; }
.oks-sheet-m { display: flex; justify-content: space-between; margin-bottom: 4px !important; font-size: 9.5px; }
.oks-sheet-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.oks-sheet-g > div { border: 1px solid #e3e9f4; }
.oks-sheet-g p { padding: 2px 5px; font-weight: 700; background: var(--p2); }
.oks-sheet-g span { display: flex; justify-content: space-between; padding: 2px 5px; font-size: 9px; border-top: 1px solid #eef2f8; }
.oks-sheet-t { margin-top: 5px !important; text-align: right; font-size: 10.5px; }
.oks-hcard { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.oks-hcard > div { display: grid; flex: 1; min-width: 0; }
.oks-hico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; background: var(--a); border-radius: 6px; }
.oks-rank li, .oks-apps li { display: grid; grid-template-columns: 14px 44px minmax(0, 1fr) 34px; align-items: center; gap: 6px; padding: 2px 0; }
.oks-rank em { font-weight: 800; color: var(--mut); }
.oks-rank small { text-align: right; }
.oks-apps li { grid-template-columns: 18px minmax(0, 1fr) 30px; }
.oks-apps em { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 9px; font-weight: 800; color: #fff; background: var(--work); border-radius: 5px; }
.oks-apps em.is-none { background: #94a3b8; }
.oks-apps em.is-non { background: #e5484d; }
.oks-apps span { display: grid; gap: 2px; min-width: 0; font-weight: 600; }
.oks-apps b { text-align: right; }
.oks-donuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.oks-donuts span { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; background: var(--p2); border-radius: 6px; }
.oks-donut { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--work) calc(var(--p) * 1%), #cbd5e1 0 calc(var(--p) * 1% + 20%), #e5484d 0); }
.oks-donut::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.oks-donut b { position: relative; z-index: 1; font-size: 9.5px; }
.oks-donut.is-lg { width: 70px; height: 70px; flex-direction: column; }
.oks-donut.is-lg::after { inset: 11px; }
.oks-donut.is-lg b { font-size: 13px; color: var(--work); }
.oks-donut.is-lg small { position: relative; z-index: 1; }
.oks-donut-wrap { display: flex; align-items: center; gap: 10px; }
.oks-legend { display: grid; flex: 1; gap: 4px; }
.oks-legend li { display: flex; align-items: center; gap: 5px; }
.oks-legend li i { width: 8px; height: 8px; border-radius: 2px; background: var(--work); }
.oks-legend li i.is-none { background: #cbd5e1; }
.oks-legend li i.is-non { background: #e5484d; }
.oks-legend b { margin-left: auto; }
.oks-prof { display: flex; align-items: center; gap: 7px; padding: 7px 9px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.oks-prof > span:not(.oks-grow):not(.oks-stat) { display: grid; }
.oks-stat { display: grid; justify-items: end; }
.oks-stat .is-red { color: #e5484d; }
.oks-log li { padding: 3px 0; border-top: 1px solid #eef2f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oks-log li:first-child { border-top: 0; }
.oks-log time { display: inline-block; width: 30px; color: #98a2b6; font-size: 9px; }
.oks-sites li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 54px auto auto; align-items: center; gap: 5px; padding: 4px 0; border-top: 1px solid #eef2f8; }
.oks-sites li:first-child { border-top: 0; }
.oks-sites em { color: var(--mut); font-weight: 700; }
.oks-sites span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; min-width: 0; }
.oks-sites span .oks-bar { flex: 1 0 100%; height: 4px; }
.oks-sites small { text-align: right; }
.oks-scr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oks-sc p { display: flex; align-items: center; gap: 2px; margin-top: 3px !important; }
.oks-sc p small { margin-left: auto; }
.oks-sc-img { position: relative; display: grid; align-content: start; gap: 4px; padding: 8px; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #dbe6fb, #eef3fc); border: 1px solid #d6e2f7; border-radius: 5px; overflow: hidden; }
.oks-sc-img i { display: block; height: 4px; background: #fff; border-radius: 2px; }
.oks-sc-img i:first-child { width: 55%; background: rgba(28, 95, 189, .55); }
.oks-sc-img i:nth-child(3) { width: 75%; }
.oks-sc-img.is-sheet { background: linear-gradient(160deg, #d8f0e2, #eef8f2); border-color: #c9e8d6; }
.oks-sc-img.is-sheet i:first-child { background: rgba(22, 163, 74, .5); }
.oks-sc-img.is-mail { background: linear-gradient(160deg, #fdeccf, #fff6e5); border-color: #fde2b0; }
.oks-sc-img.is-mail i:first-child { background: rgba(217, 119, 6, .5); }
.oks-sc-img.is-game { background: linear-gradient(160deg, #5b4bd1, #2a1f78); border-color: #2a1f78; }
.oks-sc-img.is-game i { background: rgba(255, 255, 255, .35); }
.oks-sc-img.is-lock { background: #16325f; border-color: #16325f; }
.oks-sc-img.is-lock i { opacity: 0; }
.oks-sc-img.is-lock::after { content: '\1F512'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: .7; }
.oks-sc-img.is-big { aspect-ratio: 16 / 7; }
.oks-strip { display: flex; gap: 5px; overflow: hidden; }
.oks-strip span { display: grid; flex: 1; gap: 2px; padding: 2px; text-align: center; border: 1px solid transparent; border-radius: 4px; }
.oks-strip span.is-on { border-color: var(--a); background: #e8eef9; }
.oks-strip .oks-sc-img { display: block; padding: 0; }
.oks-pcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.oks-pc { display: grid; gap: 3px; justify-items: start; padding: 7px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--a); border-radius: 4px; }
.oks-pc p { display: flex; align-items: center; gap: 5px; }
.oks-cats { display: grid; gap: 5px; }
.oks-cat { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 7px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.oks-cat > em { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #e8f0fd; border-radius: 5px; }
.oks-ed-family .oks-cat > em { background: #e3f6f3; }
.oks-cat > span:not(.oks-seg) { display: grid; min-width: 0; }
.oks-form { display: grid; gap: 5px; }
.oks-form > span { display: grid; gap: 1px; padding: 4px 7px; background: var(--p2); border: 1px solid var(--line); border-radius: 5px; }
.oks-pos { display: grid; grid-template-columns: repeat(3, 12px); gap: 2px; }
.oks-pos s { height: 8px; background: #d6e0ef; border-radius: 2px; }
.oks-pos s.is-on { background: var(--a); }
.oks-pcdesk { position: relative; display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 10px; background: linear-gradient(135deg, #3b6fd8, #16325f); border-radius: 6px; }
.oks-pcdesk.is-kid { background: linear-gradient(135deg, #5b4bd1, #2a1f78); justify-content: flex-end; align-items: flex-end; }
.oks-pop { width: 80%; padding: 7px 9px; background: #fff; border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.oks-pop p { margin-bottom: 4px !important; font-size: 9.5px; color: #3d4a66; }
.oks-pop .oks-pop-h { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--t); }
.oks-pop s { display: block; padding: 3px; font-size: 9.5px; font-weight: 700; text-align: center; color: #fff; background: var(--a); border-radius: 5px; }
.oks-meet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.oks-meet span { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 8; background: #1e293b; border-radius: 6px; }
.oks-meet span.is-1 { background: #26334f; } .oks-meet span.is-2 { background: #2b2440; } .oks-meet span.is-3 { background: #1d3a3a; box-shadow: inset 0 0 0 2px #22c55e; }
.oks-meet em { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .18); border-radius: 50%; }
.oks-meet small { position: absolute; left: 6px; bottom: 4px; color: #fff; }
.oks-meetbar { display: flex; justify-content: center; gap: 5px; margin-top: 6px !important; }
.oks-meetbar s { padding: 3px 8px; font-size: 9.5px; background: #eef2f8; border-radius: 99px; }
.oks-meetbar s.is-end { color: #fff; background: #e5484d; }
.oks-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 6px; margin-bottom: 6px; background: #0f172a; border-radius: 6px; }
.oks-wg { padding: 5px 7px; background: #fff; border-radius: 5px; }
.oks-wg b { display: block; font-size: 15px; color: var(--work); }
.oks-wg.is-b b { color: #64748b; }
.oks-wg.is-c { grid-column: 1 / -1; }
.oks-code { display: block; padding: 5px 7px; font: 600 9.5px/1.4 Consolas, monospace; color: #c7d7fe; background: #0f172a; border-radius: 5px; white-space: nowrap; overflow: hidden; }
.oks-alarm li { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-left: 3px solid transparent; border-top: 1px solid #eef2f8; }
.oks-alarm li:first-child { border-top: 0; }
.oks-alarm li.is-new { border-left-color: var(--a); background: color-mix(in srgb, var(--a) 6%, #fff); }
.oks-alarm em { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; background: var(--p2); border-radius: 5px; }
.oks-alarm li > span:not(.oks-seg) { display: grid; flex: 1; min-width: 0; }
.oks-alarm li > span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oks-alarm time { flex: none; width: 30px; text-align: right; color: #98a2b6; font-size: 9px; }
.oks-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.oks-opts span { display: grid; gap: 1px; padding: 5px 7px; background: var(--p2); border: 1px solid var(--line); border-radius: 5px; }
.oks-rm { display: grid; gap: 6px; }
.oks-rm-bar { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.oks-rm-bar > s { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; font-size: 10px; background: var(--p2); border-radius: 4px; }
.oks-rm-scr { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; background: linear-gradient(135deg, #1d4ed8, #0a1f44); border-radius: 6px; }
.oks-rm-win { display: grid; gap: 4px; width: 46%; padding: 7px 9px; background: #fff; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.oks-rm-win p { font-weight: 800; }
.oks-rm-win i { height: 5px; background: #eef2f8; border-radius: 3px; }
.oks-rm-win i.is-short { width: 60%; }
.oks-rm-win s { justify-self: end; padding: 2px 9px; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--a); border-radius: 4px; }
.oks-rm-cur { position: absolute; left: 66%; top: 66%; color: #fff; font-size: 14px; transform: rotate(-120deg); }
.oks-kid { display: grid; gap: 5px; }
.oks-kid-h { display: flex; align-items: center; gap: 5px; }
.oks-left li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; gap: 5px; padding: 2px 0; }
.oks-left b { text-align: right; font-size: 9.5px; }
.oks-req { display: flex; align-items: center; gap: 5px; }
.oks-news li { display: flex; align-items: center; gap: 5px; padding: 5px 0; border-top: 1px solid #eef2f8; }
.oks-news li:first-child { border-top: 0; }
.oks-news em { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; color: #fff; font-size: 9px; background: #e5484d; border-radius: 5px; }
.oks-news li > span:not(.oks-seg) { display: grid; flex: 1; min-width: 0; }
.oks-weekbars { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.oks-weekbars span { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; }
.oks-weekbars s { width: 70%; background: linear-gradient(#34c7b6, #0f9f8f); border-radius: 3px 3px 0 0; }
.oks-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px; text-align: center; }     /* 6.30.2 좁은 카드에서 다섯 칸이 겹치던 것 — 넓이만큼 줄바꿈 */
.oks-styles span { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; padding: 6px 2px; border: 1px solid var(--line); border-radius: 6px; }
.oks-styles span.is-on { border-color: var(--a); background: #eef8f6; }
.oks-tb { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 2px 5px; font-size: 9px; font-weight: 800; line-height: 1.3; white-space: nowrap; color: #fff; background: #0f9f8f; border-radius: 4px; }
.oks-tb.is-1 { border-radius: 99px; }
.oks-tb.is-2 { border-radius: 2px; background: #2c4a50; }
.oks-tb.is-3 { width: 26px; height: 26px; padding: 0; line-height: 26px; border-radius: 50%; }
.oks-tb.is-4 { font-size: 11px; }
.oks-timer { display: grid; gap: 2px; width: 92px; padding: 6px 8px; color: #fff; background: rgba(15, 23, 42, .85); border-radius: 8px; }
.oks-timer span { font-size: 11px; font-weight: 800; color: #fbbf24; }
.oks-timer i { display: block; height: 4px; background: #f59e0b; border-radius: 2px; }
.oks-phone { display: grid; gap: 5px; padding: 8px; background: #0f172a; border-radius: 14px; }
.oks-phone-t { display: flex; justify-content: space-between; color: rgba(255, 255, 255, .75); font-size: 9.5px; }
.oks-noti { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px 7px; background: rgba(255, 255, 255, .95); border-radius: 9px; }
.oks-noti > i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #fff; background: #0f9f8f; border-radius: 6px; }
.oks-noti span { display: grid; min-width: 0; }
.oks-noti-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.oks-noti-a s { padding: 4px; font-size: 9.5px; font-weight: 700; text-align: center; color: #fff; background: rgba(255, 255, 255, .16); border-radius: 7px; }
/* 휴대폰 앱 */
.oks.oks-l-mobile { display: flex; align-items: center; justify-content: center; padding: 14px; background: linear-gradient(135deg, #e8eef9, #f6f9fd); }
.oks-mphone { width: 210px; overflow: hidden; background: var(--bg); border: 6px solid #0f172a; border-radius: 22px; box-shadow: 0 14px 30px rgba(15, 23, 42, .25); }
.oks-mtop { display: flex; align-items: center; gap: 5px; padding: 7px 8px; color: #fff; background: var(--side); }
.oks-mtop span { padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .3); }
.oks-mtop s { margin-left: auto; padding: 0 5px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; }
.oks-mbody { display: grid; gap: 6px; padding: 6px; }
.oks-mcard { padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.oks-mcard > p { display: flex; align-items: center; gap: 4px; margin-bottom: 4px !important; font-weight: 700; }
.oks-mcard .oks-kpi { margin: 0; gap: 3px; }
.oks-mcard .oks-kpi > div { padding: 3px 4px; }
.oks-mcard .oks-kpi b { font-size: 12px; }
.oks-mlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; text-align: center; }
.oks-mlinks span { display: grid; gap: 1px; padding: 5px 0; font-size: 13px; background: var(--p2); border-radius: 6px; }
/* 좁은 화면(휴대폰) — 왼쪽 메뉴는 아이콘만(실제 휴대폰 아이콘 메뉴처럼) · 덜 중요한 칸은 숨김 */
@media (max-width: 600px) {
    .oks { grid-template-columns: 34px minmax(0, 1fr); min-height: 0; }
    .oks-brand b, .oks-gt, .oks-k { display: none !important; }
    .oks-brand { justify-content: center; padding: 2px 0 8px; }
    .oks-menu li { justify-content: center; padding: 6px 0; }
    .oks-g.is-on, .oks-g.is-open { margin: 0 4px !important; border-radius: 6px !important; }
    .oks-edsw { display: none; }
    .oks-row2, .oks-row2.is-wide, .oks-row2.is-main { grid-template-columns: minmax(0, 1fr); }
    .oks-t th:nth-child(n+5), .oks-t td:nth-child(n+5) { display: none; }
    .oks-t.is-grid th:nth-child(n+5), .oks-t.is-grid td:nth-child(n+5) { display: none; }
    .oks-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oks-sites li { grid-template-columns: 12px minmax(0, 1fr) 54px; }
    .oks-sites li > .oks-btn { display: none; }
    .oks-opts, .oks-orgrow { grid-template-columns: minmax(0, 1fr); }
    .oks-styles { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
    .oks-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oks-bar-row .oks-btn:nth-child(n+5) { display: none; }
}
html.th-blue .lgb-shot .oks { min-height: 0; }     /* 로그인 화면 왼쪽 그림 */
/* 6.30.0 자동으로 알아서 — 공식 데이터 자동 연동 띠 + 카드(주요 기능 다음) */
.ok-auto { background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%); }
.ok-auto-apis { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.ok-auto-apis li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; background: #fff; border: 1px solid #cfdcf7; border-radius: 99px; box-shadow: 0 6px 18px rgba(13, 40, 90, .06); font-size: 14px; }
.ok-auto-apis b { color: var(--bs-ink, #111827); }
.ok-auto-apis span:not(.ok-auto-api-b) { color: var(--bs-ink-2, #4b5563); font-size: 13px; }
.ok-auto-api-b { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; background: var(--bs-primary, #1a5fe0); color: #fff; font-size: 12px; font-weight: 700; }
.ok-auto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ok-auto-grid > li { position: relative; padding: 22px 22px 20px; background: #fff; border: 1px solid #e3e9f5; border-radius: 16px; box-shadow: 0 10px 26px rgba(13, 40, 90, .06); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ok-auto-grid > li:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 16px 34px rgba(13, 40, 90, .12); }
.ok-auto-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ok-auto-h .bs-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--c); font-size: 18px; }
.ok-auto-h h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; color: var(--bs-ink, #111827); }
.ok-auto-tag { flex: none; padding: 2px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.ok-auto-grid ul { margin: 0; padding: 0; list-style: none; }
.ok-auto-grid ul li { display: flex; gap: 8px; padding: 4px 0; font-size: 14.5px; line-height: 1.5; color: var(--bs-ink-2, #374151); }
.ok-auto-grid ul li .fa { flex: none; margin-top: 4px; font-size: 12px; color: var(--c); }
@media (max-width: 1024px) { .ok-auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ok-auto-grid { grid-template-columns: minmax(0, 1fr); } .ok-auto-apis li { border-radius: 14px; } }

/* =====================================================================
 * 6.33.0 머리 메뉴 = 넓은 판(메가 메뉴) — 제품 ▾ · 기능 ▾ · 요금 · 고객지원 ▾ (head.php .cl-gnb · 다우오피스처럼, 사용자 2026-10-13)
 *   마우스를 올리면 머리 아래로 판이 펼쳐지고 칸(묶음)마다 메뉴, 판 아래 줄 = 모든 기능 · 무료 체험. 휴대폰 · 좁은 화면은 ☰ 안 접었다 펴는 목록
 * ===================================================================== */
@media (min-width: 1025px) {
    .cl-gnb { display: block !important; }
    .cl-util { display: flex !important; }
    .bs-burger { display: none !important; }
}
.cl-gnb { flex: 1; }
.cl-gnb > ul { display: flex; align-items: stretch; gap: 4px; height: 100%; margin: 0; padding: 0; list-style: none; }
.cl-gnb > ul > li { position: static; display: flex; align-items: center; height: var(--bs-header-h); }
.cl-gnb > ul > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 16px; font-weight: 800; color: #222; border-radius: 6px; }
.cl-gnb > ul > li > a .fa { font-size: 13px; color: #9aa3ae; transition: transform .2s, color .2s; }
.cl-gnb > ul > li.is-active > a, .cl-gnb > ul > li > a:hover { color: var(--bs-primary); background: none; }

.cl-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 950; background: #fff; border-top: 1px solid var(--bs-line); box-shadow: 0 18px 32px rgba(20, 30, 50, .08);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s; }
@media (hover: hover) {
    .cl-has:hover > .cl-mega, .cl-has:focus-within > .cl-mega { opacity: 1; visibility: visible; transform: none; }
    .cl-has:hover > a, .cl-has:focus-within > a { color: var(--bs-primary); }
    .cl-has:hover > a .fa, .cl-has:focus-within > a .fa { color: var(--bs-primary); transform: rotate(180deg); }
    #bs-header:has(.cl-has:hover)::after { opacity: 1; }
}
#bs-header::after { content: ''; position: fixed; left: 0; right: 0; top: var(--bs-header-h); bottom: 0; z-index: 940; background: rgba(20, 28, 40, .16); opacity: 0; pointer-events: none; transition: opacity .2s; }
.cl-mega-in { display: grid; gap: 12px 40px; max-width: var(--bs-max); margin: 0 auto; padding: 26px var(--bs-side) 28px; box-sizing: border-box; }
.cl-mega-feat { grid-template-columns: repeat(var(--cl-cols, 4), minmax(0, 1fr)); }
.cl-mega-prod { grid-template-columns: 400px 260px; }
.cl-mega-price { grid-template-columns: 400px; }     /* 6.275.7 요금 = 그림 + 제품 둘 */
.cl-mega-sup { grid-template-columns: 240px 240px; }
.cl-col { display: flex; flex-direction: column; min-width: 0; }
.cl-col-h { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #8a94a3; }
.cl-mega .cl-item { display: flex; align-items: center; gap: 10px; margin: 0 -10px; padding: 7px 10px; font-size: 14px; font-weight: 700; color: #333; white-space: normal; border-radius: 6px; }
.cl-mega .cl-item i { flex: none; width: 16px; font-size: 14px; text-align: center; color: #9aa3ae; transition: color .15s; }
.cl-mega .cl-item:hover { color: var(--bs-primary); background: var(--bs-soft); }
.cl-mega .cl-item:hover i { color: var(--bs-primary); }
.cl-mega .cl-card { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 14px 16px; color: #333; white-space: normal; border: 1px solid var(--bs-line); border-radius: 10px; transition: border-color .15s, background .15s; }
.cl-mega .cl-card:hover { border-color: var(--bs-primary); background: var(--bs-soft); }
.cl-mega .cl-card.is-cur { border-color: #b9d3ef; }
.cl-card-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; color: var(--bs-primary); background: var(--bs-primary-l); border-radius: 10px; }
.cl-card b { display: block; font-size: 15px; font-weight: 800; }
.cl-card small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--bs-muted); }
.cl-mega-foot { background: var(--bs-soft); border-top: 1px solid var(--bs-line); }
.cl-mega-foot > div { display: flex; flex-wrap: wrap; gap: 28px; max-width: var(--bs-max); margin: 0 auto; padding: 12px var(--bs-side); box-sizing: border-box; }
.cl-mega-foot a { padding: 0; font-size: 13px; font-weight: 700; color: #555; }
.cl-mega-foot a:hover { color: var(--bs-primary); }
.cl-mega-foot a .fa { margin-right: 4px; color: var(--bs-primary); }

/* 오른쪽 — 로그인 · 계정(내 문의 · 정보 수정 · 로그아웃) · 무료 체험 / 대시보드 */
.cl-util { align-items: center; gap: 10px; margin-left: auto; }
.cl-acc { position: relative; }
.cl-acc-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font-size: 22px; color: #7a8592; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.cl-acc-btn:hover, .cl-acc:focus-within .cl-acc-btn { color: var(--bs-primary); background: var(--bs-soft); }
.cl-acc-btn.has-nm { gap: 6px; width: auto; max-width: 180px; padding: 0 10px 0 6px; border-radius: 999px; }     /* 6.276.2 닉네임 */
.cl-acc-nm { overflow: hidden; font-size: 14px; font-weight: 700; color: var(--bs-ink); white-space: nowrap; text-overflow: ellipsis; }
.cl-acc-btn.has-nm:hover .cl-acc-nm, .cl-acc:focus-within .cl-acc-nm { color: var(--bs-primary); }
.cl-acc-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 960; display: flex; flex-direction: column; min-width: 160px; padding: 6px; background: #fff; border: 1px solid var(--bs-line); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(20, 30, 50, .12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.cl-acc:hover .cl-acc-menu, .cl-acc:focus-within .cl-acc-menu { opacity: 1; visibility: visible; transform: none; }
.cl-acc-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14px; font-weight: 700; color: #333; border-radius: 6px; }
.cl-acc-menu a:hover { color: var(--bs-primary); background: var(--bs-soft); }
.cl-acc-menu a .fa { width: 16px; color: #9aa3ae; text-align: center; }

/* ☰ 메뉴 — 제품 · 기능 · 고객지원은 접었다 펴는 목록 */
.cl-dnav details > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 18px; font-weight: 700; list-style: none; cursor: pointer; border-bottom: 1px solid var(--bs-line); }
.cl-dnav details > summary::-webkit-details-marker { display: none; }
.cl-dnav details > summary::after { content: '\f107'; font-family: FontAwesome; font-size: 16px; color: #9aa3ae; transition: transform .2s; }
.cl-dnav details[open] > summary::after { transform: rotate(180deg); }
.cl-dnav details > a { display: block; padding: 11px 4px 11px 14px; font-size: 15px; font-weight: 600; color: var(--bs-ink-2); border-bottom: 1px solid var(--bs-line); }
.cl-dnav details > a small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--bs-muted); }
.cl-dnav details[open] { background: var(--bs-soft); }
@media (max-width: 1280px) and (min-width: 1025px) {
    .cl-gnb > ul > li > a { padding: 8px 12px; }
    .cl-mega-in { gap: 12px 24px; }
}
/* 6.33.1 판 안 칸 · 아래 줄의 왼쪽 시작 = 머리 메뉴 첫 글자(제품) 자리(--cl-x — head.php 가 화면에서 잼) */
.cl-mega-in, .cl-mega-foot > div { padding-left: calc(var(--bs-side) + var(--cl-x, 0px)); }
.cl-mega-feat { gap: 12px 32px; }
/* 6.209.2 판 안 글은 줄바꿈 없이 — 기능 판 칸 = 글 폭(max-content) · 칸 수는 head.php 가 들어가는 만큼(--cl-n) */
.cl-mega .cl-item, .cl-mega .cl-card, .cl-mega .cl-col-h, .cl-mega-foot a { white-space: nowrap; }
.cl-mega-feat { grid-template-columns: repeat(var(--cl-n, var(--cl-cols, 4)), max-content); }
/* 6.209.2 판 왼쪽 그림 — 로고 · 갈래 단추 아래 빈 곳(--cl-x)에 첫 화면 2분할 그림(바탕 없이) · 자리가 좁으면 숨김(#bs-header.cl-nopic) */
.cl-mega-in { position: relative; }
.cl-mega-pic { position: absolute; top: 20px; bottom: 20px; left: var(--bs-side); display: flex; gap: 8px; width: calc(var(--cl-x, 0px) - 40px); pointer-events: none; }
.cl-mega-pic > span { flex: 1 1 0; min-width: 0; overflow: hidden; }     /* 바탕 없음(투명 그림 그대로 — 사용자 2026-10-26) */
.cl-mega-pic img { display: block; width: 100%; height: 100%; padding-top: 10px; box-sizing: border-box; object-fit: contain; object-position: center bottom; }
#bs-header.cl-nopic .cl-mega-pic { display: none; }
/* 6.210.5 판을 여유 있게(사용자 2026-10-27 '메뉴가 엄청 답답해 보여') — 칸 사이 · 줄 사이를 넓히고, 항목 글은 보통 굵기(묶음 이름만 굵게),
   칸은 글 폭을 지키면서 남는 폭을 나눠 가짐(오른쪽에 몰려 비던 것) · 아래 줄로 내려간 묶음과 사이를 띄움 · 그림은 조금 작게 · 위아래 여백 */
.cl-mega-in { padding-top: 30px; padding-bottom: 34px; }
.cl-mega-feat { gap: 30px 56px; grid-template-columns: repeat(var(--cl-n, var(--cl-cols, 4)), minmax(max-content, 1fr)); }
.cl-mega-prod, .cl-mega-sup, .cl-mega-price { column-gap: 56px; }
.cl-col-h { margin-bottom: 12px; font-size: 12.5px; font-weight: 700; color: #6b7686; }
.cl-mega .cl-item { gap: 12px; padding: 9px 10px; font-weight: 500; color: #3b4351; line-height: 1.35; }
.cl-mega .cl-item i { width: 18px; font-size: 15px; }
.cl-gnb .cl-mega a.cl-item { color: #3b4351; }
.cl-gnb .cl-mega a.cl-item:hover { color: var(--bs-primary); }
.cl-mega .cl-card b { font-weight: 700; }
.cl-mega-pic { top: 28px; bottom: 28px; width: min(250px, calc(var(--cl-x, 0px) - 64px)); }
/* 6.35.1 넓은 판 안 링크는 검정 · 마우스를 올린 것만 파랑 — '지금 메뉴는 파랑' 규칙(.bs-gnb .is-active a · li.is-active a)이 그 메뉴 아래 판 안 링크까지 모두 파랗게 칠하던 것 */
.cl-gnb .cl-mega a.cl-item, .cl-gnb .cl-mega a.cl-card { color: #333; background: none; }
.cl-gnb .cl-mega a.cl-item:hover, .cl-gnb .cl-mega a.cl-card:hover { color: var(--bs-primary); background: var(--bs-soft); }
.cl-gnb .cl-mega .cl-mega-foot a { color: #555; background: none; }
.cl-gnb .cl-mega .cl-mega-foot a:hover { color: var(--bs-primary); }

/* 6.37.0 첫 화면 넘김 · 주요 기능 탭의 화면 카드 크기를 모두 같게(사용자 2026-10-14 '카드의 높이와 넓이는 모두 동일하게') — 넓이 600 · 높이 440(휴대폰 380), 안 그림은 위부터 채우고 넘치면 자름.
   관리자 메인화면 관리 미리보기(bizsoft/feat_preview.php)도 같은 크기 — 크기를 바꾸면 그쪽 .ok-frame 도 */
.cl-hero, .ok-panes { --ok-card-w: 600px; --ok-card-h: 440px; }
.cl-slide-visual { display: flex; justify-content: flex-end; }
.cl-slide-visual > :is(.bs-mock, .cl-frame, .fm-visual), .ok-pane-visual > .ok-frame { box-sizing: border-box; width: min(100%, var(--ok-card-w)); height: var(--ok-card-h); max-height: none; overflow: hidden; }
.cl-slide-visual > :is(.bs-mock, .cl-frame), .ok-pane-visual > .ok-frame { display: flex; flex-direction: column; }
.cl-slide-visual > :is(.bs-mock, .cl-frame) > :not(.bs-mock-bar):not(.ok-frame-bar), .ok-pane-visual > .ok-frame > :not(.ok-frame-bar) { flex: 1 1 auto; min-height: 0; }
.cl-slide-visual .fm-visual .fm-phone { max-height: none; }
@media (min-width: 961px) { .ok-pane { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ok-card-w)); } }
@media (max-width: 960px) { .cl-slide-visual, .ok-pane-visual { display: flex; justify-content: center; } }
@media (max-width: 600px) { .cl-hero, .ok-panes { --ok-card-h: 380px; } }

/* 6.135.34 패밀리 첫 장 보호자 휴대폰 그림 — 카드 높이에서 아래가 딱 잘려 보이던 것(사용자 2026-10-16 '슬라이드 하단이 이상해 짤려') → 아래로 흐리게 사라짐 */
.cl-slide-visual > .fm-visual { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }

/* 6.135.37 자녀 휴대폰 화면 그림(oks 휴대폰 틀 — 위치 지도 · 타임라인 · 캡처 · 앱 · 스케줄 · 습관 · 메시지 …) */
.oks-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0 !important; }
.oks-acts small { color: var(--mut); font-size: 9px; margin-right: 2px; }
.oks-map { position: relative; height: 96px; overflow: hidden; background: linear-gradient(135deg, #eaf3ee, #e3eef6); border: 1px solid var(--line); border-radius: 6px; }
.oks-map.is-tall { height: 150px; }
.oks-map .oks-road { position: absolute; background: #fff; box-shadow: 0 0 0 1px #dfe7ef; }
.oks-map .oks-fence { position: absolute; border: 1.5px dashed #0f9f8f; border-radius: 12px; background: rgba(15, 159, 143, .10); }
.oks-map .oks-fence.is-b { border-color: #1f66d1; background: rgba(31, 102, 209, .10); }
.oks-map .oks-fence em { position: absolute; left: 6px; top: 3px; font-size: 8.5px; font-weight: 700; color: #0b7d72; }
.oks-map .oks-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #e5484d; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(229, 72, 77, .22); }
.oks-map .oks-pin.is-s { background: #1f66d1; box-shadow: 0 0 0 4px rgba(31, 102, 209, .2); }
.oks-map .oks-pin.is-e { background: #0f9f8f; box-shadow: 0 0 0 4px rgba(15, 159, 143, .22); }
.oks-map .oks-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.oks-tlv { list-style: none; margin: 0; padding: 0; }
.oks-tlv li { position: relative; display: grid; grid-template-columns: 34px 12px minmax(0, 1fr); align-items: start; gap: 5px; padding: 4px 0; }
.oks-tlv time { color: var(--mut); font-size: 9px; padding-top: 1px; }
.oks-tlv i { position: relative; width: 9px; height: 9px; margin-top: 2px; background: var(--a); border-radius: 50%; }
.oks-tlv li::after { content: ''; position: absolute; left: 41px; top: 14px; bottom: -4px; width: 0; border-left: 1.5px dashed #b8c7de; }
.oks-tlv li:last-child::after { display: none; }
.oks-tlv li.is-move i { background: #fff; border: 1.5px solid #94a3b8; }
.oks-tlv span { display: grid; min-width: 0; }
.oks-tlv span small { color: var(--mut); }
.oks-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.oks-thumbs figure { margin: 0; }
.oks-thumbs figure s { display: block; aspect-ratio: 9 / 14; background: linear-gradient(160deg, #dbe6fb, #eef3fc); border: 1px solid #d6e2f6; border-radius: 5px; }
.oks-thumbs figure.is-1 s { background: linear-gradient(160deg, #d8f0e2, #eef8f2); border-color: #c9e8d6; }
.oks-thumbs figure.is-2 s { background: linear-gradient(160deg, #5b4bd1, #2a1f78); border-color: #2a1f78; }
.oks-thumbs figure i { display: none; }
.oks-thumbs figcaption { margin-top: 2px; text-align: center; color: var(--mut); font-size: 9px; }
.oks-chk { display: inline-flex; align-items: center; gap: 4px; color: var(--mut); font-size: 9.5px; }
.oks-ck { width: 11px; height: 11px; border: 1.5px solid #94a3b8; border-radius: 3px; background: #fff; }
.oks-ck.is-on { background: var(--a); border-color: var(--a); }
.oks-sws { list-style: none; margin: 0; padding: 0; }
.oks-sws li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid #eef2f8; }
.oks-sws li:first-child { border-top: 0; }
.oks-sws li > span { display: grid; flex: 1; min-width: 0; }
.oks-sws li small { color: var(--mut); }
.oks-lost { padding: 7px; background: #fff7f0; border: 1px solid #fde2b0; border-radius: 6px; }
.oks-appg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.oks-appg span { display: grid; justify-items: center; gap: 1px; padding: 5px 2px; background: var(--p2); border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.oks-appg em { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; font-weight: 800; background: linear-gradient(135deg, #34c7b6, #0f9f8f); border-radius: 7px; }
.oks-appg span:nth-child(3n) em { background: linear-gradient(135deg, #7c8cf8, #4338ca); }
.oks-appg span:nth-child(3n+1) em { background: linear-gradient(135deg, #fbbf4a, #d97706); }
.oks-appg b { font-size: 9px; }
.oks-appg small { color: var(--mut); font-size: 8.5px; }
.oks-appg s { padding: 0 5px; font-size: 8.5px; font-weight: 700; color: #0b7d72; background: #e0f5f1; border-radius: 99px; }
.oks-appg .is-1 s { color: #b45309; background: #fff0d6; }
.oks-appg .is-2 s { color: #e5484d; background: #fde8e8; }
.oks-hab td, .oks-hab th { text-align: center; }
.oks-hab td:first-child, .oks-hab th:first-child { text-align: left; }
.oks-st { color: #f5a524; font-size: 11px; }
.oks-st.is-off { color: #cbd5e1; }
.oks-chat { display: grid; gap: 6px; }
.oks-chat p { max-width: 82%; margin: 0; padding: 5px 8px; border-radius: 10px; background: var(--p2); }
.oks-chat p small { display: block; color: var(--mut); font-size: 8.5px; margin-top: 1px; }
.oks-chat p.is-me { justify-self: end; color: #fff; background: var(--a); }
.oks-chat p.is-me small { color: rgba(255, 255, 255, .8); }
.oks-fake { margin: 0 0 4px; padding: 6px 8px; color: #98a2b6; background: #fff; border: 1px solid var(--line); border-radius: 6px; min-height: 34px; }
.oks-ed-family .oks-edsw s:nth-child(3).is-on { background: #0b7d72; }
.oks-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.oks-thumbs figure s { aspect-ratio: 9 / 15; }
.oks-l-khome .oks-weekbars { height: 52px; }
.oks-l-khome .oks-map { height: 58px; }
.oks-l-khome .oks-kid { padding: 0; }

/* 6.280.3 그림 안 화면 사진(oks_pic) · 클립보드 기록 · 휴대폰 화면 바꾸기(좌우) */
.oks-sc-img.is-pic { display: block; padding: 0; background: #0f172a center / cover no-repeat; border-color: #cbd5e1; }
.oks-sc-img.is-pic.is-big { aspect-ratio: 16 / 9; }
.oks-clip { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.oks-clip li { display: grid; grid-template-columns: 34px 38px 38px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.oks-clip li.is-on { background: #eef3fc; border-radius: 6px; }
.oks-clip time { color: var(--mut); font-size: 10px; }
.oks-clip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oks-clip .oks-sc-img.is-th { width: 64px; border-radius: 4px; }
.oks-clip-big { position: relative; }
.oks-clip-big em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .55); font-style: normal; font-weight: 700; font-size: 11px; transform: rotate(-14deg); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); pointer-events: none; }
.oks-mtri { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.oks-mtri .oks-mphone { width: 176px; }
.oks-mcol { display: grid; justify-items: center; gap: 6px; }
.oks-mcap { margin: 0 !important; color: var(--mut); font-size: 10.5px; font-weight: 700; }
.oks-mpick { display: grid; gap: 6px; width: 150px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 20px rgba(15, 23, 42, .1); }
.oks-mpick ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.oks-mpick li { display: flex; align-items: center; gap: 4px; padding: 5px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.oks-mpick li s { color: var(--mut); text-decoration: none; }
.oks-mpick li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oks-mpick li em { padding: 1px 5px; color: #fff; font-style: normal; font-size: 10px; background: var(--a); border-radius: 4px; }
.oks-mpick li.is-drag { border-color: var(--a); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.oks-marrow { color: var(--a); font-size: 22px; }
.oks-mphone.is-after .oks-mcard.is-new { border-color: var(--a); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.oks-mw52 { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.oks-mw52 li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; align-items: center; gap: 4px; font-size: 10px; }
.oks-mw52 s { display: block; height: 5px; background: #e2e8f0; border-radius: 3px; text-decoration: none; overflow: hidden; }
.oks-mw52 s i { display: block; height: 100%; background: var(--a); border-radius: 3px; }
.oks-mw52 li:first-child s i { background: #f59e0b; }
@media (max-width: 640px) {
    .oks-mpick, .oks-marrow { display: none; }
    .oks-mtri .oks-mphone { width: 100%; max-width: 160px; }
    .oks-mcol { flex: 1; min-width: 0; }
    .oks-clip li { grid-template-columns: 30px 34px 34px minmax(0, 1fr); }
}

/* 6.280.4 실시간 모니터링 16분할 */
.oks-scr.is-16 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.oks-scr.is-16 .oks-sc p { font-size: 9.5px; }
.oks-scr.is-16 .oks-sc p small { display: none; }
/* 6.280.5 기능 상세 페이지에서 머리 메뉴의 그 기능 · 묶음 표시(head.php $cl_fk) */
.cl-gnb .cl-mega a.cl-item.is-on { color: var(--bs-primary); background: var(--bs-soft, #eef4ff); }
.cl-gnb .cl-mega a.cl-item.is-on i { color: var(--bs-primary); }
.cl-mega .cl-col.is-cur .cl-col-h { color: var(--bs-primary); }
.cl-drawer details a.is-on, .cl-dnav a.is-on { color: var(--bs-primary); font-weight: 800; }
/* 6.280.5 묶음 제목 강조(사용자 '타이틀 강조가 있어야 해') — 진하게 · 크게 · 밑줄 · 묶음 아이콘, 현재 페이지 묶음은 파랑 */
.cl-mega .cl-col-h { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 0 0 9px; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: #111827; border-bottom: 2px solid #e5e9f0; }
.cl-mega .cl-col-h i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 12.5px; color: var(--bs-primary); background: var(--bs-soft, #eef4ff); border-radius: 7px; }
.cl-mega .cl-col.is-cur .cl-col-h { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.cl-mega .cl-col.is-cur .cl-col-h i { color: #fff; background: var(--bs-primary); }
/* 6.281.0 페이지 머리 띠(.bs-pagehead — 요금 · 고객지원 · 문의 · 모든 기능 등 모든 하위 화면) 새 모양 — 기능 상세 · 제품 소개와 같은 결(사용자 2026-10-30 'bs-pagehead 가 전부 밋밋')
   테마 파랑(--bs-primary) 띠 · 점 무늬 · 오른쪽 큰 원 · 흰 글 · 작은 글은 알약. 모양만(head.php 짜임 그대로). */
.bs-pagehead { position: relative; overflow: hidden; padding: 78px 0 72px; color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--bs-primary) 86%, #000) 0%, var(--bs-primary) 52%, color-mix(in srgb, var(--bs-primary) 70%, #fff) 100%); border-bottom: 0; }
.bs-pagehead::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.bs-pagehead::after { content: ''; position: absolute; top: -140px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); border-radius: 50%; pointer-events: none; }
.bs-pagehead .bs-wrap { position: relative; z-index: 1; }
.bs-pagehead .bs-eyebrow { display: inline-block; margin: 0 0 16px; padding: 6px 14px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.bs-pagehead .bs-pagehead-title { font-size: 42px; font-weight: 800; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.bs-pagehead .bs-pagehead-desc { max-width: 680px; margin-top: 14px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
@media (max-width: 640px) {
    .bs-pagehead { padding: 50px 0 46px; }
    .bs-pagehead .bs-pagehead-title { font-size: 28px; }
    .bs-pagehead .bs-pagehead-desc { font-size: 15px; }
    .bs-pagehead::after { width: 260px; height: 260px; top: -100px; right: -90px; }
}

/* 6.281.2 그림 안 카카오 지도(oks_kmap — 정적 지도) · 휴대폰 캡처 사진 */
.oks-map .oks-kmap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.oks-map .oks-kmap img { max-width: none; }
.oks-map > i, .oks-map > svg { z-index: 1; }
.oks-map.is-kmap .oks-road { display: none; }
.oks-map.is-kmap .oks-fence { background: rgba(15, 159, 143, .14); }
.oks-map.is-kmap .oks-fence.is-b { background: rgba(31, 102, 209, .12); }
.oks-map.is-kmap .oks-fence em { padding: 1px 4px; background: rgba(255, 255, 255, .85); border-radius: 3px; }
.oks-thumbs figure.is-pic s { background: #0f172a center top / cover no-repeat; border-color: #cbd5e1; }