:root{color-scheme:light dark;--bg:#fff;--fg:#222;--sub:#555;--mute:#777;--line:#e3e3e3;--accent:#2b5fa8;--card:#f7f8fa;--card2:#eef2f9}
@media(prefers-color-scheme:dark){:root{--bg:#16181b;--fg:#e6e6e6;--sub:#b5bac0;--mute:#9aa0a6;--line:#2c2f33;--accent:#7fb0ee;--card:#1e2125;--card2:#232a36}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font:16px/1.75 "Noto Sans KR","Malgun Gothic","돋움",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
.page{max-width:860px;margin:0 auto;padding:22px 18px 56px}
h1{font-size:1.45rem;line-height:1.35;letter-spacing:-.01em;margin:0 0 .8em;padding-bottom:.5em;border-bottom:1px solid var(--line)}
h2{font-size:1.15rem;line-height:1.4;margin:1.6em 0 .5em;color:var(--accent)}
h3{font-size:1.05rem;line-height:1.4;margin:1.2em 0 .4em}
h4{font-size:.98rem;line-height:1.4;margin:1em 0 .3em;color:var(--sub)}
p{margin:0 0 .8em}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border:0}
.ta-c{text-align:center}.ta-r{text-align:right}
.c-blue{color:light-dark(#1f4fd8,#8db3ff)}.c-pink{color:light-dark(#c2189e,#ff8ae0)}
.c-red{color:light-dark(#d02020,#ff8a8a)}.c-purple{color:light-dark(#7a2a9a,#d6a2f0)}
blockquote.verse{margin:.6em 0 1em;padding:.7em 1em;border-left:3px solid var(--accent);background:var(--card);border-radius:0 8px 8px 0;color:var(--sub)}
blockquote.verse p:last-child{margin-bottom:0}
.crumb{font-size:.9rem;margin:0 0 .8em}
.hl{display:inline-block;padding:.1em .6em;border-radius:6px}
.legend{text-align:center;color:var(--mute);font-size:.85rem;margin:-.2em 0 1em}

/* 사진 모음 메뉴 */
.iconrow{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;align-items:center;margin:.4em 0 1.2em}
.hero{text-align:center;margin:0}
.hero img{border-radius:8px}

/* 갤러리 */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.2em;padding:0;list-style:none}
.tabs a,.tabs span{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:.92rem;line-height:1.2;background:var(--card)}
.tabs span.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.album{margin:1.6em 0 .6em;font-size:1.05rem;color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.grid figure{margin:0}
.grid a.ph{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.grid a.ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.grid figcaption{margin-top:3px;font-size:.74rem;line-height:1.3;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:12px}
#lb[hidden]{display:none}
#lb img{max-width:100%;max-height:calc(100% - 56px);object-fit:contain;border-radius:4px}
#lb .c{color:#ddd;font-size:.9rem;margin-top:10px;text-align:center;min-height:1.4em}
#lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:26px;line-height:1;cursor:pointer}
#lb .x{top:max(10px,env(safe-area-inset-top));right:10px}
#lb .p{left:8px;top:50%;transform:translateY(-50%)}
#lb .n{right:8px;top:50%;transform:translateY(-50%)}
html.lbopen{overflow:hidden}

/* 표(주소록): 넓은 화면은 표, 좁은 화면은 카드 */
.tw{overflow-x:auto;margin:0 0 1.4em}
table.stack{width:100%;border-collapse:collapse;font-size:.95rem}
table.stack th{background:var(--accent);color:#fff;padding:8px 10px;text-align:left;font-weight:600;white-space:nowrap}
table.stack td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.stack tbody tr:nth-child(even){background:var(--card)}
table.stack td.ph{color:var(--mute);font-size:.85em}
@media(max-width:640px){
  table.stack thead{display:none}
  table.stack,table.stack tbody{display:block}
  table.stack tr{display:block;margin:0 0 10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
  table.stack tbody tr:nth-child(even){background:var(--card)}
  table.stack td{display:flex;gap:10px;padding:2px 0;border:0}
  table.stack td::before{content:attr(data-label);flex:0 0 5.2em;color:var(--mute);font-size:.84em;padding-top:.15em}
  table.stack td:first-child{font-size:1.05rem;font-weight:700}
  table.stack td:empty{display:none}
}

/* POGS 개요(표 → 카드) */
.tree h2{margin-top:1.4em}
.tree .box{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--card);padding:10px 14px;margin:0 0 12px}
.tree .box .box{background:var(--bg);border-left-color:light-dark(#3a9d6a,#6fd3a0)}
.tree .box .box .box{background:var(--card);border-left-color:light-dark(#c98a1b,#f0c36a)}
.tree .ttl{font-weight:700;margin:0 0 .5em}
.tree .row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 14px;padding:8px 0;border-top:1px dashed var(--line)}
.tree .row:first-of-type{border-top:0}
.tree .lab{font-weight:600}
.tree .lab p{margin:0 0 .2em}.tree .lab p+p{font-weight:400;color:var(--sub);font-size:.94rem}
.tree .lab small,.tree .val small{display:block;font-weight:400;color:var(--mute);font-size:.78rem;margin-bottom:1px}
.tree .val p{margin:0 0 .35em}.tree .val p:last-child{margin-bottom:0}
.tree .val{color:var(--sub);font-size:.96rem}
@media(min-width:680px){.tree .row.two{grid-template-columns:minmax(9em,32%) minmax(0,1fr)}}
.tree .row:not(.two) .lab small{display:none}