/* =====================================================================
   택배왔섬 사용자 앱(웹뷰) — 메인 화면 스타일
   색상은 delivery-tokens.css 의 var(--dlv-*) 만 사용한다(하드코딩 금지).
   본문 글자 크기는 calc(Npx * var(--dlv-text-scale, 1)) 로 둔다 — 마이페이지의
   '글자 크기' 슬라이더가 html 의 --dlv-text-scale 하나만 바꾼다(text-scale.js).
   이모지 아이콘·장식과 탭바 라벨은 고정 px 로 남겼다(고정 높이 박스를 넘긴다).
   Sneat/Bootstrap 을 싣지 않는 독립 레이아웃이라 리셋도 여기서 최소한만 둔다.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* body 는 max-width 로 잘려 있어 배경이 화면 전체를 못 덮는다.
   html 에 배경을 안 깔면 iOS 다크모드 WKWebView 의 under-page 배경(검정)이
   스와이프 뒤로가기 중에 그대로 비친다. color-scheme 로 라이트 고정까지 같이. */
/* text-size-adjust: 기기 글자 크기·브라우저 자동 확대가 본문에 곱해지는 것을 막는다.
   크기는 마이페이지의 '글자 크기'(--dlv-text-scale) 하나로만 정한다. */
/* overscroll-behavior-y: 끝에서 튕기는 바운스를 끈다 — 탭바는 sticky 라 스크롤 레이어와 함께 튕겨
   바닥에서 떠올라 보였다. iOS 15 이하 WebView 는 이 속성을 무시해 바운스가 남는다. */
html { min-height: 100%; background: var(--dlv-bg); color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; }

.dlv-app {
    /* 앱 화면 폭(와이어프레임 .phone). 프레임·탭바·본문이 이 값 하나를 공유한다. */
    --dlv-app-width: 430px;
    margin: 0;
    /* 하단 sticky 버튼(.dlv-sticky) + iOS 홈 인디케이터 만큼 본문 여백 확보.
       탭바가 있는 화면은 탭바가 제자리를 차지하므로 아래에서 되돌린다. */
    padding: 0 0 calc(72px + env(safe-area-inset-bottom));
    background: var(--dlv-bg);
    color: var(--dlv-text-strong);
    /* 앱 본문 기준 크기. font:inherit 인 input·button·select 도 이 값을 따른다. */
    font-size: calc(18px * var(--dlv-text-scale, 1));
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* 입력칸까지 막으면 iOS 에서 커서 이동·붙여넣기가 안 된다. */
.dlv-app input, .dlv-app textarea, .dlv-app [contenteditable] { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }

/* 특정성을 태그 단독으로 낮춰 둔다 — .dlv-btn 같은 클래스가 색을 덮어쓸 수 있어야 한다. */
a { text-decoration: none; color: inherit; }
/* 이 리셋도 태그 단독이어야 한다 — .dlv-app 을 붙이면 .dlv-desc·.dlv-notice-card 같은
   클래스의 margin 을 이겨 간격이 통째로 죽는다.(이 파일은 앱 화면에서만 로드돼 범위는 같다) */
h1, h2, p, ul { margin: 0; }
.dlv-app ul { padding: 0; list-style: none; }

/* 앱 화면 규격 — 기획 와이어프레임 `.phone`(430px) 기준.
   좁은 화면은 전체폭, 넓은 화면은 가운데 폰 프레임(와이어프레임의 @media(max-width:460px) 와 동일 분기). */
/* 오류 색은 앱 전용(관리자 화면은 delivery-tokens.css 의 기본값 유지) */
/* success 는 앱에서만 진하게 쓴다 — TDS 기본값(#16a34a)은 연녹 배지 배경 위에서 3.00:1 로 AA 미달이다. */
.dlv-app { max-width: var(--dlv-app-width); margin-inline: auto; --dlv-danger: #e85656; --dlv-danger-bg: #ffefef; --dlv-success: #15803d; }
/* width:100% 는 flex 자식이 될 때를 위한 것이다 — 탭바가 있는 메인 화면은 body 가 세로 flex 라
   (푸터를 탭바 위로 밀어내려고) 여기 margin-inline:auto 가 stretch 를 무효화해 폭이 내용만큼 줄어든다.
   box-sizing:border-box 라 padding 이 있어도 넘치지 않고, block 배치에서는 결과가 종전과 같다. */
.dlv-header, .dlv-main { width: 100%; max-width: var(--dlv-app-width); margin-inline: auto; }

/* ── 헤더 ────────────────────────────────────────────────────────── */
.dlv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
}

.dlv-header__logo {
    display: inline-flex;
    align-items: center;
}
/* 글자 크기 설정(--dlv-text-scale)을 따르지 않는다 — 로고는 본문이 아니라 표식이다. */
.dlv-header__logo img { height: 30px; width: auto; }

.dlv-header__bell {
    position: relative;
    display: inline-flex;
    padding: 4px;
    color: var(--dlv-grey-900);
}

.dlv-header__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dlv-danger);
}

/* ── 본문 ────────────────────────────────────────────────────────── */
/* 키보드·접근성 이동 표시. 브라우저 기본 링은 카드 모서리에 딱 붙어 테두리와 겹쳐 보인다. */
.dlv-app :focus-visible { outline: 2px solid var(--dlv-primary); outline-offset: 2px; }

/* 누른 느낌. 위에서 -webkit-tap-highlight-color 를 껐기 때문에 기본 피드백이 아예 없다.
   filter 는 배경색이 무엇이든 같은 비율로 어둡게 하므로 버튼마다 눌림 색을 따로 정하지 않는다.
   (목록 행·아이콘 버튼이 이미 가진 :active 배경 위에도 그대로 겹쳐 얹힌다)
   disabled 는 제외 — 눌리지 않는 버튼이 반응하면 눌린 것으로 오해한다.
   is-incomplete 는 눌리는 상태(무엇이 빠졌는지 토스트로 알린다)라 피드백을 준다. */
.dlv-app button:not(:disabled):active,
.dlv-app a:active,
.dlv-app label:active { filter: brightness(.95); }

.dlv-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 6px 20px 0;
}
/* 서브 헤더가 있는 화면은 헤더와 본문 사이를 32 로 통일한다.(홈은 헤더 구조가 달라 제외) */
.dlv-subhead + .dlv-main { padding-top: 32px; }

/* 탭바가 있는 세 화면은 세로 flex 로 세운다 — 본문이 남는 높이를 먹어야
   내용이 짧아도 탭바(와 홈의 푸터)가 화면 맨 아래로 내려간다.
   토스트는 fixed 라 이 흐름에서 빠진다. */
.dlv-home-page, .dlv-history-page, .dlv-mypage-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--dlv-bg-page);
}
.dlv-home-page .dlv-main, .dlv-history-page .dlv-main, .dlv-mypage-page .dlv-main { flex: 1 0 auto; }
/* (푸터는 홈에만 둔다. 신청내역·마이페이지는 목록 화면이라 표기 정보가 끼어들 자리가 아니다) */
.dlv-home-page .dlv-main { padding-bottom: 24px; }

/* ── 공지 배너 ───────────────────────────────────────────────────── */
/* 최신 공지 1건 → /mber/notice/{nttId} 로 가는 링크 */
.dlv-notice {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    border-radius: 14px;
    background: var(--dlv-bg);
    box-shadow: var(--dlv-shadow);
}

/* 파란 '글자'는 blue-700 을 쓴다 — primary(blue-500)는 흰 배경에서 3.71:1, 연파랑 배경에서 3.31:1 로 AA 미달이다.
   배경·테두리로 쓰는 primary 는 그대로 둔다(대비 기준이 걸리지 않는다). */
.dlv-notice__tag { color: var(--dlv-blue-700); font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; flex: none; }

.dlv-notice__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: calc(15px * var(--dlv-text-scale, 1));
    color: var(--dlv-text);
}

.dlv-notice__arrow { flex: none; color: var(--dlv-grey-400); }

/* ── 지원금 카드 ─────────────────────────────────────────────────── */
.dlv-fund {
    position: relative;
    overflow: hidden;
    padding: 24px 18px;
    border-radius: 16px;
    /* 시안 기준 파랑 그라데이션. 토큰 팔레트(--dlv-blue-*)엔 없는 조합이라 카드 전용 값으로 둔다.
       시안 값(#236EE5→#5899FF)보다 한 단계 진하다 — 원래 값은 카드 아래쪽 흰 글자가 2.83:1 까지 떨어졌다. */
    background: linear-gradient(138deg, #1F63D6 0%, #4A8AF0 100%);
    color: #fff;
}

/* 아트(이모지)가 우상단에 절대배치돼 있어 텍스트 줄은 그 폭만큼 비워 둔다. */
.dlv-fund__label,
.dlv-fund__amount { padding-right: 76px; }

.dlv-fund__label { font-size: calc(18px * var(--dlv-text-scale, 1)); font-weight: 500; }

.dlv-fund__amount {
    margin-top: 12px;
    font-size: calc(32px * var(--dlv-text-scale, 1));
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.dlv-fund__box {
    margin-top: 14px;
    padding: 2px 14px 10px;
    border-radius: 10px;
    /* 흰 오버레이는 카드에서 가장 밝은 자리를 더 밝게 만들어 흰 글자가 2.37:1 까지 떨어졌다 — 눌린 톤으로 뒤집는다.
       안내문까지 이 안에 두는 이유도 대비다: 카드 그라데이션 위였다면 4.02:1 로 본문 기준(4.5:1)에 못 미친다. */
    background: rgba(0, 0, 0, .20);
}

/* 공용 .dlv-kv 는 흰 배경용이다 — 파란 카드 위에서는 구분선·글자색만 뒤집어 쓴다. */
.dlv-fund__box .dlv-kv { border-bottom-color: rgba(255, 255, 255, .22); font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-fund__box .dlv-kv > span { color: rgba(255, 255, 255, .88); }
.dlv-fund__box .dlv-kv > strong { color: #fff; font-weight: 700; }

/* 안내문 앞의 동그란 i — 신청상세의 .dlv-amount-box__note 와 같은 규약(글리프는 확대하지 않는다). */
.dlv-fund__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: calc(13px * var(--dlv-text-scale, 1));
    line-height: 1.45;
    word-break: keep-all; /* 한글은 어절 단위로 줄바꿈 */
    color: rgba(255, 255, 255, .88);
}

.dlv-fund__note::before {
    content: 'i';
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-style: italic;
}

.dlv-fund__art {
    position: absolute;
    right: 18px;
    /* 우상단 고정. 예전엔 bottom 픽셀값으로 배지 줄에 맞췄는데, 카드에 줄이 늘거나
       글자 배율이 커지면 그 값이 어긋나 텍스트 위로 올라왔다. */
    top: 18px;
    font-size: 64px;
    line-height: 1;
    pointer-events: none;
}

/* ── 섹션 ────────────────────────────────────────────────────────── */
.dlv-section { display: flex; flex-direction: column; gap: 12px; }

.dlv-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(19px * var(--dlv-text-scale, 1));
    font-weight: 700;
    letter-spacing: -.02em;
}

.dlv-section__more {
    margin-left: auto;
    font-size: calc(15px * var(--dlv-text-scale, 1));
    font-weight: 500;
    /* 회색 페이지 배경 위라 muted(grey-600)면 4.29:1 로 미달한다 — 흰 카드 위에서만 muted 를 쓴다. */
    color: var(--dlv-text-secondary);
}

.dlv-chip {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--dlv-grey-200);
    /* 회색 칩 배경 위 — muted(grey-600)는 3.75:1 로 미달. */
    color: var(--dlv-text-secondary);
    font-size: calc(13px * var(--dlv-text-scale, 1));
    font-weight: 600;
}

.dlv-chip--done { background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); }

/* ── 계좌 ────────────────────────────────────────────────────────── */
/* 홈의 대표계좌 — 최근 신청 카드와 같은 시각 언어의 한 줄 행.
   카드 안에 또 큰 버튼을 두는 대신 행 전체가 계좌관리로 가는 링크다. */
.dlv-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--dlv-bg);
    box-shadow: var(--dlv-shadow);
}
.dlv-account-row:active { background: var(--dlv-grey-50); }
.dlv-account-row::after { content: '\203A'; margin-left: auto; padding-left: 8px; color: var(--dlv-text-disabled); font-size: calc(22px * var(--dlv-text-scale, 1)); line-height: 1; }
.dlv-account-row__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dlv-primary);
    color: #fff;
}
.dlv-account-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dlv-account-row__text small { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-account-row__text b { color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; word-break: break-all; }

/* ── 버튼 ────────────────────────────────────────────────────────── */
.dlv-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 18px 16px;
    border: 0;
    border-radius: 14px;
    font-family: inherit;
    font-size: calc(17px * var(--dlv-text-scale, 1));
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.dlv-btn--onfund {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 18px rgba(53, 78, 163, .40);
    color: #236EE5;
    font-size: calc(20px * var(--dlv-text-scale, 1));
}

.dlv-btn--onfund:disabled { background: rgba(255, 255, 255, .55); color: #a3adea; box-shadow: none; cursor: not-allowed; }


/* ── 최근 신청 ───────────────────────────────────────────────────── */
.dlv-history { display: flex; flex-direction: column; gap: 12px; }

/* 홈은 항목이 따로 뜨지 않고 한 장의 흰 카드 안에서 구분선으로 나뉜다(시안) */
.dlv-home-page .dlv-history { gap: 0; overflow: hidden; border-radius: 16px; background: var(--dlv-bg); box-shadow: var(--dlv-shadow); }
.dlv-home-page .dlv-history__item { border-radius: 0; box-shadow: none; }
.dlv-home-page .dlv-history li + li .dlv-history__item { border-top: 1px solid var(--dlv-divider); }

.dlv-history__item {
    display: block;
    padding: 17px 18px;
    border-radius: 14px;
    background: var(--dlv-bg);
    box-shadow: var(--dlv-shadow);
}

.dlv-history__head { display: flex; align-items: center; gap: 10px; }

.dlv-history__date { font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 700; letter-spacing: -.02em; }

/* 접수경로 태그. 상태 배지(dlv-badge)보다 약하게 둔다 — 신청자가 먼저 볼 것은 처리 상태다. */
.dlv-rcpt {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--dlv-line);
    border-radius: 6px;
    color: var(--dlv-text-muted);
    font-size: calc(12px * var(--dlv-text-scale, 1));
    font-weight: 600;
    line-height: 1.4;
}

.dlv-rcpt--visit { border-color: var(--dlv-warning); background: var(--dlv-warning-bg); color: var(--dlv-warning); }
.dlv-rcpt--app { border-color: var(--dlv-primary); background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); }

.dlv-history__sub { margin-top: 6px; font-size: calc(14px * var(--dlv-text-scale, 1)); color: var(--dlv-text-muted); }

.dlv-empty {
    padding: 32px 20px;
    border-radius: var(--dlv-radius);
    background: var(--dlv-bg);
    box-shadow: var(--dlv-shadow);
    color: var(--dlv-text-sub);
    font-size: calc(15px * var(--dlv-text-scale, 1));
    text-align: center;
}

/* 상태 배지 — 기본은 진행중 톤, 종료 상태만 개별 지정 */
.dlv-badge {
    margin-left: auto;
    flex: none;
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--dlv-primary-weak-bg);
    color: var(--dlv-blue-700);
    font-size: calc(13px * var(--dlv-text-scale, 1));
    font-weight: 700;
}

/* 상태색은 페이지에 걸지 않는다 — 홈·신청내역이 같은 건을 다른 색으로 보여주면 안 된다.
   RECV(접수 완료)는 .dlv-badge 기본색(primary)을 그대로 쓴다 — 그래서 따로 정의하지 않는다.
   SUBMIT 은 정의가 없으면 그 기본색으로 떨어져 '접수 완료'와 구분되지 않는다(앱 신청 대부분이 이 두 상태다). */
.dlv-badge--submit,
.dlv-badge--part_paid,
.dlv-badge--pay_wait,
.dlv-badge--reviewed,
.dlv-badge--chk_done { background: var(--dlv-warning-bg); color: var(--dlv-warning); }
.dlv-badge--rej,
.dlv-badge--cancel { background: var(--dlv-danger-bg); color: var(--dlv-danger); }
/* 확인요청은 신청자가 손대야 풀리는 유일한 상태다 — 반려(연빨강)보다 진한 빨강으로 세워
   목록에서 지나치지 않게 한다 */
.dlv-badge--hold { background: var(--dlv-danger); color: #fff; }
.dlv-badge--draft { background: var(--dlv-grey-200); color: var(--dlv-text-muted); }
.dlv-badge--paid { background: var(--dlv-success-bg); color: var(--dlv-success); }

/* ── 하단 탭바 ───────────────────────────────────────────────────── */
.dlv-tabbar {
    /* fixed 가 아니라 sticky 다 — 안드로이드 크롬·삼성인터넷은 주소창이 접히고 펴지는 동안
       fixed 요소를 스크롤이 멈춘 뒤에야 다시 붙여 바가 통통 튀어 보였다.
       sticky 는 스크롤 레이어에 같이 실려 흔들리지 않는다. */
    position: sticky;
    bottom: 0;
    display: flex;
    /* 홈은 body 가 세로 flex 다 — 본문이 길어도 탭바 높이가 줄지 않게 못 박는다. */
    flex: none;
    /* 높이는 72px 고정이다 — 아이콘·글자 크기로 정해지는 자연 높이는 그보다 1~2px 낮아
       홈 푸터와 탭바 사이에 페이지 배경이 실선처럼 비쳤다. */
    height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    /* 선 대신 위로 뜨는 그림자로 본문과 나눈다 — 카드들이 그림자를 쓰고 있어 결이 같다. */
    box-shadow: 0 -1px 3px rgba(38, 38, 38, .04), 0 -4px 16px rgba(38, 38, 38, .06);
    background: var(--dlv-bg);
}

.dlv-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 0 12px;
    /* '비활성'이 아니라 '미선택'이다 — disabled(grey-400)는 흰 배경에서 2.01:1 로 화면에서 가장 낮았다. */
    color: var(--dlv-text-muted);
    /* 탭바는 높이가 72px 로 고정이라 라벨은 글자 크기 설정을 따르지 않는다. */
    font-size: 13px;
    font-weight: 600;
}

.dlv-tabbar__item.is-active { color: var(--dlv-blue-700); }
/* 탭바가 흐름 안에서 자리를 차지하므로 .dlv-app 의 탭바용 하단 여백은 되돌린다. */
.dlv-app:has(.dlv-tabbar) { padding-bottom: 0; }
/* 앱 웹뷰는 fixed 로 붙인다 — 주소창이 없어 위 sticky 의 이유가 없고, sticky 는 스크롤 레이어에 실려
   iOS 바운스·안드로이드 오버스크롤 stretch 때 본문과 함께 끌려 올라간다(overscroll-behavior 로도 안 막힘). */
.dlv-tabbar--fixed { position: fixed; right: 0; left: 0; z-index: 50; max-width: var(--dlv-app-width); margin-inline: auto; }
.dlv-app:has(.dlv-tabbar--fixed) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* ── 서브 헤더(신청서 등 하위 화면) ──────────────────────────────── */
.dlv-subhead {
    display: flex;
    align-items: center;
    gap: 4px;
    /* width:100% 이유는 .dlv-header 규칙 주석 참조 — 세로 flex 화면에서 폭이 내용만큼 줄어드는 것을 막는다 */
    width: 100%;
    max-width: var(--dlv-app-width);
    margin-inline: auto;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    /* 스크롤해도 뒤로가기·제목이 남게 붙인다. top 은 0 이면 된다 — padding 이 이미 safe-area 를 먹고 있어
       top:env(safe-area-inset-top) 을 주면 노치만큼 두 번 내려간다.
       z-index 40 = 택배사 드롭다운(30)이 헤더 위로 비치지 않고, 카메라(60)·모달(200)보다는 아래.
       배경은 body 를 물려받는다 — 회색 바탕 화면에서 헤더만 흰 띠로 뜨지 않게. 화면별 덮어쓰기는 그대로 이긴다. */
    position: sticky; top: 0; z-index: 40;
    background: inherit;
}

/* 뒤로가기(34px)가 타이틀 줄(24px)보다 커서 뒤로가기 있는 화면만 헤더가 높았다.
   위아래를 -5px 로 당겨 줄 높이에 넣는다 — 신청내역(뒤로가기 없음)과 헤더 높이가 같아진다. 누르는 영역은 그대로. */
.dlv-subhead__back { display: inline-flex; margin-block: -5px; padding: 4px; color: var(--dlv-grey-900); }

/* 상단 타이틀은 항상 가운데. 뒤로가기(34px + gap 4px)가 있으면 그만큼 오른쪽을 비워 축을 맞춘다. */
.dlv-subhead__title { flex: 1; margin: 0; font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 700; letter-spacing: -.02em; text-align: center; }
/* ponytail: :has() 대신 인접 형제 — 구버전 안드로이드 웹뷰에서 :has()가 무시되면 규칙이 통째로 죽어 타이틀이 뒤로가기 폭만큼(19px) 오른쪽으로 밀렸다 */
.dlv-subhead__back + .dlv-subhead__title { padding-right: 38px; }

/* 하단 고정 버튼이 있는 화면은 탭바 대신 그 높이만큼 비운다 */
.dlv-app:has(.dlv-sticky) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* 160px = 하단 고정 버튼(2단) 높이, +48px = 본문 마지막 요소와 버튼 사이 여백.
   위 96px 는 버튼 1단 기준이라 2단 화면에서는 문서 끝까지 내려도 마지막 줄이 바에 가린다
   (접수 완료의 '처리상태'가 그랬다). 페이지 클래스로 짚는 건 :has() 가 무시되는
   구버전 안드로이드 웹뷰에서도 여백이 살아 있어야 하기 때문이다. */
.dlv-app.dlv-apply-page, .dlv-app.dlv-done-page { padding-bottom: calc(208px + env(safe-area-inset-bottom)); }

/* ── 카드 ────────────────────────────────────────────────────────── */
.dlv-card {
    padding: 22px 20px;
    border-radius: var(--dlv-radius);
    background: var(--dlv-bg);
    box-shadow: var(--dlv-shadow);
}

.dlv-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: calc(18px * var(--dlv-text-scale, 1));
    font-weight: 700;
    letter-spacing: -.02em;
}

.dlv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--dlv-primary);
    color: #fff;
    font-size: calc(14px * var(--dlv-text-scale, 1));
    font-weight: 700;
}

.dlv-card__desc { margin-bottom: 16px; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); }

.dlv-label { margin-top: 22px; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 600; color: var(--dlv-text-secondary); }

.dlv-help { margin-top: 12px; color: var(--dlv-text-sub); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.5; }

.dlv-help--warn { color: var(--dlv-warning); font-weight: 600; }

.dlv-field { display: grid; gap: 8px; margin-top: 14px; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-field input, .dlv-field select { width: 100%; padding: 14px; border: 1px solid var(--dlv-line); border-radius: var(--dlv-radius-sm); background: var(--dlv-bg); font: inherit; color: var(--dlv-text-strong); }
/* iOS 웹뷰는 리셋이 없으면 select 를 네이티브로 그려 높이·화살표가 input 과 어긋난다. 하위 스코프마다 복붙하지 않도록 여기서 한 번만 맞춘다. */
.dlv-field select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23191f28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
/* 칩은 회색이 아니라 흰 표면 + 선이다 — 페이지 배경(#f4f7fa)과 grey-100/200 은 명도가 거의 같아
   회색 칩이 배경에 잠겨 탁하게 읽힌다. 선택 상태도 solid 파랑 대신 옅은 파랑으로 둔다:
   같은 화면의 '지원금 신청하기' 버튼이 유일한 solid 파랑이어야 위계가 선다. */
.dlv-tabs { display: flex; gap: 8px; overflow-x: auto; }
.dlv-tabs button {
    flex: none;
    padding: 9px 15px;
    border: 1px solid var(--dlv-line);
    border-radius: 999px;
    background: var(--dlv-bg);
    color: var(--dlv-text-secondary);
    font: inherit;
    font-size: calc(14px * var(--dlv-text-scale, 1));
    font-weight: 600;
}
.dlv-tabs button.is-active {
    border-color: var(--dlv-blue-300);
    background: var(--dlv-primary-weak-bg);
    color: var(--dlv-blue-700);
    font-weight: 700;
}

/* 신청내역 목록 */
.dlv-history-page .dlv-subhead { justify-content: center; background: var(--dlv-bg); }
/* .dlv-app 의 하단 여백은 탭바 높이와 같아 마지막 카드가 탭바에 붙는다 — 홈·마이페이지처럼 그만큼 띄운다. */
.dlv-history-page .dlv-main { gap: 16px; padding-bottom: 28px; }
.dlv-history-page .dlv-history { gap: 14px; }

/* 반려 건 안내(시안: 노란 알림 박스) */


/* 신청 카드 — 한 장에 상태·금액·다음 행동까지 담는다(시안). 반려만 빨간 테두리로 세운다. */
.dlv-hcard { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 16px 16px; border-radius: 18px; background: var(--dlv-bg); box-shadow: var(--dlv-shadow); }
.dlv-hcard.is-rej { border-color: #f3b4b4; box-shadow: 0 4px 18px rgba(232, 86, 86, .12); }
/* 접수경로 · 날짜 · 상태를 한 줄에. 상태는 .dlv-badge 의 margin-left:auto 로 오른쪽 끝에 붙는다. */
.dlv-hcard__head { display: flex; align-self: stretch; flex-wrap: wrap; align-items: center; gap: 8px; }
.dlv-hcard__date { color: var(--dlv-text-strong); font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-hcard .dlv-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 5px 12px; border-radius: 999px; }
.dlv-hcard .dlv-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dlv-hcard__amount { display: flex; align-self: stretch; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dlv-divider); }
.dlv-hcard__amount span { color: var(--dlv-text); font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-hcard__amount b { color: var(--dlv-text-strong); font-size: calc(24px * var(--dlv-text-scale, 1)); font-weight: 800; letter-spacing: -.02em; }
.dlv-hcard__amount small { margin-left: 2px; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; }

.dlv-hcard__box { align-self: stretch; margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--dlv-bg-page); }
.dlv-hcard__box strong { display: block; color: var(--dlv-text-strong); font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-hcard__box p { margin-top: 8px; color: var(--dlv-text-secondary); font-size: calc(13px * var(--dlv-text-scale, 1)); line-height: 1.45; }
.dlv-hcard__box--rej { border: 1px solid #fad3d3; background: var(--dlv-danger-bg); }
.dlv-hcard__box--rej strong { color: #c23a3a; }
.dlv-hcard__box--info { background: var(--dlv-primary-weak-bg); }
.dlv-hcard__box--info strong { color: var(--dlv-blue-700); }
.dlv-hcard__box--paid { background: var(--dlv-success-bg); }
/* --dlv-success 는 success-bg 위 2.65:1 이라 본문 글씨로는 못 쓴다 — 같은 색상의 어두운 톤(약 4.9:1) */
.dlv-hcard__box--paid strong { color: #2b6e4f; }
.dlv-hcard__box--info strong::before,
.dlv-hcard__box--paid strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 2px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.dlv-hcard__quote { color: var(--dlv-text-strong) !important; font-size: calc(13px * var(--dlv-text-scale, 1)) !important; font-weight: 500; line-height: 1.45; }

.dlv-hcard__btn { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 15px 12px; border-radius: 12px; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; text-align: center; }
.dlv-hcard__btn--line { margin-top: 10px; padding: 4px; color: var(--dlv-text-secondary); font-size: calc(15px * var(--dlv-text-scale, 1)); text-decoration: underline; text-underline-offset: 3px; }
.dlv-hcard__btn--grey { border: 1.5px solid var(--dlv-grey-300); background: var(--dlv-bg); color: var(--dlv-text-strong); }
.dlv-hcard__btn:active { filter: brightness(.95); }
.dlv-history-page .dlv-empty { padding: 44px 20px; border: 1px solid var(--dlv-line); box-shadow: none; }
.dlv-history-page .dlv-empty .dlv-btn { max-width: 220px; margin: 18px auto 0; }
/* 필터 결과가 비었을 뿐 신청이 없는 게 아니다 — 카드·꽉 찬 버튼으로 세우면 오류처럼 무겁다.
   페이지 바탕에 글자만 띄우고 버튼은 연한 톤으로 낮춘다. */
.dlv-history-page #emptyFiltered { padding: 56px 20px; border: 0; background: transparent; }
.dlv-history-page #emptyFiltered .dlv-btn { display: inline-block; width: auto; margin-top: 16px; padding: 10px 18px; border-radius: 999px;
    background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); font-size: calc(15px * var(--dlv-text-scale, 1)); }
/* 마이페이지 프로필 요약 */
/* 마이페이지: 헤더만 흰색으로 남기고 타이틀 가운데(시안) */
.dlv-mypage-page .dlv-subhead { justify-content: center; background: var(--dlv-bg); }
/* .dlv-app 의 하단 여백은 탭바 높이와 같아 마지막 메뉴가 탭바에 붙는다 — 그만큼 띄운다. */
.dlv-mypage-page .dlv-main { gap: 14px; padding-bottom: 32px; }

/* 프로필 카드(시안): 왼쪽 이름·인증 배지 / 연락처 / 거주지역, 오른쪽 회색 아바타 */
.dlv-profile {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 22px;
    border-radius: 18px; background: var(--dlv-bg); box-shadow: var(--dlv-shadow);
}
.dlv-profile__body { flex: 1; min-width: 0; }
.dlv-profile__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.dlv-profile__name { font-size: calc(22px * var(--dlv-text-scale, 1)); font-weight: 800; letter-spacing: -.02em; color: var(--dlv-text-strong); word-break: break-all; }
.dlv-profile__verified { padding: 3px 8px; border-radius: 6px; background: var(--dlv-primary-weak-bg); color: var(--dlv-primary); font-size: calc(12px * var(--dlv-text-scale, 1)); font-weight: 700; white-space: nowrap; }
.dlv-profile__region { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-profile__region svg { flex: none; }
.dlv-profile__avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--dlv-grey-100); color: var(--dlv-text-secondary); }

/* 기본정보 수정 */
/* 카드 프레임 없이 흰 바탕에 폼을 바로 나열한다(시안) */
.dlv-basic-card { padding: 0; }
.dlv-basic-card input, .dlv-basic-card select { min-height: 46px; }
.dlv-basic-card input[readonly] { border-color: transparent; background: var(--dlv-grey-100); color: var(--dlv-text-secondary); }
.dlv-basic-reverify { width: 100%; min-height: 48px; margin-top: 14px; border: 1px solid var(--dlv-line); border-radius: 13px; background: var(--dlv-bg); color: var(--dlv-text-strong); font: inherit; font-weight: 700; }
.dlv-basic-region { margin-top: 8px; }
.dlv-basic-region .dlv-help { margin-bottom: 0; }
.dlv-basic-save { width: 100%; height: 52px; margin-top: 20px; border: 0; border-radius: 14px; background: var(--dlv-primary); color: #fff; font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 800; }
/* 회원탈퇴 — 저장 버튼 바로 뒤에 붙으면 두 번째 액션처럼 읽힌다. 여백으로 충분히 떼고
   눈에 띄지 않는 회색 텍스트로 낮춘다(경고는 탈퇴 화면이 맡는다 — 여기서 빨강까지 쓰면 과하다). */
.dlv-basic-withdraw { margin-top: 56px; text-align: center; }
.dlv-basic-withdraw a { color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); text-decoration: underline; text-underline-offset: 3px; }

/* 계좌관리 */
/* 하단 고정 "+ 계좌 추가" 가 마지막 안내 박스를 가리지 않게 */
.dlv-account-page .dlv-main { padding-bottom: 100px; }
.dlv-account-intro { padding: 0 4px; }
.dlv-account-intro > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlv-account-intro h2 { margin: 0; font-size: calc(22px * var(--dlv-text-scale, 1)); font-weight: 800; letter-spacing: -.02em; }
.dlv-account-intro span { flex: none; padding: 5px 10px; border: 1px solid #c9dcff; border-radius: 8px; background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-intro p { margin: 10px 0 0; color: var(--dlv-text-secondary); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.6; word-break: keep-all; }
.dlv-account-list { display: grid; gap: 14px; margin-top: 18px; }
/* 통장 카드(시안): 종류 알약 / 은행 / 회색 계좌번호 박스 / 예금주 줄. 대표는 파란 테두리 */
.dlv-account-card { overflow: hidden; padding: 18px 20px; border-radius: 16px; background: var(--dlv-bg); box-shadow: var(--dlv-shadow); }
/* 대표 통장만 테두리로 구분한다 — 나머지 카드는 홈처럼 그림자만 쓴다 */
.dlv-account-card.is-primary { border: 2px solid var(--dlv-primary); box-shadow: none; }
.dlv-account-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--dlv-divider); }
.dlv-account-card__kind { padding: 5px 12px; border: 1px solid var(--dlv-line); border-radius: 999px; background: var(--dlv-grey-50); color: var(--dlv-text-secondary); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-card__kind.is-primary { display: inline-flex; align-items: center; gap: 6px; border-color: var(--dlv-primary); background: var(--dlv-primary); color: #fff; }
.dlv-account-card__kind.is-primary::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.dlv-account-card__bank { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dlv-account-card__bank strong { font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-account-card__logo { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f5c046; color: #3a2a00; font-size: 16px; font-weight: 800; }
/* 은행 로고 — 파일명은 기관코드(PopbillAccountVerifyServiceImpl.BANK_CODES). 로고가 있으면 첫 글자를 숨긴다. */
/* 흰 카드 위 흰 원이 사라지지 않게 얇은 테두리.
   로고 파일마다 여백·비율이 달라 같은 비율로 넣으면 크기가 들쭉날쭉하다 — padding 안쪽 상자(기본 24px, 단축속성의 content-box)에 contain 으로 맞추고,
   자체 여백이 있거나 가로로 긴 로고는 은행별 --logo-pad 를 줄여 눈에 보이는 크기를 맞춘다(눈대중 보정값). */
.dlv-account-card__logo[data-bank] { padding: var(--logo-pad, 9px); box-shadow: inset 0 0 0 1px var(--dlv-divider); }
.dlv-account-card__logo[data-bank="농협은행"], .dlv-account-card__logo[data-bank="농협"] { background: var(--dlv-bg) url(../assets/image/bank/0011.svg) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="신한은행"] { --logo-pad: 7px; background: var(--dlv-bg) url(../assets/image/bank/0088.png) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="국민은행"] { --logo-pad: 7px; background: var(--dlv-bg) url(../assets/image/bank/0004.png) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="우리은행"] { background: var(--dlv-bg) url(../assets/image/bank/0020.png) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="하나은행"] { --logo-pad: 7px; background: var(--dlv-bg) url(../assets/image/bank/0081.png) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="기업은행"] { --logo-pad: 8px; background: var(--dlv-bg) url(../assets/image/bank/0003.svg) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="새마을금고"] { --logo-pad: 4px; background: var(--dlv-bg) url(../assets/image/bank/0045.svg) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__logo[data-bank="우체국"] { --logo-pad: 6px; background: var(--dlv-bg) url(../assets/image/bank/0071.png) center / contain no-repeat content-box border-box; color: transparent; }
.dlv-account-card__no { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--dlv-divider); border-radius: 12px; background: var(--dlv-grey-50); }
.dlv-account-card__no small { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-account-number { margin: 4px 0 0; font-size: calc(22px * var(--dlv-text-scale, 1)); font-weight: 800; letter-spacing: .04em; word-break: break-all; }
.dlv-account-card__owner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-account-card__owner strong { display: flex; align-items: center; gap: 8px; color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); }
.dlv-account-badge { padding: 3px 8px; border: 1px solid var(--dlv-line); border-radius: 6px; background: var(--dlv-grey-50); color: var(--dlv-text-muted); font-size: calc(12px * var(--dlv-text-scale, 1)); font-style: normal; font-weight: 700; }
.dlv-account-badge.is-ok { border-color: #bfe8cf; background: #eefaf2; color: #1b8a4a; }
.dlv-account-actions { display: flex; gap: 8px; margin-top: 16px; }
.dlv-account-actions button { flex: 1; min-height: 50px; border: 1px solid var(--dlv-line); border-radius: 12px; background: var(--dlv-bg); font: inherit; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; color: var(--dlv-text-secondary); }
/* 연파랑 배경을 깔면 '이미 대표계좌로 선택됨'으로 읽힌다 — 흰 바탕 + 파란 테두리로 누를 버튼임을 보인다. */
.dlv-account-actions .primary-account { flex: 1.4; border: 1.5px solid var(--dlv-primary); background: var(--dlv-bg); color: var(--dlv-primary); }
/* 알려드립니다 */
.dlv-account-info { margin-top: 18px; padding: 16px 18px; border: 1px solid #d6e4ff; border-radius: 14px; background: var(--dlv-primary-weak-bg); }
.dlv-account-info strong { display: flex; align-items: center; gap: 8px; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-account-info strong::before { content: '!'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dlv-primary); color: #fff; font-size: 13px; }
.dlv-account-info ul { margin: 8px 0 0; padding-left: 30px; list-style: disc; color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.6; word-break: keep-all; }
.dlv-account-info b { color: var(--dlv-text-strong); }

.dlv-account-empty { margin-top: 16px; padding: 20px 18px; border: 1px solid var(--dlv-line); border-radius: 12px; background: var(--dlv-bg); }
.dlv-account-empty strong { font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-empty p { margin: 8px 0 0; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.55; }
.dlv-account-add, .dlv-account-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--dlv-primary); color: #fff; font: inherit; font-size: calc(18px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-sticky .dlv-account-add { margin-top: 0; }
.dlv-account-form { margin-top: 18px; padding: 18px; border: 1px solid var(--dlv-line); border-radius: 16px; background: var(--dlv-bg); }
.dlv-account-form h2 { margin: 0 0 4px; font-size: calc(18px * var(--dlv-text-scale, 1)); }
.dlv-account-form .dlv-check { margin-top: 16px; }

/* 계좌 등록 */
.dlv-account-write-page { min-height: 100vh; background: var(--dlv-bg); }
.dlv-account-write-page .dlv-main { padding-bottom: 112px; }
/* 단계는 카드로 감싸지 않는다 — 번호 원 + 제목만으로 구획된다(시안) */
.dlv-account-step { margin-bottom: 26px; padding: 0; border: 0; }
.dlv-account-step h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-step h2 > span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--dlv-primary); color: #fff; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-step p { margin: 10px 0 0; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.55; }
.dlv-account-step .dlv-field { margin-top: 16px; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 500; }
.dlv-account-primary { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid var(--dlv-line); border-radius: 10px; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 600; color: var(--dlv-text-strong); }
.dlv-account-primary input { width: 20px; height: 20px; flex: none; accent-color: var(--dlv-primary); }
.dlv-account-verify { width: 100%; height: 54px; margin-top: 14px; border: 0; border-radius: 10px; background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
/* 조회 결과는 성공 초록이 아니라 브랜드 파랑 톤(시안) */
.dlv-account-result { margin-top: 12px; padding: 18px 16px; border: 1px solid var(--dlv-blue-300); border-radius: 10px; background: var(--dlv-primary-weak-bg); font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-account-result > strong { display: block; margin-bottom: 12px; color: var(--dlv-blue-700); font-weight: 700; }
.dlv-account-result dl { display: grid; gap: 10px; margin: 0; color: var(--dlv-text-secondary); }
.dlv-account-result dl > div { display: flex; justify-content: space-between; gap: 16px; }
.dlv-account-result dt, .dlv-account-result dd { margin: 0; }
.dlv-account-result dd { color: var(--dlv-text-strong); font-weight: 700; }
.dlv-account-result > p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dlv-blue-300); color: var(--dlv-blue-700); font-weight: 600; }
.dlv-account-write-sticky { position: fixed; right: 0; bottom: 0; left: 0; max-width: var(--dlv-app-width); margin: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dlv-line); background: var(--dlv-bg); }
.dlv-account-write-sticky button { width: 100%; height: 54px; border: 0; border-radius: 12px; background: var(--dlv-primary); color: #fff; font: inherit; font-size: calc(18px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-write-sticky button:disabled { background: var(--dlv-grey-300); }

/* 회원탈퇴 */
.dlv-withdraw-page { min-height: 100vh; background: var(--dlv-bg); }
.dlv-withdraw-status { padding: 18px 16px; border: 0; border-radius: 12px; background: var(--dlv-danger-bg); }
.dlv-withdraw-status h2 { margin: 0 0 14px; color: var(--dlv-danger); font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-withdraw-status dl { display: grid; gap: 12px; margin: 0; }
.dlv-withdraw-status dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-withdraw-status dt, .dlv-withdraw-status dd { margin: 0; }
.dlv-withdraw-status dd { font-weight: 700; }
.dlv-withdraw-notice { margin-top: 14px; padding: 16px; border: 1px solid var(--dlv-line); border-radius: 12px; }
/* 불릿은 중점(·) — 항목 문구에도 가운뎃점이 있어 disc 보다 톤이 맞는다 */
.dlv-withdraw-notice ul { margin: 0; padding: 0; list-style: none; color: var(--dlv-text-secondary); font-size: calc(13px * var(--dlv-text-scale, 1)); line-height: 1.7; }
.dlv-withdraw-notice li { padding-left: 11px; text-indent: -11px; }
.dlv-withdraw-notice li::before { content: "· "; }
.dlv-withdraw-button { width: 100%; height: 54px; border: 0; border-radius: 12px; background: var(--dlv-danger); color: #fff; font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-withdraw-button:disabled { background: var(--dlv-grey-300); }
.dlv-withdraw-sheet { width: 100%; max-width: var(--dlv-app-width); margin: auto auto 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; color: var(--dlv-text-strong); animation: dlv-sheet-up .22s ease-out; }
.dlv-withdraw-sheet::backdrop { background: rgba(25, 31, 40, .42); }
.dlv-withdraw-sheet.is-closing { animation: dlv-sheet-down .22s ease-in forwards; }
.dlv-withdraw-sheet.is-closing::backdrop { animation: dlv-sheet-fade .22s ease-in forwards; }
.dlv-withdraw-sheet h2 { margin: 0; font-size: calc(19px * var(--dlv-text-scale, 1)); }
.dlv-withdraw-sheet > p { margin: 12px 0 0; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.55; }
.dlv-withdraw-sheet > label { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.45; }
.dlv-withdraw-sheet > label input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--dlv-danger); }
.dlv-withdraw-sheet > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.dlv-withdraw-sheet > div button { height: 48px; border-radius: 13px; font: inherit; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-withdraw-cancel { border: 1px solid var(--dlv-line); background: var(--dlv-bg); color: var(--dlv-text-strong); }
.dlv-withdraw-confirm { border: 0; background: var(--dlv-danger); color: #fff; }
.dlv-withdraw-confirm:disabled { background: var(--dlv-grey-300); }
@keyframes dlv-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes dlv-sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes dlv-sheet-fade { from { background: rgba(25, 31, 40, .42); } to { background: transparent; } }

/* 마이페이지 메뉴 묶음(시안): 작은 회색 묶음 제목 / 줄마다 제목·설명·› */
.dlv-mp-group { overflow: hidden; border-radius: 18px; background: var(--dlv-bg); box-shadow: var(--dlv-shadow); }
.dlv-mp-group > * + * { border-top: 1px solid var(--dlv-divider); }
.dlv-mp-group__title { margin: 0; padding: 20px 22px 4px; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 500; }
.dlv-mp-group__title + * { border-top: 0; }
.dlv-mp-group b { display: block; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; letter-spacing: -.02em; color: var(--dlv-text-strong); }
.dlv-mp-group small { display: block; margin-top: 4px; word-break: keep-all; font-size: calc(14px * var(--dlv-text-scale, 1)); color: var(--dlv-text-muted); }
.dlv-mp-group b.is-regular { font-weight: 500; }
.dlv-mp-group b.is-strong { font-weight: 800; }
.dlv-mp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; color: inherit; }
.dlv-mp-row > span:first-child { min-width: 0; }
.dlv-mp-row:not(.is-action)::after {
    content: ''; flex: none; width: 10px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='m2 2 6 6-6 6' fill='none' stroke='%238b95a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.dlv-mp-tag {
    display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; vertical-align: 2px;
    background: var(--dlv-primary-weak-bg); color: var(--dlv-primary); font-size: calc(12px * var(--dlv-text-scale, 1)); font-style: normal; font-weight: 700;
}

/* 메뉴 줄 안의 ON/OFF 토글(알림설정). 이동할 화면이 없어 <a> 대신 <label> 이다. */
.dlv-menu__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
}
.dlv-menu__switch b, .dlv-menu__switch small { display: block; }
.dlv-menu__switch input { position: absolute; opacity: 0; pointer-events: none; }
.dlv-menu__switch i {
    flex: 0 0 auto;
    position: relative;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background: var(--dlv-text-disabled);
    transition: background .15s;
}
.dlv-menu__switch i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.dlv-menu__switch input:checked + i { background: var(--dlv-primary); }
.dlv-menu__switch input:checked + i::after { transform: translateX(20px); }
.dlv-menu__switch input:disabled + i { opacity: .5; }

.hidden { display: none !important; }

/* 라벨-값 한 줄 */
.dlv-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dlv-divider);
    font-size: calc(16px * var(--dlv-text-scale, 1));
}

.dlv-kv:last-of-type { border-bottom: 0; }
.dlv-kv > span { color: var(--dlv-text-muted); flex: none; }
.dlv-kv > strong { text-align: right; word-break: break-all; }
.dlv-kv__accent { color: var(--dlv-blue-700); }

/* ── 신청 상세 ───────────────────────────────────────────────────── */
.dlv-history-detail-page .dlv-subhead { justify-content: center; }
/* 하단 고정 버튼(취소·다시 신청하기)이 마지막 카드를 가리지 않게 비워 둔다 */
.dlv-history-detail-page .dlv-main { gap: 16px; padding-bottom: 100px; }
/* 상세의 카드는 신청내역 카드(.dlv-hcard)와 같은 테두리·곡률로 맞춘다(시안) */
.dlv-history-detail-page .dlv-card { padding: 20px 18px; border-radius: 18px; box-shadow: var(--dlv-shadow); }

/* 진행 단계 — 흰 카드 안에 원(::before)과 앞 단계로 잇는 선(::after) */
.dlv-steps-card { padding: 18px 8px 16px !important; }
.dlv-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.dlv-steps li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: calc(13px * var(--dlv-text-scale, 1)); color: var(--dlv-text-muted); font-weight: 600; text-align: center; }
.dlv-steps li::before {
    content: attr(data-no);
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid var(--dlv-grey-300);
    border-radius: 50%;
    background: var(--dlv-bg);
    color: var(--dlv-text-muted);
    font-size: calc(14px * var(--dlv-text-scale, 1));
    font-weight: 700;
}
.dlv-steps li + li::after { content: ''; position: absolute; top: 14px; right: 50%; left: -50%; height: 3px; background: var(--dlv-grey-200); }
.dlv-steps .is-done, .dlv-steps .is-now { color: var(--dlv-blue-700); font-weight: 800; }
.dlv-steps .is-done::before { content: '✓'; border-color: var(--dlv-primary); background: var(--dlv-primary); color: #fff; }
/* 현재 단계는 채운 원 + 연파랑 고리, 다음 단계로 가는 선을 반쯤 칠해 '진행 중'을 보여준다(시안) */
.dlv-steps .is-now::before { border-color: var(--dlv-primary); background: var(--dlv-primary); color: #fff; box-shadow: 0 0 0 5px var(--dlv-blue-50); }
.dlv-steps .is-done + li::after { background: var(--dlv-primary); }
.dlv-steps .is-now + li::after { background: linear-gradient(90deg, var(--dlv-primary) 50%, var(--dlv-grey-200) 50%); }

/* 상태 카드 — 결론 + 다음 일, 아래 회색 줄에 신청일·접수번호·접수경로 */
.dlv-detail-hero__msg { margin: 2px 0 0; color: var(--dlv-text-strong); font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.dlv-detail-hero__desc { margin-top: 6px; color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.55; }
.dlv-detail-hero__desc:empty { display: none; }
.dlv-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--dlv-grey-50); color: var(--dlv-text-secondary); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-detail-hero__meta span:not(:last-child)::after { content: '|'; margin: 0 8px; color: var(--dlv-grey-300); }
.dlv-detail-hero__meta b { color: var(--dlv-text-strong); }
.dlv-detail-hero__meta .is-rcpt { color: var(--dlv-blue-700); font-weight: 600; }

/* 금액 — 신청금액은 참고값, 지원금액이 주인공. 아래에 신청 건수와 입금 안내(시안) */
.dlv-amount-box { padding: 18px; border: 1.5px solid var(--dlv-blue-300); border-radius: 18px; background: var(--dlv-primary-weak-bg); }
.dlv-amount-box__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dlv-amount-box__row span { display: block; margin-bottom: 6px; color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-amount-box__row strong { color: var(--dlv-text-strong); font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-amount-box__main { text-align: right; }
.dlv-amount-box__main span { color: var(--dlv-blue-700); font-weight: 700; }
.dlv-amount-box__main strong { color: var(--dlv-blue-700); font-size: calc(28px * var(--dlv-text-scale, 1)); letter-spacing: -.03em; }
.dlv-amount-box__main small { margin-left: 2px; font-size: calc(18px * var(--dlv-text-scale, 1)); }
.dlv-cnt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dlv-blue-300); }
.dlv-cnt__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-cnt__sum b { color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-cnt__list { margin-top: 8px; border-radius: 12px; background: var(--dlv-bg); }
.dlv-cnt__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.dlv-cnt__list li + li { border-top: 1px solid var(--dlv-line); }
.dlv-cnt__list span { color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-cnt__list b { color: var(--dlv-text-strong); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 하단 고정 취소 버튼 — 연한 빨강 바탕 + 빨간 글씨(시안) */
.dlv-cancel-btn { width: 100%; height: 54px; border: 0; border-radius: 12px; background: var(--dlv-danger-bg); color: var(--dlv-danger); font: inherit; font-weight: 700; }

/* 반려 결과 카드 — 결론·신청 정보·놓친 금액을 한 장에(시안) */
.dlv-rej-hero { display: grid; gap: 18px; padding: 20px; border: 2px solid #fad3d3; border-radius: 16px; background: var(--dlv-bg); }
.dlv-rej-hero__head { display: flex; align-items: flex-start; gap: 12px; }
.dlv-rej-hero__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dlv-danger-bg); color: var(--dlv-danger); font-size: 18px; font-weight: 800; }
.dlv-rej-hero__msg { margin: 0 0 8px; color: var(--dlv-text-strong); font-size: calc(20px * var(--dlv-text-scale, 1)); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.dlv-rej-hero__msg em { font-style: normal; color: var(--dlv-danger); text-decoration: underline; text-decoration-color: #f4a6ad; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.dlv-rej-hero__meta { margin: 4px 0 0; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-rej-hero__meta b { color: var(--dlv-text-strong); }
.dlv-rej-hero__amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--dlv-grey-50); }
.dlv-rej-hero__amount span { color: var(--dlv-text-secondary); font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-rej-hero__amount strong { color: var(--dlv-text-strong); font-size: calc(22px * var(--dlv-text-scale, 1)); font-weight: 800; }

/* 신청자 및 입금 정보 — 반려·정상 상세가 같은 마크업이다. 계좌는 은행명 + 번호 + 보기 토글 */
.dlv-info .dlv-kv { padding: 14px 0; }
.dlv-info .dlv-kv:has(+ .dlv-info__acnt) { border-bottom: 0; }
.dlv-info .dlv-kv > span { color: var(--dlv-text-secondary); }
.dlv-info .dlv-kv > strong { color: var(--dlv-text-strong); font-weight: 700; }
.dlv-info__acnt { padding-top: 14px; }
.dlv-info__acnt > span { color: var(--dlv-text-secondary); font-size: calc(16px * var(--dlv-text-scale, 1)); }
.dlv-info__acnt-box { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid var(--dlv-card-line); border-radius: 12px; background: var(--dlv-grey-50); }
.dlv-info__acnt-box b { display: grid; flex: 1; min-width: 0; color: var(--dlv-text-strong); font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 800; letter-spacing: .02em; word-break: break-all; }
.dlv-info__acnt-box b small { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 600; letter-spacing: 0; }
.dlv-info__acnt-box button { flex: none; padding: 8px 14px; border: 1.5px solid var(--dlv-grey-300); border-radius: 10px; background: var(--dlv-bg); color: var(--dlv-blue-700); font: inherit; font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 700; cursor: pointer; }

/* 택배사별 확인 결과 — 택배사마다 카드: 이름 + 판정 배지, 아래 신청/통과/반려 3칸 */
.dlv-carriers { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.dlv-carrier { padding: 14px 16px; border: 1px solid var(--dlv-line); border-radius: 12px; background: var(--dlv-grey-50); }
.dlv-carrier__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dlv-carrier__head b { color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); }
.dlv-carrier__badge { flex: none; padding: 4px 10px; border-radius: 999px; font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-carrier__badge.is-ok { background: var(--dlv-primary-weak-bg); color: var(--dlv-success); }
.dlv-carrier__badge.is-rej, .dlv-carrier__badge.is-part { background: var(--dlv-danger-bg); color: var(--dlv-danger); }
.dlv-carrier__nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 0; border-radius: 10px; background: var(--dlv-bg); }
.dlv-carrier__nums div { padding: 10px 4px; text-align: center; }
.dlv-carrier__nums div + div { border-left: 1px solid var(--dlv-divider); }
.dlv-carrier__nums dt { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-carrier__nums dd { margin: 4px 0 0; color: var(--dlv-text-strong); font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-carrier__nums .is-ok { color: var(--dlv-success); }
.dlv-carrier__nums .is-rej { color: var(--dlv-danger); }

/* 반려 사유 */
.dlv-review-reason { padding: 16px; border: 1px solid #fad3d3; border-radius: var(--dlv-radius); background: var(--dlv-danger-bg); color: var(--dlv-danger); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 700; line-height: 1.55; }
.dlv-review-reason strong { display: flex; align-items: center; gap: 8px; color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); }
.dlv-review-reason__tag { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--dlv-danger); color: #fff; font-size: calc(12px * var(--dlv-text-scale, 1)); }
.dlv-review-reason p { margin-top: 10px; padding: 14px; border-radius: 10px; background: var(--dlv-bg); color: var(--dlv-text-secondary); font-weight: 400; }

/* 지급계좌 확인 요청 — 처리해야 지급이 진행되는 안내라 경고 톤으로 세우고 폼을 바로 붙인다 */
.dlv-acnt-req { padding: 18px 16px; border: 1px solid #f5d78e; border-radius: var(--dlv-radius); background: #fff8e6; }
.dlv-acnt-req__title { font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; color: #8a6100; }
.dlv-acnt-req__reason { margin-top: 8px; color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.6; }
.dlv-acnt-req__meta { margin-top: 8px; color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-acnt-req__form { margin-top: 6px; }
.dlv-acnt-req__note { margin-top: 10px; color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); line-height: 1.5; }
/* 제출 버튼만 채운 파랑. 예금주 조회(.dlv-account-verify)는 계좌등록 화면과 같은 연한 톤을 유지해
   '조회 먼저, 변경은 그다음'이라는 순서가 버튼 색으로 읽히게 한다. */
.dlv-acnt-req__form button[type="submit"] { width: 100%; height: 52px; margin-top: 14px; border: 0; border-radius: 10px; background: var(--dlv-primary); color: #fff; font: inherit; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-acnt-req__form button[type="submit"]:disabled { background: var(--dlv-grey-200); color: var(--dlv-text-disabled); }
.dlv-acnt-req__form .dlv-account-verify:disabled { color: var(--dlv-text-disabled); }
/* 노란 확인요청 카드 위에서는 입력칸이 카드 배경에 묻힌다 — 흰 바탕으로 되살린다 */
.dlv-acnt-req .dlv-field input, .dlv-acnt-req .dlv-field select { background-color: #fff; }

/* 라벨-금액 한 줄(신청서 금액 요약 박스) */
.dlv-srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(15px * var(--dlv-text-scale, 1)); }

/* ── 택배사 행 ───────────────────────────────────────────────────── */
.dlv-courier { display: flex; align-items: center; gap: 10px; padding: 10px 0; }


.dlv-courier__sel {
    flex: 1;
    min-width: 0;
    height: 48px;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 42px 0 16px;
    border: 1px solid var(--dlv-line);
    border-radius: var(--dlv-radius-sm);
    background: var(--dlv-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23191f28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    color: var(--dlv-text-strong);
    font-family: inherit;
    font-size: calc(15px * var(--dlv-text-scale, 1));
}

.dlv-courier__cnt { display: inline-flex; align-items: center; gap: 4px; flex: none; }

.dlv-courier__input {
    width: 62px;
    height: 48px;
    padding: 0 8px;
    border: 1px solid var(--dlv-line);
    border-radius: var(--dlv-radius-sm);
    font-family: inherit;
    font-size: calc(15px * var(--dlv-text-scale, 1));
    text-align: right;
}
.dlv-courier__input { appearance: textfield; }
.dlv-courier__input::-webkit-inner-spin-button,
.dlv-courier__input::-webkit-outer-spin-button { margin: 0; appearance: none; }

.dlv-courier__del {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--dlv-grey-200);
    color: var(--dlv-text-muted);
    font-size: calc(17px * var(--dlv-text-scale, 1));
    line-height: 1;
    cursor: pointer;
}

.dlv-addline {
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--dlv-primary);
    color: #fff;
    font-family: inherit;
    font-size: calc(16px * var(--dlv-text-scale, 1));
    font-weight: 700;
    cursor: pointer;
}

.dlv-amount {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--dlv-primary-weak-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dlv-amount .dlv-srow span { color: var(--dlv-text-muted); }

.dlv-srow--total { padding-top: 10px; border-top: 1px solid var(--dlv-grey-200); font-size: calc(17px * var(--dlv-text-scale, 1)); }
.dlv-srow--total strong { color: var(--dlv-blue-700); font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 800; }

/* ── 증빙자료 ────────────────────────────────────────────────────── */
.dlv-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--dlv-line);
    border-radius: var(--dlv-radius-sm);
}

.dlv-upload.has-file { cursor: zoom-in; }
.dlv-upload__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* 첨부 다시보기 — 사진만 띄우고 아무 데나 누르면 닫는다 */
.dlv-evi-view { max-width: 92vw; max-height: 88vh; padding: 0; border: 0; border-radius: var(--dlv-radius-sm); background: transparent; }
.dlv-evi-view[open] { position: fixed; inset: 0; margin: auto; }
.dlv-evi-view::backdrop { background: rgba(0, 0, 0, .78); }
.dlv-evi-view img { display: block; max-width: 92vw; max-height: 88vh; border-radius: var(--dlv-radius-sm); }
.dlv-evi-view__close {
    position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
}
.dlv-upload__copy b { word-break: break-all; }
.dlv-upload__copy span { color: var(--dlv-text-sub); font-size: calc(13px * var(--dlv-text-scale, 1)); }

/* ── 동의·서명 ───────────────────────────────────────────────────── */
.dlv-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--dlv-grey-100);
    color: var(--dlv-text-muted);
    font-size: calc(15px * var(--dlv-text-scale, 1));
    line-height: 1.5;
    cursor: pointer;
}

.dlv-check input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--dlv-primary); }

/* 서명판은 touch-action:none 이라 여기 닿은 스크롤은 전부 획으로 먹힌다.
   좌우는 본문 여백(화면 가장자리)이 스크롤 자리라 판은 라벨 폭에 맞춘다 — 판에 안쪽 여백을 더 주면
   서명 칸만 좁아 보인다. */
.dlv-sign {
    position: relative;
    margin: 16px 0 0;
    height: 160px;
    border: 1px solid var(--dlv-line);
    border-radius: var(--dlv-radius-sm);
    background: var(--dlv-grey-50);
    overflow: hidden;
}

.dlv-sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.dlv-sign__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dlv-text-disabled);
    font-size: calc(15px * var(--dlv-text-scale, 1));
    pointer-events: none;
}

.dlv-sign__actions { display: flex; gap: 8px; margin: 14px 0 0; }
.dlv-sign__actions button {
    padding: 7px 12px;
    border: 1px solid var(--dlv-line);
    border-radius: 8px;
    background: var(--dlv-bg);
    color: var(--dlv-text-muted);
    font-family: inherit;
    font-size: calc(13px * var(--dlv-text-scale, 1));
    cursor: pointer;
}

/* ── 하단 고정 버튼 ──────────────────────────────────────────────── */
.dlv-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: var(--dlv-app-width);
    margin-inline: auto;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--dlv-line);
    background: var(--dlv-bg);
}

.dlv-sticky .dlv-btn, .dlv-sticky .dlv-secondary-btn { margin-top: 0; }
/* 키보드가 뜬 동안은 접는다(save.js syncKeyboard). 요소는 남으므로 본문 하단 여백은 그대로다. */
.dlv-app.is-keyboard .dlv-sticky { display: none; }

.dlv-btn--primary { flex: 2; background: var(--dlv-primary); color: #fff; }
/* is-incomplete 는 입력이 덜 찬 상태. 회색으로 보이지만 눌리며, 무엇이 빠졌는지 토스트로 알려준다. */
.dlv-btn--primary:disabled, .dlv-btn--primary.is-incomplete { background: var(--dlv-grey-300); color: var(--dlv-bg); }
.dlv-btn--primary:disabled { cursor: not-allowed; }
.dlv-btn--ghost { flex: 1; background: var(--dlv-grey-100); color: var(--dlv-text-secondary); }

/* ── 접수 완료 ───────────────────────────────────────────────────── */
.dlv-main--done { padding-top: calc(40px + env(safe-area-inset-top)); }

.dlv-done { text-align: center; padding: 8px 0 4px; }

.dlv-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--dlv-primary);
    color: #fff;
}

/* 완료 카드는 그림자 대신 얇은 테두리(시안) */
.dlv-done-page .dlv-card { padding: 8px 20px; border: 1px solid var(--dlv-line); border-radius: 12px; box-shadow: none; }
.dlv-done-page .dlv-kv { padding: 14px 0; }

.dlv-done__title { margin: 0; font-size: calc(23px * var(--dlv-text-scale, 1)); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }

.dlv-done__desc { margin-top: 12px; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.5; }

/* ── 토스트 ──────────────────────────────────────────────────────── */
.dlv-toast {
    white-space: pre-line;
    position: fixed;
    left: 50%;
    bottom: calc(120px + env(safe-area-inset-bottom));
    transform: translate(-50%, 8px);
    z-index: 210; /* 모달(200) 위 */
    width: max-content;
    max-width: min(420px, calc(100vw - 40px));
    padding: 13px 20px;
    border-radius: 14px;
    background: rgba(25, 31, 40, .92);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    color: #fff;
    font-size: calc(14px * var(--dlv-text-scale, 1));
    line-height: 1.45;
    text-align: center;
    word-break: keep-all; /* 한글은 어절 단위로 줄바꿈 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
}

.dlv-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 제출 대기 — 응답을 기다리는 동안 화면 전체를 덮는다(save.js setSubmitting).
   버튼만 잠그면 건수·첨부는 계속 만질 수 있어 보낸 내용과 화면이 어긋난다. */
.dlv-loading {
    position: fixed;
    inset: 0;
    z-index: 220; /* 토스트(210) 위 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 31, 40, .45);
}

.dlv-loading[hidden] { display: none; }

.dlv-loading__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dlv-spin .8s linear infinite;
}

@keyframes dlv-spin { to { transform: rotate(360deg); } }

/* 확인창 — 앱 웹뷰에서 confirm/alert 가 무시되므로 화면 안에서 직접 그린다(dialog.js). */
.dlv-modal { width: calc(100% - 48px); max-width: 320px; padding: 26px 20px 16px; border: 0; border-radius: 18px; background: var(--dlv-bg); }
.dlv-modal::backdrop { background: rgba(25, 31, 40, .45); }
/* 창이 열릴 때 포커스를 받는 자리(dialog.js box.focus()). Tab 으로 갈 수 없는 껍데기라 링이 없어도 잃는 것이 없다. */
.dlv-modal:focus, .dlv-modal:focus-visible { outline: none; }
/* showModal 폴백: top layer 를 못 쓰므로 위치·딤을 직접 준다(box-shadow 로 화면 전체를 덮는다). */
.dlv-modal.is-fallback { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 200; box-shadow: 0 0 0 100vmax rgba(25, 31, 40, .45); }
.dlv-modal__title { margin: 0 0 8px; color: var(--dlv-text-strong); font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; line-height: 1.45; text-align: center; white-space: pre-line; word-break: keep-all; }
.dlv-modal__title[hidden] { display: none; }
.dlv-modal__text { margin: 0 0 20px; color: var(--dlv-text-strong); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.6; text-align: center; white-space: pre-line; word-break: keep-all; }
/* 제목이 붙으면 본문은 한 단계 낮춘다 — 둘이 같은 무게면 위계가 생기지 않는다. */
.dlv-modal__title:not([hidden]) ~ .dlv-modal__text { color: var(--dlv-text-secondary); font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-modal__btns { display: flex; gap: 8px; }
.dlv-modal__btns button { flex: 1; min-height: 48px; border: 0; border-radius: 13px; font: inherit; font-weight: 700; }
.dlv-modal__btns button[hidden] { display: none; }
.dlv-modal__no { background: var(--dlv-grey-100); color: var(--dlv-text-secondary); }
.dlv-modal__yes { background: var(--dlv-primary); color: #fff; }
.dlv-modal__alt { background: var(--dlv-grey-100); color: var(--dlv-text-strong); }
/* 선택지 3개는 세로로 쌓고 주버튼을 맨 위로(dlvChoice) */
.dlv-modal__btns.is-stack { flex-direction: column; }
.dlv-modal__btns.is-stack .dlv-modal__yes { order: 1; }
.dlv-modal__btns.is-stack .dlv-modal__alt { order: 2; }
.dlv-modal__btns.is-stack .dlv-modal__no { order: 3; background: none; }

/* ── 로그인(기획 와이어프레임 loginScreen) ──────────────────────── */
.dlv-login-hero {
    position: relative; overflow: hidden;
    padding: calc(56px + env(safe-area-inset-top)) 26px 42px;
    border-radius: 0 0 34px 34px;
    background: linear-gradient(155deg, var(--dlv-blue-700), var(--dlv-blue-500));
    color: #fff;
}
.dlv-login-hero:after {
    content: "📦"; position: absolute; right: -12px; bottom: -30px;
    font-size: 126px; opacity: .10; transform: rotate(-10deg);
}
.dlv-login-logo {
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; margin-bottom: 22px;
    border-radius: 20px; background: #fff;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .16);
}
.dlv-login-logo img { height: 34px; width: auto; }
.dlv-login-hero h1 { position: relative; z-index: 1; margin: 0; font-size: calc(31px * var(--dlv-text-scale, 1)); line-height: 1.35; letter-spacing: -1px; }
.dlv-login-hero p { position: relative; z-index: 1; margin: 12px 0 0; font-size: calc(17px * var(--dlv-text-scale, 1)); line-height: 1.55; color: rgba(255, 255, 255, .86); }

.dlv-login-body { padding: 28px 20px calc(34px + env(safe-area-inset-bottom)); }
.dlv-login-title { margin: 0 0 16px; font-size: calc(20px * var(--dlv-text-scale, 1)); font-weight: 700; color: var(--dlv-text-strong); }
.dlv-method {
    display: flex; align-items: center; gap: 16px;
    width: 100%; margin-bottom: 12px; padding: 20px 18px;
    border: 1.5px solid var(--dlv-line); border-radius: 18px;
    background: var(--dlv-bg); color: var(--dlv-text-strong); font: inherit; text-align: left;
}
.dlv-method:after {
    content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
    border: solid var(--dlv-primary); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg);
}
/* disabled 는 본인인증 창이 떠 있는 동안이다 — 누른 카드가 눌린 채로 보여야 무엇이 진행 중인지 안다. */
.dlv-method:active, .dlv-method:disabled { border-color: var(--dlv-primary); background: var(--dlv-primary-weak-bg); }
.dlv-method:active strong, .dlv-method:disabled strong { color: var(--dlv-blue-700); }
.dlv-method__icon {
    flex: none; width: 36px; height: 36px;
    fill: none; stroke: var(--dlv-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.dlv-method__text { flex: 1; min-width: 0; }
.dlv-method__text strong { display: block; font-size: calc(18px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-method__text span { display: block; margin-top: 4px; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.5; }

/* 회원가입 1단계 — 가입 방법 선택 · 기본정보 */
.dlv-join-step .dlv-method:first-of-type { margin-top: 24px; }
.dlv-join-login { margin-top: 28px; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-join-login a { margin-left: 10px; color: var(--dlv-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dlv-field input[readonly] { border-color: transparent; background: var(--dlv-grey-100); color: var(--dlv-text-secondary); }
.dlv-inline { display: flex; gap: 8px; }
.dlv-inline input { flex: 1; min-width: 0; }
.dlv-outline-btn { flex: none; padding: 0 16px; border: 1.5px solid var(--dlv-primary); border-radius: var(--dlv-radius-sm); background: var(--dlv-bg); color: var(--dlv-blue-700); font: inherit; font-weight: 700; }
.dlv-pw { position: relative; display: block; }
.dlv-pw input { padding-right: 52px; }
.dlv-pw-msg { margin-top: 8px; font-weight: 600; }
.dlv-pw-msg.is-ok { color: var(--dlv-success); }
.dlv-pw-msg.is-error { color: var(--dlv-danger); }
.dlv-help.is-ok { color: var(--dlv-success); font-weight: 600; }
.dlv-pw__eye { position: absolute; top: 50%; right: 6px; width: 44px; height: 44px; transform: translateY(-50%); border: 0; background: transparent; }
.dlv-pw__eye svg { width: 22px; height: 22px; fill: none; stroke: var(--dlv-text-muted); stroke-width: 2; }
.dlv-pw__eye[aria-pressed="true"] svg { stroke: var(--dlv-primary); }
.dlv-biometric-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 58px; margin-bottom: 12px; border: 1.5px solid var(--dlv-primary); border-radius: 18px;
    background: var(--dlv-bg); color: var(--dlv-blue-700); font: inherit; font-size: calc(18px * var(--dlv-text-scale, 1)); font-weight: 700;
}
.dlv-biometric-btn:disabled { opacity: .6; }
/* display:flex 가 기본 [hidden] 을 이긴다 — 등록되지 않은 기기에서 감추려면 명시가 필요하다. */
.dlv-biometric-btn[hidden] { display: none; }
.dlv-bio-icon { font-size: 25px; }
.dlv-login-back { padding: 4px 0; border: 0; background: none; color: var(--dlv-text-muted); font: inherit; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-login-form .dlv-primary-btn { height: 58px; margin-top: 20px; font-size: calc(18px * var(--dlv-text-scale, 1)); }
.dlv-login-error { margin: 12px 0 0; color: var(--dlv-danger); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 600; }

.dlv-signup-box { margin-top: 24px; padding: 20px; border: 1px solid var(--dlv-line); border-radius: 19px; background: var(--dlv-primary-weak-bg); text-align: center; }
.dlv-signup-box strong { display: block; margin-bottom: 7px; font-size: calc(18px * var(--dlv-text-scale, 1)); color: var(--dlv-text-strong); }
.dlv-signup-box p { margin: 0 0 14px; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.5; }
.dlv-signup-outline {
    width: 100%; height: 54px; border: 1.5px solid var(--dlv-primary); border-radius: 15px;
    background: var(--dlv-bg); color: var(--dlv-blue-700); font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700;
}
.dlv-login-note { margin-top: 20px; text-align: center; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.55; }

/* ── 회원가입(기획 와이어프레임 verifyScreen~completeScreen) ────── */
.dlv-join-step { display: none; }
/* 활성 단계는 화면 높이만 채우고 하단 버튼을 흐름 안 맨 아래로 민다.
   fixed sticky + 하단 패딩 추측(96/118px)을 쓰면 단계마다 버튼 높이가 달라
   (완료 단계는 버튼 2개) 남는 여백만큼 스크롤이 생겼다. */
.dlv-join-step.is-on { display: flex; flex-direction: column; min-height: 100dvh; }
.dlv-join-step .dlv-signup-content { flex: 1; }
/* margin-inline: 0 은 필수 — fixed 시절의 auto 마진이 남으면 flex 아이템의 stretch 가 죽어
   컨테이너가 콘텐츠 폭(안드로이드 실측 83px)으로 쪼그라든다. align-self: stretch 로는 못 이긴다. */
.dlv-join-step .dlv-sticky { position: static; max-width: none; margin-top: auto; margin-inline: 0; }
/* 위에서 스페이서가 필요 없어졌다 — .dlv-app:has(.dlv-sticky) 의 96px 을 되돌린다 */
.dlv-app--entry:has(.dlv-sticky) { padding-bottom: 0; }
/* 단계 헤더(‹ + 제목). 5개 단계가 모두 이 한 벌을 쓴다 — 뒤로가기는 _back.jsp 와 같은 SVG(글자 ‹ 는 글꼴 기준선 탓에 아래로 처져 보였다), 제목은 20px/700. */
.dlv-sub-top { display: flex; align-items: center; gap: 4px; height: 64px; padding: 0 14px; }
.dlv-back { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--dlv-text-strong); }
.dlv-sub-title { font-size: calc(19px * var(--dlv-text-scale, 1)); /* .dlv-subhead__title 과 같은 크기 */ font-weight: 700; letter-spacing: -.02em; }
.dlv-signup-content { padding: 24px 20px 24px; }
.dlv-signup-content h1 { margin: 0; font-size: calc(25px * var(--dlv-text-scale, 1)); line-height: 1.38; letter-spacing: -.7px; }
.dlv-eyebrow { margin: 0 0 8px; color: var(--dlv-blue-700); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 800; }
.dlv-desc { margin: 10px 0 0; color: var(--dlv-text-muted); font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.55; }

.dlv-primary-btn { width: 100%; height: 54px; border: 0; border-radius: 12px; background: var(--dlv-primary); color: #fff; font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-primary-btn:disabled { background: var(--dlv-grey-300); }
.dlv-desc + .dlv-primary-btn { margin-top: 24px; }
.dlv-secondary-btn { width: 100%; height: 54px; margin-top: 10px; border: 1px solid var(--dlv-line); border-radius: 12px; background: var(--dlv-bg); color: var(--dlv-text-strong); font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-text-btn { display: block; margin: 18px auto 0; border: 0; background: transparent; color: var(--dlv-text-muted); font: inherit; font-size: calc(14px * var(--dlv-text-scale, 1)); text-decoration: underline; text-underline-offset: 3px; }

/* 본인인증 카드 — 파란 테두리 + 우상단 배지(제목/설명은 좌측 정렬) */
.dlv-verify-box { margin-top: 20px; padding: 20px; border: 1.5px solid var(--dlv-primary); border-radius: 16px; background: var(--dlv-bg); }
.dlv-verify-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dlv-verify-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); }
.dlv-verify-box strong { display: block; color: var(--dlv-blue-700); font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-verify-box .dlv-desc { margin-top: 6px; font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-verify-box .dlv-primary-btn { margin-top: 18px; }
/* 별표 안내 — 카드가 아니라 잔글씨 한 줄 */
.dlv-note { margin: 12px 0 0; color: var(--dlv-text-sub); font-size: calc(12px * var(--dlv-text-scale, 1)); line-height: 1.5; }
/* 본인인증 임시 모드 배너(운영 전환 시 JSP 분기와 함께 사라진다) */
.dlv-notice-card { margin: 14px 0 0; padding: 14px; border: 1px solid var(--dlv-primary); border-radius: 12px; background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); font-size: calc(13px * var(--dlv-text-scale, 1)); line-height: 1.5; }

/* 입력 오류 배너 — 색은 .dlv-app 스코프의 --dlv-danger* 를 따른다(관리자 화면 영향 없음) */
.dlv-alert { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; border-radius: 12px; background: var(--dlv-danger-bg); color: var(--dlv-danger); font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-alert::before { content: "⚠"; font-size: calc(15px * var(--dlv-text-scale, 1)); }
.dlv-alert[hidden] { display: none; }

.dlv-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.dlv-progress li { text-align: center; color: var(--dlv-text-sub); font-size: calc(12px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-bubble { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 50%; background: var(--dlv-grey-100); color: var(--dlv-text-sub); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-progress .is-active { color: var(--dlv-blue-700); font-weight: 700; }
.dlv-progress .is-active .dlv-bubble { background: var(--dlv-primary); color: #fff; }

#step2 .dlv-field select { padding-left: 16px; background-position: right 16px center; }

/* 약관 동의 — 원형 체크 + 한 줄 항목(› 를 누르면 설명이 펼쳐진다) */
.dlv-agree-all { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 15px 16px; border-radius: 12px; background: var(--dlv-primary-weak-bg); font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-agree-item { display: flex; align-items: center; gap: 10px; padding: 14px 4px; }
.dlv-agree-label { display: flex; flex: 1; align-items: center; gap: 10px; }
.dlv-agree-copy { flex: 1; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 500; line-height: 1.45; }
.dlv-agree-copy small { display: none; margin-top: 5px; color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 400; }
.dlv-agree-item.is-open .dlv-agree-copy small { display: block; }
/* 가입 약관동의의 전문 보기 — 화면 이동처럼 보이게 앱 폭 전체를 덮는다. */
.dlv-policy-sheet { width: 100%; max-width: var(--dlv-app-width); height: 100dvh; max-height: none; margin: 0 auto; padding: 0; border: 0; background: var(--dlv-bg); }
.dlv-policy-sheet[open] { display: flex; flex-direction: column; }
.dlv-policy-sheet::backdrop { background: var(--dlv-bg); }
.dlv-policy-sheet .dlv-subhead__back { border: 0; background: transparent; cursor: pointer; }
/* 뒤로 버튼 폭만큼 오른쪽을 비워 맞추는 기본 방식은 버튼(<button>) 폭이 링크와 달라 제목이 밀린다 — 헤더 기준으로 가운데 고정. */
.dlv-policy-sheet .dlv-subhead { position: relative; }
.dlv-policy-sheet .dlv-subhead__title { position: absolute; right: 0; left: 0; padding: 0 56px; pointer-events: none; }
.dlv-policy-sheet .dlv-main { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.dlv-agree-more { flex: none; padding: 0 2px; border: 0; background: transparent; color: var(--dlv-text-disabled); font: inherit; font-size: calc(17px * var(--dlv-text-scale, 1)); }
/* 네이티브 체크박스를 원형 체크 아이콘으로 — 미체크는 회색 원, 체크는 파란 원 */
.dlv-agree-all input, .dlv-agree-item input {
    width: 22px; height: 22px; flex: none; margin: 0; -webkit-appearance: none; appearance: none;
    border: 0; border-radius: 50%; background: var(--dlv-grey-300) no-repeat center/13px 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.2 2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dlv-agree-all input:checked, .dlv-agree-item input:checked { background-color: var(--dlv-primary); }

.dlv-complete { text-align: center; padding-top: 32px; }
.dlv-join-check { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; background: var(--dlv-primary); color: #fff; font-size: calc(22px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-complete h2 { margin: 0 0 10px; font-size: calc(25px * var(--dlv-text-scale, 1)); line-height: 1.38; letter-spacing: -.7px; }
.dlv-account-panel { margin: 26px 0; padding: 18px; border: 0; border-radius: 14px; background: var(--dlv-primary-weak-bg); text-align: left; }
.dlv-account-panel h3 { margin: 0 0 6px; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-account-panel .dlv-desc { font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-dashed { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--dlv-bg); color: var(--dlv-text); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-dashed::before { content: "✓"; color: var(--dlv-blue-700); font-weight: 800; }

/* ── 폰 프레임(넓은 화면) ────────────────────────────────────────
   .dlv-sticky 의 left·right 를 덮어써야 하므로 반드시 그 정의보다 뒤에 둔다.
   (탭바는 sticky 라 폰 프레임 안에서 이미 제 폭을 갖는다 — 따로 보정하지 않는다) */
@media (min-width: 461px) {
    html { background: var(--dlv-grey-200); }
    .dlv-app { min-height: 100vh; box-shadow: 0 18px 50px rgba(28, 55, 90, .16); }
}

/* ── 지원금 신청 화면 시안 보정 ──────────────────────────────────
   .dlv-check / .dlv-addline / .dlv-sticky 기본 정의보다 뒤에 둔다. */
/* 동의 항목: 체크되면 연파랑 + 본문색으로 전환(시안). :has 미지원 브라우저는 회색 유지 — 읽기에 지장 없음 */
.dlv-check:has(input:checked) { background: var(--dlv-primary-weak-bg); color: var(--dlv-text-strong); }
/* 예상 지원금 줄은 구분선 없이 여백만 띄운다(시안) */
.dlv-amount .dlv-srow--total { margin-top: 2px; padding-top: 12px; border-top: 0; }
/* 신청자 정보 3행을 하나의 테두리 박스로 묶는다(시안) */
.dlv-card__box { margin-top: 14px; padding: 4px 16px; border: 1px solid var(--dlv-line); border-radius: 12px; }
.dlv-card__box .dlv-kv:last-child { border-bottom: 0; }
/* 계좌 확인을 마치면 지급계좌 줄이 박스의 마지막이다 — 뒤에 감춰 둔 확인 위젯(#acntCheck)이
   그대로 남아 :last-child 가 빗나가므로, 이 줄의 밑선은 따로 지운다. */
.dlv-card__box #acntDone { border-bottom: 0; }

/* 지급계좌 확인 위젯 — 계좌 미등록 회원이 신청 화면에서 바로 예금주를 조회한다 */
.dlv-acnt-check { padding: 16px 0 4px; }
.dlv-acnt-check h3 { margin: 0; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 800; color: var(--dlv-text-strong); }
.dlv-acnt-check .dlv-help { margin-top: 6px; }
.dlv-acnt-check input[readonly] { background: var(--dlv-grey-50); color: var(--dlv-text-muted); }
.dlv-acnt-check__btn { width: 100%; height: 48px; margin-top: 16px; border: 1px solid var(--dlv-line);
    border-radius: 13px; background: var(--dlv-bg); font: inherit; font-weight: 800;
    color: var(--dlv-text-strong); cursor: pointer; }
.dlv-acnt-check__btn:disabled { color: var(--dlv-text-disabled); cursor: not-allowed; }
.dlv-acnt-check__msg { margin-top: 10px; font-size: calc(13px * var(--dlv-text-scale, 1)); line-height: 1.5; color: var(--dlv-text-sub); }
.dlv-acnt-check__msg.is-ok { color: var(--dlv-success); font-weight: 600; }
.dlv-acnt-check__msg.is-bad { color: var(--dlv-danger); font-weight: 600; }
/* 세로 스택이 되면서 .dlv-btn--primary{flex:2}/--ghost{flex:1} 이 높이를 갈라 버린다 → 해제 */
.dlv-sticky .dlv-btn { flex: none; }
/* 시안: 임시저장은 회색 채움이 아니라 흰 배경 + 테두리 */
.dlv-sticky .dlv-btn--ghost { background: var(--dlv-bg); border: 1px solid var(--dlv-line); color: var(--dlv-text-secondary); }

/* ── 택배 신청 내역(시안 보정) ───────────────────────────────────── */
/* 건수는 입력칸과 '건'을 한 박스로 묶는다(시안). 테두리를 바깥으로 옮기고 input 은 테두리 제거. */
.dlv-courier__cnt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    height: 48px;
    padding: 0 12px 0 6px;
    border: 1px solid var(--dlv-line);
    border-radius: var(--dlv-radius-sm);
    background: var(--dlv-bg);
    color: var(--dlv-text-strong);
    font-size: calc(15px * var(--dlv-text-scale, 1));
}
.dlv-courier__cnt .dlv-courier__input {
    width: 46px;
    height: 100%;
    padding: 0 4px;
    border: 0;
    background: transparent;
    text-align: right;
}
/* 입력칸에 :focus-visible 링이 그려지면 박스 안에 둥근 사각형이 하나 더 떠 보인다(안드로이드). 포커스는 바깥 박스가 보여 준다. */
.dlv-courier__cnt .dlv-courier__input:focus-visible { outline: none; }
.dlv-courier__cnt:focus-within { border-color: var(--dlv-primary); box-shadow: 0 0 0 1px var(--dlv-primary); }
/* 삭제 버튼은 입력 요소보다 한 단계 작게 표시한다. */
.dlv-courier__del { width: 32px; height: 32px; background: var(--dlv-grey-300); color: #fff; font-size: calc(18px * var(--dlv-text-scale, 1)); font-weight: 700; }
/* 시안: 스텝 뱃지는 라운드 사각형이 아니라 완전한 원 */
.dlv-step { border-radius: 50%; width: 28px; height: 28px; }
/* 시안: 요약 박스는 연한 파랑 */
.dlv-amount { background: var(--dlv-primary-weak-bg); border-radius: 12px; }
/* 시안: '예상 지원금' 은 라벨도 파랑 */
.dlv-amount .dlv-srow--total span { color: var(--dlv-blue-700); font-weight: 700; }
/* 제목 → 설명 → 본문 세로 리듬(시안). 설명이 제목에 붙고 본문과도 좁아 답답했다. */
.dlv-card__title { margin-bottom: 6px; }
.dlv-card__desc { margin-top: 0; margin-bottom: 22px; line-height: 1.55; }
.dlv-courier { padding: 6px 0; }
/* 아직 고르지 않은 행의 '택배사 선택'은 placeholder 톤(시안) */
.dlv-courier__sel:has(option[value=""]:checked) { color: var(--dlv-text-sub); }
/* 삭제는 채운 원이 아니라 휴지통 아이콘(시안) */
.dlv-courier__del {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--dlv-text-sub); cursor: pointer;
}
.dlv-courier__del:active { background: var(--dlv-grey-100); }

/* '+ 추가' 줄은 채운 파랑이 아니라 연한 파랑 바탕 + 파란 글씨(시안) */
.dlv-addline { background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700); font-size: calc(17px * var(--dlv-text-scale, 1)); }
.dlv-addline:disabled { background: var(--dlv-grey-100); color: var(--dlv-text-disabled); }

/* 증빙 1건 = 카드 하나(시안): 제목 → 사진첩·촬영 → 하단 삭제하기 */
.dlv-evi { margin-top: 12px; border: 1px solid var(--dlv-line); border-radius: 16px; overflow: hidden; }
.dlv-evi .dlv-upload { padding: 18px 18px 0; border: 0; border-radius: 0; }
.dlv-evi .dlv-upload__copy { gap: 4px; }
.dlv-evi .dlv-upload__copy b { color: var(--dlv-text-strong); font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-evi .dlv-upload.has-file .dlv-upload__copy b { font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-evi .dlv-upload__copy span { font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-evi__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px 18px; }
/* 테두리를 두면 필터 칩의 '선택됨'처럼 읽힌다 — 테두리 없는 채운 버튼으로 둔다 */
.dlv-evi__pick button {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; padding: 8px; border: 0; border-radius: 12px;
    background: var(--dlv-primary-weak-bg); color: var(--dlv-blue-700);
    font: inherit; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; cursor: pointer;
}
.dlv-evi__pick button:active { filter: brightness(.95); }
.dlv-evi__pick svg { width: 20px; height: 20px; flex: none; }
.dlv-evi__del {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    padding: 0 14px 16px; border: 0; background: none;
    color: var(--dlv-danger); font: inherit; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 600; cursor: pointer;
}
.dlv-evi__del:active { opacity: .7; }
/* 증빙은 최소 1건이라 첫 칸은 지울 수 없다 */
.dlv-evi:first-child .dlv-evi__del { display: none; }

/* 신청 상세의 첨부 증빙 — 이미지 대신 종류·건수·원본 동작을 한 줄 목록으로 보여준다. */
.dlv-proofs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dlv-proof {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px; border: 1px solid var(--dlv-line); border-radius: 12px;
    background: var(--dlv-grey-50); color: inherit;
}
.dlv-proof__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dlv-proof__name {
    overflow: hidden; color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700;
    white-space: nowrap; text-overflow: ellipsis;
}
.dlv-proof__kind { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 600; }
.dlv-proof__open { flex: none; color: var(--dlv-blue-700); font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 700; }
/* 신청 상세의 증빙 한 줄(시안): 제목 + 파일명 | 테두리 '보기' 버튼. 공지 첨부는 기존 모양 유지. */
.dlv-history-detail-page .dlv-proof { gap: 12px; padding: 12px; }
.dlv-history-detail-page .dlv-proof__info { flex: 1; gap: 4px; }
.dlv-history-detail-page .dlv-proof__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--dlv-text-strong); font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-history-detail-page .dlv-proof__name { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 400; }
.dlv-history-detail-page .dlv-proof__open { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border: 1.5px solid var(--dlv-grey-300); border-radius: 10px; background: var(--dlv-bg); color: var(--dlv-blue-700); }
.dlv-upload__copy b { font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 500; }

/* 동의 항목 — 체크하면 파란 톤으로 채워진다(시안) */
.dlv-check { align-items: center; background: var(--dlv-grey-100); color: var(--dlv-text-muted); font-size: calc(16px * var(--dlv-text-scale, 1)); }
.dlv-check:has(:checked) { background: var(--dlv-primary-weak-bg); }
.dlv-req { color: var(--dlv-danger); font-weight: 700; }
.dlv-strong-blue { color: var(--dlv-blue-700); font-weight: 700; }
.dlv-check input {
    margin-top: 0; width: 22px; height: 22px; -webkit-appearance: none; appearance: none;
    border: 0; border-radius: 50%; background: var(--dlv-grey-300) no-repeat center/13px 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.2 2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dlv-check input:checked { background-color: var(--dlv-primary); }

/* 서명판은 회색 바탕 대신 흰 바탕 + 테두리(시안) */
.dlv-sign { background: var(--dlv-bg); }

/* 신청서 단계는 카드로 떠 있지 않고 흰 바탕에 그대로 이어진다(시안) */
/* 신청 화면은 카드 프레임 없이 흰 바탕에 스텝만 나열한다(시안).
   본문 좌우 여백은 .dlv-main 의 20px 하나로 통일 — 카드 padding 이 겹치면 40px 이 된다. */
.dlv-apply-page .dlv-card { padding: 0; background: none; box-shadow: none; }
/* 카드 배경이 없어지면 24px 간격으로는 스텝 경계가 흐려진다 */
.dlv-apply-page .dlv-main { gap: 36px; }

/* 신청자 정보 박스 — 라벨 회색, 값은 오른쪽 굵게, 줄 사이 얇은 구분선(시안) */
.dlv-card__box { padding: 6px 18px; border-radius: 16px; }
.dlv-card__box .dlv-kv { padding: 16px 0; font-size: calc(16px * var(--dlv-text-scale, 1)); }
.dlv-card__box .dlv-kv > strong { font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }

/* ── 알림함 (/mber/noti) ─────────────────────────────────── */
/* 참고안(영암 알림함)처럼 바탕을 회색으로 내리고 카드만 흰색으로 띄운다.
   테두리로 카드를 구분하던 종전 방식보다 목록이 조용하다. */
.dlv-noti-page { background: var(--dlv-bg-page); }
.dlv-noti-page .dlv-subhead { background: var(--dlv-bg-page); }
.dlv-noti-page .dlv-main { gap: 12px; }
/* 미읽음 건수 ↔ '모두 읽기'를 한 줄에 양끝으로. 헤더에 두면 좌측 뒤로가기와 폭이 달라
   제목이 가운데를 벗어난다 — 서브헤더는 뒤로가기와 제목만 두어 다른 화면과 같게 유지한다. */
.dlv-noti-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 -2px; }
.dlv-noti-count { color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-noti-count b { color: var(--dlv-blue-700); font-weight: 700; }
.dlv-noti-readall {
    flex: none;
    padding: 7px 12px; border: 1px solid var(--dlv-line); border-radius: 999px;
    background: var(--dlv-bg); color: var(--dlv-text-secondary); font: inherit; font-size: calc(13px * var(--dlv-text-scale, 1)); font-weight: 600;
}
.dlv-noti-readall:disabled { color: var(--dlv-text-disabled); }

.dlv-noti { display: flex; flex-direction: column; gap: 10px; }
.dlv-noti__item {
    display: grid;
    /* 3열: 아이콘 · 본문 · 미읽음 점. 점 자리를 항상 잡아 둬야 읽음/미읽음이 같은 폭으로 정렬된다. */
    /* 2열: 아이콘 · 본문. 미읽음 점은 시간 옆에 붙어 본문 안에 있다. */
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: var(--dlv-bg);
}
/* 제목과 시간을 한 줄 양끝으로 — 시간이 본문 밑에 따로 있으면 카드가 세 덩어리로 읽힌다. */
.dlv-noti__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dlv-noti__item:active { background: var(--dlv-grey-50); }
/* 미읽음 점 — 배경색만으로는 흑백 모드·저시력에서 구분되지 않는다 */
.dlv-noti__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: transparent; }
.dlv-noti .is-unread .dlv-noti__dot { background: var(--dlv-primary); }
.dlv-noti__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dlv-grey-100);
    font-size: calc(20px * var(--dlv-text-scale, 1));
}
.dlv-noti__icon--rej { background: var(--dlv-danger-bg); color: var(--dlv-danger); }
.dlv-noti__icon--hold { background: var(--dlv-warning-bg); color: var(--dlv-warning); }
.dlv-noti__icon--pay_wait { background: var(--dlv-warning-bg); color: var(--dlv-warning); }
.dlv-noti__icon--part_paid { background: var(--dlv-warning-bg); color: var(--dlv-warning); }
.dlv-noti__icon--paid { background: var(--dlv-success-bg); color: var(--dlv-success); }
.dlv-noti__title { margin: 0; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 600; letter-spacing: -.02em; color: var(--dlv-text-secondary); }
.dlv-noti__text { margin: 6px 0 0; color: var(--dlv-text-muted); font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.55; }
.dlv-noti__time { margin: 8px 0 0; color: var(--dlv-text-sub); font-size: calc(12px * var(--dlv-text-scale, 1)); }
/*
   읽음/미읽음은 '강조를 더하는' 쪽이 아니라 '읽은 것을 가라앉히는' 쪽으로 가른다.
   전부 진하면(종전: 제목 800) 목록이 균일하게 시끄러워 무엇이 새것인지 안 보인다.
   미읽음만 제목을 진하게 세우고 시간 옆 점으로 표시한다.
*/
.dlv-noti .is-unread .dlv-noti__title { color: var(--dlv-text-strong); font-weight: 800; }
.dlv-noti .is-unread .dlv-noti__text { color: var(--dlv-text-secondary); }
/* 읽은 알림은 아이콘을 흐려 목록에서 뒤로 물러나게 한다 */
.dlv-noti li:not(.is-unread) .dlv-noti__icon { opacity: .55; }
.dlv-noti-page .dlv-empty { padding: 56px 20px; box-shadow: none; }
.dlv-empty__art { display: block; margin: 0 auto 14px; color: var(--dlv-grey-300); }
.dlv-empty__sub { margin-top: 8px; font-size: calc(14px * var(--dlv-text-scale, 1)); color: var(--dlv-text-disabled); }

/* ── 공지사항 (/mber/notice) ─────────────────────────────── */
/* 목록은 카드를 여러 장 띄우지 않고 한 장 안에서 구분선으로 나눈다.
   항목마다 그림자가 지면 여덟 줄짜리 목록이 여덟 개의 덩어리로 읽혀 훑기가 어렵다. */
.dlv-notice-page .dlv-main { gap: 0; padding-right: 0; padding-left: 0; }

.dlv-ntc-count { padding: 0 20px 18px; color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-ntc-count b { color: var(--dlv-blue-700); font-weight: 700; }

.dlv-ntc {
    border-top: 1px solid var(--dlv-text-strong);
    border-bottom: 1px solid var(--dlv-divider);
    background: var(--dlv-bg);
}
.dlv-ntc li + li { border-top: 1px solid var(--dlv-divider); }
.dlv-ntc__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
}
.dlv-ntc__item:active { background: var(--dlv-grey-50); }
.dlv-ntc__body { flex: 1; min-width: 0; }
/* 제목은 두 줄까지. 한 줄로 자르면 '개인정보 처리방침 개정 안내'처럼 앞머리가 겹치는 공지가 구별되지 않는다. */
.dlv-ntc__title {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 600; line-height: 1.5; letter-spacing: -.02em;
    color: var(--dlv-text-strong);
}
.dlv-ntc__date { display: block; margin-top: 6px; color: var(--dlv-text-sub); font-size: calc(12px * var(--dlv-text-scale, 1)); }
.dlv-ntc__arrow { flex: none; color: var(--dlv-grey-300); }
.dlv-notice-page .dlv-empty { margin: 0 20px; }

/* 중요 표시는 배지 하나로 끝낸다 — 행 전체를 물들이면 목록의 기준선이 흔들린다.
   파란 '글자'는 blue-700 을 쓴다(primary 는 연파랑 배경에서 AA 미달). */
.dlv-ntc__badge {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--dlv-primary-weak-bg);
    color: var(--dlv-blue-700);
    font-size: calc(12px * var(--dlv-text-scale, 1)); font-weight: 700; line-height: 1.5; vertical-align: 1px;
}

/* 상세 — 카드 장식 없이 제목·메타·본문의 간격과 구분선만으로 읽기 흐름을 만든다. */
.dlv-ntc-view {
    padding: 0;
}
.dlv-ntc-view__badge { display: inline-block; margin-bottom: 10px; }
.dlv-ntc-view__title {
    margin: 0;
    font-size: calc(21px * var(--dlv-text-scale, 1)); font-weight: 700; line-height: 1.45; letter-spacing: -.025em;
    color: var(--dlv-text-strong);
    word-break: keep-all;   /* 한국어 제목이 낱말 중간에서 끊기지 않게 */
}
.dlv-ntc-view__meta {
    margin: 12px 0 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dlv-line);
    color: var(--dlv-text-muted); font-size: calc(13px * var(--dlv-text-scale, 1));
}
/* 본문은 관리자 에디터가 만든 HTML 이라 무엇이 올지 모른다 —
   읽기 리듬(크기·행간·문단 간격)만 우리가 잡고, 넘칠 수 있는 것은 폭에 맞춰 눌러 둔다. */
.dlv-ntc-view__body {
    padding-top: 20px;
    color: var(--dlv-text-secondary);
    font-size: calc(16px * var(--dlv-text-scale, 1)); line-height: 1.75;
    word-break: break-word;
}
.dlv-ntc-view__body > *:first-child { margin-top: 0; }
.dlv-ntc-view__body > *:last-child { margin-bottom: 0; }
.dlv-ntc-view__body p { margin: 0 0 15px; }
.dlv-ntc-view__body h1, .dlv-ntc-view__body h2, .dlv-ntc-view__body h3 {
    margin: 26px 0 10px; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; line-height: 1.5; color: var(--dlv-text-strong);
}
.dlv-ntc-view__body ul, .dlv-ntc-view__body ol { margin: 0 0 15px; padding-left: 20px; }
.dlv-ntc-view__body li { margin-bottom: 6px; }
.dlv-ntc-view__body img { max-width: 100%; height: auto; border-radius: var(--dlv-radius-sm); }
/* 표는 좁은 화면에서 줄바꿈으로 뭉개지느니 가로로 밀리는 편이 읽힌다 */
.dlv-ntc-view__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.dlv-ntc-view__body th, .dlv-ntc-view__body td { padding: 8px 10px; border: 1px solid var(--dlv-line); }
.dlv-ntc-view__body a { color: var(--dlv-blue-700); text-decoration: underline; }
.dlv-ntc-view__body hr { margin: 22px 0; border: 0; border-top: 1px solid var(--dlv-divider); }
.dlv-ntc-view__files-title {
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--dlv-divider);
    color: var(--dlv-text-strong);
    font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700;
}
.dlv-ntc-view__list {
    display: inline-flex;
    margin-top: 28px;
    padding: 11px 14px;
    border-radius: 8px;
    background: var(--dlv-grey-100);
    color: var(--dlv-text-secondary);
    font-size: calc(14px * var(--dlv-text-scale, 1)); font-weight: 600;
}

/* ── 증빙 촬영 가이드 (#dlvCam) ───────────────────────────────────── */
/* 어둡게 덮는 판을 따로 두지 않는다 — 가이드 사각형의 바깥쪽 그림자가 곧 딤이라
   사각형 안쪽만 저절로 뚫린다. 글자·버튼은 z-index 로 그 위에 올린다. */
/* 간격은 flex gap 하나로만 준다 — 요소마다 margin 을 달면 화면 높이가 다를 때
   어디가 먼저 좁아지는지 예측이 안 된다. 남는 높이는 사각형이 혼자 흡수한다. */
/* 100vh 는 주소창이 드러나 있어도 '주소창 없는' 높이라 화면보다 커진다 — 셔터가 아래로 밀려
   그만큼 세로 스크롤이 생겼다. dvh 로 지금 보이는 높이만 쓰고, 넘치는 건 잘라 화면을 고정한다.
   touch-action:none 은 카메라 위 드래그가 뒤 문서 스크롤로 넘어가는 것까지 막는다(iOS). */
.dlv-cam {
    position: fixed; inset: 0; z-index: 60; height: 100dvh;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    padding: calc(14px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    background: #000; color: #fff;
    overflow: hidden; overscroll-behavior: contain; touch-action: none;
}
.dlv-cam[hidden] { display: none; }
.dlv-cam__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dlv-cam__head {
    position: relative; z-index: 2; flex: none;
    display: flex; align-items: center; justify-content: center; width: 100%; height: 44px;
}
.dlv-cam__close {
    position: absolute; right: -10px; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer;
}
.dlv-cam__title { margin: 0; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; letter-spacing: -.02em; }
.dlv-cam__guide {
    position: relative; z-index: 2; flex: none; margin: 0;
    text-align: center; font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.55; color: rgba(255, 255, 255, .95);
}
/* 가이드 사각형만 늘었다 줄었다 한다. 촬영 시 잘라내는 범위는 이 요소의 실제 크기를
   그때그때 재서 쓰므로(save.js capture) 비율이 화면마다 달라져도 문제되지 않는다. */
.dlv-cam__frame {
    position: relative; z-index: 1; flex: 1 1 auto;
    width: min(100%, 340px); min-height: min(200px, 30dvh); max-height: 520px; margin: auto 0;
    border: 3px solid #fff; border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62);
}
/* 주의 문구는 한 줄. 아이콘을 옆에 붙여 높이를 한 행으로 묶고 남는 높이는 사각형에 준다. */
.dlv-cam__tip {
    position: relative; z-index: 2; flex: none; margin: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: calc(13px * var(--dlv-text-scale, 1)); line-height: 1.5; color: rgba(255, 255, 255, .78);
}
.dlv-cam__tip svg { flex: none; }
/* 셔터: 흰 원 + 얇은 어두운 선 + 바깥 링. 밝은 피사체 위에서도 원이 배경에 묻히지 않는다. */
.dlv-cam__shot {
    position: relative; z-index: 2; flex: none; width: 64px; height: 64px; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: #fff; cursor: pointer;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .55);
}
.dlv-cam__shot:active { transform: scale(.94); }

/* 촬영 확인 — 카메라 화면 위를 그대로 덮는다(스트림은 살려 둔 채 '다시 찍기'로 바로 돌아간다) */
.dlv-cam__review {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; gap: 16px;
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    background: #000;
}
.dlv-cam__review[hidden] { display: none; }
.dlv-cam__shotimg { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: 12px; }
.dlv-cam__acts { flex: none; display: flex; gap: 10px; }
.dlv-cam__retake, .dlv-cam__use {
    flex: 1; height: 52px; border-radius: var(--dlv-radius-sm);
    font-family: inherit; font-size: calc(16px * var(--dlv-text-scale, 1)); font-weight: 700; cursor: pointer;
}
.dlv-cam__retake { border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; }
.dlv-cam__use { border: 0; background: var(--dlv-primary); color: #fff; }
.dlv-cam__retake:active, .dlv-cam__use:active { opacity: .85; }


/* ── 글자 크기 설정(마이페이지) — 회색 트랙 위 흰 알약이 고른 칸(시안, text-scale.js) ── */
.dlv-textscale { padding: 14px 22px 18px; }
.dlv-textscale__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.dlv-textscale__head small { margin: 0; font-size: calc(13px * var(--dlv-text-scale, 1)); }
.dlv-textscale__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 14px; padding: 5px; border-radius: 12px; background: var(--dlv-grey-100); }
/* 설정을 키워도 버튼 크기는 그대로 둔다 — 눌러야 하는 자리가 움직이지 않게 */
.dlv-textscale__seg button {
    height: 48px; border: 0; border-radius: 9px; background: none;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--dlv-text-secondary); cursor: pointer;
}
.dlv-textscale__seg button.is-on { background: var(--dlv-bg); color: var(--dlv-text-strong); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 약관·개인정보처리방침 — 조문 번호를 원문 표기(1. / 1) / 가.)로 두려고 목록 대신 문단으로 짰다.
   문단 간격이 본문 기본값(15px)이면 조항 사이가 문단처럼 벌어져 한 조문으로 안 읽힌다. */
.dlv-policy p { margin-bottom: 9px; }
.dlv-policy__sub { margin-left: 14px; }

/* 헤더에 이미 화면 이름이 있어 본문 큰 제목은 걷어냈다. 대신 시행일만 박스로 세운다 —
   개정 때 가장 먼저 찾는 줄이고, 밑줄 한 줄로는 본문 첫 문단과 구분이 안 됐다. */
.dlv-policy-page .dlv-ntc-view__body, .dlv-policy-sheet .dlv-ntc-view__body { padding-top: 0; }
.dlv-policy__meta {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: var(--dlv-radius-sm);
    background: var(--dlv-grey-100);
    color: var(--dlv-text-muted);
    font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.5;
}
.dlv-policy__meta strong { margin-right: 8px; font-weight: 700; color: var(--dlv-text-strong); }
/* 장(제1장)과 조(제1조)가 같은 크기면 계층이 안 보인다 — 장만 키우고 위를 더 띄운다. */
.dlv-policy h2 {
    margin: 32px 0 4px;
    font-size: calc(19px * var(--dlv-text-scale, 1)); letter-spacing: -.02em;
}
.dlv-policy h2:first-child { margin-top: 0; }
.dlv-policy h3 { margin: 22px 0 8px; }

/* ── 앱 드롭다운(select.js) — 네이티브 select 는 값 보관용으로 숨기고 버튼 + 목록을 그린다(시안) ── */
.dlv-select { position: relative; }
/* 눌림 효과(:active filter)가 label 을 쌓임 맥락으로 만들어 열린 목록이 다음 드롭다운 밑으로 깔린다(select.js) */
.dlv-app label.has-dlv-select:active { filter: none; }
/* .dlv-field select(width:100%·padding) 가 특정성으로 이겨 숨긴 select 가 오른쪽으로 삐져나가 페이지가 가로로 밀렸다 */
/* select.js 는 버튼을 select 앞 형제로 둔다(라벨이 버튼을 가리키게) — 자식 선택자로 쓰면 숨겨지지 않아 드롭다운이 두 개 보인다 */
.dlv-select + .dlv-select__native { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.dlv-select__btn {
    width: 100%; min-height: 50px; padding: 14px 44px 14px 16px; border: 1px solid var(--dlv-line); border-radius: var(--dlv-radius-sm);
    background: var(--dlv-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23191f28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    font: inherit; font-weight: 500; color: var(--dlv-text-strong); text-align: left; cursor: pointer;
}
.dlv-select__btn.is-placeholder { color: var(--dlv-text-muted); }
.dlv-select__btn[aria-expanded="true"] { border-color: var(--dlv-primary); box-shadow: 0 0 0 3px var(--dlv-primary-weak-bg); }
.dlv-select__btn:disabled { background-color: var(--dlv-grey-100); color: var(--dlv-text-disabled); cursor: not-allowed; }
.dlv-select__list {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
    padding: 8px; border-radius: 16px; background: var(--dlv-bg); box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.dlv-select__items { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.dlv-select__opt {
    flex: none; width: 100%; padding: 14px 16px; border: 0; border-radius: 10px; background: none;
    font: inherit; font-weight: 500; color: var(--dlv-text-secondary); text-align: left; cursor: pointer;
}
.dlv-select__opt:hover, .dlv-select__opt:focus-visible { background: var(--dlv-grey-50); outline: none; }
.dlv-select__opt.is-on { background: var(--dlv-primary-weak-bg); color: var(--dlv-primary); font-weight: 700; }
.dlv-select__more {
    display: block; height: 20px; margin-top: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23191f28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.dlv-select__more[hidden] { display: none; }
/* 택배사 행: 건수 칸(48px)과 높이를 맞추고, 긴 택배사명은 한 줄로 자른다 */
.dlv-courier .dlv-select { flex: 1; min-width: 0; font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-courier .dlv-select__btn { height: 48px; min-height: 0; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 길게 눌러 복사(copy-press.js). 기본 길게누르기 메뉴·텍스트 선택을 막아야 토스트가 가려지지 않는다. */
[data-copy] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: copy; }

/* ── 비로그인 랜딩 ───────────────────────────────────────────────── */
/* 파란 바탕 위에 흰 시트를 올린 구조라 하단 여백은 시트가 가진다 — body 에 두면 바닥에 파란 띠가 남는다. */
/* 끝색을 홈 카드(#4A8AF0)보다 진하게 둔다 — 회원가입 링크의 흰 글자가 3.4:1 로 떨어졌다. */
.dlv-landing-page { padding-bottom: 0; background: linear-gradient(160deg, #1F63D6 0%, #2A70E0 100%); }
.dlv-landing-page .dlv-main { gap: 0; padding: 0; }
.dlv-landing-hero { padding: 10px 20px 28px; color: #fff; }
.dlv-landing-hero__title { font-size: calc(26px * var(--dlv-text-scale, 1)); font-weight: 700; line-height: 1.35; letter-spacing: -.03em; }
.dlv-landing-hero__desc { margin-top: 12px; font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.55; color: rgba(255, 255, 255, .9); word-break: keep-all; }
.dlv-landing-hero .dlv-btn--onfund { margin-top: 24px; box-shadow: none; }
.dlv-landing-hero__join { display: block; margin-top: 16px; text-align: center; font-size: calc(15px * var(--dlv-text-scale, 1)); color: #fff; }
.dlv-landing-hero__join b { text-decoration: underline; text-underline-offset: 3px; }

.dlv-landing-sheet {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 28px 20px calc(32px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: var(--dlv-bg);
}
.dlv-landing-sheet .dlv-section__title { color: var(--dlv-blue-700); }

.dlv-weather__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.dlv-weather__region { display: flex; gap: 6px; min-width: 0; }
.dlv-weather__region select {
    min-width: 0;
    padding: 6px 30px 6px 0;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23191f28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: calc(17px * var(--dlv-text-scale, 1));
    font-weight: 600;
    color: var(--dlv-text-strong);
}
.dlv-weather__at { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--dlv-text-scale, 1)); color: var(--dlv-text-secondary); }
.dlv-weather__at:not(:empty)::before { content: ''; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.dlv-weather__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlv-weather__metric { display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-radius: 14px; background: var(--dlv-grey-100); }
.dlv-weather__icon { flex: none; width: 32px; height: 32px; object-fit: contain; }
.dlv-weather__metric small { display: block; margin-bottom: 4px; font-size: calc(13px * var(--dlv-text-scale, 1)); color: var(--dlv-text-secondary); }
.dlv-weather__metric strong { font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; word-break: keep-all; }
.dlv-weather__calm { margin-left: 4px; font-size: calc(13px * var(--dlv-text-scale, 1)); font-style: normal; font-weight: 700; color: var(--dlv-text-strong); }
.dlv-weather__calm.is-high { color: #c53030; }
.dlv-weather__src { margin-top: 10px; font-size: calc(13px * var(--dlv-text-scale, 1)); color: var(--dlv-text-secondary); }
.dlv-weather__src:empty { display: none; }

.dlv-guide__head { display: flex; align-items: flex-start; gap: 12px; }
.dlv-guide__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--dlv-grey-100); font-size: 22px; }
.dlv-guide__head h3 { margin: 2px 0 6px; font-size: calc(17px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-guide__head p { font-size: calc(15px * var(--dlv-text-scale, 1)); line-height: 1.5; color: var(--dlv-text-secondary); word-break: keep-all; }
.dlv-guide__figures { display: flex; margin-top: 18px; padding: 18px 0; border-radius: 14px; background: var(--dlv-blue-50); }
.dlv-guide__figures > div { flex: 1; text-align: center; }
.dlv-guide__figures > div + div { border-left: 1px solid var(--dlv-blue-300); }
.dlv-guide__figures small { display: block; margin-bottom: 4px; font-size: calc(13px * var(--dlv-text-scale, 1)); color: var(--dlv-text-secondary); }
.dlv-guide__figures strong { font-size: calc(19px * var(--dlv-text-scale, 1)); font-weight: 700; color: var(--dlv-blue-700); }
.dlv-guide__criteria { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--dlv-divider); }
.dlv-guide__criteria-title { margin-bottom: 10px; font-size: calc(15px * var(--dlv-text-scale, 1)); font-weight: 700; }
.dlv-guide__criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.dlv-guide__criterion { padding: 12px; border-radius: 12px; }
.dlv-guide__criterion strong { display: block; margin-bottom: 6px; font-size: calc(14px * var(--dlv-text-scale, 1)); }
.dlv-guide__criterion li { position: relative; padding-left: 10px; font-size: calc(14px * var(--dlv-text-scale, 1)); line-height: 1.55; color: var(--dlv-text-secondary); word-break: keep-all; }
.dlv-guide__criterion li::before { content: ''; position: absolute; left: 0; top: .7em; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.dlv-guide__criterion.is-ok { background: var(--dlv-success-bg); }
/* success·danger 는 연한 배경 위 글자로 AA(4.5:1) 미달이라 한 단계 진하게 쓴다. */
.dlv-guide__criterion.is-ok strong { color: #116b3a; }
.dlv-guide__criterion.is-no { background: var(--dlv-danger-bg); }
.dlv-guide__criterion.is-no strong { color: #c53030; }
.dlv-guide__note { margin-top: 10px; font-size: calc(13px * var(--dlv-text-scale, 1)); color: var(--dlv-text-secondary); }
.dlv-guide__empty { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dlv-divider); font-size: calc(15px * var(--dlv-text-scale, 1)); color: var(--dlv-text-secondary); }