/* 공통 바닥 — 이 시안은 자기 눈금을 갖고 있어 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); }

/* 一般社団法人Palette(palette-nagasaki.or.jp) — 연노랑 바탕(#fff8dd)에 왼쪽 고정 흰 세로 알약 사이드바
   (P 로고와 색점 고리, 메뉴에 영문 부제, 주소·전화). 오른쪽에 둥근 사진 히어로 + 세로 글 「一人ひとりが
   持ってうまれた色を 見つめる場所」. 흰 종이 안에 분홍 표어 + 사진 셋 → Concept 색 카드 셋(분홍·초록·
   보라, 01·02·03) → 단체 사진 → 그룹홈 소개 + 사진 셋 → Latest Topics 목록 → 지도 → 푸터.
   둘레에 파스텔 색점이 흩어져 있습니다. */
/* 색 전환기(palette.js)가 색을 고르기 전에는 이 시안 본래의 색을 씁니다.
   .js-pal 이 붙으면 palettes.css 의 --primary 가 이깁니다. */
body:not(.js-pal) { --primary: #e77e84; --primary-dk: #ad5e62; --primary-lt: #fbe3e4; }
body { --pg: #fff8dd; --ink: #595757; --pink: var(--primary); --green: #8cc079; --purple: #a98ad3; --blue: #79b9d6; }
body { background: var(--pg); color: var(--ink); font-size: 14px; }
h1, h2, h3 { color: var(--ink); font-weight: 400; }
.ring { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--pink) 0 25%, #f2c14e 25% 50%, var(--green) 50% 75%, var(--blue) 75%); -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%); mask: radial-gradient(circle, transparent 50%, #000 52%); }
.dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; opacity: .5; }
.wrap { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 20px; min-height: 100vh; }

.side { position: sticky; top: 20px; height: calc(100vh - 40px); background: #fff; border-radius: 90px; padding: 40px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo { font-size: 20px; letter-spacing: .05em; }
.logo i { display: block; width: 34px; height: 60px; margin: 0 auto 8px; background: var(--pink); border-radius: 17px 17px 4px 4px; position: relative; }
.logo i::after { content: ""; position: absolute; right: -10px; top: -8px; width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(var(--blue) 0 25%, #f2c14e 25% 50%, var(--green) 50% 75%, var(--purple) 75%); }
.side__nav { margin-top: 40px; display: grid; gap: 14px; font-size: 13px; text-align: left; width: 100%; }
.side__nav small { display: block; font-size: 12px; color: var(--primary-dk); }
.side__addr { margin-top: auto; font-size: 12px; line-height: 1.7; word-break: keep-all; }

.main { position: relative; }
.kv { position: relative; height: 700px; border-radius: 40px; overflow: hidden; }
.kv img { width: 100%; height: 100%; object-fit: cover; }
/* 흰 세로 제목(오른쪽 위)과 캡션(왼쪽 아래)이 밝은 하늘·흰 옷 위에서 묻히지 않게 두 모서리만 어둡게 깝니다. */
.kv::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 80% at 95% 5%, rgba(20,20,20,.72), rgba(20,20,20,.38) 50%, transparent 80%), linear-gradient(to top, rgba(20,20,20,.62), rgba(20,20,20,.2) 30%, transparent 48%); }
.kv h1 { position: absolute; right: 50px; top: 40px; writing-mode: vertical-rl; color: #fff; font-size: 26px; font-weight: 500; line-height: 2; letter-spacing: .2em; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.45); }
.kv__cap { position: absolute; left: 50px; bottom: 50px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.kv__cap small { font-size: 13px; font-weight: 500; display: block; margin-bottom: 8px; }
.kv__cap b { font-size: 18px; font-weight: 700; line-height: 1.8; }
.kv .ring { position: absolute; right: 40px; top: 20px; width: 30px; height: 30px; }

.paper { background: #fff; border-radius: 40px; margin-top: 20px; padding: 80px 60px; position: relative; overflow: hidden; }
.paper .dot:nth-of-type(1) { left: 40px; top: 60px; background: var(--green); } .paper .dot:nth-of-type(2) { right: 80px; top: 200px; background: var(--pink); } .paper .dot:nth-of-type(3) { left: 30%; top: 40%; background: #f2c14e; } .paper .dot:nth-of-type(4) { right: 20%; bottom: 30%; background: var(--purple); }
.sec { padding: 60px 0; position: relative; }
.sec__t { text-align: center; font-size: 21px; color: var(--primary-dk); margin-bottom: 6px; }
.sec__t .ring { display: block; margin: 0 auto 10px; width: 28px; height: 28px; }
.sec__s { text-align: center; font-size: 13px; word-break: keep-all; margin-bottom: 40px; }
.lead { text-align: center; }
.lead h2 { font-size: 23px; word-break: keep-all; color: var(--primary-dk); line-height: 1.8; margin-bottom: 26px; }
.lead p { line-height: 2.2; margin-bottom: 20px; word-break: keep-all; }
/* 줄마다 한 문장 — 넓은 화면에서는 한 줄씩, 좁은 화면에서는 이어 흘려 한 글자만 남는 줄이 없게 */
.lead__p span { display: block; }
.pill { display: inline-block; padding: 10px 24px; border: 1px solid var(--pink); border-radius: 999px; font-size: 13px; color: var(--primary-dk); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.three img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.concept { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.concept div { color: #1f1f1f; border-radius: 12px; padding: 30px 24px; text-align: center; }
.concept div:nth-child(1) { background: var(--pink); } .concept div:nth-child(2) { background: var(--green); } .concept div:nth-child(3) { background: var(--purple); }
.concept small { font-size: 12px; color: #1f1f1f; } .concept h3 { color: #1f1f1f; font-size: 20px; margin: 6px 0 12px; } .concept p { font-size: 13px; line-height: 1.9; margin-bottom: 16px; word-break: keep-all; }
.concept a { display: inline-block; background: #fff; color: inherit; padding: 6px 16px; border-radius: 999px; font-size: 12px; }
.concept div:nth-child(1) a { color: var(--primary-dk); } .concept div:nth-child(2) a { color: var(--primary-dk); } .concept div:nth-child(3) a { color: var(--primary-dk); }
.group { margin: 60px auto 0; width: 100%; max-width: 620px; aspect-ratio: 16/9; object-fit: cover; }
.suisai { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; }
.suisai h2 { font-size: 40px; color: var(--primary-dk); } .suisai h2 small { display: block; font-size: 13px; color: var(--ink); }
.suisai p { line-height: 2.2; margin-bottom: 16px; word-break: keep-all; }
.topics li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px dashed #ddd; font-size: 13px; word-break: keep-all; }
.topics img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.topics em { font-style: normal; color: var(--primary-dk); } .topics b { display: block; color: var(--primary-dk); font-size: 14px; margin: 4px 0; } .topics a { color: var(--primary-dk); }
.map { height: 380px; background: #eef2f5; border-radius: 12px; background-image: linear-gradient(#dfe6ec 1px, transparent 1px), linear-gradient(90deg, #dfe6ec 1px, transparent 1px); background-size: 40px 40px; position: relative; }
.map::after { content: ""; position: absolute; left: 50%; top: 45%; width: 20px; height: 20px; background: var(--pink); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ft { padding: 30px 40px; display: flex; align-items: center; gap: 40px; font-size: 12px; }
.ft nav { display: grid; gap: 4px; } .ft .ring { margin-left: auto; flex: none; }
.ft__legal { font-size: 12px; word-break: keep-all; color: #6f6f6f; line-height: 1.7; max-width: 420px; }
@media (max-width: 900px) { .wrap { grid-template-columns: minmax(0, 1fr); padding: 12px; } .side, .main { min-width: 0; max-width: 100%; overflow: hidden; } .side { position: static; height: auto; border-radius: 30px; } .kv { height: 460px; } .kv h1 { font-size: 18px; } .three, .concept, .suisai { grid-template-columns: 1fr; } .paper { padding: 40px 20px; } .topics li { grid-template-columns: 1fr; } }

/* ── 좁은 화면 다듬기 ── */
@media (max-width: 900px) {
  /* 메뉴 알약: 첫 화면을 다 차지하지 않게 — 로고 한 줄 + 메뉴 3칸 두 줄. 주소·전화는 아래 푸터에 같은 내용이 있습니다. */
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px 16px 18px; border-radius: 28px; }
  .logo { display: flex; align-items: center; gap: 10px; font-size: 18px; }
  .logo i { width: 20px; height: 34px; margin: 0; border-radius: 10px 10px 3px 3px; }
  .logo i::after { right: -8px; top: -6px; width: 18px; height: 18px; }
  .side__nav { margin-top: 0; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
  .side__nav a { background: var(--pg); border-radius: 999px; padding: 7px 4px; line-height: 1.35; }
  .side__nav small { font-size: 12px; }
  .side__addr { display: none; }
  .kv { height: 440px; border-radius: 28px; }
  .kv h1 { right: 22px; top: 60px; font-size: 19px; }
  .kv .ring { right: 22px; top: 20px; }
  .kv__cap { left: 22px; right: 22px; bottom: 24px; }
  .kv__cap b { font-size: 16px; }
  .paper { padding: 28px 16px; border-radius: 28px; }
  .paper .dot { display: none; }
  .sec { padding: 36px 0; }
  .lead h2 { font-size: 19px; line-height: 1.7; }
  .lead p { line-height: 2; }
  .lead__p span { display: inline; }
  .lead__p { text-wrap: pretty; }
  .sec__s { margin-bottom: 26px; }
  .three { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
  .concept { gap: 12px; }
  .concept div { padding: 24px 20px; }
  .group { margin-top: 32px; }
  .suisai { gap: 16px; }
  .suisai h2 { font-size: 34px; }
  .topics li { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .map { height: 220px; }
  .ft { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 4px 10px; }
  .ft .si-5 { margin-left: 0; text-align: left; }
  .ft .ring { display: none; }
}

/* ── 원래 인라인 style 이던 자리 — CSP 때문에 클래스로 뺐습니다 ── */
.si-1 { border-color:var(--blue);color:#4f7a8d; }
.si-2 { grid-column:1/-1; }
.si-3 { font-size:16px; }
.si-4 { width:20px;height:36px; }
.si-5 { margin-left:auto;text-align:right; }
@media (max-width: 1100px) and (min-width: 901px) { .concept div { padding: 26px 16px; } .concept h3 { font-size: 18px; word-break: keep-all; } }

/* ── 마감 다듬기 ── */
/* 세로 제목은 사진의 흰 옷·밝은 하늘 어디에 걸려도 읽히도록, 사이드바처럼 둥근 반투명 판 위에 둡니다. */
.kv::before { background: radial-gradient(ellipse 45% 70% at 95% 5%, rgba(20,20,20,.35), transparent 75%), linear-gradient(to top, rgba(20,20,20,.74), rgba(20,20,20,.4) 32%, transparent 58%); }
.kv h1 { top: 72px; right: 40px; padding: 26px 14px 26px 16px; background: rgba(40,32,32,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 36px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.kv .ring { top: 24px; }
/* 흩어진 색점은 글·사진에 걸리지 않게 종이 가장자리 여백에만 */
.paper .dot:nth-of-type(3) { left: auto; right: 26px; top: 44%; }
.paper { padding-bottom: 48px; }
.paper .dot:nth-of-type(4) { left: auto; right: 22px; bottom: 34%; }
.ft nav.si-5 span { display: block; }
@media (min-width: 600px) and (max-width: 900px) {
  .concept { grid-template-columns: repeat(3, 1fr); }
  .concept div { padding: 24px 14px; }
  .concept h3 { font-size: 17px; word-break: keep-all; }
  .concept p { font-size: 13px; }
}
@media (max-width: 900px) {
  .kv h1 { top: 56px; right: 16px; padding: 18px 10px 18px 12px; line-height: 1.9; border-radius: 26px; }
  .kv .ring { right: 22px; top: 18px; }
}