/* 홈 '내 도구' 선반 (1차, 2026-10-06) — js/home-dock.js 짝. 토큰은 index.php :root 공유 */
.dock{padding:56px 0 0;background:var(--paper)}
.dock .dk-inner{padding:0 40px}
@media(max-width:760px){.dock .dk-inner{padding:0 22px}.dock{padding-top:40px}}

.dk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dk-head h2{font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.3}
.dk-tools{display:flex;align-items:center;gap:14px}
.dk-status{font-size:12px;color:var(--ink-mute);display:inline-flex;align-items:center;gap:7px;transition:color .2s ease}
.dk-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-green);opacity:.55;transition:opacity .2s ease,transform .2s ease}
.dk-status.flash{color:var(--accent-green)}
.dk-status.flash::before{opacity:1;transform:scale(1.5)}
.dk-status.is-error{color:#b3261e;cursor:pointer}
.dk-status.is-error::before{background:#b3261e;opacity:1}
.dk-link{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--ink-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.dk-link:hover{color:var(--ink)}

/* 선반 */
.dk-shelf-wrap{margin:6px -12px 0;padding:12px;border-radius:18px;transition:background .2s ease,box-shadow .2s ease}
.dk-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;min-height:104px}
.dock.is-dragging .dk-shelf-wrap{box-shadow:0 0 0 1px var(--line) inset;background:var(--paper-2)}
.dock.is-over .dk-shelf-wrap{box-shadow:0 0 0 2px var(--accent) inset;background:rgba(183,92,42,.05)}

.dk-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;height:104px;padding:16px 16px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.dk-card:hover{border-color:var(--ink);box-shadow:0 6px 18px -10px rgba(26,24,22,.35)}
.dk-card:active{cursor:grabbing}
.dk-card .dk-ic{width:28px;height:28px;color:var(--accent)}
.dk-card .dk-ic svg{width:28px;height:28px}
.dk-card .dk-nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;word-break:keep-all}
.dk-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--ink-mute);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s ease,background .2s ease,color .2s ease}
.dk-x svg{width:14px;height:14px}
.dk-card:hover .dk-x,.dk-x:focus-visible{opacity:1}
.dk-x:hover{background:var(--paper-2);color:var(--ink)}
@media(hover:none){.dk-x{opacity:1}}

.dk-slot{height:104px;border-radius:14px;border:1.5px dashed var(--accent);background:rgba(183,92,42,.06)}
.dk-empty{grid-column:1/-1;min-height:104px;border-radius:14px;border:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px;color:var(--ink-mute)}
.dk-empty strong{font-weight:600;font-size:14px;color:var(--ink-soft)}
.dk-empty span{font-size:13px}

/* 모든 도구 판 */
.dk-sub{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.dk-sub .lbl{font-size:14px;font-weight:600;color:var(--ink-soft)}
.dk-sub .hint{font-size:13px;font-weight:400;color:var(--ink-mute);margin-left:12px}
@media(max-width:760px){.dk-sub .hint{display:none}}
.dk-fold svg{width:14px;height:14px;transition:transform .2s ease;vertical-align:-2px}
.dock.is-folded .dk-fold svg{transform:rotate(-90deg)}
.dock.is-folded .dk-palette{display:none}

.dk-palette{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px}
@media(max-width:540px){.dk-palette{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dk-tile{position:relative;min-width:0;display:flex;align-items:center;height:48px;border-radius:10px;border:1px solid var(--line);background:var(--paper);transition:border-color .2s ease,background .2s ease,opacity .2s ease}
.dk-tile:hover{border-color:var(--ink-soft);background:#fff}
.dk-tile a{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:10px;padding:0 6px 0 14px;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.dk-tile .dk-ic{flex:none;width:18px;height:18px;color:var(--ink-soft)}
.dk-tile .dk-ic svg{width:18px;height:18px}
.dk-tile .dk-nm{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-pin{flex:none;width:32px;height:32px;margin-right:8px;border-radius:8px;border:0;background:transparent;color:var(--ink-mute);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease}
.dk-pin svg{width:15px;height:15px}
.dk-pin:hover{background:var(--paper-2);color:var(--ink)}
/* 이미 위에 올린 도구 = 점선 (스케치의 도구 3) */
.dk-tile.is-on{border-style:dashed;background:transparent}
.dk-tile.is-on .dk-nm,.dk-tile.is-on .dk-ic{opacity:.5}
.dk-tile.is-on .dk-pin{color:var(--accent)}
.dk-tile.is-src{opacity:.35}
@media(max-width:540px){.dk-tile{height:52px}.dk-tile a{padding-left:12px;gap:8px}.dk-tile .dk-nm{font-size:13px}.dk-pin{margin-right:4px}}

/* 끌기 유령 */
.dk-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--ink);box-shadow:0 18px 40px -14px rgba(26,24,22,.45);color:var(--ink);min-height:48px;transition:opacity .15s ease,border-color .15s ease}
.dk-ghost .dk-ic{width:22px;height:22px;color:var(--accent)}
.dk-ghost .dk-ic svg{width:22px;height:22px}
.dk-ghost .dk-nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-ghost-hint{display:none;font-size:11.5px;color:#b3261e}
.dk-ghost.is-remove{opacity:.75;border-color:#b3261e}
.dk-ghost.is-remove .dk-ghost-hint{display:block}
body.dk-dragging,body.dk-dragging *{cursor:grabbing!important;user-select:none!important}

/* 우클릭 메뉴 */
.dk-menu{position:fixed;z-index:10000;min-width:180px;padding:6px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px -12px rgba(26,24,22,.35);font-family:var(--sans)}
.dk-menu button{display:block;width:100%;text-align:left;height:34px;padding:0 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.dk-menu button:hover:not([disabled]),.dk-menu button:focus-visible{background:var(--paper-2);outline:none}
.dk-menu button[disabled]{color:var(--ink-mute);opacity:.5;cursor:default}
.dk-menu button.danger{color:#b3261e}
.dk-menu-sep{height:1px;margin:5px 6px;background:var(--line-soft)}

@media(prefers-reduced-motion:reduce){.dk-card,.dk-tile,.dk-status::before{transition:none}}
@media(max-width:540px){
  .dk-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:84px}
  .dk-card,.dk-slot,.dk-empty{height:auto;min-height:84px}
  .dk-card{padding:12px 12px 11px;gap:12px}
  .dk-card .dk-ic,.dk-card .dk-ic svg{width:22px;height:22px}
  .dk-card .dk-nm{font-size:13.5px;padding-right:4px}
  .dk-x{top:4px;right:4px}
}
@media(max-width:540px){
  .dk-tile{height:auto;min-height:52px}
  .dk-tile a{padding-top:8px;padding-bottom:8px}
  .dk-tile .dk-nm{white-space:normal;word-break:keep-all;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* 점토 아이콘 시험 (dev, section data-icons="clay") — 흰 배경 이미지를 multiply로 카드 바탕에 녹임 */
.dock[data-icons="clay"] .dk-card{height:auto;min-height:132px;padding-top:12px}
.dk-art{display:block;width:56px;height:56px;margin-left:-6px}
.dk-art img{width:56px;height:56px;display:block;mix-blend-mode:multiply;pointer-events:none;-webkit-user-drag:none;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.dk-card:hover .dk-art img{transform:translateY(-2px) rotate(-3deg)}
.dock[data-icons="clay"] .dk-slot{height:132px}
.dk-cmp{font-size:12px;color:var(--ink-mute);display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px}
.dk-cmp a{padding:3px 10px;border-radius:999px}
.dk-cmp a.on{background:var(--ink);color:var(--paper)}
@media(max-width:540px){
  .dock[data-icons="clay"] .dk-card{min-height:112px}
  .dk-art,.dk-art img{width:44px;height:44px}
  .dock[data-icons="clay"] .dk-slot{height:112px}
}

/* 레터프레스 시험 (dev, data-icons="press") — 종이 타일 그대로 (multiply 없이), 눌린 면이 보이도록 64px */
.dock[data-icons="press"] .dk-card{height:auto;min-height:140px;padding-top:12px}
.dock[data-icons="press"] .dk-art{width:64px;height:64px;margin-left:0;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line-soft)}
.dock[data-icons="press"] .dk-art img{width:64px;height:64px;mix-blend-mode:normal}
.dock[data-icons="press"] .dk-card:hover .dk-art img{transform:scale(1.06)}
.dock[data-icons="press"] .dk-slot{height:140px}
@media(max-width:540px){
  .dock[data-icons="press"] .dk-card{min-height:118px}
  .dock[data-icons="press"] .dk-art,.dock[data-icons="press"] .dk-art img{width:52px;height:52px}
  .dock[data-icons="press"] .dk-slot{height:118px}
}
/* 레터프레스 카드 = 같은 종이 (2026-10-06 대장님 "흰 배경에도 같은 종이 재질") — 생성 시트의 빈 종이를 톤 맞춰 잘라 씀.
   아이콘 조각은 테두리 없이 가장자리를 흐려 카드 종이에 바로 찍힌 것처럼 */
.dock[data-icons="press"] .dk-card{background:#e8ddd0 url(/assets/home-dock-icons/press/paper-card.webp?v=1) center/cover no-repeat;border-color:rgba(26,24,22,.10)}
.dock[data-icons="press"] .dk-card:hover{border-color:rgba(26,24,22,.45)}
.dock[data-icons="press"] .dk-art{border-radius:0;box-shadow:none;overflow:visible;margin:-6px 0 0 -10px;width:76px;height:76px}
.dock[data-icons="press"] .dk-art img{width:76px;height:76px;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.dock[data-icons="press"] .dk-card:hover .dk-art img{transform:none}
.dock[data-icons="press"] .dk-x:hover{background:rgba(26,24,22,.07)}
@media(max-width:540px){
  .dock[data-icons="press"] .dk-art,.dock[data-icons="press"] .dk-art img{width:60px;height:60px}
}