:root{
    --paper:#FAFCFD;
    --desk:#EEF3F6;
    --ink:#22404F;
    --ink-2:#66808F;
    --grid:#97B7CD;
    --line:#2A4A5E;
    --shu:#C73E2C;
    --shu-deep:#A93221;
    --warm:#E9667C;
    --font-d:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
    --font-b:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
    --font-m:ui-monospace,"SF Mono",Menlo,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:var(--font-b);
    color:var(--ink);
    background:var(--desk);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  :focus-visible{outline:2px solid var(--shu);outline-offset:2px;border-radius:4px}

  /* ---------- top bar ---------- */
  .topbar{
    display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
    max-width:1200px;margin:0 auto;padding:28px 24px 4px;
  }
  .brand h1{
    font-family:var(--font-d);font-size:26px;font-weight:600;letter-spacing:.14em;
    display:inline-block;
  }
  .badge{
    display:inline-block;vertical-align:middle;margin-left:10px;
    font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--shu);
    border:1px solid var(--shu);border-radius:999px;padding:2px 10px;
  }
  .tagline{font-size:12.5px;color:var(--ink-2);letter-spacing:.06em;margin-top:2px}
  .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .preset-label{font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.06em;display:flex;flex-direction:column;gap:3px}
  select{
    font-family:var(--font-b);font-size:13.5px;color:var(--ink);
    padding:7px 30px 7px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;
    appearance:none;-webkit-appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%2322404F" stroke-width="1.5" fill="none"/></svg>');
    background-repeat:no-repeat;background-position:right 12px center;
    cursor:pointer;
  }
  button{font-family:var(--font-b);cursor:pointer}
  .ghost{
    font-size:13px;font-weight:600;color:var(--ink);
    background:transparent;border:1.5px solid var(--line);border-radius:8px;padding:8px 14px;
  }
  .ghost:hover{background:#fff}
  .ghost.small{font-size:12px;padding:6px 12px;color:var(--ink-2);border-color:var(--ink-2)}

  /* ---------- layout ---------- */
  main{
    display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;
    max-width:1200px;margin:0 auto;padding:16px 24px 8px;
    align-items:start;
  }

  /* ---------- tray ---------- */
  .tray-panel{
    background:#fff;border:1px solid #DCE6EC;border-radius:12px;padding:16px;
    display:flex;flex-direction:column;gap:12px;
  }
  .tray-head{display:flex;justify-content:space-between;align-items:baseline}
  .tray-head h2{font-size:13px;font-weight:600;letter-spacing:.1em}
  .count{font-family:var(--font-m);font-size:12px;color:var(--ink-2)}
  .add-row{display:flex;gap:6px}
  .add-row input{
    flex:1;min-width:0;font-family:var(--font-b);font-size:13px;
    padding:7px 10px;border:1.5px solid #C9D6DE;border-radius:8px;color:var(--ink);
  }
  .add-row input::placeholder{color:#9FB2BD}
  .add-row button{
    font-size:13px;font-weight:600;color:#fff;background:var(--ink);
    border:none;border-radius:8px;padding:7px 14px;
  }
  .tray{display:flex;flex-wrap:wrap;gap:8px;min-height:80px;align-content:flex-start}
  .tray-empty-note{font-size:12px;color:#9FB2BD;padding:4px 2px}
  .legend{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-2);border-top:1px dashed #D5E0E7;padding-top:12px}
  .legend div{display:flex;align-items:center;gap:8px}
  .key{width:22px;height:13px;border-radius:999px;flex:none}
  .key-normal{border:1.5px solid var(--line);background:#fff}
  .key-will{background:var(--shu)}

  /* ---------- board ---------- */
  .board-wrap{min-width:0}
  .board{
    position:relative;width:100%;aspect-ratio:10/7;
    border:1px solid #D3DFE6;border-radius:12px;
    background-color:var(--paper);
    background-image:
      linear-gradient(180deg, rgba(233,102,124,.035), rgba(233,102,124,0) 46%, rgba(102,128,143,0) 54%, rgba(102,128,143,.045)),
      linear-gradient(rgba(151,183,205,.30) 1px, transparent 1px),
      linear-gradient(90deg, rgba(151,183,205,.30) 1px, transparent 1px),
      linear-gradient(rgba(151,183,205,.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(151,183,205,.14) 1px, transparent 1px);
    background-size:100% 100%, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
    overflow:hidden;
    touch-action:none;
  }
  .axis{position:absolute;background:var(--line);opacity:.85;pointer-events:none}
  .axis-h{left:3%;right:3%;top:50%;height:1.5px;margin-top:-1px}
  .axis-v{top:4%;bottom:4%;left:50%;width:1.5px;margin-left:-1px}
  .axis-label{
    position:absolute;font-family:var(--font-d);font-weight:600;font-size:15px;
    letter-spacing:.18em;color:var(--ink);pointer-events:none;
    background:rgba(250,252,253,.85);padding:0 4px;border-radius:4px;
  }
  .axis-top{top:8px;left:50%;transform:translateX(10px)}
  .axis-bottom{bottom:8px;left:50%;transform:translateX(10px)}
  .axis-left{left:10px;top:50%;transform:translateY(-30px)}
  .axis-right{right:10px;top:50%;transform:translateY(-30px)}
  .axis-label .dir{font-size:11px;letter-spacing:0}

  .corner{position:absolute;pointer-events:none;display:flex;flex-direction:column;gap:1px}
  .corner .q{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--ink-2)}
  .corner .note{font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--shu);letter-spacing:.04em}
  .corner.tl{top:12px;left:16px}
  .corner.tr{top:12px;right:16px;text-align:right}
  .corner.bl{bottom:12px;left:16px}
  .corner.br{bottom:12px;right:16px;text-align:right}

  .empty-hint{
    position:absolute;left:50%;top:29%;transform:translate(-50%,-50%);
    font-size:13px;color:#8FA6B3;border:1.5px dashed #B7C9D3;border-radius:10px;
    padding:10px 18px;background:rgba(250,252,253,.7);pointer-events:none;
    transition:opacity .3s;
  }
  .empty-hint.hidden{opacity:0}

  /* ---------- chips ---------- */
  .chip{
    display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:500;line-height:1;color:var(--ink);
    background:#fff;border:1.5px solid var(--line);border-radius:999px;
    padding:7px 13px;
    cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
    box-shadow:0 1px 2px rgba(34,64,79,.08);
    transition:box-shadow .15s, transform .15s;
  }
  .chip:hover{box-shadow:0 2px 6px rgba(34,64,79,.16)}
  .chip.will{background:var(--shu);border-color:var(--shu-deep);color:#fff}
  .chip.will::after{content:"↗";font-size:.85em;font-weight:700}
  .chip.placed{position:absolute;transform:translate(-50%,-50%);z-index:5;max-width:46%}
  .chip.placed:hover{z-index:6}
  .chip .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip.dragging{
    position:fixed;left:0;top:0;z-index:100;cursor:grabbing;
    box-shadow:0 8px 20px rgba(34,64,79,.28);transition:none;
  }

  /* ---------- footer ---------- */
  footer{max-width:1200px;margin:0 auto;padding:8px 24px 36px}
  .steps{
    list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    counter-reset:step;
  }
  .steps li{
    counter-increment:step;
    background:#fff;border:1px solid #DCE6EC;border-radius:12px;padding:14px 16px;
    font-size:12.5px;color:var(--ink-2);
  }
  .steps li::before{
    content:counter(step);
    font-family:var(--font-d);font-size:15px;font-weight:600;color:var(--shu);
    display:inline-block;margin-right:8px;
  }
  .steps b{color:var(--ink);font-size:13.5px;letter-spacing:.04em}
  .steps .shu{color:var(--shu);font-weight:600}
  .storage-note{font-size:11.5px;color:#9FB2BD;text-align:right;margin-top:10px}

  /* ---------- toast ---------- */
  .toast{
    position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
    background:var(--ink);color:#fff;font-size:13px;
    padding:10px 18px;border-radius:10px;box-shadow:0 6px 18px rgba(34,64,79,.3);
    opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
    max-width:88vw;
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- load animation ---------- */
  @media (prefers-reduced-motion: no-preference){
    .axis-h{transform:scaleX(0);animation:growX .7s ease .15s forwards}
    .axis-v{transform:scaleY(0);animation:growY .7s ease .15s forwards}
    @keyframes growX{to{transform:scaleX(1)}}
    @keyframes growY{to{transform:scaleY(1)}}
    .corner,.axis-label{opacity:0;animation:rise .5s ease .85s forwards}
    @keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
    .axis-top{animation-name:riseT}.axis-bottom{animation-name:riseT}
    .axis-left{animation-name:riseS}.axis-right{animation-name:riseS}
    @keyframes riseT{from{opacity:0}to{opacity:1;transform:translateX(10px)}}
    @keyframes riseS{from{opacity:0}to{opacity:1;transform:translateY(-30px)}}
  }

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .topbar{padding:20px 16px 0}
    main{grid-template-columns:1fr;padding:12px 16px 4px}
    .board-wrap{order:1}
    .tray-panel{order:2}
    .board{aspect-ratio:1/1}
    .chip.placed{max-width:60%}
    .corner .note{font-size:11.5px}
    .corner .q{font-size:9px}
    .corner.tl{top:36px}.corner.tr{top:36px}
    .corner.bl{bottom:36px}.corner.br{bottom:36px}
    .steps{grid-template-columns:1fr}
    footer{padding:8px 16px 28px}
  }

/* ---------- view mode（閲覧・share.jsが制御） ---------- */
.view-banner{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ink);color:#fff;padding:10px 24px;font-size:13px;
}
.view-banner[hidden]{display:none}
.view-banner .view-msg{margin:0}
.view-banner .view-actions{display:flex;gap:8px}
.view-banner button{font-size:12.5px;font-weight:600;border-radius:8px;padding:7px 12px;cursor:pointer}
#importMap{background:var(--shu);border:none;color:#fff}
#exitView{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.is-readonly .chip{cursor:default}
.is-readonly .add-row,.is-readonly #reset{opacity:.45;pointer-events:none}