/* 띠 쌓기(2026-10-30 — 배치·띠 꾸밈·새 띠 중 하나라도 쓸 때만 읽음, src/page_render.php · 값 = src/page.php PAGE_BAND·PAGE_LAYS).
   칸마다 data-sz 크기(배너 최소 높이 · 사진 띠 넘기기 높이) · data-w=edge 화면 끝까지 · data-bg=soft 연한 바탕(글 띠) · data-v=slide 사진 띠 넘기기
   <body data-lay="bands"> = 컴퓨터에서도 가로 띠만(얼굴 고정 칸 없음). 휴대폰은 늘 한 줄이라 배치는 컴퓨터 폭에서만 다름.
   끌어서 재는 크기는 없음(10-22 「자유 배치 안 함」) — 단계만. 글은 처음부터 보임 */
.pg-sec{--bz:220px}
.pg-sec[data-sz=s]{--bz:160px}
.pg-sec[data-sz=l]{--bz:320px}
.pg-sec[data-sz=full]{--bz:86svh}
@media (min-width:720px){.pg-sec{--bz:300px}.pg-sec[data-sz=s]{--bz:200px}.pg-sec[data-sz=l]{--bz:440px}.pg-sec[data-sz=full]{--bz:min(92svh,820px)}}

/* 연한 바탕(글 띠) — 색 조합의 연한 두 색(색을 직접 고르지 않음) */
.pg-sec[data-bg=soft]{padding:18px 16px 20px;border-radius:26px;background:linear-gradient(140deg,var(--s1),var(--s2))}

/* 사진 띠 — 바둑판(높이 = 사진 수) · 넘기기(높이 = 크기 단계) */
.pg-bph{padding:22px 16px;border-radius:22px;text-align:center;font-size:14px}
.pg-phs .pg-tile{padding:0}
.pg-bsl{position:relative;height:var(--bz);border-radius:22px;overflow:hidden;background:linear-gradient(140deg,var(--s1),var(--s2))}
.pg-bsl .pg-sl,.pg-bsl .pg-slr{position:absolute;inset:0;border-radius:inherit}
.pg-bsl .pg-slr{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.pg-bsl .pg-slr::-webkit-scrollbar{display:none}
.pg-bsl .pg-slr:focus-visible{outline:3px solid #FFFFFF;outline-offset:-6px}
.pg-bsl .pg-sli{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.pg-bsl .pg-sli>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-bsl .pg-slc{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px}
.pg-bsl .pg-slc[hidden]{display:none}
.pg-bsl .pg-slb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer;border:0}
.pg-bsl .pg-slb .ic{width:17px;height:17px}
.pg-slno{min-width:58px;height:30px;padding:0 10px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink)}

/* 배너 띠 — 사진 1장 위 글(아래 어둡게 — 첫 화면 이름 겹침과 같은 대비) · 높이 = 최소(글이 길거나 글자를 키우면 늘어남) · 사진 없으면 연한 바탕 위 진한 글 */
.pg-bn{position:relative;display:flex;align-items:flex-end;min-height:var(--bz);border-radius:26px;overflow:hidden;background:linear-gradient(140deg,var(--s1),var(--s2))}
.pg-bn>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-bn.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,30,.06) 20%,rgba(15,12,30,.66));pointer-events:none}
.pg-bnc{position:relative;z-index:1;width:100%;padding:24px 20px 22px}
.pg-bnc h2{font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1.25;overflow-wrap:anywhere}
.pg-bnc p{margin-top:6px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.pg-bnc .btn{margin-top:14px}
.pg-bn.photo .pg-bnc{color:#FFFFFF}
.pg-bn.photo .pg-bnc :is(h2,p){text-shadow:0 1px 12px rgba(0,0,0,.35)}
.pg-bn:not(.photo) .pg-bnc p{color:var(--sub)}
@media (min-width:720px){.pg-bnc{padding:30px 28px 28px}.pg-bnc h2{font-size:30px}}

/* 화면 끝까지 — 휴대폰·태블릿(칸이 가운데) · 컴퓨터는 가로 띠 배치일 때만(두 칸 배치의 오른쪽 칸은 가운데가 아니라 잘림 → 칸 안 그대로, 코덱스 10-30)
   글 띠 = 바탕만 끝까지(글 폭은 안쪽 여백이 되돌림) · 사진 = 사진 묶음만 끝까지 · 배너 = 띠 통째(글은 읽히는 폭 가운데) */
@media (max-width:1023px){
  .pg-sec[data-w=edge][data-bg=soft]{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);border-radius:0}
  .pg-sec[data-w=edge] :is(.pg-phs,.pg-bsl){margin-inline:calc(50% - 50vw);border-radius:0}
  .pg-sec[data-w=edge] .pg-phs{padding-inline:4px}
  .pg-bn[data-w=edge]{margin-inline:calc(50% - 50vw);border-radius:0}
  .pg-bn[data-w=edge] .pg-bnc{max-width:640px;margin-inline:auto}
}

/* 컴퓨터 가로 띠 배치: 한 줄(최대 1120) · 얼굴 = 맨 위 띠(고정 안 함) · 글 띠 = 읽히는 폭 760 가운데 · 사진·배너 = 칸 폭 · 아래 붙은 예약 단추 보임 */
@media (min-width:1024px){
  [data-lay=bands] .pg-col{display:block}
  [data-lay=bands] .pg-face{position:static;max-width:760px;margin-inline:auto;padding-bottom:6px}
  [data-lay=bands] .pg-top{max-width:760px;margin-inline:auto}
  [data-lay=bands] .pg-main>.pg-sec:not([data-block=photos],[data-block=banner]){max-width:760px;margin-inline:auto}
  [data-lay=bands] .pg-main>.pg-sec{margin-top:44px}
  [data-lay=bands] .pg-phs{grid-template-columns:repeat(4,1fr)}
  [data-lay=bands] .pg-bar{display:block;max-width:420px;margin:0 auto;padding-inline:0}
  [data-lay=bands] .pg-main>.pg-sec[data-w=edge][data-bg=soft]{max-width:none;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 380px);border-radius:0}
  [data-lay=bands] .pg-sec[data-w=edge] :is(.pg-phs,.pg-bsl){margin-inline:calc(50% - 50vw);border-radius:0}
  [data-lay=bands] .pg-sec[data-w=edge] .pg-phs{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding-inline:6px}
  [data-lay=bands] .pg-bn[data-w=edge]{margin-inline:calc(50% - 50vw);border-radius:0}
  [data-lay=bands] .pg-bn[data-w=edge] .pg-bnc{max-width:1120px;margin-inline:auto;padding-inline:32px}
}
/* 넓은 화면(1280~) 가로 띠: 틀 1440 · 머리줄·첫 화면 이름·얼굴·띠 왼쪽 끝을 한 줄로 · 글 띠 = 제목 왼쪽 + 내용 오른쪽 끝까지(글 한 줄은 읽히는 길이 46em까지) · 사진·배너 = 틀 전체 (마스터 10-30 「너비가 최대한 넓어져야」) */
@media (min-width:1280px){
  [data-lay=bands] .pg-col{max-width:1440px;padding:0 48px}
  [data-lay=bands] :is(.pg-hin,.pg-hero .pg-hcin){max-width:1440px;padding-inline:48px}
  [data-lay=bands] .pg-hero .pg-open{inset-inline-end:max(48px,calc((100% - 1440px) / 2 + 48px))}
  [data-lay=bands] :is(.pg-face,.pg-top){max-width:none}
  [data-lay=bands] .pg-main>.pg-sec:not([data-block=photos],[data-block=banner]){max-width:none;display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:56px;align-items:start}
  [data-lay=bands] .pg-main>.pg-sec:not([data-block=photos],[data-block=banner])>.pg-sh{grid-column:1;grid-row:1}
  [data-lay=bands] .pg-main>.pg-sec :is(.pg-about p,.pg-faq details>p){max-width:46em}
  [data-lay=bands] .pg-main>.pg-sec:not([data-block=photos],[data-block=banner])>:not(.pg-sh){grid-column:2}
  [data-lay=bands] .pg-main>.pg-sec[data-w=edge][data-bg=soft]{padding-inline:calc(50vw - 50%)}
  [data-lay=bands] .pg-bn[data-w=edge] .pg-bnc{max-width:1440px;padding-inline:48px}
}
@media print{.pg-bsl .pg-slc{display:none}.pg-sec[data-w=edge]{margin-inline:0!important}}