/* 홈페이지 첫 화면 스위치(2026-10-30, <body data-hero> 일 때만 읽음 — src/page_render.php · 값 = src/page.php PAGE_HERO).
   data-hw 폭 card(둥근 카드, 칸 안) · wide(화면 끝까지, 칸 밖) / data-hh 높이 m · l / data-ht 이름 자리 below · over(사진 위, 아래 어둡게) / data-htop 머리줄 plain · over(넓은 사진 위에 겹침)
   모양(look-*.css)의 표지 규칙은 data-hero 가 없을 때만 걸림 — 여기가 표지 크기·이름 자리를 정함. 글은 처음부터 보임(숨겼다 꺼내지 않음)
   스크립트(page.js)가 붙이는 것: <html class="pg-js"> 일 때만 머리줄이 위에 붙어 따라옴 · 넘기기 앞뒤·점 단추 · 내려가면 머리줄 유리 바탕(.pg-stuck) */
body[data-hero]{--hh:60px}
@media (min-width:720px){body[data-hero]{--hh:72px}}

/* 머리줄: 이름(넓은 첫 화면) 또는 주소 알약 · 칸으로 가는 메뉴(넓은 화면 = 줄, 그 밖 = 접는 단추) · 언어 */
.pg-head{position:relative;z-index:25;transition:background-color .2s,box-shadow .2s,color .2s}
.pg-hin{max-width:480px;margin:0 auto;padding:max(8px,env(safe-area-inset-top,0px)) 18px 0;min-height:var(--hh);display:flex;align-items:center;gap:8px}
.pg-hin>.pg-pill,.pg-brand{margin-inline-end:auto}
.pg-brand{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none;font-size:15.5px;font-weight:800;letter-spacing:-.03em}
.pg-brand>span[dir]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-bav{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:13px;font-weight:800;color:var(--ink);background:#FFFFFF;box-shadow:0 0 0 1px var(--pl)}
.pg-bav.sq{border-radius:11px}
.pg-bav img{width:100%;height:100%;object-fit:cover}
.pg-nav{display:none;gap:2px}
.pg-nav a{padding:8px 12px;border-radius:999px;font-size:13.5px;font-weight:650;text-decoration:none;white-space:nowrap}
.pg-nav a:hover{background:rgba(255,255,255,.55)}
.pg-navm{position:relative}
.pg-navm>summary{list-style:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.pg-navm>summary::-webkit-details-marker{display:none}
.pg-navm .ic{width:18px;height:18px}
.pg-navp{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:190px;padding:6px;border-radius:18px;display:flex;flex-direction:column;color:var(--ink);background:rgba(255,255,255,.96)}
.pg-navp a{padding:11px 14px;border-radius:12px;font-size:15px;font-weight:650;text-decoration:none}
.pg-navp a:hover{background:linear-gradient(120deg,var(--s1),var(--s2))}
.pg-sh h2[id]{scroll-margin-top:calc(var(--hh) + 16px)}
@media (prefers-reduced-motion:no-preference){html:has(body[data-hero]){scroll-behavior:smooth}}
@media (min-width:720px){.pg-hin{max-width:640px}}
@media (min-width:1024px){.pg-hin{max-width:1120px;padding-inline:32px}.pg-nav{display:flex}.pg-navm{display:none}}
/* 스크립트가 있으면 위에 붙어 따라옴(미리보기는 위 「미리보기」 띠가 붙어 있어 안 붙임) — 내려가면 유리 바탕 */
html.pg-js:not(.pg-edit) body[data-hero]:not([data-htop=over]) .pg-head{position:sticky;top:0}
html.pg-js:not(.pg-edit) body[data-htop=over] .pg-head{position:fixed;inset-inline:0;top:0}
.pg-head.pg-stuck{background:var(--bg);box-shadow:0 1px 0 var(--pl)}
@media (min-width:1024px){html.pg-js:not(.pg-edit) body[data-hero] .pg-face{top:calc(var(--hh) + 20px)}}

/* 넓은 첫 화면(wide) = 칸 밖, 화면 끝까지 · 아래만 둥글게 */
.pg-hero{position:relative;height:clamp(220px,64vw,340px);border-radius:0 0 32px 32px;overflow:hidden;background:var(--p-cover)}
[data-hh=l] .pg-hero{height:min(120vw,520px);height:min(120vw,78svh)}
@media (min-width:720px){.pg-hero{height:360px}[data-hh=l] .pg-hero{height:min(560px,78svh)}}
@media (min-width:1024px){.pg-hero{height:420px}[data-hh=l] .pg-hero{height:min(680px,82svh)}}
.pg-hero>img,.pg-sli>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-hero.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,40,.16),transparent 40%);pointer-events:none}
/* 머리줄을 사진 위에(htop=over) = 사진이 맨 위부터 · 위쪽을 조금 어둡게(흰 글 읽히게) · 영업 표는 머리줄 아래로 */
[data-htop=over] .pg-head{position:absolute;inset-inline:0;top:0}
body[data-htop=over]:has(.pg-hero.photo) .pg-head:not(.pg-stuck){color:#FFFFFF;text-shadow:0 1px 10px rgba(0,0,0,.3)}
body[data-htop=over]:has(.pg-hero.photo) .pg-head:not(.pg-stuck) .pg-nav a:hover{background:rgba(255,255,255,.18)}
[data-htop=over] .pg-hero.photo::after{background:linear-gradient(180deg,rgba(15,12,30,.5),rgba(15,12,30,.12) 30%,transparent 50%)}
.pg-hero .pg-open{inset-inline-end:18px}  /* 넓은 첫 화면 = 영업 표를 글 칸 오른쪽 끝에 맞춤 */
@media (min-width:720px){.pg-hero .pg-open{inset-inline-end:calc((100% - 640px) / 2 + 18px)}}
@media (min-width:1024px){.pg-hero .pg-open{inset-inline-end:max(32px,calc((100% - 1120px) / 2 + 32px))}}
[data-htop=over] .pg-hero .pg-open{top:calc(var(--hh) + max(8px,env(safe-area-inset-top,0px)) + 2px)}
/* 넓은 첫 화면 아래 얼굴 = 얼굴 사진이 사진에 걸치지 않음(머리줄에 작은 얼굴) → 이름이 바로 */
[data-hw=wide] .pg-col{padding-top:22px}
[data-hw=wide] .pg-face>.pg-nm:first-child{margin-top:0}

/* 둥근 카드(card) 높이 — m = 지금 그대로 */
[data-hw=card][data-hh=l] .pg-cover{height:300px}
@media (min-width:720px){[data-hw=card][data-hh=l] .pg-cover{height:380px}}
@media (min-width:1024px){[data-hw=card][data-hh=l] .pg-cover{height:320px}}
[data-hw=card][data-ht=over][data-hh=m] .pg-cover{height:230px}

/* 이름을 사진 위에(over) — 아래를 어둡게 깔고 흰 글. 사진 없는 색 번짐 표지는 어둡게 안 깔고 진한 글(흰 글이 안 읽혀서) */
.pg-hcap{position:absolute;inset:auto 0 0;z-index:2;padding:72px 0 22px;color:#FFFFFF;background:linear-gradient(180deg,transparent,rgba(15,12,30,.64));pointer-events:none}
.pg-hcin{pointer-events:auto}
.pg-cover .pg-hcap{border-radius:0 0 28px 28px}
.pg-cover .pg-hcin{padding:0 18px}
.pg-hero .pg-hcin{max-width:480px;margin:0 auto;padding:0 18px}
@media (min-width:720px){.pg-hero .pg-hcin{max-width:640px}}
@media (min-width:1024px){.pg-hero .pg-hcin{max-width:1120px;padding:0 32px}.pg-hero .pg-hcap{padding-bottom:34px}.pg-hero .pg-hcap .pg-nm{font-size:42px}}
.pg-hcap .pg-nm{margin-top:0;font-size:31px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.pg-hcap .pg-role{color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(0,0,0,.35)}
.pg-hcap .pg-av{position:static;transform:none;width:56px;height:56px;margin-bottom:10px;border-width:2px}
.pg-hcap .pg-av .gtext{font-size:20px}
:is(.pg-hero,.pg-cover):not(.photo) .pg-hcap{background:none;color:var(--ink)}
:is(.pg-hero,.pg-cover):not(.photo) .pg-hcap :is(.pg-nm,.pg-role){color:var(--ink);text-shadow:none}
[data-ht=over] .pg-face>.pg-cover+.pg-bl{margin-top:14px}

/* 여러 장 넘기기 = 손가락으로 붙어 넘김(스크립트 없이) · 앞뒤·점 단추는 스크립트가 있을 때만 보임 · 저절로 안 넘김 */
.pg-sl,.pg-slr{position:absolute;inset:0;border-radius:inherit}
.pg-slr{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.pg-slr::-webkit-scrollbar{display:none}
.pg-slr:focus-visible{outline:3px solid #FFFFFF;outline-offset:-6px}
.pg-sli{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.pg-slc{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px}
.pg-slc[hidden]{display:none}
.pg-slb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer;border:0}
.pg-slb .ic{width:17px;height:17px}
.pg-sldots{display:flex;gap:2px}
.pg-sldot{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.pg-sldot::before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:width .2s}
.pg-sldot[aria-current]::before{width:18px;background:#FFFFFF}
.pg-sl~.pg-hcap{padding-bottom:58px}  /* 넘기기 단추 자리만큼 이름을 위로 */
@media (min-width:1024px){.pg-hero .pg-sl~.pg-hcap{padding-bottom:64px}}
@media (prefers-reduced-motion:reduce){.pg-head,.pg-sldot::before{transition:none}}

/* 꾸미기 미리보기 점선 자리 */
.pg-edit .pg-hero[data-edit]{outline-offset:-4px;border-radius:0 0 32px 32px}
@media print{.pg-head{position:static!important}.pg-slc,.pg-navm{display:none}}