/* =============== Design Tokens =============== */
:root{
    /* Wood background */
    --wood-1:#B98555; --wood-2:#A87444; --wood-3:#8E5E36;
  
    /* Surfaces */
    --surface-1:#F3E2C9;
    --surface-2:#E8CD9E;
    --surface-3:#DDBB86;
  
    /* Ink & lines */
    --ink:#2A1C12;
    --ink-weak:#5C4637;
    --line:#5A3E27;
  
    /* Accents */
    --accent:#5A7CF2;          /* action */
    --accent-ink:#0E1B4D;
    --ok:#2FA36B;
    --warn:#E39A38;
    --danger:#D46262;
  
    /* Effects */
    --shadow-1:0 6px 0 rgba(58,39,26,.55), 0 1px 0 rgba(255,255,255,.35) inset;
    --elev-1:0 10px 18px rgba(0,0,0,.18);
    --elev-2:0 18px 28px rgba(0,0,0,.16);
  
    /* Radius / spacing */
    --r-lg:18px; --r-md:14px; --r-sm:10px;
    --sp-xs:6px; --sp-sm:10px; --sp-md:14px; --sp-lg:20px; --sp-xl:28px;
  }
  
  /* =============== Global =============== */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--ink);
    font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    line-height:1.5;
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 84px),
      linear-gradient(180deg,var(--wood-1),var(--wood-2) 48%,var(--wood-3));
  }
  img{max-width:100%;display:block}
  
  /* =============== Page Frame =============== */
  .wrapper{max-width:1240px;margin:var(--sp-xl) auto var(--sp-xl);padding:0 var(--sp-md)}
  .page-title{
    font-size:clamp(28px,4.6vw,52px);
    font-weight:900; letter-spacing:.2px; text-align:center; margin:0 0 var(--sp-lg);
    text-shadow:0 2px 0 rgba(0,0,0,.07);
  }
  
  /* 레이아웃: 왼쪽 도구 + 오른쪽 메인 */
  .layout{
    display:grid; gap:var(--sp-lg);
    grid-template-columns:320px 1fr;
    grid-auto-rows:min-content;
  }
  @media (max-width:980px){ .layout{grid-template-columns:1fr} }
  
  /* Footer spans full width */
  .footer{grid-column:1 / -1; display:grid; gap:var(--sp-md)}
  
  /* =============== Surfaces / Cards / Bars =============== */
  .card{
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    border:3px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-1), var(--elev-1);
    padding:var(--sp-lg); min-height:96px;
  }
  .bar{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md);
    padding:var(--sp-sm) var(--sp-lg);
    background:linear-gradient(180deg,var(--surface-1),var(--surface-3));
    border:3px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--shadow-1), var(--elev-1);
  }
  .muted{opacity:.95}
  
  /* Section header */
  .section-title{
    display:flex; align-items:center; gap:var(--sp-sm);
    font-size:18px; font-weight:800; margin:0 0 var(--sp-md);
  }
  .badge{
    width:38px; height:38px; border:3px solid var(--line); border-radius:12px;
    background:rgba(255,255,255,.55); display:grid; place-items:center;
    box-shadow:inset 0 4px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.06);
  }
  
  /* =============== Buttons / Inputs =============== */
  .btn{
    appearance:none; cursor:pointer; user-select:none;
    padding:10px 16px; border-radius:12px; border:3px solid var(--line);
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    box-shadow:0 4px 0 var(--line), var(--elev-1);
    font-weight:800; color:var(--ink);
    transition:transform .06s ease, box-shadow .12s ease, background .12s ease;
  }
  .btn:hover{ transform:translateY(-1px) }
  .btn:active{ transform:translateY(0); box-shadow:0 2px 0 var(--line) }
  .btn.primary{
    background:linear-gradient(180deg,#7FA1FF,#5A7CF2);
    color:#fff; border-color:#3B55B9; box-shadow:0 4px 0 #3B55B9, var(--elev-1);
  }
  .btn.ghost{ background:transparent; border-style:dashed }
  
  .input, select, .input-like{
    height:42px; padding:0 12px; border-radius:12px;
    border:2px solid rgba(0,0,0,.25); background:rgba(255,255,255,.85); font-weight:600;
  }
  
  /* Focus ring */
  :focus-visible{ outline:4px solid #1a73e826; outline-offset:2px; border-radius:12px }
  
  /* =============== Crafting (grid) =============== */
  .grid{
    --cols:3; --rows:3;
    height:320px; display:grid; gap:10px;
    grid-template-columns:repeat(var(--cols),1fr);
    grid-template-rows:repeat(var(--rows),1fr);
    border:4px solid var(--line); border-radius:var(--r-md); padding:10px;
    background:rgba(255,255,255,.45);
    box-shadow:inset 0 4px 0 rgba(255,255,255,.45), inset 0 -6px 0 rgba(0,0,0,.06);
  }
  .cell{
    border:2px solid rgba(0,0,0,.24);
    border-radius:12px; background:rgba(0,0,0,.08);
    display:grid; place-items:center; font-weight:800; color:var(--ink-weak);
    transition:transform .06s ease;
  }
  .cell:hover{ transform:translateY(-1px) }
  .cell.filled{ background:linear-gradient(180deg,#fff8,#fff3) }
  
  .output{
    min-height:110px; display:grid; place-items:center;
    border:4px solid var(--line); border-radius:var(--r-md);
    background:rgba(255,255,255,.5); margin-top:var(--sp-md); padding:var(--sp-md);
    box-shadow:inset 0 4px 0 rgba(255,255,255,.45), inset 0 -6px 0 rgba(0,0,0,.06);
  }
  
  /* =============== Tools (gallery) =============== */
  .tools-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
  .tool-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tool-tile{
    border:3px solid var(--line); border-radius:14px; padding:12px; cursor:pointer;
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    box-shadow:0 4px 0 var(--line), var(--elev-1);
    display:grid; gap:6px; align-content:start;
  }
  .tool-tile.disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.2) }
  .tool-tile.active{ outline:4px solid rgba(90,62,39,.3) }
  
  /* Placeholder */
  .craft-placeholder{
    height:320px; display:grid; place-items:center;
    border:4px dashed rgba(0,0,0,.25); border-radius:12px;
    background:rgba(255,255,255,.45);
    color:var(--ink-weak); font-weight:800;
  }
  
  /* =============== Inventory =============== */
  .inv-grid{ display:grid; gap:10px; grid-template-columns:repeat(6,1fr); grid-auto-rows:72px }
  .slot{
    border:2px solid rgba(0,0,0,.25); border-radius:12px; background:rgba(0,0,0,.08);
    position:relative; display:grid; place-items:center;
  }
  .slot img{ width:70%; height:70%; object-fit:contain; pointer-events:none }
  .slot .qty{
    position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:8px;
    background:#2b2018; color:#fff; font-size:12px; font-weight:900; border:2px solid rgba(255,255,255,.6);
  }
  .inv-item.active{ outline:4px solid rgba(90,62,39,.35) }
  @media (max-width:760px){ .inv-grid{grid-template-columns:repeat(4,1fr)} }
  
  /* Ads / helper */
  .ad{
    display:grid; gap:6px; padding:12px; border-radius:12px; 
    border:3px dashed #835a37; background:rgba(255,255,255,.6);
  }
  
  /* =============== Codex & Achievements (기존 스타일 유지) =============== */
  .codex-info{ margin-bottom:8px; font-weight:700 }
  .codex-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)) }
  @media (max-width:860px){ .codex-grid{ grid-template-columns:1fr } }
  .codex-card{
    border:3px solid var(--line); border-radius:12px; padding:12px;
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    box-shadow:var(--shadow-1), var(--elev-1);
  }
  .codex-card.locked{ filter:saturate(.5) brightness(.94) }
  .codex-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
  .codex-head .rarity{ font-size:12px; padding:2px 8px; border-radius:8px; border:2px solid rgba(0,0,0,.2) }
  .codex-body{ display:flex; align-items:center; justify-content:space-between; gap:8px }
  .codex-body .desc{ opacity:.9 } .codex-body .lock{ opacity:.55; font-weight:700 }
  .codex-body .kind{ font-weight:800; font-size:12px; opacity:.8 }
  .codex-card.r-rare .rarity{ background:#CFE8FF }
  .codex-card.r-epic .rarity{ background:#E0D3FF }
  .codex-card.r-legendary .rarity{ background:#FFE79A }
  
  .achv-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px }
  .achv-list{ display:grid; gap:10px }
  .achv{
    border:3px solid var(--line); border-radius:12px; padding:12px;
    background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
    box-shadow:var(--shadow-1), var(--elev-1);
  }
  .achv.done{ filter:saturate(1.02) brightness(1.03) }
  .achv-title{ display:flex; gap:8px; align-items:center; font-weight:800; margin-bottom:4px }
  .badge-mini{ width:28px;height:28px;border:2px solid var(--line);border-radius:8px;background:rgba(255,255,255,.5);display:grid;place-items:center;font-weight:900 }
  .achv-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:6px }
  
  /* =============== Wallet bar =============== */
  .amount{ font-weight:900; font-size:20px; min-width:72px; text-align:right }
  
  /* =============== Crafting – 최종 레이아웃(세로 스택) =============== */
  /* 버튼(위) → 그리드(아래) 한 칼럼, 카드 밖으로 절대 안 벗어남 */
  #crafting .craft-wrap{
    display:grid;
    grid-template-columns:1fr !important;   /* 세로 스택 */
    gap:10px;
    align-items:start;
  }
  #crafting .cook-controls{ display:flex; gap:10px }
  #crafting .cook-controls .btn{ width:auto }
  
  /* 제작칸 컨테이너: 카드 내부 폭 제한 + 넘침 차단 */
  #crafting .craft-stage{
    position:relative;
    width:min(100%, 620px); /* 필요하면 수치 조정 */
    justify-self:start;     /* 중앙 정렬 원하면 center */
    border-radius:12px;
    overflow:hidden;
  }
  /* 그리드 크기 고정 */
  #crafting .craft-stage .grid{ width:100%; height:320px }
  
  /* pan-grid 절대배치 규칙 완전 무력화(혹시 남아있어도) */
  #crafting .pan-grid{
    position:relative !important;
    inset:auto !important; margin:0 !important; transform:none !important;
    z-index:0 !important;
  }
  
  /* 양념 섹션과 여백 */
  #crafting .craft-season{ margin-top:14px }
  
  @media (max-width:680px){
    #crafting .craft-stage{ width:100% }
  }

  /* Shop rows */
.shop-list .badge-mini{ width:28px;height:28px;border:2px solid var(--line);border-radius:8px;
    background:rgba(255,255,255,.6);display:grid;place-items:center;font-weight:900 }