/* 청약달력 v2 — 공공포털 스타일 티스토리 스킨 */
:root {
  --navy: #0f2557; --primary: #0a4ec2;
  --tint: #f3f7fe; --tint2: #eaf0fb; --tint3: #f8faff;
  --tag-ink: #0a4ec2; --tag-bg: #eef3fc; --tag-line: #a9c1ee;
  --ink: #1e2124; --sub: #464c53; --muted: #6d7882; --off: #8a949e;
  --line-strong: #c4cad4; --line: #d6dbe3; --line-soft: #e4e8ee; --line-faint: #eef1f5;
  --surface: #f4f6f9; --foot-row: #fafbfc;
  --sun: #c4261d; --sat: #0a4ec2;
  --brand: #0b4fc4; --st-receipt: #0a7a5c; --st-announce: #b3261e; --st-contract: #4a4fa0; /* 디자인 시스템(우리의 청약달력) 단계 색: 같은 뜻으로만 */
  --stripe: repeating-linear-gradient(135deg, #eef1f5 0 10px, #e4e8ee 10px 20px);
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Pretendard, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum'; letter-spacing: -0.01em; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; }
button { font: inherit; color: inherit; white-space: nowrap; flex: none; cursor: pointer; letter-spacing: inherit; }
.wrap { min-height: 100vh; }
.inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* 유틸리티 바 */
.util { background: var(--navy); color: #c9d3e8; font-size: 12px; }
.util .inner { padding-top: 7px; padding-bottom: 7px; gap: 12px; }
.util-links { display: flex; gap: 14px; }
.util a { color: #c9d3e8; }

/* 헤더 */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .inner { min-height: 72px; align-items: stretch; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: inline-flex; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.brand-desc { font-size: 11px; color: var(--muted); font-weight: 500; }
.site-nav { display: flex; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.site-nav li { display: flex; }
.site-nav a { display: flex; align-items: center; padding: 0 16px; min-height: 48px; }
.site-nav a:hover { text-decoration: none; }
.site-nav a.is-active { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); } /* calendar.js가 현재 페이지 메뉴에 붙임 */

/* 이번 주 요약 — 홈 첫 화면(디자인 A 지도 히어로). 숫자·지도는 calendar.js renderHero */
.hero { display: none; background: #fff; border-bottom: 1px solid var(--line); }
#tt-body-index .hero { display: block; }
.hero-inner { max-width: 1200px; margin: 0 auto; padding: 44px 24px 24px; display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: flex-start; }
.hero-main { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hero h2 { margin: 0; font-size: clamp(40px, 6.4vw, 80px); font-weight: 900; line-height: 1.04; letter-spacing: -0.05em; }
.hero-date { margin: 0; font-size: 24px; font-weight: 700; color: var(--brand); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; max-width: 560px; }
.hero-stat { border-top: 6px solid var(--sc); padding-top: 10px; }
.hero-stat .k { font-size: 16px; font-weight: 700; color: var(--sub); }
.hero-stat .n { font-size: clamp(40px, 5.6vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: var(--sc); }
.hero-stat .n small { font-size: 18px; font-weight: 700; color: var(--ink); margin-left: 3px; letter-spacing: 0; }
.hero-cta { align-self: flex-start; margin-top: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 999px; }
.hero-cta:hover { color: #fff; text-decoration: none; background: #0a3a91; }
.hero-map { flex: 1 1 340px; max-width: 440px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--sub); }
.map-legend-title { margin-right: 6px; }
.map-legend i { width: 14px; height: 14px; border-radius: 4px; margin-left: 6px; }
.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { aspect-ratio: 1; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; font-size: 16px; font-weight: 700; }
.tile b { font-size: 30px; font-weight: 900; line-height: 1; align-self: flex-end; }
.l0 { background: #eef1f5; color: #5f687a; } .l1 { background: #d3e2fb; color: #0b2557; } .l2 { background: #93b8f4; color: #0b2557; }
.l3 { background: #2f67d8; color: #fff; } .l4 { background: #0b3a96; color: #fff; }
.hero-list-wrap { padding-top: 8px; padding-bottom: 36px; flex-direction: column; align-items: stretch; gap: 12px; }
.hero-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.hero-list-head h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.hero-list-head a { font-size: 14px; font-weight: 700; color: var(--brand); }
/* 홈 이번 주 남은 접수: 컴퓨터는 출처 칸을 가로로(2열), 휴대폰은 세로로 쌓는다(2026-10-28 사용자 지시). 칸이 좁아 행은 두 줄 카드 모양 */
.hero-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 900px) { .hero-list { grid-template-columns: minmax(0, 1fr); } }
.hero-group .hero-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 16px; }
.hero-group .hero-row .when { grid-column: 1 / -1; font-size: 13px; }
.hero-group .hero-row .where { grid-column: 1; grid-row: 3; font-size: 13px; }
.hero-group .hero-row .kind { grid-column: 2; grid-row: 3; text-align: right; font-size: 13px; }
.hero-group .hero-row .units { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--sub); }
.hero-group .hero-row .name { grid-column: 1; grid-row: 2; }
.hero-group .hero-empty { padding: 16px; }
.hero-group { border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; }
.hero-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 18px; background: var(--tint3); border-bottom: 1px solid var(--line-soft); }
.hero-group-head b { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
.hero-group-head span { font-size: 13px; color: var(--sub); }
.hero-group-head em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; color: var(--sub); }
.hero-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px 120px 90px; gap: 12px; align-items: center; padding: 12px 18px; font-size: 15px; color: var(--ink); }
.hero-row + .hero-row { border-top: 1px solid var(--line-soft); }
a.hero-row:hover { background: var(--tint3); text-decoration: none; color: var(--ink); }
.hero-row .when { color: var(--st-receipt); font-weight: 700; white-space: nowrap; }
.hero-row .name { font-weight: 700; }
.hero-row .where, .hero-row .kind { color: var(--sub); }
.hero-row .units { text-align: right; white-space: nowrap; }
.hero-empty { margin: 0; padding: 20px 18px; color: var(--sub); }
.hero-meta { margin: 0; font-size: 13px; color: var(--sub); }
.hero-meta b { color: var(--ink); }

/* 캘린더 섹션 — 홈에서만 */
.cal { display: none; background: var(--surface); border-bottom: 1px solid var(--line); }
.cal-page .cal { display: block; } /* 청약일정 카테고리 페이지(calendar.js가 body에 cal-page) */
.cal-inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.cal-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cal-heading { display: flex; flex-direction: column; gap: 6px; }
.crumb { font-size: 13px; color: var(--muted); }
.cal-heading h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.cal-meta { font-size: 13px; color: var(--sub); display: flex; gap: 12px; flex-wrap: wrap; }
.cal-meta b { font-weight: 700; color: var(--ink); }
.cal-meta .sep { color: var(--line-strong); }

.btn { font-size: 13px; font-weight: 600; height: 34px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--line-strong); background: #fff; }
.btn-primary { font-weight: 700; padding: 0 16px; border-color: var(--primary); background: var(--primary); color: #fff; }
.btn-square { width: 34px; padding: 0; font-size: 16px; }
.btn-today { padding: 0 12px; margin-left: 4px; }

/* 체크박스 */
.box { width: 16px; height: 16px; flex: none; border-radius: 2px; border: 1px solid var(--off); background: #fff; color: #fff; font-size: 11px; line-height: 14px; text-align: center; }
.box.on { border-color: var(--primary); background: var(--primary); }
.box.sm { width: 14px; height: 14px; font-size: 10px; line-height: 12px; }

/* 지역 필터 */
.filter { position: sticky; top: 0; z-index: 5; background: #fff; border: 1px solid var(--line-strong); border-top: 2px solid var(--navy); border-radius: 2px; }
.f-row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.f-head { width: 120px; background: var(--surface); border: none; border-right: 1px solid var(--line-soft); padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; text-align: left; }
.f-cells { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 16px; align-items: center; }
.f-item-wrap { display: flex; align-items: center; gap: 6px; }
.f-item { background: none; border: none; padding: 4px 0; font-size: 14px; color: var(--muted); font-weight: 400; display: flex; align-items: center; gap: 7px; }
.f-item.on { color: var(--ink); font-weight: 600; }
.f-n { font-size: 12px; color: var(--muted); font-weight: 400; }
.gu-toggle { font-size: 12px; font-weight: 600; height: 24px; padding: 0 8px; border-radius: 2px; border: 1px solid var(--primary); background: #fff; color: var(--primary); }
.gu-toggle.open { background: var(--primary); color: #fff; }
.f-row.sub { background: var(--tint3); }
.f-row.sub .f-head { background: var(--tint2); font-size: 13px; color: var(--primary); align-items: flex-start; }
.f-row.sub .f-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 2px 12px; }
.f-row.sub .f-item { font-size: 13px; gap: 6px; text-align: left; }
.f-row.sub .f-n { font-size: 11px; }
.filter-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap; background: var(--foot-row); }
.filter-summary { font-size: 13px; color: var(--sub); }
.filter-btns { display: flex; gap: 6px; }
.f-row.kinds { border-top: 1px solid var(--line-strong); } /* 청약 종류 줄: 지역 묶음과 구분 */
.f-row.kinds + .f-row.kinds { border-top-color: var(--line-soft); } /* 주택 종류 · 공고 종류 두 줄 사이는 옅게 */
.filter.folded [data-ref="groups"] { display: none; } /* PC 접기: 요약 줄과 버튼만 남긴다(휴대폰은 아래에서 되돌림) */

/* 캘린더 카드 */
.cal-body { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cal-card { background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; flex: 999 1 660px; min-width: 0; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-month { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; min-width: 128px; text-align: center; }
.legend { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.ph-toggle { font-size: 13px; font-weight: 600; padding: 4px 0; border: none; background: none; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.ph-toggle.off { color: var(--off); }
.ph-box { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--pc); background: var(--pc); color: #fff; font-size: 10px; line-height: 12px; text-align: center; }
.ph-toggle.off .ph-box { background: #fff; }

.cal-scroll { overflow-x: auto; }
.cal-grid { min-width: 640px; }
.cal-dow, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { font-size: 13px; font-weight: 700; color: var(--sub); background: var(--surface); border-bottom: 1px solid var(--line); text-align: center; }
.cal-dow > div { padding: 9px; }
.sun { color: var(--sun); } .sat { color: var(--sat); }
.week { border-bottom: 1px solid var(--line-soft); }
.day { min-height: 108px; padding: 6px; border-right: 1px solid var(--line-soft); background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day:last-child { border-right: none; }
.day.sel { background: var(--tint); box-shadow: inset 0 0 0 2px var(--primary); }
.day.out { opacity: .4; }
.day-num-row { display: flex; align-items: center; gap: 4px; padding: 0 0 3px; }
.day-num { font-size: 13px; font-weight: 600; border-radius: 2px; min-width: 22px; height: 22px; line-height: 22px; text-align: center; }
.day-num.sun { color: var(--sun); } .day-num.sat { color: var(--sat); }
.day-num.today { background: var(--navy); color: #fff; font-weight: 800; }
.day-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev { font-size: 12px; line-height: 1.4; padding: 1px 5px; border-radius: 2px; background: var(--pbg); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ev b { font-weight: 700; color: var(--pc); }
.more { font-size: 11px; color: var(--sub); padding: 0 5px; font-weight: 600; }
.skel { height: 16px; border-radius: 2px; background: var(--line-faint); }
.day-dots, .f-open, .to-cal, .m-region, .m-tabbar, .sheet-head, .sheet-backdrop, .week-view { display: none; } /* 휴대폰 전용 */
.day-dots { flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 3px; }
.day-dots i { width: 6px; height: 6px; border-radius: 1px; background: var(--pc); }
.day-dots span { width: 100%; text-align: center; font-size: 11px; font-weight: 700; color: var(--sub); line-height: 1.2; }

/* 우측 패널 */
.day-card { flex: 1 1 280px; min-width: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; }
.day-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); min-height: 63px; }
.day-title { font-size: 16px; font-weight: 700; }
.day-count { font-size: 13px; color: var(--sub); }
.day-count b { color: var(--primary); }
.day-list { display: flex; flex-direction: column; }
.day-list .skel { margin: 12px 16px 0; }
.day-item { text-align: left; background: #fff; border: none; border-bottom: 1px solid var(--line-soft); padding: 12px 16px; display: flex; flex-direction: column; gap: 5px; word-break: keep-all; white-space: normal; }
.day-item:hover { background: var(--surface); }
.day-item-top { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.badge { padding: 1px 6px; border-radius: 2px; border: 1px solid var(--pc); color: var(--pc); font-weight: 700; }
.day-item-where { color: var(--muted); }
.day-item-name { font-size: 15px; font-weight: 600; }
.day-empty { margin: 0; padding: 24px 16px; font-size: 14px; color: var(--muted); text-align: center; }
.day-note { margin: 0; padding: 12px 16px; font-size: 12px; color: var(--muted); line-height: 1.6; background: var(--foot-row); border-top: 1px solid var(--line-soft); }

/* 상세 모달 */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,20,30,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 3px; border-top: 3px solid var(--navy); box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); }
.modal-head { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-where { font-size: 13px; color: var(--sub); }
.modal-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin-top: 4px; }
.modal-close { width: 32px; height: 32px; border-radius: 2px; border: 1px solid var(--line-strong); background: #fff; }
.modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.mtable { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; border-top: 1px solid var(--ink); font-size: 14px; }
.mtable > div { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.mtable .th { background: var(--surface); font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.tl-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--pc); flex: none; }
.modal-btns { display: flex; gap: 6px; }
.modal-btns a { flex: 1; text-align: center; padding: 12px; border-radius: 3px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; }
.modal-btns a:hover { text-decoration: none; }
.modal-btns a.go { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

/* 블로그 */
.blog { max-width: 1200px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.blog-main { display: flex; flex-direction: column; gap: 24px; flex: 999 1 600px; min-width: 0; }
/* 사이드바와 한 줄일 때 본문 폭을 미리 고정 — 사이드바보다 먼저 읽히는 본문 위 광고가 빈 줄 전체 폭을 재서 사이드바를 덮던 문제(2026-10-27) */
@media (min-width: 948px) { .blog-main { max-width: calc(100% - 300px); } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.section-count { font-size: 13px; color: var(--sub); }
.section-count b { color: var(--primary); }
.latest-head { display: none; }
#tt-body-index .latest-head { display: flex; }
#tt-body-index .list-head, #tt-body-index .list-block { display: none; } /* 홈은 글 묶음(s_article_rep) 하나만: 목록(s_list)까지 그리면 같은 글이 두 번 나옴 */ /* 홈이 글 목록형이면 티스토리가 "전체 글" 목록을 그린다: 머리는 "최신 게시물" 하나만 */
/* 카테고리·태그·검색 쪽은 목록(s_list) 하나만: 스킨 설정 「목록+내용」이면 같은 글이 카드(s_index_article_rep)로 한 번 더 나온다(2026-10-24). 글 본문(permalink)은 그대로 */
#tt-body-category .rep-grid > .card, #tt-body-tag .rep-grid > .card, #tt-body-search .rep-grid > .card { display: none; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; }
.post-grid:empty { display: none; }
.card { display: flex; flex-direction: column; gap: 8px; }
.card:hover { text-decoration: none; }
.card:hover .title { color: var(--primary); text-decoration: underline; }
.thumb { aspect-ratio: 1200 / 630; border-radius: 8px; background: var(--stripe); overflow: hidden; border: 1px solid var(--line-soft); } /* 글 그림(1200×630)이 잘리지 않게 같은 비율 */
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-text { display: flex; flex-direction: column; gap: 8px; }
.cat { font-size: 13px; font-weight: 700; color: var(--primary); }
.card .title { font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; text-wrap: pretty; color: var(--ink); }
.card .summary, .card .rp { display: none; }
.date { font-size: 13px; color: var(--muted); }

/* 홈 첫 글 = 대표 글 */
#tt-body-index .post-grid > .card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
#tt-body-index .post-grid > .card:first-child .card-text { gap: 10px; }
#tt-body-index .post-grid > .card:first-child .cat { align-self: flex-start; font-size: 12px; color: var(--tag-ink); border: 1px solid var(--tag-line); background: var(--tag-bg); padding: 2px 8px; border-radius: 2px; }
#tt-body-index .post-grid > .card:first-child .title { font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
#tt-body-index .post-grid > .card:first-child .summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; color: var(--sub); line-height: 1.7; text-wrap: pretty; }
#tt-body-index .post-grid > .card:first-child .rp { display: inline; }

/* 글 화면 */
#tt-body-page .post-grid { display: block; }
/* 글 화면 — 디자인 시스템(우리의 청약달력) 톤: 굵은 제목, 파란 칩, 둥근 표·그림 */
.post { padding: 8px 0 0; }
.post-cat { display: inline-block; font-size: 13px; font-weight: 700; color: #0a3a91; background: #eaf1fd; border: 1px solid #b9cff5; padding: 3px 12px; border-radius: 999px; }
.post-cat:hover { text-decoration: none; color: #0a3a91; background: #dce8fb; }
.post-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; line-height: 1.3; letter-spacing: -0.04em; margin: 14px 0 10px; }
.post-meta { font-size: 13px; color: var(--sub); padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); margin-bottom: 28px; }
.post-body { font-size: 16px; line-height: 1.8; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.post-body h2 { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.35; margin: 48px 0 14px; }
.post-body h2::before { content: ''; display: block; width: 32px; height: 5px; border-radius: 3px; background: var(--brand); margin-bottom: 12px; }
.post-body h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; margin: 36px 0 12px; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-strong); box-sizing: border-box; } /* 흰 바탕 그림(썸네일·카드)도 경계가 보이게 */
.post-body table { border-collapse: collapse; width: 100%; border-top: 0; }
.post-body th, .post-body td { border-bottom: 1px solid var(--line-soft); padding: 10px 12px; text-align: left; }
.post-body th { background: var(--surface); font-weight: 700; }
.post-body ul { padding-left: 20px; }
.post-body li { margin: 4px 0; }
.post-body a { color: var(--brand); font-weight: 700; }
.post-tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.post-tags a { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--sub); }
.post-admin { margin-top: 16px; display: flex; gap: 12px; font-size: 12px; }
.post-disclaimer { margin: 28px 0 0; padding: 12px 16px; background: var(--foot-row); border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); line-height: 1.6; }
.post-comments { margin-top: 28px; }
.empty { color: var(--muted); font-size: 14px; }

/* 페이징 */
.paging { display: flex; justify-content: center; gap: 4px; font-size: 14px; padding-top: 8px; }
.paging a { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 2px; position: relative; }
.paging a:hover { text-decoration: none; }
.paging .prev, .paging .next { padding: 0 10px; border: 1px solid var(--line); }
.paging .selected { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--primary); color: #fff; font-weight: 700; }
.paging .no-more-prev, .paging .no-more-next { display: none; }

/* 사이드바 */
.sidebar { display: flex; flex-direction: column; gap: 28px; flex: 1 1 260px; min-width: 0; }
.side-box { border: 1px solid var(--line); border-top: 2px solid var(--navy); margin-bottom: 28px; }
.side-title { font-size: 15px; font-weight: 800; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.side-category ul { list-style: none; margin: 0; padding: 0; }
.side-category .tt_category > li > .link_tit { display: none; } /* "분류 전체보기" 숨김 */
.side-category .link_item, .side-category .link_sub_item { display: flex; justify-content: space-between; font-size: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line-faint); }
.side-category .category_list > li:last-child > .link_item { border-bottom: none; }
.side-category .sub_category_list .link_sub_item { padding-left: 28px; }
.side-category .c_cnt { color: var(--muted); }
.popular { list-style: none; margin: 0; padding: 6px 0; counter-reset: rank; }
.popular li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; padding: 8px 16px; counter-increment: rank; }
.popular li::before { content: counter(rank); font-weight: 800; color: var(--primary); width: 14px; flex: none; }
.side-tags { display: flex; flex-direction: column; gap: 10px; }
.side-tags-title { font-size: 15px; font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags a { font-size: 13px; padding: 5px 10px; border-radius: 2px; background: var(--surface); border: 1px solid var(--line-soft); }

/* 푸터 */
.site-footer { background: var(--ink); color: #aeb5bf; }
.site-footer .inner { padding: 24px; font-size: 13px; line-height: 1.7; align-items: flex-start; gap: 12px; }
.foot-brand { display: flex; flex-direction: column; }
.foot-brand b { color: #fff; font-size: 14px; }
.foot-about { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-note { max-width: 460px; }

/* ───────── 휴대폰(700px 이하): 앱형 화면 ─────────
   하단 탭 바(달력·이번 주·블로그), 지역·상세는 바텀시트, 달력은 단계 색 점 + 건수 */
@media (max-width: 700px) {
  .f-fold { display: none; }
  .filter.folded [data-ref="groups"] { display: block; }
  .hero-inner { padding: 20px 16px 12px; gap: 18px; }
  .hero h2 { font-size: 34px; }
  .hero-date { font-size: 18px; }
  .hero-stats { gap: 10px; margin-top: 4px; }
  .hero-stat { border-top-width: 5px; padding-top: 6px; }
  .hero-stat .k { font-size: 13px; }
  .hero-stat .n { font-size: 34px; }
  .hero-stat .n small { font-size: 14px; }
  .hero-cta { margin-top: 4px; padding: 11px 18px; font-size: 14px; }
  .hero-map { max-width: none; }
  .map-grid { gap: 5px; }
  .tile { aspect-ratio: 4 / 3; border-radius: 10px; padding: 6px 8px; font-size: 13px; }
  .tile b { font-size: 20px; }
  .hero-list-wrap { padding-bottom: 20px; }
  .hero-list-head h3 { font-size: 18px; }
  .hero-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; font-size: 14px; }
  .hero-row .when { grid-column: 1 / -1; font-size: 13px; }
  .hero-row .where { grid-column: 1; font-size: 13px; }
  .hero-row .kind { display: none; }
  .hero-row .units { grid-row: 2; grid-column: 2; font-size: 13px; color: var(--sub); }

  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .util { display: none; }
  .inner, .blog { padding-left: 16px; padding-right: 16px; }
  .site-header .inner { min-height: 60px; gap: 0; }
  .brand { padding: 12px 0; }
  .site-nav { width: 100%; margin: 0 -16px; }
  .site-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
  .site-nav a { padding: 0 12px; min-height: 44px; white-space: nowrap; }

  /* 탭 바 */
  .m-tabbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line-soft); }
  .m-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
  .m-tabbar a:hover { text-decoration: none; color: var(--muted); }
  .m-tabbar a.on { color: var(--primary); }
  .m-tab-cal .site-nav, .m-tab-week .site-nav { display: none; }
  .m-tab-cal #blog, .m-tab-week #blog, .m-tab-cal .site-footer, .m-tab-week .site-footer, .to-blog { display: none; }
  .m-tab-week .cal-body { display: none; }
  .m-tab-week .week-view { display: flex; flex-direction: column; gap: 18px; }

  /* 제목 줄 + 지역 알약 버튼 */
  .cal { border-bottom: none; }
  .cal-inner { padding: 16px 12px 24px; gap: 12px; }
  .cal-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 0 4px; }
  .crumb { display: none; }
  .cal-heading h1 { font-size: 20px; }
  .m-region { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px 0 8px; border: 1px solid var(--line-strong); border-radius: 18px; background: #fff; font-size: 13px; font-weight: 700; }
  .cal-meta { grid-column: 1 / -1; font-size: 12px; gap: 8px; color: var(--muted); }

  /* 지역 바텀시트 */
  .filter { display: none; }
  .cal.sheet-open .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 55; border: none; padding: 0; background: rgba(15, 20, 30, .5); cursor: pointer; }
  .filter.open { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 88vh; border: none; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .35); }
  .filter.open::before { content: ''; display: block; flex: none; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; }
  .sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; flex: none; }
  .sheet-title { flex: 1; font-size: 18px; font-weight: 800; }
  .sheet-all { height: 36px; padding: 0 12px; border: none; border-radius: 18px; background: var(--tag-bg); font-size: 13px; font-weight: 700; color: var(--primary); }
  .filter [data-ref="groups"] { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 12px; }
  .f-row { display: block; border: none; padding: 8px 0 4px; }
  .f-head { width: auto; background: none; border: none; padding: 4px 0; font-size: 14px; font-weight: 800; }
  .f-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 0 0; }
  .f-item-wrap { display: contents; }
  .f-item { height: 40px; justify-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); font-weight: 700; }
  .f-item .box { display: none; }
  .f-item.on { background: var(--tag-bg); border-color: var(--primary); color: var(--primary); }
  .f-item .f-n { font-size: 11px; color: inherit; opacity: .8; }
  .gu-toggle, .gu-toggle.open { grid-column: 1 / -1; order: 99; height: 40px; border-radius: 10px; border: 1px dashed var(--tag-line); background: var(--tint3); color: var(--primary); font-size: 13px; font-weight: 700; }
  .f-row.sub { background: var(--tint3); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px; margin-top: 6px; }
  .f-row.sub .f-head { background: none; color: var(--primary); font-size: 13px; }
  .f-row.sub .f-cells { gap: 4px; }
  .f-row.sub .f-item { height: 34px; font-size: 12px; border-radius: 8px; padding: 0 2px; }
  .filter-foot { flex: none; flex-wrap: nowrap; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line-soft); }
  .filter-summary, .filter-btns [data-act="all"] { display: none; }
  .filter-btns { display: contents; }
  .filter-foot .btn { flex: 1; height: 48px; padding: 0 6px; border-radius: 12px; font-size: 14px; }
  .filter-foot .f-open { display: inline-flex; align-items: center; justify-content: center; flex: 1.6; order: 3; border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 800; }
  .filter-foot .btn-primary { background: #fff; color: var(--primary); }

  /* 달력 카드 */
  .cal-card { border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; }
  .cal-toolbar { border-bottom: none; padding: 10px 10px 4px; gap: 8px; }
  .cal-nav { width: 100%; gap: 2px; }
  .btn-square { width: 40px; height: 40px; border: none; background: transparent; border-radius: 20px; font-size: 22px; }
  .cal-month { font-size: 20px; min-width: 92px; }
  .btn-today { margin-left: auto; height: 32px; border-radius: 16px; font-weight: 700; }
  .legend { width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .ph-toggle { height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 17px; background: #fff; font-weight: 700; }
  .ph-toggle.off { color: var(--muted); }
  .ph-box { border-radius: 4px; }
  .cal-scroll { overflow: visible; }
  .cal-grid { min-width: 0; padding: 0 6px 8px; }
  .cal-dow { background: none; border: none; font-size: 12px; color: var(--muted); }
  .cal-dow > div { padding: 6px 0; }
  .week { border: none; gap: 2px; }
  .day, .day:last-child { min-height: 58px; padding: 5px 0 0; border: none; border-radius: 12px; align-items: center; gap: 3px; }
  .day.out { visibility: hidden; }
  .day.sel { background: var(--tag-bg); box-shadow: inset 0 0 0 2px var(--primary); }
  .day-num-row { padding: 0; }
  .day-num { width: 26px; height: 26px; min-width: 0; line-height: 26px; border-radius: 13px; font-size: 14px; font-weight: 700; }
  .day-evs { display: none; }
  .day-dots { display: flex; }
  .day-dots i { border-radius: 3px; }
  .day-dots span { font-size: 10px; color: var(--sub); }

  /* 날짜별 일정 목록 · 이번 주 */
  .day-card { background: none; border: none; }
  .day-head { min-height: 0; gap: 8px; padding: 6px 6px 10px; border: none; }
  .day-title { font-size: 17px; font-weight: 800; }
  .day-count { margin-left: auto; }
  .to-cal { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; }
  .day-list, .wk-day { display: flex; flex-direction: column; gap: 8px; }
  .day-item { min-height: 64px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; }
  .day-item:hover { background: #fff; }
  .day-item-name { line-height: 1.35; }
  .badge { border-radius: 6px; padding: 1px 7px; }
  .day-empty { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 28px 16px; }
  .day-note { background: none; border: none; padding: 10px 6px 0; }
  .wk-top { padding: 0 6px; font-size: 13px; color: var(--sub); }
  .wk-top b { display: block; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 2px; }
  .wk-head { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
  .wk-title { font-size: 15px; font-weight: 800; }
  .wk-today { font-size: 11px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 6px; padding: 2px 6px; }
  .wk-count { margin-left: auto; font-size: 12px; color: var(--sub); }
  .wk-empty { margin: 0; padding: 0 6px; font-size: 13px; color: var(--muted); }

  /* 상세: 바텀시트 */
  .overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: none; max-height: 88vh; border-top: none; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }
  .modal::before { content: ''; display: block; flex: none; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; }
  .modal-head { padding: 12px 16px 14px; border-bottom: 1px solid var(--line-soft); }
  .modal-close { width: 36px; height: 36px; border: none; border-radius: 18px; background: var(--surface); }
  .modal-body { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .mtable { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
  .mtable > div:nth-last-child(-n+2) { border-bottom: none; }
  .modal-btns a { height: 48px; padding: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

  /* 블로그: 썸네일 왼쪽 목록형 카드 (홈 첫 글은 큰 대표 카드 유지) */
  .blog { padding-top: 20px; gap: 32px; }
  .blog-main { gap: 16px; }
  .section-head h2 { font-size: 20px; }
  .post-grid { gap: 10px; }
  .card { flex-direction: row; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; }
  .card .thumb { flex: none; width: 112px; height: auto; aspect-ratio: 1200 / 630; border-radius: 8px; }
  .card-text { gap: 4px; min-width: 0; }
  .card .title { font-size: 15px; }
  .cat, .date { font-size: 12px; }
  #tt-body-index .post-grid > .card:first-child { padding: 12px 12px 16px; border-bottom: 1px solid var(--line-soft); gap: 14px; }
  #tt-body-index .post-grid > .card:first-child .thumb { width: auto; height: auto; aspect-ratio: 1200 / 630; }
  #tt-body-index .post-grid > .card:first-child .title { font-size: 20px; }
  .paging { padding-top: 0; }

  .post { padding-top: 20px; }
  .post-title { font-size: 23px; }
  .post-body table:not([style*="table-layout"]) { display: block; overflow-x: auto; white-space: nowrap; } /* 넓은 표는 옆으로 밀어 보기(단계별 수 표는 그대로) */
}