/* page-life-care.css — site.css 에서 분리(2026-08-03). 내용 무변경, 위치만 이동. 불러오는 순서: tokens → _shell → _components → _legacy → page-* ✏️ 이 페이지 전용. 이 페이지 세션이 고치는 유일한 CSS. */ /* ── 우리가 지켜온 것 (스탯 행) ── */ .dk-g4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--dk-hairline-soft); border: 1px solid var(--dk-hairline-soft); border-radius: var(--dk-radius-lg); overflow: hidden; } .dk-stat4 { background: #fff; padding: 30px 20px; text-align: center; transition: background var(--dk-dur-base) var(--dk-ease-out); } .dk-stat4:hover { background: var(--dk-surface-soft); } .dk-stat4 .v { font-family: var(--dk-font-display); font-size: clamp(20px,2.6vw,26px); font-weight: 800; color: var(--dk-ink); margin-bottom: 8px; } .dk-stat4 .v em { color: var(--dk-accent-red); font-style: normal; } .dk-stat4 .k { font-size: 13px; color: var(--dk-fg-3); } /* ★2026-07-28 — `.dk `를 붙여 실제로 먹게 고침. 그동안 `.dk p`(0-1-1)에 밀려 이 규칙(0-1-0)이 한 번도 적용된 적 없었다(주석 크기·색이 본문과 동일했음). */ .dk .dk-table-note { margin: var(--dk-gap-xs) 4px 0; font-size: 13px; color: var(--dk-fg-muted); line-height: 1.7; } /* ── 일정·일과표 블록(생활환경 페이지) — 2026-07-28 신설. 한 섹션 안에 월간 일정표 / 중등부 일과 / 고등부 일과 3개를 쌓는다. ── */ .dk-tt-block { margin-top: var(--dk-gap-xl); } .dk-tt-block:first-of-type { margin-top: 0; } .dk-tt-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: 'Paperlogy','Pretendard',sans-serif; font-size: clamp(19px,2vw,23px); font-weight: 700; line-height: 1.4; letter-spacing: var(--dk-track-snug); color: var(--dk-ink); margin: 0 0 6px; } .dk-tt-h .no { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--dk-radius-sm); background: var(--dk-surface-dark); color: #fff; font-family: var(--dk-font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.5px; } .dk .dk-tt-sub { font-size: 14.5px; color: var(--dk-fg-muted); line-height: 1.7; margin: 0 0 var(--dk-gap-sm); } @media (max-width: 640px) { .dk-tt-h { font-size: 18px; } .dk-tt-sub { font-size: 13.5px; } } /* ★2026-07-26 killaislop.com #17 반영 — "좌측컬러바+둥근카드"를 아무 안내문에나 씌우던 걸 정리. dk-callout은 정말 중요한 결주(수치 정의·근거·상태)에만 남기고, 그 외 평범한 보충설명은 박스 없는 dk-plain-note로 내림. */ .dk-plain-note { font-size: 14px; line-height: 1.7; color: var(--dk-fg-3); margin: 0; } /* ── 반응형 안전장치 ── */ @media (max-width: 480px) { .dk-g4 { grid-template-columns: 1fr 1fr; } } /* ── ② 하루 일과표 — 좌측 시간대 밴드 + 과목 pill + 선택 묶음 ── */ table.dk-tt { width: 100%; border-collapse: collapse; } table.dk-tt thead th { background: var(--dk-surface-dark); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .3px; padding: 12px; text-align: left; white-space: nowrap; } table.dk-tt td { border-top: 1px solid var(--dk-hairline-soft); } table.dk-tt tbody tr:nth-child(even) td:not(.dk-tt-grp):not(.dk-tt-p) { background: var(--dk-surface-soft); } .dk-tt-grp { width: 56px; padding: 12px 4px; text-align: center; vertical-align: middle; font-size: 12px; font-weight: 700; color: var(--dk-fg-2); background: var(--dk-surface-soft); border-right: 2px solid #fff; } .dk-tt-grp.am { background: #efefef; } .dk-tt-grp.pm { background: #e8e8e8; } .dk-tt-grp.ev { background: #d0d0d0; } .dk-tt-grp.life { color: var(--dk-fg-muted); background: var(--dk-surface-soft); } .dk-tt-grp svg { display: block; width: 16px; height: 16px; margin: 0 auto 5px; stroke: currentColor; fill: none; stroke-width: 1.8; } .dk-tt-p { width: 78px; padding: 12px 8px; text-align: center; vertical-align: middle; font-size: 11.5px; font-weight: 700; color: var(--dk-fg-2); background: var(--dk-surface-soft); white-space: nowrap; } .dk-tt-c { padding: 11px 12px; vertical-align: middle; } .dk-tt-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .dk-tt-line + .dk-tt-line { margin-top: 8px; } .dk .dk-tt-txt { font-size: 13px; color: var(--dk-fg-2); line-height: 1.55; margin: 0; min-width: 0; } .dk .dk-tt-txt.dim { color: var(--dk-fg-muted); } .dk-pill { display: inline-flex; align-items: center; flex: none; border-radius: var(--dk-radius-xs); padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .2px; } .dk-pill--math { background: var(--dk-accent-red); color: #fff; } .dk-pill--eng { background: var(--dk-surface-dark); color: #fff; } .dk-pill--sci { background: var(--dk-hairline); color: var(--dk-ink); } .dk-pill--self { background: #fff; color: var(--dk-fg-2); box-shadow: inset 0 0 0 1px var(--dk-hairline); } .dk-pill--life { background: #fff; color: var(--dk-fg-3); box-shadow: inset 0 0 0 1px var(--dk-hairline-soft); } .dk-tt-choice { border-left: 3px solid var(--dk-surface-dark); padding-left: 11px; } .dk-tt-or { display: inline-block; background: #fff; border: 1px solid var(--dk-accent-red); color: var(--dk-accent-red); font-size: 10px; font-weight: 800; border-radius: var(--dk-radius-xs); padding: 1px 6px; margin: 5px 0; } .dk-tt-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 14px 2px 0; font-size: 12px; color: var(--dk-fg-3); } .dk-tt-legend span { display: inline-flex; align-items: center; gap: 6px; } .dk-tt-legend i { width: 12px; height: 12px; border-radius: 3px; display: block; flex: none; border: 1px solid rgba(0,0,0,.06); } /* ── ③ 월간 일정표 — 다크 주차 블록 + 평일 병합 ── */ .dk-mon { border-radius: var(--dk-radius-md); overflow: hidden; background: #fff; border: 1px solid var(--dk-hairline-soft); box-shadow: 0 2px 10px rgba(20,40,90,.06); } .dk-mon-head { display: grid; grid-template-columns: 48px 1.5fr repeat(5,1fr) 1.5fr; background: var(--dk-surface-dark); } .dk-mon-head div { padding: 11px 2px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; } .dk-mon-head div:first-child { font-size: 11px; opacity: .82; } .dk-mon-head div.we { background: rgba(255,255,255,.16); } .dk-mon-row { display: grid; grid-template-columns: 48px 1fr; border-top: 1px solid var(--dk-hairline-soft); } .dk-mon-wk { background: var(--dk-surface-dark); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1.25; padding: 5px 2px; } .dk-mon-wk b { font-size: 16px; font-weight: 700; letter-spacing: -.5px; } .dk-mon-cells { display: grid; grid-template-columns: 1.5fr repeat(5,1fr) 1.5fr; gap: 3px; padding: 7px; } .dk-mon-day { border-radius: var(--dk-radius-xs); padding: 7px 4px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; } .dk-mon-day .d { font-size: 9.5px; color: var(--dk-fg-muted); font-variant-numeric: tabular-nums; } .dk-mon-day .n { font-size: 10.5px; font-weight: 700; line-height: 1.3; } .dk-mon-day.reg { background: var(--dk-surface-soft); border: 1px solid var(--dk-hairline-soft); } .dk-mon-day.reg .n { color: var(--dk-fg-3); font-weight: 600; } .dk-mon-day.open { background: var(--dk-accent-red); } .dk-mon-day.open .d { color: rgba(255,255,255,.72); } .dk-mon-day.open .n { color: #fff; } .dk-mon-day.we { background: var(--dk-surface-elevated); border: 1px solid var(--dk-hairline); } .dk-mon-day.we .n { color: var(--dk-ink); } /* ★2026-08-03 — 인라인 여백을 클래스로. 값 무변경. */ .dk .page-life-care-mb { margin-bottom: var(--dk-gap-lg); } .dk .page-life-care-mt-lg { margin-top: var(--dk-gap-lg); } .dk .page-life-care-mt-md { margin-top: var(--dk-gap-md); } .dk .page-life-care-h3 { font: var(--dk-display-xs); color: var(--dk-ink); margin: 0 0 var(--dk-gap-sm); } .dk .page-life-care-h3--gap { margin-top: var(--dk-gap-lg); } /* ══════════════════════════════════════════════════════════════ 시설 갤러리 — 필핀 시설 페이지(facility.imweb.html) 01~05 골격 이식 2026-08-03 회장 지시. 형태는 필핀 그대로, 색만 국내 코발트로 치환한다. · 배열 4종(p0·p2·p3·p4)을 섹션마다 다르게 쓴다. 바깥 상자(폭·높이·간격)는 전부 같아 스크롤 리듬은 유지되고 섹션마다 얼굴만 달라진다. · 변주에 근거를 둔다 — 사진이 노출분보다 많은 섹션(전경 11장)에만 「전체 보기」 버튼이 붙고, 4장짜리는 다 보이므로 버튼 대신 사진이 그 칸을 채운다. · 전역에 두는 클래스는 `.page-life-care-gal` 하나뿐. 나머지는 그 안으로 스코프한다 (공통 이름공간 침범 금지 + 요소 기본값 `.dk h3`(0,1,1) 를 이기는 특성도 확보). ══════════════════════════════════════════════════════════════ */ .dk .page-life-care-gal--alt { background: var(--dk-surface-card); } .page-life-care-gal .fac + .fac { margin-top: var(--dk-gap-xl); } .page-life-care-gal .hd { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; } .page-life-care-gal .hd .no { font-size: 15px; font-weight: 400; color: var(--dk-accent-red); flex-shrink: 0; font-variant-numeric: tabular-nums; } .dk .page-life-care-gal .hd .nm { font-family: var(--dk-font-display); font-size: 36px; font-weight: 700; line-height: 1.25; margin: 0; flex-shrink: 0; color: var(--dk-ink); } .page-life-care-gal .hd .rule { flex: 1; height: 1px; background: var(--dk-hairline); } .page-life-care-gal .hd .cnt { font-size: 13px; font-weight: 700; color: var(--dk-fg-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .page-life-care-gal .bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 260px 200px; gap: 8px; } .page-life-care-gal .b { border-radius: var(--dk-radius-md); overflow: hidden; position: relative; background: var(--dk-surface-elevated); cursor: zoom-in; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .page-life-care-gal .b img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .page-life-care-gal .b:hover img { transform: scale(1.04); } .page-life-care-gal .b > svg { width: 22px; height: 22px; stroke: var(--dk-fg-muted); fill: none; stroke-width: 1.6; } .dk .page-life-care-gal .b .t { font-size: 12.5px; font-weight: 700; color: var(--dk-fg-2); margin: 0; } .dk .page-life-care-gal .b .s { font-size: 11px; color: var(--dk-fg-muted); margin: 0; } .page-life-care-gal .b.wait { background: repeating-linear-gradient(45deg, var(--dk-surface-elevated), var(--dk-surface-elevated) 9px, var(--dk-surface-soft) 9px, var(--dk-surface-soft) 18px); outline: 2px dashed var(--dk-warning-ink); outline-offset: -6px; } .dk .page-life-care-gal .b.wait .t { color: var(--dk-warning-ink); } .page-life-care-gal .more { grid-column: 3; grid-row: 2; border: none; padding: 0; border-radius: var(--dk-radius-md); background: var(--dk-ink); cursor: pointer; font-family: inherit; transition: background .2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .page-life-care-gal .more:hover { background: var(--dk-accent-red); } .page-life-care-gal .more .c { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .page-life-care-gal .more .l { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); letter-spacing: .5px; } .page-life-care-gal .bul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 0; } .page-life-care-gal .bul span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dk-fg-2); } .page-life-care-gal .bul span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dk-accent-red); flex-shrink: 0; } /* ── 배열 ── ★2026-08-21 실사진 27장을 넣고 나서 드러난 문제로 재정리했다. 전에는 배열 4종(p0·p2·p3·p4)을 섹션마다 다르게 썼는데, 그 변주들이 사진을 죽였다 — 촬영분이 전부 3:2 인데 칸이 4.92:1(강당 큰 칸) · 4.55:1(숙소) 이 되어 **사진의 30% 만** 남았고, 모바일에서는 세로로 길쭉한 0.29:1 이 되어 **20%** 만 남았다. 자리표시(빈 상자)일 때는 안 보이던 종류다. 필핀 원본(facility.imweb.html)을 다시 재보니 배열이 **하나뿐**이고 78~93% 가 남는다. -> 변주를 버리고 둘로만 간다. 나누는 근거는 취향이 아니라 **사진 장수**다. · 11장 구역(전경) = 필핀 원본 배열 그대로. 큰 칸 + 작은 칸 3 + 「전체 보기」. · 4장 구역 4개 = 가로 4칸, 칸마다 3:2. 다 보이므로 더보기 버튼이 필요 없다. 회장 규칙 「병렬 항목 N개는 레이아웃을 통일한다」와도 맞는다 — 4장 구역 넷이 같은 얼굴이 된다. */ .page-life-care-gal .p0 .bm { grid-column: 1; grid-row: 1/3; } .page-life-care-gal .p0 .b1 { grid-column: 2; grid-row: 1; } .page-life-care-gal .p0 .b2 { grid-column: 3; grid-row: 1; } .page-life-care-gal .p0 .b3 { grid-column: 2; grid-row: 2; } /* 4장 구역 — 칸이 원본과 같은 3:2 라 잘리는 곳이 없다 */ .page-life-care-gal .bento--4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } .page-life-care-gal .bento--4 .b { grid-column: auto; grid-row: auto; aspect-ratio: 3/2; } /* 769~1279 — .dk-wrap 이 좌우 48px 패딩을 갖는 구간. 칸 폭만 줄고 행 높이는 260/200px 로 고정이라 큰 칸이 1.16:1 에서 0.66:1 까지 눌렸다(사진 77% -> 44%). 행을 콘텐츠 폭의 같은 비율(20.3% / 15.6%)로 묶어 어느 폭에서나 같은 얼굴이 되게 한다. 1280px 이상에서는 패딩이 0 이 되므로 위의 고정값(260/200)이 그대로 맞는다. */ @media (min-width: 769px) and (max-width: 1279px) { .page-life-care-gal .p0 .bento { grid-template-rows: calc(20.3vw - 19.5px) calc(15.6vw - 15px); } } /* ── 모바일 — 배열마다 얼굴이 달라야 스크롤이 안 지겹다 ── */ @media (max-width: 768px) { .page-life-care-gal .hd { gap: 10px; margin-bottom: 20px; } .dk .page-life-care-gal .hd .nm { font-size: 24px; } .page-life-care-gal .bento { grid-template-columns: 1fr 1fr; gap: 6px; } /* ⚠️ 원래 이 선언이 `.p0` 에 걸려 있었다. 그런데 `.p0` 는 바깥 상자(.fac)고 그리드는 그 안의 `.bento` 다 — 즉 폰 행 높이가 처음부터 한 번도 안 먹었다. 데스크톱 값(260/200)이 그대로 남아 폰에서 칸이 세로로 길쭉해졌고, 사진을 넣고 나서야 드러났다(전경 b1 이 0.69:1 로 46% 만 남음). */ .page-life-care-gal .p0 .bento { grid-template-rows: 52vw 34vw 34vw; } .page-life-care-gal .p0 .bm { grid-column: 1/3; grid-row: 1; } .page-life-care-gal .p0 .b1 { grid-column: 1; grid-row: 2; } .page-life-care-gal .p0 .b2 { grid-column: 2; grid-row: 2; } .page-life-care-gal .p0 .b3 { grid-column: 1; grid-row: 3; } .page-life-care-gal .p0 .more { grid-column: 2; grid-row: 3; } /* 4장 구역은 폰에서 2x2. 칸 비율(3:2)은 그대로 간다. */ .page-life-care-gal .bento--4 { grid-template-columns: 1fr 1fr; } } /* ── 확대창 ── 이름을 갤러리 전용으로 분리한다. 슬롯 라벨과 같은 이름을 쓰면 `position:fixed; display:none` 이 라벨을 덮어 글자가 사라진다. 이름 겹침은 특성도로 막히지 않는다 — 상대가 선언하지 않은 속성은 그대로 먹기 때문이다. (2026-08-03 프리뷰 제작 중 실제로 밟은 버그) */ .dk-galbox { position: fixed; inset: 0; background: rgba(12,14,18,.94); z-index: 60; display: none; align-items: center; justify-content: center; padding: 56px 16px; } .dk-galbox.is-on { display: flex; } .dk-galbox__fig { max-width: 1000px; width: 100%; text-align: center; margin: 0; } .dk-galbox__img { background: #333; border-radius: var(--dk-radius-md); aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; } /* ★2026-08-21 실사진 연결 — 촬영분이 전부 3:2 인데 칸이 4:3 이라 cover 로 채우면 25% 가 잘린다. 확대창은 「크게 보려고」 여는 자리이므로 자르지 않고 contain 으로 통째로 보여준다. 남는 위아래는 칸 배경(#333)이 그대로 받는다. */ .dk-galbox__img img { width: 100%; height: 100%; object-fit: contain; display: block; } .dk-galbox__img img[hidden] { display: none; } .dk .dk-galbox__img .t { font-size: 15px; font-weight: 700; color: #efefef; margin: 0; } .dk .dk-galbox__img .s { font-size: 12.5px; color: var(--dk-fg-muted); margin: 0; } .dk .dk-galbox__cap { margin: 14px 0 0; color: #efefef; font-size: 14px; font-weight: 700; } .dk .dk-galbox__idx { margin: 4px 0 0; color: var(--dk-fg-cool-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; } .dk-galbox__x, .dk-galbox__nav { position: absolute; background: rgba(255,255,255,.12); border: none; color: #fff; border-radius: 50%; cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; } .dk-galbox__x { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 20px; } .dk-galbox__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 22px; } .dk-galbox__nav.is-prev { left: 16px; } .dk-galbox__nav.is-next { right: 16px; } .dk-galbox__x:hover, .dk-galbox__nav:hover { background: rgba(255,255,255,.22); } .dk-galbox__x:focus-visible, .dk-galbox__nav:focus-visible { outline: 2px solid var(--dk-accent-onDark); outline-offset: 2px; } /* ── 히어로 배경 이미지 (★2026-08-20 회장 지시) ────────────────────────── "인덱스 빼고는 히어로 섹션 배경을 각자에 어울리는 이미지로. 옅은 블랙박스도." 원본 = 활동사진 daily-life-07 (숙소에서 학생과 담당자가 침구를 정리하는 모습). 🔒 _shell.css 는 안 건드린다 — 페이지마다 그림이 다르니 각자 파일에서 얹는다. 홈은 실물 영상이라 이 규칙과 무관하다. ⚠️ 히어로는 600px 고정 높이의 풀블리드라 3:2 원본이 세로로 크게 잘린다. 슬롯 사진의 「75% 이상 남기기」 기준은 여기 적용 대상이 아니다(그건 콘텐츠 칸 기준). 대신 background-position 으로 피사체가 잘려 나가지 않는 지점을 잡는다. */ /* ★2026-08-21 회장 지적 — "히어로에 회색창 1초 떴다가 로딩된다". 원인 둘이었다. ① CSS 배경이라 브라우저가 CSS 5장을 다 받은 뒤에야(988ms) 사진을 요청한다. → HTML 에 preload 를 넣어 요청을 앞으로 당겼다. ② 그동안 보이는 것이 회색이었다. placeholder 배경이 투명이라 흰 섹션 위에 검은 오버레이만 얹혀 회색이 된 것이다(_shell.css 의 남색 그라디언트는 여기서 background-image 를 덮어써서 사라진다). → 20px 짜리 흐린 축소본(아래 base64, 152바이트)을 아래층에 깔았다. 회색 대신 그 사진의 흐릿한 형태가 보이다가 실물이 도착하면 덮인다. ⚠️ background-image 를 새로 선언하는 곳은 아래층(var(--hero-lqip))을 같이 써야 한다. 한 층만 쓰면 흐린 층이 사라져 다시 회색이 된다. */ .dk-bg-video-section .dk-bg-video-placeholder { --hero-lqip: url("data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAABwAwCdASoUAA0APsFOoUqnpCMhsAgA8BgJQBadAkVu1tnLYgAA/mDnllZkDLXJQpl5n5oAWsIa5KhTxFQU/A9QLgd8/1NQ4NteskYf8fbIyCYULGXDZkGBVupdHHM56iCS3Zjr0qtJq1mv0O4IZF2dwXxH2PrEuTihYL/aZyxlgleScAA="); background-image: url("../images/hero/dakgong-domestic-hero-life-care-1920.webp"), var(--hero-lqip); background-size: cover; background-position: center 42%; } @media (max-width: 820px) { .dk-bg-video-section .dk-bg-video-placeholder { background-image: url("../images/hero/dakgong-domestic-hero-life-care-1200.webp"), var(--hero-lqip); } } /* ★블랙박스 — 5페이지 전부에서 흰 글자가 읽히는 **최소값**이다. 회장 "옅은". 실측(글자가 실제 놓인 줄 상자 기준, 기준 h1 3:1 · 리드 4.5:1) — PC .62/.32/.08 → teachers 리드 4.35 ✗ · .62/.38/.10 → 최저 4.77 ✓ ← 채택 모바일 .62/.34/.28 → 커리큘럼 3.50 · 자습 3.55 · 생활 3.71 ✗ .66/.48/.42 + 아래→위 .46 → 최저 5.96 ✓ ← 채택 ⚠️ 모바일은 글이 화면 폭을 거의 다 써서 가로 그라디언트만으론 안 된다. 리드가 화면 세로 중앙쯤에 놓이므로 아래에서 올라오는 겹을 70%까지 끌어올렸다. */ .dk-bg-video-section::after { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.10) 75%); } @media (max-width: 768px) { .dk-bg-video-section::after { background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.48) 60%, rgba(0,0,0,.42) 100%), linear-gradient(to top, rgba(0,0,0,.46) 0%, rgba(0,0,0,0) 70%); } } /* ══════════════════════════════════════════════════════════════ TOTAL CARE 사진 4장 — 2026-08-21 회장 지시. 여기 있던 자리표시 3블록(.dk-ph-tri · .dk-ph-split · .dk-ph-band)을 걷어낸 자리다. ★처음엔 9장을 크기 다른 콜라주로 넣었다가 회장 지적으로 4장으로 줄였다 (*"중복되는 사진 졸라 많잖아"* — 같은 상황이 여러 장이면 반복으로 읽힌다). 4장이 되면서 배열도 바뀐다 — 같은 페이지 시설 갤러리가 이미 「나누는 근거는 취향이 아니라 사진 장수」로 정리돼 있고(아래 「배열」 절), 4장이면 가로 4칸이다. 4장짜리 구역 4개와 같은 얼굴이 되고, 칸이 원본과 같은 3:2 라 어디서도 안 잘린다. ══════════════════════════════════════════════════════════════ */ .page-life-care-mos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: var(--dk-gap-lg); } .page-life-care-mos .m { border-radius: var(--dk-radius-md); overflow: hidden; background: var(--dk-surface-elevated); aspect-ratio: 3 / 2; } .page-life-care-mos .m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .page-life-care-mos .m:hover img { transform: scale(1.04); } /* 폰 — 2x2. 칸 비율(3:2)은 그대로 간다. 시설 갤러리 4장 구역도 폰에서 2칸이라 두 묶음이 같은 얼굴이 된다. */ @media (max-width: 768px) { .page-life-care-mos { grid-template-columns: 1fr 1fr; gap: 6px; } } /* ══════════════════════════════════════════════════════════════ 식단 자동 슬라이드 — 2026-08-21 회장 지시. 닥공 필핀 캠프 사이트에서 **그대로** 가져왔다 (출처: clients/dakgong/imweb/facility.imweb.FINAL.html 의 인라인