@charset "UTF-8";
/* ==========================================================================
   고객상담노트 (crm-note) - 공통 스타일
   purenuricrm 의 스타일을 차용하고 브랜드 색상만 네이비 · 블루 계열로 바꿨다.
   ========================================================================== */

/* 폰트는 header.php 에서 Pretendard CDN 을 불러온다 */

/* ------------------------------ 변수 ------------------------------ */
:root{
    --main-900:#1d2b4f;
    --main-800:#24365f;
    --main-700:#2e4677;
    --point:#5b8def;
    --point-dark:#3a6fd8;
    --cream:#f3f7ff;

    --ink:#22262a;
    --ink-2:#4d5359;
    --ink-3:#858c94;
    --line:#e6e4de;
    --line-2:#f0eeea;
    --bg:#f5f6f4;
    --white:#ffffff;

    --blue:#2f6fed;
    --red:#d9483f;
    --amber:#c98a1b;

    --radius:14px;
    --radius-sm:9px;
    --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
    --shadow-lg:0 12px 40px rgba(29,43,79,.14);
    --sidebar-w:256px;
    --topbar-h:70px;
    --t:.2s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------ 리셋 ------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,strong,ul,ol,li,form,label,table,thead,tbody,tr,th,td,fieldset,legend,input,select,textarea,button,figure{margin:0;padding:0;border:0;font:inherit;color:inherit;}
html{-webkit-text-size-adjust:100%;}
body{
    font-family:"Pretendard","맑은 고딕","Malgun Gothic",-apple-system,sans-serif;
    font-size:14px; font-weight:400; line-height:1.55; letter-spacing:-.01em;
    color:var(--ink); background:var(--bg); word-break:keep-all;
}
ul,ol{list-style:none;}
a{text-decoration:none; color:inherit;}
table{border-collapse:collapse; border-spacing:0;}
img{max-width:100%; vertical-align:top;}
button{background:none; cursor:pointer; font-family:inherit;}
input,select,textarea{font-family:inherit; background:none;}
:focus-visible{outline:2px solid var(--point); outline-offset:2px;}
.blind{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;}
.skipToContent{position:absolute; top:-100px; left:0; z-index:1000; display:block; padding:10px 20px; color:#fff; background:var(--main-900);}
.skipToContent:focus{top:0;}

/* ==========================================================================
   레이아웃
   ========================================================================== */
.admin-wrap{min-height:100vh;}

.main{
    min-height:100vh; margin-left:var(--sidebar-w);
    display:flex; flex-direction:column; transition:margin var(--t);
}

/* ------------------------------ 사이드바 ------------------------------ */
.sidebar{
    position:fixed; top:0; left:0; z-index:120;
    width:var(--sidebar-w); height:100vh;
    display:flex; flex-direction:column;
    background:linear-gradient(180deg,#1d2b4f 0%,#24365f 55%,#2e4677 100%);
    color:rgba(255,255,255,.72);
    transition:transform var(--t);
}
.sidebar::after{content:""; position:absolute; top:0; right:0; width:1px; height:100%; background:rgba(91,141,239,.16);}

.brand{padding:26px 22px 22px; border-bottom:1px solid rgba(255,255,255,.07);}
.brand a{display:block;}
/* 로고는 흰색 투명 PNG 라 어두운 사이드바 위에 그대로 얹는다 */
.brand-logo{display:block; width:152px; max-width:100%; height:auto;}
.brand-sub{
    display:block; margin-top:10px;
    font-size:10px; font-weight:500; font-style:normal;
    letter-spacing:.14em; color:var(--point);
}

/* 메뉴 */
.gnb{flex:1; overflow-y:auto; padding:16px 12px 24px;}
.gnb::-webkit-scrollbar{width:4px;}
.gnb::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:4px;}

.gnb-item + .gnb-item{margin-top:2px;}
.gnb-link{
    position:relative; display:flex; align-items:center; gap:11px;
    padding:11px 13px; border-radius:10px;
    font-size:14px; font-weight:500; color:rgba(255,255,255,.7);
    transition:background var(--t), color var(--t);
}
.gnb-link > i:first-child{font-size:17px; width:20px; text-align:center; color:rgba(255,255,255,.5); transition:color var(--t);}
.gnb-link span{flex:1;}
.gnb-link .arrow{font-size:14px; opacity:.5; transition:transform var(--t);}
.gnb-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.gnb-link:hover > i:first-child{color:var(--point);}

.gnb-item.on > .gnb-link{
    background:rgba(91,141,239,.14); color:#fff; font-weight:600;
}
.gnb-item.on > .gnb-link > i:first-child{color:var(--point);}
.gnb-item.on > .gnb-link .arrow{transform:rotate(180deg);}
.gnb-item.on > .gnb-link::before{
    content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
    width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--point);
}

/* 하위메뉴 */
.gnb-sub{display:none; padding:4px 0 6px 44px;}
.gnb-item.on .gnb-sub{display:block;}
.gnb-sub a{
    display:block; padding:7px 10px; border-radius:7px;
    font-size:13px; color:rgba(255,255,255,.55); transition:color var(--t), background var(--t);
}
.gnb-sub a::before{content:""; display:inline-block; width:3px; height:3px; margin:0 8px 3px 0; border-radius:50%; background:currentColor; opacity:.6;}
.gnb-sub a:hover{color:#fff; background:rgba(255,255,255,.05);}
.gnb-sub a.on{color:var(--point); font-weight:600;}

.sidebar-foot{padding:14px 22px 20px; border-top:1px solid rgba(255,255,255,.07);}
.sidebar-foot a{display:flex; align-items:center; gap:7px; font-size:12.5px; color:rgba(255,255,255,.45); transition:color var(--t);}
.sidebar-foot a:hover{color:var(--point);}

.sidebar-dim{
    display:none; position:fixed; inset:0; z-index:110;
    background:rgba(29,43,79,.5); backdrop-filter:blur(2px);
}

/* ------------------------------ 상단바 ------------------------------ */
.topbar{
    position:sticky; top:0; z-index:90;
    height:var(--topbar-h); flex:none;
    display:flex; align-items:center; gap:16px;
    padding:0 30px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.menu-toggle{display:none; font-size:22px; color:var(--ink-2); padding:6px;}
.topbar-title{flex:1; min-width:0;}
.topbar-title h2{font-size:19px; font-weight:700; letter-spacing:-.02em;}
.topbar-title p{font-size:12.5px; color:var(--ink-3); margin-top:1px;}

/* 사용자 메뉴 */
.user-chip{position:relative; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border-radius:40px; cursor:pointer; transition:background var(--t);}
.user-chip:hover,.user-chip.open{background:var(--line-2);}
.avatar{
    flex:none; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:600; color:#fff;
    background:linear-gradient(135deg,var(--main-700),var(--main-900));
}
.user-meta{line-height:1.25;}
.user-meta strong{display:block; font-size:13.5px; font-weight:600;}
.user-meta em{display:block; font-size:11px; color:var(--ink-3);}
.user-chip > .xi-angle-down-min{font-size:15px; color:var(--ink-3); transition:transform var(--t);}
.user-chip.open > .xi-angle-down-min{transform:rotate(180deg);}

.user-menu{
    position:absolute; top:calc(100% + 10px); right:0; z-index:95;
    min-width:180px; padding:6px; border-radius:12px;
    background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:all var(--t);
}
.user-chip.open .user-menu{opacity:1; visibility:visible; transform:translateY(0);}
.user-menu a{display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:8px; font-size:13.5px; transition:background var(--t);}
.user-menu a:hover{background:var(--line-2);}
.user-menu a.danger{color:var(--red);}

/* ------------------------------ 콘텐츠 ------------------------------ */
.content{flex:1; padding:26px 30px 40px; max-width:1560px; width:100%;}

/*
 * 본문에 쌓이는 블록은 형태(카드 · 폼 · 안내문 · 그리드)에 상관없이 같은 간격을 준다.
 * 카드를 <form> 으로 감싸면 .card + .card 규칙이 끊겨 섹션이 붙어 보이던 문제를 함께 해결한다.
 */
.content > * + *{margin-top:20px;}
.footer{
    padding:18px 30px; display:flex; justify-content:space-between; align-items:center;
    font-size:12px; color:var(--ink-3); border-top:1px solid var(--line);
}

/* ==========================================================================
   공용 컴포넌트
   ========================================================================== */

/* 카드 */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.card + .card{margin-top:20px;}
.card-head{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:18px 22px; border-bottom:1px solid var(--line-2);
}
.card-head h3{flex:1; font-size:15.5px; font-weight:600; letter-spacing:-.02em;}
.card-head .sub{font-size:12.5px; color:var(--ink-3); font-weight:400;}
.card-body{padding:22px;}
.card-foot{padding:16px 22px; border-top:1px solid var(--line-2); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}

/* 알림 */
.alert{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:13px 18px; margin-bottom:18px; border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:500; border:1px solid transparent;
}
.alert i{font-size:17px;}
.alert span{flex:1;}
.alert-success{background:#eef7f0; border-color:#cfe6d6; color:#1d6b39;}
.alert-error{background:#fdf0ef; border-color:#f6d4d1; color:#a5322a;}
.alert-info{background:#eef3fd; border-color:#d3e0f8; color:#26509c;}
.alert-warn{background:#fdf6e8; border-color:#f2e2bd; color:#8a6209;}

/* 버튼 */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:40px; padding:0 18px; border-radius:var(--radius-sm);
    font-size:13.5px; font-weight:600; white-space:nowrap; cursor:pointer;
    border:1px solid transparent; transition:all var(--t);
}
.btn i{font-size:15px;}
.btn-primary{background:var(--main-900); color:#fff;}
.btn-primary:hover{background:var(--main-700); box-shadow:0 6px 18px rgba(29,43,79,.22);}
.btn-point{background:linear-gradient(135deg,var(--point),var(--point-dark)); color:#fff;}
.btn-point:hover{filter:brightness(1.06); box-shadow:0 6px 18px rgba(91,141,239,.35);}
.btn-line{background:#fff; border-color:var(--line); color:var(--ink-2);}
.btn-line:hover{border-color:var(--ink-3); color:var(--ink); background:#fcfcfb;}
.btn-danger{background:#fff; border-color:#f0cdc9; color:var(--red);}
.btn-danger:hover{background:var(--red); border-color:var(--red); color:#fff;}
.btn-sm{height:32px; padding:0 12px; font-size:12.5px; border-radius:7px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* 폼 */
.form-row{display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;}
.form-row > .form-group{flex:1; min-width:220px;}
.form-group + .form-group,.form-row + .form-row,.form-row + .form-group{margin-top:18px;}
/* 같은 줄(.form-row) 안의 항목끼리는 위 여백 없이 나란히 정렬 */
.form-row > .form-group + .form-group{margin-top:0;}
.form-group > label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px;}
.form-group .req{color:var(--red); margin-left:2px;}
.form-control{
    width:100%; height:44px; padding:0 14px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    font-size:14px; color:var(--ink); background:#fff;
    transition:border-color var(--t), box-shadow var(--t);
}
textarea.form-control{height:auto; padding:12px 14px; resize:vertical; line-height:1.6;}

/* ------------------------------------------------------------------ */
/*  날짜 입력 · 달력 (flatpickr)                                        */
/*  브라우저 기본 달력 대신 어디서나 같은 모양으로 보이게 한다.          */
/* ------------------------------------------------------------------ */
.fp-date{
    padding-right:38px; cursor:pointer; font-variant-numeric:tabular-nums;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23858c94' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center;
}
.fp-date:disabled{background-color:var(--line-2); cursor:not-allowed; opacity:.7;}

.crm-cal.flatpickr-calendar{
    width:320px; padding:6px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    box-shadow:0 12px 32px rgba(29,43,79,.16);
    font-family:inherit; font-size:13px;
}
.crm-cal.flatpickr-calendar.arrowTop:before,
.crm-cal.flatpickr-calendar.arrowTop:after,
.crm-cal.flatpickr-calendar.arrowBottom:before,
.crm-cal.flatpickr-calendar.arrowBottom:after{display:none;}

.crm-cal .flatpickr-months{padding:6px 2px 2px; align-items:center;}
.crm-cal .flatpickr-months .flatpickr-month{height:34px; color:var(--ink);}
.crm-cal .flatpickr-current-month{
    font-size:14.5px; font-weight:600; padding:0; display:flex;
    align-items:center; justify-content:center; gap:4px; height:34px;
}
.crm-cal .flatpickr-current-month .cur-year{font-weight:600; color:var(--ink);}
.crm-cal .flatpickr-current-month .flatpickr-monthDropdown-months{
    font-size:14.5px; font-weight:600; padding:2px 4px; border-radius:6px;
}
.crm-cal .flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:var(--cream);}

.crm-cal .flatpickr-months .flatpickr-prev-month,
.crm-cal .flatpickr-months .flatpickr-next-month{
    top:8px; padding:0; width:30px; height:30px; line-height:30px; text-align:center;
    border-radius:8px; color:var(--ink-3); font-size:15px; transition:background var(--t), color var(--t);
}
.crm-cal .flatpickr-months .flatpickr-prev-month:hover,
.crm-cal .flatpickr-months .flatpickr-next-month:hover{background:var(--cream); color:var(--point-dark);}
.crm-cal .flatpickr-months .flatpickr-prev-month svg,
.crm-cal .flatpickr-months .flatpickr-next-month svg{display:none;}

.crm-cal .flatpickr-weekdays{background:transparent; height:30px;}
.crm-cal span.flatpickr-weekday{
    color:var(--ink-3); font-weight:600; font-size:11.5px; letter-spacing:.02em; background:transparent;
}
/* 달력 폭을 우리 값으로 잡았으므로 날짜 칸도 폭에 맞춰 다시 계산한다 */
.crm-cal .flatpickr-days{width:100%;}
.crm-cal .dayContainer{width:100%; min-width:0; max-width:none; padding:2px 0;}
.crm-cal .flatpickr-day{
    height:36px; line-height:36px; border-radius:9px;
    width:14.2857%; max-width:none; flex-basis:14.2857%;
    border:0; color:var(--ink-2); font-size:13px;
}
.crm-cal .flatpickr-day:hover{background:var(--cream); color:var(--point-dark);}
.crm-cal .flatpickr-day.today{
    box-shadow:inset 0 0 0 1px var(--point); color:var(--point-dark); font-weight:600;
}
.crm-cal .flatpickr-day.selected,
.crm-cal .flatpickr-day.selected:hover{
    background:var(--point); border-color:var(--point); color:#fff; font-weight:600;
}
.crm-cal .flatpickr-day.prevMonthDay,
.crm-cal .flatpickr-day.nextMonthDay{color:#c9c6c0;}
.crm-cal .flatpickr-day.flatpickr-disabled{color:#d9d6d0;}

@media (prefers-reduced-motion: reduce){
    .crm-cal.flatpickr-calendar{animation:none !important;}
}
select.form-control{
    appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23858c94' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
}
.form-control:hover{border-color:#cfccc4;}
.form-control:focus{border-color:var(--point); box-shadow:0 0 0 3px rgba(91,141,239,.16); outline:none;}
.form-control:disabled,.form-control[readonly]{background:var(--line-2); color:var(--ink-3); cursor:not-allowed;}
.form-help{margin-top:6px; font-size:12px; color:var(--ink-3);}
.form-help.error{color:var(--red);}

/* 라디오 / 체크 */
.radio-group{display:flex; gap:8px; flex-wrap:wrap;}
.radio-chip{position:relative;}
.radio-chip input{position:absolute; opacity:0; width:0; height:0;}
.radio-chip span{
    display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 18px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:all var(--t);
}
.radio-chip input:checked + span{border-color:var(--main-900); background:var(--main-900); color:#fff; font-weight:600;}
.radio-chip input:focus-visible + span{outline:2px solid var(--point); outline-offset:2px;}

/* 테이블 */
.table-wrap{overflow-x:auto;}
.tbl{width:100%; min-width:760px; font-size:13.5px;}
.tbl.tbl-fit{min-width:0;}          /* 칸이 적은 표 — 상자 폭에 맞춘다 (가로 스크롤 없음) */
.tbl th,.tbl td{padding:14px 14px; text-align:left; border-bottom:1px solid var(--line-2);}
.tbl thead th{
    background:#fbfaf8; font-size:12.5px; font-weight:600; color:var(--ink-2);
    border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl tbody tr{transition:background var(--t);}
.tbl tbody tr:hover{background:#fcfbf9;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl .c{text-align:center;}
.tbl .r{text-align:right;}
.tbl .nowrap{white-space:nowrap;}
.tbl .muted{color:var(--ink-3);}
.tbl .strong{font-weight:600;}
/* 목록 비고 : 15자 미리보기 + 마우스오버 팝업 (remark_cell / admin.js) */
.remark-cell{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; vertical-align:bottom; cursor:help; border-bottom:1px dotted var(--line);}
.remark-cell:focus{outline:2px solid var(--point); outline-offset:2px;}
.remark-pop{position:fixed; z-index:1200; max-width:340px; padding:10px 12px;
    background:#2b2926; color:#fff; border-radius:6px; font-size:12.5px; line-height:1.6;
    white-space:pre-wrap; word-break:break-all; box-shadow:0 6px 18px rgba(0,0,0,.22);
    opacity:0; transition:opacity var(--t); pointer-events:none;}
.remark-pop.on{opacity:1;}
.tbl .me-tag{margin-left:5px; font-size:11px; color:var(--point-dark); font-weight:600;}

/* 배지 */
.badge{
    display:inline-flex; align-items:center; gap:4px;
    height:24px; padding:0 9px; border-radius:20px;
    font-size:11.5px; font-weight:600; white-space:nowrap;
}
.badge-super{background:rgba(91,141,239,.16); color:#8a6a2f;}
.badge-admin{background:#eef1f5; color:#576270;}
.badge-active{background:#e9f6ed; color:#1d6b39;}
.badge-inactive{background:#f2f2f2; color:#8b8b8b;}
.badge-success{background:#e9f6ed; color:#1d6b39;}
.badge-fail{background:#fdeeec; color:#a5322a;}
.badge-locked{background:#fdf4e3; color:#8a6209;}
.badge-logout{background:#eef1f5; color:#576270;}

/* 검색 바 */
.search-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.search-bar .form-control{height:40px; width:auto;}
.search-bar input.form-control{min-width:200px;}

/* 페이지네이션 */
.pagination{display:flex; justify-content:center; align-items:center; gap:4px; padding:20px 0 4px;}
.pg{
    min-width:34px; height:34px; padding:0 8px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; color:var(--ink-2); border:1px solid transparent; transition:all var(--t);
}
.pg:hover{background:var(--line-2);}
.pg.on{background:var(--main-900); color:#fff; font-weight:700;}
.pg.disabled{color:#c9c9c9; pointer-events:none;}

/* 빈 목록 */
.empty{padding:64px 20px; text-align:center; color:var(--ink-3);}
.empty i{display:block; font-size:38px; margin-bottom:12px; color:#d5d2ca;}
.empty-page{padding:80px 20px; text-align:center;}
.empty-page i{display:block; font-size:44px; color:var(--point); margin-bottom:14px;}
.empty-page p{font-size:16px; font-weight:600;}
.empty-page .sub{margin:6px 0 20px; font-size:13px; font-weight:400; color:var(--ink-3);}

/* 통계 카드 */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:20px;}
.stat{
    position:relative; overflow:hidden; padding:22px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
    transition:transform var(--t), box-shadow var(--t);
}
.stat:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(16,24,40,.09);}
.stat-ico{
    width:42px; height:42px; border-radius:12px; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center; font-size:20px;
    background:rgba(29,43,79,.06); color:var(--main-900);
}
.stat.point .stat-ico{background:rgba(91,141,239,.16); color:var(--point-dark);}
.stat.blue .stat-ico{background:rgba(47,111,237,.1); color:var(--blue);}
.stat.red  .stat-ico{background:rgba(217,72,63,.1); color:var(--red);}
.stat-label{font-size:12.5px; color:var(--ink-3); font-weight:500;}
.stat-value{font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.2; margin-top:2px;}
.stat-value small{font-size:14px; font-weight:500; color:var(--ink-3); margin-left:2px;}

/* 정보 정의 목록 */
.dl{display:grid; grid-template-columns:130px 1fr; border-top:1px solid var(--line-2);}
.dl dt,.dl dd{padding:13px 6px; border-bottom:1px solid var(--line-2); font-size:13.5px;}
.dl dt{font-weight:600; color:var(--ink-2);}

/* 섹션 타이틀 */
.sec-title{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:14px;}
.sec-title i{color:var(--point-dark);}
.sec-title + .sec-title{margin-top:28px;}
.divider{height:1px; background:var(--line-2); margin:26px 0;}

/* ==========================================================================
   로그인 페이지
   ========================================================================== */
body.login-page{
    display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
    background:
        radial-gradient(1000px 500px at 15% -10%, rgba(91,141,239,.22), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(46,70,119,.65), transparent 60%),
        linear-gradient(160deg,#1d2b4f 0%,#16213d 60%,#1f3366 100%);
}
.login-box{width:100%; max-width:410px;}
.login-brand{text-align:center; margin-bottom:28px;}
/* 로고는 흰색 투명 PNG 라 어두운 배경 위에 그대로 얹는다 (사이드바와 동일) */
.login-brand h1{margin:0 0 14px;}
.login-logo{display:block; width:176px; max-width:70%; height:auto; margin:0 auto;}
.login-brand p{margin-top:6px; font-size:13px; color:rgba(255,255,255,.5); letter-spacing:.02em;}

.login-card{
    padding:32px 30px; border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.login-card .form-control{height:48px;}
.login-card .btn{height:48px; font-size:15px; margin-top:22px;}
.login-field{position:relative;}
.login-field .xi{
    position:absolute; left:15px; top:50%; transform:translateY(-50%);
    font-size:17px; color:var(--ink-3); pointer-events:none; transition:color var(--t);
}
.login-field .form-control{padding-left:44px;}
.login-field .form-control:focus + .xi{color:var(--point-dark);}
.login-foot{margin-top:22px; text-align:center; font-size:12px; color:rgba(255,255,255,.4);}
.login-foot a{color:rgba(255,255,255,.6); text-decoration:underline; text-underline-offset:3px;}
.caps-warn{display:none; margin-top:7px; font-size:12px; color:var(--amber);}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width:1100px){
    .content{padding:22px 20px 34px;}
    .topbar{padding:0 20px;}
    .footer{padding:16px 20px;}
}

@media (max-width:900px){
    .main{margin-left:0;}
    .sidebar{transform:translateX(-100%); box-shadow:var(--shadow-lg);}
    body.nav-open .sidebar{transform:translateX(0);}
    body.nav-open .sidebar-dim{display:block;}
    body.nav-open{overflow:hidden;}
    .menu-toggle{display:block;}
    .topbar{height:62px;}
    .topbar-title h2{font-size:17px;}
    .topbar-title p{display:none;}
    .user-meta{display:none;}
    .user-chip > .xi-angle-down-min{display:none;}
    .dl{grid-template-columns:1fr;}
    .dl dt{padding-bottom:0; border-bottom:0;}
}

@media (max-width:600px){
    .content{padding:18px 14px 30px;}
    .topbar{padding:0 14px;}
    .footer{padding:14px; flex-direction:column; gap:4px;}
    .card-head,.card-body,.card-foot{padding:16px;}
    .card-foot .btn{flex:1;}
    .search-bar{width:100%;}
    .search-bar input.form-control{flex:1; min-width:0;}
    .stat-grid{gap:12px;}
    .login-card{padding:26px 20px;}
}

/* ==========================================================================
   상담 CRM 전용
   ========================================================================== */

/* ------------------------- 권한 배지 ------------------------- */
.badge-root{background:rgba(34,38,42,.9); color:#fff;}
.badge-super{background:rgba(91,141,239,.2); color:#2f5fc4;}
.badge-manager{background:rgba(46,70,119,.12); color:#2e4677;}
.badge-staff{background:#eef1f5; color:#576270;}

/* 업무 상태 배지 */
.badge-reserve{background:#e9f6ed; color:#1d6b39;}
.badge-happy{background:#fdf1e3; color:#a2620a;}
.badge-closed{background:#f1f1f0; color:#7c8087;}
.badge-none{background:#f4f6f8; color:#8a919a;}
.badge-visit{background:#e9f6ed; color:#1d6b39;}
.badge-delay{background:#fdf4e3; color:#8a6209;}
.badge-hold{background:#eef3fd; color:#26509c;}
.badge-etc{background:#f1f1f0; color:#7c8087;}
.badge-empty{background:#f7f7f6; color:#a3a8ae;}
.badge-pending{background:#fdf1e3; color:#a2620a;}
.badge-y{background:#e9f6ed; color:#1d6b39;}
.badge-n{background:#f4f6f8; color:#8a919a;}

/* ------------------------- 목록 행 색상 -------------------------
   기획서 SCR-03 : 예약완료 녹색 · 해피콜 대상 주황 · 종결 회색      */
.tbl tbody tr.row-reserve{background:rgba(46,160,90,.06);}
.tbl tbody tr.row-reserve:hover{background:rgba(46,160,90,.12);}
.tbl tbody tr.row-happy{background:rgba(232,146,42,.08);}
.tbl tbody tr.row-happy:hover{background:rgba(232,146,42,.15);}
.tbl tbody tr.row-closed{background:#f6f6f5; color:var(--ink-3);}
.tbl tbody tr.row-closed:hover{background:#efefee;}

/* 색상 범례 */
.legend{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-3);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block;}
.legend .lg-reserve{background:rgba(46,160,90,.35);}
.legend .lg-happy{background:rgba(232,146,42,.45);}
.legend .lg-closed{background:#dcdcda;}

/* 클릭 가능한 행 (SCR-04 · SCR-05 → SCR-06 이동) */
.tbl tbody tr.clickable{cursor:pointer;}
.tbl tbody tr.clickable:hover{box-shadow:inset 3px 0 0 var(--point);}

/* ------------------------- 1차 입력시트 ------------------------- */
.sheet-form{padding:22px;}
.sheet-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 18px;
}
.sheet-grid .fg-full{grid-column:1 / -1;}
.sheet-grid .fg-half{grid-column:span 2;}
.sheet-grid > .form-group{margin-top:0;}

/* 1차 입력시트 첫 줄 : 핸드폰 칸을 넓혀 «재진 진술» 체크를 입력칸 오른쪽에 둔다
   (좁은 화면은 아래 반응형 규칙이 균등 분할로 되돌리고, 체크는 필요하면 줄바꿈된다) */
.sheet-grid.sheet-head{
    grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.6fr);
}
.phone-line{display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap;}
.phone-line .form-control{flex:1 1 150px; min-width:150px;}
.claim-check{
    display:flex; align-items:center; gap:6px; flex:none; margin:0;
    font-size:12.5px; color:var(--ink-2); white-space:nowrap; cursor:pointer;
}

/* 1차 입력시트 · 2차 입력창 항목명 — 입력값과 구분되도록 진하고 크게
   글자는 딥틸, 앞에 분홍 세로 막대 (사이드바의 «딥틸 바탕 + 분홍 활성 표시» 와 같은 조합)
   (다른 화면의 폼 라벨은 그대로 두려고 두 입력 폼 안으로만 건다) */
.sheet-form .sheet-head .form-group > label,
.sheet-form .sheet-label,
form[data-consult-form] .form-group > label{
    font-size:14px; font-weight:700; color:var(--main-900); letter-spacing:-.01em;
}
.sheet-form .sheet-head .form-group > label::before,
.sheet-form .sheet-label::before,
form[data-consult-form] .form-group > label::before{
    content:""; display:inline-block; width:3px; height:13px; margin-right:7px;
    border-radius:2px; background:var(--point); vertical-align:-1px;
}

/* 조건부 비활성 항목 (FN-05) */
.form-group.is-off{opacity:.45;}
.form-group.is-off .form-control{background:var(--line-2); pointer-events:none;}
.form-group.is-off .choice{pointer-events:none;}

/* 상담 내용 : 한 줄에 두 항목 (각 항목은 왼쪽 항목명 · 오른쪽 버튼) — 폼 세로 길이를 줄인다 */
.sheet-rows{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px;
    margin-top:20px; border-top:1px solid var(--line-2);
}
.sheet-rows > .form-group.sheet-row{
    display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; align-items:start;
    margin-top:0; padding:12px 0; border-bottom:1px solid var(--line-2);
}
/* 한 줄을 통째로 쓰는 항목 (비고처럼 여러 줄을 적는 칸) */
.sheet-rows > .form-group.sheet-row.sheet-row-full{grid-column:1 / -1;}
.sheet-label{padding-top:8px; font-size:13px; font-weight:600; color:var(--ink-2); line-height:1.5;}
.sheet-label .auto-tag{margin-left:10px; display:table; margin-top:3px;}   /* 분홍 막대(3px + 7px) 뒤 글자에 맞춘다 */
.sheet-field{min-width:0;}
.sheet-field [hidden]{display:none !important;}
.sheet-field .etc-input{display:block; max-width:320px; height:40px; margin-top:9px;}
.sheet-field .sheet-date{max-width:220px; height:40px;}

/* 버튼식 단일 선택 — 라디오를 감추고 버튼 모양으로 그린다 (다시 누르면 해제 : sheet.js) */
.choice-group{display:flex; flex-wrap:wrap; gap:7px;}
.choice{position:relative; display:inline-flex; cursor:pointer; user-select:none; -webkit-user-select:none;}
.choice[hidden]{display:none;}
.choice input{position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none;}
.choice span{
    display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 15px;
    border:1px solid var(--line); border-radius:999px; background:#fff;
    font-size:13.5px; color:var(--ink-2); line-height:1.2;
    transition:background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.choice:hover span{border-color:var(--main-700); color:var(--main-900);}
.choice input:checked + span{
    background:var(--main-900); border-color:var(--main-900); color:#fff; font-weight:600;
    box-shadow:0 3px 10px rgba(29,43,79,.25);
}
.choice input:checked + span::before{content:"\2713"; font-size:12px; font-weight:700; color:var(--point);}
.choice input:focus-visible + span{outline:2px solid var(--point); outline-offset:2px;}
.choice input:disabled + span{cursor:not-allowed;}
.choice-empty{padding-top:8px; font-size:12.5px; color:var(--ink-3);}

/* 핵심 항목 강조 (1차 입력시트 «상담결과») — 아래 예약일 · 비예약사유 · 해피콜의 활성 여부와
   리스트 편성(RULE 2·3)을 결정하므로, 고른 값이 한눈에 들어오도록 분홍 계열로 따로 그린다 */
.sheet-rows > .form-group.sheet-row.is-key{
    background:linear-gradient(135deg, rgba(91,141,239,.15), rgba(91,141,239,.03));
    border-bottom-color:rgba(244,117,127,.35);
}
.sheet-row.is-key > .sheet-label{color:var(--point-dark); font-weight:700;}
.sheet-form .sheet-row.is-key > .sheet-label::before{width:4px; height:15px; background:var(--point-dark);}
.sheet-row.is-key .choice span{
    min-height:40px; padding:0 17px; font-size:14px; font-weight:500;
    border-color:rgba(244,117,127,.45); color:var(--ink);
}
.sheet-row.is-key .choice:hover span{border-color:var(--point-dark); color:var(--point-dark);}
.sheet-row.is-key .choice input:checked + span{
    background:linear-gradient(135deg,var(--point),var(--point-dark));
    border-color:var(--point-dark); color:#fff; font-weight:700;
    box-shadow:0 4px 12px rgba(244,117,127,.35);
}
.sheet-row.is-key .choice input:checked + span::before{color:#fff;}

/* 1차 입력 수정 모드 (목록의 «수정») */
.card.is-editing{border-color:#f2e2bd; box-shadow:0 0 0 3px rgba(201,138,27,.14), var(--shadow);}
.card.is-editing .card-head h3{color:#8a6209;}
.tbl tbody tr.row-editing td{background:#fdf6e8;}
.row-actions{display:inline-flex; gap:5px; justify-content:center;}
.row-actions .btn-sm{height:28px; padding:0 10px; font-size:12px;}
.row-actions .is-disabled{opacity:.4; cursor:not-allowed;}

/* 접수 내역 탭 (미완료 · 완료) */
.list-tabs{display:flex; gap:2px; padding:0 22px; border-bottom:1px solid var(--line-2); overflow-x:auto;}
.list-tab{
    display:inline-flex; align-items:center; gap:7px; padding:13px 14px 11px; margin-bottom:-1px;
    border-bottom:2px solid transparent; font-size:13.5px; font-weight:600; color:var(--ink-3); white-space:nowrap;
}
.list-tab b{min-width:22px; padding:1px 7px; border-radius:999px; background:var(--line-2); color:var(--ink-2); font-size:11.5px; text-align:center;}
.list-tab:hover{color:var(--main-900);}
.list-tab.on{color:var(--main-900); border-bottom-color:var(--main-900);}
.list-tab.alert b{background:#fdf0ef; color:#a5322a;}
.list-tab.on.alert b{background:var(--red); color:#fff;}
.todo-sub{display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3);}

/* 2차 입력창 — 접수 정보(표시만) 표 · 수정 항목 · 해피콜 «예약» 칸 */
.sec-title .sec-sub{margin-left:6px; font-size:12px; font-weight:400; color:var(--ink-3);}
.view-wrap{overflow-x:auto;}
.view-tbl{width:100%; border-collapse:collapse; table-layout:fixed; font-size:13.5px; border-top:2px solid var(--main-900);}
.view-tbl col.th-col{width:118px;}
.view-tbl th,
.view-tbl td{padding:9px 12px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; line-height:1.5;}
.view-tbl th{background:#f6f7f6; color:var(--ink-2); font-size:12.5px; font-weight:600; white-space:nowrap;}
.view-tbl td{color:var(--ink); word-break:keep-all; overflow-wrap:anywhere;}
.view-tbl td.strong{font-weight:600;}
.yn-cell{display:flex; align-items:flex-start; gap:8px;}
.yn-cell .badge{flex:none;}
.view-help{font-size:11.5px; line-height:1.45; color:var(--ink-3); word-break:keep-all;}
.sheet-grid.edit-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.book-box{padding:12px 14px 14px; border-radius:var(--radius-sm); background:#eef7f0; border:1px solid #cfe6d6;}
.book-box[hidden]{display:none;}
.book-help{margin-bottom:10px; font-size:12.5px; color:#1d6b39;}
.book-fields{display:grid; grid-template-columns:repeat(2,minmax(0,240px)); gap:12px 16px;}
.book-fields > .form-group{margin-top:0;}
@media (max-width:600px){
    .view-tbl col.th-col{width:88px;}
    .book-fields{grid-template-columns:1fr;}
}

/* 문의 대분류 «취소» 의 취소사유 */
.cancel-box{
    display:flex; align-items:center; gap:10px; max-width:560px; margin-top:9px; padding:9px 12px;
    border-radius:var(--radius-sm); background:#fdf0ef; border:1px solid #f6d4d1;
}
.cancel-box[hidden]{display:none;}
.cancel-box label{flex:none; margin:0; font-size:12.5px; font-weight:600; color:#a5322a;}
.cancel-box .form-control{height:38px;}

/* 자동 입력 항목 표시 */
.auto-tag{
    display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px;
    font-size:10.5px; font-weight:600; letter-spacing:.02em;
    background:rgba(46,70,119,.1); color:#2e4677; vertical-align:1px;
}
.auto-tag.point{background:rgba(91,141,239,.2); color:#2f5fc4;}

/* 고객 판정 결과 안내 (RULE 1) */
.judge-box{
    display:none; margin-top:8px; padding:10px 13px; border-radius:var(--radius-sm);
    font-size:12.5px; line-height:1.5; border:1px solid transparent;
}
.judge-box.on{display:block;}
.judge-box.j-new{background:#eef3fd; border-color:#d3e0f8; color:#26509c;}
.judge-box.j-return{background:#eef7f0; border-color:#cfe6d6; color:#1d6b39;}
.judge-box.j-miss{background:#fdf6e8; border-color:#f2e2bd; color:#8a6209;}
.judge-box.j-internal{background:#fdf0ef; border-color:#f6d4d1; color:#a5322a;}
.judge-box strong{font-weight:700;}

/* 오늘 접수 미리보기 */
.today-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.today-head .cnt{font-size:12.5px; color:var(--ink-3);}

/* ------------------------- 조회 바 ------------------------- */
.filter-bar{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:16px 22px; border-bottom:1px solid var(--line-2); background:#fcfcfb;
}
.filter-bar .form-control{height:38px; width:auto;}
.filter-bar input[type="date"].form-control{min-width:150px;}
.filter-bar .tilde{color:var(--ink-3); font-size:13px;}
.filter-bar .spacer{flex:1;}
.filter-bar .total{font-size:13px; font-weight:600; color:var(--ink-2);}
.filter-bar .total b{color:var(--point-dark);}
.quick-dates{display:flex; gap:5px;}
.quick-dates .btn{height:38px;}

/* ------------------------- 2차 입력 팝업 (SCR-06) ------------------------- */
/* ------------------------------------------------------------------ */
/*  전화 수신 팝업 (센트릭스 RING)                                       */
/* ------------------------------------------------------------------ */
.callpop{
    position:fixed; right:22px; bottom:22px; z-index:400;
    display:flex; flex-direction:column; gap:10px; width:328px; max-width:calc(100vw - 32px);
    pointer-events:none;
}
.callpop-card{
    pointer-events:auto;
    background:var(--white); border:1px solid var(--line); border-left:4px solid var(--point);
    border-radius:var(--radius-sm); box-shadow:0 10px 30px rgba(29,43,79,.18);
    overflow:hidden; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;
}
.callpop-card.on{opacity:1; transform:translateY(0);}
.callpop-card.internal{border-left-color:var(--ink-3);}

.callpop-head{
    display:flex; align-items:center; gap:8px;
    padding:12px 12px 10px 14px; border-bottom:1px solid var(--line-2);
}
.callpop-head i{color:var(--point-dark); font-size:16px;}
.callpop-head strong{font-size:15px; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.callpop-close{margin-left:auto; width:26px; height:26px; border-radius:6px; color:var(--ink-3);}
.callpop-close:hover{background:var(--line-2); color:var(--ink);}

.callpop-type{
    font-size:11px; font-weight:600; padding:2px 7px; border-radius:10px;
}
.callpop-type.type-new{background:var(--cream); color:var(--point-dark);}
.callpop-type.type-return{background:#e9f6ed; color:#1d6b39;}
.callpop-type.type-missing{background:#fdf1e3; color:#a2620a;}
.callpop-type.type-etc{background:#f2f2f2; color:#8b8b8b;}

.callpop-body{padding:12px 14px; display:flex; flex-direction:column; gap:5px;}
.callpop-body p{margin:0; font-size:13px; line-height:1.55;}
.callpop-name b{font-size:15px;}
.callpop-name .callpop-sub{margin-left:7px; font-size:12px; color:var(--ink-3);}
.callpop-reserve{font-weight:600; color:#1d6b39;}
.callpop-last, .callpop-note{color:var(--ink-3); font-size:12.5px;}

.callpop-foot{
    display:flex; gap:6px; justify-content:flex-end;
    padding:10px 14px; background:#fcfcfb; border-top:1px solid var(--line-2);
}

@media (prefers-reduced-motion: reduce){
    .callpop-card{transition:none;}
}
@media (max-width:640px){
    .callpop{right:12px; left:12px; bottom:12px; width:auto;}
}

.modal{
    position:fixed; inset:0; z-index:300; display:none;
    align-items:flex-start; justify-content:center; padding:40px 20px;
    background:rgba(29,43,79,.45); backdrop-filter:blur(3px); overflow-y:auto;
}
.modal.on{display:flex;}
.modal-box{
    width:100%; max-width:860px; border-radius:16px; background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.3); overflow:hidden;
}
.modal-head{
    display:flex; align-items:center; gap:12px;
    padding:18px 24px; border-bottom:1px solid var(--line-2);
    background:linear-gradient(135deg,var(--main-900),var(--main-700)); color:#fff;
}
.modal-head h3{flex:1; font-size:15.5px; font-weight:600;}
.modal-head .scr{font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.55);}
.modal-close{width:32px; height:32px; border-radius:8px; color:#fff; font-size:18px; transition:background var(--t);}
.modal-close:hover{background:rgba(255,255,255,.16);}
.modal-body{padding:22px 24px; max-height:calc(100vh - 230px); overflow-y:auto;}
.modal-foot{padding:16px 24px; border-top:1px solid var(--line-2); display:flex; gap:8px; justify-content:flex-end; background:#fcfcfb;}
.modal-loading{padding:60px; text-align:center; color:var(--ink-3);}

/* 팝업 안 고정 정보 (승계 규칙 : 접수일자 고정) */
.fixed-grid{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
    background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
    overflow:hidden; margin-bottom:20px;
}
.fixed-grid div{background:#fbfbfa; padding:11px 13px;}
.fixed-grid dt{font-size:11.5px; color:var(--ink-3); font-weight:500;}
.fixed-grid dd{font-size:13.5px; font-weight:600; margin-top:2px;}

/* 비고 이력 (FN-10) */
.log-list{border-left:2px solid var(--line); padding-left:16px; margin-top:6px;}
.log-list li{position:relative; padding:0 0 16px;}
.log-list li:last-child{padding-bottom:0;}
.log-list li::before{
    content:""; position:absolute; left:-21px; top:5px;
    width:8px; height:8px; border-radius:50%; background:var(--point); border:2px solid #fff;
}
.log-list li.stage-1::before{background:var(--main-700);}
.log-time{font-size:11.5px; color:var(--ink-3);}
.log-time .stage{
    display:inline-block; margin-right:6px; padding:1px 6px; border-radius:4px;
    font-weight:600; font-size:10.5px; background:var(--line-2); color:var(--ink-2);
}
.log-time .stage.s2{background:rgba(91,141,239,.2); color:#2f5fc4;}
.log-body{font-size:13.5px; margin-top:3px; white-space:pre-wrap;}
.log-snap{font-size:11.5px; color:var(--ink-3); margin-top:3px;}
.log-empty{font-size:13px; color:var(--ink-3); padding:14px 0;}
/* 1차 입력시트 수정 모드에 끼워 넣은 비고 이력 — 길어지면 이 칸 안에서만 스크롤 */
.log-hist{
    max-height:240px; overflow-y:auto; margin-top:4px;
    padding:12px 14px 12px 24px; background:#fbfbfa;
    border:1px solid var(--line); border-radius:var(--radius-sm);
}
.log-hist .log-list{margin-top:0;}
.log-hist .log-list li::before{border-color:#fbfbfa;}

/* ------------------------- 코드 관리 (SCR-07) ------------------------- */
.code-layout{display:grid; grid-template-columns:250px 1fr; gap:20px; align-items:start;}
.code-groups{padding:10px;}
.code-groups a{
    display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:9px;
    font-size:13.5px; color:var(--ink-2); transition:all var(--t);
}
.code-groups a:hover{background:var(--line-2);}
.code-groups a.on{background:var(--main-900); color:#fff; font-weight:600;}
.code-groups a .cnt{margin-left:auto; font-size:11.5px; opacity:.7;}
.code-groups a .dot{
    width:6px; height:6px; border-radius:50%; background:var(--point); flex:none;
}
.code-row-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.code-row-form .form-control{height:38px;}
.code-row-form input[type="text"]{min-width:180px;}
.code-row-form input[type="number"]{width:90px;}
.sort-input{width:70px; height:32px; text-align:center; padding:0 6px;
    border:1px solid var(--line); border-radius:7px; font-size:13px;}

/* 문의 대분류 › 세부항목 (계층형) */
.code-groups a.sub{padding-left:24px;}
.code-groups a.sub::before{content:"\2514"; margin-right:-2px; opacity:.45;}
.tree-bar{gap:6px;}
.tree-chip{
    display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
    border:1px solid var(--line); border-radius:999px; background:#fff;
    font-size:12.5px; color:var(--ink-2); transition:all var(--t);
}
.tree-chip b{font-size:11.5px; font-weight:600; color:var(--ink-3);}
.tree-chip:hover{border-color:var(--main-700); color:var(--main-900);}
.tree-chip.on{background:var(--main-900); border-color:var(--main-900); color:#fff; font-weight:600;}
.tree-chip.on b{color:rgba(255,255,255,.75);}
.tree-chip.off{opacity:.55;}
.tree-chip.warn{background:#fdf6e8; border-color:#f2e2bd; color:#8a6209;}
.tree-chip.warn.on{background:#8a6209; border-color:#8a6209; color:#fff;}

/* ------------------------- 메인 메뉴 카드 (SCR-02) ------------------------- */
.menu-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px;}
.menu-card{
    display:flex; flex-direction:column; gap:6px; padding:22px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); transition:all var(--t);
}
.menu-card:hover{transform:translateY(-2px); border-color:var(--point); box-shadow:0 10px 30px rgba(91,141,239,.18);}
.menu-card i{font-size:22px; color:var(--main-700);}
.menu-card strong{font-size:15px; font-weight:600;}
.menu-card span{font-size:12.5px; color:var(--ink-3);}
.menu-card .num{margin-top:6px; font-size:24px; font-weight:700; color:var(--main-900); letter-spacing:-.02em;}
.menu-card .num small{font-size:13px; font-weight:500; color:var(--ink-3); margin-left:3px;}
.menu-card.hot{border-color:rgba(91,141,239,.5); background:linear-gradient(160deg,#fff,#fff8f9);}
.menu-card.hot i{color:var(--point-dark);}

/* 메인 상단 — 최고관리자는 카드를 4열로 좁히고 우측에 승격 대기 코드 패널 */
.dash-main > * + *{margin-top:20px;}
.dash-main .stat-grid{margin-bottom:0;}
.dash-top.has-side{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px;}
.dash-top.has-side .menu-cards,
.dash-top.has-side .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.dash-side{position:relative; min-height:260px;}
.dash-side-in{position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column;}
.dash-side .empty{flex:1; padding:40px 20px;}
.pend-list{flex:1; overflow-y:auto; list-style:none; margin:0; padding:6px 0;}
.pend-list a{display:flex; align-items:center; gap:8px; padding:8px 20px; font-size:13px; transition:background var(--t);}
.pend-list a:hover{background:#fbfaf8;}
.pend-group{flex:none; padding:2px 7px; border-radius:10px; font-size:11.5px; background:#fdf1e3; color:#a2620a;}
.pend-list strong{flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pend-meta{flex:none; font-size:12px; color:var(--ink-3);}
.pend-foot{padding:10px 20px; border-top:1px solid var(--line-2); font-size:12px; color:var(--ink-3);}

@media (max-width:1360px){
    .dash-top.has-side{grid-template-columns:1fr;}
    .dash-side{min-height:0;}
    .dash-side-in{position:static;}
    .pend-list{max-height:320px;}
}
@media (max-width:900px){
    .dash-top.has-side .menu-cards,
    .dash-top.has-side .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
    .dash-top.has-side .menu-cards,
    .dash-top.has-side .stat-grid{grid-template-columns:1fr;}
}

/* ------------------------- 통계 ------------------------- */
.bar-cell{display:flex; align-items:center; gap:9px;}
.bar-track{flex:1; height:8px; border-radius:8px; background:var(--line-2); overflow:hidden; min-width:60px;}
.bar-fill{height:100%; border-radius:8px; background:linear-gradient(90deg,var(--main-700),var(--main-900));}
.bar-fill.point{background:linear-gradient(90deg,var(--point),var(--point-dark));}
.bar-num{font-size:12.5px; font-weight:600; min-width:52px; text-align:right;}
.tbl tfoot td{
    padding:13px 14px; font-weight:700; font-size:13.5px;
    background:#fbfaf8; border-top:1px solid var(--line);
}
.stat-tabs{display:flex; gap:6px; flex-wrap:wrap;}
.stat-tabs a{
    padding:8px 14px; border-radius:20px; font-size:13px; font-weight:500;
    border:1px solid var(--line); color:var(--ink-2); background:#fff; transition:all var(--t);
}
.stat-tabs a:hover{border-color:var(--ink-3);}
.stat-tabs a.on{background:var(--main-900); border-color:var(--main-900); color:#fff; font-weight:600;}

/* 안내 문구 */
.hint{
    display:flex; gap:9px; padding:12px 15px; border-radius:var(--radius-sm);
    background:#fbfaf8; border:1px solid var(--line-2);
    font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.hint i{color:var(--main-700); font-size:15px; flex:none; margin-top:1px;}
.hint + .hint{margin-top:8px;}

/* ------------------------- 반응형 ------------------------- */
@media (max-width:1180px){
    .sheet-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .sheet-rows{grid-template-columns:1fr;}
    .code-layout{grid-template-columns:1fr;}
}
@media (max-width:900px){
    .sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .fixed-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .modal{padding:0;}
    .modal-box{max-width:none; border-radius:0; min-height:100vh;}
    .modal-body{max-height:none;}
}
@media (max-width:600px){
    .sheet-grid{grid-template-columns:1fr;}
    .sheet-rows > .form-group.sheet-row{grid-template-columns:1fr; gap:6px;}
    .sheet-label{padding-top:0;}
    .sheet-label .auto-tag{display:inline-block; margin-left:6px; margin-top:0;}
    .sheet-grid .fg-half{grid-column:1 / -1;}
    .fixed-grid{grid-template-columns:1fr;}
    .filter-bar{padding:14px 16px;}
    .filter-bar .form-control{flex:1; min-width:0;}
}

/* ==========================================================================
   엑셀파일 정리
   ========================================================================== */

/* ------------------------- 업로드 슬롯 ------------------------- */
.upload-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}

.upload-slot{
    display:flex; flex-direction:column;
    border:1px solid var(--line); border-radius:var(--radius); padding:16px;
    background:#fcfcfb; transition:border-color var(--t), background var(--t);
}
.upload-slot.has-file{border-color:rgba(46,160,90,.45); background:#f8fcf9;}
.upload-slot.is-over{border-color:var(--point); background:#fff8f9;}

.upload-head{display:flex; align-items:center; gap:9px; margin-bottom:12px;}
.upload-no{
    flex:none; width:24px; height:24px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700; color:#fff; background:var(--main-900);
}
.upload-slot.has-file .upload-no{background:#2ea05a;}
.upload-head strong{font-size:14px; font-weight:600;}

.upload-drop{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; min-height:118px; padding:16px 12px; cursor:pointer;
    border:1.5px dashed var(--line); border-radius:var(--radius-sm);
    background:#fff; text-align:center; transition:all var(--t);
}
.upload-drop:hover{border-color:var(--point); background:#fffafb;}
.upload-slot.has-file .upload-drop{border-color:rgba(46,160,90,.4); border-style:solid;}
.upload-drop > i{font-size:26px; color:var(--ink-3);}
.upload-slot.has-file .upload-drop > i{color:#2ea05a;}
.upload-drop .pick{font-size:13.5px; font-weight:600; color:var(--main-900);}
.upload-drop .fname{
    font-size:11.5px; font-style:normal; color:var(--ink-3); line-height:1.45;
    word-break:break-all; max-width:100%;
}
.upload-slot.has-file .upload-drop .fname{color:#1d6b39; font-weight:600;}
.upload-drop input[type="file"]{
    position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}

.upload-desc{margin-top:12px; font-size:12.5px; color:var(--ink-2); line-height:1.6;}
.upload-cols{
    margin-top:8px; padding:8px 10px; border-radius:7px;
    background:var(--line-2); font-size:11.5px; color:var(--ink-3); line-height:1.5; word-break:keep-all;
}

/* 실행 중 */
.is-running{opacity:.6; pointer-events:none;}

/* ------------------------- 취합 규칙 안내 ------------------------- */
.rule-steps{counter-reset:none;}
.rule-steps li{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.7;}
.rule-steps li + li{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2);}
.rule-steps .step-no{
    flex:none; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700; color:#fff;
    background:linear-gradient(135deg,var(--point),var(--point-dark));
}
.rule-steps strong{display:block; font-weight:600; margin-bottom:2px;}
.rule-steps b{color:var(--main-900); font-weight:600;}

/* ------------------------- 결과 카드 ------------------------- */
.result-card{border-color:rgba(46,160,90,.45); box-shadow:0 8px 28px rgba(46,160,90,.1);}
.result-card .card-head h3{display:flex; align-items:center; gap:7px;}

@media (max-width:900px){
    .upload-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   고객상담노트 전용
   ========================================================================== */
/* 텍스트 로고 (사이드바 · 로그인) */
.brand-text{display:block; font-size:21px; font-weight:800; letter-spacing:-.04em; color:#fff;}
.brand-text i{color:var(--point); margin-right:6px;}
.login-brand .brand-text{font-size:30px;}

/* 상담 처리상태 */
.badge-new{background:#eef3fd; color:#26509c;}
.badge-progress{background:#fdf4e3; color:#8a6209;}
.badge-done{background:#e9f6ed; color:#1d6b39;}
.badge-client{background:rgba(46,70,119,.12); color:#2e4677;}
.badge-dup{background:#fdeeec; color:#a5322a; font-weight:600; white-space:nowrap;}
a.badge-dup:hover{background:#f9dcd8;}
.badge-api{background:#eef3fd; color:#26509c;}
.badge-web{background:#f1f1f0; color:#5c6168;}
.badge-masked{background:#f4f6f8; color:#8a919a;}

/* 옵션 표시 아이콘 줄 (고객사 목록) */
.opt-icons{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; min-width:230px;}
.opt-icons span{display:inline-flex; align-items:center; gap:2px; padding:2px 7px; border-radius:20px; font-size:11.5px; background:#f4f6f8; color:#a3a8ae;}
.opt-icons span.on{background:rgba(91,141,239,.14); color:var(--point-dark); font-weight:600;}

/* 체크 칩 (체크박스 버전 radio-chip) */
.check-group{display:flex; gap:8px; flex-wrap:wrap;}

/* 코드 블록 (API 안내) */
.code-box{position:relative; margin:8px 0 18px; border-radius:var(--radius-sm); background:#1b2235; color:#e6ebf5;}
.code-box pre{margin:0; padding:16px 18px; overflow:auto; font:12.5px/1.65 "SFMono-Regular",Menlo,Consolas,monospace; white-space:pre;}
.code-box .copy-btn{position:absolute; top:8px; right:8px; padding:4px 10px; border-radius:6px; font-size:12px; color:#cfd7e8; background:rgba(255,255,255,.08);}
.code-box .copy-btn:hover{background:rgba(255,255,255,.16);}
code.inline{padding:1px 6px; border-radius:5px; background:#f1f3f7; font:12.5px "SFMono-Regular",Menlo,Consolas,monospace; color:#2e4677;}
.key-line{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.key-line code{font-size:14px; padding:6px 10px;}

/* 상세 · 이력 타임라인 */
.timeline{border-left:2px solid var(--line); margin-left:6px; padding-left:16px;}
.timeline li{position:relative; padding:0 0 14px;}
.timeline li::before{content:""; position:absolute; left:-22px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--point);}
.timeline .t-head{font-size:12.5px; color:var(--ink-3);}
.timeline .t-body{font-size:13.5px; margin-top:2px;}
.diff-tbl{width:100%; margin-top:6px; font-size:12.5px; border-collapse:collapse;}
.diff-tbl th,.diff-tbl td{padding:5px 8px; border:1px solid var(--line-2); text-align:left; vertical-align:top; white-space:pre-wrap; word-break:break-all;}
.diff-tbl th{background:#f6f7f6; width:90px; font-weight:600;}
.diff-tbl .before{color:#a5322a; text-decoration:line-through; text-decoration-color:rgba(165,50,42,.35);}
.diff-tbl .after{color:#1d6b39;}

.memo-full{white-space:pre-wrap; word-break:break-all; line-height:1.65;}
.two-col{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:start;}
/* 그리드 간격(gap)이 이미 있으므로 .card + .card 의 위 여백을 없앤다 — 남아 있으면 오른쪽(아래) 카드만 20px 내려간다 */
.two-col > .card + .card{margin-top:0;}
@media (max-width:1100px){ .two-col{grid-template-columns:1fr;} }
.tbl tr.row-deleted td{color:var(--ink-3);}
.tbl td.chk, .tbl th.chk{width:40px; text-align:center;}
.notice-box{padding:14px 16px; border-radius:var(--radius-sm); background:var(--cream); font-size:13px; line-height:1.7; color:var(--ink-2);}
.notice-box b{color:var(--ink);}