/* 툴스 첫 화면: 밝은 타공판 전체에 간판·카피·분류 태그·도구 자석 메모가 걸리고, 공구 그림은 빈자리 인테리어 */
/* 시안 3: 화면 전체가 밝은 타공판. 간판(타이틀)·종이 띠(카피)·태그(분류)·여러 모양의 도구 버튼과 공구가 모두 판에 걸림 */
:root {
  --board: #f6f5f1;
  --hole: rgba(70, 76, 84, .13);
  --paper: #fffdf8;
  --ink: #26221d;
  --ink-soft: #6a6155;
  --line: #ddd3c2;
  --accent: #d1981b;
  --wood: #d7b98c; --wood-d: #b8955f; --kraft: #d9bf93;
  --chalk: #2f3430; --metal: #c3beb4; --metal-d: #8f897e; --grip: #c8643f; --bristle: #4a3f33; --blue: #5f7f8f;
  --sh: drop-shadow(3px 6px 6px rgba(40, 40, 40, .16));
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Nanum Pen Script", var(--f-body);
  --grid: 26px;
  --wall: var(--board);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --board: #23252a; --hole: rgba(0, 0, 0, .55); --paper: #f3efe6; --ink: #26221d; --ink-soft: #6a6155; --line: #ddd3c2;
    --wood: #b99a6c; --wood-d: #93744a; --kraft: #c4a87c; --chalk: #1a1d1b; --sh: drop-shadow(3px 7px 7px rgba(0,0,0,.45)); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --board: #23252a; --hole: rgba(0, 0, 0, .55); --paper: #f3efe6; --ink: #26221d; --ink-soft: #6a6155; --line: #ddd3c2;
  --wood: #b99a6c; --wood-d: #93744a; --kraft: #c4a87c; --chalk: #1a1d1b; --sh: drop-shadow(3px 7px 7px rgba(0,0,0,.45)); color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
  background-color: var(--board);
  background-image: radial-gradient(circle, var(--hole) 0 2.8px, transparent 3.4px);
  background-size: var(--grid) var(--grid); background-position: calc(50% + 13px) 13px;
}
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 쇠고리 */
.peg { position: absolute; top: -16px; left: 50%; width: 12px; height: 26px; margin-left: -6px; pointer-events: none; z-index: 3; }
.peg::before { content: ""; position: absolute; left: 1px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: rgba(40, 40, 40, .35); }
.peg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 23px; border-radius: 3px; background: linear-gradient(90deg, #7c7a75, #f0eeea 45%, #bdb9b1 70%, #77746e); box-shadow: 2px 3px 3px rgba(0,0,0,.2); }
.peg.l { left: 18%; } .peg.r { left: 82%; }

/* 위: 간판 + 검색 + 카피 */
.top { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'sign copy find'; align-items: center; gap: 18px 28px; padding-top: 44px; }
.sign-board { grid-area: sign; } .copy { grid-area: copy; } .find { grid-area: find; position: relative; display: flex; justify-content: flex-end; }
.find-btn { display: none; }
.sign-board { position: relative; display: inline-block; text-decoration: none; padding: 18px 30px 16px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 40%), repeating-linear-gradient(90deg, rgba(120,80,30,.06) 0 2px, transparent 2px 9px), var(--wood);
  border: 1px solid var(--wood-d); filter: var(--sh); }
.brand { font-size: 30px; line-height: 1; color: #2b2116; display: flex; align-items: baseline; white-space: nowrap; }
.b-thin { font-weight: 200; letter-spacing: -.5px; } .b-bold { font-weight: 700; letter-spacing: .5px; }
.copy { position: relative; justify-self: start; margin: 0; background: var(--paper); padding: 10px 16px; font-size: 14px; color: var(--ink-soft); filter: var(--sh); transform: rotate(-.6deg); }
.copy::before { content: ""; position: absolute; top: -9px; left: 16px; width: 60px; height: 18px; background: rgba(230, 214, 160, .75); transform: rotate(-5deg); }
br.m { display: none; }
.search { position: relative; display: flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; width: 260px; filter: var(--sh); }
.search input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; width: 100%; min-width: 0; outline: none; }
.search svg { flex: none; }

/* 분류: 줄에 걸린 크래프트 태그 */
.drawers { display: flex; gap: 6px 4px; flex-wrap: wrap; align-items: flex-end; padding: 34px 0 10px; }
.drawers .w { border: 0; background: var(--paper); cursor: pointer; font-size: 14px; color: var(--ink-soft); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.drawers .w[aria-pressed="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--ink); }
.drawers .w .n { font-family: var(--f-mono); font-size: 11px; opacity: .7; margin-left: 3px; }
.drawers .t { margin-right: 10px; }
.drawers .t button { position: relative; border: 0; cursor: pointer; background: var(--kraft); color: #3a2c18; font-weight: 500; font-size: 14px; padding: 14px 16px 8px 14px; white-space: nowrap;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px); filter: none; }
.drawers .t { position: relative; filter: var(--sh); }
.drawers .t::before { content: ""; position: absolute; top: 6px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--board); z-index: 2; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.25); }
.drawers .t button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.drawers .t .n { font-family: var(--f-mono); font-size: 12px; opacity: .7; margin-left: 4px; }

/* 판: 여러 모양 도구 + 공구 */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 46px 30px; padding-top: 40px; align-items: start; }
.a { position: relative; grid-column: span 3; margin-top: var(--dy, 0px); cursor: pointer; border: 0; background: none; padding: 0; text-align: left; min-width: 0; transition: transform .25s ease; transform-origin: 50% 0; }
.a:hover, .a:focus-visible { transform: rotate(-1.2deg) translateY(-2px); }
.a h3 { text-wrap: balance; word-break: keep-all; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.a p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.a .meta { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: #4a4339; letter-spacing: .2px; }
.badge { align-self: flex-start; display: inline-block; margin-bottom: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px; background: var(--accent); color: #2a1f08; padding: 1px 8px; border-radius: 2px; }
.face { position: relative; filter: var(--sh); }

/* 도구 버튼: 모두 같은 자석 메모지 */
.mag .face { display: flex; flex-direction: column; min-height: 210px; background: var(--paper); padding: 34px 20px 18px; border-radius: 2px; transform: rotate(var(--rt, 0deg)); }
.mag .face::after { content: ""; position: absolute; inset: auto 0 0 0; height: 10px; background: linear-gradient(transparent, rgba(0,0,0,.03)); }
.magnet { position: absolute; top: -10px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55) 0 3px, transparent 7px), var(--mg); box-shadow: 0 3px 4px rgba(0,0,0,.28), inset 0 -2px 3px rgba(0,0,0,.2); }
.mag .ic { width: 36px; height: 36px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.mag .meta { margin-top: auto !important; padding-top: 8px; border-top: 1px dashed var(--line); }
.mag:has(.badge) .face { background: #fbefb8; }
.slot { grid-column: span var(--sp, 3); display: flex; justify-content: space-around; align-items: flex-start; gap: 8px; margin-top: -14px; min-width: 0; }
.tiles-row { display: flex; gap: 3px; margin-top: 20px; align-self: flex-start; }
.tiles-row b { width: 26px; height: 26px; display: grid; place-items: center; background: #efe2c6; border: 1px solid #cdb68e; border-radius: 3px; font: 600 14px var(--f-mono); color: #3a3125; filter: var(--sh); }
.tiles-row b:nth-child(2) { transform: rotate(-4deg); } .tiles-row b:nth-child(4) { transform: rotate(3deg); }
.rack-bar { position: relative; flex: 1; display: flex; justify-content: space-around; margin-top: 30px; padding: 0 10px; }
.rack-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 16px; background: #4c5560; border-radius: 3px; box-shadow: 0 6px 8px -4px rgba(0,0,0,.3); z-index: 2; }
.rack-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 14px; background: linear-gradient(#5d6772, #4c5560); border-radius: 3px 3px 0 0; z-index: 0; }
.sdi { position: relative; z-index: 1; } .sdi svg { display: block; height: var(--h); width: auto; overflow: visible; filter: var(--sh); }
.sdi svg .o { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 공구(장식) */
.d { margin-top: var(--dy, 0px); position: relative; display: flex; justify-content: center; pointer-events: none; padding-top: 12px; }
.d svg, .d img { height: var(--h, 190px); width: auto; overflow: visible; filter: var(--sh); }
.d svg .o { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.d.wide { width: var(--w); } .d.wide svg { width: 100%; height: auto; max-width: var(--w, 160px); }
.d img { display: block; user-select: none; }
.shelf { margin-top: var(--dy, 0px); position: relative; pointer-events: none; width: 180px; }
.shelf .on { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 0 12px; }
.shelf .on img { display: block; height: 104px; width: auto; filter: var(--sh); }
.shelf .plank { display: block; height: 12px; border-radius: 3px; background: #e1be7b; filter: var(--sh); position: relative; }
.shelf .plank::before, .shelf .plank::after { content: ""; position: absolute; top: 12px; width: 10px; height: 26px; background: #c9a462; border-radius: 0 0 3px 3px; }
.shelf .plank::before { left: 26px; } .shelf .plank::after { right: 26px; }
@keyframes sway { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
.empty { grid-column: 1 / -1; justify-self: center; background: var(--paper); padding: 16px 20px; filter: var(--sh); color: var(--ink-soft); }

.ad { position: relative; margin-top: 64px; background: var(--paper); border: 1px dashed var(--ink-soft); display: grid; place-items: center; min-height: 100px; color: var(--ink-soft); font-size: 12px; text-align: center; padding: 12px; filter: var(--sh); }
.ad b { display: block; font-family: var(--f-mono); font-weight: 500; letter-spacing: 1px; }
.note { margin: 18px 0 0; font-size: 12px; color: var(--ink-soft); background: var(--paper); display: inline-block; padding: 4px 10px; }
footer { margin-top: 54px; background: var(--paper); border-top: 1px solid var(--line); }
.foot { padding-block: 18px 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-soft); align-items: center; }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot .by { margin-left: auto; font-family: var(--f-mono); font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 4px; font-size: 14px; transition: .2s; pointer-events: none; max-width: calc(100% - 32px); z-index: 20; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) { .top { grid-template-areas: 'sign . find' 'copy copy copy'; } .copy { margin-left: 18px; } }
@media (max-width: 960px) { .board { grid-template-columns: repeat(6, minmax(0, 1fr)); } .a { grid-column: span 3; } .slot { grid-column: span 3; } }
@media (max-width: 720px) { .d.hide-m { display: none; } }
@media (max-width: 720px) {
  .top { grid-template-columns: auto 1fr; grid-template-areas: 'sign find' 'copy copy'; gap: 14px 12px; padding-top: 34px; }
  .find-btn { display: grid; place-items: center; position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; filter: var(--sh); }
  .find-btn .peg { top: -14px; }
  .search { display: none; position: absolute; top: calc(100% + 12px); right: 0; width: calc(100vw - 32px); z-index: 5; }
  .find.open .search { display: flex; } .search .peg { display: none; }
  .sign-board { justify-self: start; padding: 14px 22px 12px; } .brand { font-size: 25px; }
  .copy { font-size: 13px; margin-left: 10px; }
  .copy br.m { display: inline; }
  .drawers { padding-top: 32px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .drawers .t { margin-right: 6px; } .drawers .w { padding: 5px 10px; }
  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 14px; }
  .a { grid-column: span 2; } .slot { grid-column: span 2; }
  .slot .tiles-row { flex-direction: column; }
  .tiles-row { display: flex; gap: 3px; margin-top: 20px; align-self: flex-start; }
.tiles-row b { width: 26px; height: 26px; display: grid; place-items: center; background: #efe2c6; border: 1px solid #cdb68e; border-radius: 3px; font: 600 14px var(--f-mono); color: #3a3125; filter: var(--sh); }
.tiles-row b:nth-child(2) { transform: rotate(-4deg); } .tiles-row b:nth-child(4) { transform: rotate(3deg); }
.rack-bar { transform: scale(.8); transform-origin: top center; }
  .a { margin-top: calc(var(--dy) / 3); }
  .mag .face { padding: 30px 14px 14px; min-height: 0; }
  .d svg, .d img { height: calc(var(--h, 190px) * .62); }
  .shelf { width: 150px; } .shelf .on img { height: 76px; }
  .d.wide { width: var(--w); } .d.wide svg { max-width: calc(var(--w, 160px) * .7); }
}
@media (prefers-reduced-motion: reduce) { .d svg, .d img { animation: none; } .a, .toast { transition: none; } .a:hover { transform: none; } }
.foot-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.foot-btn:hover { text-decoration: underline; }
a.mag { display: block; text-decoration: none; color: inherit; }
/* 상태 불빛: 열린 도구는 OPEN·초록, 아직인 도구는 작업중·회색(점멸 없음) */
.st { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; line-height: 1; color: #8a8378; }
.st.on { font-family: var(--f-mono); letter-spacing: .8px; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #b9b4ab; box-shadow: inset 0 -1px 1px rgba(0,0,0,.18); }
.st.on { color: #2f7d4a; }
.st.on::before { background: #3fbf68; box-shadow: 0 0 0 3px rgba(63,191,104,.18), inset 0 -1px 1px rgba(0,0,0,.15); }
.mag:not(a) .ic { opacity: .45; }
.mag:not(a) .magnet { --mg: #a9a59e; }
/* 열린 도구 메모만 자석을 축으로 살짝 흔들림(나머지 메모·공구는 고정) */
a.mag .face { transform-origin: 50% 0; animation: swing 3.2s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(calc(var(--rt, 0deg) - 1.6deg)); } 50% { transform: rotate(calc(var(--rt, 0deg) + 1.6deg)); } }
@media (prefers-reduced-motion: reduce) { a.mag .face { animation: none; } }
/* 열린 도구의 실제 앱 아이콘: 메모 안 오른쪽 빈자리(툴스 선 아이콘은 그대로) */
.mag .ttl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mag .app-ic { flex: none; width: 44px; height: 44px; margin: -6px -4px -6px 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
/* 작업중 메모에 커서를 대면 툴팁(폰은 누르면 토스트) */
@media (hover: hover) {
  .mag[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%) translateY(4px); background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 500; line-height: 1; padding: 7px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease .25s, transform .15s ease .25s; z-index: 5; }
  .mag[data-tip]:hover::after { opacity: 1; transform: translate(-50%, -100%); }
}