/* 하와이 한인 묘비 아카이브 — 여백 중심의 조용한 열람 사이트
   layout: 넓은 여백, 한 화면 한 역할(섬 → 묘지 → 인물) */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#000000; --mute:#6B6B6B; --line:#E6E6E6;
  --accent:#1B6B73; --accent-soft:#E3F0F0; --pin:#D2392E;
  --wabi:#DDD0E8; --wabi-ink:#6A4A86; --ok:#2F7D5B; --warn:#B7791F;
  --serif:'Nanum Myeongjo','Noto Serif KR',Georgia,serif;
  --sans:'Noto Sans CJK KR','Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --title:#1E7F4F; --title-on-dark:#A8F5C8; --dark:#2a2a2a; --dark-link:#8FD3D8;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.75 var(--sans);letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:28px}
.brand{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.top nav{display:flex;gap:22px;font-size:13px;color:var(--mute)}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{padding-block:clamp(36px,7vw,96px) clamp(28px,4vw,56px)}
.eyebrow{font:400 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,5.2vw,56px);line-height:1.22;font-weight:900}
.lede{max-width:34em;margin:20px 0 0;color:var(--mute);font-size:16px}

/* island map */
.mapbox{position:relative;border-radius:2px;overflow:hidden;background:#0d3a52;aspect-ratio:1989/1350;user-select:none}
.mapbox>img{width:100%;height:100%;object-fit:cover}
.pt{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;width:28px;height:28px}
.pt i{position:absolute;inset:9px;border-radius:50%;background:var(--pin);box-shadow:0 0 0 2px #fff8}
.pt.isl i{inset:5px;background:#fff;box-shadow:0 0 0 3px #fff4}
.pt.isl.live i{background:var(--pin);box-shadow:0 0 0 3px #fff6}
.pt.live::after,.pt.isl.live::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px solid #fff;opacity:.0;animation:ring 2.6s ease-out infinite}
.pt.dim i{opacity:.55}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.pt::after{animation:none!important}}
.pt:hover i,.pt:focus-visible i{transform:scale(1.25)}
.pt span.tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);font:400 11px/1.2 var(--sans);color:#fff;white-space:nowrap;text-shadow:0 1px 3px #000a;pointer-events:none;opacity:0;transition:opacity .15s}
.pt:hover span.tag,.pt:focus-visible span.tag{opacity:1}
.maplegend{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--mute)}
.maplegend b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:0}

/* popup */
.pop{position:absolute;z-index:5;width:min(320px,calc(100% - 24px));background:var(--dark);color:#fff;border-radius:16px;padding:20px 20px 22px;box-shadow:0 18px 50px -12px rgba(5,25,35,.5);animation:pin .18s ease-out}
@keyframes pin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pop .ph{height:150px;border-radius:3px;background-size:cover;background-position:center;background-color:#444}
.pop .pb{padding-top:18px}
.pop h3{font:700 22px/1.3 var(--sans);color:#fff}
.pop .en{font-size:13px;color:#fff;opacity:.7;margin-top:2px}
.pop .big{font:400 34px/1 var(--serif);margin:16px 0 2px;color:#fff}
.pop .big small{font:400 14px var(--sans);color:#fff;opacity:.75;margin-left:6px}
.pop ul{list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:#fff;opacity:.75}
.pop li{padding:3px 0}
.pop li a{color:#fff;opacity:1}
.pop li a:hover{color:var(--dark-link)}
.pop .go{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--dark-link);border-bottom:1px solid currentColor;padding-bottom:1px}
.pop .x{position:absolute;right:10px;top:10px;width:28px;height:28px;border:0;border-radius:50%;background:#0009;color:#fff;cursor:pointer;font-size:16px;line-height:1}
.chip{display:inline-block;font:400 11px/1 var(--sans);letter-spacing:.06em;padding:5px 9px;border-radius:99px;background:#fff2;color:var(--dark-link);margin-top:10px}
.chip.soon{background:#fff2;color:#ddd}
.chip.prep{background:#fff2;color:#F0C674}

/* island strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,4vw,56px);padding-block:clamp(48px,7vw,96px)}
.strip a{display:block;border-top:1px solid var(--line);padding-top:18px}
.strip h3{font-size:22px}
.strip p{margin:6px 0 0;font-size:13px;color:var(--mute)}
.strip .n{font:400 40px/1 var(--serif);margin-top:18px}
.strip .n small{font:400 13px var(--sans);color:var(--mute);margin-left:5px}

footer{border-top:1px solid var(--line);padding-block:32px 56px;font-size:12px;color:var(--mute);display:flex;gap:12px 32px;flex-wrap:wrap;justify-content:space-between}

/* cemetery page */
.crumb{font-size:12px;color:var(--mute);letter-spacing:.02em}
.crumb a:hover{color:var(--ink)}
.ph1{padding-block:clamp(16px,3vw,40px) 8px}
.ph1 h1{font-size:clamp(28px,4.4vw,46px)}
.meta{display:flex;flex-wrap:wrap;gap:6px 36px;margin-top:20px;font-size:13px;color:var(--mute)}
.meta b{font-weight:700;color:var(--ink);margin-left:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:28px}
.tabs a{font-size:13px;padding:7px 14px;border-radius:99px;color:var(--mute);border:1px solid var(--line)}
.tabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabs a:hover{color:var(--ink);border-color:var(--ink)}
.tabs a.on:hover{color:var(--bg)}
.ctl{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:44px}
.ctl input[type=search]{flex:1 1 220px;min-width:0;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 2px;font-size:15px;outline:none;border-radius:0}
.ctl input[type=search]:focus{border-color:var(--accent)}
.flt{display:flex;gap:4px;flex-wrap:wrap}
.flt button{border:0;background:none;padding:6px 12px;font-size:13px;color:var(--mute);cursor:pointer;border-radius:99px}
.flt button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.flt button:hover{color:var(--ink)}
.plotwrap{position:relative;margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:clamp(16px,3vw,40px);align-items:start}
@media(max-width:760px){.plotwrap{grid-template-columns:1fr}}
.plotbox{position:relative;padding:clamp(0px,1vw,12px) 0;overflow:visible}
svg.plot{width:100%;height:auto;display:block}
svg.plot .lot{fill:#fff;stroke:#111;stroke-width:1.6;transition:fill .15s,opacity .15s}
svg.plot .lot.wabi{fill:var(--wabi)}
svg.plot g.cell{cursor:pointer}
svg.plot g.cell.nodata{cursor:default}
svg.plot g.cell.nodata .lot{stroke-dasharray:4 4;stroke:#bbb}
svg.plot g.cell:hover .lot,svg.plot g.cell.sel .lot{fill:var(--accent);stroke:var(--accent)}
svg.plot g.cell:hover text,svg.plot g.cell.sel text{fill:#fff}
svg.plot g.cell.nodata:hover .lot{fill:#fff;stroke:#bbb}
svg.plot g.cell.nodata:hover text{fill:var(--mute)}
svg.plot text{font:400 17px var(--sans);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
svg.plot g.cell.nodata text{fill:var(--mute)}
svg.plot g.cell.fade{opacity:.16}
svg.plot g.cell.lineon .lot{stroke:var(--accent);stroke-width:2.2}
.lines{font-size:12px;color:var(--mute)}
.lines h4{margin:0 0 10px;font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.lines button{display:grid;grid-template-columns:46px 1fr;gap:6px;width:100%;border:0;background:none;text-align:left;padding:7px 0;border-top:1px solid var(--line);cursor:pointer;color:var(--mute);font-size:12px}
.lines button b{font-weight:700;color:var(--ink)}
.lines button[aria-pressed=true]{color:var(--accent)}
.lines button[aria-pressed=true] b{color:var(--accent)}
.lines .sw{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.lines .sw i{width:14px;height:20px;background:var(--wabi);border:1px solid var(--mute)}
.card{position:absolute;z-index:6;width:min(320px,calc(100% - 16px));background:var(--dark);color:#fff;border-radius:16px;padding:20px 20px 22px;box-shadow:0 18px 50px -14px rgba(0,0,0,.45);animation:pin .16s ease-out}
.card::after{content:"";position:absolute;left:var(--ax,50%);width:20px;height:11px;margin-left:-10px;background:var(--dark);bottom:-10px;clip-path:polygon(0 0,100% 0,50% 100%)}
.card.below::after{bottom:auto;top:-10px;clip-path:polygon(50% 0,0 100%,100% 100%)}
.card .im{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:3px;background:#444}
.card .cb{padding-top:18px;font-size:14px}
.card h3{font:700 22px/1.3 var(--sans);letter-spacing:-.01em;color:#fff;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card h3 small{font:400 14px var(--sans);color:#fff}
.card dl{margin:14px 0 0;display:grid;gap:4px;font-weight:400;color:#fff}
.card dl div{display:block}
.card .go{display:inline-block;margin-top:16px;font-weight:700;color:var(--dark-link);border-bottom:1px solid currentColor}
.card .go:hover{color:#fff}
.card .x{position:absolute;right:10px;top:10px;width:28px;height:28px;border:0;border-radius:50%;background:#0009;color:#fff;cursor:pointer}
.mk{position:absolute;z-index:5;width:26px;height:34px;margin:-34px 0 0 -13px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@media(max-width:760px){.card{position:fixed;left:12px;right:12px;bottom:12px;top:auto!important;width:auto;max-height:80vh;overflow:auto}.card::after{display:none}.card .im{max-height:240px}}

.list{margin-top:56px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:52px minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1fr) 76px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.row .no{font:400 13px var(--serif);color:var(--mute)}
.row .nm{font-family:var(--serif);font-size:17px}
.row .nm small{font:400 12px var(--sans);color:var(--mute);margin-left:8px}
.row .mu{color:var(--mute);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tg{justify-self:end;display:flex;gap:4px}
.tg i{font:400 10px/1 var(--sans);font-style:normal;padding:4px 6px;border-radius:3px;background:var(--accent-soft);color:var(--accent)}
.tg i.w{background:var(--wabi);color:var(--wabi-ink)}
@media(max-width:700px){.row{grid-template-columns:40px 1fr auto}.row .mu.h,.row .mu.o{display:none}.row .mu.o2{display:none}}
.empty{padding:48px 0;color:var(--mute);text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 22px;margin-top:40px}
.grid a{display:block}
.grid .im{aspect-ratio:4/3;background:var(--line) center/cover;border-radius:2px;margin-bottom:10px}
.grid h3{font-size:17px}
.grid p{margin:0;font-size:12px;color:var(--mute)}

/* grave detail */
.dt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);padding-block:clamp(16px,3vw,32px) 56px;align-items:start}
@media(max-width:820px){.dt{grid-template-columns:1fr}}
.photos{position:sticky;top:16px;display:grid;gap:12px}
@media(max-width:820px){.photos{position:static}}
.photos img{width:100%;border-radius:2px;background:var(--line)}
.photos figcaption,.credit{font-size:11px;color:var(--mute);letter-spacing:.04em}
.noimg{aspect-ratio:4/3;display:grid;place-items:center;background:var(--line);color:var(--mute);font-size:13px;border-radius:2px}
.dt h1{font-size:clamp(30px,4.4vw,48px)}
.dt .sub{margin-top:8px;color:var(--mute);font-size:14px;letter-spacing:.02em}
.sec{margin-top:44px}
.sec h2{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.facts{display:grid;grid-template-columns:110px 1fr;gap:0;margin:0;font-size:14px}
.facts dt,.facts dd{padding:10px 0;border-top:1px solid var(--line);margin:0}
.facts dt{color:var(--mute);font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.two pre,.pre{margin:0;white-space:pre-wrap;font:400 15px/1.9 var(--serif);word-break:keep-all;overflow-wrap:anywhere}
.two h3,.sec h3{font:400 12px/1 var(--sans);color:var(--accent);margin-bottom:10px;letter-spacing:.04em}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:9px 10px 9px 0;border-top:1px solid var(--line);font-weight:400;vertical-align:top}
.tbl th{color:var(--mute);font-weight:400;font-size:12px}
.tblw{overflow-x:auto}
.ok{color:var(--ok)}.warn{color:var(--warn)}
.pn{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:24px 8px;font-size:13px;color:var(--mute)}
.mini{width:100%;max-width:220px;height:auto}
.mini .lot{fill:none;stroke:var(--mute);stroke-opacity:.45;stroke-width:3}
.mini .lot.on{fill:var(--pin);stroke:var(--pin)}
.mini .lot.w{fill:var(--wabi)}

/* admin */
.adm{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:8px 80px}
@media(max-width:860px){.adm{grid-template-columns:1fr}}
.side{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);display:flex;flex-direction:column;gap:12px}
@media(max-width:860px){.side{position:static;max-height:none}}
.side .lst{overflow:auto;border-top:1px solid var(--line);max-height:60vh}
.side .lst button{display:flex;justify-content:space-between;gap:8px;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 2px;text-align:left;cursor:pointer;font-size:14px}
.side .lst button.on{color:var(--accent);background:var(--accent-soft)}
.side .lst small{color:var(--mute)}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:3px;cursor:pointer;font-size:14px;font-weight:400}
.btn:hover{opacity:.88}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.danger{background:none;color:var(--pin);border-color:var(--pin)}
.bar{display:flex;gap:8px;flex-wrap:wrap}
form.f{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 20px}
form.f .c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:1/-1}
@media(max-width:700px){form.f{grid-template-columns:repeat(2,minmax(0,1fr))}form.f .c2,.c3{grid-column:span 1}.c4,.c6{grid-column:1/-1}}
form.f label{display:grid;gap:6px;font-size:12px;color:var(--mute)}
form.f input,form.f select,form.f textarea{width:100%;min-width:0;border:0;border-bottom:1px solid var(--line);background:none;padding:8px 2px;font-size:15px;color:var(--ink);outline:none;border-radius:0}
form.f textarea{min-height:104px;resize:vertical;line-height:1.7;border:1px solid var(--line);padding:10px;border-radius:3px}
form.f input:focus,form.f select:focus,form.f textarea:focus{border-color:var(--accent)}
form.f fieldset{grid-column:1/-1;border:0;border-top:1px solid var(--line);padding:18px 0 0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 20px}
@media(max-width:700px){form.f fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}}
form.f legend{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:0 12px 0 0}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumbs div{position:relative;width:88px}
.thumbs img{width:88px;height:66px;object-fit:cover;border-radius:2px}
.thumbs button{position:absolute;right:2px;top:2px;border:0;background:#000a;color:#fff;border-radius:50%;width:22px;height:22px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:13px;z-index:20}
.note{font-size:12px;color:var(--mute);line-height:1.7}
.bar2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* 홈: 지도가 화면 전체(100vh) */
.stage{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#0d3a52;color:#fff}
.stage .pan{position:absolute;touch-action:pan-y;user-select:none}
.stage .pan[data-pan="1"]{cursor:grab}
.stage .pan>img,.stage .pan picture,.stage .pan picture>img{width:100%;height:100%;display:block;pointer-events:none}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,20,28,.62) 0,rgba(4,20,28,0) 24%,rgba(4,20,28,0) 52%,rgba(4,20,28,.78) 100%)}
.stage-top{position:absolute;left:0;right:0;top:0;z-index:3}
.stage-top .brand,.stage-top nav,.stage-top nav a{color:#fff}
.stage-top .brand{opacity:.85}
.stage-top nav a{opacity:.8}.stage-top nav a:hover{opacity:1;color:#fff}
.stage-copy{position:absolute;left:var(--gutter);bottom:clamp(52px,9vh,96px);right:var(--gutter);max-width:760px;pointer-events:none;z-index:2}
.stage-copy .eyebrow{color:#9fd6da;margin-bottom:16px}
.stage-copy h1{font-size:clamp(28px,4.6vw,54px);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.stage-copy .lede{color:rgba(255,255,255,.82);margin-top:14px;font-size:15px;max-width:30em}
.stage-hint{position:absolute;right:var(--gutter);bottom:clamp(20px,4vh,36px);display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;color:rgba(255,255,255,.8);z-index:2;pointer-events:none}
.stage-hint b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.more{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;opacity:.7;z-index:3}
.more:hover{opacity:1;color:#fff}
@media(max-width:700px){.stage-hint{left:var(--gutter);right:auto;justify-content:flex-start;bottom:54px}.stage-copy{bottom:96px}.more{bottom:8px}}


h1,.ph1 h1,.dt h1,.stage-copy h1{font-weight:900}
b,strong,th{font-weight:700}

/* 묘지 점은 이미지에 있는 빨간 점을 그대로 쓰고, 클릭 영역과 링만 올린다 */
.stage .pt:not(.isl) i{background:transparent;box-shadow:none;border:1.5px solid transparent}
.stage .pt:not(.isl):hover i,.stage .pt:not(.isl):focus-visible i{border-color:#fff;transform:scale(1.5)}



h1{color:var(--title)}
.stage-copy h1{color:var(--title-on-dark)}

/* 밝은 지형도 톤: 글자는 어둡게, 지도 위 그라데이션은 흰색 계열 */
.stage{background:#bfdde6;color:var(--ink)}
.shade{background:linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 64%,rgba(250,253,253,.9) 100%)}
.stage-top .brand,.stage-top nav,.stage-top nav a{color:var(--ink)}
.stage-top .brand{opacity:.8}.stage-top nav a{opacity:.75}.stage-top nav a:hover{color:var(--accent);opacity:1}
.stage-copy .eyebrow{color:#0f3d44}
.stage-copy h1{color:var(--title-on-dark);text-shadow:0 2px 16px rgba(0,50,70,.35)}
.stage-copy .lede{color:#06242e}
.stage-hint{color:#06242e}
.stage-hint b{box-shadow:0 0 0 1px #0003}
.more{color:var(--ink)}.more:hover{color:var(--accent)}
.ilb{position:absolute;transform:translate(-50%,-50%);font:700 clamp(11px,1.05vw,15px)/1 var(--sans);color:#1b3d46;text-shadow:0 0 5px #fffd,0 0 2px #fff;pointer-events:none;letter-spacing:.02em;white-space:nowrap}
.pt.isl i{box-shadow:0 0 0 3px rgba(20,60,70,.22)}
.pt.isl.live i{box-shadow:0 0 0 3px rgba(210,57,46,.25)}
.stage .pt:not(.isl):hover i,.stage .pt:not(.isl):focus-visible i{border-color:#1b3d46}
.pt span.tag{color:#1b3d46;text-shadow:0 0 5px #fff,0 0 2px #fff}

.shade{display:none}

/* 짙은 바다 위의 글자는 밝게 */
.stage-top .brand,.stage-top nav,.stage-top nav a{color:#fff}
.stage-top nav a:hover{color:var(--title-on-dark)}
.stage-copy .eyebrow{color:#BFEAF2}
.stage-copy .lede{color:rgba(255,255,255,.88)}
.stage-hint{color:rgba(255,255,255,.88)}
.stage-hint b{box-shadow:0 0 0 1px #fff4}
.more,.more:hover{color:#fff}
.pt.isl i{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.pt.isl.live i{box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.stage .pt:not(.isl):hover i,.stage .pt:not(.isl):focus-visible i{border-color:#fff}
.pt span.tag{color:#fff;text-shadow:0 1px 4px #000a}

.grid .soon{color:var(--mute)}.grid .soon .im{opacity:.55}
.grid.cems{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ── 반응형 ───────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
.top{flex-wrap:wrap;gap:10px 16px}
.top nav{flex-wrap:nowrap;gap:clamp(12px,3vw,22px)}
.top nav a{white-space:nowrap}
.brand{white-space:nowrap}
@media(max-width:560px){
  .top{padding-block:16px;flex-direction:column;align-items:flex-start;gap:8px}
  .brand{font-size:11px;letter-spacing:.1em}
  .top nav{font-size:13px;gap:18px}
  .stage-top .top{padding-block:14px}
  .stage-copy{bottom:116px;right:var(--gutter)}
  .stage-copy h1{font-size:clamp(25px,8vw,34px);line-height:1.25}
  .stage-copy .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:10px}
  .stage-copy .lede{font-size:14px;margin-top:10px}
  .stage-hint{left:var(--gutter);right:var(--gutter);bottom:58px;gap:6px 14px;justify-content:flex-start;font-size:11px}
  .more{bottom:8px}
  .ph1{padding-block:12px 4px}
  .meta{gap:4px 20px}
  .ctl{margin-top:28px;gap:10px 14px}
  .tabs{margin-top:20px}
  .tabs a{padding:6px 12px}
  .plotwrap{margin-top:20px}
  .list{margin-top:36px}
  .row{padding:12px 0;gap:8px}
  .dt{gap:24px}
  .sec{margin-top:32px}
  .facts{grid-template-columns:84px 1fr}
  .strip{grid-template-columns:1fr 1fr}
  footer{padding-block:24px 40px}
  .adm{gap:20px}
}
@media(max-width:900px){
  .plotwrap{grid-template-columns:1fr}
  .lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 18px}
  .lines h4{grid-column:1/-1}
  .lines .sw{grid-column:1/-1}
}
/* 구획도는 좁은 화면에서 가로 스크롤 대신 화면 폭에 맞춰 줄이되, 번호가 읽히도록 최소 폭 확보 */
.plotbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.plot{min-width:560px}
@media(min-width:561px){svg.plot{min-width:0}}
/* 큰 화면 */
@media(min-width:1500px){.wrap{max-width:1320px}}
/* 팝업은 어느 폭에서도 화면 밖으로 나가지 않게 */
.pop{max-width:calc(100% - 16px)}
@media(max-width:560px){.pop{position:absolute;left:8px!important;right:8px;width:auto;top:auto!important;bottom:72px}}
.admbar{display:flex;gap:8px;flex-wrap:wrap}

.stage{background:linear-gradient(90deg,#073064,#0A3A6F 50%,#114B81)}
.stage .pan.fade{-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}

/* 묘지 개요 */
.ovw{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);padding-block:20px 56px;align-items:start}
.ovw.nofig{grid-template-columns:minmax(0,46em)}
.ovtext{margin-top:28px}.ovtext p{margin:0 0 1.1em;line-height:1.95;word-break:keep-all}
.ovfig{display:grid;gap:22px}.ovfig figure{margin:0}.ovfig img{width:100%;height:auto;border-radius:2px;background:var(--line)}
.ovfig figcaption{margin-top:8px;font-size:12px;color:var(--mute)}
@media(max-width:820px){.ovw{grid-template-columns:1fr}}

/* 메뉴가 늘어난 상단 내비게이션 */
.top nav{flex-wrap:wrap;row-gap:4px}
@media(max-width:700px){.top nav{gap:6px 16px}}
/* 문서형 목록·상세 */
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.drow:first-child{border-top:1px solid var(--line)}
.drow h3{font:700 clamp(17px,2.2vw,21px)/1.45 var(--serif)}
.drow span{color:var(--mute);font-size:14px;white-space:nowrap}
.drow:hover h3{color:var(--accent)}
@media(max-width:560px){.drow{grid-template-columns:1fr}.drow span{white-space:normal}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px 26px;margin-top:36px}
.cards a{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--ink);padding-top:14px}
.cards small{color:var(--mute);font-size:12px;letter-spacing:.04em}
.cards h3{font:700 19px/1.5 var(--serif)}
.cards p{margin:0;color:#444;font-size:14px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cards a:hover h3{color:var(--accent)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}.tagrow i{font:400 11px/1 var(--sans);font-style:normal;padding:4px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.docbody{max-width:42em;margin-top:30px}.docbody p{margin:0 0 1.2em;line-height:2;word-break:keep-all}.docbody h2{font:700 20px/1.5 var(--serif);margin:1.8em 0 .7em;color:var(--ink)}
.docbody img{width:100%;height:auto;border-radius:2px;margin:10px 0 4px}.docbody figcaption{font-size:12px;color:var(--mute);margin-bottom:1.4em}
.factlist{margin:18px 0 0;padding:0;list-style:none;max-width:42em}.factlist li{padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.srcnote{margin-top:32px;font-size:12px;color:var(--mute);max-width:42em;line-height:1.8}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:30px}
.gal figure{margin:0}.gal img,.gal video,.gal iframe{width:100%;aspect-ratio:4/3;object-fit:cover;border:0;border-radius:2px;background:var(--line);display:block}
.gal figcaption{margin-top:8px;font-size:13px}.gal figcaption small{display:block;color:var(--mute);font-size:11px}

.essay h2{margin-top:2.2em}.essay h3{font:700 17px/1.6 var(--sans);margin:1.6em 0 .5em}.essay p{margin:0 0 1.05em}
.refs{margin:0;padding-left:1.1em;font-size:13px;line-height:1.8;color:#333}.fnotes{font-size:12.5px;line-height:1.8;color:#444;padding-left:1.4em}
.pgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}.pgs img{width:100%;height:auto;background:var(--line);border:1px solid var(--line)}.pgs figcaption{font-size:12px;color:var(--mute);margin-top:4px}

/* 한글은 단어 단위로 줄바꿈 (단어 중간에서 끊지 않는다) */
body{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4,p,li,dd,dt,td,th,figcaption,.drow span,.cards *,.row,.crumb,.note{word-break:keep-all;overflow-wrap:break-word}
.row .nm small,.facts dd{overflow-wrap:anywhere}

/* 자료 페이지는 다른 화면과 같은 폭을 쓴다 */
.docbody,.factlist,.srcnote,.docbody.essay{max-width:none}
.dl{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin:16px 0 0;font-size:13px}
.dl b{font-weight:700}
.dl a{border:1px solid var(--ink);padding:6px 14px;border-radius:3px;color:var(--ink)}
.dl a:hover{background:var(--ink);color:#fff}
.tfig{margin:22px 0}.tcap{font:700 13px/1.5 var(--sans);color:var(--mute);margin-bottom:8px}
.twrap{overflow-x:auto}.dtbl{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6}
.dtbl th,.dtbl td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere}
.dtbl th{background:var(--accent-soft);color:var(--ink);font-weight:700;white-space:nowrap}
.dtbl tr:nth-child(even) td{background:color-mix(in srgb,var(--line) 25%,transparent)}
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:18px 0}
.figs img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;object-position:top;background:var(--line);border-radius:2px}
.figs figcaption{font-size:12px;color:var(--mute);margin-top:4px}

.docbody figure:not(.tfig) img{max-width:760px}
.docbody img{max-width:760px}
.pgs img{max-width:none}

.sec-h{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:44px 0 16px}
.cem-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 36px;margin-top:6px}
.cem-card{border-top:2px solid var(--ink);padding-top:14px}.cem-card h3{font:700 19px/1.5 var(--serif)}.cem-card h3 a:hover{color:var(--accent)}


/* ── 2026-10 개편: 초록 포인트, 헤더/제목/본문 구분, 햄버거 메뉴, 홈 지도 이동 ── */
:root{--accent:#1E7F4F;--accent-soft:#E2F1E8;--dark-link:#A8F5C8;--band:#12372A;--paper:#F3F6F2;--hbar:#fff}
body{background:var(--paper)}
:focus-visible{outline-color:var(--accent)}

/* 헤더: 사이트 제목(왼쪽) / 햄버거(오른쪽) */
.top{position:sticky;top:0;z-index:30;display:block;padding:0;background:var(--hbar);border-bottom:1px solid var(--line)}
.top .bar0{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px}
.top .brand{display:flex;flex-direction:column;gap:3px;letter-spacing:0;text-transform:none;color:var(--ink)}
.top .brand b{font:800 16px/1.2 var(--serif);color:var(--title)}
.top .brand small{font:400 11px/1 var(--sans);color:var(--mute);letter-spacing:.04em}
.burger{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;place-content:center;gap:5px;cursor:pointer;transition:background .2s,border-color .2s}
.burger i{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger:hover,.burger.on{background:var(--accent);border-color:var(--accent)}
.burger:hover i,.burger.on i{background:#fff}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:active{transform:scale(.96)}
.menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(18,55,42,.35)}
.menu[hidden]{display:none}
.menu .wrap{display:grid;padding-block:8px 14px}
.menu a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:16px;font-weight:700;border-bottom:1px solid var(--line);transition:color .2s,padding .2s}
.menu a:last-child{border-bottom:0}
.menu a::after{content:"→";opacity:0;transition:opacity .2s}
.menu a:hover,.menu a[aria-current=page]{color:var(--accent);padding-left:10px}
.menu a:hover::after,.menu a[aria-current=page]::after{opacity:1}
.menu a[aria-current=page]{box-shadow:inset 3px 0 0 var(--accent)}

/* 홈: 헤더·헤드라인은 화면에 고정, 지도만 움직인다 */
.stage-top{position:absolute;left:0;right:0;top:0}
.stage-top .top{background:rgba(7,32,22,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.14);position:static}
.stage-top .brand,.stage-top .brand b{color:#fff}.stage-top .brand small{color:rgba(255,255,255,.7)}
.stage-top .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.stage-top .burger i{background:#fff}
.stage-top .burger:hover,.stage-top .burger.on{background:var(--accent);border-color:var(--accent)}
.stage-top .menu{background:rgba(7,32,22,.92);border-color:rgba(255,255,255,.14)}
.stage-top .menu a{color:#fff;border-color:rgba(255,255,255,.12)}
.stage-top .menu a:hover,.stage-top .menu a[aria-current=page]{color:var(--title-on-dark)}
.stage{overscroll-behavior:contain;touch-action:none}
.stage .pan{left:0;top:0;touch-action:none;will-change:transform}
.stage-copy{position:absolute;z-index:2;bottom:clamp(60px,10vh,100px);padding:18px var(--gutter);left:0;right:0;max-width:none}
.stage-copy>*{max-width:760px}
.more{background:var(--accent);opacity:.95}
.more:hover{background:#176540}
.stage .pop,.stage .pt{touch-action:manipulation}

/* 내부 페이지: 헤더(흰색) → 제목 띠(진한 초록) → 본문(흰 판) → 푸터 */
main.wrap{max-width:none;padding:0}
main.wrap>*{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
main.wrap>.ph1{max-width:none;padding:clamp(22px,4vw,44px) var(--gutter) clamp(24px,4vw,40px);background:var(--band);color:#fff}
.ph1>*{max-width:1180px;margin-inline:auto}
.ph1 h1{color:var(--title-on-dark);margin-top:12px!important}
.ph1 .crumb,.ph1 .crumb a{color:rgba(255,255,255,.72)}.ph1 .crumb a:hover{color:#fff}
.ph1 .meta{color:rgba(255,255,255,.7)}.ph1 .meta b{color:#fff}
.ph1 .tabs a{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
.ph1 .tabs a:hover{color:#fff;border-color:#fff}
.tabs a.on,.ph1 .tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ctl,.list,.plotwrap,.dt,.grid,.empty,.pn,.adm{background:transparent}
main.wrap>*:not(.ph1){background:#fff}
main.wrap>*:not(.ph1):not(.tabs){padding-block:clamp(20px,3vw,36px)}
main.wrap>.tabs{margin-top:0!important;padding-block:14px;border-bottom:1px solid var(--line);position:sticky;top:67px;z-index:5}
main.wrap>.tabs a{color:var(--mute);border-color:var(--line)}
main.wrap>.tabs a:hover{color:var(--accent);border-color:var(--accent)}
main.wrap>.tabs a.on{color:#fff}
#panel{min-height:50vh}
.btn{background:var(--accent);border-color:var(--accent);color:#fff;transition:background .2s,transform .1s}
.btn:hover{opacity:1;background:#176540}.btn:active{transform:scale(.98)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.row{transition:background .2s,padding .2s}.row:hover{background:var(--accent-soft);padding-inline:10px}
.flt button[aria-pressed=true]{background:var(--accent);color:#fff}
footer{background:var(--band);color:rgba(255,255,255,.75);border:0;display:block;padding-block:28px 48px}footer .wrap{display:flex;gap:12px 32px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:560px){.top .brand b{font-size:14px}.menu a{font-size:15px}main.wrap>.tabs{top:61px}}

.stage-copy h1,.top .brand b{word-break:keep-all}
.stage-copy .lede,.stage-copy .eyebrow{text-shadow:0 1px 8px rgba(0,30,50,.7)}
:root{--mute:#454545}
.top .brand b,.stage-copy h1{font-family:var(--sans);font-weight:900}
@media(min-width:561px){.plotbox{overflow:visible}}

/* 팝업: 내부 여백 30px, 둥근 모서리, 그림자 */
.pop,.card{padding:30px;border-radius:20px;box-shadow:0 24px 60px -12px rgba(0,0,0,.45),0 8px 20px -8px rgba(0,0,0,.3)}
.pop{width:min(360px,calc(100% - 16px))}.card{width:min(360px,calc(100% - 16px))}
.pop .ph,.card .im{border-radius:12px}
.pop .x,.card .x{right:14px;top:14px}
@media(min-width:761px){.card .im{max-height:200px}}
@media(max-width:760px){.card{max-height:58vh;padding:24px}.card .im{max-height:150px}}
@media(max-width:760px){.card{z-index:40}}
/* 모바일 팝업: 화면 세로 가운데 */
@media(max-width:760px){.card{top:0!important;bottom:0!important;height:fit-content;margin-block:auto;max-height:56vh}}
@media(max-width:560px){.pop{top:0!important;bottom:0;height:fit-content;margin-block:auto;max-height:80%;overflow:auto}}
.pop,.card{border-radius:8px}
.pop .ph,.card .im{border-radius:4px}
/* 모바일 팝업 가로폭 축소(좌우 32px 여백) */
@media(max-width:760px){.card{left:32px;right:32px}}
@media(max-width:560px){.pop{left:32px!important;right:32px}}
@media(max-width:760px){.card{width:auto}}
@media(max-width:560px){.pop{width:auto}}
@media(max-width:760px){.card{left:60px;right:60px}}
@media(max-width:560px){.pop{left:60px!important;right:60px}}
@media(max-width:760px){.card{max-height:72vh}.card .im{max-height:260px;height:240px}}
@media(max-width:560px){.pop .ph{height:200px}}
/* 모바일 팝업 사진 3:4 */
@media(max-width:760px){.card{max-height:80vh}.card .im{aspect-ratio:3/4;height:auto;max-height:none;object-fit:cover}}
@media(max-width:560px){.pop .ph{height:auto;aspect-ratio:3/4}}
/* 홈 팝업(모바일): 좌우 30px, 헤더(약 68px) 아래에서만 열린다 */
@media(max-width:560px){.pop{left:30px!important;right:30px;top:84px!important;bottom:84px;height:fit-content;max-height:calc(100% - 168px);margin-block:auto;padding:22px;overflow:auto}
.pop .ph{aspect-ratio:auto;height:130px}.pop .pb{padding-top:14px}.pop .big{font-size:28px;margin-top:10px}.pop ul{margin-top:8px}.pop .go{margin-top:12px}}
@media(max-width:560px){.pop{padding:18px}.pop .ph{height:90px}.pop .pb{padding-top:10px}.pop h3{font-size:19px}.pop .en{font-size:12px}.pop .chip{margin-top:6px}.pop .big{font-size:24px;margin:6px 0 0}.pop ul{font-size:13px;margin-top:4px}.pop li{padding:1px 0}.pop .go{margin-top:8px;font-size:13px}}
@media(max-width:560px){.pop .ph{display:none}.pop .pb{padding-top:0}.pop h3{padding-right:34px}}
@media(max-width:560px){.pop{padding:30px 28px}.pop h3{font-size:22px}.pop .en{font-size:13px}.pop .chip{margin-top:12px}.pop .big{font-size:32px;margin:20px 0 4px}.pop ul{font-size:14px;margin-top:14px}.pop li{padding:4px 0}.pop .go{margin-top:20px;font-size:14px}.pop .x{right:14px;top:14px}}

/* 흰색 글래스 팝업 */
.pop,.card{background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.75);color:#111;box-shadow:0 24px 60px -14px rgba(10,40,30,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.card{background:rgba(255,255,255,.8)}
.card::after{display:none}
.pop h3,.pop .big,.pop li a,.card h3,.card h3 small,.card dl{color:#111}
.pop .en,.pop ul,.pop .big small{color:#333;opacity:1}
.pop .go,.card .go{color:var(--accent)}
.pop .go:hover,.card .go:hover,.pop li a:hover{color:#0f5a36}
.pop .x,.card .x{background:rgba(0,0,0,.08);color:#111;border:1px solid rgba(0,0,0,.12)}
.chip{background:rgba(30,127,79,.14);color:#166a40}
.chip.soon{background:rgba(0,0,0,.08);color:#444}.chip.prep{background:rgba(183,121,31,.18);color:#7a4f0f}
.card .x{background:rgba(255,255,255,.9);box-shadow:0 1px 6px rgba(0,0,0,.25)}
/* 글래스 팝업 글자 더 짙게 */
.pop,.card,.pop h3,.pop .big,.pop li,.pop li a,.card h3,.card h3 small,.card dl,.card dl div{color:#000}
.pop .en,.pop ul,.pop .big small,.pop li{color:#111;opacity:1}
.pop h3,.card h3,.pop .big{font-weight:800}
.pop .go,.card .go{color:#0f5a36}
.chip{color:#0b4a2b}

/* PC 인덱스: 세로 슬라이드(휠·키보드로 한 화면씩 넘김) */
@media(min-width:901px){
    main.wrap:has(.strip){min-height:calc(100svh - 96px);display:grid;align-content:center;background:var(--paper)}
  main.wrap:has(.strip)>.strip{background:transparent;max-width:1180px;width:100%;margin-inline:auto;gap:clamp(24px,3vw,48px)}
  .strip h3{font-size:30px}.strip .n{font-size:64px;margin-top:28px}.strip a{padding-top:24px}
}

@media(min-width:901px){.stage,.stage .pan{touch-action:auto;overscroll-behavior:auto}}

.pop .ph{display:none}.pop .pb{padding-top:0}.pop h3{padding-right:34px}

/* PC(901px 이상): 햄버거 없이 메뉴를 헤더 오른쪽에 그대로 노출 */
@media(min-width:901px){
  .burger{display:none}
  .top,.stage-top .top{position:relative}
  .top .menu,.top .menu[hidden]{display:block!important;position:absolute;inset:0 0 auto 0;height:100%;background:none;border:0;box-shadow:none;pointer-events:none}
  .top .menu .wrap{display:flex;justify-content:flex-end;align-items:center;gap:32px;height:100%;padding-block:0}
  .top .menu a{pointer-events:auto;padding:6px 0;font-size:15px;border:0;box-shadow:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
  .top .menu a::after{display:none}
  .top .menu a:hover,.top .menu a[aria-current=page]{padding-left:0;color:var(--accent);border-bottom-color:var(--accent);box-shadow:none}
  .stage-top .menu a{color:#fff}
  .stage-top .menu a:hover,.stage-top .menu a[aria-current=page]{color:var(--title-on-dark);border-bottom-color:var(--title-on-dark)}
}

/* 지도 이동 성능: 움직이는 지도 위의 블러 제거, 끄는 동안 핀 애니메이션 정지 */
.stage-top .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(7,32,22,.88)}
.stage.dragging .pt::after{animation:none;opacity:0}
.stage .pan{backface-visibility:hidden;contain:layout style}
.stage .pan img{will-change:auto}
.strip .cl{list-style:none;margin:18px 0 0;padding:0;font-size:14px;border-top:1px solid var(--line)}
.strip .cl li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.strip .cl b{font-weight:700;color:var(--ink);white-space:nowrap}
.strip a:hover .cl b{color:var(--accent)}
@media(max-width:560px){.strip{grid-template-columns:1fr}}
.strip{gap:clamp(32px,6vw,96px)}
@media(min-width:901px){main.wrap:has(.strip)>.strip{gap:clamp(48px,6vw,110px)}}
@media(min-width:901px){main.wrap:has(.strip)>.strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,5vw,110px)}}
.strip .cl{font-size:12px;margin-top:14px}
.strip .cl li{padding:6px 0}

/* 글래스 팝업 경량화: 블러 약화, 지도를 끄는 동안은 블러 대신 불투명도로 대체 */
.pop,.card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 32px -12px rgba(10,40,30,.4),inset 0 1px 0 rgba(255,255,255,.9)}
.stage.dragging .pop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.88)}
.pop{animation:none}
/* 지도 오른쪽 하단 드래그 안내 */
.drag-tip{position:absolute;right:var(--gutter);bottom:20px;z-index:2;padding:8px 14px;border-radius:99px;background:rgba(7,32,22,.55);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px;font-weight:700;pointer-events:none;white-space:nowrap}
.drag-tip[hidden]{display:none}
@media(min-width:901px){.stage-hint{bottom:64px}}
@media(max-width:560px){.drag-tip{right:16px;bottom:14px;font-size:12px;padding:7px 12px}}
/* 페이지 제목(내부 페이지 제목 띠)은 나눔명조 */
.ph1 h1,.dt h1{font-family:'Nanum Myeongjo',Georgia,serif;font-weight:800}
.stage-copy h1{font-family:'Nanum Myeongjo',Georgia,serif;font-weight:800}
/* 제목 띠(어두운 초록) 위의 보조 글자는 밝게 */
.ph1 .eyebrow{color:var(--title-on-dark)}
.ph1 .note{color:rgba(255,255,255,.75)}
/* 본문 영역의 흰 배경 제거 (페이지 배경이 그대로 보인다). 고정 탭 줄만 겹침 방지로 페이지 배경색 유지 */
main.wrap>*:not(.ph1){background:transparent}
main.wrap>.tabs{background:var(--paper)}
.dtbl thead th{text-align:center}
.figs.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px 18px}
.figs.wide img{aspect-ratio:4/3;object-fit:cover;object-position:center 30%;background:var(--line)}
.figs.wide figcaption{font-size:13px;line-height:1.55;margin-top:6px}
.figs img{background:transparent}
/* 제목 띠 안의 소속(회색 인라인 글자)이 어두운 초록 위에서 안 보이던 문제 */
.ph1 .meta [style*="--mute"]{color:rgba(255,255,255,.78)!important}
.dtbl td:first-child{overflow-wrap:normal}
.docbody figure img{max-width:100%;height:auto}

/* 논고 원문 슬라이드 */
.slider{margin-top:28px;outline:none;scroll-margin-top:70px}
.sl-stage{position:relative;display:grid;place-items:center;background:#e9ede8;padding:clamp(10px,2vw,28px);border-radius:4px}
.sl-view{max-width:100%;overflow:hidden;display:grid;place-items:start center}
.sl-view.zoomed{overflow:auto;width:100%;max-height:calc(100svh - 150px);cursor:grab;place-items:start}
.sl-view img{max-height:calc(100svh - 150px);width:auto;max-width:100%;height:auto;box-shadow:0 10px 30px -12px rgba(18,55,42,.45);background:#fff;display:block}
.sl-view.zoomed img{max-width:none}
.sl-zoom{position:absolute;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:2px;background:rgba(18,55,42,.88);border-radius:4px;padding:2px;color:#fff}
.sl-zoom button{width:34px;height:34px;border:0;background:none;color:#fff;font-size:20px;cursor:pointer;border-radius:3px}.sl-zoom button:hover{background:var(--accent)}
.sl-zoom b{min-width:46px;text-align:center;font-size:12px}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:64px;border:0;border-radius:4px;background:rgba(18,55,42,.82);color:#fff;font-size:34px;line-height:1;cursor:pointer;transition:background .2s}
.sl-btn:hover:not(:disabled){background:var(--accent)}.sl-btn:disabled{opacity:.25;cursor:default}
#slPrev{left:8px}#slNext{right:8px}
.sl-bar{display:flex;gap:16px;align-items:center;margin-top:14px;font-size:13px}
.sl-bar #slNo{min-width:120px;font-weight:700}
.sl-bar input{flex:1;accent-color:var(--accent)}
.sl-bar a{border:1px solid var(--ink);padding:6px 14px;border-radius:3px;white-space:nowrap}.sl-bar a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:560px){.sl-btn{width:36px;height:52px;font-size:26px}.sl-bar{flex-wrap:wrap}.sl-bar input{order:3;flex-basis:100%}}

/* 논고 쓰기 편집기 */
.tb{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border:1px solid var(--line);border-bottom:0;background:#fff;position:sticky;top:60px;z-index:4}
.tb button,.tbimg{border:1px solid var(--line);background:#fff;padding:6px 10px;font-size:13px;cursor:pointer;border-radius:3px;transition:background .15s,color .15s}
.tb button:hover,.tbimg:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ed{min-height:420px;max-width:none!important;margin-top:0!important;padding:22px 24px;border:1px solid var(--line);background:#fff;outline:none;line-height:2}
.ed:focus{border-color:var(--accent)}
.ed img,.userdoc img{max-width:100%;height:auto}
.userdoc{max-width:46em}.userdoc h2,.userdoc h3{margin:1.6em 0 .6em}.userdoc blockquote{margin:1em 0;padding:.2em 1.2em;border-left:3px solid var(--accent);color:var(--mute)}
fieldset.kind{display:flex;gap:22px;flex-wrap:wrap}fieldset.kind label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}fieldset.kind input{width:auto}
form.f fieldset.kind label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}form.f fieldset.kind input{width:auto;border:0;padding:0}
.tb label.tbimg{display:inline-block}

/* 우측 상단 로그인 아이콘 */
.hact{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
.lgi{position:relative;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.lgi:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.lgi.on{border-color:var(--accent);color:var(--accent)}
.lgi.on::after{content:"";position:absolute;right:6px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}
.lgi.on:hover{color:#fff}.lgi.on:hover::after{background:#fff;box-shadow:0 0 0 2px var(--accent)}
.lgi:active{transform:scale(.96)}
.stage-top .lgi{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.stage-top .lgi:hover{background:var(--accent);border-color:var(--accent)}
.stage-top .lgi.on::after{box-shadow:0 0 0 2px #0b2a1f}
@media(min-width:901px){.top .menu .wrap{padding-right:calc(var(--gutter) + 56px)}}
form.f fieldset.kind{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
form.f fieldset.kind label{white-space:nowrap;flex:0 0 auto}
form.f fieldset.kind legend{flex-basis:100%}
/* 논고 쓰기: 왼쪽 목록 칸을 좁히고 글쓰기 칸을 넓힌다 */
.adm:has(#lst){grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px)}
.adm:has(#lst) .side .btn{padding:8px 10px;font-size:13px}
.adm:has(#lst) .side .lst button{font-size:13px;padding:8px 2px}
.adm:has(#lst) .side .note{font-size:11px}
@media(max-width:860px){.adm:has(#lst){grid-template-columns:1fr}}
.wmenu{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
.wmenu a{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border:1px solid var(--line);border-top:3px solid var(--accent);background:#fff;transition:background .2s,transform .1s}
.wmenu a b{font:800 18px/1.3 var(--serif)}.wmenu a span{font-size:13px;color:var(--mute)}
.wmenu a:hover{background:var(--accent-soft)}.wmenu a:active{transform:scale(.99)}
/* 내 정보: 2단 (왼쪽 내 정보, 오른쪽 관리자) */
.acc2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start;padding-bottom:64px}
@media(max-width:860px){.acc2{grid-template-columns:1fr}}
.acc2 #admSec[hidden]{display:none}
@media(min-width:861px){.acc2:has(#admSec[hidden]){grid-template-columns:minmax(0,520px)}}
/* 비석 사진: 이미지 선택 / 추가(+) */
.photos2{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.photos2 .ph2{position:relative;width:104px;height:104px;border-radius:3px;overflow:hidden;background:var(--line)}
.photos2 .ph2 img{width:100%;height:100%;object-fit:cover}
.photos2 .ph2 button[data-i]{position:absolute;right:4px;top:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}
.photos2 .ph2.add{border:2px dashed var(--accent);background:transparent;color:var(--accent);font-size:34px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.photos2 .ph2.add:hover{background:var(--accent);color:#fff}
.photos2 .pick{padding:14px 22px}
.places{border:1px solid var(--line);background:#fff;padding:14px 18px;margin-bottom:26px}
.places summary{cursor:pointer;font-weight:700}
.places .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px}
@media(max-width:860px){.places .pgrid{grid-template-columns:1fr}}
.bulk{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:18px}
.bulk>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-top:3px solid var(--accent);background:#fff}
.bulk .btn{display:inline-block;cursor:pointer;text-align:center}
.bulk .note{margin:0;line-height:1.6}
.bulk a{color:var(--accent);font-weight:700;font-size:13px;border-bottom:1px solid currentColor}

/* 하부 메뉴: 지역 아래 묘지 구역 */
.top .menu .mi{pointer-events:auto}
.mi .sub:empty{display:none!important}
@media(min-width:901px){
  .top .menu .mi{position:relative;display:flex;align-items:center;height:100%}
  .mi .sub{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:240px;padding:8px 0;background:#fff;border:1px solid var(--line);box-shadow:0 18px 30px -16px rgba(18,55,42,.4);z-index:45}
  .mi:hover .sub,.mi:focus-within .sub{display:block}
  .top .menu .mi .sub a{display:block;padding:9px 18px;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink);border:0;white-space:normal;pointer-events:auto}
  .top .menu .mi .sub a:hover{background:var(--accent-soft);color:var(--accent);padding-left:18px;border:0}
  .mi.has-sub>a::after{content:"▾";display:inline-block;margin-left:5px;font-size:10px;opacity:.7}
}
@media(max-width:900px){
  .mi .sub{display:block}
  .menu .mi .sub a{padding:9px 4px 9px 22px;font-size:14px;font-weight:400;color:var(--mute);border-bottom:0}
  .menu .mi .sub a::after{display:none}
  .stage-top .menu .mi .sub a{color:rgba(255,255,255,.7)}
}
/* 지역·묘지 사진 */
.pimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:26px}
.pimgs:empty{display:none}
.pimgs img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line);border-radius:2px}
.strip .sthumb{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px;background:var(--line);border-radius:2px}
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:28px;padding-bottom:64px;align-items:start}
@media(max-width:860px){.pgrid2{grid-template-columns:1fr}}
.fl{display:grid;gap:6px;margin-bottom:16px;font-size:12px;color:var(--mute)}
.fl select,.fl textarea{width:100%;border:1px solid var(--line);background:#fff;padding:10px;font-size:15px;color:var(--ink);border-radius:3px;outline:none}
.fl select:focus,.fl textarea:focus{border-color:var(--accent)}
.bulkto{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:16px;padding:14px 16px;background:var(--accent-soft)}
.bulkto label{display:grid;gap:5px;font-size:12px;color:var(--mute)}
.bulkto input{width:100%;border:1px solid var(--line);background:#fff;padding:9px 10px;font-size:14px;border-radius:3px;outline:none}
.bulkto input:focus{border-color:var(--accent)}
@media(max-width:700px){.bulkto{grid-template-columns:1fr}}
.newbox{padding:12px 14px;margin-bottom:14px;background:var(--accent-soft)}.newbox .fl:last-child{margin-bottom:0}.newbox input{width:100%;border:1px solid var(--line);background:#fff;padding:9px 10px;font-size:14px;border-radius:3px;outline:none}.newbox input:focus{border-color:var(--accent)}
/* 조사일자: 직접 입력란 맨 위에 고정 */
.sdbar{position:sticky;top:8px;z-index:6;background:var(--paper);padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sdbar small{font-weight:400;color:var(--mute);margin-left:6px}
.sdbar input{max-width:240px;border-bottom:2px solid var(--accent)!important}
html,body{overflow-x:clip}
/* 로그인 아이콘 메뉴 (내 정보·로그아웃) */
.hact{position:relative}
.lgm{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 30px -16px rgba(18,55,42,.4);padding:6px 0;z-index:60}
.lgm[hidden]{display:none}
.lgm a{display:block;padding:11px 18px;font-size:14px;font-weight:400;color:var(--ink);border:0}
.lgm a:hover{background:var(--accent-soft);color:var(--accent)}
.lgm a#lgout{border-top:1px solid var(--line);font-weight:700;color:var(--pin)}
.lgm a#lgout:hover{background:#fbeceb;color:var(--pin)}
.top .menu .lgm a{pointer-events:auto}
.lgm .lgi-info{padding:12px 18px 10px;font-size:13px;line-height:1.6;color:var(--mute);border-bottom:1px solid var(--line);min-width:200px}
.lgm .lgi-info b{font-size:15px;color:var(--ink)}.lgm .lgi-info small{color:var(--accent);font-weight:700;margin-left:4px}
.addbtn{margin:34px 0 8px}.addbtn .btn{display:inline-block;padding:12px 22px;font-weight:700}
.addbtn{text-align:right}

/* 묘비 상세: 배경·그림자·장식 없이 선과 표로만 (원본 쪽 구성 그대로) */
.gv-h1{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.gv-h1 .gno{font:400 .8em/1 var(--serif);color:var(--title-on-dark);opacity:.9}
.gv-h1 small{font-size:.55em;font-weight:400;color:rgba(255,255,255,.8)}
.gv{padding-block:clamp(18px,3vw,36px) 60px;background:transparent}
.gv-top{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.gt{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:22px;background:transparent}
.gt th,.gt td{padding:8px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-weight:400;line-height:1.6}
.gt th{color:var(--accent);font-size:12.5px;white-space:nowrap;width:78px}
.gt th.sub{width:54px;text-align:center}
.gt-ship th,.gt-ship td,.gt-rev th,.gt-rev td{text-align:center;vertical-align:middle}
.gt-ship thead th{width:auto}
.gt-ship td.l{text-align:left}
.gt-rev th{width:auto}
.tblw{overflow-x:auto}
.gv-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;align-items:start}
.gv-photos img{width:100%;height:auto;display:block;background:var(--line)}
.gv-two{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;margin-top:26px}
.gv-ns{grid-template-columns:3fr 1fr}
.gv-box h3{margin:0 0 8px;padding-bottom:6px;border-bottom:1.5px solid var(--accent);font:400 12.5px/1.4 var(--sans);color:var(--accent);letter-spacing:.02em}
.gv-box p{margin:0;font:400 15px/1.85 var(--serif);overflow-wrap:anywhere}
.gv-ns .gv-box p{font:400 14px/1.85 var(--sans)}
.gv-more{margin-top:20px}.gv-more summary{cursor:pointer;color:var(--mute);font-size:13px}.gv-more p{margin:12px 0 0;font:400 15px/1.85 var(--serif)}
.gv-sec{margin-top:34px}.gv-sec h2{font:700 11px/1 var(--sans);letter-spacing:.16em;color:var(--mute);margin:0 0 12px}
.glyph{height:1.1em;width:auto;vertical-align:-.2em;margin:0 1px}
@media(max-width:820px){.gv-top{grid-template-columns:1fr}.gv-two,.gv-ns{grid-template-columns:1fr}}
/* 묘비 상세 손질 */
.glyph{display:inline-block;max-width:none}
.gv-photos img{aspect-ratio:3/4.4;object-fit:cover}
.gt-rev th:empty,.gt-rev td:empty{border-top:0}
.gt th.cap{width:auto;color:var(--mute);font-size:12px;letter-spacing:.04em;border-bottom:0;padding-bottom:2px}.gt tr:has(th.cap)+tr th,.gt tr:has(th.cap)+tr td{border-top:0}
/* 표 맨 위 줄은 굵은 녹색, 맨 아랫줄은 다른 표와 같은 가는 선 */
.gt>:first-child>tr:first-child>th,.gt>:first-child>tr:first-child>td{border-top:2px solid var(--accent)}
.gt tr:last-child th,.gt tr:last-child td{border-bottom:1px solid var(--line)}
.gv-box{border-bottom:1px solid var(--line);padding-bottom:10px}
/* 사진은 잘라 내지 않고 원래 비율 그대로 */
.gv-photos img{aspect-ratio:auto;object-fit:contain;height:auto}
.figs.wide img{aspect-ratio:auto;object-fit:contain;height:auto}
.gal img{aspect-ratio:auto;object-fit:contain;height:auto}
.pimgs img{aspect-ratio:auto;object-fit:contain;height:auto}
/* 제목은 모두 '비문 내용'과 같은 모양(녹색 글자 + 아래 녹색 선). 제목이 있는 표는 그 선이 표의 맨 위 줄 */
.gv-box h3,.gv-t{margin:0;padding:3px 6px 6px 0;border-bottom:2px solid var(--accent);font:400 12.5px/1.4 var(--sans);color:var(--accent);letter-spacing:.02em}
.gv-box h3{margin-bottom:8px}
.gv-sec .gv-t{margin-bottom:0}
.gv-t+.gt>:first-child>tr:first-child>th,.gv-t+.gt>:first-child>tr:first-child>td,.gv-t+.tblw .gt>:first-child>tr:first-child>th,.gv-t+.tblw .gt>:first-child>tr:first-child>td{border-top:0}
.gv-sec .gv-t+svg.mini{margin-top:12px}
.gv-sec{margin-top:30px}
/* 묘비 사진: 높이를 같게, 가로폭은 사진 비율대로(원본 보고서와 동일) */
.gv-photos{display:flex;gap:8px;align-items:flex-start}
.gv-photos img{flex:1 1 0;min-width:0;width:auto}
/* 묘비 상세: 머리 띠의 글자 시작선을 본문(조사 일자)과 같게 */
main.wrap>.ph1:has(.gv-h1){padding-inline:0}
.ph1:has(.gv-h1)>*{padding-inline:var(--gutter)}
/* 사진이 4장 이상이면 격자(자르지 않음) */
.gv-photos.many{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gv-photos.many img{flex:none;width:100%}
.photos2 .pmain{position:absolute;left:0;bottom:0;width:100%;height:24px;display:block;white-space:nowrap;border:0;border-radius:0;padding:0;font:500 12px/24px var(--sans);text-align:center;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.photos2 .ph2[draggable=true]{cursor:grab}.photos2 .ph2.drop{outline:2px solid var(--accent)}
.photos2 .pmain.on{background:var(--accent);cursor:default}
.photos2 .pmain:not(.on):hover{background:var(--accent)}
.photos2 .pmain.on{cursor:pointer}
.photos2 .ph2 button,.photos2 .ph2 .pmain{z-index:2}
/* 묘비 사진 격자: 사진 사이·영역 사이에 간격을 두어 붙거나 겹쳐 보이지 않게 */
.gv-photos{gap:12px}
.gv-photos.many{align-items:start;row-gap:12px;column-gap:12px}
.gv-photos+.gv-photos{margin-top:12px}
.gv-photos img{position:static;max-width:100%}
/* 사진 편집(회전·자르기) */
.ped{border:0;border-radius:6px;padding:16px;max-width:calc(100vw - 24px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.ped::backdrop{background:rgba(0,0,0,.55)}
.ped canvas{display:block;margin:10px auto;max-width:100%;touch-action:none;cursor:crosshair;background:#222}
.ped-bar{display:flex;gap:8px;flex-wrap:wrap}.ped-end{justify-content:flex-end}
.ped-bar button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:4px;font:500 13px var(--sans);cursor:pointer}
.ped-bar button:hover{border-color:var(--accent);color:var(--accent)}
.ped-bar button.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.ped-tip{margin:8px 0 0;font:400 12px/1.5 var(--sans);color:var(--mute)}
.photos2 .ph2 img{cursor:default}
@media(min-width:821px) and (pointer:fine){.photos2 .ph2 img{cursor:pointer}}
.ped-ang{display:flex;align-items:center;gap:10px;margin-top:10px;font:500 13px var(--sans)}.ped-ang input{flex:1;min-width:140px;accent-color:var(--accent)}.ped-ang output{min-width:42px;text-align:right}
.ped canvas{cursor:default}
form.f legend small{font-weight:400;color:var(--mute);margin-left:8px;letter-spacing:0;text-transform:none}
form.f label small{font-weight:400;color:var(--mute)}
form.f legend{font-weight:700;color:var(--ink);letter-spacing:0;text-transform:none}
/* 기단·비신 줄 */
.tiers{display:grid;gap:10px}
.tiers .tr{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,2fr) 32px;gap:10px;align-items:end}
.tiers .tr>b{padding-bottom:9px;color:var(--accent)}
.tiers .tx{border:0;background:transparent;color:var(--mute);font-size:20px!important;cursor:pointer;padding:0 0 6px}
.tiers .tx:hover{color:#c0392b}
@media(max-width:700px){.tiers .tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px}.tiers .tr>b{grid-column:1/-1;padding:0}.tiers .tr label:nth-of-type(2){grid-column:1/3}}
/* 발간자료 */
.pubs{display:grid;gap:34px;margin-top:30px}
.pub{display:grid;grid-template-columns:212px minmax(0,1fr);gap:28px;align-items:start}
.pub img{width:212px;height:auto;display:block;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.pub h3{margin:0 0 6px;font:800 24px/1.35 'Nanum Myeongjo',serif}
.pub .sub{margin:0 0 8px;color:var(--mute)}.pub .meta{margin:0 0 14px;font-size:13px;color:var(--mute)}
.pub .acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
@media(max-width:640px){.pub{grid-template-columns:1fr}.pub img{width:160px}}
.pvd{border:0;border-radius:6px;padding:0;width:min(920px,calc(100vw - 20px));max-height:calc(100vh - 20px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.pvd::backdrop{background:rgba(0,0,0,.6)}
.pvbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pvbar span{display:flex;gap:8px;align-items:center}
.pvstage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;background:#eee;padding:8px;max-height:calc(100vh - 80px);overflow:auto}
.pvstage img{width:100%;height:auto;display:block;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.pvstage button{border:0;background:transparent;font-size:38px;line-height:1;cursor:pointer;color:var(--ink);height:100%;min-height:60px}
.pvstage button:disabled{opacity:.25;cursor:default}
.pvstage img{width:auto;max-width:100%;max-height:calc(100vh - 120px);margin:auto}.pvstage{overflow:hidden}
.pbd{border:0;border-radius:6px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.4)}.pbd::backdrop{background:rgba(0,0,0,.55)}.pbd label{display:grid;gap:6px}.pbd small{display:block;color:var(--mute)}
.dtbl.nw th,.dtbl.nw td{overflow-wrap:normal}.dtbl.nw td{white-space:normal}