/* 킬라이드 스폰 지도 — 모바일 우선 · 어두운 바탕(지도 색이 밝아 눈이 편하다) */
:root{
  --bg:#0f1218; --bg2:#161b24; --bg3:#1e2531; --line:#2b3444;
  --fg:#e8edf5; --dim:#93a0b4; --accent:#ffc857; --accent2:#4ea1ff;
  --ok:#37d399; --bad:#ff6b6b; --shadow:0 6px 24px rgba(0,0,0,.45);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif}
/* ★textarea 를 빠뜨렸었다 — 어두운 바탕에 브라우저 기본 ★검은 글자가 나와
   메모를 쓰는 동안 자기가 뭘 쓰는지 안 보였다(사용자 지적 2026-09-06). */
button,input,select,textarea{font:inherit;color:inherit}
b{font-weight:700}

.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.show{display:flex}

/* ── 공통 부품 ─────────────────────────────── */
button{border:0;background:none;cursor:pointer}
.primary{background:var(--accent);color:#20180a;font-weight:800;border-radius:12px;padding:13px 18px}
.primary:active{transform:translateY(1px)}
.big{width:100%;font-size:17px;margin-top:6px}
.ghost{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--fg)}
.ghost:active{background:#2a3444}
.sm{padding:6px 10px;font-size:13px}
.grow{flex:1}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--accent2)}
.msg{min-height:20px;color:var(--bad);font-size:13px;margin:8px 0 0}
.msg.ok{color:var(--ok)}

.bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg2);
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:nowrap;min-width:0}
.bar > *{flex:0 0 auto}
.bar > .grow{flex:1 1 auto}        /* ★이게 없으면 오른쪽 단추가 왼쪽에 붙는다 */
.bar .seg button{white-space:nowrap}
@media (max-width:560px){
  .bar{gap:6px;padding:8px 8px}
  .work .bar .stage-title{flex:1 1 auto;min-width:0}
  .work .bar .grow{display:none}
  .seg button{padding:6px 8px;font-size:12px}
  .bar .sm{padding:6px 8px;font-size:12px}
  .stage-title b{font-size:14px}
}
.bar .who{display:flex;align-items:center;gap:7px;font-size:14px}

.seg{display:flex;background:var(--bg3);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{padding:7px 12px;font-size:13px;color:var(--dim)}
.seg button.on{background:var(--accent2);color:#06121f;font-weight:700}

/* ── 입장 ─────────────────────────────────── */
.join-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.join-card{width:min(430px,100%);background:var(--bg2);border:1px solid var(--line);
  border-radius:18px;padding:26px 22px;box-shadow:var(--shadow)}
.join-card h1{margin:0 0 4px;font-size:25px;letter-spacing:-.5px}
.join-card h1 span{color:var(--accent)}
.lede{color:var(--dim);font-size:14px;margin:0 0 20px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.fld em{font-style:normal;opacity:.75}
.fld input{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;outline:none}
.fld input:focus{border-color:var(--accent2)}
.note{margin-top:16px;font-size:13px;color:var(--dim)}
.note summary{cursor:pointer;color:var(--accent2)}
.note p{margin:8px 0 0;line-height:1.6}

/* ── 맵 고르기 ────────────────────────────── */
#scr-list{overflow:hidden}
.list-top{padding:14px 14px 0;flex:0 0 auto}
.list-top h2{margin:2px 0 12px;font-size:18px}
.search-row{display:flex;gap:8px}
.search-row input{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;outline:none;min-width:0}
.search-row select{background:var(--bg3);border:1px solid var(--line);border-radius:11px;padding:11px 8px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;background:var(--bg3);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:13px;color:var(--dim)}
.chip.on{background:var(--accent);color:#20180a;border-color:var(--accent);font-weight:700}

.cards{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 14px 20px;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  grid-auto-rows:max-content;align-content:start}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;transition:transform .12s,border-color .12s;display:flex;flex-direction:column}
.card:active{transform:scale(.985)}
.card:hover{border-color:var(--accent2)}
.card .thumb{position:relative;height:126px;background:#333a46 center/cover no-repeat;flex:0 0 auto}
.card .badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.62);border-radius:8px;
  padding:3px 8px;font-size:11px;letter-spacing:.3px}
.card .cnt{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.62);border-radius:8px;
  padding:3px 8px;font-size:11px}
.card .cnt.mine{background:var(--accent);color:#20180a;font-weight:700}
.card .body{padding:11px 12px 13px}
.card .nm{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px}
.card .rt{font-size:12px;color:var(--dim);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .mon{display:flex;gap:3px;margin-top:9px;flex-wrap:wrap;align-items:center}
.card .mon img{width:26px;height:26px;object-fit:contain;background:#0c1017;border-radius:6px;padding:1px}
.card .mon .more{font-size:11px;color:var(--dim)}
.st-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.st-todo{background:#495468}.st-doing{background:var(--accent)}
.st-done{background:var(--ok)}.st-unknown{background:#7c5cff}
.foot-note{flex:0 0 auto;margin:0;padding:8px 14px calc(10px + var(--safe-b));
  font-size:11px;color:#5c6779;border-top:1px solid var(--line)}

/* ── 작업대 ───────────────────────────────── */
.work .stage{position:relative;flex:1;overflow:hidden;background:#0a0d12;touch-action:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-title{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.stage-title small{color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hud{position:absolute;z-index:5;display:flex;gap:6px}
.hud.tl{top:10px;left:10px;flex-direction:column;align-items:flex-start}
.hud.tr{top:10px;right:10px;flex-direction:column}
.pill{background:rgba(12,16,22,.82);border:1px solid var(--line);border-radius:9px;
  padding:5px 10px;font-size:12px;backdrop-filter:blur(4px)}
.pill.hint{color:var(--accent);max-width:56vw}
.pill.hint:empty{display:none}
.pill-row{display:flex;gap:6px}
#hud-count:empty{display:none}
.pill.legend{line-height:1.7;font-size:11px;max-width:60vw}
.pill.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;
  vertical-align:-1px}
.seg.tiny button{padding:5px 8px;font-size:11.5px}
.tool{width:38px;height:38px;border-radius:10px;background:rgba(12,16,22,.82);
  border:1px solid var(--line);font-size:16px;backdrop-filter:blur(4px)}
.tool.on{background:var(--accent2);color:#06121f;border-color:var(--accent2)}

.sel-badge{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:6;
  display:flex;align-items:center;gap:8px;background:rgba(12,16,22,.9);border:1px solid var(--accent);
  border-radius:999px;padding:6px 8px 6px 6px;box-shadow:var(--shadow)}
.sel-badge img{width:30px;height:30px;object-fit:contain}
.sel-badge .x{width:24px;height:24px;border-radius:50%;background:var(--bg3);font-size:12px}
.hide{display:none !important}

.layers{position:absolute;left:10px;bottom:10px;z-index:6;background:rgba(12,16,22,.9);
  border:1px solid var(--line);border-radius:12px;padding:8px;max-height:44%;overflow:auto;
  min-width:170px;backdrop-filter:blur(4px)}
.layers-h{font-size:11px;color:var(--dim);margin:2px 4px 7px}
.lyr{display:flex;align-items:center;gap:7px;padding:5px 4px;font-size:13px;cursor:pointer;border-radius:8px}
.lyr:active{background:var(--bg3)}
.lyr i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.lyr.off{opacity:.36}
.lyr span.n{margin-left:auto;color:var(--dim);font-size:11px}

.pop{position:absolute;z-index:8;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:10px;box-shadow:var(--shadow);font-size:13px;min-width:150px}
.pop h4{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:6px}
.pop h4 img{width:24px;height:24px;object-fit:contain}
.pop .row{display:flex;gap:6px;margin-top:8px}
.pop button{flex:1;border-radius:9px;padding:8px;background:var(--bg3);border:1px solid var(--line)}
.pop button.danger{background:#3a1e24;border-color:#63313a;color:#ffb3b3}
.pop textarea{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:9px;
  padding:8px;resize:vertical;min-height:64px;outline:none;color:var(--fg)}
.pop textarea:focus{border-color:var(--accent2)}
.pop textarea::placeholder{color:var(--dim)}
/* 메모 본문 — 읽을 때 */
.pop .memo{white-space:pre-wrap;background:var(--bg3);border:1px solid var(--line);
  border-radius:9px;padding:8px;color:var(--fg);max-height:40vh;overflow:auto}
.pop .sub{color:var(--dim);font-size:11px;margin-top:6px}

.palette{flex:0 0 auto;background:var(--bg2);border-top:1px solid var(--line);
  padding:8px 10px calc(8px + var(--safe-b));max-height:44vh;display:flex;flex-direction:column}
.palette.fold .pal-list{display:none}
.pal-h{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:7px}
.pal-tip{color:var(--dim);font-size:11px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){ .pal-tip{display:none} }
.pal-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pal{flex:0 0 auto;width:66px;border:1px solid var(--line);border-radius:11px;background:var(--bg3);
  padding:5px 3px 6px;text-align:center;cursor:pointer;position:relative}
.pal.on{border-color:var(--accent);background:#332a12}
.pal.fixed{border-color:#7a6428;opacity:.72;cursor:default}
.pal .listed.on-map{background:var(--accent);color:#20180a}
.pal img{width:42px;height:42px;object-fit:contain;display:block;margin:0 auto}
.pal .noimg{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  margin:0 auto;font-size:9.5px;line-height:1.15;text-align:center;color:var(--dim);border:1px dashed var(--line);border-radius:8px}
.pal .n{font-size:10.5px;line-height:1.25;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pal .c{position:absolute;top:2px;right:4px;font-size:10px;color:var(--accent);font-weight:700}
.pal .listed{position:absolute;top:2px;left:3px;font-size:9px;background:var(--accent2);
  color:#06121f;border-radius:5px;padding:0 4px;font-weight:700}

/* ── 시트 / 토스트 ────────────────────────── */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);display:flex;
  align-items:flex-end;justify-content:center}
.sheet-in{width:min(560px,100%);max-height:82vh;overflow:auto;background:var(--bg2);
  border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 16px calc(18px + var(--safe-b))}
.sheet-in h3{margin:0 0 12px}
.sheet-in table{width:100%;border-collapse:collapse;font-size:13px}
.sheet-in td,.sheet-in th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.sheet-in .ghost{width:100%;margin-top:14px}
.sheet-in ul{padding-left:18px;margin:8px 0}
.sheet-in li{margin:5px 0;color:var(--dim)}
.sheet-in li b{color:var(--fg)}

.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);z-index:30;
  background:#0b0f15;border:1px solid var(--line);border-radius:11px;padding:9px 15px;
  font-size:13px;opacity:0;pointer-events:none;transition:.22s;max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:#7a3540;color:#ffc0c0}
.toast .undo{margin-left:10px;background:var(--accent);color:#20180a;font-weight:700;
  border-radius:8px;padding:4px 10px;font-size:12px;pointer-events:auto}
.toast.on{pointer-events:auto}

/* ══ 넓은 화면(데스크톱) ═══════════════════════════════════
   모바일은 «위=지도 / 아래=팔레트 띠» 지만, 넓은 화면에서 그대로 두면
   ★휴대폰 화면을 늘려 놓은 것처럼 보인다. 여기서는 팔레트를 ★왼쪽 기둥으로 세워
   몬스터를 한눈에 펼치고, 지도에 남는 공간을 전부 준다. */
@media (min-width:1024px){
  .sheet{align-items:center}
  .sheet-in{border-radius:18px;max-height:78vh}
  .cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:8px 22px 24px}
  .list-top{padding:18px 22px 0}
  .list-top h2{font-size:21px}
  .card .thumb{height:150px}

  /* 작업대 = [머리띠] / [팔레트 기둥 | 지도] */
  #scr-work.show{display:grid;grid-template-columns:296px 1fr;grid-template-rows:auto 1fr}
  #scr-work.nopal.show{grid-template-columns:0 1fr}
  .work .bar{grid-column:1/-1;grid-row:1;padding:11px 18px}
  #palette{grid-column:1;grid-row:2;max-height:none;overflow:hidden;
    border-top:0;border-right:1px solid var(--line);padding:14px 12px 16px}
  #scr-work.nopal #palette{padding:0;border-right:0}
  .work .stage{grid-column:2;grid-row:2}

  .pal-h{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px}
  .pal-h .seg{align-self:flex-start}
  #seg-status{align-self:stretch}
  #seg-status button{flex:1}
  .pal-tip{display:block;white-space:normal;line-height:1.5;font-size:12px;
    border-left:2px solid var(--line);padding-left:8px}
  #pal-toggle{display:none}
  .pal-list{flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;gap:8px;
    align-content:flex-start;max-height:calc(100vh - 250px);padding-right:4px}
  .pal{width:80px}
  .pal img,.pal .noimg{width:52px;height:52px}
  .pal .n{font-size:11px}

  .palette.fold .pal-list{display:flex}      /* 기둥에서는 «접기» 를 안 쓴다 */
  .layers{left:14px;bottom:14px;min-width:200px}
  .tool{width:40px;height:40px}
  .hud.tl{top:14px;left:14px}
  .hud.tr{top:14px;right:14px}
  .sel-badge{bottom:16px}
}
@media (min-width:1500px){
  #scr-work.show{grid-template-columns:340px 1fr}
  .pal{width:88px}
  .pal img,.pal .noimg{width:58px;height:58px}
}


/* ══ 구역 표시 ══════════════════════════════════════════════
   ★2026-09-03 — 지도 위 «구역 고르기 + ⬆ 버튼 줄» 패널을 없앴다.
   사용자 지적: *"메인화면에 뜨는 팝업 저거 큰 의미없어보입니다. 중앙구역1 이런식으로
   나타나고 위치이동인데 의미없어보입니다"*. 이름이 flood-fill 부산물(«자투리 8칸»)이라
   읽어도 뜻이 없었고, 던전에서는 방 목록이 곧 ★구조 유출이었다(R06 지시 위반).
   지금은 «지금 어디» 알약 한 줄만 두고, 이동은 ★지도 위 ⬆(원작 계단)로 한다.
   계단이 없는 구역(전체의 11%)만 도구줄 ⧉ 로 ★필요할 때 연다. */
.zonepill{font-size:12px;color:var(--dim)}
.zonepill b{color:var(--fg);font-weight:700}
.zone-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.zone-list button{display:flex;justify-content:space-between;gap:10px;text-align:left;
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-size:13px;color:var(--fg)}
.zone-list button.on{border-color:var(--accent);color:var(--accent)}
.zone-list button span{color:var(--dim);font-size:11.5px}


/* 던전 카드 = 입구 장면만 (구조 노출 금지) */
.card .thumb.dungeon{background-color:#0d1016;background-position:center;background-size:cover}
.card .thumb.dungeon::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,15,.15),rgba(8,10,15,.72))}
.dgn-tag{position:absolute;left:8px;bottom:8px;z-index:1;background:rgba(0,0,0,.62);
  border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:11px;color:#cfe0f5}


/* ══ 목록 묶음 (완료 / 체크중 / 안 한 곳) ═══════════════════ */
/* 상태 필터 탭 (전체 / 안 한 곳 / 체크 중 / 완료 / 기억 없음) */
.tally{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.tally .t{display:flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--bg3);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:13px;color:var(--dim)}
.tally .t:hover{border-color:var(--accent2)}
.tally .t b{color:var(--fg);font-size:12px}
.tally .t.on{background:var(--accent);border-color:var(--accent);color:#20180a;font-weight:700}
.tally .t.on b{color:#20180a}
.tally .t.on .st-dot{box-shadow:0 0 0 2px rgba(0,0,0,.18)}
.grp{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:14px 2px 2px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.grp:first-child{margin-top:4px}
.grp b{font-size:15px}
.grp .n{font-size:12px;color:var(--dim)}
.grp .sub{font-size:11.5px;color:#5c6779;margin-left:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-btn{margin-left:auto;background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:3px 9px;font-size:11px;color:var(--dim);flex:0 0 auto}
.st-btn:hover{border-color:var(--accent2);color:var(--fg)}
@media (max-width:560px){ .grp .sub{display:none} }



/* ══ 작업 고르기 ═══════════════════════════════════════════ */
.task-wrap{flex:1;overflow:auto;padding:24px 20px calc(24px + var(--safe-b));
  max-width:720px;width:100%;margin:0 auto}
.task-wrap h2{margin:6px 0 6px;font-size:22px}
.task-lede{color:var(--dim);font-size:14px;margin:0 0 22px}
.tasks{display:flex;flex-direction:column;gap:12px}
.task{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:16px 16px}
button.task{cursor:pointer}
button.task:hover{border-color:var(--accent);background:#1b2130}
button.task:active{transform:scale(.99)}
.task .ic{width:48px;height:48px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:24px;background:var(--bg3);border-radius:12px}
.task .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.task .tx b{font-size:16px}
.task .tx span{font-size:12.5px;color:var(--dim)}
.task .tx em{font-style:normal;font-size:11.5px;color:var(--accent)}
.task .go{margin-left:auto;color:var(--dim);font-size:22px}
.task.off{opacity:.5}
.task.off .tx em{color:#7b8798}
.list-top h2 small{font-size:14px;color:var(--dim);font-weight:400}

/* 입장 화면 — 로그인 ↔ 가입 전환 (2026-09-06)
   ★위쪽 탭 대신 아래 링크 하나로 오간다. 사용자 지적: 화면을 둘로 가르는 건 무겁다. */
.switch{margin:10px 0 0;text-align:center;color:var(--dim);font-size:13px}
.switch .linkish{background:none;border:0;padding:2px 4px;color:var(--accent2);
  text-decoration:underline;cursor:pointer;font-size:13px}
.switch .linkish:hover{color:#7cbcff}