/* 16호 설정집 홈페이지 — 지도 · 던전 (PC 가로 기준 · GPT 시안 mock7 · mock8). 손으로 쓴 정적 파일이다(조립 스크립트가 만들지 않는다). */
.page-atlas{min-height:100vh;background:linear-gradient(#0F0B1Ed9,#0F0B1Eb8 28%,#0F0B1Eeb),url(img/bg1.webp) center top/cover fixed no-repeat #0F0B1E}
.atlas{max-width:calc(var(--u)*92);margin:0 auto;padding:calc(var(--u)*4.2) calc(var(--u)*2) calc(var(--u)*1)}
.cast-head{text-align:center}
.cast-head h1{display:inline-flex;align-items:center;gap:calc(var(--u)*1.2);margin:0;font-family:var(--serif);font-weight:800;font-size:max(26px,calc(var(--u)*2.5));letter-spacing:.2em;color:#FFE7A8;text-shadow:0 0 calc(var(--u)*1) #8A4DFFcc,0 2px 0 #5A3A00}
.cast-head h1::before,.cast-head h1::after{content:"";width:calc(var(--u)*6);height:2px;background:linear-gradient(90deg,#FFC85700,#FFC857)}
.cast-head h1::after{transform:scaleX(-1)}
.cast-head p{margin:.35em 0 0;color:#EDE7FFcc;font-size:max(13px,calc(var(--u)*.84));letter-spacing:.06em}
.cast-head p b{color:var(--gold);font-family:var(--serif);letter-spacing:.14em}
.panel{background:#140E2Ae0;border:1px solid #FFC857aa;border-radius:calc(var(--u)*.45);outline:1px solid #8A4DFF55;outline-offset:calc(var(--u)*.3);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2) #000a}
.parch{position:relative;color:#2A1E3F;border-radius:calc(var(--u)*.25);
  background:radial-gradient(ellipse at 18% 8%,#F8ECCB 0,#F8ECCB00 60%),radial-gradient(ellipse at 85% 95%,#CFAF7A 0,#CFAF7A00 55%),linear-gradient(135deg,#EBD8AD,#DCC291);
  box-shadow:0 calc(var(--u)*.7) calc(var(--u)*2) #000d,inset 0 0 calc(var(--u)*2.6) #6B3E1A77}
.parch .seal{position:absolute;top:calc(var(--u)*-1);right:calc(var(--u)*1.6);z-index:2;width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#E8605A,#A32222 55%,#5C0F12);box-shadow:0 calc(var(--u)*.25) calc(var(--u)*.5) #0009,inset 0 0 0 calc(var(--u)*.35) #8E1D1D,inset 0 0 0 calc(var(--u)*.45) #C9463F}
.parch h2{margin:0;font-family:var(--serif);font-size:max(20px,calc(var(--u)*1.7));letter-spacing:.12em}
.parch h3{display:flex;align-items:center;gap:.7em;margin:calc(var(--u)*.1) 0 0;font-family:var(--serif);font-size:max(14px,calc(var(--u)*.98));letter-spacing:.08em}
.parch h3::before{content:"";width:.5em;height:.5em;background:#5B3F2A;transform:rotate(45deg)}
.parch h3::after{content:"";flex:1;height:1px;background:#5B3F2A88}
.shot{margin:0;overflow:hidden;border:2px solid #5B3F2A;box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.8) #0008}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}

/* 지도 */
.map-grid{display:grid;grid-template-columns:minmax(0,calc(var(--u)*41)) minmax(0,1fr);gap:calc(var(--u)*1.6);align-items:start;margin-top:calc(var(--u)*1.2)}
.mapbox{padding:calc(var(--u)*.7);background:linear-gradient(135deg,#EBD8AD,#C9A873);border-radius:calc(var(--u)*.3);box-shadow:0 calc(var(--u)*.7) calc(var(--u)*2) #000d,inset 0 0 calc(var(--u)*1.4) #6B3E1A99}
.mapimg{position:relative;aspect-ratio:1;border:2px solid #5B3F2A;border-radius:calc(var(--u)*.15)}
.mapimg>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8) sepia(.2)}
.mapimg::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 calc(var(--u)*5) #2A1E3Fcc}
.rose{position:absolute;left:calc(var(--u)*1.4);bottom:calc(var(--u)*1.4);width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);color:#F3E6C2;opacity:.85;filter:drop-shadow(0 0 calc(var(--u)*.4) #000)}
.pin{position:absolute;z-index:1;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);margin:calc(var(--u)*-.9) 0 0 calc(var(--u)*-.9);padding:0;font:inherit;background:none;border:0;cursor:pointer}
.pin i{position:absolute;inset:calc(var(--u)*.3);background:radial-gradient(circle at 35% 30%,#FFF2C4,#FFC857 45%,#8A5A12);border:2px solid #2A1E3F;transform:rotate(45deg);box-shadow:0 calc(var(--u)*.2) calc(var(--u)*.5) #000c;transition:transform .15s}
.pin b{position:absolute;left:50%;top:100%;transform:translateX(-50%);padding:.15em .8em;white-space:nowrap;font-family:var(--serif);font-weight:700;font-size:max(12px,calc(var(--u)*.78));letter-spacing:.06em;
  color:#F3E6C2;background:#140E2Ae6;border:1px solid #FFC85788;border-radius:999px;box-shadow:0 calc(var(--u)*.15) calc(var(--u)*.4) #000a}
.pin.up b{top:auto;bottom:100%}
.pin:hover i{transform:rotate(45deg) scale(1.15)}
.pin.on{z-index:2}
.pin.on i{background:radial-gradient(circle at 35% 30%,#fff,#C9A7FF 45%,#6A3FD0);box-shadow:0 0 0 calc(var(--u)*.2) #FFC857,0 0 calc(var(--u)*1.4) calc(var(--u)*.3) #8A4DFF}
.pin.on b{color:#2A1E3F;background:#FFC857;border-color:#2A1E3F}
.place{display:grid;gap:calc(var(--u)*.75);padding:calc(var(--u)*1.1) calc(var(--u)*1.3) calc(var(--u)*1.2)}
.place .shot{aspect-ratio:800/230}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*.45) calc(var(--u)*.9);font-size:max(13px,calc(var(--u)*.82));line-height:1.6;word-break:keep-all}
.facts dt{align-self:start;min-width:4.2em;padding:.05em .7em;font-family:var(--serif);font-weight:700;text-align:center;white-space:nowrap;color:#F6E7C3;background:#5B3F2A;border-radius:calc(var(--u)*.2)}
.facts dd{margin:0}
.people{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--u)*.6)}
.people a{display:grid;gap:.15em;padding:calc(var(--u)*.3) calc(var(--u)*.3) calc(var(--u)*.35);text-align:center;color:#2A1E3F;background:linear-gradient(160deg,#F4E7C8,#DDC597);box-shadow:0 calc(var(--u)*.2) calc(var(--u)*.5) #0008}
.people img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center 12%}
.people b,.people i{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.people b{font-size:max(11px,calc(var(--u)*.7))}
.people i{font-style:normal;font-size:max(10px,calc(var(--u)*.6));color:#6A5A7A}
.spots{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6)}
.spots a{display:inline-flex;align-items:baseline;gap:.7em;padding:.45em 1.1em;font-size:max(12px,calc(var(--u)*.8));color:#F6E7C3;background:linear-gradient(#3B2A66,#1B1233);border:1px solid #FFC857aa;border-radius:calc(var(--u)*.25)}
.spots a em{font-style:normal;font-size:.82em;color:#C9A7FF}
.spots a i{font-style:normal;font-size:.82em;color:#FFC857}
.people a:hover,.spots a:hover{transform:translateY(-2px)}

/* 던전 */
.dg-grid{display:grid;grid-template-columns:minmax(0,calc(var(--u)*25)) minmax(0,1fr);gap:calc(var(--u)*1.6);align-items:start;margin-top:calc(var(--u)*1.2)}
.dg-list{padding:calc(var(--u)*.9) calc(var(--u)*1) calc(var(--u)*1.1)}
.dg-list h2{display:flex;align-items:center;gap:.6em;margin:0 0 calc(var(--u)*.5);font-family:var(--serif);font-size:max(15px,calc(var(--u)*1.05));letter-spacing:.1em;color:#FFE7A8}
.dg-list h2::before{content:"";width:.5em;height:.5em;background:var(--gold);transform:rotate(45deg)}
.dg-list h2::after{content:"";flex:1;height:1px;background:#FFC85755}
.dg-list h2 small{font-size:.8em;font-weight:400;color:#EDE7FF99}
.dg-list ol{list-style:none;margin:0 0 calc(var(--u)*.9);padding:0;display:grid;gap:calc(var(--u)*.3)}
.dg-list ol:last-child{margin-bottom:0}
.row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:calc(var(--u)*.7);width:100%;padding:calc(var(--u)*.38) calc(var(--u)*.8);font:inherit;text-align:left;color:#F3E6C2;background:#1B1233;border:1px solid #8A4DFF55;border-radius:calc(var(--u)*.25);cursor:pointer}
.row em{display:grid;place-items:center;width:1.9em;height:1.9em;font-style:normal;font-family:var(--serif);font-size:max(10px,calc(var(--u)*.64));color:var(--gold);border:1px solid #FFC85799;border-radius:50%}
.row b{font-size:max(13px,calc(var(--u)*.88));white-space:nowrap}
.row small{font-size:max(10px,calc(var(--u)*.62));color:#EDE7FF99;white-space:nowrap}
.row i{min-width:5.2em;font-style:normal;font-size:max(11px,calc(var(--u)*.68));color:#EDE7FFcc;white-space:nowrap;text-align:right}
.row:hover{border-color:#FFC857aa}
.row.on{color:#fff;background:linear-gradient(90deg,#6A3FD0,#3B2A66);border-color:#FFC857;box-shadow:0 0 calc(var(--u)*.8) #8A4DFF99}
.row.on small,.row.on i{color:#fff}
.dg{display:grid;gap:calc(var(--u)*.75);padding:calc(var(--u)*1.1) calc(var(--u)*1.3) calc(var(--u)*1.2)}
.dg .shot{aspect-ratio:800/180}
.dg-head{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*.8)}
.tag2{display:inline-flex;align-items:center;padding:.25em 1em;font-size:max(12px,calc(var(--u)*.78));letter-spacing:.04em;color:#F6E7C3;background:#3B2A1A;border:1px solid #FFC85788;border-radius:calc(var(--u)*.2)}
a.tag2:hover{color:var(--gold)}
.intro{margin:0;font-size:max(13px,calc(var(--u)*.86));line-height:1.7;word-break:keep-all}
.mobs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--u)*.9);padding-top:calc(var(--u)*.5)}
.mob{position:relative;margin:0;padding:calc(var(--u)*.35) calc(var(--u)*.35) calc(var(--u)*.45);text-align:center;background:linear-gradient(160deg,#F4E7C8,#DDC597);box-shadow:0 calc(var(--u)*.25) calc(var(--u)*.6) #0009}
.mob img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.mob b{display:block;margin-top:.35em;font-family:var(--serif);font-size:max(12px,calc(var(--u)*.8));white-space:nowrap}
.mob i{font-style:normal;font-size:max(11px,calc(var(--u)*.68));color:#6A5A7A}
.mob .tg{position:absolute;z-index:1;top:calc(var(--u)*-.55);left:50%;transform:translateX(-50%);padding:.05em .9em;font-size:max(10px,calc(var(--u)*.64));font-weight:700;white-space:nowrap;color:#F6E7C3;background:#5B3F2A;border-radius:999px}
.mob.boss{color:#F3E6C2;background:linear-gradient(160deg,#3B2A66,#1B1233);outline:2px solid #FFC857;box-shadow:0 0 calc(var(--u)*1) #8A4DFFaa}
.mob.boss i{color:#FFC857}
.mob.boss .tg{color:#2A1E3F;background:#FFC857}
.event{display:grid;gap:.3em;margin-top:calc(var(--u)*.6);padding:calc(var(--u)*.8) calc(var(--u)*1.1);background:#F8ECCB99;border:1px dashed #5B3F2A}
.event b{font-family:var(--serif);font-size:max(14px,calc(var(--u)*1))}
.event p{margin:0;font-size:max(13px,calc(var(--u)*.84));line-height:1.7;word-break:keep-all}

@media (max-width:900px){
  .atlas{padding:64px 12px 12px}
  .map-grid,.dg-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .pin{width:26px;height:26px;margin:-13px 0 0 -13px}
  .pin i{inset:5px}
  .pin b{padding:.05em .55em;font-size:10px;letter-spacing:0}
  .rose{width:40px;height:40px;left:10px;bottom:10px}
  .place,.dg{padding:14px 14px 16px;gap:12px}
  .place .shot,.dg .shot{aspect-ratio:800/300}
  .people{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .mobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .dg-list{padding:12px}
  .row{padding:8px 10px;gap:8px}
  .parch .seal{width:40px;height:40px;top:-12px;right:16px}
}