@charset "utf-8";

/* gt_schedule_month3
   CSS 를 고치면 --gtsm3-ver 와 gtsm3.lib.php 의 GTSM3_CSS_VER 를 함께 올린다
   색·크기는 최고관리자 [스타일 설정] 이 루트에 --gtsm3-* 변수로 내려보낸다. 비어 있으면 아래 기본값
   표시    mode_list(이미지+제목) · mode_thumbs(이미지만, 제목은 마우스 올리면) · mode_text(제목만) — PC 칸 안에만 적용 */

.gtsm3 {
    --gtsm3-ver: 8;
    position: relative; margin-bottom: 20px; background: #fff;
    container-type: inline-size; container-name: gtsm3;
}
.gtsm3.is_loading .gtsm3_body { opacity: .5; transition: opacity .2s; }

/* 화면에는 숨기고 검색엔진·스크린리더에는 보인다 */
.gtsm3 .gtsm3_sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.gtsm3 a:focus-visible,
.gtsm3 button:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gtsm3-c1, #FF5A5A); }

/* ===== 제목 줄 — [빈칸 | 연.월 | 버튼] 세 칸 격자 ===== */
.gtsm3 .gtsm3_title { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 12px; margin: 0; padding: 0 20px; border: 0; font-size: inherit; line-height: 1.2; text-align: center; color: inherit; }
.gtsm3 .gtsm3_month { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; }
.gtsm3 .gtsm3_nav { display: inline-flex; align-items: center; text-decoration: none; }
.gtsm3 .gtsm3_mbtn { display: inline-flex; padding: 5px; color: var(--gtsm3-arrow, #000); border: 1px solid var(--gtsm3-arrow-bd, #DDD); border-radius: 20px; transition: color .2s, border-color .2s; }
.gtsm3 .gtsm3_mbtn:hover { color: var(--gtsm3-c1, #FF5A5A); border-color: var(--gtsm3-c1, #FF5A5A); }
.gtsm3 .gtsm3_mbtn svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.gtsm3 .gtsm3_mbtn_prev { margin-right: 14px; }
.gtsm3 .gtsm3_mbtn_next { margin-left: 14px; }
.gtsm3 .gtsm3_period { display: block; padding: 4px 0; font-size: var(--gtsm3-title-size, 64px); font-weight: var(--gtsm3-title-weight, inherit); font-family: 'font-R', sans-serif !important; letter-spacing: var(--gtsm3-title-ls, -1px); line-height: 1.15; white-space: nowrap; background: linear-gradient(to right, var(--gtsm3-title-c1, #FF5A5A), var(--gtsm3-title-c2, #7928ca)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.gtsm3 .gtsm3_more { grid-column: 3; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; line-height: 1; }
.gtsm3 .gtsm3_morebtn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--gtsm3-btn-bd, #DDD); border-radius: 15px; background: var(--gtsm3-btn-bg, #fff); color: var(--gtsm3-btn-text, #FF5A5A); font-size: var(--gtsm3-btn-size, 13px); font-weight: bold; white-space: nowrap; text-decoration: none; transition: border-color .2s; }
.gtsm3 .gtsm3_morebtn:hover { border-color: var(--gtsm3-btn-hover, #FF5A5A); }
.gtsm3 .gtsm3_morebtn[hidden] { display: none !important; }
.gtsm3 .gtsm3_nowbtn.is_on { border-color: transparent; background: linear-gradient(135deg, var(--gtsm3-c1, #FF5A5A), var(--gtsm3-c2, #7928CA)); color: #fff; }

/* '한눈에 보기' 바로가기 버튼 — 다른 버튼과 구분되는 색. 목록은 상단 고정 메뉴에 가리지 않게 */
.gtsm3 .gtsm3_jumpbtn { gap: 5px; border-color: transparent; background: var(--gtsm3-jump-bg, #222230); color: var(--gtsm3-jump-text, #fff); }
.gtsm3 .gtsm3_jumpbtn:hover { border-color: transparent; opacity: .88; }
.gtsm3 .gtsm3_jumpbtn svg { flex-shrink: 0; fill: currentColor; }
.gtsm3 .gtsm3_all { scroll-margin-top: 100px; }

.gtsm3 .gtsm3_body { padding-top: 20px; }

/* ===== 요일 머리 ===== */
.gtsm3 .gtsm3_head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid #222; border-bottom: 1px solid #C3C3C3; }
.gtsm3 .gtsm3_head span { padding: 14px 0; text-align: center; font-weight: bold; line-height: 1; }
.gtsm3 .gtsm3_head .is_sun { color: var(--gtsm3-sun, #F00); }
.gtsm3 .gtsm3_head .is_sat { color: var(--gtsm3-sat, #00A3FF); }

/* ===== 달력 칸 ===== */
.gtsm3 .gtsm3_grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--gtsm3-line, #E2E2E2); }
.gtsm3 .gtsm3_cell { position: relative; min-width: 0; min-height: var(--gtsm3-cell-h, 120px); padding: 10px 8px; background: var(--gtsm3-cell-bg, #fff); border-right: 1px solid var(--gtsm3-line, #E2E2E2); border-bottom: 1px solid var(--gtsm3-line, #E2E2E2); }
.gtsm3 .gtsm3_cell.is_blank { background: #FAFAFA; }
.gtsm3 .gtsm3_cell.is_today { background: #FFF8F8; outline: 2px dotted var(--gtsm3-c1, #FF5A5A); outline-offset: -2px; }

.gtsm3 .gtsm3_date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; font-size: inherit; font-weight: normal; line-height: 1.3; }
.gtsm3 .gtsm3_d { font-size: var(--gtsm3-date-size, 18px); font-family: 'font-R', sans-serif; color: #222; }
.gtsm3 .is_sat .gtsm3_d { color: var(--gtsm3-sat, #00A3FF); }
.gtsm3 .is_sun .gtsm3_d,
.gtsm3 .is_off .gtsm3_d { color: var(--gtsm3-sun, #F00); }   /* 토요일 공휴일은 빨강 */
.gtsm3 .gtsm3_today { padding: 1px 6px; border-radius: 8px; background: var(--gtsm3-c1, #FF5A5A); color: #fff; font-size: 11px; font-weight: bold; }
.gtsm3 .gtsm3_mk { font-size: 12px; letter-spacing: -.5px; }
.gtsm3 .gtsm3_lunar { font-size: 12px; color: #888; }

/* ===== 일정 상자 (이미지 + 제목) ===== */
.gtsm3 .gtsm3_list { margin: 8px 0 0; padding: 0; list-style: none; }
.gtsm3 .gtsm3_list li { margin: 0 0 var(--gtsm3-box-gap, 3px); padding: 0; }
.gtsm3 .gtsm3_box { position: relative; display: flex; align-items: flex-start; gap: 8px; min-height: var(--gtsm3-box-h, 0); padding: var(--gtsm3-box-pad, 6px) calc(var(--gtsm3-box-pad, 6px) + 2px); border-radius: var(--gtsm3-box-radius, 4px); background: #888; color: #fff; font-size: var(--gtsm3-box-size, 13px); line-height: 1.25; letter-spacing: -.5px; text-decoration: none; transition: filter .2s; }
.gtsm3 .gtsm3_box:hover { filter: brightness(1.08); }
.gtsm3 .gtsm3_box.is_light { color: #222; }
.gtsm3 .gtsm3_box.is_secret { opacity: .75; outline: 1px dashed currentColor; outline-offset: -3px; }
.gtsm3 .gtsm3_thumb { flex: 0 0 var(--gtsm3-thumb-size, 44px); width: var(--gtsm3-thumb-size, 44px); height: var(--gtsm3-thumb-size, 44px); overflow: hidden; border-radius: var(--gtsm3-thumb-radius, 4px); background: rgba(255,255,255,.2); }
.gtsm3 .gtsm3_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gtsm3 .gtsm3_noimg { display: none; }
/* 글자 단위 줄바꿈 · 테마의 양쪽 정렬을 끈다 */
.gtsm3 .gtsm3_tit { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--gtsm3-box-lines, 3); overflow: hidden; text-align: left; word-break: break-all; overflow-wrap: anywhere; }
.gtsm3 .gtsm3_pick { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 3px; background: var(--gtsm3-c1, #FF5A5A); color: #fff; font-size: 11px; font-weight: bold; line-height: 16px; vertical-align: 1px; }
.gtsm3 .gtsm3_place { display: none; }

/* ===== 표시: 제목만 ===== */
.gtsm3.mode_text .gtsm3_cell .gtsm3_thumb { display: none; }

/* ===== 표시: 컬러 박스 + 이미지 — 일정 색 액자 안에 포스터. 제목·기간·장소는 마우스를 올리면 미리보기 카드(gtsm3.js) ===== */
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_list { display: flex; flex-wrap: wrap; gap: var(--gtsm3-tile-gap, 5px); }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_list li { margin: 0; }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_box { display: block; box-sizing: border-box; width: var(--gtsm3-tile-size, 54px); height: var(--gtsm3-tile-size, 54px); min-height: 0; padding: var(--gtsm3-tile-pad, 5px); border-radius: var(--gtsm3-tile-radius, 8px); transition: transform .2s ease, box-shadow .2s ease; }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_box:hover,
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_box:focus-visible { filter: none; transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); z-index: 3; }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_thumb { display: block; width: 100%; height: 100%; border-radius: var(--gtsm3-tile-img-radius, 4px); background: rgba(255,255,255,.15); }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--gtsm3-tile-img-radius, 4px); background: rgba(255,255,255,.18); font-size: calc(var(--gtsm3-tile-size, 54px) * .32); font-weight: bold; }
/* 폴라로이드 — 정사각형 사진 + 아래 색 여백 (글자 없음) */
.gtsm3.mode_thumbs.tile_poster .gtsm3_cell .gtsm3_box { height: auto; padding-bottom: calc(var(--gtsm3-tile-pad, 5px) * 2.6 + 4px); }
.gtsm3.mode_thumbs.tile_poster .gtsm3_cell .gtsm3_thumb,
.gtsm3.mode_thumbs.tile_poster .gtsm3_cell .gtsm3_noimg { height: auto; aspect-ratio: 1 / 1; }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_pick,
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_place { display: none; }
.gtsm3.mode_thumbs .gtsm3_cell .gtsm3_tit { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* 미리보기 카드 — body 에 하나만 붙어 화면 기준(fixed)으로 뜬다. 그래서 .gtsm3 밖에서 스타일을 준다 */
.gtsm3_pop { position: fixed; z-index: 2147482000; width: 248px; padding: 10px; border-radius: 14px; background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(16,16,24,.06), 0 12px 32px -8px rgba(16,16,24,.28); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; font-size: 13px; line-height: 1.4; letter-spacing: -.2px; }
.gtsm3_pop.is_on { opacity: 1; transform: none; }
.gtsm3_pop.is_below { transform: translateY(-4px); }
.gtsm3_pop.is_below.is_on { transform: none; }
.gtsm3_pop_row { display: flex; gap: 12px; align-items: flex-start; }
.gtsm3_pop_img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 9px; background: #f2f2f4 center top / cover no-repeat; }
.gtsm3_pop_img.is_none { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: bold; }
.gtsm3_pop_txt { flex: 1; min-width: 0; padding-top: 2px; }
.gtsm3_pop_t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 6px; font-size: 14px; font-weight: 700; line-height: 1.35; word-break: break-all; }
.gtsm3_pop_m { display: flex; align-items: center; gap: 5px; color: #6b6b76; font-size: 12px; }
.gtsm3_pop_m + .gtsm3_pop_m { margin-top: 2px; }
.gtsm3_pop_m svg { flex-shrink: 0; width: 13px; height: 13px; fill: #a0a0aa; }
.gtsm3_pop_m span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gtsm3_pop_dot { flex-shrink: 0; width: 7px; height: 7px; margin: 0 3px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .gtsm3_pop { transition: none; } }

/* 칸이 넘치면 접기 (설정 '한 칸 최대 일정 수') */
.gtsm3 .gtsm3_cell:not(.is_open) li.is_fold { display: none; }
.gtsm3 .gtsm3_unfold { display: block; width: 100%; margin-top: 2px; padding: 4px 0; border: 1px solid #DDD; border-radius: 4px; background: #fff; color: #555; font: inherit; font-size: 12px; cursor: pointer; }
.gtsm3 .gtsm3_unfold:hover { border-color: var(--gtsm3-c1, #FF5A5A); color: var(--gtsm3-c1, #FF5A5A); }



/* ===== 그달 일정 한눈에 보기 (접이식 카드 목록) =====
   테마가 p·ol·li·a 에 거는 여백·정렬을 이기도록 여기서 모두 다시 정한다 */
.gtsm3 .gtsm3_all { margin-top: 36px; border-radius: 20px; background: var(--gtsm3-all-bg, #ECECF0); }
.gtsm3 .gtsm3_all > summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 22px 72px 22px 26px; cursor: pointer; list-style: none; user-select: none; }
.gtsm3 .gtsm3_all > summary::-webkit-details-marker { display: none; }
.gtsm3 .gtsm3_all > summary::before { content: ''; position: absolute; right: 22px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,16,24,.08); }
.gtsm3 .gtsm3_all > summary::after { content: ''; position: absolute; right: 35px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid #555; border-bottom: 1.5px solid #555; transform: rotate(45deg); transition: transform .2s, margin .2s; }
.gtsm3 .gtsm3_all[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.gtsm3 .gtsm3_all_h { font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: #16161d; }
.gtsm3 .gtsm3_all_cnt { font-size: 19px; font-weight: 700; color: var(--gtsm3-c1, #FF5A5A); }
.gtsm3 .gtsm3_all_hint { flex-basis: 100%; color: #8a8a95; font-size: 13px; }
.gtsm3 .gtsm3_all_in { padding: 0 26px 26px; }
.gtsm3 .gtsm3_all .gtsm3_lead { margin: 0 0 22px !important; padding: 0 !important; color: #6b6b76; font-size: 13px; line-height: 1.6; text-align: left; }
.gtsm3 .gtsm3_all_gh { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; padding: 0; font-size: 13px; font-weight: 600; color: #4a4a55; letter-spacing: -.1px; }
.gtsm3 .gtsm3_all_gh:first-of-type { margin-top: 0; }
.gtsm3 .gtsm3_all_gh b { font-weight: 600; color: #9a9aa5; }
.gtsm3 .gtsm3_all_gh::after { content: ''; flex: 1; height: 1px; background: rgba(16,16,24,.08); }
.gtsm3 .gtsm3_all_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.gtsm3 .gtsm3_all_item { margin: 0 !important; padding: 0 !important; list-style: none; }
.gtsm3 .gtsm3_all_item > a { display: flex; align-items: center; gap: 16px; height: 100%; padding: 12px 18px 12px 12px; border-radius: 14px; background: #fff; color: #16161d; text-decoration: none; transition: box-shadow .2s ease; }
.gtsm3 .gtsm3_all_item > a:hover { box-shadow: 0 1px 2px rgba(16,16,24,.05), 0 10px 24px -10px rgba(16,16,24,.22); }
.gtsm3 .gtsm3_all_img { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; background: var(--gtsm3-ic, #888); }
.gtsm3 .gtsm3_all_img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gtsm3 .gtsm3_all_img i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-style: normal; font-size: 22px; font-weight: 700; }
.gtsm3 .gtsm3_all_date { flex: 0 0 44px; display: flex; flex-direction: column; align-items: flex-start; padding-right: 14px; border-right: 1px solid #ededf0; line-height: 1.1; }
.gtsm3 .gtsm3_all_date small { order: 2; margin-top: 3px; font-size: 11px; color: #9a9aa5; }
.gtsm3 .gtsm3_all_date strong { order: 1; font-size: 18px; font-weight: 700; letter-spacing: -.5px; color: #16161d; font-variant-numeric: tabular-nums; }
.gtsm3 .gtsm3_all_date em { display: none; }
.gtsm3 .gtsm3_all_txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gtsm3 .gtsm3_all_t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.3px; text-align: left; word-break: break-all; }
.gtsm3 .gtsm3_all_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12.5px; color: #8a8a95; line-height: 1.35; }
.gtsm3 .gtsm3_all_meta > span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px; border-radius: 50%; background: #c5c5cc; vertical-align: middle; }
.gtsm3 .gtsm3_all_st { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #1F8B4C; }
.gtsm3 .gtsm3_all_st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gtsm3 .gtsm3_all_item.is_soon .gtsm3_all_st { color: #2F6FE0; }
.gtsm3 .gtsm3_all_item.is_last .gtsm3_all_st { color: #E8202A; }
.gtsm3 .gtsm3_all_item.is_end .gtsm3_all_st { color: #9a9aa5; }
.gtsm3 .gtsm3_all_item.is_end .gtsm3_all_t { color: #6b6b76; }
.gtsm3 .gtsm3_all_r { font-variant-numeric: tabular-nums; }
.gtsm3 .gtsm3_all_p { min-width: 0; }
.gtsm3 .gtsm3_all_p svg { display: none; }


/* ===== 달력 넓이: 화면 전체 — 서브페이지 폭을 벗어나 화면 끝까지. --gtsm3-sbw(세로 스크롤바 폭)는 gtsm3.js 가 잰다 ===== */
.gtsm3.width_full { box-sizing: border-box; width: calc(100vw - var(--gtsm3-sbw, 0px)); max-width: none; margin-left: calc(50% - (100vw - var(--gtsm3-sbw, 0px)) / 2); padding-left: var(--gtsm3-full-pad, 40px); padding-right: var(--gtsm3-full-pad, 40px); }

/* ===== 「한눈에 보기」 목록 — 어두운 배경 ===== */
.gtsm3.all_dark .gtsm3_all { background: var(--gtsm3-all-bg, #17171C); }
.gtsm3.all_dark .gtsm3_all_h { color: #F2F2F5; }
.gtsm3.all_dark .gtsm3_all_hint,
.gtsm3.all_dark .gtsm3_all .gtsm3_lead { color: #8A8A95; }
.gtsm3.all_dark .gtsm3_all > summary::before { background: #2A2A32; box-shadow: none; }
.gtsm3.all_dark .gtsm3_all > summary::after { border-color: #C8C8D0; }
.gtsm3.all_dark .gtsm3_all_gh { color: #C8C8D0; }
.gtsm3.all_dark .gtsm3_all_gh b { color: #6B6B76; }
.gtsm3.all_dark .gtsm3_all_gh::after { background: rgba(255,255,255,.08); }
/* 카드는 밝게 선택할 때처럼 흰색 그대로 — 어두운 배경 위에서 더 돋보인다 */
.gtsm3.all_dark .gtsm3_all_item > a:hover { box-shadow: 0 12px 28px -10px rgba(0,0,0,.7); }

/* 미리보기 카드 — 색 배경 (게시물 지정 색 · 고른 색). is_dark 는 어두운 배경 위 흰 글자 */
.gtsm3_pop.is_dark { color: #fff; }
.gtsm3_pop.is_dark .gtsm3_pop_m { color: rgba(255,255,255,.8); }
.gtsm3_pop.is_dark .gtsm3_pop_m svg { fill: rgba(255,255,255,.6); }
.gtsm3_pop.is_tint .gtsm3_pop_m { color: rgba(0,0,0,.62); }
.gtsm3_pop.is_tint .gtsm3_pop_m svg { fill: rgba(0,0,0,.45); }
.gtsm3_pop.is_dark .gtsm3_pop_dot,
.gtsm3_pop.is_tint .gtsm3_pop_dot { display: none; }
.gtsm3_pop.is_dark .gtsm3_pop_img,
.gtsm3_pop.is_tint .gtsm3_pop_img { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
/* PC 에서는 안 쓰는 것 */
.gtsm3 .gtsm3_tap,
.gtsm3 .gtsm3_dots,
.gtsm3 .gtsm3_detail { display: none; }

/* ===== 좁은 PC·태블릿 — 칸이 150px 아래로 줄면 이미지+제목 표시에서 썸네일을 뺀다 ===== */
@container gtsm3 (max-width: 1100px) {
    .gtsm3.mode_list .gtsm3_cell .gtsm3_thumb { display: none; }
}
@container gtsm3 (max-width: 900px) {
    .gtsm3 .gtsm3_all_list { grid-template-columns: minmax(0, 1fr); }
    .gtsm3 .gtsm3_period { font-size: calc(var(--gtsm3-title-size, 64px) * .75); }
    .gtsm3 .gtsm3_title { grid-template-columns: minmax(0, 1fr); }
    .gtsm3 .gtsm3_month,
    .gtsm3 .gtsm3_more { grid-column: 1; justify-self: center; }
    .gtsm3 .gtsm3_more { margin-top: 10px; justify-content: center; }
    .gtsm3 .gtsm3_cell { min-height: calc(var(--gtsm3-cell-h, 120px) * .85); padding: 6px 4px; }
    .gtsm3 .gtsm3_d { font-size: calc(var(--gtsm3-date-size, 18px) * .9); }
    .gtsm3 .gtsm3_mk,
    .gtsm3 .gtsm3_lunar { font-size: 10px; }
    .gtsm3 .gtsm3_cell .gtsm3_box { font-size: calc(var(--gtsm3-box-size, 13px) * .85); }
    .gtsm3.mode_list .gtsm3_cell .gtsm3_box,
    .gtsm3.mode_text .gtsm3_cell .gtsm3_box { padding: 3px 5px; }
    .gtsm3 .gtsm3_cell .gtsm3_tit { -webkit-line-clamp: 2; }
}

/* ===== 모바일 500px 이하 — 칸에는 색 점만, 누른 날의 일정은 달력 아래에 ===== */
@container gtsm3 (max-width: 500px) {
    .gtsm3 .gtsm3_all { border-radius: 12px; }
    .gtsm3 .gtsm3_all > summary { padding: 18px 60px 18px 18px; }
    .gtsm3 .gtsm3_all > summary::before { right: 14px; }
    .gtsm3 .gtsm3_all > summary::after { right: 27px; }
    .gtsm3 .gtsm3_all_h { font-size: 16px; }
    .gtsm3 .gtsm3_all_h,
    .gtsm3 .gtsm3_all_cnt { font-size: 17px; }
    .gtsm3 .gtsm3_all_in { padding: 0 12px 14px; }
    .gtsm3 .gtsm3_all_list { gap: 8px; }
    .gtsm3 .gtsm3_all_item > a { gap: 12px; padding: 10px 12px 10px 10px; }
    .gtsm3 .gtsm3_all_date { flex-basis: 38px; padding-right: 10px; }
    .gtsm3 .gtsm3_all_date strong { font-size: 16px; }
    .gtsm3 .gtsm3_all_img { flex-basis: 50px; width: 50px; height: 50px; }
    .gtsm3 .gtsm3_all_t { font-size: 14px; }
    .gtsm3 .gtsm3_title { padding: 0 8px; }
    .gtsm3 .gtsm3_period { font-size: var(--gtsm3-title-size-mo, 34px); }
    .gtsm3 .gtsm3_mbtn svg { width: 20px; height: 20px; }
    .gtsm3 .gtsm3_mbtn_prev { margin-right: 8px; }
    .gtsm3 .gtsm3_mbtn_next { margin-left: 8px; }
    .gtsm3 .gtsm3_body { padding-top: 14px; }
    .gtsm3 .gtsm3_head span { padding: 10px 0; font-size: 13px; }

    .gtsm3 .gtsm3_cell { min-height: var(--gtsm3-cell-h-mo, 62px); padding: 5px 2px 4px; text-align: center; }
    .gtsm3 .gtsm3_cell.is_today { outline-width: 1px; }
    .gtsm3 .gtsm3_cell.is_sel { background: #FFF0F0; box-shadow: inset 0 0 0 2px var(--gtsm3-c1, #FF5A5A); }
    .gtsm3 .gtsm3_date { display: block; }
    .gtsm3 .gtsm3_d { font-size: var(--gtsm3-date-size-mo, 15px); }
    .gtsm3 .gtsm3_today { display: none; }
    .gtsm3 .gtsm3_cell .gtsm3_lunar,
    .gtsm3 .gtsm3_cell .gtsm3_mk ~ .gtsm3_mk { display: none; }
    .gtsm3 .gtsm3_cell .gtsm3_mk { display: block; overflow: hidden; font-size: 9px; letter-spacing: -.8px; white-space: nowrap; text-overflow: ellipsis; }
    .gtsm3 .gtsm3_cell .gtsm3_list,
    .gtsm3 .gtsm3_unfold { display: none !important; }

    .gtsm3 .gtsm3_tap { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .gtsm3 .gtsm3_dots { display: flex; justify-content: center; align-items: center; gap: 2px; margin-top: 4px; }
    .gtsm3 .gtsm3_dots i { width: 6px; height: 6px; border-radius: 50%; background: #888; }
    .gtsm3 .gtsm3_dots b { font-size: 9px; font-weight: normal; color: #888; line-height: 1; }

    /* 아래 상세는 표시 방식과 상관없이 늘 이미지 + 제목 + 장소 */
    .gtsm3 .gtsm3_detail { display: block; margin-top: 16px; }
    .gtsm3 .gtsm3_detail_h { margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--gtsm3-c1, #FF5A5A); font-size: 16px; font-weight: bold; line-height: 1.3; }
    .gtsm3 .gtsm3_detail .gtsm3_list { margin: 0; }
    .gtsm3 .gtsm3_detail .gtsm3_list li { margin-bottom: 6px; display: block !important; }
    .gtsm3 .gtsm3_detail .gtsm3_box { align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--gtsm3-box-radius, 6px); font-size: 14px; }
    .gtsm3 .gtsm3_detail .gtsm3_thumb { flex-basis: 50px; width: 50px; height: 50px; border-radius: var(--gtsm3-thumb-radius, 4px); }
    .gtsm3 .gtsm3_detail .gtsm3_tit { -webkit-line-clamp: 2; }
    .gtsm3 .gtsm3_detail .gtsm3_place { display: block; flex: 0 0 auto; max-width: 30%; overflow: hidden; font-size: 11px; opacity: .85; white-space: nowrap; text-overflow: ellipsis; }
    .gtsm3 .gtsm3_detail .gtsm3_none { display: none; margin: 0; padding: 20px 0; text-align: center; color: #888; font-size: 14px; }
    .gtsm3 .gtsm3_detail.is_empty .gtsm3_none { display: block; }
}

/* 휴대폰 화면(500px 이하)에서는 좌우 20px 여백 — 상자 폭(위 @container)이 아니라 화면 폭 기준이라
   PC 사이드바처럼 좁은 자리에 넣었을 때는 여백이 생기지 않는다 */
@media (max-width: 500px) {
    .gtsm3,
    .gtsm3.width_full { padding-left: 20px; padding-right: 20px; }
    .gtsm3 .gtsm3_title { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gtsm3 * { transition: none !important; }
}