/* 홈 구역 면 시험 (2026-10-18) — 대장님 진단: "버튼이 버튼인지 모르고, 어디까지가 한 섹션인지 모른다".
   레퍼런스(한 톤 짙은 면)에서 '구역 단위 면'만 가져옴. 항목마다 카드·번호 이름표는 A안 규칙대로 쓰지 않는다.
   - 면: 내 도구 / 모든 도구+오락실 / 위젯, 구역마다 하나. 테두리·그림자 없이 바탕보다 한 톤 짙게
   - 버튼: 면 위에서 흰 칸 = 누를 수 있는 것. 선반에 이미 올린 도구는 반투명 흰 칸 + 옅은 테두리(모양은 남기고 흐리게)
   범위는 .dock[data-surface="tone"] 안으로만 — 링크만 걸려 있어도 다른 화면에 영향 없음 */
/* 면 색 = 모래 (2026-10-18 대장님 선택: 처음 #ece6dc 가 "칙칙하다" → 크림 #f3ece1 / 모래 / 살구 #f4ebe4 비교 후) */
.dock[data-surface="tone"]{--surface:#f1e6d8;--surface-2:#e8dac8}
.dock[data-surface="tone"] .sf{background:var(--surface);border-radius:22px;padding:28px 30px 30px}
.dock[data-surface="tone"] .sf + .sf,.dock[data-surface="tone"] .home-eraser + .sf{margin-top:20px}
/* 내 도구는 면 없이 종이 바탕 위 흰 칸만 (2026-10-18 대장님 "이 부분에는 테두리를 삭제") — 선반 칸이 이미 덩어리라 면이 겹쳐 무거웠다 */
.dock[data-surface="tone"] .sf-mine{background:none;padding:0;border-radius:0}

/* 구역 제목 — 세 구역 같은 무게 */
.dock[data-surface="tone"] .dk-head h2{font-size:clamp(20px,2.2vw,24px)}
.dock[data-surface="tone"] .dk-sub{margin-top:0;padding-top:0;border-top:0}
.dock[data-surface="tone"] .dk-sub .lbl{font-size:clamp(20px,2.2vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.02em}
.dock[data-surface="tone"] .wg-sec{margin-top:0}
.dock[data-surface="tone"] .wg-head{border-bottom-color:rgba(26,24,22,.10)}
.dock[data-surface="tone"] .wg-head h3{font-size:clamp(20px,2.2vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.02em}

/* 내 도구 선반: 흰 칸, 테두리 없이 면과의 대비로 */
.dock[data-surface="tone"] .dk-shelf-wrap{margin-top:18px}
.dock[data-surface="tone"] .dk-card{border-color:transparent}
.dock[data-surface="tone"] .dk-card:hover{border-color:var(--ink);box-shadow:none}
.dock[data-surface="tone"].is-dragging .dk-shelf-wrap{background:var(--surface-2);box-shadow:none}

/* 모든 도구 판: 올릴 수 있는 도구 = 흰 칸 */
.dock[data-surface="tone"] .dk-tile{background:#fff;border-color:transparent}
.dock[data-surface="tone"] .dk-tile:hover{border-color:var(--ink-soft);background:#fff}
.dock[data-surface="tone"] .dk-pin:hover{background:var(--surface)}
/* 이미 올린 도구 = 반투명 흰 칸 + 옅은 테두리 — 버튼 모양은 남기고 '이미 올림'은 흐리게
   (2026-10-18: 면 색 그대로였더니 "형태가 보이지 않는다") */
.dock[data-surface="tone"] .dk-tile.is-on{background:rgba(255,255,255,.42);border:1px solid rgba(26,24,22,.08)}
.dock[data-surface="tone"] .dk-tile.is-on:hover{background:rgba(255,255,255,.7);border-color:rgba(26,24,22,.16)}
.dock[data-surface="tone"] .dk-pal-h{border-top-color:rgba(26,24,22,.10)}

/* 위젯: 세로 괘선은 면 위에서 조금 진하게 */
.dock[data-surface="tone"] .wg-row > .wg + .wg{border-left-color:rgba(26,24,22,.10)}
.dock[data-surface="tone"] .wg-pal{border-top-color:rgba(26,24,22,.10)}
.dock[data-surface="tone"] .wg-tile{background:#fff;border-color:transparent}
.dock[data-surface="tone"] .wg-tile.is-on{background:rgba(255,255,255,.42);border:1px solid rgba(26,24,22,.08)}

@media(max-width:760px){
  .dock[data-surface="tone"] .sf{padding:20px 18px 22px;border-radius:18px}
  .dock[data-surface="tone"] .sf-mine{padding:0;border-radius:0}
  .dock[data-surface="tone"] .sf + .sf,.dock[data-surface="tone"] .home-eraser + .sf{margin-top:14px}
}