/* 샵 화면 CSS — deal 영역
 * 화면: deal.balance, deal.index, deal.view
 * :where(.pg-화면이름) 이 붙은 규칙은 그 화면에만 적용된다(우선순위는 그대로). 규칙: public/css/shop/README.md */


/* ───────── deal/_styles ───────── */
/* resources/views/shop/deal/_styles.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.deal-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.deal-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:6px; }
.deal-head h2 { font-size:24px; font-weight:800; margin:0; }
.deal-head h2 .em { color:#e8380d;  }
.deal-sub { color: var(--gm-text-sub,#555); font-size:14px; margin:0 0 18px; }
/* 지점 필터 */
.deal-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.deal-filter a { padding:7px 14px; border:1px solid #ddd; border-radius:20px; font-size:13px; color:#555; text-decoration:none; background:#fff; }
.deal-filter a.active { background:#111; color:#fff; border-color:#111; }
/* 리스트 카드 */
.deal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.deal-card { position:relative; border:1px solid #c2c9d1; border-radius:14px; overflow:hidden; background:#fff; transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column; }
/* 카드 전체를 덮는 클릭 영역 (썸네일·제목뿐 아니라 어디를 눌러도 상세로 이동) */
.deal-card .deal-card-link { position:absolute; inset:0; z-index:1; }
.deal-card a.thumb,
.deal-card .body,
.deal-card .head { position:relative; z-index:0; pointer-events:none; }
/* 지점명·제목 박스 — 썸네일 하단에 살짝 겹쳐 올라온다 */
.deal-card .head { z-index:1; margin:-26px 12px 0; padding:12px 14px; background:#fff; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.10); display:flex; flex-direction:column; gap:4px; }
.deal-card .head + .body { padding-top:12px; }
/* 카드 안에 별도 링크·버튼이 생기면 그것만 다시 클릭 가능하게 */
.deal-card .body a,
.deal-card .body button { position:relative; z-index:2; pointer-events:auto; }
.deal-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.10); transform:translateY(-2px); }
.deal-card a.thumb { display:block; position:relative; aspect-ratio:16/9; background:#f3f3f3; overflow:hidden; }
.deal-card a.thumb img { width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.deal-card a.thumb .noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--gm-text-muted,#6e6e6e); font-size:14px; }
.deal-card .body { padding:14px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.deal-card .branch { font-size:12px; color: var(--gm-text-sub,#555); }
.deal-card .title { font-size:16px; font-weight:700; line-height:1.35; color:#222; }
.deal-card .title a { color:inherit; text-decoration:none; }
.deal-card .date { font-size:13px; color:#555; }
.deal-card .price { margin-top:2px; }
.deal-card .price .dep { font-size:18px; font-weight:800; color:#e8380d; }
.deal-card .price .bal { font-size:12px; color: var(--gm-text-sub,#555); margin-left:4px; }
/* 뱃지 */
.deal-badges { display:flex; flex-wrap:wrap; gap:5px; }
.deal-badge { font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; }
.b-confirm { background:#e6f0ff; color:#1663d6; }
.b-recruit { background:#e8f7ec; color:#1a9d47; }
.b-closing { background:#fff0e6; color:#e8380d; }
.b-full { background:#f1f1f1; color:#777; }
.b-close { background:#f1f1f1; color: var(--gm-text-sub,#555); }
.b-dday { background:#111; color:#fff; }
.b-soon { background:#fdf0d8; color:#a15c00; }
.b-stop { background:#fdecec; color:#c0392b; }
/* 모객 게이지 */
.deal-gauge { margin-top:2px; }
.deal-gauge .bar { height:7px; border-radius:4px; background:#eee; overflow:hidden; }
.deal-gauge .bar > i { display:block; height:100%; background:#1a9d47; border-radius:4px; }
.deal-gauge .bar > i.warn { background:#e8a30d; }
.deal-gauge .bar > i.full { background:#1663d6; }
.deal-gauge .txt { font-size:12px; color:#666; margin-top:5px; }
.deal-gauge .txt b { color:#111; }
.deal-gauge .txt .ok { color:#1a9d47; font-weight:700; }
/* 회차별 칩 (목록 카드) — 출발일이 여럿일 때 전부 노출, 가장 빠른 회차 강조 */
.deal-sess-chips { display:flex; gap:8px; margin:10px 0 0; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.deal-sess-chips::-webkit-scrollbar { display:none; }
.ds-chip { flex:0 0 auto; min-width:78px; text-align:center; padding:9px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fafafb; }
.ds-chip .ds-date { font-size:13.5px; font-weight:700; color:#333; }
.ds-chip .ds-team { font-size:11px; color:#999; margin-top:3px; }
.ds-chip .ds-status { font-size:11.5px; font-weight:600; margin-top:5px; color:#1663d6; }
.ds-chip .ds-status.st-soon { color:#a15c00; }
.ds-chip .ds-status.st-ok { color:#1a9d47; }
.ds-chip .ds-status.st-off { color:#999; }
/* 가장 빠른(대표) 회차 — 로고색 테두리로 강조 */
.ds-chip.is-next { border:1.5px solid var(--gm-red,#e24d24); background:#fff; }
.ds-chip.is-next .ds-date { color:var(--gm-red,#e24d24); }
.ds-chip.is-next .ds-status { color:var(--gm-red,#e24d24); }
.ds-chip.is-next .ds-status.st-off { color:#999; }
.deal-empty { text-align:center; color: var(--gm-text-sub,#555); padding:70px 0; }
/* 상세: 좌 상품소개 / 우 예약 사이드바 */
.deal-detail { display:flex; gap:28px; align-items:flex-start; margin-bottom:30px; }
.deal-main { flex:1 1 auto; min-width:0; }
.deal-side { width:350px; flex-shrink:0; }
/* 신청 위젯은 스크롤 방향을 따라 움직인다(네이버 기사 사이드바와 같은 방식).
       내려가면 카드도 같이 올라가다가 카드 끝이 화면 아래에 닿으면 멈추고,
       다시 올려다보면 같이 내려와 카드 머리가 헤더 아래에 닿으면 멈춘다.

       CSS 만으로는 안 된다 — sticky 는 요소가 화면보다 작을 때만 붙고, 이 카드는
       달력 + 일정 + 신청폼 + 결제위젯이 한 덩어리라 화면보다 길다.
       그래서 sticky 는 그대로 두고 top 값을 스크롤 방향에 맞춰 자바스크립트가 밀어 준다
       (deal/view.blade.php 아래쪽 '사이드 따라오기' 스크립트).

       .deal-detail 에 align-items:flex-start 가 걸려 있어 이 칸 높이가 카드 높이와 같아진다.
       그러면 sticky 가 움직일 공간이 0 이라 애초에 붙지를 못한다 → stretch 로 본문만큼 늘린다. */
.deal-side { align-self:stretch; }
.deal-side .deal-book { position:sticky; top:80px; margin-top:0; padding:18px; border:1px solid #c2c9d1; border-radius:14px; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.deal-main .deal-head { display:block; margin:16px 0 8px; }
.deal-main .deal-head h2 { font-size:26px; font-weight:800; line-height:1.3; margin:8px 0; }
.deal-main .deal-head .branch { display:inline-block; color:var(--gm-primary-dark); font-size:12px; font-weight:700; letter-spacing:.3px; }
.deal-head-intro { color:#666; margin:8px 0 0; font-size:15px; line-height:1.55; }
.deal-main .deal-section:first-of-type { margin-top:22px; }
/* 상세 (구 hero — 하위호환) */
.deal-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:26px; margin-bottom:30px; }
.deal-hero .pic { aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#f3f3f3; position:relative; }
.deal-hero .pic img { width:100%; height:100%; object-fit:cover; }
.deal-hero .pic .noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--gm-text-muted,#6e6e6e); }
.deal-hero .info h1 { font-size:24px; font-weight:800; line-height:1.3; margin:10px 0 8px; }
.deal-hero .info .branch { color: var(--gm-text-sub,#555); font-size:14px; }
.deal-meta { list-style:none; padding:0; margin:18px 0 0; display:flex; background:#f8f9fb; border:1px solid #c2c9d1; border-radius:12px; overflow:hidden; }
.deal-meta li { flex:1; display:flex; flex-direction:column; gap:5px; padding:16px 20px; border-right:1px solid #c2c9d1; font-size:14px; }
.deal-meta li:last-child { border-right:none; }
.deal-meta li .k { color: var(--gm-text-sub,#555); font-size:13px; }
.deal-meta li .v { font-weight:700; color:#222; font-size:16px; }
.deal-meta li .v.price { color:var(--gm-red); font-size:20px; font-weight:800; }
/* 상세 신청 패널 */
.deal-apply { margin-top:8px; padding:16px; border:1px solid #c2c9d1; border-radius:12px; background:#fafafa; }
.deal-apply .status-line { font-size:14px; margin-bottom:12px; color:#333; }
.deal-apply .btn-apply { display:block; width:100%; text-align:center; padding:15px; border:0; border-radius:10px; font-size:16px; font-weight:800; color:#fff; background:#e8380d; cursor:pointer; text-decoration:none; }
.deal-apply .btn-apply.wait { background:#e8a30d; }
.deal-apply .btn-apply:disabled,
.deal-apply .btn-apply.off { background:#ccc; cursor:not-allowed; }
.deal-apply .btn-login { display:block; width:100%; text-align:center; padding:15px; border-radius:10px; background:#111; color:#fff; font-weight:700; text-decoration:none; }
.deal-apply .mine { padding:13px; border-radius:10px; background:#e8f7ec; color:#1a9d47; font-weight:700; text-align:center; }
/* 상세 콘텐츠 (일정/포함) */
.deal-section { margin:26px 0; }
.deal-section > h3 { font-size:18px; font-weight:800; margin:0 0 12px; padding-left:10px; border-left:4px solid #e8380d; }
.deal-content { line-height:1.7; color:#333; }
/* 포함사항·유의사항·가격정보·정책은 여행일정(.deal-day)과 같은 박스로 감싼다.
       테두리 없이 본문에 붙어 있으면 어디까지가 그 항목인지 구분되지 않는다. */
    /* 여백까지 .deal-day .body 와 동일하게 맞춘다.
       테두리는 같은데 padding 만 달라서, 같은 이미지를 넣어도 두 섹션의 폭이 어긋나 보였다. */
.deal-content-box { border:1px solid #c2c9d1; border-radius:12px; padding:14px 16px; background:#fff; }
.deal-content-box > :first-child { margin-top:0; }
.deal-content-box > :last-child { margin-bottom:0; }
/* 이미지 한 장으로 만든 콘텐츠는 박스를 꽉 채운다 (.deal-day .body 와 동일 규칙).
       이게 없으면 같은 이미지인데 일정 박스보다 안쪽으로 들어가 보인다. */
.deal-content-box:has(img) { padding:0; overflow:hidden; }
.deal-content-box:has(img) > p { margin:0; }
.deal-content-box:has(img) img { display:block; width:100%; }
.deal-content img { max-width:100%; height:auto; }
.deal-back { display:inline-block; margin-top:20px; color:#555; text-decoration:none; font-size:14px; }
/* 이미지 갤러리 */
.deal-gallery .main { aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#f3f3f3; position:relative; }
.deal-gallery .main img { width:100%; height:100%; object-fit:cover; }
.deal-gallery .main .swiper-slide img { display:block; }
.deal-gallery .main .noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--gm-text-muted,#6e6e6e); }
/* 썸네일 줄 — 스와이퍼가 가로로 민다. 줄바꿈(flex-wrap)을 쓰면 슬라이드 계산이 어긋난다. */
.deal-gallery .thumbs { margin-top:10px; overflow:hidden; }
.deal-gallery .thumbs .swiper-slide { width:72px; height:56px; opacity:.5; cursor:pointer; border:2px solid transparent; border-radius:8px; overflow:hidden; transition:opacity .2s, border-color .2s; }
.deal-gallery .thumbs .swiper-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.deal-gallery .thumbs .swiper-slide-thumb-active { opacity:1; border-color:#e8380d; }
/* 화살표·점 — 사진 위에 얹히므로 흰색으로 띄운다 */
.deal-swiper .swiper-button-next,
.deal-swiper .swiper-button-prev { color:#fff; }
.deal-swiper .swiper-button-next:after,
.deal-swiper .swiper-button-prev:after { font-size:22px; }
.deal-swiper .swiper-pagination-bullet { background:#fff; opacity:.6; }
.deal-swiper .swiper-pagination-bullet-active { opacity:1; }
/* 일정표 (day 박스) */
.deal-days { display:flex; flex-direction:column; gap:12px; }
.deal-day { border:1px solid #c2c9d1; border-radius:12px; overflow:hidden; }
.deal-day .head { background:#fafafa; padding:12px 16px; border-bottom:1px solid #c2c9d1; }
.deal-day .head .tag { display:inline-block; background:#e8380d; color:#fff; font-size:12px; font-weight:700; padding:2px 9px; border-radius:6px; margin-right:8px; }
.deal-day .head .nm { font-weight:700; color:#222; }
.deal-day .head .sm { color: var(--gm-text-sub,#555); font-size:13px; margin-top:4px; }
.deal-day .body { padding:14px 16px; line-height:1.7; color:#333; }
.deal-day .body img { max-width:100%; height:auto; }
/* 이미지형 일정(스케줄 이미지)은 패딩 제거해 꽉 차게, 텍스트 일정은 패딩 유지 */
.deal-day .body:has(img) { padding:0; }
.deal-day .body:has(img) p { margin:0; }
.deal-day .body:has(img) img { display:block; width:100%; }
.deal-day.info .head { background:#eef4ff; }
.deal-day.info .head .tag { background:#1663d6; }
/* 리스트 카드: 추가 출발일 표시 */
.deal-card .date .more { display:inline-block; margin-left:6px; font-size:12px; font-weight:700; color:#e8380d; background:#fff0e6; padding:1px 7px; border-radius:10px; }
/* 상세: 오른쪽 예약 위젯 (날짜 선택 + 신청) */
.deal-book { margin-top:18px; padding-top:18px; border-top:1px solid #c2c9d1; }
.deal-book-h { font-size:16px; font-weight:800; color:#222; margin:0 0 4px; }
.deal-book-toggle,
.deal-book-close { display:none; }
/* 상세: 진행 방식(신청→모집→확정) 안내 */
.deal-flow { list-style:none; display:flex; gap:8px; padding:0; margin:0 0 16px; }
.deal-flow li { flex:1; position:relative; background:#f7f9fb; border:1px solid #eaeef2; border-radius:10px; padding:10px 8px 10px; text-align:center; }
.deal-flow li .n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--gm-brand); color:#fff; font-size:12px; font-weight:800; margin-bottom:5px; }
.deal-flow li b { display:block; font-size:13px; color:#222; line-height:1.3; }
.deal-flow li small { display:block; font-size:11px; color:#8a9199; margin-top:3px; line-height:1.35; }
.deal-flow li:not(:last-child)::after { content:'›'; position:absolute; right:-8px; top:50%; transform:translateY(-50%); color:#c4ccd3; font-size:16px; z-index:1; }
/* 상세: 투어 날짜 선택 달력 */
.deal-cal-sub { color: var(--gm-text-sub,#555); font-size:13px; margin:0 0 14px; }
/* 달력 — 어느 달에 일정이 열리는지 한눈에 본다. 아래 카드 줄과 같은 선택을 공유한다. */
.deal-cal { width:100%; max-width:430px; margin:0 0 14px; }
.cal-head { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:14px; }
.cal-head .cal-title { font-size:18px; font-weight:800; color:#222; min-width:120px; text-align:center; }
.cal-nav { border:0; background:none; font-size:24px; color:#333; cursor:pointer; line-height:1; padding:2px 10px; }
.cal-nav:disabled { color:#ddd; cursor:default; }
.cal-week { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:13px; color: var(--gm-text-sub,#555); margin-bottom:8px; }
.cal-week span:first-child { color:#e05252; }
.cal-week span:last-child { color:#3f7fd6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-day { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:15px; color:#ccc; border-radius:12px; }
.cal-day.empty { color:#d3d3d3; }
.cal-day.has { color:#0a4f61; font-weight:800; background:#c7e9ef; border:1px solid #9dd8e2; cursor:pointer; transition:background .12s; }
.cal-day.has:hover { background:#d3f6fa; }
.cal-day.has.full { color: var(--gm-text-sub,#555); background:#f1f1f1; border-color:#e3e3e3; font-weight:600; }
.cal-day.has.on { background:var(--gm-brand); color:#fff; border-color:var(--gm-brand); box-shadow:0 3px 8px rgba(11,125,158,.35); }
/* 출발일 카드 줄 — 달력에 없는 '남은 자리' 를 말한다.
       사이드바가 350px 라 카드는 세 개쯤 보이고, 넘치면 가로로 민다.
       scroll-snap 을 걸어 두면 손으로 밀어도 카드가 어중간하게 걸치지 않는다. */
.sess-strip { margin:0 0 14px; }
.strip-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.strip-title { font-size:14px; font-weight:700; color:#222; }
.strip-navs { display:none; gap:4px; }
.sess-strip.scrollable .strip-navs { display:flex; }
.strip-nav { width:26px; height:26px; border:1px solid #dfe4ea; border-radius:50%; background:#fff; color:#555; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.strip-nav:hover { border-color:var(--gm-brand); color:var(--gm-brand); }
.strip-track { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.strip-track::-webkit-scrollbar { display:none; }
.sess-chip { flex:0 0 calc((100% - 16px) / 3); scroll-snap-align:start; display:flex; flex-direction:column; gap:3px; padding:10px 8px; border:1px solid #dfe4ea; border-radius:10px; background:#fff; cursor:pointer; text-align:center; }
.sess-chip .chip-date { font-size:14px; font-weight:700; color:#222; white-space:nowrap; }
.sess-chip .chip-sub { font-size:11px; color: var(--gm-text-sub,#555); }
.sess-chip .chip-state { font-size:11px; font-weight:600; color: var(--gm-text-sub,#555); }
.sess-chip.ok  .chip-state { color: var(--gm-primary-dark, #0b7d9e); }
.sess-chip.hot .chip-state { color: var(--gm-red); }
.sess-chip.off { background:#f6f7f9; }
.sess-chip.off .chip-date { color:#9aa3ad; }
.sess-chip:hover { border-color:var(--gm-brand); }
/* 고른 회차 — 테두리만으로는 옆 카드와 구분이 약해 안쪽에 한 겹 더 준다 */
.sess-chip.on { border-color:var(--gm-red); box-shadow:inset 0 0 0 1px var(--gm-red); }
.sess-chip.on .chip-date { color:var(--gm-red); }
.strip-dots { display:none; justify-content:center; gap:5px; margin-top:8px; }
.sess-strip.scrollable .strip-dots { display:flex; }
.strip-dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#dfe4ea; cursor:pointer; }
.strip-dot.on { width:16px; border-radius:3px; background:var(--gm-brand); }
.deal-sess-panels { width:100%; margin:14px 0 0; }
.deal-sess-panels .deal-sess { padding:14px; border:1px solid #c2c9d1; border-radius:12px; margin-bottom:10px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.deal-sess-panels .deal-sess:hover { border-color:var(--gm-brand); }
.deal-sess-panels .deal-sess.selected { border-color:var(--gm-brand); box-shadow:0 0 0 2px rgba(11,125,158,.18); }
.deal-sess-panels .sess-top { margin-bottom:6px; }
/* 상세: 출발 회차 목록 */
.deal-sess-list { display:flex; flex-direction:column; gap:14px; }
.deal-sess { border:1px solid #c2c9d1; border-radius:12px; padding:16px 18px; background:#fff; }
.deal-sess .sess-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.deal-sess .sess-date { font-size:16px; font-weight:800; color:#222; }
.deal-sess .sess-date .nights { display:inline-block; margin-left:6px; font-size:12px; font-weight:600; color: var(--gm-text-sub,#555); }
.deal-sess .sess-badges { display:flex; flex-wrap:wrap; gap:5px; }
.deal-sess .sess-deadline { font-size:12px; color:#e8380d; margin-bottom:8px; }
.deal-sess .deal-apply { margin-top:12px; }
/* 숙소 안내 */
.deal-acc-notice { color:#444; font-size:14px; margin:0 0 12px; }
.deal-acc-list { display:flex; flex-wrap:wrap; gap:10px; }
.deal-acc { flex:1; min-width:180px; border:1px solid #c2c9d1; border-radius:10px; padding:12px 14px; background:#fafbfc; }
.deal-acc .nm { font-weight:700; color:#222; }
.deal-acc .nm small { display:block; font-weight:400; color:#8a9199; font-size:12px; margin-top:2px; }
.deal-acc .fee { margin-top:6px; color:#e8380d; font-weight:700; font-size:13px; }
.deal-acc-agency { margin:12px 0 0; font-size:13px; color:#666; }
/* 모달: 숙소 선택 / 예약대행 */
.deal-modal .dm-agency-chk { display:flex; align-items:center; gap:7px; margin:12px 0 0; font-size:14px; color:#333; cursor:pointer; }
/* 결제 결과 플래시 */
.deal-flash { border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:14px; font-weight:600; }
.deal-flash.ok { background:#e8f7ec; color:#1a9d47; }
.deal-flash.err { background:#fdecea; color:#d33; }
/* 신청·결제 모달 */
.deal-modal-dim { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:30px 14px; }
.deal-modal-dim.on { display:flex; }
.deal-modal { background:#fff; border-radius:14px; width:100%; max-width:440px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.deal-modal .dm-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #c2c9d1; font-size:16px; }
.deal-modal .dm-x { border:0; background:none; font-size:24px; color: var(--gm-text-sub,#555); cursor:pointer; line-height:1; }
.deal-modal .dm-body { padding:16px 18px; }
.deal-modal .dm-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:#555; }
.deal-modal .dm-row b { color:#222; }
.deal-modal .dm-amt { color:#e8380d; font-weight:800; font-size:16px; }
/* 결제 전 안내(환불 조건·현지 잔금)는 읽고 넘어가야 하는 내용이라 회색 잔글씨로 두지 않는다.
       기존 #888/#f8f9fb 는 대비 약 3.5:1 로 접근성 기준(4.5:1) 미달이었다.
       로고색 옅은 틴트 + 왼쪽 강조선으로 '안내'임을 드러내되 과하지 않게. */
.dm-note {
        font-size:13px; line-height:1.65; color:#3f4753;
        background:color-mix(in srgb, var(--gm-red) 6%, #fff);
        border:1px solid color-mix(in srgb, var(--gm-red) 18%, #fff);
        border-left:3px solid var(--gm-red);
        border-radius:8px; padding:11px 13px; margin:10px 0 14px;
}
.dm-note b,
.dm-note strong { color:var(--gm-red-dark); font-weight:600; }
.deal-modal .dm-label { display:block; font-size:12px; color: var(--gm-text-sub,#555); margin:10px 0 4px; }
.deal-modal .dm-input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; }
.deal-modal .dm-foot { padding:14px 18px 18px; }
.deal-modal .dm-foot .btn-apply { width:100%; }
/* 사이드바 인라인 신청폼 (모달 대체) */
.deal-book-form { margin-top:14px; padding-top:14px; border-top:1px solid #c2c9d1; }
.deal-book-form .dm-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14px; color:#555; }
.deal-book-form .dm-row b { color:#222; }
.deal-book-form .dm-total-row { border-top:1px solid #c2c9d1; padding-top:8px; margin-top:2px; }
.deal-book-form .dm-amt { color:var(--gm-red); font-weight:800; font-size:16px; }
/* 추후 결제 잔금 — 지금 내는 금액이 아니라 강조색(빨강)을 쓰지 않는다 */
.deal-book-form .dm-later-row b { font-weight:600; font-size:15px; }
.deal-hidden-notice { padding:14px 16px; border:1px dashed #c2c9d1; border-radius:10px; background:#f6f7f9; color:var(--gm-text-sub,#555); font-size:13px; line-height:1.6; text-align:center; }
/* 이벤트 적용 시 정가 취소선 — 할인 폭이 보이되 실제 금액을 가리지 않게 작고 흐리게 */
.deal-price-was { color: var(--gm-text-muted,#6e6e6e); font-size:0.8em; font-weight:400; margin-right:4px; }
.deal-book-form .dm-was { color: var(--gm-text-muted,#6e6e6e); font-size:12px; font-weight:400; margin-right:3px; }
.deal-book-form .dm-label { display:block; font-size:12px; color: var(--gm-text-sub,#555); margin:10px 0 4px; }
.deal-book-form .dm-input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; }
.deal-book-form .dm-agency-chk { display:flex; align-items:center; gap:7px; margin:12px 0 0; font-size:14px; color:#333; cursor:pointer; }
.deal-book-form .dm-stepper { display:inline-flex; align-items:center; gap:12px; }
.deal-book-form .dm-step { width:30px; height:30px; border:1px solid #ccc; border-radius:6px; background:#fff; font-size:18px; line-height:1; cursor:pointer; color:#444; }
.deal-book-form .btn-apply { display:block; width:100%; text-align:center; padding:15px; border:0; border-radius:10px; font-size:15px; font-weight:500; color:#fff; background:#e8380d; cursor:pointer; margin-top:14px; }
.deal-book-form .btn-apply:disabled { background:#ccc; cursor:not-allowed; }
@media (max-width: 900px) {
    /* 세로로 세울 때 align-items 를 되돌려야 한다.
           위(가로 배치)에서 준 align-items:flex-start 가 세로 방향에서는 '가로 크기를 내용에 맞춤' 이 되어,
           가로로 늘어선 이미지 슬라이더(10장×800px)의 내용 폭 8000px 이 그대로 페이지 폭이 돼 버렸다. */
    .deal-detail { flex-direction:column; gap:18px; align-items:stretch; }
    .deal-main { width:100%; min-width:0; }
    .deal-side { width:100%; }
    .deal-meta { flex-direction:column; }
    .deal-meta li { border-right:none; border-bottom:1px solid #c2c9d1; }
    .deal-meta li:last-child { border-bottom:none; }
    /* 신청 위젯: 기본 숨김 → 하단 고정 버튼으로 바텀시트 오픈 */
    .deal-book-toggle { display:block; position:fixed; left:12px; right:12px; bottom:12px; z-index:120; padding:15px; background:#e8380d; color:#fff; border:0; border-radius:12px; font-size:16px; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,.22); cursor:pointer; }
    .deal-side .deal-book { display:none; position:static; box-shadow:none; }
    .deal-side.open::before { content:''; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:130; }
    .deal-side.open .deal-book { display:block; position:fixed; left:0; right:0; bottom:0; top:auto; z-index:135; margin:0; max-height:90vh; overflow-y:auto; border:0; border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.25); background:#fff; padding:22px 16px 40px; }
    .deal-side.open .deal-book-toggle { display:none; }
    .deal-book-close { display:block; position:absolute; top:12px; right:14px; z-index:1; background:none; border:0; font-size:26px; color: var(--gm-text-sub,#555); cursor:pointer; line-height:1; }
}

@media (max-width: 768px) {
    .deal-grid { grid-template-columns:1fr; gap:16px; }
    .deal-card a.thumb { aspect-ratio:2/1; }
    .deal-hero { grid-template-columns:1fr; gap:16px; }
    /* 좁은 화면에서 박스 여백이 크면 본문 폭이 눈에 띄게 좁아진다 (일정 박스와 동일 값) */
    .deal-content-box,
    .deal-day .body { padding:12px 13px; }
}


/* ───────── deal/balance ───────── */
/* resources/views/shop/deal/balance.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.bal-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.bal-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.bal-step { flex: 1 1 0; min-width: 0; padding: 12px 14px; border: 1px solid #dfe4ea; border-radius: 12px; background: #fff; }
.bal-step .n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #dfe4ea; color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; }
.bal-step b { font-size: 14px; color: #222; }
.bal-step small { display: block; margin-top: 4px; font-size: 12px; color: var(--gm-text-sub, #555); }
/* 끝난 단계 / 지금 할 단계 — 색으로만 구분하지 않고 문구(완료·진행중)도 같이 둔다 */
.bal-step.done { background: #f6f8fa; }
.bal-step.done .n { background: var(--gm-primary-dark, #0b7d9e); }
.bal-step.now { border-color: var(--gm-red); box-shadow: inset 0 0 0 1px var(--gm-red); }
.bal-step.now .n { background: var(--gm-red); }
.bal-arrow { color: #c7ced6; flex: 0 0 auto; }
.bal-card { border: 1px solid #c2c9d1; border-radius: 14px; background: #fff; padding: 20px; margin-bottom: 18px; }
.bal-card h3 { font-size: 16px; font-weight: 700; color: #222; margin: 0 0 14px; }
.bal-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--gm-text-sub, #555); }
.bal-row b { color: #222; font-weight: 600; text-align: right; }
.bal-total { border-top: 1px solid #e7ebf0; margin-top: 6px; padding-top: 12px; }
.bal-total b { color: var(--gm-red); font-size: 20px; font-weight: 800; }
.bal-pay { display: block; width: 100%; padding: 16px; border: 0; border-radius: 10px; background: #e8380d; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }
.bal-pay:disabled { background: #ccc; cursor: not-allowed; }
.bal-back { display: inline-block; margin-top: 14px; color: var(--gm-text-sub, #555); font-size: 14px; }
@media (max-width: 600px) {
    .bal-steps { flex-direction: column; align-items: stretch; }
    .bal-arrow { display: none; }
}