:root {
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-2: #f4f7fb;
  --text: #17212f;
  --muted: #6b7a90;
  --brand: #f08a00; /* primary orange */
  --accent: #f08a00; /* unify accent to orange */
  --danger: #e03131;
  --border: #dbe3ef;
  --chip: #eef3fb;
  --shadow: 0 8px 24px rgba(20, 40, 90, .08);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Background with subtle dotted grid */
body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(42,116,255,.07) 1.2px, transparent 0),
    radial-gradient(1200px 700px at 10% 0%, #ffffff 0%, #f7f9fc 45%, #f2f6fc 100%);
  background-size: 20px 20px, auto;
}
.page { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); background: rgba(255,255,255,.85); border-bottom: 1px solid var(--border); }
.brand { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 12px; align-items: center; }
.logo { font-size: 24px; }
.title h1 { margin: 0; font-size: 20px; letter-spacing: 0.2px; }
.title .subtitle { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* Layout refinements */
.content { max-width: 1100px; margin: 20px auto; padding: 0 20px 40px; display: grid; grid-template-columns: minmax(440px, 540px) 360px; gap: 24px; align-items: start; }
@media (max-width: 1024px) { .content { grid-template-columns: 1fr; } }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
.panel-head { margin-bottom: 8px; }
.panel-head h2 { margin: 0 0 6px; font-size: 18px; }
.muted { color: var(--muted); font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.divider { height: 1px; background: var(--border); border-radius: 1px; margin: 14px 0; }

/* Package grid */
.pkg-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (max-width: 960px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: inherit; padding: 16px; cursor: pointer; text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pkg-card:hover { transform: translateY(-2px); border-color: #c8d5ea; box-shadow: 0 8px 18px rgba(30, 60, 120, .08); }
.pkg-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(32,180,134,.18), 0 8px 20px rgba(32,180,134,.12); }
.pkg-badge { width: 56px; height: 56px; display: grid; place-items: center; background: radial-gradient(60% 80% at 50% 20%, #f1f5fb, #e8eef8); border: 1px solid var(--border); border-radius: 10px; font-weight: 700; }

/* East 코스 배지에 배경 이미지 적용 */
.pkg-badge-east {
  background-image: url('https://www.yehatour.com/images/bustour/east/v2/micheon.jpg?v=29');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent; /* 텍스트 숨김 */
}

/* West 코스 배지에 배경 이미지 적용 */
.pkg-badge-west {
  background-image: url('https://www.yehatour.com/images/bustour/west/v2/halla.jpg?v=29');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent; /* 텍스트 숨김 */
}
.pkg-title { 
  margin: 0 0 8px 0; 
  font-size: 18px; 
  font-weight: 700;
  color: #1e293b;
}

/* 비활성화된 코스 카드 스타일 */
.pkg-card-disabled {
  position: relative;
  cursor: not-allowed !important;
  pointer-events: none;
}

.pkg-card-disabled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  z-index: 1;
}

.pkg-card-disabled::after {
  content: "🔧 Preparing...\A Coming Soon";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  z-index: 2;
  white-space: pre-line;
}

.pkg-card-disabled:hover {
  transform: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.pkg-status {
  display: none; /* 오버레이로 대체되므로 숨김 */
}
.pkg-desc { 
  margin: 0 0 8px 0; 
  color: var(--muted); 
  font-size: 13px; 
  line-height: 1.4;
}

.chip { background: var(--chip); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; font-size: 12px; color: #2a3a55; }
.chip.price { background: linear-gradient(90deg, #eef3fb, #eaf0fa); }

/* Row */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 960px) { .row { grid-template-columns: 1fr; } }
/* Make rows inside the left form panel single-column so sections span full width */
.form .row { grid-template-columns: 1fr; }
.col h2 { margin: 0 0 6px; font-size: 18px; }

.date-picker { display: flex; align-items: center; gap: 10px; }
.btn { background: linear-gradient(90deg, var(--brand), #ffb24d 60%); color: #ffffff; border: 1px solid #ffd6a6; border-radius: 10px; padding: 10px 14px; font-weight: 700; letter-spacing: .2px; cursor: pointer; box-shadow: 0 8px 18px rgba(240, 138, 0, .2); }
.btn:disabled { opacity: .5; filter: grayscale(.2); cursor: not-allowed; }
.selected-date { color: #2a3a55; }

.counter { display: flex; align-items: center; gap: 10px; }
.btn-ghost { background: #ffffff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 18px; box-shadow: 0 2px 6px rgba(20,40,90,.05); }
.btn-ghost:hover { border-color: #c8d5ea; }
.people { width: 80px; text-align: center; background: #ffffff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 16px; box-shadow: inset 0 1px 2px rgba(20,40,90,.05); }

/* Price */
.price-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-item { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: space-between; }
.price-item.total { background: linear-gradient(180deg, #ffffff, #f6f9ff); border-color: #c8d5ea; }
.label { color: var(--muted); }
.value { font-weight: 800; }

.actions { margin-top: 14px; }
.reserve { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffd6a6; background: linear-gradient(90deg, var(--brand), #ffb24d 60%); color: #ffffff; font-weight: 800; letter-spacing: .3px; cursor: pointer; box-shadow: 0 8px 22px rgba(240, 138, 0, .2); }
.reserve:disabled { opacity: .5; filter: grayscale(.2); cursor: not-allowed; }

/* Summary */
.summary { position: sticky; top: 100px; }
.summary h2 { margin: 0 0 10px; font-size: 18px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #d4deee; padding: 10px 0; }
.summary-row.emph { border-bottom-style: solid; }

.footer { max-width: 1100px; margin: 0 auto; padding: 20px; color: var(--muted); font-size: 12px; }

/* Modal */
.modal { position: fixed; inset: 0; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; z-index: 1000; }
.modal[aria-hidden="false"] { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s ease; }
.modal[aria-hidden="false"] .modal-backdrop { opacity: 1; }
.modal-dialog { position: relative; margin: 8vh auto; margin-top: 70px !important; width: min(92vw, 520px); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(8px) scale(.98); opacity: 0; transition: transform .24s ease, opacity .24s ease; }
.modal[aria-hidden="false"] .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.cal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--panel-2); position: sticky; top: 0; z-index: 1; }
.cal-title { font-weight: 600; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cal-title .cal-select { border: 1px solid var(--border); border-radius: 8px; background-color: #ffffff; padding: 4px 8px; color: #0f1f36; font-size: 12px; height: 30px !important;padding-right: 20px; }
.cal-title .cal-select:focus { outline: none; border-color: #c8d5ea; }
.cal-title-label { font-weight: 700; }
.nav { background: #ffffff; color: var(--text); border: 1px solid var(--border); border-radius: 9999px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer; font-weight: 800; }
.nav:hover { border-color: #c8d5ea; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 8px 10px 0; color: #556074; font-size: 11px; padding: 8px 4px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 8px 10px 10px; padding: 0px;padding: 4px;}
.day { aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; background: #ffffff; color: #0f1f36; font-weight: 800; letter-spacing: .1px; user-select: none; transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease; min-width: 32px; font-size: 13px; }
.day:hover { transform: translateY(-1px); border-color: #c8d5ea; }
.day.disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.15); background: #f4f7fb; color: #9aa7bd; border-color: #e6edf7; }
.day.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(32,180,134,.15), inset 0 0 0 1px rgba(32,180,134,.15); background: #ecfbf5; color: #0f3a2d; }
.today::after { content: "today"; position: absolute; bottom: 4px; font-size: 10px; color: var(--brand); opacity: .95; }
.modal-actions { display: flex; justify-content: flex-end; padding: 8px 10px 10px; border-top: 1px solid var(--border); background: var(--panel-2); }

/* Make package list vertical cards */
.pkg-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pkg-card { 
  grid-template-columns: 56px 1fr; 
  align-items: start; 
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pkg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(20,40,90,.1);
}
.pkg-actions { display: flex; align-items: center; }
.btn-small { background: linear-gradient(90deg, #2a74ff, #20b486 60%); color: #ffffff; border: 1px solid #c8d5ea; border-radius: 10px; padding: 8px 12px; font-weight: 700; letter-spacing: .2px; cursor: pointer; box-shadow: 0 6px 14px rgba(42, 116, 255, .16); }
.btn-small:disabled { opacity: .5; filter: grayscale(.2); cursor: not-allowed; }

/* Icon button */
.icon-btn { background: #ffffff; color: var(--brand); border: 1px solid var(--border); border-radius: 10px; padding: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,40,90,.05); }
.icon-btn:hover { border-color: #c8d5ea; background: #f6f9ff; }
.pkg-actions { display: flex; align-items: center; gap: 8px; }
.pkg-date { color: var(--muted); font-size: 12.5px; }

/* Summary list */
.summary-list { display: grid; gap: 0px; margin-bottom: 12px; }
.summary-item { grid-template-columns: 1fr auto auto; column-gap: 12px; }
.summary-item .name { align-self: center; }
.summary-item .meta { align-self: center; }

/* Single price */
.price-box.single { grid-template-columns: 1fr; }

/* Calendar weekend emphasis */
.day.weekend { background: #fafcff; }
.day.weekend.disabled { background: #f3f6fb; }

/* Summary list remove button */
.summary-item { position: relative; }
.summary-item .remove-item { background: #ffffff; color: #9aa7bd; border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,40,90,.05); }
.summary-item .remove-item:hover { color: #e03131; border-color: #f1c9c9; background: #fff5f5; }

/* Pickup select */
.pickup { border: 1px solid var(--border); border-radius: 10px; background: #ffffff; padding: 6px 10px; color: var(--text); font-size: 13px; box-shadow: 0 2px 6px rgba(20,40,90,.05); }
.pkg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pkg-date { min-width: 128px; }

/* Summary layout rework */
.summary-list { display: grid; gap: 0px; margin-bottom: 12px; }
.summary-item { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  padding: 14px; 
  border: 1px solid var(--border); 
  border-radius: 10px; 
  background: #ffffff; 
  position: relative; 
  border-bottom: none; 
}

/* Summary item components - simplified 2-line layout */
.summary-item-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 32px; /* Make room for X button */
}

.summary-item-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.summary-item-info {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.summary-item-date {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
  display: block;
  margin-bottom: 8px; /* 하단 여백 줄임 */
}



.summary-item-pickup {
  display: block;
  width: 100%;
}



.summary-item-pickup .pickup-select {
  width: 100%;
  padding: 6px 30px 6px 10px; /* 오른쪽 패딩 늘림: 10px → 30px */
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.summary-item-pickup .pickup-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(240, 138, 0, 0.1);
}

.summary-item-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  background: #f8f9fa;
  color: #6c757d;
  border: 1px solid #dee2e6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.summary-item-remove:hover {
  background: #e9ecef;
  color: #dc3545;
  border-color: #dc3545;
}

/* Stack controls vertically to prevent horizontal overflow */
.summary-controls { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
.summary-controls .price { display: none; }
/* Small neutral circular remove button in the top-right */
.summary-controls .remove-item {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 28px; height: 28px; border-radius: 999px;
  background: #ffffff; color: #9aa7bd; border: 1px solid var(--border);
  padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(20,40,90,.05);
}
.summary-controls .remove-item:hover { background: #f6f9ff; border-color: #c8d5ea; color: #6f7f96; transform: translateY(-1px); }

/* Date button */
.date-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: #ffffff; color: var(--text); padding: 8px 10px; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 6px rgba(20,40,90,.05); }
.date-btn:hover { border-color: #c8d5ea; background: #f7fbff; }
.date-btn svg { color: var(--brand); }

/* Pickup select (summary) */
.summary-controls .pickup { 
  border: 1px solid var(--border); 
  border-radius: 10px; 
  background: #ffffff; 
  padding: 8px 10px; 
  color: var(--text); 
  font-size: 13px; 
  box-shadow: 0 2px 6px rgba(20,40,90,.05); 
  width: 100%; 
  box-sizing: border-box; 
  justify-self: stretch;
}

/* Remove button base (kept for other contexts) */
/* .summary-controls .remove-item base styles overridden above */

@media (max-width: 420px) {
  .summary-controls { grid-template-columns: 1fr; }
}

/* Select button (left cards) */
.btn-outline { 
  appearance: none; 
  background: #ffffff; 
  color: #1b2b45; 
  border: 1px solid var(--border); 
  border-radius: 999px; 
  padding: 8px 14px; 
  font-weight: 700; 
  letter-spacing: .2px; 
  cursor: pointer; 
  box-shadow: 0 2px 6px rgba(20,40,90,.05);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-outline:hover { border-color: #c8d5ea; background: linear-gradient(180deg,#ffffff,#f7fbff); }
.btn-outline svg { color: #2a74ff; }

/* Selected state */
.btn-outline.is-selected { 
  background: linear-gradient(90deg, var(--brand), #ffb24d 60%); 
  color: #ffffff; 
  border-color: #ffd6a6; 
  box-shadow: 0 6px 16px rgba(240,138,0,.18);
}
.btn-outline.is-selected svg { color: #ffffff; }

/* Card CTA placement */
.pkg-cta { display: flex; align-items: center; justify-content: flex-end; }
.pkg-card { grid-template-columns: 56px 1fr auto; }

/* Available day indicator - 코스별 색상 적용 */
.day.available { 
  background: #fff; 
  color: #0f1f36; 
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(240,138,0,.15); 
}
.day.available::after { 
  content: ""; 
  position: absolute; 
  top: 6px; 
  right: 6px; 
  width: 6px; 
  height: 6px; 
  border-radius: 50%; 
  background: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(240,138,0,.15); 
}
.day.available:hover { 
  background: color-mix(in srgb, var(--accent) 16%, #ffffff); 
}
.day:active { transform: scale(.98); }

/* 달력 날짜에 표시되는 가격/인원 정보 */
.day-info {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 9px;
  line-height: 1.1;
  color: #333;
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 3px;
  border-radius: 3px;
  white-space: pre-line;
  text-align: left;
  font-weight: 600;
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Brand overrides for YEHA TOUR (orange primary) */
:root {
  --brand: #f08a00; /* primary orange */
  --accent: #f08a00; /* unify accent to orange */
  --brand-light-bg: #fff4e6; /* soft tint for badges */
  --brand-light-bg-hover: #ffe8cc;
  --brand-light-border: #ffd6a6;
}

/* Buttons and CTAs */
.btn {
  background: linear-gradient(90deg, var(--brand), #ffb24d 60%);
  color: #ffffff;
  border-color: #ffd6a6;
  box-shadow: 0 8px 18px rgba(240, 138, 0, .2);
}
.reserve {
  background: linear-gradient(90deg, var(--brand), #ffb24d 60%);
  color: #ffffff;
  border-color: #ffd6a6;
  box-shadow: 0 8px 22px rgba(240, 138, 0, .2);
}
.btn-outline.is-selected {
  background: linear-gradient(90deg, var(--brand), #ffb24d 60%);
  color: #ffffff;
  border-color: #ffd6a6;
  box-shadow: 0 6px 16px rgba(240,138,0,.18);
}

/* Icon buttons */
.icon-btn { color: var(--brand); }
.date-btn svg { color: var(--brand); }

/* Weekday badges (left list) */
.weekday-badges { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 6px; justify-content: flex-start; }
.weekday-badge { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; letter-spacing: .1px; border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(20,40,90,.05); }
.weekday-badge.on { background: var(--brand); color: #ffffff; border-color: var(--brand); }
.weekday-badge.off { background: #ffffff; color: #8aa0bd; border-color: var(--border); }

/* Per-package palette (vibrant but not neon) */
:root {
  --pkgA: #f17661; /* brighter warm red/orange */
  --pkgB: #4a90e2; /* calm blue instead of yellow */
  --pkgC: #6faa12; /* fresher green */
}

/* Off-state stays subdued */
.weekday-badge.off { background: #f7f9fd; border-color: #e6edf7; color: #aab6c9; filter: grayscale(.2); }

/* On-state: soft gradient + white text + subtle ring */
.pkg-card[data-kind="E"] .weekday-badge.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pkgA) 92%, #ffffff), color-mix(in srgb, var(--pkgA) 76%, #000000 0%));
  border-color: color-mix(in srgb, var(--pkgA) 85%, #ffffff);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 3px 8px rgba(241,118,97,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.pkg-card[data-kind="W"] .weekday-badge.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pkgB) 92%, #ffffff), color-mix(in srgb, var(--pkgB) 76%, #000000 0%));
  border-color: color-mix(in srgb, var(--pkgB) 85%, #ffffff);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 3px 8px rgba(74,144,226,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.pkg-card[data-kind="J"] .weekday-badge.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pkgC) 92%, #ffffff), color-mix(in srgb, var(--pkgC) 76%, #000000 0%));
  border-color: color-mix(in srgb, var(--pkgC) 85%, #ffffff);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 3px 8px rgba(111,170,18,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Slight hover pop to improve affordance */
.weekday-badge.on:hover { transform: translateY(-1px); }

/* 달력 유효한 날짜 - 코스별 색상 적용 */
#calendarModal[data-active-kind="E"] .day.available {
  border-color: var(--pkgA) !important;
  box-shadow: 0 0 0 1px rgba(241,118,97,.15) !important;
}
#calendarModal[data-active-kind="E"] .day.available::after {
  background: var(--pkgA) !important;
  box-shadow: 0 0 0 2px rgba(241,118,97,.15) !important;
}
#calendarModal[data-active-kind="E"] .day.available:hover {
  background: color-mix(in srgb, var(--pkgA) 16%, #ffffff) !important;
}

#calendarModal[data-active-kind="W"] .day.available {
  border-color: var(--pkgB) !important;
  box-shadow: 0 0 0 1px rgba(74,144,226,.15) !important;
}
#calendarModal[data-active-kind="W"] .day.available::after {
  background: var(--pkgB) !important;
  box-shadow: 0 0 0 2px rgba(74,144,226,.15) !important;
}
#calendarModal[data-active-kind="W"] .day.available:hover {
  background: color-mix(in srgb, var(--pkgB) 16%, #ffffff) !important;
}

#calendarModal[data-active-kind="J"] .day.available {
  border-color: var(--pkgC) !important;
  box-shadow: 0 0 0 1px rgba(111,170,18,.15) !important;
}
#calendarModal[data-active-kind="J"] .day.available::after {
  background: var(--pkgC) !important;
  box-shadow: 0 0 0 2px rgba(111,170,18,.15) !important;
}
#calendarModal[data-active-kind="J"] .day.available:hover {
  background: color-mix(in srgb, var(--pkgC) 16%, #ffffff) !important;
}



/* Price breakdown */
.breakdown { margin: 10px 0 0; display: grid; gap: 8px; }
.bd-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bd-row label { color: var(--text); font-weight: 600; }
.bd-input { border: none; border-bottom: 1px dashed transparent; border-radius: 8px; padding: 6px 4px; background: transparent; color: var(--text); text-align: right; box-shadow: none; width: 80px; min-width: 80px; }
.bd-input:focus { outline: none; }
.bd-row.total { border-top: 1px dashed #d4deee; padding-top: 8px; margin-top: 2px; }
.summary-row .value {padding-right:4px;}
.bd-row.total span:last-child { font-weight: 800; justify-self: end; padding-right: 4px; }
@media (max-width: 420px) { .bd-row { grid-template-columns: 1fr; } .bd-input { width: 80px; min-width: 80px; } }

/* Disabled style for Book button on the right summary */
.reserve:disabled {
  background: linear-gradient(90deg, #cfd8e3, #e2e8f0 60%);
  color: #7a8798;
  border-color: #d9e1ec;
  box-shadow: none;
  opacity: 1;
  filter: none;
  cursor: not-allowed;
}

/* Calendar available dates: switch to white bg + dark text */
.day.available { background: #ffffff !important; color: #0f1f36 !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px rgba(240,138,0,.12) !important; }

/* Adjust per-package palette: B from yellow to calm blue */
:root {
  --pkgB: #4a90e2; /* calm blue instead of yellow */
}

/* Update W on-state visuals */
.pkg-card[data-kind="W"] .weekday-badge.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pkgB) 92%, #ffffff), color-mix(in srgb, var(--pkgB) 76%, #000000 0%));
  border-color: color-mix(in srgb, var(--pkgB) 85%, #ffffff);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 3px 8px rgba(74,144,226,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Package header row with title + price chip */
.pkg-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.pkg-title { margin: 0; font-size: 16px; }
/* ensure no right push for price chip */
.pkg-body .price { margin-left: 0 !important; }
.pkg-desc { margin: 6px 0 8px; color: var(--muted); font-size: 12.5px; }
.weekday-badges { margin-top: 10px; }

/* Hide price chip in left package list */
.pkg-body .price { display: none !important; }

/* Promo banner */
.promo { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; background: #f7f9fc; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(20,40,90,.06); }
.promo-badge { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; border: 1px solid #ffd1d1;
  background-image: url(/images/btn/promotion_new_45.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 0px;}
.promo-badge img { width: 30px; height: 30px; display: block; }
.promo-title { font-weight: 800; }
.promo-desc { color: #4a5568; font-size: 13px; }

/* Emphasize Book now button text */
.reserve { font-size: 18px; }

/* Persons group: vertical list with each item in two columns (info | counter) */
.persons { display: grid; grid-template-columns: 1fr; gap: 12px; }
.person-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 6px rgba(20,40,90,.05); width: 100%; }
.person-info { display: flex; flex-direction: column; gap: 4px; }
.person-label { font-weight: 700; }
.person-note { color: var(--muted); font-size: 12.5px; }
/* Right-aligned compact counter */
.persons .counter { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.persons .btn-ghost { background: #ffffff; color: var(--text); border: 1px solid var(--border); border-radius: 12px; width: 44px; height: 44px; padding: 0; font-size: 18px; box-shadow: 0 2px 6px rgba(20,40,90,.05); }
.persons .btn-ghost:hover { border-color: #c8d5ea; }
.persons .people { width: 84px; text-align: center; background: #ffffff; color: var(--text); border: 1px solid var(--border);border: 0px solid var(--border); border-radius: 12px; height: 44px; padding: 0 10px; font-size: 16px; box-shadow: inset 0 1px 2px rgba(20,40,90,.05); }
.persons .people:focus { border: 0px solid var(--border) !important;box-shadow: initial !important; }
.persons .people:focus-visible { border: 0px solid var(--border) !important; }
@media (max-width: 420px) { .person-item { flex-wrap: wrap; } .persons .counter { width: 100%; justify-content: flex-end; } }

/* Left column for form panels */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Form sections */
.form-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 24px 0;
  overflow: hidden;
}

.form-section .container {
  padding: 24px;
}

.form-section h2 {
  margin: 0 0 20px;
  font-size: 20px;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
}

.form-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
}

.form-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

/* Form grid layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Form inputs */
.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

/* 셀렉트 박스 화살표와 텍스트 사이 여백 추가 */
.form-group select {
  padding-right: 40px; /* 오른쪽 패딩 늘림 */
}

/* 코스 예약 가능일 안내 */
.course-availability-notice {
  padding: 12px 0;
}

.reservation-time-notice {
  padding: 12px 0;
  background: #fef7e7;
  border: 1px solid #f4d08a;
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px 16px;
}

.reservation-time-notice .notice-text {
  color: #92400e;
}

.reservation-time-notice .notice-icon {
  color: #f59e0b;
}

.notice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.notice-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.7;
}

.notice-text strong {
  color: var(--text);
  font-weight: 500;
}

/* Reservation error styles */
.reservation-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  position: relative;
  animation: slideIn 0.3s ease-out;
}

.reservation-error .error-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #dc2626;
  font-weight: 600;
}

.reservation-error .error-icon {
  font-size: 18px;
}

.reservation-error .error-list {
  margin: 0;
  padding-left: 20px;
  color: #7f1d1d;
}

.reservation-error .error-list li {
  margin-bottom: 4px;
}

.reservation-error .error-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 20px;
  color: #dc2626;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.reservation-error .error-close:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Person limit error styles */
.person-limit-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  background: linear-gradient(135deg, #fef2f2, #fef1f1);
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  animation: slideIn 0.3s ease-out;
}

.person-limit-error .error-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.person-limit-error .error-message {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* Person validation errors styles */
.person-validation-errors {
  padding: 16px;
  margin: 16px 0;
  background: linear-gradient(135deg, #fefdf2, #fef9f3);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  color: #ea580c;
  animation: slideIn 0.3s ease-out;
}

.person-validation-errors .error-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
}

.person-validation-errors .error-icon {
  font-size: 18px;
}

.person-validation-errors .error-list {
  margin: 12px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.person-validation-errors .error-list li {
  margin-bottom: 6px;
}

.person-validation-errors .error-suggestion {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(249, 115, 22, 0.1);
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
  color: #c2410c;
}

/* Counter button disabled states */
.counter button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: all; /* Allow hover to show tooltip */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(240, 138, 0, 0.1);
}

.form-group input.form-input-error,
.form-group select.form-input-error,
.form-group textarea.form-input-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* Form help text */
.form-help {
  margin: 8px 0 0;
  font-size: 12px;
  color: #2563eb;
  line-height: 1.4;
}

/* Radio buttons */
.radio-group {
  display: flex;
  gap: 16px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.radio-label input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s ease;
}

.radio-label input[type="radio"]:checked + .radio-custom {
  border-color: var(--accent);
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* Card number inputs */
.card-number-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.card-number-group input {
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Expiry date inputs */
.expiry-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Checkboxes */
.agreement-checkboxes {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

/* "I do not agree" 스타일 */
.checkbox-label:last-child {
  color: #64748b;
  font-weight: 500;
}

.checkbox-label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* Special emphasis for "I agree" checkbox */
.checkbox-label:first-child {
  background: transparent;
  border-color: transparent;
  color: #1e293b;
  font-weight: 600;
}

.checkbox-label:first-child:hover {
  background: #f1f5f9;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.checkbox-label:first-child .checkbox-custom {
  border-color: #cbd5e1;
}

.checkbox-label:first-child:hover .checkbox-custom {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  position: relative;
  transition: all 0.2s ease;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.checkbox-label:hover .checkbox-custom {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(240, 138, 0, 0.2);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
  border-color: var(--accent);
  background-color: var(--accent);
  box-shadow: 0 2px 8px rgba(240, 138, 0, 0.3);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* Terms content */
.terms-content {
  margin: 20px 0;
}

.term-item {
  margin-bottom: 20px;
}

.term-item ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.term-item li {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Form errors */
.form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.form-errors h4 {
  margin: 0 0 12px;
  color: #dc2626;
  font-size: 14px;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
  color: #dc2626;
  font-size: 13px;
}

.form-errors li {
  margin-bottom: 4px;
}

/* Empty state */
.empty-state {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 20px;
}

/* Summary items */
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  padding: 8px 16px;
  border-bottom: 1px dashed var(--border);
}

.summary-item:last-child {
  border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .form-section .container {
    padding: 16px;
  }
  
  .agreement-checkboxes {
    flex-direction: column;
    gap: 16px;
  }
  
  .card-number-group {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .card-number-group input:nth-child(3),
  .card-number-group input:nth-child(4) {
    grid-column: span 1;
  }
}

/* 모바일에서 좌우 스크롤 방지, 세로 스크롤 허용 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    overflow-y: visible; /* 세로 스크롤 완전 허용 */
    height: auto; /* 높이 제한 해제 */
  }
  
  .page {
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
  }
  
  .content {
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0 16px 40px;
    height: auto;
  }
  
  .panel {
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  /* 달력 모달 모바일 최적화 */
  .modal-dialog {
    width: 95vw;
    max-width: 400px;
    margin: 0 auto;
    overflow-x: hidden;
  }
  
  .cal-grid {
    overflow-x: hidden;
    width: 100%;
    min-width: auto;
  }
  
  .day {
    min-width: auto;
    font-size: 14px;
    padding: 8px 4px;
  }
  
  /* 코스 카드 모바일 최적화 */
  .pkg-card {
    padding: 12px;
    gap: 12px;
    overflow-x: hidden;
  }
  
  /* 모바일에서 코스 아이콘(E, S, J) 숨김 */
  .pkg-badge {
    display: none;
  }
  
  /* 모바일에서 코스 카드 레이아웃 조정 */
  .pkg-card {
    grid-template-columns: 1fr; /* 아이콘 열 제거하고 전체 너비 사용 */
  }
  
  .weekday-badges {
    flex-wrap: wrap;
    gap: 4px;
    overflow-x: hidden;
  }
  
  .weekday-badge {
    font-size: 11px;
    padding: 4px 6px;
    min-width: 24px;
  }
  
  /* 모바일에서 코스 아이콘만 숨김 (달력은 제외) */
  .pkg-card .pkg-badge {
    display: none;
  }
  
  /* 코스 카드 레이아웃 조정 */
  .pkg-card {
    grid-template-columns: 1fr; /* 아이콘 열 제거 */
    gap: 8px;
  }
  
  /* 모바일에서 모든 가격 항목에 동일한 CSS 적용 */
  .summary .summary-row,
  .summary .bd-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  
  .summary .summary-row > *:first-child,
  .summary .bd-row > *:first-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  
  .summary .summary-row > *:last-child,
  .summary .bd-row > *:last-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
}

/* 달력 코스명 라벨 스타일 */
.course-label {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--primary);
  background: var(--background);
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.8;
}

.day {
  position: relative;
}

.day.available .course-label {
  opacity: 1;
  color: var(--primary-foreground);
  background: var(--primary);
}

/* 금액 표시 색상 스타일 */
.amount-positive {
  color: #059669; /* 초록색 - 총액 */
  font-weight: 600;
}

.amount-discount {
  color: #dc2626; /* 빨간색 - 할인 */
  font-weight: 600;
}

.amount-deposit {
  color: #ea580c; /* 주황색 - 예약금 */
  font-weight: 600;
}

.amount-balance {
  color: #1d4ed8; /* 파란색 - 잔금 */
  font-weight: 700;
  font-size: 1.1em;
}

/* 요약 섹션의 금액 라벨 스타일 */
.summary .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.summary .summary-row:last-child {
  border-bottom: 2px solid var(--primary);
  margin-top: 4px;
  padding-top: 12px;
}

.summary .summary-label {
  font-weight: 500;
  color: var(--foreground);
}

.summary .summary-amount {
  font-weight: 600;
}

/* 날짜 표시 스타일 개선 */
.date-short {
  font-size: 0.75em;
  color: var(--muted-foreground);
  font-weight: 500;
  display: block;
  margin-bottom: -2px; /* 음수 여백으로 완전히 붙임 */
  line-height: 1;
}

/* 선택된 코스 카드 강조 */
.pkg-card[aria-pressed="true"] {
  border: 2px solid #3b82f6 !important;
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.pkg-card[aria-pressed="true"] .pkg-badge {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* East 코스 선택 시에도 배경 이미지 유지 */
.pkg-card[aria-pressed="true"] .pkg-badge-east {
  background-image: url('https://www.yehatour.com/images/bustour/east/v2/micheon.jpg?v=29') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* West 코스 선택 시에도 배경 이미지 유지 */
.pkg-card[aria-pressed="true"] .pkg-badge-west {
  background-image: url('https://www.yehatour.com/images/bustour/west/v2/halla.jpg?v=29') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.pkg-card[aria-pressed="true"] .pkg-name {
  color: #1e40af !important;
  font-weight: 600;
}

/* 선택된 코스의 날짜/픽업 정보 스타일 */
.pkg-card[aria-pressed="true"] .summary-item-date,
.pkg-card[aria-pressed="true"] .summary-item-pickup {
  color: var(--foreground);
}

/* Summary item 코스별 색상 */
.summary-item {
  /* 왼쪽 막대바 - 사용자 요청으로 숨김 처리 */
  /* border-left: 4px solid transparent; */
  /* padding-left: 12px; */
  margin: 4px 0; /* 여백 줄임: 8px → 4px */
  padding: 12px; /* 내부 여백 조정 */
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.05); /* 경계선 추가 */
}



/* East course - 왼쪽 요일 표시와 동일한 색상 적용 */
.summary-item[data-course="E"] {
  /* border-left-color: var(--pkgA); */
  background: linear-gradient(90deg, rgba(241, 118, 97, 0.1), rgba(241, 118, 97, 0.05));
}

/* West course - 왼쪽 요일 표시와 동일한 색상 적용 */
.summary-item[data-course="W"] {
  /* border-left-color: var(--pkgB); */
  background: linear-gradient(90deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
}

/* Jungmun course - 왼쪽 요일 표시와 동일한 색상 적용 */
.summary-item[data-course="J"] {
  /* border-left-color: var(--pkgC); */
  background: linear-gradient(90deg, rgba(111, 170, 18, 0.1), rgba(111, 170, 18, 0.05));
}

.summary-item:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 날짜 선택 시 에러/로딩 메시지 */
.date-error-message, .date-loading-message {
  margin: 12px 0;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: slideIn 0.3s ease-out;
}

.date-error-message {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px solid #fecaca;
  color: #991b1b;
}

.date-loading-message {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  color: #0369a1;
}

.error-icon, .loading-spinner {
  font-size: 20px;
  flex-shrink: 0;
}

.error-content, .loading-text {
  flex: 1;
}

.error-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.error-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.4;
}

.error-list li {
  margin-bottom: 4px;
}

.loading-text {
  font-weight: 500;
  font-size: 14px;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Person limit error styles */
.person-limit-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  background: linear-gradient(135deg, #fef2f2, #fef1f1);
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  animation: slideIn 0.3s ease-out;
}

.person-limit-error .error-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.person-limit-error .error-message {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* Person validation errors styles */
.person-validation-errors {
  padding: 16px;
  margin: 16px 0;
  background: linear-gradient(135deg, #fefdf2, #fef9f3);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  color: #ea580c;
  animation: slideIn 0.3s ease-out;
}

.person-validation-errors .error-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
}

.person-validation-errors .error-icon {
  font-size: 18px;
}

.person-validation-errors .error-list {
  margin: 12px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.person-validation-errors .error-list li {
  margin-bottom: 6px;
}

.person-validation-errors .error-suggestion {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(249, 115, 22, 0.1);
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
  color: #c2410c;
}

/* Counter button disabled states */
.counter button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  pointer-events: all; /* Allow hover to show tooltip */
}