@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

/* ============================================================
   SCDream Font Face
============================================================ */
@font-face {
    font-family: 'SCDream';
    font-weight: 100;
    font-style: normal;
    src: url('/resources/fonts/SCDream1.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 200;
    font-style: normal;
    src: url('/resources/fonts/SCDream2.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 300;
    font-style: normal;
    src: url('/resources/fonts/SCDream3.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 400;
    font-style: normal;
    src: url('/resources/fonts/SCDream4.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 500;
    font-style: normal;
    src: url('/resources/fonts/SCDream5.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 600;
    font-style: normal;
    src: url('/resources/fonts/SCDream6.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 700;
    font-style: normal;
    src: url('/resources/fonts/SCDream7.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 800;
    font-style: normal;
    src: url('/resources/fonts/SCDream8.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'SCDream';
    font-weight: 900;
    font-style: normal;
    src: url('/resources/fonts/SCDream9.otf') format('opentype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

/* ============================================================
   Paperlogy Font Face
============================================================ */
@font-face {
    font-family: 'Paperlogy';
    font-weight: 100;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-1Thin.woff2') format('woff2'),
         url('/resources/fonts/Paperlogy-1Thin.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 200;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-2ExtraLight.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 300;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-3Light.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 400;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-4Regular.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 500;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-5Medium.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 600;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-6SemiBold.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 700;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-7Bold.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 800;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-8ExtraBold.woff2') format('woff2'),
         url('/resources/fonts/Paperlogy-8ExtraBold.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 900;
    font-style: normal;
    src: url('/resources/fonts/Paperlogy-9Black.ttf') format('truetype');
    unicode-range: U+0020-U+007E, U+1100-U+11F9, U+3131-U+318E, U+AC00-U+D7A3;
}

/* ============================================================
   Design Tokens - A Type
============================================================ */
:root {
    /* Brand */
    --brand-primary: #4A4037;
    --brand-hover: rgb(83, 74, 67);
    --brand-light: #F3EEE7;
    --brand-accent: #8A9A86;

    /* Layout */
    --sidebar-width: 220px;
    /* 상단 헤더 제거(사이드바 단독 레이아웃) — 잔여 calc()/offset 호환용으로 0 유지 */
    --header-height: 0px;

    /* Sidebar — 화이트 배경 */
    --sidebar-bg: #FFFFFF;
    --sidebar-bg-2: #FFFFFF;
    --sidebar-text: #5D544C;
    --sidebar-text-on: #2F2A26;
    --sidebar-border: #E7DED4;
    /* 선택된 메뉴 — 짙은 브라운 솔리드 */
    --sidebar-active-bg: #4A4037;
    --sidebar-active-text: #FFF9F0;
    --sidebar-active-bar: #4A4037;

    /* Header / Surface — 표면(배경)은 전부 흰색, 보더/호버는 기존 웜톤 유지 */
    --header-bg: #FFFFFF;
    --header-border: #E7DED4;
    --surface-bg: #FFFFFF;
    --surface-card: #FFFFFF;
    --surface-card-soft: #FFFFFF;
    --surface-border: #E5DDD2;
    --surface-hover: #F3EEE7;

    /* Text */
    --text-primary: #2F2A26;
    --text-secondary: #6F675F;
    --text-muted: #9A9085;
    --text-white: #FFFFFF;

    /* Table */
    --table-head-bg: #4A4037;
    --table-head-text: #FFFDF9;
    --table-row-alt: #FFFFFF;
    --table-border: #E5DDD2;
    --table-hover: #F5F0E8;
    --table-th-soft: #F5EFE7;
    --table-th-soft-2: #EEE7DD;

    /* Inputs */
    --input-bg: #FFFFFF;
    --input-border: #D8CDC0;
    --input-focus: #7C6650;
    --input-h: 38px;

    /* Buttons — 액션(수정·등록·검색·저장) / 삭제 전용. 테마 포인트 컬러와 별개 */
    --btn-action: #1d3ce3;
    --btn-action-hover: #1730b8;
    --btn-danger: #f90849;
    --btn-danger-hover: #df0a43;

    /* Status */
    --status-success: #6E7C68;
    --status-warning: #9A7A52;
    --status-danger: #A56657;
    --status-info: #7E8C87;

    /* Tags */
    --tag-individual: #8A6F50;
    --tag-couple: #8B756A;
    --tag-family: #73806E;
    --tag-joint: #9A7854;

    /* Radius */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 5px;
    --radius-xl: 6px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(47, 42, 38, 0.04);
    --shadow-md: 0 4px 10px rgba(47, 42, 38, 0.05);
    --shadow-lg: 0 8px 20px rgba(47, 42, 38, 0.06);

    /* Transition */
    --trs-fast: .15s ease;
    --trs-base: .2s ease;
    --trs-slow: .28s ease;
}

/* ============================================================
   Reset & Base
============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 0.625em;
    scroll-behavior: smooth;
}

body {
    font-family: 'Paperlogy', 'SCDream', 'nanumsquare', 'Noto Sans KR', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    background: var(--surface-bg);
    line-height: 1.55;
    letter-spacing: -0.01em;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
    list-style: none;
}

hr {
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

b,
strong {
    font-weight: 700;
}

label {
    cursor: pointer;
}

img {
    border: none;
    max-width: 100%;
    -webkit-user-drag: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

table {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

caption,
figcaption {
    visibility: hidden;
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

.clear::after {
    content: "";
    display: block;
    clear: both;
}

.blind {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

::selection {
    color: #FFFDF9;
    background: rgba(124, 102, 80, 0.82);
}

/* Scrollbar */
::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C9BCAF;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #B8A999;
}

/* ============================================================
   Form Elements
============================================================ */
input,
textarea,
select,
button {
    font-family: 'Paperlogy', 'SCDream', 'nanumsquare', 'Noto Sans KR', sans-serif;
    font-size: 1.3rem;
    appearance: none;
    -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    appearance: auto;
    -webkit-appearance: auto;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
    height: var(--input-h);
    padding: 0 12px;
    font-size: 1.32rem;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    transition: border-color var(--trs-base), box-shadow var(--trs-base), background var(--trs-base);
}

textarea {
    height: auto;
    min-height: 100px;
    padding: 12px;
    resize: vertical;
    line-height: 1.55;
}

input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.10);
}

select {
    padding-right: 36px;
    background: var(--input-bg) url(/resources/images/icon-select-arrow.png) no-repeat calc(100% - 12px) 50% / 12px !important;
    width: 120px;
}

.check-box {
    position: relative;
    width: 17px !important;
    height: 17px !important;
    vertical-align: middle;
    cursor: pointer !important;
    background: var(--input-bg);
    border: 1px solid var(--input-border) !important;
    border-radius: 2px;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background var(--trs-fast), border-color var(--trs-fast), box-shadow var(--trs-fast);
}

.check-box:hover {
    border-color: rgba(124, 102, 80, 0.42) !important;
}

.check-box:checked {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.check-box:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #FFFDF9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.check-box:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.12);
}

input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    border-radius: 2px;
    accent-color: var(--brand-primary);
}

input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    border: solid 1px var(--input-border);
    border-radius: 50%;
    accent-color: var(--brand-primary);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: .72;
}

/* ============================================================
   Button System
============================================================ */
.btn-primary,
.btn-add,
.btn-write,
.logInner .login-form .btn-login,
.co-area .co-tit-group button,
.main-wrap .tit-wrap .btn-modi-available,
.src-lower-wrap button,
.opr-fee .btn-wrap button,
#quick-memo-group .btn-save,
#quick-memo-group .btn-write,
#quick-links .btn-memo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #FFFFFF;
    background: var(--btn-action);
    border: 1px solid rgba(29, 60, 227, 0.22);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 8px rgba(29, 60, 227, 0.10);
    transition: background var(--trs-base), box-shadow var(--trs-base), border-color var(--trs-base), transform var(--trs-fast);
}

.btn-primary:hover,
.btn-add:hover,
.btn-write:hover,
.logInner .login-form .btn-login:hover,
.co-area .co-tit-group button:hover,
.main-wrap .tit-wrap .btn-modi-available:hover,
.src-lower-wrap button:hover,
.opr-fee .btn-wrap button:hover,
#quick-memo-group .btn-save:hover,
#quick-memo-group .btn-write:hover,
#quick-links .btn-memo:hover {
    background: var(--btn-action-hover);
    border-color: rgba(23, 48, 184, 0.28);
    box-shadow: 0 5px 12px rgba(23, 48, 184, 0.12);
}

.btn-primary:active,
.btn-write:active,
.logInner .login-form .btn-login:active {
    transform: translateY(1px);
}

.btn-primary {
    height: 40px;
    padding: 0 20px;
    font-size: 1.5rem;
    font-weight: 600;
}

.btn-add {
    height: 40px;
    padding: 0 18px;
    font-size: 1.5rem;
    font-weight: 600;
}

/* 검색 버튼 — 테마 포인트 컬러(짙은 갈색) 유지 */
.btn-src {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #FFFDF9;
    background: var(--brand-primary);
    border: 1px solid rgba(124, 102, 80, 0.22);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 8px rgba(124, 102, 80, 0.10);
    transition: background var(--trs-base), box-shadow var(--trs-base), border-color var(--trs-base);
}

.btn-src:hover {
    background: var(--brand-hover);
    border-color: rgba(100, 81, 63, 0.28);
    box-shadow: 0 5px 12px rgba(100, 81, 63, 0.12);
}

.btn-src:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.14);
}

.btn-src {
    height: 36px;
    padding: 0 18px;
    font-size: 1.3rem;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

/* .btn-src 크기를 쓰면서 '등록/저장' 인 버튼 — 액션 컬러 유지 */
.btn-src.btn-src-action {
    color: #FFFFFF;
    background: var(--btn-action);
    border-color: rgba(29, 60, 227, 0.22);
    box-shadow: 0 3px 8px rgba(29, 60, 227, 0.10);
}

.btn-src.btn-src-action:hover {
    background: var(--btn-action-hover);
    border-color: rgba(23, 48, 184, 0.28);
    box-shadow: 0 5px 12px rgba(23, 48, 184, 0.12);
}

.btn-src.btn-filter-reset {
    color: #5b4636;
    background: #f5eee6;
    border-color: rgba(157, 132, 105, 0.26);
    box-shadow: none;
}

.btn-src.btn-filter-reset:hover {
    background: #efe3d7;
    border-color: rgba(139, 114, 89, 0.3);
    box-shadow: 0 4px 10px rgba(139, 114, 89, 0.10);
}

.filter-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.filter-action-row .btn-filter-reset {
    margin-left: auto;
}

/* 검색 영역 input 일관성 */
.src-upper-wrap input[type="month"],
.src-upper-wrap input[type="date"],
.src-upper-wrap input[type="text"],
.src-upper-wrap select {
    height: 36px;
    padding: 0 10px;
    font-size: 1.28rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    vertical-align: middle;
}
.src-upper-wrap input:focus,
.src-upper-wrap select:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.12);
}

.btn-write {
    height: 44px;
    padding: 0 28px;
    font-size: 1.5rem;
    font-weight: 700;
}

.btn-delete {
    height: 40px;
    padding: 0 18px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--btn-danger);
    border: 1px solid rgba(229, 44, 92, 0.24);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 8px rgba(229, 44, 92, 0.10);
    transition: background var(--trs-base), box-shadow var(--trs-base), border-color var(--trs-base);
}

.btn-delete:hover {
    background: var(--btn-danger-hover);
    box-shadow: 0 5px 12px rgba(200, 31, 75, 0.14);
}

.btn-change {
    height: 40px;
    padding: 0 18px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--btn-action);
    border: 1px solid rgba(29, 60, 227, 0.24);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 8px rgba(29, 60, 227, 0.10);
    transition: background var(--trs-base), box-shadow var(--trs-base), border-color var(--trs-base);
}

.btn-change:hover {
    background: var(--btn-action-hover);
    box-shadow: 0 5px 12px rgba(23, 48, 184, 0.14);
}

.btn-excel,
.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FFFDF9;
    background: var(--status-success);
    border: 1px solid rgba(110, 124, 104, 0.24);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 8px rgba(110, 124, 104, 0.10);
    transition: background var(--trs-base), box-shadow var(--trs-base), border-color var(--trs-base);
}

.btn-excel {
    height: 36px;
    padding: 0 16px;
    font-size: 1.3rem;
    font-weight: 600;
    background: #206b01;
    border-color: rgba(32, 107, 1, 0.28);
    box-shadow: 0 3px 8px rgba(32, 107, 1, 0.12);
}

/* 보건복지부(e하늘) 엑셀 — 일반 엑셀 변환과 구분되는 블루 */
.btn-excel.js-ehaneul-excel-btn {
    background: #213eab;
    border-color: rgba(33, 62, 171, 0.28);
    box-shadow: 0 3px 8px rgba(33, 62, 171, 0.12);
}

.btn-print {
    min-width: 58px;
    height: 28px;
    padding: 0 10px;
    margin-top: 3px;
    font-size: 1.18rem;
    font-weight: 700;
}

.btn-print:hover {
    background: #5E6B59;
}

.btn-excel:hover {
    background: #1a5701;
}

.btn-excel.js-ehaneul-excel-btn:hover {
    background: #1a318c;
}

/* 아이콘이 글자 앞으로 오도록 (마크업은 텍스트→img 순서 유지) */
.btn-excel img {
    width: 16px;
    order: -1;
}

.btn-replace,
.coc-group .address .btn-src-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--status-info);
    border: 1px solid rgba(126, 140, 135, 0.24);
    border-radius: var(--radius-md);
    box-shadow: 0 3px 8px rgba(126, 140, 135, 0.10);
    color: #FFFDF9;
    transition: background var(--trs-base), box-shadow var(--trs-base), border-color var(--trs-base);
}

.btn-replace {
    min-width: 58px;
    height: 28px;
    padding: 0 10px;
    margin-top: 3px;
    font-size: 1.18rem;
    font-weight: 700;
}

.coc-group .address .btn-src-code {
    margin-left: 6px;
    height: 36px;
    padding: 0 16px;
    font-size: 1.3rem;
    font-weight: 700;
}

.btn-replace:hover,
.coc-group .address .btn-src-code:hover {
    background: #6C7975;
}

/* 영구삭제 등 인라인 빨강으로 표기된 삭제 버튼 */
.btn-replace[style*="FF6666"],
.btn-replace[style*="ff6666"] {
    background: var(--btn-danger) !important;
    border-color: rgba(229, 44, 92, 0.24) !important;
    box-shadow: 0 3px 8px rgba(229, 44, 92, 0.10) !important;
}

.btn-secondary,
.btn-outline,
.sale-wrap table td .btn-chk,
#fee-over-pop .inner-group button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: background var(--trs-base), border-color var(--trs-base), color var(--trs-base);
}

.btn-secondary,
.btn-outline {
    height: 40px;
    padding: 0 18px;
    font-size: 1.35rem;
    font-weight: 600;
}

.btn-secondary:hover,
.btn-outline:hover,
.sale-wrap table td .btn-chk:hover,
#fee-over-pop .inner-group button:hover {
    color: var(--brand-primary);
    background: var(--surface-hover);
    border-color: #C9B8A4;
}

.sale-wrap table td .btn-chk {
    margin-left: 9px;
    height: 32px;
    padding: 0 12px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-primary);
}

/* focus */
.btn-primary:focus,
.btn-add:focus,
.btn-delete:focus,
.btn-change:focus,
.btn-excel:focus,
.btn-write:focus,
.btn-secondary:focus,
.btn-outline:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(29, 60, 227, 0.14);
}

/* ============================================================
   Login Page
============================================================ */
#login {
    padding: 0;
}

.logInner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #2A241F 0%, #342E28 48%, #231D18 100%);
}

.logInner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(138, 154, 134, 0.08), transparent 24%),
        radial-gradient(circle at 82% 78%, rgba(124, 102, 80, 0.08), transparent 26%);
    pointer-events: none;
}

.logInner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015));
    pointer-events: none;
}

.logInner .log-wrap {
    position: relative;
    z-index: 1;
    width: 440px;
    padding: 46px 40px 38px;
    background: rgba(254, 252, 248, 0.97);
    border: 1px solid rgba(124, 102, 80, 0.12);
    border-radius: var(--radius-xl);
    box-shadow:
        0 18px 36px rgba(35, 29, 24, 0.18),
        0 6px 12px rgba(35, 29, 24, 0.08);
    text-align: center;
    backdrop-filter: blur(6px);
}

.logInner .log-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(138, 154, 134, 0) 0%,
            rgba(138, 154, 134, 0.28) 18%,
            rgba(124, 102, 80, 0.72) 50%,
            rgba(138, 154, 134, 0.28) 82%,
            rgba(138, 154, 134, 0) 100%);
}

.logInner .log-wrap .page-tit {
    margin-bottom: 34px;
}

.logInner .log-wrap .page-tit h2,
.logInner .log-wrap .page-tit h3,
.logInner .log-wrap .page-tit strong {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.logInner .log-wrap .page-tit p {
    margin-top: 10px;
    font-size: 1.35rem;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.6;
}

.logInner .login-form label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    letter-spacing: -0.01em;
}

.logInner .login-form input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 1.45rem;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
}

.logInner .login-form input::placeholder {
    color: #B3A594;
}

.logInner .login-form .login-pw {
    margin-top: 18px;
}

.logInner .login-form .btn-login {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 30px;
    font-size: 1.55rem;
    font-weight: 700;
}

.logInner .pw-alert {
    margin-top: 18px;
    font-size: 1.35rem;
    color: var(--status-danger);
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .logInner {
        padding: 20px;
    }

    .logInner .log-wrap {
        width: 100%;
        max-width: 440px;
        padding: 36px 24px 30px;
    }
}


/* ============================================================
   Sidebar / SNB — 화이트 배경 + 액티브 짙은 브라운
   (상단 헤더 제거 — 로고·통합검색·메뉴·하단 계정 패널을 사이드바가 담당)
============================================================ */
#snb {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    min-height: 620px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 6px 0 18px rgba(47, 42, 38, 0.04);
    overflow: hidden;
    z-index: 99;
}

/* ── 로고 ── */
.snb-logo {
    flex-shrink: 0;
    margin: 0;
    padding: 20px 18px 16px;
    border-bottom: 1px solid #F0E9DE;
}

.snb-logo a {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.snb-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 30px;
    object-fit: contain;
    object-position: left center;
}

/* ── 통합 검색 ── */
.snb-search {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    margin: 14px 14px 4px;
    padding: 0 5px 0 4px;
    background: #F7F3EC;
    border: 1px solid #EAE2D6;
    border-radius: 10px;
    transition: background .18s ease, border-color .18s ease;
}

.snb-search:focus-within {
    background: #FFFFFF;
    border-color: var(--input-focus);
}

.snb-search select {
    flex-shrink: 0;
    max-width: 70px;
    height: 100%;
    padding: 0 0 0 7px;
    border: 0;
    background: transparent;
    font-size: 1.18rem;
    color: var(--text-secondary);
    outline: none;
    cursor: pointer;
}

.snb-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 2px;
    border: 0;
    background: transparent;
    font-size: 1.24rem;
    color: var(--text-primary);
    outline: none;
}

.snb-search input::placeholder {
    color: var(--text-muted);
}

.snb-search button {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8A7E70;
    font-size: 13px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.snb-search button:hover {
    background: var(--brand-primary);
    color: #FFFFFF;
}

/* ── 메뉴 스크롤 영역 ── */
.snbInner {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.snbInner::-webkit-scrollbar {
    width: 4px;
}

.snbInner::-webkit-scrollbar-thumb {
    background: rgba(74, 64, 55, 0.18);
    border-radius: 999px;
}

.snb {
    padding-bottom: 8px;
}

.snb>li {
    margin-bottom: 6px;
}

.snb>li>a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 42px 0 16px;
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .16s ease;
}

/* 1차 메뉴 좌측 아이콘 — 폭을 고정해 메뉴명 시작점을 세로로 정렬 */
.snb>li>a .snb-ico {
    flex-shrink: 0;
    width: 18px;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    color: #8A7E70;
    transition: color .22s ease;
}

.snb>li>a:hover .snb-ico {
    color: var(--brand-primary);
}

.snb>li>a.active .snb-ico,
.snb>li>a.current .snb-ico {
    color: var(--sidebar-active-text);
}

/* has-depth 액티브는 브라운 틴트(연한 배경)라 아이콘은 브랜드 컬러 유지 */
.snb>li.has-depth>a.active .snb-ico,
.snb>li.has-depth>a.current .snb-ico {
    color: var(--brand-primary);
}

.snb>li>a::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -14px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--sidebar-active-bar);
    opacity: 0;
    transform: scaleY(0.45);
    transform-origin: center;
    transition: opacity .22s ease, transform .22s ease;
}

.snb>li>a:hover {
    color: var(--sidebar-text-on);
    background: var(--surface-hover);
    border-color: #EFE8DC;
    transform: translateX(1px);
}

.snb>li>a:focus-visible {
    outline: none;
    color: var(--sidebar-text-on);
    border-color: rgba(124, 102, 80, 0.4);
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.14);
}

/* 액티브 메뉴 — 짙은 브라운 솔리드로 선택 상태를 확실하게 */
.snb>li>a.active,
.snb>li>a.current {
    color: var(--sidebar-active-text);
    font-weight: 700;
    background: var(--sidebar-active-bg);
    border-color: var(--sidebar-active-bg);
    box-shadow: 0 5px 14px rgba(74, 64, 55, 0.26);
}

.snb>li>a.active:hover,
.snb>li>a.current:hover {
    color: #FFFFFF;
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    transform: none;
}

/* 하위 메뉴를 가진 1뎁스는 '현재 위치를 포함'한 상태 — 실제 선택된 하위 항목(솔리드)과
   구분되게 브라운 틴트로 한 단계 약하게 */
.snb>li.has-depth>a.active,
.snb>li.has-depth>a.current {
    color: var(--sidebar-text-on);
    background: rgba(74, 64, 55, 0.07);
    border-color: rgba(74, 64, 55, 0.13);
    box-shadow: none;
}

.snb>li.has-depth>a.active:hover,
.snb>li.has-depth>a.current:hover {
    color: var(--sidebar-text-on);
    background: rgba(74, 64, 55, 0.11);
    border-color: rgba(74, 64, 55, 0.18);
}

.snb>li>a.active::before,
.snb>li>a.current::before {
    opacity: 1;
    transform: scaleY(1);
}

.snb>li>a img {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%) rotate(0deg);
    opacity: .5;
    /* 라이트 배경 위 화살표 — 진한 갈색 톤 */
    filter: brightness(0) saturate(100%) invert(21%) sepia(9%) saturate(940%) hue-rotate(347deg) brightness(96%) contrast(88%);
    transition: transform .22s ease, opacity var(--trs-base);
}

.snb>li>a:hover img {
    opacity: .85;
}

.snb>li.open>a img,
.snb>li>a.active img,
.snb>li>a.current img {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
}

/* 짙은 브라운 솔리드 위 화살표는 화이트 (틴트 상태인 has-depth 는 진갈색 유지) */
.snb>li:not(.has-depth)>a.active img,
.snb>li:not(.has-depth)>a.current img {
    filter: brightness(0) invert(1);
}

.snb>li.open {
    border-radius: 10px;
    background: rgba(74, 64, 55, 0.025);
}

.snb li .depth2 {
    display: none;
    margin-top: 8px;
    padding: 8px;
    background: #F8F4ED;
    border: 1px solid #EDE5D8;
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.snb li .depth2.is-open {
    display: block;
}

.snb li .depth2::-webkit-scrollbar {
    width: 4px;
}

.snb li .depth2::-webkit-scrollbar-thumb {
    background: rgba(74, 64, 55, 0.18);
    border-radius: 999px;
}

.snb li .depth2 li+li {
    margin-top: 4px;
}

.snb li .depth2 li a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px 0 24px;
    font-size: 1.26rem;
    font-weight: 500;
    color: #6F675F;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease, transform .16s ease;
}

.snb li .depth2 li a::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: rgba(74, 64, 55, 0.28);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background .18s ease;
}

.snb li .depth2 li a:hover {
    color: var(--sidebar-text-on);
    background: #EFE8DC;
    transform: translateX(1px);
}

.snb li .depth2 li a:hover::before {
    background: var(--brand-primary);
}

/* 2뎁스 액티브 — 짙은 브라운 솔리드 */
.snb li .depth2 li a.active,
.snb li .depth2 li a.current {
    color: var(--sidebar-active-text);
    font-weight: 700;
    background: var(--sidebar-active-bg);
    box-shadow: 0 3px 10px rgba(74, 64, 55, 0.24);
}

.snb li .depth2 li a.active:hover,
.snb li .depth2 li a.current:hover {
    color: #FFFFFF;
    background: var(--brand-hover);
    transform: none;
}

.snb li .depth2 li a.active::before,
.snb li .depth2 li a.current::before {
    width: 5px;
    height: 5px;
    background: #F4EEE3;
}

/* ── 퀵 메모 (계약 상세 진입 시) ── */
#quick-links {
    flex-shrink: 0;
    margin: 0 14px;
    padding: 12px 0;
    border-top: 1px solid #F0E9DE;
}

#quick-links .btn-memo {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font-size: 1.32rem;
    font-weight: 700;
}

#quick-links .btn-memo img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ── 하단 계정 — 클릭 시 서비스 정보 패널 ── */
.snb-account {
    position: relative;
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid #F0E9DE;
    background: var(--sidebar-bg);
}

.snb-account__trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.snb-account__trigger:hover,
.snb-account.is-open .snb-account__trigger {
    background: var(--surface-hover);
    border-color: #EFE8DC;
}

.snb-account__avatar {
    flex-shrink: 0;
    font-size: 26px;
    color: var(--brand-primary);
}

.snb-account__meta {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.snb-account__name {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snb-account__id {
    display: block;
    font-size: 1.12rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snb-account__dday {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--brand-primary);
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.snb-account__dday.is-urgent {
    background: #e11900;
}

.snb-account__warn {
    flex-shrink: 0;
    color: #e11900;
    font-size: 13px;
}

.snb-account__chev {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform .18s ease;
}

.snb-account.is-open .snb-account__chev {
    transform: rotate(-90deg);
}

/* 계정 패널 — 사이드바 우측으로 펼침.
   #snb 이 overflow:hidden 이라 absolute 로는 잘리므로 fixed 로 띄운다. */
.snb-account__panel {
    display: none;
    position: fixed;
    left: var(--sidebar-width);
    bottom: 12px;
    width: 320px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(47, 42, 38, 0.20), 0 4px 12px rgba(47, 42, 38, 0.10);
    z-index: 210;
}

.snb-account__panel::-webkit-scrollbar {
    width: 4px;
}

.snb-account__panel::-webkit-scrollbar-thumb {
    background: rgba(74, 64, 55, 0.18);
    border-radius: 999px;
}

.snb-account.is-open .snb-account__panel {
    display: block;
}

/* 내 정보 버튼 */
.snb-account__me {
    padding: 12px 16px;
    border-bottom: 1px solid #F0E9DE;
}

.snb-account__btn-me {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--input-border);
    border-radius: 9px;
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 1.28rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.snb-account__btn-me i {
    font-size: 13px;
    color: var(--brand-primary);
    transition: color .16s ease;
}

.snb-account__btn-me:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #FFFFFF;
}

.snb-account__btn-me:hover i {
    color: #FFFFFF;
}

.snb-account__profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #F0E9DE;
}

.snb-account__panel-avatar {
    flex-shrink: 0;
    font-size: 30px;
    color: var(--brand-primary);
}

.snb-account__profile-meta {
    min-width: 0;
}

.snb-account__profile-meta strong {
    display: block;
    font-size: 1.38rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snb-account__profile-meta span {
    display: block;
    margin-top: 2px;
    font-size: 1.15rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 서비스 정보 */
.snb-account__service {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: #FAF7F1;
    border-bottom: 1px solid #F0E9DE;
}

.snb-account__service-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: 0.02em;
}

.snb-account__service-dday {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.snb-account__service-dday.is-urgent {
    color: #e11900;
}

.snb-account__service-name {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--text-primary);
}

.snb-account__service-none {
    font-size: 1.15rem;
    color: var(--text-muted);
}

.snb-account__service-warn {
    font-size: 1.15rem;
    font-weight: 700;
    color: #e11900;
}

.snb-account__actions {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid #F0E9DE;
}

.snb-account__btn-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 1.16rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.snb-account__btn-action:hover {
    background: var(--surface-hover);
}

.snb-account__btn-action.is-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #FFFFFF;
}

.snb-account__btn-action.is-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

/* 설정 · 마이페이지 · 로그아웃 */
.snb-account__links {
    padding: 6px 8px 8px;
}

.snb-account__links li a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--sidebar-text);
    transition: background .16s ease, color .16s ease;
}

.snb-account__links li a i {
    width: 15px;
    font-size: 12.5px;
    text-align: center;
    color: #8A7E70;
    transition: color .16s ease;
}

.snb-account__links li a:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.snb-account__links li a:hover i {
    color: var(--brand-primary);
}

@media screen and (max-width: 1479px) {
    #snb {
        width: 204px;
    }

    .main-wrap.co-area {
        margin-left: 204px;
    }

    main#index {
        margin-left: 204px;
    }

    #quick-memo-group {
        left: calc(204px + 20px);
    }

    /* 계정 패널은 fixed 라 사이드바 실제 폭을 따로 맞춰준다 */
    .snb-account__panel {
        left: 204px;
        width: 300px;
    }
}

/* ============================================================
   Main Layout
============================================================ */
main {
    padding-top: 30px;
    background: var(--surface-bg);
}

.main {
    overflow-x: auto;
    background: var(--surface-bg);
}

.main-wrap.co-area {
    margin: var(--header-height) 0 0 var(--sidebar-width);
    padding: 0 40px 88px;
    min-width: 900px;   /* 좌우 패딩(40px)만 남기고 가로 꽉 채움 (max-width 제거) */
}

/* ============================================================
   Page Title
============================================================ */
.main-wrap .tit-wrap {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--surface-border);
}

.main-wrap .tit-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 90px;
    height: 2px;
    /* background: var(--brand-primary); */
}

.main-wrap .tit-wrap h3 {
    font-size: 2.3rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.main-wrap .tit-wrap h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -2px;
    background: var(--brand-primary);
}

.main-wrap .tit-wrap .btn-modi-available {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 42px;
    padding: 0 22px;
    font-size: 1.35rem;
    font-weight: 600;
}

/* ============================================================
   Common Title Group
============================================================ */
.co-area .co-tit-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 18px;
    background: var(--table-head-bg);
    border: 1px solid var(--table-head-bg);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.co-area .co-tit-group p,
.co-area .co-tit-group h4 {
    font-size: 1.45rem;
    color: #FFFDF9;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.co-area .co-tit-group button {
    height: 30px;
    padding: 0 14px;
    font-size: 1.25rem;
    font-weight: 600;
}

/* ============================================================
   Common Panels / Cards
============================================================ */
.content-panel,
.content-box,
.section-panel,
.src-upper-wrap,
.src-lower-wrap,
.total-result-wrap .table-wrap,
.total-summary-wrap,
.src-date-result-wrap,
.indInner section.common,
.indInner .scheduler-wrap,
.common-wrap table,
.opr-stt .table-wrap,
.opr-fee .fee-wrap table,
#quick-memo-group .quick-wrap,
#fee-over-pop .inner-group {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   Tables — Common
============================================================ */
.table-wrap {
    border: 1px solid var(--table-border);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
    overflow-x: auto;
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
}

.table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #C9BFB2;
    border-radius: 99px;
}

.co-area table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--table-border);
}

.co-area table th {
    height: 44px;
    padding: 4px 10px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--table-head-text);
    background: var(--table-head-bg);
    /* border: 1px solid #5A4E44; */
    text-align: center;
    vertical-align: middle;
    letter-spacing: -0.01em;
}

.co-area table td {
    height: 44px;
    padding: 6px 10px;
    font-size: 1.35rem;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--table-border);
    text-align: center;
    vertical-align: middle;
    transition: background var(--trs-fast), color var(--trs-fast);
}

.co-area table tbody tr:last-child td {
    border-bottom: 1px solid var(--table-border);
}

.co-area table tbody tr:nth-child(even) td {
    background: var(--table-row-alt);
}

.co-area table tbody tr:hover td {
    background: var(--table-hover);
}

.co-area table tbody tr {
    cursor: pointer;
}

.co-area table td.left,
.co-area table td.ta-l {
    text-align: left;
}

.co-area table td.right,
.co-area table td.ta-r {
    text-align: right;
}

/* Badge */
td span.type,
td span.place,
.indInner .lower-left-wrap td .place {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--product-badge-text, #FFFDF9);
    background: var(--product-badge-bg, var(--tag-individual));
    border: 1px solid var(--product-badge-border, rgba(138, 111, 80, 0.16));
    border-radius: 999px;
    margin: 2px 0;
    letter-spacing: 0.02em;
}

td span.type2,
td span.place2,
.indInner .lower-left-wrap td .place2 {
    background: var(--tag-couple);
}

td span.type3 {
    background: var(--tag-family);
}

/* ============================================================
   Search / Filter Area
============================================================ */
.src-group .upper-flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 12px;
    flex-wrap: wrap;
}

.src-group .btn-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.src-group .src-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.src-group .src-wrap select {
    width: 160px;
}

.src-group .src-wrap input {
    width: 240px;
}

.src-group .src-result .co-tit-group button span {
    display: inline-block;
    width: 12px;
    height: 2px;
    margin-left: 6px;
    background: rgba(255, 253, 249, 0.9);
    vertical-align: 5px;
}

.src-group .table-wrap {
    height: 168px;
    overflow-y: auto;
}

.src-group .table-wrap th,
.src-group .table-wrap td {
    height: 40px;
}

.src-group .table-wrap td {
    padding-left: 0;
    text-align: center;
    cursor: pointer;
}

.src-group .table-wrap tbody tr:hover td {
    color: var(--text-primary);
}

/* ============================================================
   Operations Tabs
============================================================ */
.opr-wrap .tab-wrap,
.opr-wrap ul.tab-wrap {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    border-bottom: 2px solid #DDD3C8;
    flex-wrap: wrap;
}

/* tab-wrap 안에 ul이 있는 경우 */
.opr-wrap .tab-wrap ul {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.opr-wrap .tab-wrap li {
    position: relative;
    flex-shrink: 0;
}

.opr-wrap .tab-wrap li a {
    position: relative;
    display: block;
    min-width: 100px;
    padding: 11px 20px 10px;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    text-align: center;
    white-space: nowrap;
    transition: color var(--trs-base), background var(--trs-base), border-color var(--trs-base);
}

.opr-wrap .tab-wrap li a:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.opr-wrap .tab-wrap li a.active,
.opr-wrap .tab-wrap li.on a,
.opr-wrap .tab-wrap li.current a {
    font-weight: 700;
    color: var(--text-primary);
    background: var(--surface-card);
    border-color: #DDD3C8;
    margin-bottom: -2px;
    padding-bottom: 12px;
}

.opr-wrap .tab-wrap li a.active::after,
.opr-wrap .tab-wrap li.on a::after,
.opr-wrap .tab-wrap li.current a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 1px;
}

/* ============================================================
   Search upper / lower forms
============================================================ */
.src-upper-wrap,
.src-lower-wrap {
    position: relative;
    overflow: visible;
}

.src-upper-wrap {
    margin-bottom: 16px;
    padding: 0;
}

.src-upper-wrap::before {
    display: none;
}

.src-upper-wrap .table-wrap {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    overflow: visible;
    background: var(--surface-card);
}

.src-upper-wrap .btn-excel {
    position: absolute;
    top: 7px;
    right: 16px;
    z-index: 1;
}

.src-upper-wrap table,
.src-lower-wrap table {
    width: 100%;
    border-top: 0;
    border-collapse: collapse;
    border: none;
}

.co-area .src-upper-wrap table th,
.co-area .src-lower-wrap table th {
    width: 120px;
    height: 48px;
    padding: 0 0 0 18px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #4D433B;
    background: var(--table-th-soft) !important;
    border-bottom: 1px solid var(--table-border);
    border-right: 1px solid var(--table-border);
    text-align: left;
    vertical-align: middle;
    letter-spacing: -0.01em;
}

.co-area .src-upper-wrap table td,
.co-area .src-lower-wrap table td {
    height: 48px;
    /* padding: 8px 16px; */
    font-size: 1.3rem;
    color: var(--text-primary);
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--table-border);
    text-align: left;
    vertical-align: middle;
}

.co-area .src-upper-wrap table tbody tr:last-child th,
.co-area .src-upper-wrap table tbody tr:last-child td,
.co-area .src-lower-wrap table tbody tr:last-child th,
.co-area .src-lower-wrap table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.src-lower-wrap {
    margin-top: 8px;
}

.src-lower-wrap .table-wrap {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    overflow: visible;
    background: var(--surface-card);
}

/* 검색 영역과 결과 영역 통일 색상 */
.src-upper-wrap .table-wrap,
.src-lower-wrap .table-wrap,
.total-result-wrap .table-wrap {
    background: var(--surface-card);
}

.src-lower-wrap input {
    width: 280px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    font-size: 1.28rem;
    background: var(--input-bg);
}

.src-lower-wrap input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.12);
}

.src-lower-wrap button {
    height: 36px;
    padding: 0 16px;
    margin-left: 8px;
    font-size: 1.28rem;
    font-weight: 600;
    background-color: #4A4037;
}

.co-radio-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}

.co-radio-wrap .wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
    min-height: 32px;
}

.co-radio-wrap input[type="radio"],
.co-radio-wrap input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.co-radio-wrap label {
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    vertical-align: middle;
}

.date-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    visibility: hidden;
}

.date-selector.is-visible {
    visibility: visible;
}

.date-selector input {
    width: 150px;
    height: 36px;
    padding: 0 10px;
    font-size: 1.28rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
}

.date-selector input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.12);
}

.date-selector span {
    color: var(--text-muted);
    font-size: 1.25rem;
    font-weight: 500;
}

/* ============================================================
   Total Result / Summary / Pagination
============================================================ */
.total-result-wrap {
    margin-top: 24px;
}

.total-result-wrap .table-wrap {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    overflow-x: auto;
}

.total-result-wrap p.total-alert {
    margin-bottom: 10px;
    padding-left: 2px;
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.total-result-wrap p.total-alert b {
    color: var(--brand-primary);
    font-weight: 700;
}

.total-result-wrap .table-wrap table thead th {
    background: var(--table-head-bg) !important;
    color: var(--table-head-text);
    border-bottom: 1px solid #5A4E44;
}

.total-summary-wrap {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 20px 0 22px;
    padding: 0;
    overflow: hidden;
}

.total-summary-item {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 22px 18px 20px;
    background: #ffffff;
}

.total-summary-item:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(138, 154, 134, 0.08) 0%,
            rgba(124, 102, 80, 0.36) 50%,
            rgba(138, 154, 134, 0.08) 100%);
}

.total-summary-label {
    margin-bottom: 8px;
    font-size: 1.15rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.total-summary-value {
    font-size: 2.15rem;
    line-height: 1.2;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.total-summary-value.amount {
    color: var(--status-success);
}

.total-summary-divider {
    width: 1px;
    margin: 16px 0;
    background: linear-gradient(180deg,
            rgba(229, 221, 210, 0) 0%,
            rgba(229, 221, 210, 1) 20%,
            rgba(229, 221, 210, 1) 80%,
            rgba(229, 221, 210, 0) 100%);
}

.pg_wrap,
.pagination {
    margin-top: 26px;
    display: flex;
    justify-content: center;
}

.pg_wrap .pg {
    display: flex;
}

.pg_wrap ul {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pg_wrap ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    transition: color var(--trs-base), border-color var(--trs-base), background var(--trs-base);
}

.pg_wrap ul li a:hover {
    color: var(--brand-primary);
    border-color: #CDBAA6;
    background: var(--surface-hover);
}

.pg_wrap ul li.active a {
    color: #FFFDF9;
    background: var(--brand-primary);
    border-color: rgba(124, 102, 80, 0.28);
    font-weight: 700;
}

.pg_wrap ul li.page-arrow a {
    min-width: 36px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    letter-spacing: normal;
}

.pg_wrap ul li.page-arrow a:hover {
    color: var(--text-primary);
    background: #F5EFE7;
    border-color: var(--surface-border);
}

.pg_wrap ul li.disabled a,
.pg_wrap ul li a.disabled {
    color: #B4A89B;
    background: #ffffff;
    border-color: #E7DED4;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

/* ============================================================
   Date Result
============================================================ */
.src-date-result-wrap {
    margin-top: 34px;
    overflow: hidden;
}

.src-date-result-wrap p.tit {
    position: relative;
    padding: 15px 20px;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--surface-border);
    background: #ffffff;
    letter-spacing: -0.01em;
}

.src-date-result-wrap p.tit::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -2px;
    background: var(--brand-primary);
}

.src-date-result-wrap thead th {
    background: var(--table-head-bg) !important;
    color: var(--table-head-text);
    border-bottom: 1px solid #5A4E44;
}

.src-date-result-wrap td {
    text-align: center;
    color: var(--text-primary);
    background: var(--surface-card);
}

.src-date-result-wrap tbody tr:nth-child(even) td {
    background: var(--table-row-alt);
}

.src-date-result-wrap tbody tr:hover td {
    background: var(--table-hover);
}

/* ============================================================
   Responsive summary
============================================================ */
@media screen and (max-width: 768px) {
    .total-summary-wrap {
        flex-direction: column;
    }

    .total-summary-divider {
        width: auto;
        height: 1px;
        margin: 0 16px;
        background: linear-gradient(90deg,
                rgba(229, 221, 210, 0) 0%,
                rgba(229, 221, 210, 1) 20%,
                rgba(229, 221, 210, 1) 80%,
                rgba(229, 221, 210, 0) 100%);
    }
}

/* ============================================================
   Dashboard
============================================================ */
/* 대시보드도 사이드바 폭만큼 밀어 배치 (헤더 제거) */
main#index {
    margin-left: var(--sidebar-width);
}

.indInner {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px 64px;
}

.indInner section.common {
    overflow: hidden;
}

.indInner .tit-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--table-head-bg);
    border-bottom: 1px solid #5A4E44;
}

.indInner .tit-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(138, 154, 134, 0.06) 0%,
            rgba(124, 102, 80, 0.36) 50%,
            rgba(138, 154, 134, 0.06) 100%);
}

.indInner .tit-box h3 {
    font-size: 1.45rem;
    color: #FFFDF9;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.indInner .tit-box h3 span {
    padding-left: 8px;
    font-size: 1.25rem;
    color: #D4C8BB;
    font-weight: 400;
}
.indInner .tit-box .go-url a {
    position: absolute;
    top: 50%; right: 29px; transform: translateY(-50%);
    width: 18px; height: 18px;
}
.indInner .tit-box .go-url span {
    position: absolute;
    top: 50%; left: 0; transform: translateY(-50%);
    width: 100%; height: 2px;
    background: #FFF;
}
.indInner .tit-box .go-url span:last-child {
    transform: translateY(-50%) rotate(90deg);
}
.indInner .upper-group {
    margin-bottom: 24px;
    display: flex;
    gap: 20px;
}

.indInner .upper-group .status {
    flex: 1.5;
    float: none;
    width: auto;
}

.indInner .upper-group .charge {
    flex: 1;
    float: none;
    width: auto;
}

.indInner .upper-group .status .graph-group {
    padding: 22px 24px 18px;
}

.indInner .upper-group .status .graph-group .graph {
    display: flex;
    justify-content: space-between;
}

.indInner .upper-group .status .graph-group .graph + .graph {
    margin-top: 14px;
}

.indInner .upper-group .status p.name {
    float: left;
    width: 96px;
    padding-top: 9px;
    font-size: 1.28rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.indInner .upper-group .status .graph-wrap {
    position: relative;
    float: left;
    width: 420px;
    height: 36px;
    margin-right: 18px;
    background: #F3EEE7;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #E4DCD1;
    box-shadow: inset 0 1px 1px rgba(47, 42, 38, 0.03);
}

.indInner .upper-group .status .graph-wrap p {
    position: relative;
    z-index: 2;
    font-size: 1.28rem;
    color: #5C534C;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
}

.indInner .upper-group .status .graph-wrap .line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    transition: width .8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.indInner .upper-group .status .graph-wrap .line.active {
    transform: scaleX(1);
}

.indInner .upper-group .status p.total {
    float: left;
    padding-top: 9px;
    font-size: 1.28rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.indInner .charge .graph-group {
    padding: 22px 24px;
}

.indInner .charge .cont-wrap .alert {
    padding: 14px 16px;
    margin-bottom: 12px;
    font-size: 1.36rem;
    line-height: 1.65;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid #E6DBCF;
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.indInner .charge .cont-wrap .alert b {
    color: var(--brand-primary);
    font-weight: 700;
}

.indInner .lower-group {
    display: flex;
    gap: 20px;
}

.indInner .lower-left-wrap {
    flex: 1;
    float: none;
    width: auto;
}

.indInner .lower-left-wrap .table-wrap {
    height: 320px;
    overflow-y: auto;
    background: var(--surface-card);
}

.indInner .lower-left-wrap th {
    height: 42px;
    font-size: 1.35rem;
    color: var(--table-head-text);
    background: var(--table-head-bg);
    border-bottom: 1px solid #5A4E44;
}

.indInner .lower-left-wrap td {
    height: 42px;
    font-size: 1.35rem;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid var(--table-border);
    background: var(--surface-card);
}

.indInner .lower-left-wrap tbody tr:nth-child(even) td {
    background: var(--table-row-alt);
}

.indInner .lower-left-wrap tbody tr:hover td {
    background: var(--table-hover);
}

.indInner .total-income-wrap {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.indInner .total-income-wrap>div {
    flex: 1;
    width: auto;
    height: auto;
    float: none;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(124, 102, 80, 0.20);
    background: var(--status-info) url(/resources/images/index-income-sale.png) no-repeat 50% 95%;;
    box-shadow: 0 6px 14px rgba(124, 102, 80, 0.12);
    position: relative;
    overflow: hidden;
}

.indInner .total-income-wrap>div::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -10px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
}

.indInner .total-income-wrap .admin-income {
    background: var(--status-success) url(/resources/images/index-income-admin.png) no-repeat 50% 95%;
    border-color: rgba(110, 124, 104, 0.20);
    box-shadow: 0 6px 14px rgba(110, 124, 104, 0.12);
    margin-left: 0;
}

.indInner .total-income-wrap p {
    color: #FFFDF9;
    position: relative;
    z-index: 2;
}

.indInner .total-income-wrap p.tit {
    font-size: 1.35rem;
    font-weight: 500;
    opacity: .9;
}

.indInner .total-income-wrap p.tit span {
    font-size: 1.15rem;
    opacity: .75;
    padding-left: 4px;
}

.indInner .total-income-wrap p.money {
    margin-top: 10px;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.indInner .scheduler-wrap {
    width: 300px;
    float: none;
    height: auto;
    overflow: hidden;
}

.indInner .scheduler-wrap .tit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #5A4E44;
    background: var(--table-head-bg);
}

.indInner .scheduler-wrap h3 {
    font-size: 1.45rem;
    color: #FFFDF9;
    font-weight: 600;
}

.indInner .scheduler-wrap .tit-wrap button {
    width: 22px;
    opacity: .72;
    transition: opacity var(--trs-base);
}

.indInner .scheduler-wrap .tit-wrap button:hover {
    opacity: 1;
}

.indInner .calendar-wrap {
    padding: 18px;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-card);
}

.indInner .calendar-wrap div.month {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    user-select: none;
}

.indInner .calendar-wrap .month button {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--text-secondary);
    background: var(--table-th-soft);
    border: 1px solid #E0D5C8;
    border-radius: var(--radius-md);
    transition: background var(--trs-base), color var(--trs-base), border-color var(--trs-base);
}

.indInner .calendar-wrap .month button:hover {
    background: #EFE7DC;
    color: var(--brand-primary);
    border-color: #D0C0AC;
}

.indInner .calendar-wrap .month button i {
    pointer-events: none;
}

.indInner .calendar-wrap .month .today-date {
    min-width: 130px;
    text-align: center;
    font-size: 1.65rem;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.02em;
}

.indInner .calendar-wrap .weekdays,
.indInner .calendar-wrap .dates {
    display: flex;
    flex-wrap: wrap;
}

.indInner .calendar-wrap .weekdays {
    margin-bottom: 10px;
}

.indInner .calendar-wrap .weekdays>div {
    width: 14.28%;
    font-size: 1.18rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted);
}

.indInner .calendar-wrap .weekdays .sun {
    color: var(--status-danger);
}

.indInner .calendar-wrap .weekdays .sat {
    color: var(--brand-primary);
}

.indInner .calendar-wrap .dates .date {
    width: 14.28%;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    color: var(--text-secondary);
}

.indInner .calendar-wrap .dates .date .date-btn {
    position: relative;
    display: block;
    width: 100%;
    min-height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.indInner .calendar-wrap .dates .date .day-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 3px auto;
    line-height: 1;
    border-radius: 50%;
}

.indInner .calendar-wrap .dates .date .other {
    opacity: .3;
}

.indInner .calendar-wrap .dates .date .day-number.is-today {
    border: 1px solid #D0C0AC;
}

.indInner .calendar-wrap .dates .date .day-number.is-selected {
    position: relative;
    color: #FFFDF9;
    font-weight: 700;
    z-index: 2;
}

.indInner .calendar-wrap .dates .date .day-number.is-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    background: var(--brand-primary);
    border-radius: 50%;
    z-index: -1;
}

.indInner .calendar-wrap .dates .date .day-number.has-event:not(.is-selected) {
    background: #EFE4D8;
    color: var(--brand-primary);
    font-weight: 700;
}

.indInner .calendar-wrap .dates .date .event-dot {
    position: absolute;
    top: 1px;
    right: 4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #A56657;
    color: #FFFDF9;
    font-size: 1rem;
    font-style: normal;
    line-height: 15px;
}

.indInner .memo-wrap {
    height: 140px;
    padding: 16px 18px;
    overflow-y: auto;
    background: var(--surface-card-soft);
}

.indInner .memo-wrap .memo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}

.indInner .memo-wrap .memo-head strong {
    font-size: 1.32rem;
    color: var(--text-primary);
    font-weight: 800;
}

.indInner .memo-wrap .memo-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #EFE4D8;
    color: var(--brand-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.indInner .memo-wrap .memo-item {
    padding: 10px 0;
    border-top: 1px dashed #D8CCBE;
}

.indInner .memo-wrap .memo-item:first-child {
    border-top: none;
    padding-top: 0;
}

.indInner .memo-wrap .memo-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.indInner .memo-wrap .memo-item-range {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--brand-primary);
    font-size: 1.18rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.indInner .memo-wrap .schedule_memo {
    font-size: 1.25rem;
    color: var(--text-primary);
    line-height: 1.65;
    word-break: break-word;
}

.indInner .memo-wrap .empty {
    margin-top: 40px;
    text-align: center !important;
    color: var(--text-muted);
    font-size: 1.32rem;
}

.indInner .memo-wrap .btn-wrap {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.indInner .memo-wrap .btn-wrap button {
    width: 20px;
    height: 20px;
    opacity: .72;
    transition: opacity var(--trs-base);
    background: url(/resources/images/icon-schedule-btn-modi.svg) no-repeat center/contain;
}

.indInner .memo-wrap .btn-wrap button:hover {
    opacity: 1;
}

.indInner .memo-wrap .btn-wrap button.btn-delete {
    background-image: url(/resources/images/icon-schedule-btn-delete.png);
    border: none;
    padding: 0;
}


/* ============================================================
   Sale Wrap
============================================================ */
.sale-wrap select {
    appearance: none !important;
    background: var(--input-bg) url(/resources/images/icon-select-arrow.png) no-repeat calc(100% - 12px) 50% / 12px;
}

.sale-wrap select,
.sale-wrap input {
    height: 36px;
    padding: 0 12px;
    font-size: 1.35rem;
}

.sale-wrap table th,
.sale-wrap table td {
    height: 46px;
    font-size: 1.35rem;
    color: var(--text-primary);
}

.sale-wrap table td {
    padding-left: 14px;
}

/* ============================================================
   Statistics
============================================================ */
.opr-stt .stt-table-wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.opr-stt .table-wrap.place {
    flex: 1;
    min-width: 400px;
}

.opr-stt .table-wrap.corpse {
    flex: 1;
    min-width: 320px;
}

.opr-stt .table-wrap {
    padding: 18px 18px 14px;
    overflow-x: auto;
}

.opr-stt .table-wrap p.tit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.opr-stt .table-wrap p.tit::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 17px;
    background: var(--brand-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.opr-stt .table-wrap thead th {
    color: var(--table-head-text);
    background: var(--table-head-bg) !important;
    border: 1px solid #5A4E44;
}

.opr-stt .table-wrap tbody th {
    font-weight: 500;
    color: var(--text-primary);
    background: var(--table-th-soft) !important;
    border: 1px solid var(--table-border);
}

.opr-stt .table-wrap tbody :is(th[rowspan="2"], th[rowspan="3"], th[rowspan="4"]) {
    font-weight: 700;
    color: #4D433B;
    background: var(--table-th-soft-2) !important;
}

.opr-stt .table-wrap td {
    text-align: center;
    background: var(--surface-card);
    border: 1px solid var(--table-border);
}

.opr-stt .table-wrap td.moneys {
    text-align: right;
    padding-right: 12px;
}

.opr-stt .table-wrap .total {
    margin-top: 12px;
    border-top: 2px solid #5A4E44;
}

.opr-stt .table-wrap .total tbody th {
    color: #FFFDF9;
    font-weight: 700;
    background: var(--table-head-bg) !important;
}

/* ============================================================
   Sales Status
============================================================ */

.opr-sell .table-total {
    margin-bottom: 32px;
}

.opr-sell .table-total thead th {
    color: #FFFDF9;
    background: var(--table-head-bg) !important;
    border: 1px solid #5A4E44;
}

.opr-sell .table-total span.br::before {
    display: block;
    content: '';
}

.opr-sell .table-result table {
    width: 100%;
    border-collapse: collapse;
}

.opr-sell .table-result table:nth-child(n+2) {
    margin-top: 12px;
}

.opr-sell .table-result th {
    color: var(--text-primary);
    background: var(--table-th-soft-2) !important;
    border-right: 1px solid var(--table-border);
    border-bottom: 1px solid var(--table-border);
}

.opr-sell .table-result .divide th {
    background: var(--table-th-soft) !important;
    border-color: var(--surface-border);
}

.opr-sell .table-result td {
    width: 99px;
    background: var(--surface-card);
    border-right: 1px solid var(--table-border);
}

.opr-sell .table-result th:last-child,
.opr-sell .table-result td:last-child {
    border-right: 0;
}

/* ============================================================
   Common Wrap
============================================================ */
.common-wrap table {
    width: 100%;
    font-size: 1.35rem;
    overflow: hidden;
    border-collapse: collapse;
}

.common-wrap .total-result-wrap table th,
.common-wrap .src-group table th {
    height: 48px;
    padding: 0 10px;
    color: #FFFDF9;
    background: var(--table-head-bg) !important;
    font-weight: 600;
    text-align: center;
    border: 1px solid #5A4E44;
}

/* 셀은 행의 커서를 물려받는다 — 행이 클릭 가능(tr[data-href] 등)하면 셀도 포인터,
   아니면 아래 table 의 default 를 상속해 텍스트 I-beam 이 뜨지 않는다 */
.common-wrap .total-result-wrap table,
.common-wrap .src-group table {
    cursor: default;
}

.common-wrap .total-result-wrap table td,
.common-wrap .src-group table td {
    height: 48px;
    padding: 6px 10px;
    color: var(--text-primary);
    text-align: center;
    cursor: inherit;
    background: var(--surface-card);
    border: 1px solid var(--table-border);
}

.common-wrap .total-result-wrap table tbody tr:nth-child(even) td {
    background: var(--table-row-alt);
}

.common-wrap .total-result-wrap table tbody tr:hover td {
    background: var(--table-hover);
}

.common-wrap table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--brand-primary);
}

.common-wrap .btn-wrap {
    margin-top: 24px;
    text-align: right;
}

/* Password section */
.password-section {
    margin-bottom: 28px;
}

.password-section h3 {
    margin-bottom: 14px;
    padding-left: 2px;
    font-size: 1.45rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.password-notice {
    margin-top: 10px;
    padding-left: 4px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* ============================================================
   Fee Input
============================================================ */
.opr-fee .fee-wrap p.tit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.opr-fee .fee-wrap p.tit::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--brand-primary);
}

.opr-fee .fee-wrap table {
    width: auto;
    font-size: 1.35rem;
    border-top: 0;
    border-collapse: collapse;
    overflow: hidden;
}

.opr-fee .fee-wrap thead th {
    height: 44px;
    color: #FFFDF9;
    background: var(--table-head-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
}

.opr-fee .fee-wrap thead th:last-child {
    border-right: 0;
}

.opr-fee .fee-wrap td {
    height: 44px;
    padding: 0 16px;
    background: var(--surface-card);
    border-left: 1px solid var(--table-border);
    border-bottom: 1px solid var(--table-border);
}

.opr-fee .fee-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.opr-fee .fee-wrap td input {
    width: 80%;
    height: 30px;
    font-size: 1.3rem;
    text-align: center;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--input-border);
    border-radius: 0;
    box-shadow: none;
    transition: border-color var(--trs-base);
}

.opr-fee .fee-wrap td input:focus {
    border-bottom-color: var(--brand-primary);
    box-shadow: none;
}

.opr-fee .fee-wrap td span {
    padding-left: 5px;
    color: var(--text-muted);
}

.opr-fee .fee-wrap table:nth-child(n+2) {
    margin-top: 12px;
}

.opr-fee .fee-wrap.arboretum-wrap {
    margin-top: 40px;
}

.opr-fee .fee-wrap.arboretum-wrap p.tit::before {
    background: var(--status-success);
}

.opr-fee .btn-wrap {
    margin-top: 32px;
    text-align: right;
}

.opr-fee .btn-wrap button {
    height: 46px;
    padding: 0 30px;
    font-size: 1.45rem;
    font-weight: 700;
}

/* ============================================================
   Alert / Notice
============================================================ */
p#alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -12px 0 20px;
    padding: 10px 16px;
    font-size: 1.28rem;
    font-weight: 500;
    color: #925448;
    background: #ffffff;
    border: 1px solid #E7C9C2;
    border-left: 3px solid var(--status-danger);
    border-radius: var(--radius-md);
}

/* ============================================================
   Popup
============================================================ */
#fee-over-pop {
    position: fixed;
    right: 0;
    bottom: 0;
    width: calc(100vw - var(--sidebar-width));
    height: calc(100vh - var(--header-height));
    background: rgba(32, 24, 18, 0.46);
    z-index: 150;
    backdrop-filter: blur(2px);
}

#fee-over-pop .inner-group {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    padding: 42px 36px 34px;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow: hidden;
}

#fee-over-pop .inner-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(138, 154, 134, 0.08) 0%,
            rgba(107, 81, 55, 0.56) 50%,
            rgba(73, 134, 58, 0.08) 100%);
}

#fee-over-pop .inner-group p {
    margin: 14px 0 26px;
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--text-primary);
    white-space: pre-line;
    letter-spacing: -0.02em;
}

#fee-over-pop .inner-group button {
    height: 44px;
    padding: 0 30px;
    font-size: 1.45rem;
    font-weight: 700;
}

/* ============================================================
   Form-specific
============================================================ */
.info-group {
    margin: 28px 0;
}

.info-group .table-wrap td p.result {
    width: 260px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    font-size: 1.35rem;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
}

.info-group .table-wrap td p.result.bold {
    font-weight: 700;
}

.info-group .table-wrap select {
    width: 260px;
}

.info-group .table-wrap input[type="number"],
.info-group .table-wrap input[type="date"] {
    width: 260px;
    text-align: center;
}

.info-group .table-wrap input[type="date"].write {
    border-color: var(--brand-primary);
    background: #ffffff;
}

.coc-group {
    float: left;
    width: 580px;
}

.flat-box .flat-right-group {
    float: right;
    width: 560px;
}

.coc-group .id-numb input[type="number"] {
    width: 100px;
}

.coc-group .id-numb span {
    display: inline-block;
    margin: 0 5px;
    font-size: 1.55rem;
    color: var(--text-muted);
    font-weight: 700;
}

.coc-group .address .zip-code {
    width: 160px;
}

.coc-group .address .detail-add {
    display: block;
    width: 400px;
    margin-top: 5px;
}

.dcs-group .table-wrap {
    height: 138px;
    background: var(--surface-card);
    overflow: hidden;
    overflow-y: auto;
}

.dcs-group td {
    text-align: center;
    cursor: pointer;
}

/* ============================================================
   Misc utilities
============================================================ */
.table-wrap-mt {
    margin-top: 28px;
}

.new-table-wrap .table-wrap {
    float: none;
    overflow-x: auto;
}

.new-table-wrap .table-wrap table {
    min-width: 600px;
}

.new-table-wrap .table-wrap td {
    border: 1px solid var(--table-border);
}

.new-table-wrap .table-wrap tr.total td {
    font-weight: 700;
    color: var(--text-primary);
    background: var(--table-th-soft-2);
    border: 1px solid var(--table-border);
}

/* ============================================================
   Print
============================================================ */
@media print {

    #snb {
        display: none;
    }

    main {
        padding-top: 15px;
    }

    .main-wrap.co-area {
        width: auto;
        margin: 10px;
        padding-bottom: 0;
    }

    @page {
        margin: 0mm;
    }
}

/* ============================================================
   Responsive
============================================================ */
@media screen and (max-width: 1479px) {
    .main-wrap.co-area {
        padding: 0 28px 72px;
    }
}
.account-page .acc-card {
    background: var(--surface-card); border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
    overflow: hidden; margin-bottom: 20px;
}

.account-page {
    min-width: 800px !important;
    max-width: 800px !important;
}

.account-page .acc-card-wrap {
    display: flex;
    column-gap: 30px;
}

.account-page .acc-card-head {
    background: var(--table-head-bg); color: var(--table-head-text);
    padding: 12px 18px; font-size: 1.5rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.account-page .acc-card-head i { font-size: 1.5rem; }
.account-page .acc-card-body { padding: 20px 24px; }
.account-page .acc-row {
    display: flex; align-items: center; margin-bottom: 14px;
}
.account-page .acc-row:last-child { margin-bottom: 0; }
.account-page .acc-label {
    width: 140px; flex-shrink: 0;
    font-size: 1.35rem; font-weight: 600; color: var(--text-secondary);
}
.account-page .acc-value {
    flex: 1; font-size: 1.35rem; color: var(--text-primary);
}
.account-page .acc-value input[type="password"] {
    width: 100%; max-width: 340px; height: 38px;
    padding: 0 12px; font-size: 1.3rem;
    border: 1px solid var(--input-border); border-radius: var(--radius-md);
    background: var(--input-bg); color: var(--text-primary);
}
.account-page .acc-value input[type="password"]:focus {
    outline: none; border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(124,102,80,.12);
}
.account-page .acc-hint {
    padding: 8px 14px;
    background: #ffffff; border-left: 3px solid var(--status-warning);
    border-radius: var(--radius-md);
    font-size: 1.2rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
}
.account-page .acc-btn-area {
    display: flex; justify-content: start; margin-top: 20px;
}
.account-page .acc-btn-area .btn-write { min-width: 160px; text-align: center; }


.cd-detail-lock-wrap {
    position: relative;
}
.cd-detail-lock-wrap.is-locked {
    overflow: hidden;
}
.cd-detail-lock-overlay {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 24, 0.85);
    z-index: 50;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    pointer-events: auto;
}
.cd-detail-lock-card {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: #fff;
    padding: 200px 28px;
}
.cd-detail-lock-card i {
    font-size: 8rem;
    line-height: 1;
}
.cd-detail-lock-card p {
    margin: 0;
    font-size: 2rem;
    line-height: 1.7;
    font-weight: 700;
    word-break: keep-all;
}


.gnb > li > a.has-notice-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.gnb-notice-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #e53935;
    display: inline-block;
    margin-left: 6px;
    box-shadow: 0 0 0 2px #fff;
    flex: 0 0 auto;
}

/* ============================================================
   Cursor — 클릭 가능한 요소는 예외 없이 포인터
   (개별 컴포넌트마다 cursor 를 빠뜨려도 여기서 일괄 보정)
============================================================ */
a[href],
a[onclick],
summary,
[onclick],
[data-href],
[role="button"],
[role="tab"],
[role="link"],
[role="option"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
select {
    cursor: pointer;
}

/* 리스트 행 클릭 → 상세 이동 / 선택 토글.
   JS 가 클릭을 거는 클래스에 직접 부여한다 — 동반 클래스(is-clickable-row 등)나
   인라인 style 에 기대면 마크업이 조금만 달라져도 커서가 사라진다 */
tr[data-href],
tr[onclick],
tr.is-clickable-row,
.js-contract-list-row,
.js-contract-link-row,
.js-detail-result-row,
.js-mms-detail-row,
.js-inquiry-row,
.js-slot-card,
.open-row,
.import-source-row,
.mfee-row {
    cursor: pointer;
}

/* 컬럼(항목 표시) 패널의 순서 변경 행 — draggable="true" 이므로 포인터가 아니라 grab */
.col-chip-row {
    cursor: grab;
}

.col-chip-row.dragging {
    cursor: grabbing;
}

/* 비활성 요소는 포인터를 주지 않는다 (위 규칙보다 뒤에 와야 이김) */
[disabled],
.disabled,
.is-disabled,
[aria-disabled="true"],
.pg_wrap ul li.disabled a,
.pg_wrap ul li a.disabled {
    cursor: not-allowed;
}

[readonly]:not([type="text"]) {
    cursor: default;
}

/* ============================================================
   내 정보 모달 (사이드바 계정 패널 → '내 정보')
   — 사이드바는 전 페이지 공통이라 페이지 CSS 에 두지 않고 여기에 둔다
============================================================ */
body.snb-me-lock {
    overflow: hidden;
}

.snb-me-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(35, 30, 26, 0.46);
}

.snb-me-backdrop[hidden] {
    display: none;
}

.snb-me-card {
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(35, 30, 26, 0.28);
    overflow: hidden;
}

.snb-me-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #F0E9DE;
    background: #FAF7F1;
}

.snb-me-head h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 1.62rem;
    font-weight: 700;
    color: var(--text-primary);
}

.snb-me-head h4 i {
    font-size: 15px;
    color: var(--brand-primary);
}

.snb-me-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8A7E70;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.snb-me-close:hover {
    background: #EFE8DC;
    color: var(--text-primary);
}

.snb-me-body {
    padding: 20px 22px 22px;
    overflow-y: auto;
}

.snb-me-note {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #F7F3EC;
    color: var(--text-secondary);
    font-size: 1.18rem;
    line-height: 1.5;
}

/* 계정 정보 (읽기 전용) */
.snb-me-info {
    margin: 0 0 22px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    overflow: hidden;
}

.snb-me-info > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.snb-me-info > div + div {
    border-top: 1px solid #F3EDE4;
}

.snb-me-info > div:nth-child(even) {
    background: #FCFAF6;
}

.snb-me-info dt {
    flex-shrink: 0;
    width: 108px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.snb-me-info dd {
    margin: 0;
    min-width: 0;
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}

/* 비밀번호 변경 */
.snb-me-pw h5 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0E9DE;
    font-size: 1.34rem;
    font-weight: 700;
    color: var(--text-primary);
}

.snb-me-pw label {
    display: block;
    margin-bottom: 12px;
    cursor: default;
}

.snb-me-pw label span {
    display: block;
    margin-bottom: 5px;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.snb-me-pw input[type="password"] {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    font-size: 1.3rem;
    color: var(--text-primary);
}

.snb-me-pw input[type="password"]:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(124, 102, 80, 0.12);
}

.snb-me-msg {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #EEF7F0;
    color: #1d6f42;
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.5;
}

.snb-me-msg.is-error {
    background: #FDEEEC;
    color: #c0392b;
}

.snb-me-msg[hidden] {
    display: none;
}

.snb-me-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.snb-me-btn {
    min-width: 92px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 1.26rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.snb-me-btn:hover {
    background: var(--surface-hover);
}

.snb-me-btn.is-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #FFFFFF;
}

.snb-me-btn.is-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

.snb-me-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}