/* 홈 새 겉모습 시험 (2026-11-09 대장님 "90년대 느낌이야"). 틀(내 도구·모든 도구·위젯·사이드바·사용자 배치)은 그대로, 겉모습만.
   home-tone.css 위에 덮어 쓴다: 흰 바탕 + 진한 회색 #1C1C1E, 주황 갈색 포인트 제거, 3D 아이콘 → 선 아이콘(home-dock.js 의 원래 SVG),
   영문 띄운 라벨 제거, 테두리 상자 대신 바탕 면으로 구분. */
html:root{
  --paper:#ffffff; --paper-2:#f4f4f5;
  --ink:#1c1c1e; --ink-soft:#48484a; --ink-mute:#8e8e93;
  --line:rgba(28,28,30,.10); --line-soft:rgba(28,28,30,.06);
  --accent:#1c1c1e; --accent-soft:#f2f2f4; --accent-green:#1c1c1e;
  --card-line:rgba(28,28,30,.10);
  --tone-hover:#f4f4f5;
  --nav-bg:rgba(255,255,255,.86);
}
body{background:#fff;letter-spacing:-.01em}
.footer{--footer-bg:#fff;--footer-border:rgba(28,28,30,.08)}
.navbar .beta-badge,.navbar [class*="beta"]{background:#1c1c1e !important;color:#fff !important}

/* ---------- 아이콘: 3D 그림 끄고 원래 선 아이콘 ---------- */
.gl-ic,[class*="gl-ic-"]{--ic:none !important}
.dk-ic.gl-ic{background:none !important}
.gl-ic svg{display:block !important}

/* ---------- 사이드바 ---------- */
.gl-side-h{font-size:12px;font-weight:600;letter-spacing:0;color:var(--ink-mute);padding:6px 10px 10px}
.gl-side-list{gap:1px}
.gl-side-list a{height:36px;border-radius:8px;font-size:13.5px;color:var(--ink-soft)}
.gl-side-list a:hover{background:#f4f4f5;color:var(--ink);box-shadow:none}
.gl-side-list a:first-child{background:#f4f4f5;color:var(--ink);font-weight:600}
.gl-side-list a .dk-ic.gl-ic{width:18px;height:18px;color:var(--ink-mute)}
.gl-side-list a:hover .dk-ic,.gl-side-list a:first-child .dk-ic{color:var(--ink)}
.gl-side-list a .dk-ic svg{width:18px;height:18px}

/* ---------- 머리: 띄운 영문 라벨 없이 큰 제목 하나 ---------- */
.gl-eyebrow{display:none}
.gl-hero,.gl-hero[class]{padding:36px 0 34px;border-bottom:0}
.gl-hero-t strong{font-size:clamp(34px,3.8vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1.1}
.gl-hero-t p{margin-top:12px;font-size:15px;color:var(--ink-mute)}
.gl-hero-t strong::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.22em;vertical-align:.12em;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease}
.gl-hero:hover .gl-hero-t strong::after{transform:translate(2px,-2px)}

/* ---------- 구역 나눔: 선 대신 여백 ---------- */
.dock[data-skin="glass"] .sf{border-top:0;padding:32px 0 8px}
.dock[data-skin="glass"] .dk-head h2,.dock[data-skin="glass"] .dk-sub .lbl,.dock[data-skin="glass"] .wg-head h3{font-size:18px;font-weight:700;letter-spacing:-.03em}
.dock[data-skin="glass"] .dk-sub .hint{color:var(--ink-mute);font-weight:400}

/* ---------- 내 도구 카드: 회색 면, 테두리 없음 ---------- */
.dock[data-skin="glass"] .dk-shelf{gap:12px}
.dock[data-skin="glass"] .dk-card{background:#f4f4f5;border:0;border-radius:14px;height:116px;padding:18px 18px 16px;transition:background .2s ease}
.dock[data-skin="glass"] .dk-card:hover{background:#ebebed;border:0}
.dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic,.dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic.gl-ic{width:36px;height:36px;margin:0;border-radius:10px;background:#fff !important;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.dock[data-skin="glass"] .dk-card .dk-ic svg{width:20px;height:20px}
.dock[data-skin="glass"] .dk-card .dk-nm{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.dock[data-skin="glass"] .dk-card::after{color:var(--ink-mute)}
.dock[data-skin="glass"] .dk-x:hover,.dock[data-skin="glass"] .dk-pin:hover,.dock[data-skin="glass"] .wg-x:hover{background:#fff;color:var(--ink)}
.dock[data-skin="glass"] .dk-slot{background:#ebebed;border-color:var(--ink)}
.dock[data-skin="glass"].is-over .dk-shelf-wrap{background:#f4f4f5;box-shadow:0 0 0 2px var(--ink) inset}

/* ---------- 모든 도구: 테두리 칸 대신 목록 줄, + 는 올렸을 때만 진하게 ---------- */
.dock[data-skin="glass"] .dk-palette{gap:2px 16px}
.dock[data-skin="glass"] .dk-tile,.dock[data-skin="glass"] .dk-tile.is-on{background:transparent;border:0;border-radius:8px}
.dock[data-skin="glass"] .dk-tile:hover{background:#f4f4f5}
.dock[data-skin="glass"] .dk-tile .dk-ic.gl-ic{width:18px;height:18px;margin:0;color:var(--ink-mute)}
.dock[data-skin="glass"] .dk-tile .dk-ic svg{width:18px;height:18px}
.dock[data-skin="glass"] .dk-tile .dk-nm{font-size:13.5px;color:var(--ink-soft)}
.dock[data-skin="glass"] .dk-tile.is-on .dk-nm{color:var(--ink);font-weight:600}
.dock[data-skin="glass"] .dk-tile.is-on .dk-ic{color:var(--ink)}
.dock[data-skin="glass"] .dk-tile .dk-pin{color:#c7c7cc}
.dock[data-skin="glass"] .dk-tile:hover .dk-pin,.dock[data-skin="glass"] .dk-tile.is-on .dk-pin{color:var(--ink)}
.dock[data-skin="glass"] .dk-pal-h{margin-top:36px;font-size:15px}

/* ---------- 위젯 ---------- */
.dock[data-skin="glass"] .wg[data-wk="credit"]{background:#f4f4f5;border:0;border-radius:14px}
.dock[data-skin="glass"] .wg-dd .d,.dock[data-skin="glass"] .wg-dd li.soon .d,.dock[data-skin="glass"] .wg-cr.low b{color:#d93a2b}
.dock[data-skin="glass"] .wg[data-wk="tpl"] .wg-nm::after{background:var(--ink);border-radius:4px}
.dock[data-skin="glass"] .wg-tp .th{border-radius:10px;background:#f4f4f5}
.dock[data-skin="glass"] .wg-tile{background:transparent;border-color:var(--line)}
.dock[data-skin="glass"] .wg-tile.is-on{background:#f4f4f5;border-color:var(--line)}
.dock[data-skin="glass"] .wg-tl::before{background:var(--line)}
.dock[data-skin="glass"] .wg-tl .dot{border-color:var(--ink)}
.dock[data-skin="glass"] .wg-tl .ev.soon .dot{background:var(--ink);border-color:var(--ink)}
.dock[data-skin="glass"] .wg-go{color:var(--ink)}

/* ---------- 끌기 유령·우클릭 메뉴 ---------- */
.dk-ghost{border-color:var(--ink);box-shadow:0 12px 28px -14px rgba(0,0,0,.35)}
.dk-ghost .dk-ic.gl-ic{width:20px;height:20px}
.dk-menu button:hover:not([disabled]){background:#f4f4f5}

/* ---------- 모바일: 머리가 숨겨지므로 첫 구역 위 여백 줄임 ---------- */
@media(max-width:760px){
  .dock[data-skin="glass"] .sf{padding-top:28px}
  .dock[data-skin="glass"] .sf-mine{padding-top:4px}
  .dock[data-skin="glass"] .dk-card{height:auto;min-height:100px;padding:14px 14px 13px}
  .dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic,.dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic.gl-ic{width:32px;height:32px;border-radius:9px}
}

/* ---------- 구분선 (2026-11-09 대장님 "중간중간 라인으로 구분") — 옅은 한 줄, 구역 시작마다 ---------- */
.gl-hero,.gl-hero[class]{border-bottom:1px solid var(--line)}
.dock[data-skin="glass"] .sf{border-top:1px solid var(--line);padding-top:28px;margin-top:8px}
.dock[data-skin="glass"] .sf-mine{border-top:0;margin-top:0}
.dock[data-skin="glass"] .dk-pal-h{border-top:1px solid var(--line-soft);padding-top:24px;margin-top:28px}
.gl-side-h{border-bottom:1px solid var(--line-soft);margin-bottom:8px}
@media(max-width:760px){
  .dock[data-skin="glass"] .sf-mine{border-top:0}
}

/* ---------- 구역 면 색 (2026-11-09 대장님 "섹션별로 면컬러 살짝") — 화면 끝까지 닿는 띠, 위쪽 선 유지 ----------
   머리·내 도구 = 흰 바탕 / 모든 도구·오락실 = 아주 옅은 회색 / 위젯 = 한 단계 더 짙은 옅은 회색 */
.dock[data-skin="glass"] .sf-all,.dock[data-skin="glass"] .sf-wg{margin-left:-32px;margin-right:-32px;padding:30px 32px 36px;border-radius:0}
.dock[data-skin="glass"] .sf-all{background:#f9f9fa;margin-top:28px}
.dock[data-skin="glass"] .sf-all + .sf-wg{margin-top:0}
.dock[data-skin="glass"] .sf-wg{background:#f2f2f4;padding-bottom:44px}
/* 회색 띠 위 칸들은 흰색으로 떠 보이게 */
.dock[data-skin="glass"] .sf-all .dk-tile:hover{background:#fff}
.dock[data-skin="glass"] .sf-wg .wg[data-wk="credit"]{background:#fff}
.dock[data-skin="glass"] .sf-wg .wg-tp .th{background:#fff}
.dock[data-skin="glass"] .sf-wg .wg-tile:hover,.dock[data-skin="glass"] .sf-wg .wg-tile.is-on{background:#fff}
.dock[data-skin="glass"] .sf-wg .wg-row > .wg + .wg{border-left-color:var(--line)}
.dock[data-skin="glass"] .sf-wg .wg-dd li{border-bottom-color:var(--line)}
@media(max-width:760px){
  .dock[data-skin="glass"] .sf-all,.dock[data-skin="glass"] .sf-wg{margin-left:-20px;margin-right:-20px;padding:24px 20px 28px}
  .dock[data-skin="glass"] .sf-all{margin-top:20px}
}

/* 위젯 띠 면 색 빼기 (2026-11-09 대장님) — 위쪽 선만 남김, 띠 위 흰 칸들도 원래 회색으로 */
.dock[data-skin="glass"] .sf-wg{background:none}
.dock[data-skin="glass"] .sf-wg .wg[data-wk="credit"],.dock[data-skin="glass"] .sf-wg .wg-tp .th,.dock[data-skin="glass"] .sf-wg .wg-tile:hover,.dock[data-skin="glass"] .sf-wg .wg-tile.is-on{background:#f4f4f5}

/* 머리(모션 제목·설명) 삭제 (2026-11-09 대장님 "의미없다") — 내 도구 카드가 첫 줄. 숨김 h1(sr-h1)은 검색용으로 그대로 */
.gl-hero,.gl-hero[class]{display:none}
.dock[data-skin="glass"] .sf-mine{padding-top:0}
.dock[data-skin="glass"] .sf-mine{min-height:calc(var(--side-h,0px) + 12px)}
@media(max-width:760px){.dock[data-skin="glass"] .sf-mine{min-height:0}}

/* 왼쪽 My tools 사이드바 삭제 (2026-11-09 대장님 "중복이다" — 내 도구 카드와 같은 목록). 카드가 왼쪽 끝부터 */
.gl-side{display:none}
.gl-wrap{grid-template-columns:minmax(0,1fr)}
.dock[data-skin="glass"] .sf-mine{margin-left:0;min-height:0}

/* ================= 다크 모드 (2026-11-09 대장님) — 네비 토글이 html[data-theme="dark"] 를 붙임 =================
   같은 짜임을 뒤집음: 바탕 #161618 / 카드 면 #232326 / 모든 도구 띠 #1c1c1f / 글 #f2f2f4. 빨강 디데이만 색 유지 */
html[data-theme="dark"]:root{
  --paper:#161618; --paper-2:#232326;
  --ink:#f2f2f4; --ink-soft:#c7c7cc; --ink-mute:#8e8e93;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --accent:#f2f2f4; --accent-soft:#2c2c2f; --accent-green:#f2f2f4;
  --card-line:rgba(255,255,255,.10);
  --tone-hover:#232326;
  --nav-bg:rgba(22,22,24,.86); --nav-border:rgba(255,255,255,.08);
}
html[data-theme="dark"] body{background:#161618;color:#f2f2f4}
html[data-theme="dark"] ::selection{background:#f2f2f4;color:#161618}
html[data-theme="dark"] .footer{--footer-bg:#161618;--footer-border:rgba(255,255,255,.08);--footer-text:#8e8e93;--footer-text-light:#f2f2f4;--footer-text-dark:#f2f2f4;--footer-accent:#f2f2f4;--footer-hover-bg:#232326}
html[data-theme="dark"] .footer .footer-premium-badge{background:#f2f2f4;color:#161618}
html[data-theme="dark"] .navbar .nav-beta{background:#f2f2f4 !important;color:#161618 !important}

/* 내 도구 카드 */
html[data-theme="dark"] .dock[data-skin="glass"] .dk-card{background:#232326;color:#f2f2f4}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-card:hover{background:#2c2c2f}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic,html[data-theme="dark"] .dock[data-skin="glass"] .dk-card:nth-child(n) .dk-ic.gl-ic{background:#161618 !important;color:#f2f2f4}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-x,html[data-theme="dark"] .dock[data-skin="glass"] .wg-x{color:#8e8e93}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-x:hover,html[data-theme="dark"] .dock[data-skin="glass"] .dk-pin:hover,html[data-theme="dark"] .dock[data-skin="glass"] .wg-x:hover{background:#3a3a3d;color:#f2f2f4}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-slot{background:#2c2c2f;border-color:#f2f2f4}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-empty{border-color:rgba(255,255,255,.14);color:#8e8e93}
html[data-theme="dark"] .dock[data-skin="glass"].is-dragging .dk-shelf-wrap,html[data-theme="dark"] .dock[data-skin="glass"].is-over .dk-shelf-wrap{background:#1c1c1f;box-shadow:0 0 0 2px #f2f2f4 inset}

/* 모든 도구 띠 */
html[data-theme="dark"] .dock[data-skin="glass"] .sf-all{background:#1c1c1f}
html[data-theme="dark"] .dock[data-skin="glass"] .sf-all .dk-tile:hover{background:#2c2c2f}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-tile .dk-pin{color:#48484a}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-tile:hover .dk-pin,html[data-theme="dark"] .dock[data-skin="glass"] .dk-tile.is-on .dk-pin{color:#f2f2f4}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-pal-h::before{background:#f2f2f4}
html[data-theme="dark"] .dock[data-skin="glass"] .dk-link{color:#8e8e93}

/* 위젯 */
html[data-theme="dark"] .dock[data-skin="glass"] .sf-wg .wg[data-wk="credit"],html[data-theme="dark"] .dock[data-skin="glass"] .sf-wg .wg-tp .th,html[data-theme="dark"] .dock[data-skin="glass"] .sf-wg .wg-tile:hover,html[data-theme="dark"] .dock[data-skin="glass"] .sf-wg .wg-tile.is-on{background:#232326}
html[data-theme="dark"] .dock[data-skin="glass"] .wg-dd .d,html[data-theme="dark"] .dock[data-skin="glass"] .wg-dd li.soon .d,html[data-theme="dark"] .dock[data-skin="glass"] .wg-cr.low b{color:#ff6b5e}
html[data-theme="dark"] .dock[data-skin="glass"] .wg[data-wk="tpl"] .wg-nm::after{background:#f2f2f4;color:#161618}
html[data-theme="dark"] .dock[data-skin="glass"] .wg-tl .dot{background:#161618}
html[data-theme="dark"] .dock[data-skin="glass"] .wg-tp .cd{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .dock[data-skin="glass"] .wg-bar{background:#2c2c2f}

/* 끌기 유령·우클릭 메뉴 */
html[data-theme="dark"] .dk-ghost{background:#232326;color:#f2f2f4;border-color:#f2f2f4;box-shadow:0 12px 28px -14px rgba(0,0,0,.8)}
html[data-theme="dark"] .dk-menu{background:#232326;color:#f2f2f4;border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .dk-menu button{color:#f2f2f4}
html[data-theme="dark"] .dk-menu button:hover:not([disabled]){background:#2c2c2f}