/* health-appointments.css */

.page-health-appointments .ha-wrap{padding:16px;}

.ha-hero{padding:18px;border-radius:22px;}
.ha-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.ha-badge{display:inline-block;font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#1d4ed8;}
.ha-title{margin:10px 0 6px;font-size:22px;font-weight:900;color:#0f172a;}
.ha-sub{color:#475569;font-size:14px;line-height:1.4}

.ha-actions{display:flex;gap:10px;align-items:center}
.ha-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-weight:800;text-decoration:none}
.ha-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb}

.ha-cal{margin-top:14px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:12px}
.ha-cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ha-cal-title{font-weight:900;color:#0f172a}
.ha-cal-nav{padding:8px 10px;border-radius:12px;background:#f1f5f9;color:#0f172a;text-decoration:none;font-weight:900}

.ha-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ha-cal-w{font-size:12px;font-weight:900;color:#64748b;text-align:center;padding:6px 0}
.ha-cal-cell{min-height:68px;border:1px solid #e2e8f0;border-radius:14px;padding:8px;background:#fff;position:relative}
.ha-cal-cell.is-empty{border-style:dashed;background:#f8fafc}
.ha-cal-cell.is-today{outline:2px solid #2563eb;outline-offset:0}
.ha-cal-day{font-weight:900;color:#0f172a;font-size:13px}
.ha-cal-dot{margin-top:6px;font-size:12px;font-weight:800;color:#2563eb;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px;padding:6px 8px;line-height:1.2}

.ha-add,.ha-list{margin-top:14px;padding:16px;border-radius:22px}
.ha-sec-title{margin:0 0 10px;font-size:16px;font-weight:900;color:#0f172a}
.ha-sec-sub{color:#64748b;font-size:12px;font-weight:800}

.ha-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ha-row{display:flex;flex-direction:column;gap:6px}
.ha-row label{font-weight:900;font-size:12px;color:#334155}
.ha-row input{padding:10px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#fff}
.ha-row:nth-child(3), .ha-row:nth-child(4), .ha-row:nth-child(5), .ha-row:nth-child(6){grid-column:1/-1}
.ha-submit{padding:12px 14px;border-radius:14px;border:0;background:#2563eb;color:#fff;font-weight:900;cursor:pointer}

.ha-empty{padding:14px;border:1px dashed #cbd5e1;background:#f8fafc;border-radius:16px;color:#475569;font-weight:800}

.ha-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ha-item{display:flex;gap:12px;align-items:flex-start;border:1px solid #e2e8f0;background:#fff;border-radius:18px;padding:12px}
.ha-item-dt{width:110px;flex:0 0 110px;text-align:center;background:#f1f5f9;border-radius:16px;padding:10px 8px}
.ha-item-date{font-weight:900;color:#0f172a;font-size:12px}
.ha-item-time{margin-top:4px;font-weight:900;color:#2563eb;font-size:12px}
.ha-item-body{flex:1;min-width:0}
.ha-item-title{font-weight:900;color:#0f172a;margin-bottom:6px}
.ha-item-meta{color:#475569;font-weight:800;font-size:12px;margin-bottom:6px}
.ha-item-note{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:8px 10px;color:#334155;font-size:12px;line-height:1.35}

.ha-del{border:1px solid #fee2e2;background:#fff;color:#ef4444;font-weight:900;border-radius:12px;padding:8px 10px;cursor:pointer}

/* ===== Desktop 2-column layout ===== */
@media (min-width: 980px){
  .page-health-appointments .ha-wrap{
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:16px;
    align-items:start;
  }

  /* 상단 카드(달력) 왼쪽 전체 */
  .ha-hero{ grid-column: 1 / 2; }

  /* 예약추가 + 목록은 오른쪽 */
  .ha-add{ grid-column: 2 / 3; margin-top:0; }
  .ha-list{ grid-column: 2 / 3; margin-top:0; }

  /* 달력 카드 높이를 너무 길게 만들지 않기 */
  .ha-cal-cell{ min-height:56px; padding:6px; }
  .ha-cal-dot{ padding:4px 6px; font-size:11px; }
  .ha-cal-w{ font-size:11px; padding:4px 0; }
  .ha-cal{ padding:10px; }
}

/* ===== form compact ===== */
.ha-form{
  grid-template-columns:1fr;
}
.ha-row:nth-child(3),
.ha-row:nth-child(4),
.ha-row:nth-child(5),
.ha-row:nth-child(6){
  grid-column:auto;
}

/* =========================================================
 * PATCH: 병원/의원 예약 페이지 - 2컬럼 + 컴팩트
 * - 데스크톱(>=980px): 좌 달력 / 우 예약추가+다가오는예약
 * - 모바일: 기존 1컬럼 유지
 * ========================================================= */

@media (min-width: 980px){
  /* 전체 2컬럼 */
  .page-health-appointments .ha-wrap{
    display:grid;
    grid-template-columns: 1.55fr 1fr;
    gap:16px;
    align-items:start;
  }

  /* 달력 카드(상단)는 왼쪽 */
  .page-health-appointments .ha-hero{
    grid-column: 1 / 2;
    margin-top:0;
  }

  /* 예약추가/목록은 오른쪽 */
  .page-health-appointments .ha-add{
    grid-column: 2 / 3;
    margin-top:0;
  }
  .page-health-appointments .ha-list{
    grid-column: 2 / 3;
    margin-top:0;
  }

  /* 달력 컴팩트 */
  .page-health-appointments .ha-cal{ padding:10px; }
  .page-health-appointments .ha-cal-grid{ gap:6px; }
  .page-health-appointments .ha-cal-cell{ min-height:56px; padding:6px; border-radius:14px; }
  .page-health-appointments .ha-cal-day{ font-size:12px; }
  .page-health-appointments .ha-cal-dot{ padding:4px 6px; font-size:11px; border-radius:12px; }
  .page-health-appointments .ha-cal-w{ font-size:11px; padding:4px 0; }

  /* 달력 상단 네비도 살짝 컴팩트 */
  .page-health-appointments .ha-cal-nav{ padding:6px 10px; border-radius:12px; }
  .page-health-appointments .ha-cal-title{ font-size:14px; }
}

/* 폼 컴팩트: 기본 1열로(세로 공간 절약) */
.page-health-appointments .ha-form{
  grid-template-columns: 1fr;
}
.page-health-appointments .ha-row:nth-child(3),
.page-health-appointments .ha-row:nth-child(4),
.page-health-appointments .ha-row:nth-child(5),
.page-health-appointments .ha-row:nth-child(6){
  grid-column:auto;
}

/* 오른쪽 카드들의 내부 패딩 살짝 줄여서 더 한 화면에 들어오게 */
.page-health-appointments .ha-add,
.page-health-appointments .ha-list{
  padding:14px;
}

/* ===== 옵션 더보기 버튼 ===== */
.ha-more-btn{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
}

.ha-more-btn:hover{
  background:#eef2f7;
}

/* 옵션 영역 */
.ha-more{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:4px;
}

/* 달력 날짜 클릭 UX */
.ha-cal-cell[data-date]{
  cursor:pointer;
}
.ha-cal-cell[data-date]:hover{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:0;
}
.ha-cal-cell[data-date]:focus{
  outline:2px solid rgba(37,99,235,.55);
}