*{box-sizing:border-box}
body{margin:0;background:#f1f4f7;color:#152338;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.5}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid #cad4df;border-radius:8px;background:#fff;padding:6px 12px}
.tabs{position:sticky;top:0;z-index:20;display:flex;gap:4px;overflow-x:auto;background:#122538;padding:8px 16px;scrollbar-width:none}
.tabs a{flex:none;color:#c3d0dc;text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:8px}
.tabs a.on{background:#86d6be;color:#122538}
.page-head{background:#122538;color:#fff;padding:18px 16px 20px;border-bottom:4px solid #86d6be}
.page-head h1{margin:0;font-size:clamp(22px,4vw,34px);letter-spacing:-1px}
.wrap{width:min(1400px,100%);margin:auto;padding:0 16px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}
.toolbar input{flex:1;min-width:180px;border:1px solid #cad4df;border-radius:8px;padding:9px 12px;background:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{font-size:12px;padding:5px 10px;border-radius:30px;background:#e3eaf1;border-color:transparent}
.chips button.on{background:#122538;color:#fff}
.count{font-size:12px;color:#66768b}
.map-host{position:relative;background:#c9d6e0;border-radius:10px;overflow:hidden;border:1px solid #becbd7}
.guide-map{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none}
.guide-map:active{cursor:grabbing}
.map-tools{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.map-tools button{font-size:13px;padding:5px 11px}
.dot circle{fill:#e83d57;stroke:#fff;stroke-width:1}
dialog#spawn-dialog{border:0;border-radius:14px;padding:0;width:min(1300px,calc(100vw - 20px));max-width:none;max-height:94vh;background:#f4f7fa;box-shadow:0 20px 80px #0007}
dialog#spawn-dialog::backdrop{background:#102133bb}
#spawn-dialog header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #d6e0e9}
#spawn-dialog h2{margin:0;font-size:18px}
#spawn-close{flex:none;white-space:nowrap}
#spawn-dialog header p{margin:2px 0 0;font-size:12px;color:#607187}
.spawn-body{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.spawn-main{padding:10px}
#spawn-host{height:70vh}
#spawn-list{background:#fff;border-left:1px solid #d6e0e9;padding:10px;max-height:calc(70vh + 50px);overflow:auto}
#spawn-list p{font-size:12px;color:#66788b;margin:0 0 6px}
#spawn-list button{display:block;width:100%;text-align:left;margin:4px 0;padding:7px 9px;background:#f2f6fa;border-color:#e0e7ef}
#spawn-list button.off{opacity:.75;cursor:default;background:#f6f6f6}
#spawn-list button.on{background:#ffecef;border-color:#e83d57}
#spawn-list b{display:block;font-size:13px}
#spawn-list span{display:block;font-size:11px;color:#718195}
.rar-Common{color:#6b7a8c}.rar-Uncommon{color:#1f871f}.rar-Rare{color:#4b64fa}.rar-Epic{color:#964bfa}.rar-Legendary{color:#c832fa}.rar-Mythical{color:#fa3219}
@media(max-width:760px){.spawn-body{grid-template-columns:1fr}#spawn-host{height:55vh}#spawn-list{max-height:28vh;border-left:0;border-top:1px solid #d6e0e9}}
.legend{margin:14px 0 10px}.lg{font-size:12px;font-weight:700;padding:4px 10px;border-radius:30px}
.lg.gas,.tag.gas,#dz-list button.gas{background:#fff3c4;color:#7a5a00}
.lg.full,.tag.full,#dz-list button.full{background:#ffd9d9;color:#9a1010}
.lg.explore,.tag.explore,#dz-list button.explore{background:#d8ecf7;color:#195a7a}
.dz-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px}
#dz-map{height:72vh}
#dz-detail{background:#fff;border:1px solid #d8e1ea;border-radius:12px;padding:16px;align-self:start;max-height:80vh;overflow:auto}
#dz-detail h2{margin:8px 0 2px;font-size:20px}#dz-detail h3{font-size:13px;margin:14px 0 4px;color:#3a4d63}
#dz-detail ul{margin:0;padding-left:18px;font-size:14px}#dz-detail li{margin:3px 0}
#dz-detail .where{margin:0;color:#5a6b80;font-size:13px}#dz-detail .loot{font-size:13px;margin:0}#dz-detail small{color:#7b8ba0}
#dz-detail .hint{color:#7b8ba0;font-size:13px;margin:0}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px}
#dz-list{margin:14px 0 30px}#dz-list button{font-size:13px;padding:6px 11px;border-radius:30px;border:2px solid transparent}#dz-list button.on{border-color:#152338}
.zone.gas{fill:rgba(255,205,0,.28);stroke:#d9a400;stroke-width:4;stroke-dasharray:14 8}
.zone.full{fill:rgba(230,0,0,.25);stroke:#c40000;stroke-width:5}
.pin{cursor:pointer}.pin circle{stroke:#fff;stroke-width:2.5}.pin text{font-size:13px;font-weight:800;fill:#fff;text-anchor:middle;pointer-events:none}
.pin.gas circle{fill:#c89000}.pin.full circle{fill:#d00000}.pin.explore circle{fill:#1f7fae}
.pin.on circle{stroke:#152338;stroke-width:4}
.item-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin:12px 0 30px}
.item-row{display:block;text-align:left;padding:6px 10px;border-color:#dfe6ee;min-width:0}
.item-row b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-row span{display:block;font-size:11px;color:#728296;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-row:hover{border-color:#e83d57}
.table-scroll{overflow-x:auto;margin-bottom:30px}
table.guns{width:100%;border-collapse:collapse;background:#fff;font-size:13px;border-radius:10px;overflow:hidden}
table.guns th{background:#e3eaf1;text-align:left;padding:8px;white-space:nowrap;cursor:pointer;font-size:12px}
table.guns td{padding:6px 8px;border-top:1px solid #edf1f5;white-space:nowrap}
table.guns td small{display:block;font-size:10px;color:#7b8ba0}
table.guns td.mags{white-space:normal;font-size:11px;color:#5a6b80;min-width:180px}
table.guns button{font-size:12px;padding:3px 9px}
.gun-row{cursor:pointer}.gun-row:hover{background:#fff6f7}
.animal-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:16px 0 30px}
.animal-card{background:#fff;border:1px solid #d8e1ea;border-radius:10px;padding:12px}
.animal-card h3{margin:0 0 4px;font-size:16px}.animal-card p{margin:2px 0;font-size:12px;color:#5a6b80}
.animal-card .grp{font-size:11px;color:#8090a3}.animal-card button{margin-top:8px;font-size:12px;padding:4px 10px}
@media(max-width:900px){.dz-layout{grid-template-columns:1fr}#dz-map{height:60vh}#dz-detail{max-height:none}}
.gate rect{fill:#6a2bd1;stroke:#fff;stroke-width:2}.gate text{font-size:13px;font-weight:800;fill:#3d1880;stroke:#fff;stroke-width:3px;paint-order:stroke;text-anchor:middle}
#spawn-list button.gate-item{border-left:4px solid #6a2bd1}
.item-row{display:flex;gap:8px;align-items:center}.item-row img{width:36px;height:36px;flex:none;object-fit:contain}.item-row div{min-width:0}
.animal-card img{display:block;width:100%;height:130px;object-fit:contain;background:#eef2f7;border-radius:8px;margin-bottom:8px}
.recipe-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin:12px 0 20px}
.recipe{background:#fff;border:1px solid #d8e1ea;border-radius:10px;padding:10px}
.recipe .out{display:flex;gap:8px;align-items:center}.recipe .out img{width:44px;height:44px;object-fit:contain;flex:none}
.recipe .out b{display:block;font-size:14px}.recipe .out small{display:block;font-size:11px;color:#7b8ba0}
.how{border-top:1px dashed #e2e8ef;margin-top:8px;padding-top:6px;font-size:12px}
.how p{margin:4px 0 0;color:#5a6b80}.tagc{font-size:10px;font-weight:700;background:#e9f4ef;color:#316450;padding:1px 6px;border-radius:4px;margin-right:6px}
.yield{font-size:11px;color:#5a6b80}
.ings{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ing{display:inline-flex;align-items:center;gap:3px;font-size:12px;padding:2px 7px 2px 3px;border-radius:30px;background:#f2f6fa;border-color:#e0e7ef}
.ing img{width:22px;height:22px;object-fit:contain}
.more{display:block;margin:0 auto 30px;padding:8px 22px}
table.guns td.gname img{width:46px;height:30px;object-fit:contain;vertical-align:middle;margin-right:6px;float:left}
.toolbar select{border:1px solid #cad4df;border-radius:8px;padding:8px 10px;background:#fff}
.item-row em{font-style:normal;font-weight:700}
table.guns td.mags b{color:#152338}
.salvage{margin-top:8px;border-top:1px dashed #e2e8ef;padding-top:6px}
.salvage summary{cursor:pointer;font-size:12px;font-weight:700;color:#5a6b80;padding:2px 0}
dialog#plan-dialog{border:0;border-radius:14px;padding:0;width:min(1300px,calc(100vw - 20px));max-width:none;max-height:94vh;background:#f4f7fa;box-shadow:0 20px 80px #0007}
dialog#plan-dialog::backdrop{background:#102133bb}
#plan-dialog header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #d6e0e9}
#plan-dialog h2{margin:0;font-size:18px}#plan-dialog header p{margin:2px 0 0;font-size:12px;color:#607187}#plan-close{flex:none}
#plan-floors{margin:0 0 8px}#plan-host{height:66vh;background:#c7d1dc}
#plan-list{background:#fff;border-left:1px solid #d6e0e9;padding:10px;max-height:calc(66vh + 90px);overflow:auto;font-size:13px}
#plan-list p{font-size:12px;color:#66788b;margin:6px 0}
.plan-item{padding:5px 0}.plan-item.in{color:#1a7f3c;font-weight:700}.plan-item.out{color:#1f5fae;font-weight:700}
.plan-mark circle{stroke:#fff;stroke-width:2.5}.plan-mark.in circle{fill:#1a9b48}.plan-mark.out circle{fill:#1f6fd1}
.plan-mark text{font-size:12px;font-weight:800;text-anchor:middle;fill:#152338;stroke:#fff;stroke-width:3px;paint-order:stroke}
#spawn-list .plan-btn{font-size:12px;padding:5px 9px;margin:-2px 0 8px;background:#efe8fb;border-color:#d4c4f2;color:#4a1f9a}
#dz-detail .plan-open{margin-top:12px;font-weight:700;background:#efe8fb;border-color:#d4c4f2;color:#4a1f9a}
@media(max-width:760px){#plan-host{height:52vh}#plan-list{max-height:24vh;border-left:0;border-top:1px solid #d6e0e9}}
.q-cmd{margin:14px 0 0;font-size:13px;color:#3a4d63}.q-cmd b{background:#e3eaf1;padding:1px 6px;border-radius:4px}
#q-list{margin-bottom:30px}#q-list h2,.board summary{font-size:17px;font-weight:700;margin:18px 0 8px}#q-list h2 small,.board summary small{font-size:12px;color:#7b8ba0;font-weight:400}
.board summary{cursor:pointer}
.quest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px;align-items:start}
.quest{background:#fff;border:1px solid #d8e1ea;border-radius:10px;padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.quest h3{margin:0;font-size:15px}.quest .en{display:block;font-size:11px;color:#8090a3}
.qline,.qtag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:2px;background:#e9f4ef;color:#316450}
.qtag{background:#fff3c4;color:#7a5a00}
.giver,.prev,.rw{font-size:12px;margin-top:6px;color:#3a4d63}.prev{color:#66768b}
.quest .desc{font-size:12px;color:#66768b;margin:6px 0 0}
.steps{margin:8px 0 0;padding-left:20px;font-size:13px}.qstep{margin:3px 0}
.qstep>div{display:flex;gap:6px;align-items:flex-start;justify-content:space-between}
article.quest button{flex:none;font-size:11px;padding:1px 8px;border-radius:30px;background:#ffecef;border-color:#f3c3cc;color:#a01a33}
article.quest button.approx{border-style:dashed;background:#fff7e8;border-color:#e0b25a;color:#7a5a00}
.qstep em{font-style:normal;font-size:10px;font-weight:700;margin-left:5px;padding:0 5px;border-radius:4px}
.qstep em.approx{background:#fff3c4;color:#7a5a00}.qstep em.offm{background:#efe8fb;color:#4a1f9a}
#spawn-dialog.quest .dot circle{r:7}
#spawn-dialog.quest.approx .dot circle{fill:#e0a020;stroke-dasharray:3 2}
dialog#photo-dialog{border:0;border-radius:14px;padding:0;width:min(640px,calc(100vw - 20px));max-width:none;max-height:94vh;background:#f4f7fa;box-shadow:0 20px 80px #0007;overflow:hidden}
dialog#photo-dialog::backdrop{background:#102133bb}
#photo-dialog header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #d6e0e9}
#photo-dialog h2{margin:0;font-size:18px}#photo-dialog header p{margin:2px 0 0;font-size:12px;color:#607187}
.photo-tools{display:flex;gap:6px;flex:none}
#photo-img{display:block;width:100%;max-height:calc(94vh - 70px);aspect-ratio:1;object-fit:contain;background:#2c3540}
table.guns td.gname img,.item-row img{cursor:zoom-in}
.shop-h{font-size:17px;margin:18px 0 8px}.shop-h small{font-size:12px;color:#7b8ba0;font-weight:400}
.shop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px;margin-bottom:20px}
.shop-row{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #dfe6ee;border-radius:8px;padding:6px 10px;min-width:0}
.shop-row img{width:36px;height:36px;flex:none;object-fit:contain}.shop-row div{flex:1;min-width:0}
.shop-row b{display:block;font-size:13px}.shop-row small{display:block;font-size:11px;color:#728296}
.shop-row em{display:inline-block;font-style:normal;font-size:10px;font-weight:700;background:#fff3dc;color:#8a5a00;padding:1px 6px;border-radius:4px;margin:2px 4px 0 0}
.shop-row strong{flex:none;font-size:14px;color:#316450}
.fort-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:12px 0 30px}
@media (max-width:860px){.fort-grid{grid-template-columns:1fr}}
.fort-map{margin:0;background:#fff;border:1px solid #d8e1ea;border-radius:10px;padding:10px}
#fort-svg{display:block;width:100%;height:auto;background:#fff;border-radius:6px}
.k-gen{fill:#f2b705;stroke:#5a4300;stroke-width:.6}
.k-reader{fill:#2e9e6a;stroke:#fff;stroke-width:.6}
line.k-wall{stroke:#e83d57;stroke-width:2.4;stroke-dasharray:2 1}line.k-gate{stroke:#2f7fd6;stroke-width:2.4}
.fort-legend{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:10px 0 0;font-size:12px;color:#3a4d63}
.fort-legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:2px}
.fort-legend .k-gen{background:#f2b705;border-radius:50%}
.fort-legend .k-reader{background:#2e9e6a}.fort-legend .k-wall{background:repeating-linear-gradient(90deg,#e83d57 0 4px,transparent 4px 6px);height:4px}.fort-legend .k-gate{background:#2f7fd6;height:4px}
.fort-info h2{font-size:17px;margin:4px 0 8px}.fort-info h2:not(:first-child){margin-top:18px}
.fort-steps{margin:0;padding-left:22px}.fort-steps li{margin-bottom:10px}.fort-steps b{display:block;font-size:14px}.fort-steps span{display:block;font-size:13px;color:#4f6075}
.fort-list{margin:0;padding-left:18px;font-size:13px;color:#3a4d63}.fort-list li{margin-bottom:5px}
.pvp-rules{margin:14px 0 12px;font-size:13px;font-weight:600;color:#3a4d63;background:#fff;border:1px solid #d8e1ea;border-radius:10px;padding:8px 12px}
.pvp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;margin-bottom:30px}
#pvp-map{height:72vh}
#pvp-list{background:#fff;border:1px solid #d8e1ea;border-radius:12px;padding:12px 14px;align-self:start}
#pvp-list h2{font-size:14px;margin:14px 0 6px;color:#3a4d63}#pvp-list h2:first-child{margin-top:0}
.pvp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center;width:100%;text-align:left;padding:7px 10px;margin:0 0 5px;border:1px solid #e3eaf1;border-radius:8px;background:#fff}
.pvp-row b{font-size:14px}.pvp-row small{font-size:11px;color:#7b8ba0}.pvp-row span{font-size:12px;color:#4f6075}
.pvp-row b,.pvp-row small,.pvp-row span{grid-column:1}
.pvp-row em{grid-column:2;grid-row:1/span 3;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:30px;background:#ffd9d9;color:#9a1010;white-space:nowrap}
.pvp-row.ev em{background:#ffe7c7;color:#8a4b00}
button.pvp-row.on{border:2px solid #152338;padding:6px 9px}
.pvp-zone,.pvp-ev{vector-effect:non-scaling-stroke;stroke-width:2.5}.pvp-zone.on,.pvp-ev.on{stroke-width:4.5}
.pvp-zone{fill:rgba(230,0,0,.25);stroke:#c40000}
.pvp-ev{fill:rgba(255,140,0,.16);stroke:#e07000;stroke-dasharray:6 4}
.pvp-label text{font-size:12px;font-weight:800;fill:#152338;stroke:#fff;stroke-width:3;paint-order:stroke;text-anchor:middle;pointer-events:none}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:rgba(230,0,0,.3);border:2px solid #c40000}.sw.ev{background:rgba(255,140,0,.15);border:2px dashed #e07000}
@media(max-width:900px){.pvp-layout{grid-template-columns:1fr}#pvp-map{height:60vh}}
/* NPC 상점 탭 */
.v-npc{margin-top:18px}.v-npc h2{font-size:19px;margin:0 0 4px}
.v-where{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:13px;color:#3a4d63;margin-bottom:6px}
.v-where button{font-size:12px;padding:3px 10px}
.v-steps{margin:6px 0;padding-left:22px;font-size:13px;line-height:1.5;color:#2c3d50}
.v-steps small{display:block;font-size:11px;color:#728296}
.v-steps em{font-style:normal;font-size:10px;font-weight:700;background:#fff3dc;color:#8a5a00;padding:1px 6px;border-radius:4px;margin-left:4px}
.v-closed{margin:4px 0 8px;font-size:12px;color:#8a5a00}
.v-shop{background:#fff;border:1px solid #dfe6ee;border-radius:8px;margin-top:6px;padding:8px 10px}
.v-shop summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:14px}
.v-shop summary span{font-size:12px;color:#316450;font-weight:700}
.v-shop summary small{font-size:12px;color:#728296}
.v-shop summary em{font-style:normal;font-size:10px;font-weight:700;background:#fff3dc;color:#8a5a00;padding:1px 6px;border-radius:4px}
.v-shop .shop-list{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));margin-bottom:8px}
.v-shop .shop-h{font-size:14px;margin:12px 0 6px}
.rm-rules{width:min(820px,100%);margin:14px auto 12px;font-size:13px;font-weight:600;color:#3a4d63;background:#fff;border:1px solid #d8e1ea;border-radius:10px;padding:8px 12px}
.rm{list-style:none;width:min(820px,100%);margin:0 auto 30px;padding:0}
.rm-stage{position:relative;padding-left:40px;margin-bottom:14px}
.rm-stage::before{content:"";position:absolute;left:14px;top:30px;bottom:-14px;width:2px;background:#cad4df}
.rm-stage:last-child::before{display:none}
.rm-no{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:#122538;color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.rm-card{min-width:0;background:#fff;border:1px solid #dfe6ee;border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
.rm-card h2{margin:0;font-size:17px;line-height:1.35}
.rm-goal{margin:2px 0 8px;font-size:14px;font-weight:700;color:#316450}
.rm-b{margin-top:8px}
.rm-b h3{margin:0 0 3px;font-size:12px;color:#728296}
.rm-b ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:#2c3d50}
.rm-b>.v-where{margin-bottom:4px}
.rm-b ul.rm-flow{list-style:none;padding:0;font-size:14px;line-height:1.55}
.rm-flow li{padding:3px 0}
.rm-flow b{color:#122538}
.rm-note{margin:0 0 6px;font-size:12px;color:#5a6b80}
.rm-b.warn{background:#fff7e8;border-radius:8px;padding:6px 10px}
.rm-b.warn h3{color:#8a5a00}
.rm-b.next{font-size:13px;font-weight:600;color:#316450}
.rm-b.next h3{color:#316450}
.rm a{color:#1a6b55;font-weight:600}
.rm-guess{font-style:normal;font-size:10px;font-weight:700;background:#fff3dc;color:#8a5a00;padding:1px 6px;border-radius:4px;white-space:nowrap}
.rm-b .rm-evs{list-style:none;padding:0}
.rm-ev{padding:6px 0;border-top:1px solid #e3eaf1}
.rm-ev:first-child{border-top:0;padding-top:0}
.rm-ev b{display:block;font-size:14px}
.rm-ev span{display:block}