/* 메인 (PC 시안 1.main01 1920 기준) — 2026-11-07
   큰 사진 1320x560 둥근 30 / 바로가기 100x100 둥근 16 / 공지 카드 312x376 / 가운데 띠 568 / 갤러리 312x416 + 200x283 / SNS 띠 300 / 협력기관 200x60 */
.is-main .hd { border-bottom: 0; }
.sec-en { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #096889; }
.sec-en::before { content: ""; width: 20px; height: 20px; background: url(/assets/img/deco_subtitle_circle.png) center / 20px no-repeat; }
.sec-t { margin: 6px 0 0; font-size: 32px; font-weight: 700; }

/* 큰 사진 */
.hero { position: relative; margin-top: 50px; border-radius: 30px; overflow: hidden; aspect-ratio: 1320 / 560; }
.hero-track { display: flex; height: 100%; transition: transform .6s ease; touch-action: pan-y; }
.hero-slide { flex: 0 0 100%; height: 100%; }
.hero-slide a, .hero-slide picture { display: block; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.hero-prev, .hero-next { position: absolute; top: 50%; width: 84px; height: 84px; margin-top: -42px; border: 0; cursor: pointer; background: rgba(255,255,255,.5) center / 84px no-repeat; }
.hero-prev { left: 10px; background-image: url(/assets/img/icon_banner_prev.png); }
.hero-next { right: 10px; background-image: url(/assets/img/icon_banner_next.png); }
.hero-search { position: absolute; left: 50%; bottom: 30px; width: 600px; max-width: calc(100% - 40px); transform: translateX(-50%); }
.hero-search input { width: 100%; height: 60px; padding: 0 64px 0 92px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; font-size: 18px; font-weight: 500; }
.hero-search input::placeholder { color: var(--c-gray); }
.hero-search button { position: absolute; right: 20px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--c-point) url(/assets/img/btn_searchbar.png) center / 40px no-repeat; cursor: pointer; }

/* 아이들이 행복한 + 바로가기 */
.intro { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 50px; }
.intro-t { margin: 0; padding: 4px 0 0 52px; font-size: 64px; line-height: 78px; }
.intro-t span { display: block; font-weight: 500; }
.intro-t b { display: block; padding-left: 278px; font-weight: 700; color: #096889; }
.quick { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.quick a { display: flex; flex-direction: column; align-items: center; width: 100px; }
.q-ico { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 16px; background: #f7f7f7; transition: background .2s, transform .2s; }
.q-ico img { width: 50px; height: 50px; object-fit: contain; }
.quick a:hover .q-ico { background: #e6f4f8; transform: translateY(-4px); }
.quick em { margin-top: 12px; font-style: normal; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.35; white-space: nowrap; }

/* 공지사항 */
.m-notice { margin-top: 39px; }
.n-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 33px 0 0; padding: 0; list-style: none; }
.n-cards li { height: 376px; border: 1px solid var(--c-line); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .2s; }
.n-cards li:hover { box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.n-cards a { position: relative; display: flex; flex-direction: column; height: 100%; padding-bottom: 50px; }
.n-img { display: block; height: 190px; overflow: hidden; }
.n-img img { width: 100%; height: 100%; object-fit: cover; }
.n-cards strong { display: block; margin: 20px 20px 0; font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-img strong { margin-top: 50px; }
.n-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 10px 20px 0; font-size: 18px; color: var(--c-gray); line-height: 1.5; }
.no-img .n-txt { -webkit-line-clamp: 8; }
.n-cards time { position: absolute; left: 20px; bottom: 26px; font-size: 14px; color: var(--c-gray); }
.n-cards .empty { display: flex; align-items: center; justify-content: center; grid-column: 1 / -1; height: 160px; }
.more-c { margin: 50px 0 0; text-align: center; }
.more-c a { display: inline-flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 600; }
.more-c i { width: 63px; height: 63px; background: url(/assets/img/btn_arrow_circle02.png) center / 63px no-repeat; transition: transform .2s; }
.more-c a:hover i { transform: translateX(6px); }

/* 가운데 띠 */
.m-mid { margin-top: 35px; padding: 50px 0; background: #f4f7f9 url(/assets/img/main_section_bg.png) center / cover no-repeat; }
.mid-grid { display: grid; grid-template-columns: 292px 260px 260px 448px; grid-template-rows: 224px 224px; gap: 20px; }
.tile-insta { grid-row: 1 / 3; position: relative; padding: 50px 18px 18px; border-radius: 20px; background: linear-gradient(160deg, #3aa2c9, #1a6f9e); color: #fff; overflow: hidden; }
.tile-insta .t-en { display: block; color: #fff; padding-left: 40px; font-size: 14px; font-weight: 600; }
.tile-insta strong { display: block; margin-top: 10px; padding-left: 2px; font-size: 32px; font-weight: 600; line-height: 1.3; }
.insta-img { position: absolute; left: 18px; right: 18px; bottom: 18px; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.2) url(/assets/img/icon_instagram.png) center / 80px no-repeat; }
.insta-img img { width: 100%; height: 100%; object-fit: cover; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 28px; border: 1px solid var(--c-line); border-radius: 20px; background: #fff; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: var(--c-point); transform: translateY(-3px); }
.t-en { font-size: 12px; font-weight: 600; color: #096889; letter-spacing: .02em; }
.tile strong { margin-top: 6px; font-size: 20px; font-weight: 600; }
.t-ico { width: 80px; height: 80px; margin-top: 12px; }
.t-ico img { width: 80px; height: 80px; }
.go { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 32px; margin-top: 12px; border-radius: 16px; background: var(--c-text); color: #fff; font-size: 18px; font-weight: 600; }
.tile-donation { grid-column: 2 / 4; flex-direction: row; align-items: center; padding: 16px 20px; gap: 0; }
.don-img { flex: 0 0 336px; height: 193px; border-radius: 20px; overflow: hidden; }
.don-img img { width: 100%; height: 100%; object-fit: cover; }
.don-txt { flex: 1; display: flex; flex-direction: column; align-items: center; }
.don-txt .t-en { text-transform: none; }
.cal { grid-column: 4; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 10px; }
.cal-today { display: flex; align-items: center; gap: 20px; height: 99px; padding: 0 22px; border-radius: 20px; background: #1d6b94; color: #fff; }
.ct-day { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ct-day b { font-size: 40px; }
.ct-day span { margin-top: 4px; font-size: 18px; font-weight: 500; }
.ct-txt { margin: 0; font-size: 18px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-box { flex: 1; padding: 20px 15px 15px 16px; border: 1px solid var(--c-line); border-radius: 20px; background: #fff; }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 10px; }
.cal-head strong { font-size: 40px; font-weight: 700; line-height: 1; }
.cal-head a { font-size: 18px; font-weight: 500; }
.cal-week { margin: 0; padding: 0; list-style: none; }
.cal-week li { display: flex; align-items: center; gap: 22px; height: 55px; margin-top: 10px; padding: 0 20px; border-radius: 10px; background: #f7f7f7; color: var(--c-sub); }
.cw-day { display: flex; flex-direction: column; align-items: center; width: 32px; line-height: 1; }
.cw-day b { font-size: 24px; }
.cw-day em { font-style: normal; font-size: 14px; font-weight: 500; margin-top: 2px; }
.cw-txt { min-width: 0; font-size: 14px; font-weight: 500; }
.cw-txt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-grid { width: 100%; border-collapse: collapse; text-align: center; font-size: 15px; }
.cal-grid th { padding: 4px 0 8px; font-weight: 600; color: var(--c-sub); }
.cal-grid td { height: 38px; padding: 0; }
.cal-grid td span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; }
.cal-grid .sun { color: #e04848; } .cal-grid .sat { color: #2f6bd1; }
.cal-grid td.has span { position: relative; font-weight: 700; }
.cal-grid td.has span::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c-point); }
.cal-grid td.today span { background: var(--c-point); color: #fff; font-weight: 700; }
.cal-grid td.today span::after { background: #fff; }

/* 갤러리 */
.m-gal { margin-top: 140px; }
.gal-sl { display: flex; gap: 24px; margin-top: 39px; }
.gal-main { flex: 0 0 600px; position: relative; height: 416px; }
.gm-item { position: absolute; inset: 0; display: flex; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .4s; }
.gm-item.on { opacity: 1; visibility: visible; }
.gm-img { flex: 0 0 312px; height: 416px; border-radius: 16px; overflow: hidden; background: #f3f3f3; }
.gm-img img { width: 100%; height: 100%; object-fit: cover; }
.gm-txt { flex: 1; min-width: 0; padding-top: 2px; }
.gm-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; font-weight: 600; line-height: 1.45; }
.gm-txt span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin-top: 20px; font-size: 20px; color: var(--c-sub); line-height: 1.5; }
.gal-side { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 28px; }
.gal-more { position: absolute; left: -288px; bottom: 30px; margin: 0; }
.gal-more a { font-size: 18px; font-weight: 500; }
.gal-bar { display: block; width: 200px; height: 3px; margin-top: 8px; background: var(--c-line); }
.gal-bar i { display: block; height: 3px; background: var(--c-gray); transition: width .3s, margin-left .3s; }
.gal-thumbs { display: flex; gap: 24px; overflow: hidden; flex: 1; }
.gt { flex: 0 0 200px; height: 283px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #f3f3f3; cursor: pointer; transition: opacity .2s; }
.gt img { width: 100%; height: 100%; object-fit: cover; }
.gt.cur { display: none; }
.gal-prev, .gal-next { flex: 0 0 30px; width: 30px; height: 30px; border: 0; cursor: pointer; background: center / 30px no-repeat; }
.gal-prev { background-image: url(/assets/img/icon_gall_prev.png); }
.gal-next { background-image: url(/assets/img/icon_gall_next.png); }
.gal-empty { margin-top: 30px; color: var(--c-gray); }

/* SNS 띠 */
.m-sns { margin-top: 132px; height: 300px; display: flex; align-items: center; text-align: center; color: #fff; background: #0b4f6f url(/assets/img/opt/bg_strip_banner.webp) center / cover no-repeat; }
.m-sns .wrap { width: 100%; }
.m-sns h2 { margin: 0; font-size: 32px; font-weight: 600; }
.m-sns .tags { margin: 14px 0 0; font-size: 24px; color: #ddd; }
.m-sns .tags span + span { margin-left: 18px; }
.sns-btns { display: flex; justify-content: center; gap: 20px; margin: 22px 0 0; }
.sns-btns a { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.7); transition: background .2s; }
.sns-btns a:hover { background: #fff; }
.sns-btns img { width: 40px; height: 40px; }

/* 협력기관 (흘러감, 마우스 올리면 멈춤) */
.m-partner { overflow: hidden; padding: 40px 0; background: #fff; }
.pt-track { display: flex; gap: 24px; width: max-content; animation: pt-flow 40s linear infinite; }
.m-partner { position: relative; }
.m-partner:not(.playing):hover .pt-track, .m-partner:not(.playing):focus-within .pt-track, .m-partner.paused .pt-track { animation-play-state: paused; }
/* 25번: 멈춤·다시 시작 단추 (두 줄 = 멈춤, 세모 = 다시 시작) */
.mv-pause { position: absolute; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); cursor: pointer; }
.mv-pause::before { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 14px; transform: translate(-50%, -50%); border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.mv-pause.on::before { width: 0; height: 0; border-left: 12px solid #fff; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
.mv-pause:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.hero-pause { right: 20px; top: 20px; }
@media (max-width: 1024px) { .hero-pause { right: 10px; top: 10px; width: 30px; height: 30px; } }
.pt-pause { right: 10px; top: 50%; margin-top: -18px; }
.pt { display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; border: 1px solid var(--c-line); background: #fff; }
.pt img { max-width: 180px; max-height: 50px; object-fit: contain; }
@keyframes pt-flow { to { transform: translateX(calc(-50% - 12px)); } }
@media (prefers-reduced-motion: reduce) { .pt-track { animation: none; } .hero-track { transition: none; } }
.is-main .ft { margin-top: 0; }

/* ---------- 태블릿 ---------- */
@media (max-width: 1360px) {
  .intro-t { font-size: 48px; line-height: 60px; padding-left: 20px; }
  .intro-t b { padding-left: 180px; }
  .quick { gap: 16px; }
  .mid-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }
  .tile-insta { grid-row: auto; min-height: 420px; }
  .tile-donation { grid-column: 2 / 4; }
  .cal { grid-column: 1 / -1; grid-row: auto; }
  .gal-main { flex-basis: 520px; }
}
/* ---------- 모바일 (시안 1000 폭 → 화면 폭 비율) ---------- */
@media (max-width: 1024px) {
  .hero { margin-top: 10px; border-radius: 16px; aspect-ratio: 880 / 540; }
  .hero-prev, .hero-next { width: 42px; height: 42px; margin-top: -21px; background-size: 42px; }
  .hero-prev { left: 6px; } .hero-next { right: 6px; }
  .hero-search { bottom: 14px; }
  .hero-search input { height: 46px; padding: 0 52px 0 16px; font-size: 15px; }
  .hero-search button { right: 8px; top: 6px; width: 34px; height: 34px; background-size: 34px; }
  .intro { flex-direction: column; align-items: stretch; margin-top: 30px; }
  .intro-t { padding: 0; font-size: 26px; line-height: 34px; }
  .intro-t b { padding-left: 110px; }
  .quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; margin-top: 26px; }
  .quick a { width: auto; }
  .q-ico { width: 70px; height: 70px; border-radius: 14px; }
  .q-ico img { width: 36px; height: 36px; }
  .quick em { font-size: 13px; margin-top: 8px; white-space: normal; }
  .m-notice { margin-top: 50px; }
  .sec-en { font-size: 12px; } .sec-en::before { width: 16px; height: 16px; background-size: 16px; }
  .sec-t { font-size: 22px; }
  .n-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .n-cards li { height: auto; }
  .n-cards a { padding-bottom: 40px; }
  .n-img { height: auto; aspect-ratio: 880 / 486; }
  .n-cards strong { margin: 16px 16px 0; font-size: 16px; }
  .no-img strong { margin-top: 18px; }
  /* 40번: 모바일 시안 — 사진 있으면 본문 최대 5줄, 없으면 최대 10줄 (날짜 자리는 아래 padding 으로 비워 둠) */
  .n-txt { margin: 8px 16px 0; font-size: 14px; -webkit-line-clamp: 5; }
  .no-img .n-txt { -webkit-line-clamp: 10; }
  .n-cards time { left: 16px; bottom: 16px; font-size: 12px; }
  .more-c { margin-top: 30px; }
  .more-c a { font-size: 16px; gap: 10px; }
  .more-c i { width: 40px; height: 40px; background-size: 40px; }
  .m-mid { margin-top: 50px; padding: 30px 0; }
  .mid-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile-insta { grid-column: 1 / -1; min-height: 0; padding: 22px 16px 16px; }
  .tile-insta strong { font-size: 20px; }
  .tile-insta .t-en { padding-left: 0; font-size: 11px; }
  .insta-img { position: relative; left: auto; right: auto; bottom: auto; display: block; margin-top: 16px; aspect-ratio: 16 / 9; border-radius: 14px; }
  .tile { padding: 18px 8px 16px; border-radius: 16px; }
  .tile strong { font-size: 15px; }
  .t-en { font-size: 10px; }
  .t-ico, .t-ico img { width: 56px; height: 56px; }
  .go { width: 56px; height: 26px; font-size: 14px; }
  .tile-donation { grid-column: 1 / -1; padding: 12px; gap: 12px; }
  .don-img { flex: 0 0 48%; height: auto; aspect-ratio: 336 / 193; border-radius: 14px; }
  .cal { grid-column: 1 / -1; }
  .cal-today { height: auto; padding: 16px; border-radius: 16px; gap: 14px; }
  .ct-day b { font-size: 26px; } .ct-day span { font-size: 12px; }
  .ct-txt { font-size: 14px; }
  .cal-box { border-radius: 16px; padding: 16px 12px 12px; }
  .cal-head strong { font-size: 24px; } .cal-head a { font-size: 14px; }
  .cal-week li { height: 50px; padding: 0 14px; gap: 14px; }
  .cw-day b { font-size: 18px; } .cw-day em { font-size: 11px; }
  .cw-txt { font-size: 13px; }
  .cal-grid { font-size: 13px; }
  .cal-grid td { height: 34px; }
  .cal-grid td span { width: 28px; height: 28px; }
  .m-gal { margin-top: 60px; }
  .gal-sl { flex-direction: column; gap: 14px; margin-top: 20px; }
  .gal-main { flex: none; height: auto; }
  .gm-item { position: relative; inset: auto; display: none; flex-direction: column; gap: 12px; }
  .gm-item.on { display: flex; }
  .gm-img { flex: none; height: auto; aspect-ratio: 4 / 3; border-radius: 14px; }
  .gm-txt strong { font-size: 16px; }
  .gm-txt span { margin-top: 6px; font-size: 14px; -webkit-line-clamp: 2; }
  .gal-side { gap: 10px; }
  .gal-more { position: static; order: 3; flex: 0 0 auto; display: none; }
  .gal-thumbs { gap: 8px; }
  .gt { flex: 0 0 calc((100% - 16px) / 3); height: auto; aspect-ratio: 200 / 283; border-radius: 10px; }
  .gal-prev, .gal-next { flex-basis: 26px; width: 26px; height: 26px; background-size: 26px; }
  .m-sns { margin-top: 60px; height: 200px; background-image: url(/assets/img/opt/m_bg_strip_banner.webp); }
  .m-sns h2 { font-size: 18px; }
  .m-sns .tags { font-size: 14px; margin-top: 8px; }
  .m-sns .tags span + span { margin-left: 8px; }
  .sns-btns { gap: 12px; margin-top: 14px; }
  .sns-btns a { width: 50px; height: 50px; }
  .sns-btns img { width: 26px; height: 26px; }
  .m-partner { padding: 24px 0; }
  .pt-track { gap: 12px; animation-duration: 30s; }
  .pt { width: 130px; height: 44px; }
  .pt img { max-width: 116px; max-height: 36px; }
  @keyframes pt-flow { to { transform: translateX(calc(-50% - 6px)); } }
}