/* ==== 에그링크 커스텀 — Skote 위에 얹는 가벼운 변형 ==== */

/* 브랜드 색 — Skote 의 primary 톤다운 + EggLink Brand Guidelines v1.0 §03 */
:root {
    /* 기존 — UI 톤 */
    --el-primary: #4a5fc1;
    --el-primary-soft: #eef0fb;

    /* EggLink Brand Guidelines §03 컬러 시스템 (단일 진실) */
    --egglink-black: #1a1a1a;
    --egglink-yellow: #FFC107;
    --egglink-white: #FFFFFF;
}

/* 사이드바 폭 살짝 (한글 메뉴 잘리지 않게) */
@media (min-width: 992px) {
    .vertical-menu { width: 240px; }
    .main-content { margin-left: 240px; }
    .navbar-brand-box { width: 240px; }
}

/* 사이드바 좌상단 로고 박스 — Skote 의 line-height:70px 영향 제거 + flexbox 중앙 */
.navbar-brand-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 0 1rem !important;
}
.navbar-brand-box .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    height: auto;
}
/* .logo-lg / .logo-sm 자체는 Skote 의 display 토글 그대로 (none/inline-block/block).
   내부 매크로/svg 만 vertical-align 중앙 정렬 */
.navbar-brand-box .logo .egglink-logo,
.navbar-brand-box .logo svg {
    vertical-align: middle;
}

/* 페이지 타이틀 박스 */
.page-title-box {
    padding-top: 16px;
    padding-bottom: 16px;
}
.page-title-box h4 {
    font-size: 18px;
    margin-bottom: 0;
}

/* 전체 스크롤 정책: body 고정 + 헤더/사이드바/푸터/페이지 타이틀바 고정, page-content 만 스크롤 */
html, body { height: 100%; overflow: hidden; margin: 0; }
#layout-wrapper { height: 100vh; }
.main-content {
    height: 100vh;
    padding-top: 70px;     /* Skote header height */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 페이지 타이틀 바 — 헤더 바로 아래 고정 */
.main-content .page-title-bar {
    flex: 0 0 auto;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.main-content .page-title-bar h4 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}
/* 본문 — 안쪽 스크롤만 */
.main-content .page-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px !important;
}
/* 푸터 — 항상 하단 고정, 사이드바 침범 X */
.main-content .footer {
    flex: 0 0 auto;
    position: relative !important;
    left: 0 !important;
    bottom: auto !important;
    width: auto !important;
    margin-left: 0 !important;
    border-top: 1px solid #e7e7e7;
    background: #fff;
    padding: 10px 20px;
    height: auto;
    line-height: 1.6;
    color: #74788d;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vertical-menu { overflow-y: auto; height: 100vh; }
.page-title-box { display: none; }   /* 옛날 page-title-box 안 쓰니 숨김 */

/* 카테고리 필터 active 색 (단계별 색이 아니라 일반 카테고리) */
.stage-filter .stage-btn.active:not([data-stage]) {
    background: #4a5fc1 !important;
    color: #fff !important;
    border-color: #4a5fc1 !important;
}

/* 대시보드 stat 카드 높이 통일 */
.row > [class*="col-"] > .card { height: calc(100% - 24px); }
.stat-card { height: 100%; }
.stat-card .card-body { display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; }

/* 칸반 — 6컬럼 grid (한 화면 fit, 가로 스크롤 X) */
.tasks-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 12px;
}
.tasks-list { min-width: 0; }
.tasks-list .card { margin-bottom: 0; height: 100%; }
.tasks-list .card-header { padding: 10px 12px; font-size: 13px; }
.task-list-items { min-height: 200px; padding: 8px; }
.task-box {
    margin-bottom: 8px;
    cursor: grab;
    border: 1px solid #eaeaea;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.task-box:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.task-box.expanded { box-shadow: 0 6px 16px rgba(74, 95, 193, 0.2); border-color: #4a5fc1; }
.task-box.active-card { box-shadow: 0 6px 18px rgba(74, 95, 193, 0.35); border-color: #4a5fc1; background: #f5f7ff; }
.task-box.active-card .task-title a { color: #3b4781; font-weight: 700; }
.task-box:active { cursor: grabbing; }
.task-box .task-meta { font-size: 11px; color: #6b7280; }
.task-box .task-title a { font-size: 13px; line-height: 1.3; }
.task-box .task-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; }
.task-box .task-stats .stat-pill {
    padding: 1px 6px; background: #f3f5fa; border-radius: 4px; color: #555b6d;
}
.task-box .task-expand {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0e0e0;
    font-size: 12px;
    display: none;
}
.task-box.expanded .task-expand { display: block; }
.task-box .task-expand .row-line {
    display: flex; justify-content: space-between; padding: 2px 0;
}
.task-box .task-expand .row-line strong { font-weight: 500; color: #333; }

/* 단계 필터 버튼 (다중 토글) */
.stage-filter {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.stage-filter .stage-btn {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #d8dce5;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: #555b6d;
    user-select: none;
    transition: all 0.15s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.stage-filter .stage-btn:hover { background: #f3f5fa; }
.stage-filter .stage-btn.active {
    color: #fff; border-color: transparent;
}
.stage-filter .stage-btn .count-badge {
    background: rgba(0,0,0,0.1); padding: 0 6px; border-radius: 10px; font-size: 11px;
}
.stage-filter .stage-btn.active .count-badge { background: rgba(255,255,255,0.25); }
.stage-filter .stage-btn-all {
    background: #555b6d; color: #fff; border-color: #555b6d;
}

/* 단계 배지 — Stage.color 인라인 적용 */
.stage-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

/* 매체사 PW 마스킹 */
.pw-mask { font-family: monospace; letter-spacing: 0.15em; }

/* 활동 타임라인 */
.activity-timeline .timeline-item {
    border-left: 2px solid #e7e7e7;
    padding-left: 14px;
    margin-left: 8px;
    padding-bottom: 14px;
    position: relative;
}
.activity-timeline .timeline-item::before {
    content: '';
    position: absolute;
    left: -7px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--el-primary);
    border: 3px solid #fff;
}

/* 소소한 빈 상태 */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.empty-state i { font-size: 32px; opacity: 0.5; display: block; margin-bottom: 8px; }

/* dragula */
.gu-mirror { opacity: 0.85; transform: rotate(2deg); }


/* ============================================
   톤 테마 시스템 — body[data-tone="..."] 으로 분기
   기본: blue (Skote 기본 톤다운)
   ============================================ */
:root {
    --tone-primary: #4a5fc1;
    --tone-primary-hover: #3a4fa8;
    --tone-primary-soft: #eef0fb;
    --tone-primary-on: #ffffff;
}

body[data-tone="black"] {
    --tone-primary: #1a1a1a;
    --tone-primary-hover: #2d2d2d;
    --tone-primary-soft: #f5f5f5;
    --tone-primary-on: #ffffff;
}

body[data-tone="navy"] {
    --tone-primary: #14213d;
    --tone-primary-hover: #1f3556;
    --tone-primary-soft: #e8edf5;
    --tone-primary-on: #ffffff;
}

body[data-tone="green"] {
    --tone-primary: #047857;
    --tone-primary-hover: #065f46;
    --tone-primary-soft: #ecfdf5;
    --tone-primary-on: #ffffff;
}

body[data-tone="purple"] {
    --tone-primary: #6d28d9;
    --tone-primary-hover: #5b21b6;
    --tone-primary-soft: #f3e8ff;
    --tone-primary-on: #ffffff;
}

body[data-tone="rose"] {
    --tone-primary: #be185d;
    --tone-primary-hover: #9d174d;
    --tone-primary-soft: #fce7f3;
    --tone-primary-on: #ffffff;
}

body[data-tone="yellow"] {
    --tone-primary: #FFC107;
    --tone-primary-hover: #e6ac06;
    --tone-primary-soft: #fef3c7;
    --tone-primary-on: #1a1a1a;
}

/* === Bootstrap primary override === */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--tone-primary) !important;
    border-color: var(--tone-primary) !important;
    color: var(--tone-primary-on) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--tone-primary-hover) !important;
    border-color: var(--tone-primary-hover) !important;
    color: var(--tone-primary-on) !important;
}
.btn-outline-primary {
    color: var(--tone-primary) !important;
    border-color: var(--tone-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--tone-primary) !important;
    border-color: var(--tone-primary) !important;
    color: var(--tone-primary-on) !important;
}
.text-primary { color: var(--tone-primary) !important; }
.bg-primary { background-color: var(--tone-primary) !important; }
.border-primary { border-color: var(--tone-primary) !important; }
.badge-primary { background-color: var(--tone-primary); color: var(--tone-primary-on); }
.badge-soft-primary { background-color: var(--tone-primary-soft); color: var(--tone-primary); }
a { color: var(--tone-primary); }
a:hover { color: var(--tone-primary-hover); }
.page-link { color: var(--tone-primary); }
.page-item.active .page-link {
    background-color: var(--tone-primary);
    border-color: var(--tone-primary);
}
.form-control:focus {
    border-color: var(--tone-primary);
    box-shadow: 0 0 0 0.2rem var(--tone-primary-soft);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tone-primary);
    border-color: var(--tone-primary);
}

/* === 톤 선택 드롭다운 === */
.tone-picker .dropdown-menu {
    min-width: 220px;
    padding: 8px;
}
.tone-chip {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}
.tone-chip:hover { background: #f5f5f5; }
.tone-chip.active { background: #f0f4ff; }
.tone-chip-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.tone-chip-label { font-size: 13px; font-weight: 500; }