:root{color-scheme:dark;--bg:#101719;--panel:#172124;--border:#2b383a;--ink:#e0e9e2;--muted:#8b9b99;--mint:#a9dfc4;--gold:#dfb677;font-family:'Segoe UI','Malgun Gothic',sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button,.button{cursor:pointer;border:1px solid var(--border);border-radius:6px;background:#202d30;color:var(--ink);padding:10px 16px;transition:background .15s,border-color .15s}button:hover:not(:disabled){border-color:#8aa99b;background:#2c3d3c}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{opacity:.38;cursor:not-allowed}a{color:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:34px;font-weight:600;letter-spacing:-1.5px;margin:12px 0}h2{font-size:22px;font-weight:550}h3{font-size:16px;font-weight:550}p{line-height:1.75;color:var(--muted)}small{font-size:11px;color:var(--muted)}.tiny{font-size:10px;letter-spacing:2.2px;color:var(--mint);font-weight:600}.muted{color:var(--muted);font-size:12px}.quiet{background:transparent;border:0;font-size:12px;color:var(--muted);padding:8px}.primary{background:var(--mint);color:#142521;border-color:var(--mint);font-weight:600}.primary:hover:not(:disabled){background:#cef6db}.warning{padding:16px;border:1px solid #b86d57;color:#f1c49a;margin-bottom:20px}header{height:90px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#121b1d}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:19px;font-weight:650;letter-spacing:-.8px}.brand small{display:block;font-size:8px;letter-spacing:2.1px;margin-top:6px;font-weight:400}.brand-icon{color:var(--mint);font-size:36px}.wallet{display:flex;align-items:center;gap:24px;color:var(--muted);font-size:12px}.wallet b{color:#e4c68c;margin-right:4px;font-weight:500}.layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 90px)}.sidebar{padding:34px 22px;border-right:1px solid var(--border);display:flex;flex-direction:column}.rank{padding:0 14px 32px;border-bottom:1px solid var(--border)}.rank strong{display:block;font-family:Georgia,'Malgun Gothic',serif;font-size:36px;font-weight:400;margin:15px 0 10px}.rank>span:last-child{font-size:11px;color:var(--muted)}nav{display:grid;gap:8px;margin-top:28px}nav button{text-align:left;border:1px solid transparent;background:transparent;padding:15px 12px;color:var(--muted)}nav button span{display:inline-block;width:30px;font-size:19px}nav button.active{background:#243630;color:var(--mint);border-color:#385447}.side-bottom{margin-top:auto;padding:70px 14px 0}.side-bottom .tiny{font-size:8px;line-height:1.8;color:#627e73}.side-bottom p{font-size:15px;margin:12px 0}.side-bottom .quiet{padding-left:0}main{padding:40px 42px;min-width:0;max-width:1600px;width:100%;margin:auto}.page-heading{margin-bottom:28px}.page-heading p{font-size:13px;margin-bottom:0}.loadout{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;margin-bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.weapon-row{display:flex;gap:9px;margin-top:12px}.weapon{display:flex;align-items:center;text-align:left;gap:12px;min-width:114px;padding:10px 16px;background:transparent}.weapon b{font-size:24px;font-weight:400}.weapon small{display:block;margin-top:4px;font-size:10px}.selected{border-color:#749a86!important;background:#263c32!important;color:#c8ebd3!important}.loadout-stats{display:flex;gap:28px}.loadout-stats span{display:grid;gap:9px;color:var(--muted);font-size:11px}.loadout-stats b{color:var(--ink);font-family:Consolas,monospace;font-size:21px;font-weight:400}.dungeon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.dungeon{--accent:#a9dfc4;position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#1f302c,#172124 65%)}.dungeon.abyss{--accent:#9cabc8;background:linear-gradient(160deg,#27303c,#172124 65%)}.dungeon.rift{--accent:#d6b98c;background:linear-gradient(160deg,#393228,#172124 65%)}.dungeon.chaos{--accent:#bca1cb;background:linear-gradient(160deg,#302a38,#172124 65%)}.card-top{padding:19px 18px;display:flex;justify-content:space-between;color:var(--accent);font-size:8px;letter-spacing:1.1px;gap:5px}.status-dot{width:5px;height:5px;min-width:5px;background:var(--accent);border-radius:50%}.locked .status-dot{background:#65706c}.sigil{height:185px;position:relative;display:grid;place-items:center;overflow:hidden;color:var(--accent)}.sigil i{position:absolute;width:108px;height:108px;border:1px solid currentColor;opacity:.23;transform:rotate(45deg)}.sigil i:nth-child(2){width:140px;height:140px;transform:rotate(15deg);opacity:.1}.sigil i:nth-child(3){width:78px;height:78px;border-radius:50%;opacity:.4}.sigil b{font-size:54px;font-weight:200;text-shadow:0 0 40px currentColor}.abyss .sigil i{border-radius:50%}.rift .sigil i:nth-child(2){transform:rotate(65deg)}.chaos .sigil i{transform:rotate(30deg)}.card-body{padding:22px 20px 18px}.tag{font-size:9px;letter-spacing:.4px;color:var(--accent);background:#ffffff08;border:1px solid #ffffff12;padding:5px 8px;border-radius:3px}.card-body h2{margin:17px 0 12px;letter-spacing:-.6px}.card-body p{font-size:12px;min-height:66px}.card-foot{padding-top:18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:6px}.card-foot small{font-size:9px}.enter{color:var(--accent);background:transparent;font-size:12px;padding:7px 10px;white-space:nowrap}.bottom-note{display:flex;justify-content:space-between;align-items:center;margin-top:22px;color:var(--muted);font-size:11px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:24px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h2{margin:0}.section-head span{font-size:11px;color:var(--muted)}.circle-tabs{display:flex;gap:7px;margin-bottom:20px}.circle-tabs button{flex:1;padding:12px 3px;font-family:Georgia,serif;font-size:22px}.circle-tabs small{display:block;font-family:'Malgun Gothic',sans-serif;font-size:9px;margin-top:6px}.board-layout{display:grid;grid-template-columns:1fr 290px;gap:20px}.board-map{aspect-ratio:1;max-width:570px;margin:16px auto;position:relative;background:radial-gradient(circle,#34524522,transparent 65%)}.orbit-ring{position:absolute;border:1px solid #4e6a6044;border-radius:50%;inset:16%;pointer-events:none}.orbit-ring.two{inset:4%;border-style:dashed}.board-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:38px Georgia,serif;text-align:center;color:var(--mint)}.board-core small{display:block;font:8px 'Segoe UI',sans-serif;letter-spacing:2px;margin-top:8px}.rune-slot{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:10px;border-color:var(--grade);color:var(--grade);background:#192629;display:grid;place-items:center;padding:0;font-size:22px;box-shadow:0 0 0 6px #172124}.rune-slot small{position:absolute;top:47px;white-space:nowrap;font-size:8px;color:var(--grade)}.rune-slot.sealed{border-style:dashed;opacity:.25}.rune-slot.filled{background:#334a40;box-shadow:0 0 12px #a1ecc512}.board-hint{text-align:center;font-size:11px;margin:14px 0 0}.stats-panel h3{margin:12px 0}.stats-panel dl{margin-bottom:30px}.stats-panel dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:10px 0;font-size:12px}.stats-panel dt{color:var(--muted)}.stats-panel dd{margin:0;color:var(--mint);font-family:Consolas,monospace}.sockets{display:flex;gap:30px;justify-content:space-between;margin-top:20px}.sockets h3{margin-top:10px}.socket-row{display:flex;gap:10px}.engrave-slot{width:88px;height:78px;font-size:22px}.engrave-slot small{display:block;font-size:9px;margin-top:7px}.transcend{border-left:1px solid var(--border);padding-left:25px;min-width:200px}.transcend button{width:100%;font-size:22px;color:var(--gold);border-color:#68573b;background:#322d22}.transcend small{display:block;margin-top:7px;font-size:10px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.segmented{display:flex;gap:5px;flex-wrap:wrap}select,input{border:1px solid var(--border);border-radius:5px;background:#1a292b;color:var(--ink);padding:10px;max-width:100%}.items-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.item{border:1px solid var(--border);border-left:2px solid var(--grade);background:var(--panel);border-radius:6px;padding:16px;display:flex;gap:13px;align-items:center;min-width:0}.item-mark{color:var(--grade);font-size:29px;min-width:30px;text-align:center}.item small{color:var(--grade);font-size:9px}.item h3{margin:6px 0}.item p{font-size:11px;margin:0}.item-actions{margin-left:auto}.item-actions button{padding:7px;font-size:11px}.shop-card{background:var(--panel);border:1px solid var(--border);border-radius:6px;overflow:hidden}.shop-card .item{border:0}.shop-actions{display:flex;border-top:1px solid var(--border)}.shop-actions button{flex:1;border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;font-size:11px;color:var(--mint)}.instruction{margin-top:22px}.instruction p{margin:0;font-size:12px}.empty{padding:32px;color:var(--muted);line-height:1.8;text-align:center}.battle{max-width:1500px;padding:24px 32px}.battle-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.battle-top h2{margin:5px 0}.battle-top h2 small{margin-left:10px}.battle-metrics{display:flex;align-items:center;gap:24px}.battle-metrics span{font-size:10px;color:var(--muted)}.battle-metrics b{display:block;color:var(--ink);font:22px Consolas,monospace;margin-top:4px}.arena{position:relative;width:100%;border:1px solid #3e5452;border-radius:8px;overflow:hidden;aspect-ratio:5/3}.arena canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.arena-label{position:absolute;left:28px;top:20px;font-size:10px;color:#78938a;pointer-events:none}.battle-bottom{display:grid;grid-template-columns:1fr 1fr auto;gap:28px;margin-top:18px;align-items:center}.battle-bottom label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px}.bar{height:6px;background:#253536;border-radius:4px;overflow:hidden}.bar i{display:block;width:0;height:100%;background:#c4af78}.bar.hp i{background:#96d3b8}.bar.boss i{background:#c77c61}#bossHud{display:flex;align-items:center;gap:15px;margin-top:15px;color:#dcac8c;font-size:11px}#bossHud .bar{flex:1}.control-hint{font-size:10px;line-height:1.7;color:var(--muted)}dialog{background:#182326;border:1px solid #4d6760;border-radius:12px;color:var(--ink);padding:30px;width:min(680px,92vw);max-height:86vh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#070e11c9;backdrop-filter:blur(5px)}dialog h2{margin:12px 0 20px}dialog p{font-size:13px}.close{display:block;margin:24px 0 0 auto}.picker{display:grid;gap:8px;margin-top:20px;max-height:50vh;overflow:auto}.picker button{display:flex;align-items:center;text-align:left;gap:15px;border-color:var(--grade)}.picker b{font-size:26px;color:var(--grade)}.picker small{display:block;margin-top:6px}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.danger{color:#e6a48f}.result-metrics{display:flex;justify-content:space-around;border-block:1px solid var(--border);padding:22px 0;margin:22px 0}.result-metrics span{font:28px Consolas,monospace;color:var(--mint)}.result-metrics small{display:block;margin-top:8px;font:11px 'Malgun Gothic',sans-serif}.reward-list{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.reward-list span{font-size:10px;border:1px solid var(--border);padding:6px 8px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choices button{padding:25px 15px;text-align:left}.choices b{font-size:32px;color:var(--grade)}.choices h3{margin:16px 0 12px}.choices p{font-size:11px}#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;background:#d9e8db;color:#15241e;padding:12px 22px;border-radius:6px;box-shadow:0 8px 30px #0005;font-size:13px;transition:.2s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.sigil{height:230px}.card-body p{min-height:54px}}
@media(max-width:1200px){.dungeon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sigil{height:120px}.layout{grid-template-columns:185px 1fr}main{padding:30px 25px}.sidebar{padding:30px 12px}.card-body p{min-height:44px}.loadout-stats{gap:13px}.items-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.board-layout{grid-template-columns:1fr}.stats-panel{display:none}.sockets{flex-wrap:wrap}.transcend{border:0;padding:0}}
@media(max-width:700px){header{height:72px;padding:0 16px}.brand{font-size:15px}.brand-icon{font-size:28px}.brand small{font-size:6px}.wallet{gap:10px;font-size:10px}.wallet span{display:grid;gap:2px}.wallet .quiet{font-size:0}.wallet .quiet:after{content:'⚙';font-size:20px}.layout{display:block}.sidebar{padding:0;border-right:0;border-bottom:1px solid var(--border)}.rank,.side-bottom{display:none}nav{display:flex;margin:0;justify-content:space-around;gap:0}nav button{padding:12px 8px;font-size:11px;border-radius:0}nav button span{width:auto;margin-right:5px;font-size:14px}main{padding:27px 16px}h1{font-size:26px}.page-heading p{font-size:11px}.loadout{display:block;padding:16px 0}.weapon-row{gap:6px}.weapon{flex:1;min-width:0;padding:9px;gap:8px}.weapon b{font-size:20px}.loadout-stats{margin-top:18px;justify-content:space-between}.dungeon-grid{gap:10px}.card-top{font-size:7px;padding:13px 10px;letter-spacing:.3px}.sigil{height:100px}.sigil i{width:72px;height:72px}.sigil i:nth-child(2){width:100px;height:100px}.sigil i:nth-child(3){width:50px;height:50px}.sigil b{font-size:38px}.card-body{padding:15px 12px}.card-body h2{font-size:18px}.card-body p{font-size:10px;min-height:70px}.card-foot{display:block;padding-top:12px}.card-foot small{display:block;font-size:8px;margin-bottom:9px}.enter{width:100%}.bottom-note{display:block;line-height:2}.bottom-note .quiet{padding-left:0}.circle-tabs{gap:3px}.circle-tabs button{font-size:16px}.circle-tabs small{font-size:7px}.panel{padding:15px}.section-head span{font-size:9px}.rune-slot{width:28px;height:28px;font-size:17px;box-shadow:0 0 0 3px #172124}.rune-slot small{top:29px;font-size:6px}.board-core{font-size:26px}.board-map{margin:22px 0}.socket-row{gap:6px}.engrave-slot{width:54px;height:65px;padding:5px;font-size:20px}.engrave-slot small{font-size:7px}.sockets{gap:22px}.items-grid{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.battle{padding:14px 8px}.battle-top{align-items:flex-start;gap:8px}.battle-top h2{font-size:16px}.battle-metrics{gap:9px;flex-wrap:wrap;justify-content:flex-end}.battle-metrics b{font-size:16px}.battle-metrics button{padding:7px;font-size:10px}.battle-bottom{gap:12px;grid-template-columns:1fr 1fr}.control-hint{grid-column:1/-1;text-align:center}.arena-label{font-size:7px;left:12px;top:8px}.choices{grid-template-columns:1fr}.choices button{padding:14px}.choices h3{display:inline-block;margin:0 0 0 15px}.choices p{margin:8px 0 0}.dialog-actions button{flex:1}dialog{padding:20px}.result-metrics span{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
body:has(.battle){min-height:100dvh;touch-action:manipulation}
body:has(.battle) #app{user-select:none;-webkit-user-select:none}
/* Keep numerical feedback available at every viewport, including mobile. */
@media(max-width:1200px){.stats-panel{display:block}.stats-panel dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.stats-panel dl div{gap:12px}}
@media(max-width:700px){.stats-panel dl{grid-template-columns:1fr}.arena{min-height:225px}.board-core{pointer-events:none}}

/* Mobile navigation and compact, touch-friendly management screens. */
.training summary{cursor:pointer;font-weight:600;color:var(--mint);min-height:24px}
.training[open] summary{margin-bottom:20px}
.training h2{font-size:18px}
.training button{margin-top:14px}
@media(max-width:700px){
  :root{--mobile-dock:calc(70px + env(safe-area-inset-bottom,0px))}
  .layout{min-height:calc(100dvh - 72px);padding-bottom:var(--mobile-dock)}
  .sidebar{border:0;padding:0}
  .sidebar nav{position:fixed;z-index:40;left:0;right:0;bottom:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
    min-height:var(--mobile-dock);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
    background:#142023;border-top:1px solid #3a5149;box-shadow:0 -8px 24px #0003}
  .sidebar nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:6px 2px;border-radius:8px;font-size:11px;white-space:nowrap}
  .sidebar nav button span{font-size:21px;line-height:23px;margin:0}
  .sidebar nav button.active{border-color:#476d59;background:#294335}
  .layout main{padding:22px 14px 28px}
  .page-heading{margin-bottom:18px}
  .page-heading .tiny{display:none}
  .page-heading h1{font-size:25px;letter-spacing:-.8px;margin:0 0 7px}
  .page-heading p{font-size:12px;line-height:1.6}
  .loadout{margin-bottom:20px;padding:14px 0}
  .loadout .tiny{font-size:0}
  .loadout .tiny:after{content:'사용할 무기';font-size:12px;letter-spacing:0}
  .weapon-row{margin-top:8px}
  .weapon{justify-content:center;padding:10px 4px;min-height:64px;gap:5px}
  .weapon b{font-size:19px}
  .weapon small{font-size:9px;line-height:1.5}
  .loadout-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
  .loadout-stats span{gap:5px;font-size:10px}
  .loadout-stats b{font-size:18px}
  .dungeon-grid{grid-template-columns:1fr;gap:10px}
  .dungeon{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;padding:16px 12px;gap:10px}
  .card-top{display:none}
  .sigil{height:48px;border:1px solid #ffffff18;border-radius:12px;background:#ffffff04}
  .sigil i{display:none}
  .sigil b{font-size:28px}
  .card-body{padding:0;display:flex;flex-direction:column}
  .card-body h2{order:-1;margin:0 0 8px;font-size:18px}
  .tag{align-self:flex-start;font-size:10px;padding:3px 7px}
  .card-body p{font-size:12px;min-height:0;line-height:1.6;margin:9px 0 12px}
  .card-foot{display:flex;align-items:center;gap:10px;padding-top:10px}
  .card-foot small{font-size:10px;margin:0;line-height:1.5}
  .enter{width:auto;min-width:72px;min-height:44px;font-size:13px;padding:9px 12px}
  .locked{background:#172124}
  .locked .sigil{opacity:.5}
  .training{padding:16px;margin-top:18px}
  .bottom-note{font-size:10px;margin-top:12px}
  .bottom-note .quiet{min-height:44px}
  .circle-tabs{overflow-x:auto;gap:7px;padding:2px 2px 10px;scroll-snap-type:x proximity}
  .circle-tabs button{flex:0 0 58px;min-height:58px;scroll-snap-align:start}
  .circle-tabs small{font-size:10px}
  .board-map{aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;margin:20px 0;max-width:none;background:none}
  .board-map .orbit-ring,.board-core{display:none}
  .board-map .rune-slot{position:static;transform:none;width:100%;height:62px;border-radius:8px;box-shadow:none;font-size:24px;display:flex;flex-direction:column;justify-content:center;gap:4px}
  .board-map .rune-slot small{position:static;font-size:10px}
  .board-map .rune-slot.sealed{opacity:.45}
  .sockets{display:block}
  .socket-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .engrave-slot{width:100%;min-width:0;min-height:64px}
  .engrave-slot small{font-size:9px}
  .transcend{margin-top:24px;min-width:0}
  .toolbar{gap:10px;margin-bottom:16px}
  .segmented{display:flex;gap:6px}
  .segmented button{flex:1;min-height:44px;padding:9px 6px;font-size:12px}
  select{min-height:44px;width:100%}
  .item{padding:14px 12px;gap:10px}
  .item>div:nth-child(2){min-width:0;overflow-wrap:anywhere}
  .item p{line-height:1.6;font-size:12px}
  .item-actions button{min-height:44px;min-width:48px;font-size:12px}
  .shop-actions{align-items:stretch}
  .shop-actions button{min-height:48px;font-size:12px;padding:10px 7px}
  .shop-actions>small{display:flex;align-items:center;padding:8px;font-size:10px;flex:1}
  .instruction h3{margin-bottom:10px}
  .instruction p{font-size:12px}
  dialog{width:calc(100% - 20px);max-height:calc(100dvh - 32px);padding:20px 16px;overflow-y:auto}
  .picker button,.dialog-actions button,.close{min-height:44px}
  body:has(.layout) #toast{bottom:calc(var(--mobile-dock) + 12px)}
}