:root {
  --bg: #fbf8ff;
  --ink: #382b4c;
  --muted: #8e82a0;
  --purple: #9476d9;
  --purple-deep: #7958be;
  --purple-pale: #f0e9ff;
  --yellow: #ffe5a5;
  --border: #eae1f4;
  --sun: #e78da6;
  --sat: #85a2d5;
  --shadow: 0 14px 34px rgba(115,86,155,.085);
}
* { box-sizing:border-box; }
html { color-scheme:light; }
body {
  margin:0;
  min-height:100vh;
  background:radial-gradient(ellipse 48% 39% at 4% 0%,#fff0cb 0%,transparent 78%),
    radial-gradient(ellipse 55% 55% at 98% 5%,#eddefd 0%,transparent 73%),
    linear-gradient(145deg,#fcfaff 0%,#faf5ff 54%,#fffaf0 100%);
  color:var(--ink);
  font:14px/1.5 'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
}
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #cbb2fc; outline-offset:3px; }
.hidden { display:none !important; }
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.page-shell { padding:21px clamp(12px,2.25vw,44px) 22px; width:100%; max-width:2200px; margin:auto; }
/* 초기에 좋아했던 노랑 + 보라 파스텔 테마를 유지한, 넓은 헤더 */
.site-header {
  position:relative;isolation:isolate;min-height:133px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:18px clamp(18px,2.1vw,40px);border-radius:29px;
  border:1px solid #e9dbf8;background:linear-gradient(106deg,#f1e5ff 0%,#f9f0ff 48%,#fff0cc 100%);
  box-shadow:var(--shadow);overflow:hidden;
}
.site-header::before {content:'';z-index:-1;position:absolute;right:7%;top:-100px;width:330px;height:300px;border:2px solid #ffffff72;border-radius:50%;pointer-events:none;}
.site-header::after {content:'✿';z-index:-1;position:absolute;left:45%;bottom:-30px;font-size:110px;color:#ffffff40;pointer-events:none;}
.brand { display:flex;align-items:center;gap:23px;min-width:0; flex-shrink:0; }
.brand-copy { display:flex;flex-direction:column;gap:3px;min-width:0; }
.brand h1 {margin:0;color:#6d4eb4;font-size:clamp(27px,2.4vw,43px);font-weight:950;letter-spacing:-2px;line-height:1.2;white-space:nowrap;text-shadow:0 2px 0 #ffffffa1;}
.brand-decoration {color:#eab65c;font-size:17px;letter-spacing:13px;font-weight:900;line-height:1.2;}
.brand-decoration span {color:#aa86dc;}
.avatar-button {
  flex:none;position:relative;width:94px;height:94px;display:grid;place-items:center;overflow:hidden;
  padding:0;border:4px solid #fffdfd;border-radius:26px;
  background:linear-gradient(146deg,#ffe5a9,#ffefc7 65%,#f2dbff);
  box-shadow:0 8px 20px #b69ab646,0 0 0 1px #efdfb7;
  transform:rotate(-3deg);transition:transform .15s;
}
.avatar-button:hover {transform:rotate(0deg) scale(1.025);}
.avatar-image {width:100%;height:100%;object-fit:cover;display:block;}
.avatar-placeholder {font-size:53px;line-height:1;filter:drop-shadow(0 4px 1px #ffc46676);}
.avatar-edit {position:absolute;bottom:0;right:0;color:#fff;background:#9975d5;font-weight:900;font-size:14px;display:grid;place-items:center;width:25px;height:25px;border-radius:11px 0 0 0;}
.header-right {display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0;}
.social-title-row {display:flex;align-items:center;justify-content:flex-end;gap:11px;min-height:21px;}
.social-title {font-size:12px;letter-spacing:.1px;font-weight:850;color:#896eb1;}
.social-title span {color:#e0a664;}
.links-edit-button {border:1px solid #e5d4f6;border-radius:999px;padding:4px 10px;background:#ffffffac;font-size:11px;font-weight:800;color:#8265ac;}
.links-edit-button:hover {background:white;}
.social-links {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;}
.social-pill {
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;min-width:91px;padding:8px 13px;border:1px solid #e7d9f2;border-radius:13px;
  color:#765e99;font-size:13px;font-weight:850;text-decoration:none;white-space:nowrap;
  background:#fffdfde8;box-shadow:0 5px 10px #7952a40d;transition:transform .15s,background .15s,border-color .15s;
}
a.social-pill:hover {transform:translateY(-2px);background:#fff;border-color:#bfa5e9;}
.social-pill .social-icon {color:#9a7bd5;font-size:17px;line-height:1.1;font-weight:950;}
.social-pill[data-social="chzzk"] .social-icon {color:#5d9c78;}
.social-pill[data-social="youtube"] .social-icon {color:#e78e94;}
.social-pill[data-social="instagram"] .social-icon {color:#b887d7;}
.social-pill[data-social="fancafe"] .social-icon {color:#d19c47;}
.social-pill[data-social="tiktok"] .social-icon {color:#b887d7;}
.social-pill.is-placeholder {background:#ffffff85;border-style:dashed;color:#9c8aad;cursor:default;}
.social-pill.is-placeholder .social-icon {opacity:.64;}
/* SNS 관리 팝업: 종류/표시 이름/주소, 삭제 및 순서 이동 */
.links-modal {width:min(100%,680px);}
.link-editor-list {display:flex;flex-direction:column;gap:10px;}
.link-editor-row {background:linear-gradient(115deg,#faf5ff,#fffaf0);border:1px solid #e9dcf5;border-radius:15px;padding:12px;}
.link-editor-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#7657a9;}
.link-row-actions {display:flex;align-items:center;gap:6px;}
.link-order-button,.link-remove-button,.link-add-button {border:1px solid #dfcff0;background:#fff;color:#795bb0;border-radius:9px;font-size:12px;font-weight:850;min-height:33px;padding:5px 11px;}
.link-remove-button {color:#b84f70;border-color:#f0cfdb;background:#fff5f6;}
.link-order-button:hover,.link-add-button:hover {background:#f5ecff;}
.link-remove-button:hover {background:#ffe4e9;}
.link-row-actions button:disabled,.link-add-button:disabled {opacity:.4;cursor:not-allowed;}
.link-editor-fields {display:grid;grid-template-columns:minmax(112px,.85fr) minmax(126px,1fr);gap:9px;}
.link-editor-fields label {min-width:0;}
.link-url-field {grid-column:1/-1;}
.link-add-button {width:100%;border-style:dashed;background:#fffaf0;color:#8260b2;font-size:13px;min-height:39px;}
.empty-links-hint {padding:22px 10px;text-align:center;margin:0;color:#9b86b8;border:1px dashed #ded0f0;border-radius:12px;background:#fffcff;}
@media(min-width:620px){.link-editor-fields {grid-template-columns:175px 1fr 2fr;}.link-url-field {grid-column:auto;}}
/* 달력 영역은 사이드바 없이 전체 화면을 사용 */
/* 상단 헤더는 그대로 유지하면서 월간 캘린더 양옆에만 은은한 여백 */
.calendar-main {width:calc(100% - clamp(32px,4.2vw,84px));max-width:1640px;margin-inline:auto;}
.calendar-toolbar {display:flex;align-items:center;justify-content:space-between;gap:13px;margin:18px 0 17px;min-height:52px;}
.month-control {display:flex;align-items:center;gap:12px;}
.month-title {color:#644893;font-size:26px;font-weight:950;white-space:nowrap;min-width:156px;text-align:center;letter-spacing:-1px;}
.nav-button,.today-button,.action-button {border:1px solid #e5d9f3;background:#fffefa;color:#7b5da8;box-shadow:0 2px 7px #9875c315;transition:transform .15s,background .15s;}
.nav-button:hover,.today-button:hover,.action-button:hover {background:#f5edff;}
.nav-button:active,.today-button:active,.action-button:active {transform:scale(.97);}
.nav-button {width:43px;height:43px;display:grid;place-items:center;border-radius:14px;font-size:31px;line-height:0;padding:0 0 5px;font-weight:500;}
.today-button {font-size:13px;font-weight:850;padding:10px 14px;height:41px;border-radius:12px;margin-left:5px;white-space:nowrap;}
.header-actions {display:flex;align-items:center;gap:8px;}
.action-button {padding:10px 14px;min-height:41px;border-radius:12px;font-weight:800;white-space:nowrap;}
.action-button.primary,.submit-button {color:#fff;background:#9878d9;border-color:#9878d9;box-shadow:0 5px 13px #9876d235;}
.action-button.primary:hover,.submit-button:hover {background:#8061be;}
.connection-notice {padding:11px 16px;background:#fff9e8;border:1px solid #f0dba6;border-radius:12px;margin-bottom:12px;color:#927140;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.connection-notice button {background:#fff;border:1px solid #edd7aa;border-radius:8px;padding:5px 10px;}
.calendar-section {width:100%;}
.calendar-scroll {width:100%;}
.weekdays {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px;padding:5px 0 12px;}
.weekdays div {text-align:center;font-size:14px;font-weight:900;color:#8e7fa2;padding:2px 0;}
.weekdays div:first-child {color:#e78296;}
.weekdays div:last-child {color:#80a0cf;}
.calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px;align-items:stretch;}
/* 일반 화면 / 모바일의 기본 날짜 칸. FHD에서는 아래 전체 달 보기 규칙으로 자동 축소합니다. */
.day-cell {
  position:relative;min-width:0;min-height:clamp(156px,20vh,218px);display:flex;flex-direction:column;
  text-align:left;padding:12px 10px 10px;overflow:hidden;border-radius:17px;
  border:1px solid #e9dff2;background:#fffeff;box-shadow:0 3px 9px #9875b016;
  transition:box-shadow .15s,border-color .15s,transform .15s;
}
.day-cell:hover {box-shadow:0 8px 23px #a585b62c;border-color:#bea7df;transform:translateY(-1px);}
.day-cell.selected {border-color:#ad90dc;box-shadow:inset 0 0 0 1px #ad90dc,0 4px 14px #9875b016;}
.day-cell.other-month {background:#f6f1fa;opacity:.57;}
.day-number {color:#766986;font-size:14px;font-weight:750;line-height:27px;min-width:27px;height:27px;display:inline-flex;align-self:flex-start;justify-content:center;align-items:center;border-radius:50%;margin:-4px 0 7px;}
.day-cell.sunday .day-number {color:#dc8296;}
.day-cell.saturday .day-number {color:#82a1d4;}
.day-cell.today .day-number {background:#9470d9;color:#fff;font-weight:900;box-shadow:0 2px 7px #a58ad545;}
.day-events {display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;}
.calendar-event {display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px;border-radius:9px;font-size:12px;font-weight:720;line-height:1.35;color:#66577d;text-align:left;border:1px solid #e8dcf5;background:#f5efff;box-shadow:0 1px 3px #9665b90e;}
.event-emoji {flex:none;font-size:12px;}
.calendar-event-text {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.calendar-event.event-live {background:#f3eefe;border-color:#e4d6fa;color:#6d5898;}
.calendar-event.event-collab {background:#fff5df;border-color:#f5e1b7;color:#8c704c;}
.calendar-event.event-special {background:#ffeff6;border-color:#f5d7e5;color:#a06b82;}
.calendar-event.event-off {background:#f2e8f9;border-color:#e3d1f1;color:#8a6ba7;}
.more-events {color:#977db6;font-size:12px;font-weight:800;padding:2px 7px;}
.day-cell.off-day {background:linear-gradient(150deg,#f0e3ff 0%,#f9e8f4 100%);border-color:#e7d5f4;}
.day-cell.off-day .day-number {color:#9e7bb6;}
.day-cell.off-day.today .day-number {background:#9674d8;color:#fff;}
.day-cell.off-day .day-events {flex:1;justify-content:center;align-items:center;margin-top:-32px;pointer-events:none;}
.off-day-message {font-size:clamp(19px,1.65vw,30px);font-weight:950;letter-spacing:2px;color:#9770bd;text-shadow:0 2px 0 #fff8;}
.day-cell.off-day::after {content:'✿';position:absolute;bottom:11px;right:15px;font-size:27px;color:#e3c5f8;pointer-events:none;}
.bottom-caption {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 2px 8px;font-size:11px;color:#968aa4;}
/* 입력/상세 팝업도 첫 디자인과 같은 따뜻한 파스텔 */
.modal-backdrop {position:fixed;inset:0;background:#30224487;display:flex;align-items:center;justify-content:center;padding:18px;z-index:30;}
.modal {position:relative;width:min(100%,510px);max-height:min(90vh,840px);overflow-y:auto;padding:29px 29px 27px;border-radius:23px;border:1px solid #e8d9f5;background:linear-gradient(150deg,#fffefd,#fdfaff);box-shadow:0 26px 80px #39204c4b;}
.event-modal {width:min(100%,600px);}
.modal h2 {font-size:24px;font-weight:950;color:#6c51a0;margin:2px 0 20px;letter-spacing:-1px;}
.modal-kicker {font-size:11px;letter-spacing:1.6px;font-weight:900;color:#a68bcf;margin-bottom:6px;}
.modal-close {border:0;position:absolute;top:13px;right:13px;width:35px;height:35px;border-radius:10px;background:#f4ecff;color:#866aaa;font-size:24px;line-height:1;}
.modal-description {color:#8a7b9b;font-size:13px;margin:-8px 0 20px;}
.modal form {display:flex;flex-direction:column;gap:12px;}
.modal form label {display:flex;flex-direction:column;gap:6px;color:#756689;font-size:12px;font-weight:800;}
.modal input:not([type=file]):not([type=hidden]),.modal select,.modal textarea {border:1px solid #e4d8f0;border-radius:11px;background:#fff;padding:10px 12px;min-width:0;color:#433652;}
.modal input[type=file] {border:1px dashed #d9cbe9;border-radius:9px;padding:10px;width:100%;color:#857591;}
.modal textarea {resize:vertical;}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.submit-button {border:1px solid #9878d9;padding:11px 16px;border-radius:11px;font-weight:850;min-height:42px;}
.modal-actions {display:flex;gap:10px;justify-content:flex-end;align-items:center;}
.modal-actions .submit-button {flex:1;}
.delete-button {padding:10px 12px;border:1px solid #f1cbd1;background:#fff0f5;color:#bb4b63;border-radius:9px;}
.form-error {color:#c53f52;font-size:12px;font-weight:700;}
.field-tip {margin:-5px 0 0;color:#9889a2;font-size:11px;}
.image-preview-row {display:none;align-items:flex-start;gap:10px;}
.image-preview-row.visible {display:flex;}
.image-preview-row img {max-width:220px;max-height:125px;border-radius:9px;object-fit:cover;}
.text-danger {border:0;background:transparent;color:#bc4b67;text-decoration:underline;padding:4px;}
.day-heading {display:flex;gap:8px;align-items:baseline;}
.day-heading span:last-child {font-size:14px;font-weight:700;color:#9688a6;}
.detail-events {display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.detail-item {display:flex;flex-direction:column;gap:7px;padding:16px;background:#f9f5ff;border:1px solid #e9dbf6;border-radius:13px;}
.detail-item .event-type {align-self:flex-start;color:#9472c4;font-size:12px;font-weight:850;}
.detail-item b {font-size:16px;}
.detail-item .time {font-size:12px;color:#8d7da2;}
.detail-item .description {font-size:13px;margin:2px 0;color:#71657d;white-space:pre-wrap;}
.detail-item img {max-width:100%;max-height:280px;object-fit:contain;align-self:flex-start;border-radius:9px;}
.detail-edit {align-self:flex-end;border:1px solid #d9c7f0;border-radius:8px;padding:7px 11px;color:#866ac0;background:white;}
.empty-day {font-size:14px;color:#9586a6;text-align:center;padding:42px 15px;background:#faf5ff;border-radius:13px;}
.empty-cat {display:block;color:#9276cf;font-size:28px;margin-bottom:7px;}
.day-modal > .submit-button {width:100%;}
.toast {position:fixed;z-index:50;bottom:28px;left:50%;transform:translateX(-50%);border-radius:12px;background:#46315b;color:white;padding:12px 18px;box-shadow:0 10px 35px #2e214652;font-size:13px;max-width:calc(100vw - 40px);text-align:center;}
@media(max-width:1400px) {
  .site-header {flex-wrap:wrap;}
  .header-right {flex:1;}
  .brand h1 {font-size:clamp(25px,2.55vw,38px);}
  .social-links {gap:6px;}
  .social-pill {padding:8px 10px;min-width:78px;}
}
@media(max-width:980px) {
  .page-shell {padding:13px 16px 20px;}
  .site-header {gap:15px;padding:17px 21px;}
  .brand {gap:15px;}
  .brand h1 {font-size:27px;}
  .avatar-button {width:76px;height:76px;border-radius:23px;}
  .avatar-placeholder {font-size:43px;}
  .header-right {flex:0 0 100%;width:100%;align-items:flex-start;}
  .social-links {justify-content:flex-start;}
  .social-title-row {justify-content:flex-start;}
  .calendar-grid,.weekdays {gap:7px;}
  .day-cell {min-height:164px;padding:8px 5px;}
  .calendar-event {font-size:11px;padding:5px 4px;gap:3px;}
  .month-title {font-size:20px;min-width:124px;}
}
@media(max-width:600px) {
  /* 모바일에서는 달력이 가로 스크롤되므로 추가 여백 없이 유지 */
  .calendar-main {width:100%;}
  .page-shell {padding:10px 10px 15px;}
  .site-header {border-radius:22px;padding:14px;gap:12px;}
  .brand h1 {font-size:23px;letter-spacing:-1px;white-space:normal;}
  .brand {gap:13px;}
  .avatar-button {width:70px;height:70px;border-radius:19px;}
  .avatar-placeholder {font-size:38px;}
  .brand-decoration {font-size:13px;letter-spacing:8px;}
  .social-title {font-size:11px;}
  .social-pill {font-size:11px;min-height:36px;min-width:unset;padding:6px 9px;gap:5px;border-radius:11px;}
  .social-pill .social-icon {font-size:14px;}
  .calendar-toolbar {flex-wrap:wrap;gap:9px;margin:12px 0 14px;}
  .month-control {gap:6px;}
  .nav-button {height:33px;width:34px;font-size:26px;border-radius:10px;}
  .today-button {height:33px;font-size:11px;margin-left:3px;padding:7px 9px;}
  .month-title {min-width:107px;font-size:18px;}
  .header-actions {width:100%;justify-content:flex-end;}
  .action-button {padding:7px 10px;min-height:33px;font-size:11px;}
  .calendar-scroll {overflow-x:auto;padding-bottom:6px;scrollbar-color:#d7c4f2 transparent;}
  .weekdays,.calendar-grid {min-width:760px;}
  .calendar-grid,.weekdays {gap:6px;}
  .day-cell {min-height:134px;border-radius:11px;}
  .day-number {font-size:12px;line-height:22px;height:22px;min-width:22px;}
  .calendar-event {font-size:10px;}
  .off-day-message {font-size:17px;}
  .modal {padding:23px 18px 20px;}
  .form-row {grid-template-columns:1fr;}
  .bottom-caption {flex-wrap:wrap;}
}

/* FHD 전체 달 한눈에 보기 (5~6주 모두 표시)
   화면 높이 안에 헤더/요일/월간 달력을 배치하고, 주 수에 따라 날짜 칸을 나눕니다.
   작은 화면/모바일은 기존 자연 스크롤 레이아웃을 유지합니다. */
@media (min-width:981px) and (min-height:800px) {
  .page-shell {
    height:100vh; height:100dvh; min-height:0; overflow:hidden;
    display:flex; flex-direction:column; padding-bottom:10px;
  }
  .site-header {flex-shrink:0;}
  .calendar-main {
    flex:1; min-height:0; display:flex; flex-direction:column;
  }
  .calendar-toolbar {
    flex-shrink:0; margin-top:13px; margin-bottom:9px; min-height:45px;
  }
  .calendar-section {flex:1;min-height:0;display:flex;flex-direction:column;}
  .calendar-scroll {flex:1;min-height:0;display:flex;flex-direction:column;}
  .weekdays {flex-shrink:0;gap:9px;padding:1px 0 7px;}
  .calendar-grid {
    flex:1; min-height:0; gap:9px;
    grid-template-rows:repeat(var(--week-rows,5), minmax(0,1fr));
  }
  .day-cell {min-height:0;height:100%;padding:7px 9px 6px;border-radius:14px;}
  .day-number {
    font-size:12px;line-height:23px;min-width:23px;height:23px;
    margin:-2px 0 3px;
  }
  .day-events {gap:4px;overflow:hidden;min-height:0;}
  .calendar-event {padding:4px 6px;font-size:11px;line-height:1.25;}
  .calendar-event .event-emoji {font-size:11px;}
  .more-events {font-size:10px;padding:0 5px;}
  .day-cell.off-day .day-events {margin-top:-17px;}
  .off-day-message {font-size:clamp(17px,1.4vw,24px);}
  .bottom-caption {flex-shrink:0;padding:5px 2px 0;font-size:10px;}
}
/* 브라우저 상단 메뉴 등으로 화면 높이가 짧은 경우에도 월 전체 표시를 우선합니다. */
@media (min-width:981px) and (min-height:800px) and (max-height:960px) {
  .page-shell {padding-top:12px;padding-bottom:6px;}
  .site-header {min-height:112px;padding-top:10px;padding-bottom:10px;}
  .avatar-button {width:82px;height:82px;}
  .brand h1 {font-size:clamp(27px,2.2vw,38px);}
  .calendar-toolbar {margin-top:8px;margin-bottom:6px;min-height:40px;}
  .month-title {font-size:23px;}
  .nav-button {width:37px;height:37px;}
  .today-button,.action-button {min-height:36px;height:auto;padding-top:7px;padding-bottom:7px;}
  .calendar-grid,.weekdays {gap:7px;}
  .day-cell {padding:5px 7px;}
  .day-number {height:19px;line-height:19px;min-width:19px;margin:0 0 2px;}
  .calendar-event {padding:2px 5px;font-size:10px;}
  .bottom-caption {padding-top:3px;}
}

/* 달력 확대/축소: 기본 100%에서는 기존 '한 달 전체 보기' 레이아웃을 그대로 유지 */
.calendar-zoom-controls {
  display:flex;align-items:center;gap:5px;padding:4px 5px 4px 9px;
  border:1px solid #e8d9f5;border-radius:13px;background:#fffafefa;
  box-shadow:0 2px 7px #9875c312;white-space:nowrap;
}
.zoom-title {margin-right:3px;font-size:12px;font-weight:850;color:#8c72b6;}
.zoom-button,.zoom-reset {
  display:grid;place-items:center;height:33px;border-radius:9px;
  border:1px solid #e8d8f5;background:#f6edff;color:#805eaf;
  font-weight:850;transition:background .16s,transform .16s;
}
.zoom-button {width:33px;padding:0;font-size:22px;line-height:1;}
.zoom-reset {min-width:54px;padding:0 7px;background:#fffdf6;font-size:12px;font-variant-numeric:tabular-nums;}
.zoom-button:not(:disabled):hover,.zoom-reset:hover {background:#eadcff;}
.zoom-button:not(:disabled):active,.zoom-reset:active {transform:scale(.96);}
.zoom-button:disabled {opacity:.36;cursor:not-allowed;}
@media(max-width:1400px) {
  .calendar-toolbar {flex-wrap:wrap;}
  .header-actions {flex-wrap:wrap;justify-content:flex-end;}
}
@media(max-width:600px) {
  .calendar-zoom-controls {margin-right:auto;padding:3px 4px 3px 7px;gap:3px;}
  .zoom-title {font-size:11px;}
  .zoom-button,.zoom-reset {height:29px;}
  .zoom-button {width:29px;font-size:20px;}
  .zoom-reset {min-width:46px;font-size:11px;}
}
/* +를 누르면 칸 높이와 내용 글씨를 함께 확대. 폭/색/상단 배치 유지. */
html.calendar-zoomed .day-cell {
  min-height:0;height:var(--zoomed-row-height);padding:calc(7px * var(--zoom-multiplier,1)) calc(9px * var(--zoom-multiplier,1));
}
html.calendar-zoomed .day-number {
  font-size:calc(12px * var(--zoom-multiplier,1));
  min-width:calc(23px * var(--zoom-multiplier,1));
  height:calc(23px * var(--zoom-multiplier,1));
  line-height:1.3;
  margin-bottom:calc(4px * var(--zoom-multiplier,1));
}
html.calendar-zoomed .day-events {gap:calc(5px * var(--zoom-multiplier,1));overflow:hidden;}
html.calendar-zoomed .calendar-event {
  font-size:calc(11px * var(--zoom-multiplier,1));
  padding:calc(4px * var(--zoom-multiplier,1)) calc(6px * var(--zoom-multiplier,1));
  gap:calc(5px * var(--zoom-multiplier,1));
}
html.calendar-zoomed .calendar-event .event-emoji {font-size:calc(11px * var(--zoom-multiplier,1));}
html.calendar-zoomed .more-events {font-size:calc(10px * var(--zoom-multiplier,1));}
html.calendar-zoomed .off-day-message {font-size:clamp(22px,2vw,36px);}
html.calendar-zoomed .day-cell.off-day .day-events {margin-top:calc(-17px * var(--zoom-multiplier,1));}
@media(min-width:981px) and (min-height:800px) {
  html.calendar-zoomed .page-shell {height:auto;min-height:100vh;min-height:100dvh;overflow:visible;}
  html.calendar-zoomed .calendar-main,
  html.calendar-zoomed .calendar-section,
  html.calendar-zoomed .calendar-scroll {flex:none;min-height:unset;}
  html.calendar-zoomed .calendar-grid {
    flex:none;grid-template-rows:repeat(var(--week-rows,5),var(--zoomed-row-height));
  }
}
@media(max-width:980px), (max-height:799px) {
  html.calendar-zoomed .calendar-grid {grid-template-rows:repeat(var(--week-rows,5),var(--zoomed-row-height));}
}

/* 화면 너비 안에서 확대: 좌우 여백을 줄이고 7개 요일을 모두 보여줍니다. */
@media (min-width:981px) {
  html.calendar-zoomed .calendar-main {
    width:var(--zoomed-calendar-width);
    max-width:none;
    margin-inline:0;
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
  html.calendar-zoomed .calendar-scroll {
    overflow-x:visible;
    overflow-y:visible;
    padding-bottom:0;
  }
  html.calendar-zoomed .calendar-grid,
  html.calendar-zoomed .weekdays {
    width:100%;
    min-width:0;
    max-width:100%;
  }
}
html.calendar-zoomed .calendar-grid {
  column-gap:var(--zoomed-grid-gap);
  row-gap:var(--zoomed-grid-gap);
}
html.calendar-zoomed .weekdays {
  gap:var(--zoomed-weekday-gap);
  padding-bottom:calc(7px * var(--zoom-multiplier));
}
html.calendar-zoomed .weekdays div {
  font-size:calc(14px * var(--zoom-multiplier));
}
html.calendar-zoomed .day-cell {border-radius:calc(14px * var(--zoom-multiplier));}
html.calendar-zoomed .calendar-event {border-radius:calc(9px * var(--zoom-multiplier));}
@media (min-width:981px) and (min-height:800px) {
  html.calendar-zoomed .calendar-scroll {display:block;min-height:auto;}
}
@media (max-width:980px) {
  /* 작은 화면에는 기존 가로 스크롤 방식이 필요합니다. */
  html.calendar-zoomed .calendar-scroll {overflow-x:auto;}
  html.calendar-zoomed .calendar-grid,
  html.calendar-zoomed .weekdays {
    width:var(--zoomed-calendar-width);
    min-width:var(--zoomed-calendar-width);
    max-width:none;
  }
}

/* 대한민국 공휴일: 방송 및 휴방 일정과 분리된 파스텔 노랑 배지 */
.holiday-toggle {border:1px solid #e4d4a5;background:#fff6d9;color:#94713d;border-radius:13px;height:40px;padding:0 13px;white-space:nowrap;font-size:12px;font-weight:850;}
.holiday-toggle span {font-size:11px;color:#a38a5d;margin-left:2px;}
.holiday-toggle[aria-pressed="false"] {background:#f8f5fb;border-color:#e7dff0;color:#9c92a5;}
.holiday-tag {display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;align-self:stretch;
  background:#fff2c7;border:1px solid #f5dfaa;color:#91622f;border-radius:7px;padding:2px 6px;margin:0 0 5px;
  font-size:11px;font-weight:850;line-height:1.35;text-align:left;}
.day-cell.holiday .day-number {color:#d2828a;}
.holiday-detail {background:#fff5d9;border:1px solid #f1dcad;color:#916b34;padding:10px 13px;border-radius:11px;font-weight:800;font-size:13px;margin:-6px 0 15px;}
html.calendar-zoomed .holiday-tag {font-size:calc(10px * var(--zoom-multiplier,1));padding:calc(2px * var(--zoom-multiplier,1)) calc(6px * var(--zoom-multiplier,1));margin-bottom:calc(4px * var(--zoom-multiplier,1));}
@media(max-width:980px) {.holiday-toggle {height:35px;padding:0 10px;font-size:11px;}}