/* ==========================================================================
   딜런(Dealrun) 모던 테마 레이어
   - pay.css 이후에 로드되어 레거시 스타일을 덮어쓴다.
   - 기존 민트/틸 브랜드 컬러(#47b88d, #91d2c1)를 정제한 토큰 기반 디자인.
   ========================================================================== */

:root {
    /* 브랜드 팔레트 */
    --dr-brand-50: #eefaf4;
    --dr-brand-100: #d7f4e6;
    --dr-brand-200: #aee8d0;
    --dr-brand-300: #7ed8b6;
    --dr-brand-400: #47c096;
    --dr-brand-500: #2aa87e;
    --dr-brand-600: #1d8a67;
    --dr-brand-700: #1a6f55;

    /* 보조(블루) */
    --dr-blue-500: #3d83ac;
    --dr-blue-600: #2f6f95;

    /* 뉴트럴 */
    --dr-ink: #1c2430;
    --dr-ink-2: #45505f;
    --dr-muted: #8a94a3;
    --dr-bg: #f5f7f9;
    --dr-surface: #ffffff;
    --dr-border: #e5e9ef;

    /* 레이아웃 — 브레이크포인트: 모바일 <768 / 태블릿 768~1023 / 데스크톱 1024~1439 / 와이드 >=1440
       (미디어쿼리에서 --dr-gutter 를 단계별로 키운다) */
    --dr-gutter: 16px;
    --dr-maxw: 1200px;

    /* 앱 웹뷰(노치/홈 인디케이터) 안전영역 — 웹 브라우저에서는 전부 0 으로 평가된다 */
    --dr-safe-top: env(safe-area-inset-top, 0px);
    --dr-safe-bottom: env(safe-area-inset-bottom, 0px);
    --dr-safe-left: env(safe-area-inset-left, 0px);
    --dr-safe-right: env(safe-area-inset-right, 0px);

    /* 형태 */
    --dr-radius: 14px;
    --dr-radius-sm: 10px;
    --dr-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --dr-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.14);
    --dr-shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.18);

    /* pay.css 레거시 변수 재매핑 */
    --line_color: var(--dr-brand-400);
    --default-color: var(--dr-border);

    /* Bootstrap 5.3 전역 변수 재매핑 */
    --bs-body-color: var(--dr-ink);
    --bs-body-bg: var(--dr-bg);
    --bs-border-color: var(--dr-border);
    --bs-border-radius: var(--dr-radius-sm);
    --bs-link-color: var(--dr-brand-600);
    --bs-link-hover-color: var(--dr-brand-700);
}

/* --------------------------------------------------------------------------
   베이스
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Pretendard Variable", Pretendard, "NanumSquareRound",
        -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Malgun Gothic",
        sans-serif;
    background-color: var(--dr-bg);
    color: var(--dr-ink);
    letter-spacing: -0.01em;
    line-height: 1.6;
}

main {
    /* 고정 헤더(64px) + 안전영역만큼 밀어낸다 */
    padding-top: calc(76px + var(--dr-safe-top)) !important;
    padding-bottom: calc(24px + var(--dr-safe-bottom));
    /* pay.css 의 padding:2% 를 대체한다.
       퍼센트 여백은 375px 기기에서 7.5px 까지 줄어 부트스트랩 .row 의 -12px 음수 마진을
       상쇄하지 못해 가로 넘침을 만들었다. 거터를 12px 보다 크게 고정해 구조적으로 막는다. */
    padding-left: max(var(--dr-gutter), var(--dr-safe-left));
    padding-right: max(var(--dr-gutter), var(--dr-safe-right));

    /* pay.css 는 @media(min-width:1024px) 에서 main 을 width:60% / margin-left:20% 로 눌러
       PC 본문을 좁은 칸에 밀어넣고 있었다. 그게 'PC가 모바일을 늘려놓은 것 같다'의 실체다.
       max-width 로는 width 를 못 이기므로 여기서 width 자체를 되돌린다.
       (theme.css 가 pay.css 뒤에 로드되므로 같은 명시도로 이긴다) */
    width: auto;

    /* 넓은 화면에서 본문이 끝없이 늘어나지 않도록 폭을 고정하고 가운데 정렬한다.
       화면별 <style> 이 padding 만 덮어쓰는 경우가 많아, 폭 제약은 여기 한 곳에서 건다. */
    max-width: calc(var(--dr-maxw) + 2 * var(--dr-gutter));
    margin-inline: auto;

    /* 로그인 계열 레이아웃은 레거시 mes/css/primary.css 가 body 를 flex 로 만든다.
       그러면 main 이 flex 아이템이 되어 폭이 '내용 크기'로 잡히고, 기본 min-width:auto
       때문에 뷰포트보다 좁아지지 못해 모바일에서 가로로 넘쳐 잘렸다.
       아래 두 줄이 flex 컨텍스트에서도 main 이 정상적으로 폭을 채우고 줄어들게 한다.
       (body 가 block 인 레이아웃에서는 무해하게 무시된다) */
    flex: 1 1 auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   카드 목록 그리드 — 모바일 1열 / 태블릿 2열 / 와이드 3열
   목록 화면(일감·상품홍보 등)이 넓은 화면에서 한 줄에 하나씩 늘어지는 것을 막는다.
   -------------------------------------------------------------------------- */
.dr-cardgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 768px) {
    .dr-cardgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1280px) {
    .dr-cardgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 그리드 안에서는 행 구분선이 필요 없다 (레거시 목록이 <hr> 로 항목을 나눈다).
   구분선이 사라지는 대신 항목마다 카드 테두리를 줘 경계를 만든다. */
@media (min-width: 768px) {
    .dr-cardgrid > hr {
        display: none;
    }

    .dr-cardgrid > .box {
        padding: 18px 16px;
        background: var(--dr-surface);
        border: 1px solid var(--dr-border);
        border-radius: var(--dr-radius);
        box-shadow: var(--dr-shadow-sm);
    }
}

/* 공용 페이지 컨테이너 — 넓은 화면에서 콘텐츠가 끝없이 늘어나지 않도록 폭을 고정한다 */
.dr-container {
    width: 100%;
    max-width: var(--dr-maxw);
    margin-inline: auto;
}

/* 브레이크포인트별 거터 */
@media (min-width: 768px) {
    :root { --dr-gutter: 24px; }
}

@media (min-width: 1024px) {
    :root { --dr-gutter: 32px; }
}

/* 가로 넘침 최종 방어선.
   clip 은 hidden 과 달리 세로축을 스크롤 컨테이너로 만들지 않아 고정 헤더에 영향이 없다. */
html,
body {
    overflow-x: clip;
}

i {
    color: var(--dr-brand-500);
}

.btn i,
.menu-tile i,
.dr-menu-link i {
    color: inherit;
}

::selection {
    background: var(--dr-brand-200);
}

/* --------------------------------------------------------------------------
   헤더 (스티키 + 블러)
   -------------------------------------------------------------------------- */
header {
    /* 웹뷰에서 상태바(노치) 영역까지 배경을 덮고, 내용은 그 아래에 오도록 한다 */
    height: calc(64px + var(--dr-safe-top));
    padding: var(--dr-safe-top) max(16px, var(--dr-safe-right)) 0 max(16px, var(--dr-safe-left));
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--dr-border);
    box-shadow: var(--dr-shadow-sm);
    transition: top 0.25s ease;
    z-index: 1030;
}

/* 스크롤 시 헤더 숨김 — 안전영역이 있으면 그만큼 더 올려야 완전히 사라진다 */
header.nav-up {
    top: calc(-1 * (64px + var(--dr-safe-top)));
}

header.d-flex,
header.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   헤더 내부 — PC 가로 메뉴 / 모바일 햄버거 전환
   1024px 을 기준으로 내비게이션 방식이 바뀐다.
   -------------------------------------------------------------------------- */
.dr-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: var(--dr-maxw);
    margin-inline: auto;
    min-width: 0;
}

/* PC 가로 메뉴 — 1024px 미만에서는 숨긴다 */
.dr-nav {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    min-width: 0;
}

.dr-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--dr-radius-sm);
    color: var(--dr-ink-2);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dr-nav-link:hover {
    background: var(--dr-brand-50);
    color: var(--dr-brand-700);
}

/* 현재 보고 있는 화면 — 색만으로 구분하지 않도록 밑줄을 함께 준다 */
.dr-nav-link.is-active {
    color: var(--dr-brand-700);
    background: var(--dr-brand-50);
    box-shadow: inset 0 -2px 0 var(--dr-brand-500);
}

.dr-nav-link.is-logout {
    display: none;
    color: var(--dr-muted);
    font-weight: 500;
}

.dr-nav-link.is-logout:hover {
    background: transparent;
    color: #b4232f;
}

.dr-header-end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}

@media (min-width: 1024px) {
    .dr-nav,
    .dr-nav-link.is-logout {
        display: inline-flex;
    }

}

/* 좁은 화면에서 회사명이 로고와 햄버거를 밀어내지 않도록 */
@media (max-width: 560px) {
    header .welcome {
        display: none;
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.brand-logo {
    height: 30px;
    width: auto;
    display: block;
}

header .welcome {
    font-size: 0.875rem;
    color: var(--dr-ink-2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* pay.css 의 fixed 배치 해제 후 재정의 */
header .btn-home {
    position: static;
    width: auto;
    height: auto;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
}

header .btn-menu {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.1rem;
    color: var(--dr-ink);
    border: 1px solid var(--dr-border) !important;
    border-radius: var(--dr-radius-sm);
    background: var(--dr-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

header .btn-menu:hover {
    background: var(--dr-brand-50);
    border-color: var(--dr-brand-300) !important;
    color: var(--dr-brand-700);
}

/* --------------------------------------------------------------------------
   버튼
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--dr-radius-sm);
    border-radius: var(--dr-radius-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary,
.btn-secondary,
.btn-info,
.btn-success {
    border: 1px solid transparent !important;
    color: #fff;
    box-shadow: var(--dr-shadow-sm);
}

.btn-primary {
    background-color: var(--dr-brand-500);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--dr-brand-600) !important;
    color: #fff;
}

.btn-secondary {
    background-color: var(--dr-brand-600);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--dr-brand-700) !important;
    color: #fff;
}

.btn-info {
    background-color: var(--dr-blue-500);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--dr-blue-600) !important;
    color: #fff;
}

.btn-success {
    background-color: var(--dr-brand-500);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--dr-brand-600) !important;
    color: #fff;
}

.btn-danger {
    background-color: #d64550;
    border-color: transparent !important;
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #bd3641 !important;
    color: #fff;
}

.btn-outline-dark,
.btn-outline-secondary {
    border: 1px solid var(--dr-border) !important;
    color: var(--dr-ink-2);
    background: var(--dr-surface);
}
.btn-outline-dark:hover,
.btn-outline-secondary:hover {
    background: var(--dr-bg);
    color: var(--dr-ink);
    border-color: var(--dr-muted) !important;
}

.btn-light {
    border: 1px solid var(--dr-border) !important;
    background: var(--dr-surface);
}

/* --------------------------------------------------------------------------
   컨트롤 나열 행 보정 (검색줄 등)
   - 레거시 마크업은 mr8 같은 미로드 유틸 클래스에 의존해 버튼이 서로 붙고,
     flex stretch 시 <a class="btn">만 텍스트가 위로 쏠린다. 여기서 일괄 보정.
   -------------------------------------------------------------------------- */
.d-flex:has(> .btn),
.d-flex:has(> select),
.d-flex:has(> input:not([type="hidden"])) {
    gap: 8px;
    flex-wrap: wrap;
}

/* stretch 된 높이 안에서 a/button 텍스트 상하 중앙 정렬 */
.d-flex > .btn,
.select-box > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* 레거시 검색줄 컨테이너 (제품목록 등) */
.select-box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

/* 레거시 세로 여백 유틸리티 복원 */
.mt6 { margin-top: 6px !important; }
.mb6 { margin-bottom: 6px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb32 { margin-bottom: 32px !important; }
.jc-end { justify-content: flex-end; }

/* input-group: 부착형 대신 간격형으로 통일 (레거시 마크업이 단순 가로 배치 용도로 사용) */
.input-group {
    gap: 8px;
    align-items: center;
}

.input-group > :not(:first-child) {
    margin-left: 0 !important;
}

.input-group > .btn,
.input-group > .btn2,
.input-group > .form-control,
.input-group > .form-select,
.input-group > select,
.input-group > input:not([type="hidden"]) {
    border-radius: var(--dr-radius-sm) !important;
}

/* 구 MES의 btn2 클래스: .btn 과 동일한 베이스 부여 */
.btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--dr-border) !important;
    border-radius: var(--dr-radius-sm) !important;
    background: var(--dr-surface);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--dr-shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease, transform 0.1s ease;
}

.btn2:active {
    transform: translateY(1px);
}

.btn2.btn-info,
.btn2.btn-success,
.btn2.btn-danger,
.btn2.btn-primary,
.btn2.btn-secondary {
    border-color: transparent !important;
    color: #fff;
}

.btn2.btn-danger {
    background-color: #d64550;
}
.btn2.btn-success {
    background-color: var(--dr-brand-500);
}

/* --------------------------------------------------------------------------
   폼 (pay.css 의 * { border:none } 복구 포함)
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="search"] {
    border: 1px solid var(--dr-border) !important;
    border-radius: var(--dr-radius-sm) !important;
    background-color: var(--dr-surface);
    color: var(--dr-ink);
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus,
input:focus {
    outline: none;
    border-color: var(--dr-brand-400) !important;
    box-shadow: 0 0 0 3px var(--dr-brand-100);
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--dr-muted);
}

.form-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dr-ink-2);
    margin-bottom: 0.4rem;
}

.form-check-input {
    border: 1px solid var(--dr-border) !important;
}
.form-check-input:checked {
    background-color: var(--dr-brand-500);
    border-color: var(--dr-brand-500) !important;
}

/* --------------------------------------------------------------------------
   카드 / 리스트
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--dr-border) !important;
    border-radius: var(--dr-radius);
    background: var(--dr-surface);
    box-shadow: var(--dr-shadow-sm);
    overflow: hidden;
}

.card-header {
    background: var(--dr-surface);
    border-bottom: 1px solid var(--dr-border) !important;
    font-weight: 700;
}

.card-body {
    padding: 20px;
    font-size: 1rem;
    font-weight: 400;
}

.list-group {
    --bs-list-group-border-color: var(--dr-border);
    --bs-list-group-border-radius: var(--dr-radius-sm);
}

.list-group-item {
    border: 1px solid var(--dr-border);
    background: var(--dr-surface);
}

/* --------------------------------------------------------------------------
   테이블
   -------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--dr-border);
    background: var(--dr-surface);
}

.table th {
    font-weight: 700;
    color: var(--dr-ink-2);
    background: var(--dr-bg);
}

.table td,
.table th {
    border-bottom: 1px solid var(--dr-border);
    padding: 0.65rem 0.75rem;
}

/* --------------------------------------------------------------------------
   오프캔버스 (사이드 메뉴)
   -------------------------------------------------------------------------- */
.offcanvas {
    border: none !important;
    box-shadow: var(--dr-shadow-lg);
}

.offcanvas-header {
    /* 전체높이 패널이라 노치/홈 인디케이터에 걸린다 */
    padding: calc(18px + var(--dr-safe-top)) max(20px, var(--dr-safe-right)) 18px 20px;
    border-bottom: 1px solid var(--dr-border) !important;
}

.offcanvas-title {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.offcanvas-body {
    padding: 12px 12px calc(12px + var(--dr-safe-bottom));
}

.dr-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dr-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--dr-radius-sm);
    color: var(--dr-ink);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dr-menu-link i {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    color: var(--dr-brand-500);
    flex-shrink: 0;
}

.dr-menu-link:hover {
    background: var(--dr-brand-50);
    color: var(--dr-brand-700);
}

.dr-menu-link.is-active {
    background: var(--dr-brand-50);
    color: var(--dr-brand-700);
    box-shadow: inset 3px 0 0 var(--dr-brand-500);
}

.dr-menu-link.is-danger {
    color: #b4232f;
}
.dr-menu-link.is-danger i {
    color: #b4232f;
}
.dr-menu-link.is-danger:hover {
    background: #fdf0f1;
}

.dr-menu-divider {
    height: 1px;
    background: var(--dr-border);
    margin: 8px 6px;
}

.dr-menu-note {
    padding: 12px 14px;
    font-size: 0.875rem;
    color: var(--dr-muted);
    background: var(--dr-bg);
    border-radius: var(--dr-radius-sm);
    margin: 4px 2px;
}

/* --------------------------------------------------------------------------
   모달 / 토스트 / 알림
   -------------------------------------------------------------------------- */
.modal-content {
    border: none !important;
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--dr-border) !important;
    padding: 16px 20px;
}

.modal-title {
    font-weight: 700;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--dr-border) !important;
    padding: 12px 20px;
    gap: 8px;
}

.toast {
    border: 1px solid var(--dr-border) !important;
    border-radius: var(--dr-radius-sm);
    box-shadow: var(--dr-shadow-lg);
    background: rgba(255, 255, 255, 0.97);
}

.toast-header {
    border-bottom: 1px solid var(--dr-border) !important;
    background: var(--dr-surface);
    border-radius: var(--dr-radius-sm) var(--dr-radius-sm) 0 0;
    font-weight: 700;
}

.alert {
    border-radius: var(--dr-radius-sm);
    border: 1px solid transparent !important;
}

.alert-danger {
    background: #fdf0f1;
    color: #a01f2a;
    border-color: #f5c6cb !important;
}

.badge {
    padding: 0.45em 0.8em;
    margin: 4px;
    border-radius: 999px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   메인 대시보드 타일
   -------------------------------------------------------------------------- */
.dr-hero {
    text-align: center;
    padding: 20px 16px 8px;
}

.dr-hero img {
    width: 160px;
    max-width: 60%;
}

.dr-hero-tagline {
    margin-top: 8px;
    color: var(--dr-muted);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 16px;
    max-width: 560px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 720px;
    }
}

/* 타일이 6개라 3열이 딱 2줄로 떨어진다. 열 수는 유지하고 폭만 넓혀 여백을 줄인다. */
@media (min-width: 1024px) {
    .menu-grid {
        max-width: 880px;
        gap: 18px;
    }
}

.menu-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 12px;
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-sm);
    color: var(--dr-ink);
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.menu-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--dr-shadow);
    border-color: var(--dr-brand-300);
    color: var(--dr-ink);
}

.menu-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--dr-brand-50);
    color: var(--dr-brand-600);
    font-size: 1.35rem;
}

.menu-tile-label {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

/* 인증/승인 안내 상태 카드 */
.dr-empty-state {
    max-width: 420px;
    margin: 24px auto;
    padding: 32px 24px;
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-sm);
    text-align: center;
}

.dr-empty-state p {
    color: var(--dr-ink-2);
    margin-bottom: 16px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   로그인 화면
   -------------------------------------------------------------------------- */
.dr-auth-wrap {
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
}

.dr-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow);
    padding: 32px 26px;
}

.dr-auth-title {
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.dr-auth-card .form-control {
    padding: 0.75rem 0.95rem;
    font-size: 1rem;
}

.dr-auth-card .form-control + .form-control {
    margin-top: 10px;
}

.dr-auth-submit {
    width: 100%;
    margin-top: 14px;
    padding: 0.75rem;
    font-size: 1.05rem;
}

.dr-auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 0.9rem;
}

.dr-auth-links a {
    color: var(--dr-ink-2);
    font-weight: 600;
}

.dr-auth-links a:hover {
    color: var(--dr-brand-600);
}

.dr-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--dr-muted);
    font-size: 0.85rem;
}

.dr-auth-divider::before,
.dr-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dr-border);
}

.dr-auth-sns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.dr-auth-sns img {
    height: 46px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-auth-sns img:hover {
    transform: translateY(-2px);
    box-shadow: var(--dr-shadow);
}

/* --------------------------------------------------------------------------
   로그인 하단 상품홍보 카드 (product_introduce/app 공개 상품)
   -------------------------------------------------------------------------- */
.dr-promo {
    max-width: 1080px;
    margin: 8px auto 0;
    padding: 0 16px 8px;
}

.dr-promo-head {
    text-align: center;
    margin-bottom: 18px;
}

.dr-promo-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dr-promo-sub {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--dr-muted);
}

.dr-promo-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* 카드가 적을 땐 가운데 정렬, 넘칠 땐 좌측부터 스크롤 (margin:auto 트릭) */
.dr-promo-card:first-child {
    margin-left: auto;
}

.dr-promo-card:last-child {
    margin-right: auto;
}

.dr-promo-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-sm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dr-shadow);
}

.dr-promo-thumb {
    height: 130px;
    background: var(--dr-bg);
}

.dr-promo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dr-promo-body {
    padding: 12px 14px 14px;
}

.dr-promo-name {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-promo-company {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--dr-brand-600);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-promo-desc {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--dr-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   로그인 하단 일감찾기 카드 (진행중 일감의 회사 정보)
   -------------------------------------------------------------------------- */
.dr-quests {
    max-width: 1080px;
    margin: 8px auto 0;
    padding: 0 16px 8px;
}

.dr-quest-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.dr-quest-card:first-child {
    margin-left: auto;
}

.dr-quest-card:last-child {
    margin-right: auto;
}

.dr-quest-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-sm);
    padding: 14px 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-quest-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dr-shadow);
}

.dr-quest-company {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-quest-keywords {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dr-quest-kw {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dr-brand-600);
    background: var(--dr-bg);
    border: 1px solid var(--dr-border);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.dr-quest-meta {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--dr-ink-2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dr-quest-label {
    color: var(--dr-muted);
    margin-right: 6px;
}

/* --------------------------------------------------------------------------
   푸터
   -------------------------------------------------------------------------- */
footer.info {
    display: block;
    height: auto;
    margin-top: 48px;
    padding: 32px max(20px, var(--dr-safe-right)) calc(40px + var(--dr-safe-bottom)) max(20px, var(--dr-safe-left));
    background: var(--dr-surface);
    border-top: 1px solid var(--dr-border);
}

footer.info .footer {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

footer.info .footer img {
    width: 120px !important;
    opacity: 0.85;
    margin-bottom: 14px;
}

footer.info .footer p {
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: var(--dr-muted);
    line-height: 1.7;
}

footer.info .footer a {
    color: var(--dr-ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer.info .footer hr {
    display: none;
}

/* --------------------------------------------------------------------------
   맨위로 버튼 (FAB)
   -------------------------------------------------------------------------- */
.totop {
    top: auto;
    bottom: calc(28px + var(--dr-safe-bottom));
    left: auto;
    right: max(20px, var(--dr-safe-right));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dr-surface);
    border: 1px solid var(--dr-border) !important;
    box-shadow: var(--dr-shadow);
    color: var(--dr-brand-600);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 0.25s ease, top 0.25s ease, opacity 0.25s ease;
}

.totop.top-up {
    top: auto;
    bottom: calc(-80px - var(--dr-safe-bottom));
    opacity: 0;
}

/* --------------------------------------------------------------------------
   기타 레거시 정리
   -------------------------------------------------------------------------- */
.title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

hr {
    border: 0;
    border-top: 1px solid var(--dr-border);
    opacity: 1;
}

.nav * {
    border-radius: var(--dr-radius-sm);
}

/* 로딩 오버레이 */
.wrap-loading {
    background: rgba(28, 36, 48, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   설정 화면 (내 정보 / mes/auth/my)
   항목을 패널로 묶고, 한 줄 = 한 항목으로 구분선을 준다.
   라벨(작고 흐리게)과 값(크고 진하게)의 대비로 훑어읽기 쉽게 만든다.
   -------------------------------------------------------------------------- */
.dr-settings {
    max-width: 560px;
    margin: 0 auto;
    /* main 의 좌우 여백(2%)만으로는 좁은 화면에서 카드가 화면 끝에 붙는다 */
    padding: 0 16px;
}

.dr-settings-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.dr-panel {
    background: var(--dr-surface);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.dr-panel-head {
    padding: 12px 18px;
    background: var(--dr-bg);
    border-bottom: 1px solid var(--dr-border);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dr-muted);
}

/* 한 항목 = 한 줄 */
.dr-field {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--dr-border);
}

/* 패널 머리글이 이미 아래 테두리를 갖고 있으므로 첫 줄은 테두리를 빼 겹침을 막는다 */
.dr-field:first-child,
.dr-panel-head + .dr-field {
    border-top: 0;
}

.dr-field-label {
    flex: 0 0 92px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dr-ink-2);
}

.dr-field-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dr-ink);
    word-break: break-all;
}

.dr-field-value.is-empty {
    color: var(--dr-muted);
    font-weight: 500;
    text-align: left;
}

.dr-field .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.dr-field-help {
    padding: 0 18px 14px;
    margin: -6px 0 0;
    font-size: 0.8125rem;
    color: var(--dr-muted);
}

/* 좁은 화면에서는 라벨 위 / 입력 아래로 쌓아 입력폭을 확보한다 */
@media (max-width: 480px) {
    .dr-field.is-input {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .dr-field.is-input .dr-field-label {
        flex: none;
    }
}

.dr-panel-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--dr-border);
}

.dr-panel-foot:first-child {
    border-top: 0;
}

/* 계정 관리: 줄 전체가 하나의 동작 */
.dr-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    border-top: 1px solid var(--dr-border);
    background: none;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dr-ink);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dr-action:first-child,
.dr-panel-head + .dr-action {
    border-top: 0;
}

.dr-action::after {
    content: "\203A";
    font-size: 1.25rem;
    line-height: 1;
    color: var(--dr-muted);
}

.dr-action:hover {
    background: var(--dr-brand-50);
    color: var(--dr-brand-700);
}

.dr-action.is-danger {
    color: #b4232f;
}

.dr-action.is-danger:hover {
    background: #fdf1f0;
    color: #b4232f;
}

/* 저장 버튼 — 항목 패널과 떨어뜨려 주 동작임을 분명히 한다 */
.dr-settings-submit {
    margin: 4px 0 24px;
}

/* 넓은 화면에서는 2단으로 나눠 한 컬럼이 허전하게 늘어지는 것을 막는다.
   좁은 화면에서는 1단이라 DOM 순서(계정 → 개인정보 → 회사 → 계정관리) 그대로다. */
.dr-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .dr-settings {
        max-width: 960px;
    }

    .dr-settings-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   좁은 화면 검색 도구모음 줄바꿈
   레거시 검색줄(.words / .search)은 flex nowrap 이라 요소 4개(select+input+버튼2)가
   390px 화면을 넘어 좌우로 잘려 나갔다. 줄바꿈과 축소를 허용해 화면 안에 들어오게 한다.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    main .words,
    main .search {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* flex 아이템 기본 min-width:auto 가 축소를 막는다 */
    main .words > *,
    main .search > * {
        min-width: 0;
    }
}

/* ==========================================================================
   데스크톱 조판 레이어 (>=1024px)
   레거시 화면은 모든 요소가 전체 너비로 늘어나는 모바일 규격으로 짜여 있다.
   (.plus{width:100%} / .flex-sm-fill / .search{width:100%} / .nav-fill)
   화면마다 마크업을 고치는 대신, 기존 클래스를 그대로 두고 넓은 화면에서만
   조판을 바꾼다. 화면별 <style> 이 body 에 있어 문서 순서로는 뒤에 오므로
   main 을 앞에 붙여 명시도(specificity)로 이긴다.
   ========================================================================== */
@media (min-width: 1024px) {

    /* ---- 페이지 머리말: 제목 왼쪽 / 주요 동작 오른쪽 ---- */
    main .sub_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        text-align: left;
        margin: 4px 0 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--dr-border);
    }

    main .sub_title h1 {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        margin: 0;
        white-space: nowrap;
    }

    /* 줄바꿈용 <br> 은 가로 배치에서 의미가 없다 */
    main .sub_title br {
        display: none;
    }

    /* 전체 너비로 늘어나던 주요 동작 버튼을 내용 크기로 되돌린다 */
    main .sub_title .plus,
    main .sub_title .btn {
        width: auto;
        flex: 0 0 auto;
    }

    /* ---- 탭: 전체 너비 등분 → 내용 크기 세그먼트, 좌측 정렬 ---- */
    main .nav-pills,
    main .sub_tap .nav {
        justify-content: flex-start;
        gap: 6px;
        flex-wrap: wrap;
    }

    main .nav-fill > .nav-item,
    main .nav-pills > .nav-item {
        flex: 0 0 auto;
    }

    /* nav-item 에 붙은 w-100 이 세 번째 탭을 다음 줄로 밀어낸다 */
    main .nav-pills > .nav-item.w-100 {
        width: auto !important;
    }

    main .sub_tap .nav .nav-link,
    main .sub_tap .nav .btn-list,
    main .nav-pills .nav-link {
        /* .flex-sm-fill 이 !important 로 붙어 있어 여기서도 !important 가 필요하다 */
        flex: 0 0 auto !important;
        width: auto;
        padding-inline: 20px;
    }

    /* ---- 검색 도구모음: 가운데 정렬 전체 너비 → 좌측 정렬 한 줄 ---- */
    main .search {
        width: auto;
        justify-content: flex-start;
        gap: 8px;
        align-items: center;
    }

    /* 검색 폼 안의 justify-content-between 이 검색/등록 버튼을 양 끝으로 밀어낸다 */
    main .sub_tap form .d-flex.justify-content-between {
        justify-content: flex-start !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        width: auto;
    }

    /* 입력은 적당한 폭으로, 버튼은 내용 크기로 */
    main .sub_tap form .form-control,
    main .search .form-control {
        width: auto;
        flex: 0 1 320px;
        min-width: 200px;
    }

    main .sub_tap form .btn,
    main .sub_tap form select,
    main .search .btn,
    main .search select {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }

    /* 등록 버튼은 도구모음 오른쪽 끝으로 */
    main .sub_tap form .d-flex.justify-content-md-end {
        margin-left: auto;
    }

    /* PC 에는 가로 메뉴가 있으므로 햄버거를 감춘다.
       (header .btn-menu 기본 규칙이 파일 앞쪽에 있어, 반드시 그 뒤에서 선언해야 이긴다) */
    header .btn-menu {
        display: none;
    }

    /* ---- 라벨/입력 2단 폼 ----
       본문이 1200px 이 되면서 col-sm-4 라벨 열이 400px 까지 벌어져
       라벨과 입력이 화면 반대편에 놓였다. 폼 블록만 읽기 좋은 폭으로 제한한다.
       (820px → 라벨 273px / 입력 547px)
       :has() 로 '폼 행을 가진 sub_tap' 만 골라 목록 화면의 검색 도구모음은 건드리지 않는다.
       미지원 브라우저에서는 규칙이 통째로 무시돼 기존 동작을 유지한다. */
    main .sub_tap:has(.form-group.row) {
        max-width: 820px;
    }

    /* ---- 라벨/입력 2단 폼: 입력 컨트롤 좌측 정렬 통일 ----
       바로 위 '검색 도구모음' 규칙 두 개가 폼 행까지 흘러들어와 행마다 시작 위치가 달랐다.
         · .d-flex.justify-content-between → width:auto
           → 버튼을 품은 라벨(품목(복종)·주소)의 열이 내용 크기로 줄어, 그 행만 입력이 왼쪽으로 밀렸다.
         · .form-control → width:auto / flex:0 1 320px
           → w-100 이 붙은 입력만 꽉 차고, 나머지(주소·단가·textarea)는 제각각 폭이 됐다.
       폼 행 안에서는 두 규칙을 되돌려, 라벨 열을 고정 폭으로 두고 입력을 한 줄에 맞춘다. */
    main .sub_tap .form-group.row > .col-sm-4 {
        flex: 0 0 auto;
        width: 210px;
        max-width: 210px;
        /* 라벨 안의 작은 버튼(키워드 / 내 주소)은 입력 쪽에 붙여 둔다 */
        justify-content: space-between !important;
    }

    main .sub_tap .form-group.row > .col-sm-8 {
        flex: 1 1 auto;
        width: auto;
        max-width: 620px;
        /* m-auto(margin:auto !important) 가 남아 있으면 열이 가운데로 떠 버린다 */
        margin: 0 !important;
    }

    /* 입력은 자기 열을 꽉 채운다 (검색바용 flex:0 1 320px 무력화) */
    main .sub_tap .form-group.row .form-control,
    main .sub_tap .form-group.row textarea,
    main .sub_tap .form-group.row input:not([type="hidden"]):not([type="button"]):not([type="file"]) {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    /* 입력 + 단위/버튼이 한 줄인 칸(주소 · 단가)은 단위·버튼 폭만 남기고 입력이 나머지를 먹는다.
       입력에 width:100% 가 남아 있으면 뒤따르는 '원'/버튼이 다음 줄로 떨어진다. */
    main .sub_tap .form-group.row .input-group {
        width: 100%;
        flex-wrap: nowrap;
    }

    /* 위 '입력은 자기 열을 꽉 채운다' 규칙의 :not() 3개가 특이도를 (0,6,2) 까지 올려 놓았다.
       input-group 안에서는 그보다 확실히 높아야 width:100% 를 이길 수 있다. */
    main .sub_tap .form-group.row .input-group > .form-control,
    main .sub_tap .form-group.row .input-group > input:not([type="hidden"]):not([type="button"]):not([type="file"]),
    main .sub_tap .form-group.row .input-group > textarea,
    main .sub_tap .form-group.row .input-group > select {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    main .sub_tap .form-group.row .input-group > .btn,
    main .sub_tap .form-group.row .input-group > .input-group-text {
        flex: 0 0 auto;
        width: auto;
    }

    /* 탭 활성색을 부트스트랩 기본 파랑 → 브랜드 민트로.
       헤더 가로 메뉴와 톤이 어긋나 있었다. */
    main .nav-pills .nav-link.active,
    main .nav-pills .show > .nav-link,
    main .sub_tap .nav .nav-link.active,
    main .sub_tap .nav .btn-list.active {
        background-color: var(--dr-brand-600);
        border-color: var(--dr-brand-600);
        color: #fff;
    }
}

/* 탭 활성색은 모바일에서도 동일하게 맞춘다 */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.sub_tap .nav .nav-link.active,
.sub_tap .nav .btn-list.active {
    background-color: var(--dr-brand-600);
    border-color: var(--dr-brand-600);
    color: #fff;
}

/* 외부 서비스로 나가는 링크 표식 (그림 AI) — 새 탭으로 열린다는 것을 미리 알린다 */
.dr-external-mark {
    font-size: 0.72em;
    opacity: 0.55;
    margin-left: 5px;
    vertical-align: baseline;
}

.dr-menu-link .dr-external-mark {
    margin-left: auto;
    color: var(--dr-muted);
}

/* --------------------------------------------------------------------------
   외부 서비스 임베드 (그림 AI)
   딜런 헤더를 남긴 채 외부 화면을 품는다 — 나갔다가 돌아올 길을 만든다.
   -------------------------------------------------------------------------- */
.dr-embed {
    display: flex;
    flex-direction: column;
    /* 헤더(64px) + main 상하 여백을 뺀 만큼 채운다 */
    min-height: calc(100dvh - 76px - var(--dr-safe-top) - var(--dr-safe-bottom) - 24px);
}

.dr-embed-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--dr-border);
}

.dr-embed-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.dr-embed-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dr-embed-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 60vh;
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    background: var(--dr-surface);
    box-shadow: var(--dr-shadow-sm);
}

.dr-embed-note {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius-sm);
    background: var(--dr-surface);
    color: var(--dr-ink-2);
    font-size: 0.9375rem;
    text-align: center;
}

/* 좁은 화면에서는 보조 버튼을 아이콘만 남겨 '딜런으로' 버튼의 자리를 확보한다 */
@media (max-width: 560px) {
    .dr-embed-newtab-text {
        display: none;
    }
}