/* ═══════════════════════════════════════════════════════════════
   본거지 = 제작대의 쉬는 상태 (목업 project plan/mockups/261009_hub_bench) — craft.js · base.js
   한 화면에 고정, 스크롤 없음. 중심은 그릇 하나. 원소색은 원소에만, 크롬은 백금(--gold* = 플테 백금).
   새 소식만 빛 원소 색(--hb-light)으로 빛난다. 흐림은 "지금 안 됨" 한 가지 뜻.
   ═══════════════════════════════════════════════════════════════ */
.pt-screen.pt-screen-home { max-width: none; padding: 0; --hb-top: var(--hdr-h, 52px); }   /* .craft가 --hdr-h를 덮으므로 바깥에서 받아 둔다 */
body:has(.hb) { overflow: hidden; }
.hb [hidden] { display: none !important; }

.hb {
  --hb-light: 210,189,114;
  --t-state: .5s; --t-move: 1.8s; --ease-move: cubic-bezier(.4,.05,.2,1);   /* 그릇으로 다가가는 줌 — 천천히, 부드럽게 출발 */
  /* 제작대가 떠오른다 — 무게를 모으듯 살짝 가라앉았다가 천천히 올라 길게 멈춘다. 내려앉을 때도 서두르지 않는다 */
  --t-lift: 1.7s; --ease-lift: cubic-bezier(.62,-.16,.24,1);
  --t-fall: 1.2s; --ease-fall: cubic-bezier(.45,0,.3,1);
  --dock-h: 92px;
  position: fixed; top: var(--hb-top); left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; padding-bottom: var(--dock-h);
  overflow: clip; container: hb / size;   /* clip — 밀려난 물건 때문에 장면이 스크롤되지 않게 */
  background:
    radial-gradient(ellipse 46% 52% at 50% 50%, rgba(225,212,188,.045), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55));
}
.hb.lite { --t-state: .12s; --t-move: .12s; --t-lift: .12s; --t-fall: .12s; }

/* 맨 위 — 이어할 전투 · 듀얼 · 설문 띠, 궁리 중 띠 */
.hb-top { position: relative; z-index: 20; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 64px 0; transition: opacity .35s; }
.hb-top:not(:has(.hb-banner, .inq-strip)) { padding: 0; }
.hb-banners { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hb-banners:empty { display: none; }
.hb-banner, .hb-top .pt-banner { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 4px 14px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(15,14,12,.85); font-size: 12.5px; color: var(--t-1); }
.hb-top .pt-banner .btn { padding: 3px 12px; font-size: 12px; }
.hb-banner-x { background: none; border: 0; color: var(--t-3); font-size: 12px; cursor: pointer; padding: 4px; }
.hb-top .inq-strip-slot { width: min(560px, 100%); }
.hb-top .inq-strip-slot:empty { display: none; }
/* 데스크톱 — 왼쪽 위 구석에 띄운다(오른쪽 위 도구 버튼과 짝). 줄을 차지하지 않아 무대 = .hb 내용 높이 전체 */
@media (min-width: 641px) {
  .hb-top, .hb-top:not(:has(.hb-banner, .inq-strip)) { position: absolute; top: 10px; left: 18px; width: max(240px, min(420px, 50% - 230px));
    align-items: flex-start; padding: 0; }
  .hb-top .hb-banners { justify-content: flex-start; }
}
.hb-tools { position: absolute; z-index: 25; top: 10px; right: 14px; display: flex; gap: 6px; transition: opacity .35s; }

.hb-stage { position: relative; flex: 1; min-height: 0; container: st / size;
  transition: opacity .35s ease, scale .45s cubic-bezier(.2,.7,.2,1), filter .35s; }
.hb:not([data-room="none"]) :is(.hb-stage, .hb-top, .hb-tools, .hb-micro) { opacity: .08; scale: .965; pointer-events: none; }
/* 방이 열린 동안 뒤 장면은 멈춘다 — 흐림 아래에서 구슬 · 둘레가 계속 돌면 매 프레임 장면 전체를 다시 흐리게 칠한다 (iPad가 끊긴다) */
.hb:not([data-room="none"]) :is(.hb-stage, .hb-top, .hb-tools, .hb-micro) :is(*, ::before, ::after) { animation-play-state: paused !important; }
/* 흐림은 마우스 기기만 — 터치 태블릿은 큰 화면 전체를 흐리는 값이 비싸서, 투명도(.08)만으로 물러나게 둔다 */
@media (hover: hover) and (pointer: fine) {
  .hb:not([data-room="none"]) :is(.hb-stage, .hb-top, .hb-tools, .hb-micro) { filter: blur(2px); }
}
.hb-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: rgba(225,212,188,.11); transition: opacity var(--t-state) ease; }
.hb-lines line { stroke: currentColor; stroke-width: .7; stroke-dasharray: 1 4; }
.hb-lines circle { fill: currentColor; }
.hb[data-state="craft"] .hb-lines { opacity: 0; }

/* ─── 둘레 물건 — 그릇과의 위치로 놓이고, 2~11도 기울고, 겹친다 ─── */
.hb-obj {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 10px; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit;
  --px: 0px; --py: 0px;
  transition: opacity var(--t-move) ease, filter var(--t-move) ease, transform var(--t-move) var(--ease-move);
}
/* 제작 상태 — 둘레는 그릇에서 먼 쪽으로 물러나며 작아지고 흐려진다. 그릇은 다가온다(줌) */
.hb[data-state="craft"] .hb-obj { opacity: .05; pointer-events: none; filter: saturate(.4) blur(2.5px);
  transform: translate(-50%, -50%) translate(var(--px), var(--py)) scale(.82); }
.hb-obj:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.hb-label { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 5px; text-indent: 5px; color: var(--t-2); white-space: nowrap; transition: color .2s; }
@media (hover: hover) { .hb-obj:hover .hb-label { color: var(--t-1); } }

.hb-deck { --x: calc(50% - min(410px, 33cqw)); --y: 52%; --px: -110px; --py: 10px; }
.hb-shelf { --x: calc(50% + min(400px, 32cqw)); --y: 30%; --px: 110px; --py: -70px; }
.hb-news { --x: calc(50% + min(350px, 28cqw)); --y: 74%; --px: 100px; --py: 70px; }

/* 카드 · 덱 — 최근 만든 카드 세 장(공용 카드 컴포넌트 축소) + 덱 15칸 막대 */
.hb-fan { --fs: .74; position: relative; display: block; width: 220px; height: 150px; }
.fc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(var(--fr)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fc-s { display: block; transform: scale(var(--fs)); }
.fc .card-comp { box-shadow: 0 14px 30px rgba(0,0,0,.55) !important; }
.fc-hole { display: block; width: 130px; aspect-ratio: 5 / 7; border: 1px dashed var(--line-strong); border-radius: 6px; background: rgba(225,212,188,.015); }
.fc.incoming { visibility: hidden; }
@media (hover: hover) {
  .hb-deck:hover .fc[data-fc="0"] { transform: translate(-50%, -50%) translate(calc(var(--fx) + 14px), calc(var(--fy) - 6px)) rotate(calc(var(--fr) + 3deg)); }
  .hb-deck:hover .fc[data-fc="2"] { transform: translate(-50%, -50%) translate(calc(var(--fx) - 12px), calc(var(--fy) - 2px)) rotate(calc(var(--fr) - 2deg)); }
}
.fc.fresh .card-comp { animation: hb-glint 1.4s .15s ease-out; }
@keyframes hb-glint { 0% { box-shadow: 0 0 0 0 rgba(236,235,230,0), 0 14px 30px rgba(0,0,0,.55); }
  30% { box-shadow: 0 0 0 1px rgba(236,235,230,.7), 0 0 30px rgba(236,235,230,.35); }
  100% { box-shadow: 0 0 0 0 rgba(236,235,230,0), 0 14px 30px rgba(0,0,0,.55); } }
.hb-deckbar { display: flex; gap: 3px; }
.hb-deckbar i { width: 9px; height: 3px; border-radius: 1px; background: rgba(225,212,188,.12); transition: background-color .3s, box-shadow .3s; }
.hb-deckbar i.on { background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), .45); }

/* 쪽지 — 떠 있는 얇은 판. 백금 실선 테, 아주 느린 부유. 제목은 한 줄 (접히면 겹친 쪽지끼리 가린다) */
.hb-slips { --k: 1; position: relative; display: block; width: 240px; height: 150px; }
.hb-news .hb-slips { width: 230px; height: 120px; }
.slip {
  position: absolute; left: 50%; top: 50%; width: 196px; min-height: 54px; padding: 13px 16px 14px;
  display: flex; align-items: flex-start; gap: 4px; text-align: left;
  transform: translate(-50%, -50%) translate(calc(var(--sx) * var(--k)), calc(var(--sy) * var(--k))) rotate(var(--sr));
  background: linear-gradient(168deg, rgba(40,37,32,.97), rgba(21,19,16,.97));
  border: 1px solid rgba(225,212,188,.2); border-radius: 3px;
  box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  animation: hb-bob 8s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.slip-t { min-width: 0; font-family: 'Noto Serif KR', serif; font-size: 13px; line-height: 1.45; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip.inquiry .slip-t, .slip.quiet .slip-t { color: var(--t-2); }
.slip .recipe-seal { flex: none; margin: 6px 6px 0 0; }
.slip.pinned { padding-top: 18px; }
.slip.incoming { visibility: hidden; }
.pin { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #fff, var(--gold-hi) 45%, var(--gold) 90%);
  box-shadow: 0 0 10px rgba(236,235,230,.55), 0 8px 10px rgba(0,0,0,.6); }
@keyframes hb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* 새 소식 — 그 쪽지만 빛 원소 색으로 */
.slip.new { border-color: rgba(var(--hb-light), .55); box-shadow: 0 12px 26px rgba(0,0,0,.55), 0 0 10px rgba(var(--hb-light), .18); }
/* 번지는 빛은 따로 한 겹 — box-shadow를 움직이면 매 프레임 다시 칠하니 그 겹의 투명도만 움직인다 */
.slip.new::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 26px rgba(var(--hb-light), .45); opacity: 0; animation: hb-news 2.6s ease-in-out infinite; }
@keyframes hb-news { 50% { opacity: 1; } }
/* 소식에서 서가로 옮겨 가는 쪽지 */
.hb-flyslip { position: absolute; left: 0; top: 0; z-index: 55; width: 0; height: 0; pointer-events: none; }
.hb-flyslip .slip { animation: none; box-shadow: 0 22px 40px rgba(0,0,0,.6), 0 0 18px rgba(236,235,230,.12); }

/* ─── 그릇(제작대) — 장면의 유일한 중심 ─── */
/* 가운데 맞춤은 translate 속성으로 — transform에 두면 줌(scale 속성)이 그 이동까지 키워 왼쪽 위로 밀린다.
   발치는 진 아래에 따로 띄운다 — 제작대 상자 = 진 하나라서 진의 가운데가 무대 정가운데에 그대로 있다 */
.hb-bench { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 5;
  transition: top var(--t-fall) var(--ease-fall), scale var(--t-move) var(--ease-move); }
.hb[data-state="craft"] .hb-bench { scale: 1.1; }
/* 제작 상태 — 그릇이 떠올라 그 자리에 머문다. 서랍이 열리고 닫혀도 움직이지 않는다(아래 노드가 서랍에 가리지 않을 높이).
   낮은 화면에서는 진 + 발치(힌트 · 받침, 133px)가 무대 안에 들도록 줌(--k)을 줄이고, 위아래 어느 쪽도 잘리지 않는 만큼만 오른다.
   --s = 진 크기 (아래 .hb .hb-bench .jin과 같은 식). --st-w · --st-h = 무대 폭 · 높이(단위 없는 수, craft.js watchStage) —
   길이끼리 나누는 tan(atan2())는 iPad Safari가 잘못 셈해 쓰지 않는다 */
@media (min-width: 641px) {
  .hb[data-state="craft"] .hb-bench { top: max(calc(50% - 80px), calc(min(400px, 100cqh - 96px, 46cqw) * .55 + 8px));
    transition: top var(--t-lift) var(--ease-lift), scale var(--t-move) var(--ease-move); }
  @supports (scale: calc(1 / 2)) {
    /* 높은 무대 — 진은 400px에서 멈추지만(노드 · 그릇 · 글자 배치가 그 크기에 맞춰져 있다), 무대가 그보다 크면 제작대 전체를
       한 비율(--grow)로 키운다. 무대 높이의 44% · 폭의 46%까지. 보통 화면(높이 ~900)은 1이라 그대로다 (화면 맞춤 261017_screen_fit) */
    .hb-bench { --s: min(400px, 100cqh - 96px, 46cqw); --grow: max(1, min(var(--st-h, 800) * .44, var(--st-w, 1200) * .46) / 400); scale: var(--grow); }
    .hb[data-state="craft"] .hb-bench {
      --k: clamp(.8, (var(--st-h, 800) - 16) / (min(400, var(--st-h, 800) - 96, .46 * var(--st-w, 1200)) + 133), 1.1 * var(--grow));
      scale: var(--k);
      top: clamp(calc(var(--k) * var(--s) / 2 + 8px), calc(50% - 80px), calc(100cqh - 8px - var(--k) * (var(--s) / 2 + 133px)));
    }
  }
}
.hb-bench::before { content: ''; position: absolute; left: 50%; top: 46%; width: 760px; height: 760px; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(236,232,222,.13), rgba(225,212,188,.04) 34%, transparent 60%); opacity: .3; transition: opacity var(--t-move) ease; }
.hb[data-state="craft"] .hb-bench::before { opacity: 1; animation: hb-pool 6s ease-in-out infinite; }
@keyframes hb-pool { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
/* 장면 가장자리가 어두워진다 — 그릇 밖이 비워진 느낌 */
.hb-stage::after { content: ''; position: absolute; inset: min(-10%, -100px) -10%; z-index: 4;   /* 낮은 무대에서도 위 띠(배너)까지 덮는다 */ pointer-events: none; opacity: 0; transition: opacity var(--t-move) ease;
  background: radial-gradient(ellipse 34% 44% at 50% 50%, transparent 40%, rgba(5,4,3,.55) 75%, rgba(5,4,3,.8)); }
.hb[data-state="craft"] .hb-stage::after { opacity: 1; }
/* 순서 — 둘레의 호와 화살표가 넣는 순서를 말한다. 제작 상태에서 조금 더 밝힌다 (빛을 돌리면 순서와 헷갈린다) */
.hb[data-state="craft"] .jin-lines { color: rgba(225,212,188,.5); }
.hb[data-state="craft"] .jin-guide { stroke: rgba(225,212,188,.16); }
.hb .hb-bench .jin { --size: min(400px, calc(100cqh - 96px), 46cqw); }
.hb-bench-foot { position: absolute; top: 100%; left: 50%; translate: -50% 0; height: 40px; width: 260px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; transition: margin-top var(--t-move) var(--ease-move); }
.hb[data-state="craft"] .hb-bench-foot { margin-top: 30px; }   /* 아래 꼭짓점의 글자가 진 밖으로 나온다 */
.hb-bench-foot > * { position: absolute; transition: opacity var(--t-state) ease; }
.hb-foot-row { top: 0; display: flex; flex-direction: column; align-items: center; gap: 0; }   /* 위에 붙여 아래로만 자란다 — 아래 꼭짓점의 글자와 겹치지 않게 */
.hb-hint { min-height: 1.4em; margin-top: 6px; font-size: 11.5px; letter-spacing: 1px; color: var(--t-3); transition: opacity .3s; }   /* 결합할 수 있을 때만 — 그릇 안에는 글자를 두지 않는다 */
.hb-hint:empty { opacity: 0; }
.hb-hint.dim { opacity: .45; }   /* 한 번 결합한 뒤 — 흐려지고, 세 번 뒤에는 나오지 않는다 */
/* 받침 — 제작 상태에서 카드 · 덱이 그릇 발치로 다가와 옅은 더미가 된다(base.js trayMove). 결합한 카드가 여기로 내려앉고, 누르면 카드 · 덱 방.
   서랍이 열리면 서랍이 덮는다 */
.hb-tray { position: absolute; top: 26px; left: 50%; translate: -50% 0; width: 150px; height: 106px; padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.hb[data-state="craft"] .hb-tray { opacity: 1; pointer-events: auto; }
.hb-tray .tc { position: absolute; left: 50%; top: 0; opacity: calc(.42 - var(--k) * .1); transition: opacity .3s;
  transform: translateX(-50%) translate(calc(var(--k) * -8px), calc(var(--k) * 5px)) rotate(calc(var(--k) * -4deg)); }
.hb-tray .tc .card-comp { width: 66px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.hb-tray .tc.incoming { visibility: hidden; }
@media (hover: hover) { .hb-tray:hover .tc { opacity: calc(.8 - var(--k) * .15); } }
.hb-tray:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
/* 카드 · 덱 부채는 받침이 되어 떠났다 — 제작 상태에서는 제자리에 없다 */
.hb[data-state="craft"] .hb-deck { opacity: 0; transition: opacity .35s ease, filter .35s ease, transform var(--t-move) var(--ease-move); }
/* 그릇을 아래로 끌어 쏟기 — 끄는 동안 그릇이 따라 내려오고, 쏟으면 노드가 아래로 떨어져 사라진다 */
.hb .jin-core.vessel:not(.rest) { touch-action: none; }
[data-jin-host] .jin-bowl { transition: translate .35s cubic-bezier(.3,1.4,.5,1); }
[data-jin-host].spilling .jin-bowl { translate: 0 var(--spill, 0px); transition: none; }
[data-jin-host].spill .jin-node { translate: 0 200px; opacity: 0; transition: translate .38s cubic-bezier(.5,0,.9,.4), opacity .38s ease-in; }
.hb.lite [data-jin-host].spill .jin-node { transition-duration: .09s; }
.hb.bowl-empty .hb-foot-row, .hb[data-state="rest"] .hb-foot-row, .hb[data-state="craft"] .hb-bench-label { opacity: 0; pointer-events: none; }

/* 쉬는 그릇 — 둘레 원이 아주 천천히 돌고 그릇이 숨 쉰다 */
.hb-rest-ring { fill: none; stroke: rgba(225,212,188,.16); stroke-width: .6; stroke-dasharray: .8 5.2; transform-origin: 0 0; animation: hb-turn 90s linear infinite; transition: opacity var(--t-state); }
.hb[data-state="craft"] .hb-rest-ring { opacity: 0; }
@keyframes hb-turn { to { transform: rotate(360deg); } }
.jin-core.vessel.rest::before { animation: hb-breathe 5.5s ease-in-out infinite; }
.jin-core.vessel.rest span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid rgba(var(--gold-rgb), .45); opacity: .7; }
@keyframes hb-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }   /* 빈 그릇 — 테가 천천히 숨 쉰다. filter 대신 투명도로 (모바일 발열) */

/* 노드 — 원소 구슬이 주인공. 노드 상자는 구슬 하나뿐이고, 그 가운데가 진의 점선 원(반지름 73%) 위에 앉는다.
   성 · 출처 · 보유(.hb-lab)는 원 바깥쪽에 붙는다 — 아래로 늘어뜨리면 원의 옆자리에서 순서 호가 글자를 가로지른다 */
@property --a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }   /* 체수가 바뀔 때 노드가 둘레를 따라 미끄러진다 */
/* 구슬 크기(--orb) — 큰 화면은 진 크기에 비례해 키운다(진 400px에서 56px). 낮은 화면 · 폰은 42px 그대로 */
.hb .hb-bench { --orb: 42px; }
@media (min-width: 641px) and (min-height: 760px) {
  .hb .hb-bench { --orb: clamp(42px, var(--s, 400px) * .14, 56px); }
  .hb .jin-src { font-size: 12px; }
  .hb .jin-have { font-size: 11.5px; }
  /* 커진 구슬만큼 아래 노드 글자가 서랍에 닿지 않게 그릇을 조금 더 올린다 (위 제작 상태 자리와 같은 식, 50% - 92px) */
  .hb[data-state="craft"] .hb-bench {
    top: clamp(calc(var(--k, 1.1) * var(--s) / 2 + 8px), calc(50% - 92px), calc(100cqh - 8px - var(--k, 1.1) * (var(--s) / 2 + 133px))); }
}
.hb .jin-node { --r: calc(var(--size) * .365); width: calc(var(--orb) + 10px); padding: 4px; border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.hb .jin-node .jin-orb { margin: 0; width: var(--orb); height: var(--orb); font-size: calc(var(--orb) * .5); }
.hb-lab { --d: calc(var(--orb) / 2 + 10px); position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; line-height: 1.25; pointer-events: none;
  transform: translate(calc(cos(var(--a)) * var(--d) - 50% + cos(var(--a)) * 50%), calc(sin(var(--a)) * var(--d) - 50% + sin(var(--a)) * 50%)); }
.hb .jin-node.ghost { display: none; }
.jin-node.leave { animation: hb-leave .26s ease-in forwards; }   /* 비우기 — 노드가 바깥으로 흩어진다 */
@keyframes hb-leave { to { --r: calc(var(--size) / 2 + 24px); opacity: 0; } }
.lite .jin-node.leave { animation-duration: .09s; }
.lite .jin-node.land { animation-duration: .12s; animation-delay: 0s; }

/* ─── 원소 바 · 서랍 ─── */
.hb:not([data-room="none"]) .craft-dock { translate: 0 110%; opacity: 0; pointer-events: none; }
.hb-dock-sep { width: 1px; align-self: center; height: 28px; margin: 0 4px; background: var(--line-strong); }
.hb .hb-toolb { color: var(--gold-text); }   /* 원소 바 도구(base.js BASE_ICON) — 백금, 원소 몸과 같은 자리 크기 */
.hb .hb-toolb svg { width: 1.65em; height: 1.65em; overflow: visible; }
.hb .hb-toolb.on { color: var(--gold-hi); border-color: var(--gold); background: radial-gradient(circle, rgba(var(--gold-rgb),.16) 0%, transparent 70%); }
/* 궁리 진행 중 — 둘레 빛과 밝은 테가 같은 박자로 숨쉰다. 둘 다 멈춘 그림이고 투명도만 움직인다(fx_performance.md).
   밝은 테는 같은 아이콘을 굵고 흰 선으로 따로 된 SVG에 한 장 더 그린 것(craft.js) — 아래 아이콘을 다시 칠하지 않는다 */
.hb .hb-toolb.live::after { content: ''; position: absolute; top: 50%; left: 50%; width: 125%; height: 125%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(236,235,230,.30) 0%, rgba(236,235,230,.10) 42%, transparent 70%); opacity: .1; pointer-events: none;
  animation: hb-tool-live 3.6s ease-in-out infinite; will-change: opacity; }
@keyframes hb-tool-live { 50% { opacity: 1; } }
.hb .hb-toolb .hb-tool-lit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fffdf6; opacity: 0; pointer-events: none;
  animation: hb-tool-lit 3.6s ease-in-out infinite; will-change: opacity; }
.hb .hb-toolb .hb-tool-lit path { stroke-width: 2.4px; }
@keyframes hb-tool-lit { 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .hb .hb-toolb.live::after { animation: none; opacity: .6; } .hb .hb-toolb .hb-tool-lit { animation: none; opacity: .35; } }
.reduce-motion .hb .hb-toolb.live::after { animation: none; opacity: .6; }
.reduce-motion .hb .hb-toolb .hb-tool-lit { animation: none; opacity: .35; }
.hb.lite .hb-toolb.live::after { animation: none; opacity: .6; }
.hb.lite .hb-toolb .hb-tool-lit { animation: none; opacity: .35; }
.hb .craft-elb.locked { cursor: not-allowed; }   /* 잠긴 대립 원소 — 플테 그대로 흐림(.craft-elb:disabled) */
.hb .craft-drawer { position: absolute; }
/* 서랍은 제작대가 떠오르기 시작한 뒤에 아래에서 천천히 밀려 나온다 */
.hb .craft-drawer.fresh { animation: hb-drawer .7s cubic-bezier(.3,.5,.2,1) .18s backwards; }
@keyframes hb-drawer { from { opacity: 0; translate: -50% 22px; } }
.hb.lite .craft-drawer.fresh { animation-duration: .12s; animation-delay: 0s; }
/* 서랍 위 자리 띠 — 채울 자리를 고른다 (진에는 ＋를 두지 않는다) */
.hb-strip { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.hb-chip { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  color: var(--c, var(--t-2)); background: none; border: 1px solid transparent; cursor: pointer; position: relative; }
.hb-chip::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.hb-chip.active { border-color: var(--gold); }
.hb-chip.plus { border: 1px dashed rgba(225,212,188,.25); font-size: 16px; }
.hb-chip.plus.active { border: 1px solid var(--gold); color: var(--t-1); }
.hb-chip-arrow { width: 10px; height: 1px; background: rgba(225,212,188,.35); position: relative; }
.hb-chip-arrow::after { content: ''; position: absolute; right: -1px; top: -2px; border: 2.5px solid transparent; border-left: 4px solid rgba(225,212,188,.35); border-right: 0; }
.hb-chip-arrow.ghost { opacity: .4; }
/* 레서피 · 정제 · 궁리 서랍 — 원소 서랍보다 넓다. 넘치면 서랍 안에서만 스크롤 */
/* 100cqh = .hb 내용 상자 — 원소 바 몫(padding-bottom)은 이미 빠져 있다. 위쪽 띠 · 도구 버튼만 비켜 둔다 */
.hb-tdrawer { width: 520px; max-height: calc(100cqh - 60px); overflow-y: auto; padding: 12px 14px 12px; }
.hb-rdrawer { width: 560px; }
.hb-rdrawer .craft-h { margin-bottom: 6px; }
.hb-rdrawer .craft-hint { margin: 0 0 8px; }
.hb .hb-rdrawer .recipe-grid.craft-recipes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-fdrawer { width: 620px; }
.hb-fdrawer .craft-store { margin: 0 0 6px; border-top: 0; }
.hb-fdrawer .craft-refine { border-top: 1px solid var(--line); padding-top: 10px; }
.hb-qdrawer .inq-panel { margin: 0; border-top: 0; padding-top: 6px; }
/* 낮은 화면 — 원소 바를 얇게(92 → 50px), 서랍은 칸 · 머리 줄을 낮게. 정제소를 줄여 정제 버튼까지 서랍 안에 든다 */
@media (min-width: 641px) and (max-height: 700px) {
  .hb { --dock-h: 50px; }
  .hb .craft-dock { padding: 5px 14px calc(7px + env(safe-area-inset-bottom)); }
  .hb .dock-els { gap: 12px; }
  .hb .dock-els .craft-elb { width: 36px; height: 36px; font-size: 20px; }
  .hb-dock-sep { height: 18px; }
  .hb .craft-drawer { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  .hb .craft-drawer:not(.hb-tdrawer) { padding: 6px 8px 4px; }
  .hb .craft-drawer .cab-cell { height: 30px; font-size: 13px; }
  .hb .craft-drawer:not(.hb-tdrawer) .cab-cell { height: 24px; font-size: 12px; }
  .hb .craft-drawer:not(.hb-tdrawer) .cab-cell::after { bottom: 3px; width: 10px; margin-left: -5px; }
  .hb .craft-drawer:not(.hb-tdrawer) .cab-cell b { margin-top: -3px; }
  .hb .craft-drawer:not(.hb-tdrawer) .cab { border-spacing: 3px; }
  .hb .craft-drawer:not(.hb-tdrawer) .cab thead th { font-size: 9px; line-height: 1.1; }
  .hb .craft-drawer:not(.hb-tdrawer) tbody th { font-size: 10.5px; }
  .hb .hb-strip { gap: 3px; padding: 0 0 4px; margin-bottom: 1px; }
  .hb .hb-strip .hb-chip { width: 22px; height: 22px; font-size: 12px; }
  .hb .hb-strip .hb-chip-arrow { width: 7px; }
  .hb-tdrawer { padding: 10px 12px; }
  .hb-rdrawer .craft-hint { margin: 0 0 6px; }
  .hb .hb-rdrawer .recipe-btn { min-height: 36px; padding-block: 3px; }
  .hb-fdrawer .rf-still { --s: 150px; }
  .hb-fdrawer .rf-sock { width: 30px; height: 30px; }
  .hb-fdrawer .rf-core { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .hb-fdrawer .rf-still .rf-gem.big { font-size: 24px; }
  .hb-fdrawer .rf-out { gap: 6px; }
  .hb[data-state="craft"] .hb-bench-foot { margin-top: max(30px, calc(76px - var(--s, 400px) * .135)); }   /* 진이 작으면 아래 노드 글자가 진 밖으로 더 나온다 */
}
/* 낮은 화면의 진 — 진은 늘 가운데, 원소 서랍은 아래. 진은 서랍(--dr)이 열려도 아래 노드가 가리지 않을 크기로:
   줌 대신 진 크기(--s)를 줄여 노드 · 글자 크기는 그대로 두고 간격만 좁힌다. 제작 상태의 그릇은 서랍 위 자리에 머문다 */
@media (min-width: 641px) and (max-height: 700px) {
  .hb { --dr: 180px; }   /* 원소 서랍 133 + 아래 노드 글자(★ · 출처 · 남은 수) 47 */
  .hb-bench { --s: min(400px, 100cqh - var(--dr) - 20px, 46cqw); }
  .hb .hb-bench .jin { --size: var(--s); }
  .hb.drawer-open .hb-foot-row { opacity: 0; pointer-events: none; }   /* 서랍에 반쯤 가린 힌트 줄은 감춘다 — 서랍을 닫으면 다시 */
  .hb[data-state="craft"] .hb-bench { --k: 1; scale: 1;
    top: clamp(calc(var(--s) / 2 + 8px), calc(50% - 80px), calc(100cqh - var(--dr) - var(--s) / 2 - 8px)); }
}
/* 맺힌 카드 아래 짧은 물음 — 서랍 · 방이 열리면 숨는다 */
.hb-micro { position: absolute; z-index: 30; left: 18px; bottom: calc(var(--dock-h) + 14px); width: 300px; transition: opacity .3s; }
.hb-micro:empty, .hb.drawer-open .hb-micro { display: none; }

/* ─── 날아가는 카드 ─── */
.hb-fly { position: absolute; z-index: 50; pointer-events: none; transform: translate(-50%, -50%); }
.hb-fly .card-comp { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 24px rgba(236,235,230,.15) !important; }

/* ─── 방 (카드 · 덱 · 서가 · 소식) — 물건 자리에서 펼쳐진다 ─── */
.hb-room { position: absolute; z-index: 60; display: flex; flex-direction: column; overflow: hidden; transform-origin: 0 0;
  background: linear-gradient(180deg, #15130f, #100e0b); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.hb-room-in { flex: 1; min-height: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .18s ease; }
.hb-room.shown .hb-room-in { opacity: 1; }
.rm-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.rm-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: 5px; text-indent: 5px; }
.hb-back { justify-self: start; min-height: 40px; padding: 0 6px; background: none; border: 0; font-family: inherit; font-size: 12.5px; color: var(--t-2); cursor: pointer; }
.hb-back:hover { color: var(--t-1); }
.rm-head > span { justify-self: end; }
.rm-head .wh-battle { font-size: 14px; padding: 8px 26px; letter-spacing: 1px; }   /* 카드 · 덱 방 — 싸우러 가기 (warehouse.js) */
@media (max-width: 640px) { .rm-head .wh-battle { font-size: 13px; padding: 6px 14px; letter-spacing: 0; } }
.rm-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 22px; }
.rm-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.rm-tabs button { min-height: 40px; padding: 0 14px; background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
  font-family: var(--font-serif); font-size: 14px; color: var(--t-2); cursor: pointer; }
.rm-tabs button[aria-selected="true"] { color: var(--t-1); border-bottom-color: var(--gold); }
.rm-masters { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.rm-sec-h { display: flex; align-items: center; font-family: var(--font-serif); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.rm-sec-h .recipe-seal { margin-right: 10px; }
.rm-masters .rm-sec-h { color: rgb(var(--hb-light)); }
.rm-file { font-size: 12px; color: var(--t-3); margin: 0 0 4px; }
.pt-note-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pt-note-acts:empty { display: none; }
.pt-note-place { font-size: 13px; padding: 6px 18px; }
/* 방 안에 들어온 화면들 — 제 화면에서 쓰던 '돌아가기'는 방의 '← 제작대'가 맡는다 */
.hb-room :is(.wh-back, .inq-shelf-foot) { display: none; }
.hb-room .warehouse-top-sticky { top: 0; background: #13110d; }
.hb-room .pt-page { max-width: none; margin: 0; padding: 0; }
.hb-room .pt-board > .pt-title { display: none; }
.hb-room .inq-shelf { padding: 0; }

/* ─── 명패 서랍 — 오른쪽에서 (모든 화면) ─── */
.pt-plate { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--line-strong); transform: translateX(100%); box-shadow: -20px 0 60px rgba(0,0,0,.45); width: min(400px, calc(92vw / var(--zs, 1))); padding: 14px 22px 24px; }
.pt-drawer-wrap.open .pt-plate { transform: none; }
.pl-slab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px 20px; margin: 4px 0 20px;
  border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 4px; box-shadow: inset 0 0 0 4px #13110d, inset 0 0 0 5px rgba(var(--gold-rgb), .14); }
.pl-glyph .el-glyph { width: 40px; height: 40px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c) 50%, transparent)); }
.pl-name { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 2px; }
.pl-school { font-size: 12.5px; color: var(--t-3); }
.pt-plate .pt-status { grid-template-columns: 1fr; }
.pl-note { margin-top: 18px; font-size: 11.5px; color: var(--t-3); text-align: center; }
.pl-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pl-acts .btn { font-size: 13px; padding: 6px 18px; }
/* 세계 밖 통로 · 언어 — 명패 바로 밑 조용한 글자 줄 */
.pl-out { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 16px; margin: -10px 0 10px; }
.pl-out > :is(a, button) { position: relative; min-height: 36px; padding: 0 2px; background: none; border: 0; font-family: var(--font-serif); font-size: 13px; color: var(--t-3); cursor: pointer; display: inline-flex; align-items: center; }
.pl-out > :is(a, button):hover { color: var(--t-1); }
.pl-out > .dot::after, button.pt-nick.dot::after { content: ''; position: absolute; top: 8px; right: -7px; width: 5px; height: 5px; border-radius: 50%; background: rgb(210,189,114); }
button.pt-nick.dot { position: relative; }
/* 전투에서 본거지로 — 전투는 남는다(이어하기) */
.bt-home { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 12px; white-space: nowrap; justify-self: start; }
.pt-difficulty .pt-page-back { display: table; margin: 0 0 22px; }
@media (max-width: 640px) {
  .bt-top { grid-template-columns: auto 1fr auto; }
  .bt-top > .bt-top-side:first-child { display: flex; }
  .bt-home { padding: 2px 9px; font-size: 13px; }
  .bt-home-t { display: none; }
}
/* 세계 밖 화면에서 본거지로 */
.pt-page-back { display: inline-block; margin-bottom: 18px; font-size: 12.5px; padding: 4px 14px; }

/* 헤더의 이름 — 누르면 명패 */
button.pt-nick { display: inline-flex; align-items: center; gap: 8px; min-height: 40px;   /* 글자는 로고처럼 헤더 높이 가운데에 */ padding: 0 4px; background: none; border: 0; border-bottom: 1px solid transparent;
  font-family: inherit; color: var(--t-2); cursor: pointer; transition: border-color .2s; }
button.pt-nick b { font-weight: 600; font-size: 13px; color: var(--t-1); }
.pt-nick-sub { font-size: 12px; color: var(--t-3); }
button.pt-nick:hover { border-bottom-color: var(--line-strong); }
button.pt-nick:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ─── 피드백 — 세계 밖 통로 ─── */
#pt-fb-btn.dot::after { content: ''; position: absolute; top: 4px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: rgb(210,189,114); }
body:has(.hb.drawer-open) #pt-fb-btn, body:has(.hb:not([data-room="none"])) #pt-fb-btn { opacity: 0; pointer-events: none; }
.pt-fb-menu { position: fixed; z-index: 160; display: flex; flex-direction: column; min-width: 180px; padding: 6px; background: #17140f; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.pt-fb-menu > * { display: block; min-height: 40px; padding: 10px 16px; text-align: left; background: none; border: 0; border-radius: 4px; font-family: var(--font-serif); font-size: 14px; color: var(--t-2); cursor: pointer; }
.pt-fb-menu > *:hover { color: var(--t-1); background: rgba(225,212,188,.04); }

/* ─── 모바일 — 위 서가 · 소식, 가운데 그릇, 아래 카드 · 덱, 맨 아래 원소 띠 ─── */
@media (max-width: 640px) {
  button.pt-nick { display: inline-flex; min-height: 36px; }
  .pt-nick-sub { display: none; }
}
/* 폰 원소 바 실제 높이(8 + 44 + 12 + 테 1) — 서랍 · 장면이 바에 바로 붙는다. 컨테이너 쿼리는 .hb 자신을 못 바꾸니 화면 폭으로 */
@media (max-width: 600px) { .hb { --dock-h: calc(66px + env(safe-area-inset-bottom)); } }
@container hb (max-width: 600px) {
  .hb-top { padding: 6px 96px 0 12px; align-items: stretch; }   /* 오른쪽 위 연출 · 소리 버튼을 비켜 간다 */
  .hb-tools { top: 6px; right: 8px; }
  .hb .craft-dock { padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); }
  .hb .dock-els { gap: 2px; }
  .hb .dock-els .craft-elb { width: 44px; height: 44px; font-size: 24px; }
  .hb-dock-sep { margin: 0 1px; }
  .hb .craft-drawer, .hb-tdrawer, .hb-rdrawer, .hb-fdrawer { width: calc(100% - 16px); bottom: calc(var(--dock-h) + 2px); }
  .hb .hb-rdrawer .recipe-grid.craft-recipes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-micro { left: 8px; right: 8px; width: auto; }
  /* 정제 서랍 — 스크롤 없이 한눈에: 왼쪽 칸 표, 오른쪽 작은 정제소 · 버튼 */
  .hb-fdrawer { padding: 8px 10px 10px; }
  .hb-fdrawer .craft-store-head { padding: 4px 0; }
  .hb-fdrawer .craft-refine { padding-top: 6px; }
  .hb-fdrawer .craft-refine > .craft-h { margin-bottom: 4px; }
  .hb-fdrawer .rf-body { grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; align-items: start; }
  .hb-fdrawer .rf-els { gap: 2px; padding-bottom: 4px; }
  .hb-fdrawer .rf-els .craft-elb { width: 34px; height: 34px; font-size: 19px; }
  .hb-fdrawer .rf-cab .cab-cell { height: 38px; font-size: 13px; }
  .hb-fdrawer .drawer-src { width: 3.6em; }
  .hb-fdrawer .rf-out { gap: 6px; padding-top: 6px; }
  .hb-fdrawer .rf-still { --s: 96px; }
  .hb-fdrawer .rf-sock { width: 22px; height: 22px; }
  .hb-fdrawer .rf-core { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .hb-fdrawer .rf-core .jin-stars { font-size: 8px; }
  .hb-fdrawer .rf-still .rf-gem { font-size: 12px; }
  .hb-fdrawer .rf-still .rf-gem.big { font-size: 18px; }
  .hb-fdrawer .rf-say { font-size: 11px; line-height: 1.45; }
  .hb-fdrawer .rf-do { min-width: 0; width: 100%; padding: 6px 4px; font-size: 13px; }
  .rm-body { padding: 12px 12px 16px; }
}
@container st (max-width: 600px) {
  .hb-shelf { --x: 29%; --y: 13%; --px: -30px; --py: -50px; }
  .hb-news { --x: 73%; --y: 13%; --px: 30px; --py: -50px; }
  .hb-deck { --x: 50%; --y: 86%; --px: 0px; --py: 60px; }
  .hb .hb-obj { gap: 8px; padding: 4px; }
  .hb-label { font-size: 13px; letter-spacing: 4px; text-indent: 4px; }
  .hb-slips { --k: .8; width: 150px; height: 104px; }
  .hb-news .hb-slips { width: 150px; height: 90px; }
  .slip { width: 128px; min-height: 40px; padding: 9px 10px 10px; }
  .slip.pinned { padding-top: 13px; }
  .slip-t { font-size: 11px; }
  .hb-fan { --fs: .5; width: 170px; height: 100px; }
  .hb-deckbar i { width: 7px; }
  /* 진 크기(--s)와 제작 상태 자리(--cy) — 원소 서랍(236 + 바 위 2 + 여유 18)이 열려도 아래 노드 글자(가운데에서 .365s + 66)가 서랍 바로 위에 오고,
     위로는 표식 줄(56)을 비킨다. 둘 사이에 다 들지 않는 낮은 폰은 진을 줄인다. 옆 꼭짓점의 글자가 원 바깥으로 나가므로 진은 화면 폭보다 작게 */
  .hb-bench { top: 46%; --s: min(296px, 100cqw - 90px, (100cqh - 378px) / .865);
    --cy: max(calc(56px + var(--s) / 2), calc(100cqh - 256px - var(--s) * .365 - 66px)); }
  .hb .hb-bench .jin { --size: var(--s); }
  /* 제작 상태 — 그 자리에 머문다. 서랍이 열리고 닫혀도 움직이지 않는다. 폭이 모자라 줌하면 카드와 노드가 겹친다 */
  .hb[data-state="craft"] .hb-bench { top: var(--cy); scale: 1; transition: top var(--t-lift) var(--ease-lift), scale var(--t-move) var(--ease-move); }
  .hb[data-state="craft"] .hb-bench-foot { margin-top: 28px; }
  .hb-hint { margin-top: 16px; }   /* 아래 꼭짓점의 글자(보유)와 한 줄로 붙어 읽히지 않게 */
  /* 받침 — 진 아래 빈 곳(서랍이 닫혔을 때 원소 바까지)을 2:3으로 나누는 자리. 발치 여백 28 · 받침 반 높이 53을 빼 발치 기준으로. 힌트보다 위로는 오지 않는다 */
  .hb-tray { top: max(40px, calc((100cqh - var(--cy) - var(--s) / 2) * .4 - 81px)); }
  .hb .jin-core-card { --cs: .64; }
  .hb-bench-foot { margin-top: -6px; }
  .hb-stage::after { background: radial-gradient(ellipse 50% 32% at 50% 47%, transparent 45%, rgba(5,4,3,.55) 78%, rgba(5,4,3,.8)); }
}

/* ─── 온보딩 쪽지 (js/quest.js · 목업 project plan/mockups/261012_onboarding_quest) ───
   떠 있는 쪽지 = 소식 쪽지와 같은 판 · 새 소식 빛(--hb-light) 테. 원소색은 원소 칩 · 카드에만. 진행은 빈 틀이 차는 것으로만 */
.qn-float { position: absolute; z-index: 15; left: max(18px, calc(50cqw - 600px)); top: 50%; translate: 0 -50%;   /* 왼쪽 — 쪽지가 오가는 소식 · 서가(오른쪽)를 가리지 않게 */
  width: 344px; max-height: calc(100cqh - 130px); overflow: auto; padding: 16px 18px 14px;
  background: linear-gradient(168deg, rgba(40,37,32,.98), rgba(21,19,16,.98)); border: 1px solid rgba(var(--hb-light), .42); border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 30px rgba(var(--hb-light), .1); font-family: 'Noto Serif KR', serif; }
.qn-float.done { animation: qn-done 1.2s ease-out; }
@keyframes qn-done { 40% { box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 60px rgba(var(--hb-light), .55); } }
.qn-x { position: absolute; top: 6px; right: 8px; min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--t-3); font-size: 17px; cursor: pointer; }
.qn-x:hover { color: var(--t-1); }
.qn-h { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.qn-h .recipe-seal { border-color: rgb(var(--hb-light)); box-shadow: 0 0 6px rgba(var(--hb-light), .6); }
.qn-ttl { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: rgb(var(--hb-light)); }
.qn-who { margin-left: 8px; font-size: 12px; color: var(--t-3); letter-spacing: 1px; }
.qn-body p, .qn-shelf p { margin: 0 0 8px; font-size: 13px; line-height: 1.65; color: var(--t-1); }
.qn-hint { margin: 4px 0 8px !important; padding: 6px 10px; border-left: 1px solid rgba(210,189,114,.6); color: rgb(226,214,170) !important; }
.qn-hint.fresh { animation: qn-frame 1.4s ease-out; }
.qn-sub { margin: 10px 0 5px; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 1px; color: var(--t-3); }
.qn-gifts { display: flex; flex-wrap: wrap; gap: 6px; }
.qn-gift { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 20px; font-family: var(--font-sans); font-size: 12.5px; transition: opacity .4s; }
.qn-gift.sent { opacity: .45; }
.qn-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12.5px; }
.qn-chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.qn-chip s { text-decoration: none; font-size: 9px; letter-spacing: -1px; color: var(--t-2); }
.qn-rec { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 3px 0; border-top: 1px solid var(--line-faint); }
.qn-rec:first-of-type { border-top: 0; }
.qn-seq { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qn-seq em { font-style: normal; color: var(--t-3); }
.qn-task { font-family: var(--font-sans); font-size: 12.5px; color: var(--t-2); }
.qn-btn { flex: none; font-size: 12.5px; padding: 5px 12px; }
.qn-frame { flex: none; position: relative; width: 40px; height: 56px; border: 1px dashed rgba(236,235,230,.22); border-radius: 5px; overflow: hidden; }
.qn-frame.filled { border-color: transparent; overflow: visible; }
.qn-frame .card-comp { position: absolute; left: 0; top: 0; transform: scale(.308); transform-origin: top left; }
.qn-frame.fresh { animation: qn-frame 1.2s ease-out; }
@keyframes qn-frame { 30% { box-shadow: 0 0 24px rgba(var(--hb-light), .6); } }
.qn-boom { position: absolute; inset: 12px 8px; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 10%, rgba(236,235,230,.5) 10% 12%, transparent 12% 40%, rgba(236,235,230,.5) 40% 42%, transparent 42% 70%, rgba(236,235,230,.5) 70% 72%, transparent 72%); }
.qn-go { margin-top: 12px; }
.qn-shelf { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
/* 날아가는 것 — 원소 알갱이 · 첫 쪽지 맺힘 · 다시 보냄 */
.qn-flychip { position: fixed; z-index: 60; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); pointer-events: none; }
.qn-mote { position: fixed; z-index: 60; left: 0; top: 0; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgb(210,189,114); box-shadow: 0 0 8px rgba(210,189,114,.9); pointer-events: none; }
.qn-flyslip { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; --hb-light: 210,189,114; }
.qn-flyslip .slip { position: static; transform: none; animation: none; }
.qn-tip { position: fixed; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 12px; white-space: nowrap;
  background: rgba(21,19,16,.96); border: 1px solid rgba(210,189,114,.45); border-radius: 3px; font-family: 'Noto Serif KR', serif; font-size: 12.5px; color: var(--t-1); pointer-events: none; }
.craft-elb.qn-bump { animation: qn-bump .5s ease-out; }
@keyframes qn-bump { 40% { transform: scale(1.18); box-shadow: 0 0 16px var(--c); } }
/* 첫 수업 손잡이 안내 — 다음에 누를 곳만 백금으로 숨 쉬고, 그 옆에 사범의 한 줄 (js/quest.js coach) */
.qn-glow { position: relative; z-index: 3; animation: qn-glow 1.8s ease-in-out infinite; border-radius: 6px; }
.jin.qn-glow { border-radius: 50%; }
@keyframes qn-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(236,235,230,.55), 0 0 10px rgba(236,235,230,.18); }
  50% { box-shadow: 0 0 0 2px rgba(236,235,230,.95), 0 0 26px rgba(236,235,230,.45); } }
.qn-coach { position: fixed; z-index: 70; display: flex; align-items: center; gap: 4px; max-width: min(320px, calc(80vw / var(--zs, 1))); padding: 7px 12px;
  background: rgba(21,19,16,.97); border: 1px solid rgba(210,189,114,.5); border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-family: 'Noto Serif KR', serif; font-size: 13px; line-height: 1.5; color: var(--t-1); pointer-events: none; }
.qn-coach .recipe-seal { flex: none; border-color: rgb(210,189,114); }
.pt-fnode.locked { opacity: .3; cursor: default; }
@container hb (max-width: 600px) {
  .qn-float { left: 8px; right: 8px; width: auto; top: auto; bottom: 100px; translate: none; max-height: 46cqh; padding: 14px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .qn-float.done, .qn-frame.fresh, .craft-elb.qn-bump { animation: none; } .qn-glow { animation: none; box-shadow: 0 0 0 2px rgba(236,235,230,.9); } }
.reduce-motion .qn-float.done, .reduce-motion .qn-frame.fresh, .reduce-motion .craft-elb.qn-bump { animation: none; }
.reduce-motion .qn-glow { animation: none; box-shadow: 0 0 0 2px rgba(236,235,230,.9); }

@media (prefers-reduced-motion: reduce) {
  .slip, .slip.new, .slip.new::after, .hb-rest-ring, .jin-core.vessel.rest::before, .hb-bench::before, .hb .craft-drawer.fresh { animation: none !important; }
  .hb-stage, .hb-obj, .hb-lines, .hb-bench { transition: none !important; }
}
.reduce-motion .slip, .reduce-motion .slip.new, .reduce-motion .slip.new::after, .reduce-motion .hb-rest-ring, .reduce-motion .jin-core.vessel.rest::before, .reduce-motion .hb-bench::before, .reduce-motion .hb .craft-drawer.fresh { animation: none !important; }
.reduce-motion .hb-stage, .reduce-motion .hb-obj, .reduce-motion .hb-lines, .reduce-motion .hb-bench { transition: none !important; }