/* Global Font Settings */
/* 🔤 본문 글꼴 = **Noto Sans KR** (2026-08-17 사용자 결정 — 시안 N6).
   🔥 실제로 화면에 그려지는 글꼴을 정하는 자리는 여기다 — 번들의 sans-serif 토큰보다
      !important 로 세다. 🕘 2026-08-17 이전에는 이 줄이 Pretendard 였다(jsDelivr CDN).
   🔥 **!important 를 지우지 말 것** — 다크 번들(style.dark.bundle.css 47330행)이
      html · body 에 Poppins 를 **변수 없이 박아** 두었다. 지우면 다크 화면이 통째로
      Poppins(설치돼 있지 않으므로 실제로는 대체 글꼴)로 떨어진다.
   📌 글꼴 파일은 head.html 의 구글 폰트 링크가 받는다(자체 호스팅하지 않는 이유도 그 주석에).
   📌 번들 토큰 교정과 html 요소는 design-system.css 0-1 절이 맡는다. */
body, button, input, select, textarea {
    font-family: 'Noto Sans KR', sans-serif !important;
}

/* Summernote Editor Styles */
.note-icon-caret { display: none; }
.note-editor .note-toolbar .note-dropdown-menu,
.note-popover .popover-content .note-dropdown-menu { min-width: 225px !important; }
.note-modal-footer { height: 70px !important; }
p { margin-bottom: 0 !important; }

/* Ajax Loading Popup Styles */
.ajax_coverpopup_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Page Loading Mask (Initial White Screen Prevention) */
#page_loading_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ds-surface);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] #page_loading_mask {
    background: var(--ds-surface);
}

/* Navigation Icon Color Override */
.nav-icon-color svg g [fill] {
    fill: currentColor !important;
}

.aside-dark .menu-state-primary .menu-link:not(.active) .menu-icon .svg-icon svg g [fill] {
    fill: currentColor !important;
}

/* Utility Class for Preserving Line Breaks */
.preserve-line-breaks {
    white-space: pre-wrap;
}

/* Comment Styles */
.comment-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.comment-card {
    max-width: 80%;
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
}
.comment-container.comment-mine .comment-card {
    background-color: var(--ds-fill);
    align-self: flex-start;
}
.comment-container.comment-other .comment-card {
    background-color: var(--ds-primary-soft);
    align-self: flex-end;
}
.comment-time {
    font-size: 0.8rem;
    color: var(--ds-text-faint);
    margin-top: 0.25rem;
}
.comment-container.comment-mine .comment-time {
    align-self: flex-start;
    margin-left: 0.5rem;
}
.comment-container.comment-other .comment-time {
    align-self: flex-end;
    margin-right: 0.5rem;
}
[data-theme="dark"] .comment-container.comment-mine .comment-card {
    background-color: var(--ds-fill);
}
[data-theme="dark"] .comment-container.comment-other .comment-card {
    background-color: var(--ds-primary-soft);
}

/* ===== Layout Compact: Reduce vertical space for 1920x1080 ===== */

/* 1. Hide breadcrumb separator and breadcrumb in header (integrated into title line via CSS) */
#kt_header_nav .page-title > span.h-20px.border-gray-200 {
    display: none;
}
#kt_header_nav .page-title > ul.breadcrumb {
    display: none;
}

/* 2. Header height - use default */

/* 3. Hero card body padding reduction (p-5 -> compact) */
#kt_content .card > .card-body.flex-column.p-5 {
    padding: 0.75rem !important;
}
#kt_content .card > .card-body.flex-column.p-5 > .d-flex.align-items-center.p-3 {
    padding: 0.25rem 0.75rem !important;
}
#kt_content .card > .card-body.flex-column.p-5 > .card-rounded.p-3 {
    padding: 0.5rem 0.75rem !important;
}

/* 4. Content area bottom padding reduction */
#kt_content {
    padding-bottom: 0.5rem !important;
}
#kt_post {
    padding-bottom: 0 !important;
}

/* 5. Footer compact */
#kt_footer {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* 6. Hero card bottom margin reduction */
#kt_content_container > .card.mb-5:first-child {
    margin-bottom: 0.75rem !important;
}

/* 7. Card header height match with title card (py-4 = 1.5rem top/bottom) */
.card .card-header.tpl-card-header {
    min-height: auto !important;
    padding: 1rem 1.25rem !important;
    align-items: center !important;
}


/* -------------------------------------------------------------
   숫자 셀이 오른쪽 끝에 딱 붙는 문제 (2026-07-16)

   Metronic 이 `.table td:last-child,.table th:last-child{padding-right:0}` 을 준다
   (`.table.gs-0` 도 동일). 표의 **마지막 열이 금액·수량 같은 우측정렬 숫자**면
   숫자가 카드 테두리에 그대로 달라붙는다 — 지침상 여백이 있어야 한다.
   원본 규칙엔 !important 가 없어서 !important 만 붙이면 이긴다.

   우측정렬 셀에만 건다(`text-end`). 좌측정렬 셀은 원래 붙지 않으므로 건드리지 않는다.
   모바일 카드형(.ds-card-table)은 셀 패딩을 카드가 직접 관리하므로 제외한다
   — 안 빼면 `.ds .ds-card-table tbody td{padding:0!important}`(0,2,2)를
   이 규칙(0,3,1)이 이겨서 카드 안쪽 간격이 틀어진다.
   ------------------------------------------------------------- */
.table:not(.ds-card-table) > * > tr > td.text-end:last-child,
.table:not(.ds-card-table) > * > tr > th.text-end:last-child {
    padding-right: .75rem !important;
}

/* -------------------------------------------------------------
   날짜 입력 — 아이콘·자리표시자를 **네이티브가 안 그리는 곳에서만 우리가 그린다**
        (2026-07-20 신설 → 2026-07-23 재작성)

   🕘 예전엔 브라우저가 그리는 `::-webkit-calendar-picker-indicator` 를 오른쪽 끝으로
      옮기기만 했다. 데스크톱과 **개발자도구 모바일 뷰**에서는 멀쩡했다.
   🔥 그런데 **실기기 iOS(Safari·iOS Chrome 모두 WebKit)는 값이 없는 `input[type=date]` 를
      완전히 빈 칸으로 그리고 달력 아이콘도 그리지 않는다**(2026-07-23 사용자 지적).
      사용자는 그게 날짜 칸인 줄 모른다.
      ⚠️ **개발자도구 모바일 뷰는 데스크톱 렌더링 엔진이라 이 차이를 절대 못 잡는다.**
         "모바일 뷰에서 정상"은 실기기 검증을 대신하지 못한다.

   🔑 **네이티브가 그리는 곳에는 손대지 않는다.** 전 브라우저에 우리 아이콘을 깔면
      **아이콘이 두 개가 된다** — Chrome 계열은 `::-webkit-calendar-picker-indicator` 를
      투명하게 만들 수 있지만 **Firefox 는 그 의사요소를 모른다**(자기 달력 아이콘을 계속 그린다).
      그래서 조건을 좁혀 **"아무것도 안 그리는 플랫폼"에만** 우리 것을 넣는다.
   ⚠️ 조건은 두 개를 **함께** 걸어야 한다:
      · `@supports (-webkit-touch-callout: none)` — WebKit 만. (Blink 는 이 속성을 버렸다)
      · `hover:none + pointer:coarse` — 터치 기기만. **없으면 데스크톱 Safari 까지 걸린다**
        (거기선 네이티브가 `yyyy-mm-dd` 를 그리므로 **글자가 겹친다**).
   ⚠️ 값이 있는지 **CSS 로는 알 수 없다**(`:placeholder-shown` 은 date 에 안 걸린다) →
      `common.js` 의 `Common.initDateInputs` 가 `data-empty`/`data-placeholder` 를 붙인다.
      **CSS 와 JS 는 세트다** — 한쪽만 옮기면 자리표시자가 사라지거나 값 위에 겹친다.
   ⚠️ **`.ds` 스코프를 쓰지 않는다.** 날짜 입력은 `.ds` 가 없는 화면(회원가입·견적 상세·상품 등록)
      에도 있다. **회원가입이 정확히 그 경우라 예전 규칙은 아예 닿지도 않았다.**
   ⚠️ 선택자는 `input.form-control[type="date"]`(0,2,1) 이어야 한다 — 위쪽
      `.ds .form-control{padding:…!important}`(0,2,1) 과 같은 특이도라야 소스 순서로 이긴다.
      `.form-control[type="date"]`(0,2,0) 로 낮추면 **조용히 진다.**
   ------------------------------------------------------------- */
:root {
    /* 달력 아이콘. **URL 이라 회색 토큰으로 표현할 수 없어** 테마별로 한 벌씩 둔다.
       색은 배경 대비 실측값이다(라이트 3.31 / 다크 6.3 — 비문자 요소 기준 3:1 이상). */
    --ds-date-placeholder-color: #8C8C99;
    --ds-date-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238C8C99' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.7' y='3' width='12.6' height='11.3' rx='1.6'/%3E%3Cpath d='M1.7 6.5h12.6M5.2 1.7v2.6M10.8 1.7v2.6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
    --ds-date-placeholder-color: #A0A0AE;
    --ds-date-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A0A0AE' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.7' y='3' width='12.6' height='11.3' rx='1.6'/%3E%3Cpath d='M1.7 6.5h12.6M5.2 1.7v2.6M10.8 1.7v2.6'/%3E%3C/svg%3E");
}

/* (가) 네이티브 아이콘이 있는 플랫폼 — 위치만 오른쪽 끝으로 고정한다 (2026-07-20 사용자 요청).
   값 바로 뒤에 붙어 필드 한가운데 뜨던 것을 다른 입력의 우측 아이콘과 줄 맞춘다.
   ⚠️ 의사요소 선택자는 **콤마로 묶지 말 것** — 모르는 접두사가 하나라도 있으면 규칙 전체가 버려진다. */
input.form-control[type="date"] {
    position: relative;
    /* ⚠️ 위쪽 `.ds .form-control{padding:… !important}` 를 이겨야 한다 (실측: 8.4px 로 밀렸었다). */
    padding-right: 2.2rem !important;
}
input.form-control[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* (나) 네이티브가 **아무것도 안 그리는** 플랫폼(iOS 계열 터치 기기) — 아이콘도 자리표시자도 우리가 그린다 */
@supports (-webkit-touch-callout: none) {
    @media (hover: none) and (pointer: coarse) {
        input.form-control[type="date"] {
            background-image: var(--ds-date-icon);
            background-repeat: no-repeat;
            background-position: right .6rem center;
            background-size: 1.05rem 1.05rem;
        }
        input.form-control[type="date"][data-empty]::before {
            content: attr(data-placeholder);
            position: absolute;
            left: 0;
            right: 2.2rem;
            top: 50%;
            transform: translateY(-50%);
            padding-left: inherit;   /* 입력창의 좌패딩을 그대로 따라간다 */
            color: var(--ds-date-placeholder-color);
            white-space: nowrap;
            overflow: hidden;
            pointer-events: none;
        }
        /* 포커스가 들어가면 네이티브 편집 UI 가 뜬다 — 자리표시자는 비켜야 한다 */
        input.form-control[type="date"][data-empty]:focus::before { content: ""; }
    }
}
/* ⚠️ DMC 는 이 규칙이 `design-system.css` 4-3 절에 있다. **세 앱이 같아야 한다.** */

/* ── 🔎 **모달 안 검색줄 — 좁은 폭에서 「검색 전 전폭 · 검색 후 반반」** (2026-09-01 사용자 지시 · 화면검증 #72)
   🔬 **무엇이 문제였나**(375px, 여행사 분쟁 등록 ▸ 거래 선택 모달): 검색 버튼이 **줄의 오른쪽 절반**만
      쓰고 왼쪽이 비었다. 범인은 「검색 취소」 버튼이다 — **`d-none` 으로 숨어 있을 뿐 DOM 에는 있어서**
      두 칸짜리 격자의 첫 칸을 예약해 버린다.
      🔑 **`d-none` 인 요소는 `offsetParent` 판정에서 빠진다** — 버튼을 셀 때 **숨은 것도 함께 볼 것.**
   ✅ **검색 전**(취소가 `d-none`) → 검색 버튼이 **줄 전체** · **검색 후**(취소가 보임) → **반반**.
   ⚠️ **모달은 `#kt_content.ds` 밖이라 `design-system.css` 의 `.ds .input-group` 격자가 닿지 않는다**
      → 여기서 격자를 **직접** 세운다. 🔥 선택자에 `.ds` 를 붙이지 말 것(조용히 아무 일도 안 한다).
   ⚠️ Bootstrap 의 `.input-group > .form-control{width:1%}` 은 격자에서 그대로 먹는다 → 폭을 되돌린다.
   🔴 **세 앱에 같은 문장으로 들어간다** — 이 앱은 공통코드·마진율·분쟁 모달이 대상이다. */
/* 🕘 2026-09-07: 문턱을 **575.98 → 767.98** 로 합쳤다(사장님 확정 「구간 수를 줄인다」).
   🔑 `design-system.css` 의 `.ds-actions` 문턱과 **같은 값**이어야 한다 — 한쪽만 옮기면 갈린다. */
@media (max-width: 767.98px) {
    .modal .input-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ds-search-gap);
        align-items: center;
    }
    .modal .input-group > .form-control,
    .modal .input-group > .form-select { width: auto; min-width: 0; }
    .modal .input-group > .input-group-text { display: none; }
    .modal .input-group > input[type="text"] { grid-column: 1 / -1; }
    .modal .input-group > .btn { grid-column: 1 / -1; }
    .modal .input-group:has(> .btn-secondary:not(.d-none)) > .btn { grid-column: auto; }
    .modal .input-group > .form-control,
    .modal .input-group > .btn { border-radius: .425rem !important; }
}