/* 공통 바닥 — 이 시안은 자기 눈금을 갖고 있어 layouts.css 의 눈금을 쓰지 않습니다. */
html { overflow-x: hidden; }
h1, h2, h3, h4 { line-height: 1.3; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 天水福祉事業会(tensui.or.jp) — 흰 바탕에 청회색(#394f57) 명조. 히어로는 큰 사진 옆에 세로로 선 90px
   제목 「ちまのいすんて」와 작은 설명, 「くわしくみる」 사각 버튼. 절마다 사진이 종이처럼 겹쳐
   놓이고 제목은 늘 세로 쓰기 → 법인 소개(단체 사진) → 온라인숍·「사람」 두 덩어리 → 잇다·신사·블로그
   작은 셋 → 「우리가 하는 일」 사진 세 기둥에 세로 이름 → 새 소식(연호 날짜) → 긴 열 푸터.
   제목만 세로로 세우고, 본문은 어르신 가족이 읽기 쉽도록 가로 15px 로 둡니다. */
/* 색 전환기(palette.js)가 색을 고르기 전에는 이 시안 본래의 색을 씁니다.
   .js-pal 이 붙으면 palettes.css 의 --primary 가 이깁니다. */
body:not(.js-pal) { --primary: #3a8fb7; --primary-dk: #327c9f; --primary-lt: #e3eff5; }
body { --ink: #394f57; --serif: "Gowun Batang", Batang, serif; }
body { color: var(--ink); font-size: 15px; font-family: var(--serif); }
h1, h2, h3 { color: var(--ink); font-weight: 400; font-family: var(--serif); }
p { word-break: keep-all; text-wrap: pretty; }
.v { writing-mode: vertical-rl; }
.v em { font-style: normal; color: var(--primary-dk); }
.sq { display: inline-block; padding: 10px 22px; border: 1px solid var(--ink); font-size: 14px; line-height: 1.4; letter-spacing: .08em; white-space: nowrap; transition: background .2s, color .2s; }
.sq:hover { background: var(--ink); color: #fff; }

.hd { display: flex; align-items: center; min-height: 100px; gap: 40px; }
.logo { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; flex: none; }
.logo i { width: 40px; height: 40px; border-radius: 50% 0 50% 50%; background: var(--primary); flex: none; }
.logo small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--primary-dk); font-family: "Pretendard Variable", sans-serif; }
.hd nav { margin-left: auto; display: flex; gap: 24px; font-size: 14px; font-family: "Pretendard Variable", sans-serif; }
.hd nav a:hover { color: var(--primary-dk); }
.hd__tog { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: "Pretendard Variable", sans-serif; white-space: nowrap; }
.hd__tog i { width: 30px; height: 16px; border-radius: 999px; background: #ccc; }

/* 히어로 — 큰 사진 옆 오른쪽 기둥: 위에 세로 제목 둘, 아래에 가로 설명과 버튼 */
.kv { display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: start; position: relative; padding-bottom: 72px; }
.kv__pic { position: relative; height: 780px; }
.kv__pic img { width: 100%; height: 100%; object-fit: cover; }
.kv__pic::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.5); pointer-events: none; }
.kv__arr { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; background: #fff; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.kv__arr--l { left: 0; } .kv__arr--r { right: 0; }
.kv__t { display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr auto; justify-content: end; column-gap: 28px; height: 780px; }
.kv__t h1 { grid-column: 2; grid-row: 1; font-size: 90px; line-height: 1.05; letter-spacing: .02em; }
.kv__t h2 { grid-column: 1; grid-row: 1; font-size: 17px; line-height: 1.8; letter-spacing: .12em; }
.kv__lead { grid-column: 1 / -1; grid-row: 2; align-self: end; width: 260px; font-size: 16px; line-height: 2; letter-spacing: .02em; margin: 0 0 28px; }
.kv__t .sq { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
.kv__dots { position: absolute; left: 0; bottom: 30px; display: flex; gap: 10px; }
.kv__dots i { width: 30px; height: 2px; background: #c4c4c4; } .kv__dots i:first-child { background: var(--ink); }

.sec { padding: 100px 0; }
.about { display: grid; grid-template-columns: 1fr 60px; gap: 40px; align-items: start; padding-bottom: 180px; }
.about__pic { position: relative; }
.about__pic img { width: 88%; aspect-ratio: 16/10; object-fit: cover; margin-left: auto; }
.about__txt { position: absolute; left: 0; bottom: -100px; width: min(420px, 48%); background: #fff; padding: 36px 40px 40px; }
.about__txt p { font-size: 15px; line-height: 1.95; margin: 0 0 24px; }
.about h2 { font-size: 24px; letter-spacing: .15em; line-height: 1.6; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.blk { position: relative; display: grid; grid-template-columns: 1fr 44px; gap: 24px; align-content: start; }
.blk__pics { position: relative; height: 380px; }
.blk__pics img { position: absolute; object-fit: cover; }
.blk__pics img:nth-child(1) { left: 0; top: 0; width: 60%; height: 60%; border: 1px solid #ddd; padding: 20px; background: #fff; }
.blk__pics img:nth-child(2) { right: 0; bottom: 0; width: 55%; height: 55%; }
.blk__side { display: flex; justify-content: center; }
.blk h2 { font-size: 24px; letter-spacing: .2em; line-height: 1.5; }
.blk__desc { grid-column: 1; margin-top: 8px; }
.blk__desc p { font-size: 15px; line-height: 1.95; margin: 0 0 20px; max-width: 30em; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
.trio > div, .pillars > div { display: grid; grid-template-columns: 1fr 36px; column-gap: 16px; align-content: start; }
.trio img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.trio h3 { font-size: 20px; letter-spacing: .2em; line-height: 1.5; }
.trio p, .pillars p { grid-column: 1 / -1; font-size: 15px; line-height: 1.9; margin: 20px 0 18px; }
.trio .sq, .pillars .sq { grid-column: 1 / -1; justify-self: start; }

.do__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 40px; }
.do__h h2 { font-size: 24px; letter-spacing: .15em; }
.do__h a, .news h2 a { font-size: 14px; letter-spacing: 0; font-family: "Pretendard Variable", sans-serif; white-space: nowrap; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
.pillars img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.pillars h3 { font-size: 22px; letter-spacing: .2em; line-height: 1.5; }

.news h2 { font-size: 24px; letter-spacing: .15em; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.news li { display: grid; grid-template-columns: 150px 70px 1fr 20px; gap: 20px; padding: 20px 0; border-bottom: 1px solid #e5e5e5; font-size: 15px; align-items: center; }
.news li b { font-weight: 400; }
.news li em { font-style: normal; font-size: 14px; } .news li span { font-size: 13px; color: var(--primary-dk); }
.news li i { font-style: normal; font-size: 18px; justify-self: end; }

.ft { padding: 60px 0 36px; font-family: "Pretendard Variable", sans-serif; font-size: 14px; }
.ft__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-bottom: 40px; }
.ft__cols b { display: block; margin-bottom: 10px; font-size: 15px; } .ft__cols b::before { content: "● "; color: var(--primary); font-size: 12px; }
.ft__cols a { display: block; line-height: 2.1; color: #5f5f5f; }
.ft__cols div:nth-child(2) b::before { color: #f2a33a; } .ft__cols div:nth-child(3) b::before { color: #d9534f; } .ft__cols div:nth-child(4) b::before { color: #6cb257; }
.ft__co { border-top: 1px solid #e5e5e5; padding-top: 24px; font-size: 13px; line-height: 1.9; color: #5f5f5f; word-break: keep-all; }
.ft__co b { font-size: 17px; color: var(--ink); font-family: var(--serif); }

@media (max-width: 1100px) {
  .hd { flex-wrap: wrap; gap: 12px 32px; padding: 20px 0; }
  .hd nav { gap: 18px; }
  .kv { grid-template-columns: 1fr 230px; gap: 36px; }
  .kv__t h1 { font-size: 72px; }
  .kv__lead { width: 230px; font-size: 15px; }
}
/* 좁은 화면 — 메뉴는 로고 아래 줄로 내려 늘 보이게 둡니다(스크립트 없음). */
@media (max-width: 900px) {
  .hd { padding: 18px 0 14px; min-height: 0; }
  .hd nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 4px 0; border-top: 1px solid #e5e5e5; padding-top: 10px; }
  .hd nav a { padding: 8px 14px 8px 0; }
  .hd__tog { display: none; }
  .kv { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
  .kv__pic { height: auto; aspect-ratio: 4/3; }
  .kv__dots { position: static; order: 1; margin: 16px 0 28px; }
  .kv__t { order: 2; height: auto; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: 20px; justify-content: stretch; }
  .kv__t h1 { grid-column: 3; font-size: 52px; }
  .kv__t h2 { grid-column: 2; font-size: 16px; }
  .kv__lead { grid-column: 1; grid-row: 1; width: auto; align-self: end; margin: 0; font-size: 15px; }
  .kv__t .sq { grid-row: 2; margin-top: 24px; }
  .sec { padding: 72px 0; }
  .about { grid-template-columns: 1fr 36px; gap: 16px; padding-bottom: 72px; }
  .about__pic img { width: 100%; }
  .about__txt { position: static; width: auto; padding: 24px 0 0; background: none; }
  .about h2 { font-size: 22px; }
  .two, .trio, .pillars { grid-template-columns: 1fr; gap: 64px; }
  .blk { grid-template-columns: 1fr 36px; gap: 16px; }
  .blk__pics { height: 300px; }
  .blk h2, .pillars h3 { font-size: 21px; }
  .trio h3 { font-size: 19px; }
  .news li { grid-template-columns: auto 1fr 20px; gap: 6px 14px; padding: 16px 0; }
  .news li b { grid-column: 1 / 3; grid-row: 2; }
  .news li i { grid-column: 3; grid-row: 1 / 3; }
  .ft__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
.nw { white-space: nowrap; }
/* 카드 셋의 사진·글·버튼 줄을 서로 맞춥니다. */
@media (min-width: 601px) {
  .trio, .pillars { grid-template-rows: auto auto auto; row-gap: 0; }
  .trio > div, .pillars > div { grid-row: span 3; grid-template-rows: subgrid; }
  .trio .sq, .pillars .sq { align-self: start; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .trio, .pillars { grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
  .trio > div, .pillars > div { grid-template-columns: 1fr 26px; column-gap: 10px; }
  .trio h3, .pillars h3 { font-size: 18px; }
}
@media (max-width: 600px) { .pillars img { aspect-ratio: 4/3; } }
@media (max-width: 480px) {
  .hd nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 20px; }
  .hd nav a { padding: 6px 0; }
  .kv__t { grid-template-rows: auto auto auto; }
  .kv__t h2 { grid-column: 2; }
  .kv__lead { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: 28px; }
  .kv__t .sq { grid-row: 3; }
}