:root{
  --washi:#EDE6D6; --washi-2:#E2D8C2; --washi-3:#D6C9AC;
  --sumi:#23282F; --sumi-2:#5B6470;
  --ai:#2C4A73; --ai-2:#4A6E9E;
  --shu:#C13B2B; --shu-2:#E0684F;
  --ban:#151C25; --ban-2:#1D2733; --ban-3:#283544;
  --ban-tx:#DDE5F0; --ban-mu:#8496AB;
  --take:#6FBF8B;
  --mincho:'Hiragino Mincho ProN','Yu Mincho','YuMincho',serif;
  --gothic:'Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  --mono:'SFMono-Regular',Menlo,Monaco,Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ban);color:var(--ban-tx);font-family:var(--gothic);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer}
code{font-family:var(--mono);font-size:.92em}
/* JetBrains Mono の合字(ligature)を全面禁止。>= や <= が ≧ ≦ のような一文字に見えないように */
code,.req,pre.ans,#editor,.editor-wrap pre.hl,table.grid,.err,.clock,.kbd,.tbl-card h3,.tbl-card td{
  font-variant-ligatures:none;
  -webkit-font-feature-settings:"liga" 0,"calt" 0,"dlig" 0,"clig" 0;
  font-feature-settings:"liga" 0,"calt" 0,"dlig" 0,"clig" 0;
}

/* ---------- 骨組み ---------- */
.app{height:100dvh;display:grid;grid-template-rows:auto 1fr;min-height:0}
.stage{display:grid;grid-template-columns:minmax(330px,38%) 1fr;min-height:0}

/* ---------- 上の帯 ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:9px 16px;background:var(--ban-2);
  border-bottom:1px solid #000;box-shadow:0 1px 0 var(--shu)}
.logo{font-family:var(--mincho);font-weight:800;font-size:19px;letter-spacing:.14em;white-space:nowrap}
.logo b{color:var(--shu-2);font-weight:800}
.meters{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.meter{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--ban-mu);letter-spacing:.08em}
.meter .v{font-family:var(--mincho);font-weight:600;font-size:17px;color:var(--ban-tx);letter-spacing:.04em}
.meter .v.num{font-family:var(--mono);font-size:15px;font-weight:600}
.rank .v{color:#F2C879}
.bar{width:96px;height:5px;background:#0d131b;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--shu),var(--shu-2));width:0;transition:width .5s}
.ico{background:none;border:1px solid var(--ban-3);color:var(--ban-mu);border-radius:6px;
  padding:5px 9px;font-size:12px;letter-spacing:.06em}
.ico:hover{color:var(--ban-tx);border-color:var(--ban-mu)}

/* ---------- 左：問題用紙 ---------- */
.paper{background:var(--washi);color:var(--sumi);overflow-y:auto;position:relative;
  padding:16px 24px 80px 34px;border-right:1px solid #000}
.paper::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:rgba(193,59,43,.28)}
.tabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--washi-3)}
.tab{background:none;border:0;padding:7px 13px;font-size:13px;color:var(--sumi-2);letter-spacing:.06em;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--sumi);border-bottom-color:var(--shu);font-weight:700}

.nav{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:18px}
.nav button{aspect-ratio:1;border:1px solid var(--washi-3);background:rgba(255,255,255,.4);
  color:var(--sumi-2);font-family:var(--mono);font-size:11px;border-radius:3px;padding:0;position:relative}
.nav button:hover{border-color:var(--ai)}
.nav button[data-done="1"]{background:var(--shu);border-color:var(--shu);color:#fff}
.nav button[aria-current="true"]{outline:2px solid var(--ai);outline-offset:1px}

.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.qno{font-family:var(--mincho);font-size:13px;letter-spacing:.18em;color:var(--sumi-2)}
.grade{font-size:10.5px;letter-spacing:.14em;border:1px solid var(--ai);color:var(--ai);
  padding:2px 7px;border-radius:2px}
h1.qtitle{font-family:var(--mincho);font-weight:800;font-size:27px;line-height:1.35;margin:2px 0 14px;
  letter-spacing:.04em}
.qbody{font-size:14.5px;line-height:1.95;letter-spacing:.02em}
.qbody code{background:rgba(44,74,115,.1);padding:1px 5px;border-radius:3px;color:#1c3557}
.block{margin-top:16px;border-top:1px solid var(--washi-3);padding-top:12px}
.block h2{font-size:11px;letter-spacing:.2em;color:var(--sumi-2);margin:0 0 7px;font-weight:700}
.req{font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#1c3557}
.output-meta{color:var(--sumi-2);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;border:1px dashed var(--shu);color:var(--shu);padding:3px 9px;border-radius:99px;
  background:rgba(193,59,43,.05)}
.paperbtn{background:rgba(255,255,255,.55);border:1px solid var(--washi-3);color:var(--sumi-2);
  border-radius:4px;padding:6px 12px;font-size:12.5px;letter-spacing:.04em}
.paperbtn:hover{border-color:var(--ai);color:var(--ai)}
.hint-action{margin-top:8px}
.hint{margin-top:9px;padding:10px 13px;background:rgba(44,74,115,.07);border-left:2px solid var(--ai);
  font-size:13.5px;line-height:1.85}
.hint b{display:inline-block;margin-bottom:2px;color:var(--ai);font-size:12px;letter-spacing:.08em}
.solved-note{margin-top:16px;border:1px solid var(--shu);background:rgba(193,59,43,.06);
  padding:12px 14px;font-size:13.5px;line-height:1.9}
.solved-note h2{color:var(--shu);border:0;margin-top:0}
pre.ans{font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-all;
  background:rgba(35,40,47,.06);padding:10px;border-radius:4px;margin:8px 0 0}

/* スキーマ */
.tbl-card{margin-bottom:14px;border:1px solid var(--washi-3);border-radius:4px;overflow:hidden;background:rgba(255,255,255,.4)}
.tbl-card h3{margin:0;padding:7px 11px;background:rgba(44,74,115,.09);font-family:var(--mono);font-size:12.5px;
  display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-weight:600}
.tbl-card h3 span{font-family:var(--gothic);font-size:11px;font-weight:400;color:var(--sumi-2)}
.tbl-card table{width:100%;border-collapse:collapse;font-size:12px}
.tbl-card td{padding:4px 11px;border-top:1px solid var(--washi-2)}
.tbl-card td:first-child{font-family:var(--mono);color:#1c3557;white-space:nowrap}
.tbl-card td:nth-child(2){font-family:var(--mono);font-size:10.5px;color:var(--sumi-2);white-space:nowrap}
.tbl-card td:last-child{color:var(--sumi-2);width:99%}
.tables-block{border-top:1px solid var(--shu);padding-top:12px;background:rgba(193,59,43,.04);
  margin:16px -12px 0;padding-left:12px;padding-right:12px;border-radius:4px}
.tables-block h2{color:var(--shu)}
.tables-block .tbl-card{margin-bottom:8px}
.tables-block .tbl-card:last-child{margin-bottom:0}
.tbl-card.mini h3{padding:5px 10px;font-size:12px}
.tbl-card.mini td{padding:3px 10px}


/* ---------- 問題一覧 / DBブラウザ ---------- */
.mainnav{display:flex;gap:6px}
.navtop.active{color:#fff;border-color:var(--shu);background:rgba(193,59,43,.18)}
.stage.overview{grid-template-columns:1fr}
.stage.overview .paper{border-right:0;padding-right:34px}
.stage.overview .console{display:none}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:2px 0 18px}
.pagehead h1{font-family:var(--mincho);font-size:28px;letter-spacing:.06em;margin:0 0 5px}
.pagelead{font-size:13.5px;line-height:1.8;color:var(--sumi-2);margin:0;max-width:760px}
.catalog-filters{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 14px}
.catalog-filter{border:1px solid var(--washi-3);background:rgba(255,255,255,.42);color:var(--sumi-2);border-radius:999px;padding:5px 11px;font-size:12px}
.catalog-filter:hover{border-color:var(--ai);color:var(--ai)}
.catalog-filter.active{background:var(--ai);border-color:var(--ai);color:#fff;font-weight:700}
.problem-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}
.problem-card{border:1px solid var(--washi-3);background:rgba(255,255,255,.48);border-radius:5px;padding:13px 14px;text-align:left;color:var(--sumi);position:relative;min-height:112px}
.problem-card:hover{border-color:var(--ai);background:rgba(255,255,255,.72)}
.problem-card[data-done="1"]{box-shadow:inset 3px 0 0 var(--shu)}
.problem-card .pc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.problem-card .pc-title{font-family:var(--mincho);font-size:17px;font-weight:800;line-height:1.45;letter-spacing:.03em}
.problem-card .pc-learn{font-size:12.5px;line-height:1.65;color:var(--sumi-2);margin-top:6px}
.problem-card .pc-done{font-size:10.5px;color:var(--shu);font-weight:700;letter-spacing:.08em}
.problem-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.problem-bottom-nav{display:flex;justify-content:flex-end;gap:8px;margin:14px 0 0}
.backrow .sp{flex:1}
.paperbtn[disabled]{opacity:.4;cursor:default}
.problem-skill{font-size:12px;color:var(--ai);font-weight:700;letter-spacing:.04em}
.table-ref{font-family:var(--mono);font-size:11.5px;color:var(--sumi-2)}
.problem-tables{margin:14px 0 2px;padding:11px 12px;border:1px solid var(--washi-3);border-radius:5px;background:rgba(255,255,255,.34)}
.problem-tables-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.problem-tables-label{font-size:11px;letter-spacing:.14em;color:var(--sumi-2);font-weight:700}
.table-link{border:0;background:none;padding:0;color:#1c4f82;font-family:var(--mono);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.table-link:hover{color:var(--shu)}
.schema-mini-list{display:grid;gap:7px}
.schema-mini{display:grid;grid-template-columns:minmax(100px,auto) 1fr;gap:10px;align-items:start;font-size:11.5px;line-height:1.6}
.schema-mini-name{font-family:var(--mono);font-weight:600;color:#1c3557}
.schema-mini-cols{color:var(--sumi-2);font-family:var(--mono)}
.db-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.db-sidebar{border:1px solid var(--washi-3);border-radius:5px;overflow:hidden;background:rgba(255,255,255,.36);position:sticky;top:0}
.db-sidebar h2{font-size:11px;letter-spacing:.16em;margin:0;padding:9px 11px;background:rgba(44,74,115,.08);color:var(--sumi-2)}
.db-table-btn{display:block;width:100%;border:0;border-top:1px solid var(--washi-2);background:transparent;color:var(--sumi);padding:9px 11px;text-align:left;font-family:var(--mono);font-size:12px}
.db-table-btn:hover,.db-table-btn.active{background:rgba(44,74,115,.10);color:#1c3557}
.db-table-btn small{float:right;font-family:var(--gothic);font-size:10px;color:var(--sumi-2)}
.db-main{min-width:0}
.db-titleline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.db-titleline h2{font-family:var(--mono);font-size:20px;margin:0;color:#1c3557}
.db-note{font-size:12.5px;color:var(--sumi-2)}
.db-section{margin-top:14px}
.db-section>h3{font-size:11px;letter-spacing:.16em;color:var(--sumi-2);margin:0 0 7px}
.db-data{overflow:auto;background:var(--ban);border-radius:5px;border:1px solid #000;max-height:430px}
.sample-wrap{margin-top:10px}
.sample-label{color:var(--sumi-2)}
.sample-table-wrap{overflow:auto;background:var(--ban);border-radius:4px;margin-top:6px}
.db-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;color:var(--sumi-2)}
.db-pager .pager-buttons{display:flex;gap:6px}
.db-pager button[disabled]{opacity:.35;cursor:default}
.backrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
@media (max-width:760px){
  .problem-list{grid-template-columns:1fr}
}

/* ---------- 右：端末 ---------- */
.console{display:grid;grid-template-rows:auto minmax(110px,var(--editor-height,34%)) 8px minmax(110px,1fr);min-height:0;position:relative}
.toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--ban-2);
  border-bottom:1px solid #000}
.toolbar .sp{margin-left:auto}
.clock{font-family:var(--mono);font-size:12px;color:var(--ban-mu)}
.btn{border:0;border-radius:6px;padding:8px 15px;font-size:13px;letter-spacing:.06em;font-weight:700}
.btn.run{background:var(--ban-3);color:var(--ban-tx)}
.btn.run:hover{background:#33455a}
.btn.submit{background:var(--shu);color:#fff;box-shadow:0 2px 0 #8d2418}
.btn.submit:hover{background:var(--shu-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.kbd{font-family:var(--mono);font-size:10px;opacity:.7;margin-left:6px}

.editor-wrap{position:relative;width:100%;height:100%;background:#111820;overflow:hidden}
.editor-wrap .ln{position:absolute;top:0;left:0;bottom:0;width:40px;margin:0;padding:14px 8px 14px 0;
  overflow:auto;pointer-events:none;font-family:var(--mono);font-size:13.5px;line-height:1.7;
  text-align:right;color:#42566c;background:#0d131a;border-right:1px solid rgba(255,255,255,.06);
  box-sizing:border-box}
.editor-wrap .ln::-webkit-scrollbar{display:none}
.editor-wrap .ln div{white-space:nowrap}
.editor-wrap pre.hl{position:absolute;inset:0;margin:0;padding:14px 16px 14px 56px;pointer-events:none;
  font-family:var(--mono);font-size:13.5px;line-height:1.7;tab-size:2;
  white-space:pre-wrap;word-break:break-word;overflow:auto;color:#E7EEF8;background:transparent}
.editor-wrap pre.hl::-webkit-scrollbar{display:none}
.editor-wrap pre.hl code{font:inherit;white-space:inherit;color:inherit}
#editor{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;outline:none;resize:none;
  background:transparent;color:transparent;caret-color:var(--shu-2);
  font-family:var(--mono);font-size:13.5px;line-height:1.7;padding:14px 16px 14px 56px;tab-size:2;
  white-space:pre-wrap;word-break:break-word}
#editor::placeholder{color:#48596d}
#editor::selection{background:rgba(127,168,222,.35)}
/* SQL シンタックスハイライトのトークン色 */
.tk-kw{color:#87AEE6;font-weight:700}
.tk-fn{color:#F2C879}
.tk-str{color:#F0987A}
.tk-num{color:#86CB9C}
.tk-com{color:#63758A;font-style:italic}
.tk-op{color:#A6B7CC}
.tk-punc{color:#7C8CA3}
.tk-ident2{color:#E7EEF8}

.console-resizer{position:relative;cursor:row-resize;background:var(--ban-2);border-top:1px solid #000;border-bottom:1px solid #000;touch-action:none;z-index:4}
.console-resizer::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:2px;border-radius:99px;background:var(--ban-mu);transform:translate(-50%,-50%);opacity:.55}
.console-resizer:hover::before,.console-resizer:focus-visible::before{opacity:1;background:#fff}
.console-resizer:focus-visible{outline:1px solid var(--shu-2);outline-offset:-1px}
html.is-resizing-console,html.is-resizing-console *{cursor:row-resize!important;user-select:none}
.out{overflow:auto;background:var(--ban);min-height:0}
.status{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:var(--ban-2);border-bottom:1px solid #000;font-size:13px}
.status .tag{font-family:var(--mincho);font-weight:600;letter-spacing:.1em;padding:2px 9px;border-radius:3px;font-size:13px}
.tag.ac{background:var(--shu);color:#fff}
.tag.wa{background:var(--ai);color:#fff}
.tag.info{background:var(--ban-3);color:var(--ban-mu)}
.status .msg{color:var(--ban-mu);font-size:12.5px}
.status .sp{margin-left:auto}
.nextbtn{border:1px solid var(--shu);background:rgba(193,59,43,.15);color:#ffbfae;border-radius:5px;
  padding:5px 12px;font-size:12px}
.resultwrap{padding:12px 14px 40px}
.caption{font-size:11px;letter-spacing:.14em;color:var(--ban-mu);margin:0 0 6px}
table.grid{border-collapse:collapse;font-family:var(--mono);font-size:12.5px;min-width:100%}
table.grid th{position:sticky;top:0;background:var(--ban-3);color:#c9d6e6;text-align:left;
  padding:6px 12px;font-weight:600;white-space:nowrap;border-bottom:1px solid #000}
table.grid td{padding:5px 12px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;color:var(--ban-tx)}
table.grid tr:nth-child(even) td{background:rgba(255,255,255,.025)}
table.grid td.n{text-align:right;font-variant-numeric:tabular-nums;color:#a8d5ff}
table.grid td.null{color:#5d6f85;font-style:italic}
.err{font-family:var(--mono);font-size:12.5px;color:#ff9c8a;white-space:pre-wrap;line-height:1.7}
.more{color:var(--ban-mu);font-size:11.5px;padding:8px 2px}
.expected{margin-top:20px;border-top:1px dashed var(--ban-3);padding-top:14px}

/* ---------- 判子 ---------- */
.stamp-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}
.stamp{width:158px;height:158px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mincho);font-weight:800;font-size:44px;letter-spacing:.12em;text-indent:.12em;
  opacity:0;transform:scale(2.4) rotate(-26deg)}
.stamp.on{animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards}
.stamp.ac{border:6px double var(--shu);color:var(--shu);box-shadow:0 0 0 3px rgba(193,59,43,.12)}
.stamp.wa{border:6px double var(--ai-2);color:var(--ai-2);box-shadow:0 0 0 3px rgba(74,110,158,.12)}
.stamp.on.ac.first{animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards, glowPulse 1.3s ease-in-out .5s 2}
.stamp small{display:block;font-size:11px;letter-spacing:.3em;text-indent:.3em;margin-top:6px;opacity:.85}
@keyframes slam{
  0%{opacity:0;transform:scale(2.4) rotate(-26deg)}
  55%{opacity:1;transform:scale(.9) rotate(-9deg)}
  70%{transform:scale(1.06) rotate(-9deg)}
  86%{transform:scale(.99) rotate(-9deg)}
  100%{opacity:1;transform:scale(1) rotate(-9deg)}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(193,59,43,.12),0 0 14px 3px rgba(255,196,86,.35)}
  50%{box-shadow:0 0 0 3px rgba(193,59,43,.12),0 0 34px 10px rgba(255,196,86,.75)}
}
.shake{animation:shake .32s}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}
  50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}
.ripple{position:absolute;width:158px;height:158px;border-radius:50%;border:2px solid var(--shu);
  opacity:0}
.ripple.on{animation:rip .6s ease-out}
@keyframes rip{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(2.1)}}

/* 上のヘッダーに被るので、帯が出ている間もその下のボタンを押せるようにする */
.banner{position:fixed;left:50%;top:14px;transform:translate(-50%,-120px);z-index:50;
  pointer-events:none;
  background:var(--shu);color:#fff;padding:10px 30px;border-radius:3px;font-family:var(--mincho);
  font-weight:800;font-size:17px;letter-spacing:.2em;box-shadow:0 8px 24px rgba(0,0,0,.45)}
/* 称号の帯。昇段（朱・白抜き）と形も動きも揃えたうえで、
   地をレア度の金属色にして一目で見分けられるようにする */
.banner.title{color:#1B1206;
  box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.5)}
.banner.title.tier-銅{background:linear-gradient(180deg,#CE9A62,#B37C48)}
.banner.title.tier-銀{background:linear-gradient(180deg,#C7D0DA,#A3AEBB)}
.banner.title.tier-金{background:linear-gradient(180deg,#E8C165,#CFA23F)}
.banner.on{animation:drop 2.6s cubic-bezier(.2,1.2,.3,1)}
@keyframes drop{0%{transform:translate(-50%,-120px)}12%{transform:translate(-50%,0)}
  85%{transform:translate(-50%,0)}100%{transform:translate(-50%,-120px)}}
/* 後ろに帯が控えているとき用。滞空を詰めて次へ送る */
.banner.on.quick{animation:dropQuick 1.1s cubic-bezier(.2,1.2,.3,1)}
@keyframes dropQuick{0%{transform:translate(-50%,-120px)}20%{transform:translate(-50%,0)}
  76%{transform:translate(-50%,0)}100%{transform:translate(-50%,-120px)}}

/* ---------- 起動画面 ---------- */
.boot{position:fixed;inset:0;background:var(--ban);display:grid;place-items:center;z-index:80;text-align:center;padding:24px}
.boot h1{font-family:var(--mincho);font-weight:800;font-size:34px;letter-spacing:.22em;margin:0 0 10px}
.boot p{color:var(--ban-mu);font-size:13px;letter-spacing:.1em;margin:0}
.boot-error-detail{opacity:.6}
.boot .dots::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.boot.hide{opacity:0;pointer-events:none;transition:opacity .4s}

@media (max-width:880px){
  html,body{height:auto;min-height:100%;overflow-x:hidden}
  body{overscroll-behavior-y:auto}
  .app{height:auto;min-height:100dvh;display:block}
  .stage,.stage.overview{display:block;overflow:visible;min-height:0}
  .stage.overview .paper{padding-right:18px}
  .paper{overflow:visible;border-right:0;border-bottom:1px solid #000;padding:16px 18px 34px 26px}
  .console{display:grid;grid-template-rows:auto 260px auto;min-height:0}
  .console-resizer{display:none}
  .stage.overview .console{display:none}
  .editor-wrap{height:260px;min-height:260px}
  .out{overflow:visible;min-height:190px}
  .status{position:static;flex-wrap:wrap}
  .resultwrap{padding-bottom:calc(28px + env(safe-area-inset-bottom));overflow-x:auto;-webkit-overflow-scrolling:touch}
  .logo{font-size:14px;letter-spacing:.03em;white-space:nowrap;flex:0 0 auto}
  .topbar{
    flex-wrap:nowrap;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:calc(7px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left));
  }
  .topbar::-webkit-scrollbar{display:none}
  .mainnav{order:0;width:auto;flex:0 0 auto;display:flex;gap:5px}
  .mainnav .ico{min-height:32px;padding:5px 10px;font-size:11.5px;white-space:nowrap}
  .meters{margin-left:auto;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
  .meter{letter-spacing:.02em;white-space:nowrap}
  .meter .v{font-size:13px}
  .meter .v.num{font-size:12px}
  .bar{display:none}
  #btn-sound,#btn-reset{min-height:32px;padding:5px 9px;font-size:11px;white-space:nowrap;flex:0 0 auto}
  .kbd{display:none}
  .toolbar{padding:8px 10px;gap:7px}
  .toolbar .btn{flex:1;min-height:44px;padding:9px 10px}
  .toolbar .sp{display:none}
  .clock{min-width:44px;text-align:right}
  #editor,.editor-wrap pre.hl{font-size:16px;line-height:1.65;padding:13px 12px 13px 46px;word-break:normal;overflow-wrap:anywhere}
  .editor-wrap .ln{width:34px;padding:13px 6px 13px 0;font-size:16px;line-height:1.65}
  .pagehead{margin-bottom:14px}
  .pagehead h1{font-size:24px}
  h1.qtitle{font-size:23px;margin-top:8px}
  .qbody{font-size:15px;line-height:1.85}
  .catalog-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 6px;scrollbar-width:none}
  .catalog-filters::-webkit-scrollbar{display:none}
  .catalog-filter{flex:0 0 auto;min-height:38px;padding:7px 13px}
  .problem-card{min-height:0;padding:13px}
  .backrow{flex-wrap:wrap;gap:6px}
  .backrow .sp{display:none}
  #btn-back-list{margin-right:auto}
  #btn-prev-problem,#btn-next-problem{order:3;flex:1 1 calc(50% - 3px);min-height:40px}
  .problem-bottom-nav{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .problem-bottom-nav .paperbtn{min-height:42px}
  .problem-tables{margin-left:-4px;margin-right:-4px;padding:10px 9px}
  .tbl-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .problem-tables .tbl-card table{min-width:430px}
  .table-link{padding:5px 1px;font-size:13px}
  .hint{font-size:14px;line-height:1.8}
  pre.ans{font-size:12px;overflow-x:auto;white-space:pre}
  .db-layout{display:block}
  .db-sidebar{position:static;display:flex;gap:6px;overflow-x:auto;border:0;background:transparent;border-radius:0;margin:0 0 14px;padding:0 0 5px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .db-sidebar::-webkit-scrollbar{display:none}
  .db-sidebar h2{display:none}
  .db-table-btn{flex:0 0 auto;width:auto;border:1px solid var(--washi-3);border-radius:999px;background:rgba(255,255,255,.42);padding:7px 10px;white-space:nowrap}
  .db-table-btn small{float:none;margin-left:6px}
  .db-data{max-height:none;-webkit-overflow-scrolling:touch}
  .db-titleline{margin-top:2px}
  .db-pager{align-items:flex-start;flex-direction:column}
  .db-pager .pager-buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .db-pager .paperbtn{min-height:42px}
  table.grid{font-size:12px;width:max-content;min-width:100%}
  table.grid th,table.grid td{padding:7px 10px}
  .status .nextbtn{margin-left:auto;min-height:38px}
  .stamp{width:132px;height:132px;font-size:38px}
  .ripple{width:132px;height:132px}
  .banner{max-width:calc(100vw - 24px);width:max-content;padding:9px 18px;font-size:15px;text-align:center}
} 

@media (max-width:520px){
  .logo{font-size:12.5px}
  .mainnav .ico{padding:5px 8px;font-size:11px}
  .meters{gap:7px}
  .meter{padding:0}
  .meter .v{font-size:12.5px}
  .meter .v.num{font-size:11.5px}
  #btn-sound,#btn-reset{padding:5px 7px;font-size:10.5px}
  .paper{padding:14px 12px 30px 20px}
  .paper::before{left:12px}
  .stage.overview .paper{padding-right:12px}
  .pagehead h1{font-size:22px}
  h1.qtitle{font-size:21px}
  .problem-skill{font-size:11.5px;line-height:1.6}
  .problem-tables-head{gap:6px 9px}
  .schema-mini{grid-template-columns:1fr}
  .btn{font-size:13px}
  .clock{font-size:11px}
  .status{padding:8px 10px;gap:7px}
  .status .msg{width:100%;font-size:12px;line-height:1.5}
  .status .sp{display:none}
  .status .nextbtn{width:100%;margin:0}
  .resultwrap{padding:10px 10px 24px}
  .problem-bottom-nav{position:relative}
}

/* ---------- スマホ：問題を解いている間だけ「問題文」と「SQL」を上下分割し、それぞれ独立スクロールにする ----------
   仕組み：JS側で setView('problem') のときだけ <html> に .split-active を付ける。
   .split-active が付いていないとき（一覧・テーブル閲覧、または万一 JS 側で判定が狂ったとき）は
   すぐ上の @media(max-width:880px) の素直な縦流しレイアウトにフォールバックする。
   下半分（SQL側）は「ツールバー＋エディタ＋結果」をひとつのブロックとしてまとめてスクロールする
   （エディタと結果を別々のスクロール領域に分けない。ネストしたスクロール領域を減らすほど、
   実機のタッチスクロールで引っかかりにくくなるため）。 */
@media (max-width:880px){
  html.split-active, html.split-active body{height:100%;overflow:hidden}
  html.split-active .app{
    height:100vh;height:100dvh;min-height:0;
    display:grid;grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  html.split-active .stage:not(.overview){
    display:flex;flex-direction:column;
    min-height:0;overflow:hidden;
  }
  html.split-active .paper{
    flex:0 0 65%;min-height:190px;max-height:none;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-right:0;border-bottom:2px solid #000;
  }
  html.split-active .console{
    flex:1 1 auto;min-height:0;display:block;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  html.split-active .toolbar{position:sticky;top:0;z-index:3}
  html.split-active .editor-wrap{
    height:150px;min-height:150px;max-height:150px;flex:none;
  }
  html.split-active .out{overflow:visible;min-height:0}
  html.split-active .status{position:static}
  html.split-active .resultwrap{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  html.split-active .paper{flex-basis:65%}
  html.split-active .editor-wrap{height:130px;min-height:130px;max-height:130px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .stamp.on{opacity:1;transform:rotate(-9deg)}
}

/* ---------- スキル ---------- */
.skill-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.skill-card{border:1px solid var(--washi-3);background:rgba(255,255,255,.45);border-radius:4px;padding:11px;text-align:left;color:var(--sumi)}.skill-card:hover{border-color:var(--ai)}.skill-name{font-family:var(--mincho);font-weight:700;display:block}.skill-count{display:block;font:12px var(--mono);color:var(--sumi-2);margin:5px 0 7px}.skill-bar{display:block;width:100%;height:5px;border:0;border-radius:99px;overflow:hidden;background:var(--washi-2);appearance:none;-webkit-appearance:none}.skill-bar::-webkit-progress-bar{background:var(--washi-2);border-radius:99px}.skill-bar::-webkit-progress-value{background:var(--shu);border-radius:99px}.skill-bar::-moz-progress-bar{background:var(--shu);border-radius:99px}.skill-problem-list{border-top:1px solid var(--washi-3)}.skill-problem{display:flex;align-items:center;gap:10px;width:100%;padding:11px 4px;border:0;border-bottom:1px solid var(--washi-3);background:transparent;text-align:left;color:var(--sumi)}.skill-problem:hover{background:rgba(44,74,115,.06)}.skill-problem .num{font:12px var(--mono);color:var(--sumi-2);width:25px}.skill-problem-title{flex:1}
@media(max-width:880px){.skill-list{grid-template-columns:1fr}.skill-card{min-height:62px}}

/* ---------- スキルの詳細 ---------- */
.skill-intro{margin:-3px 0 16px}.skill-description{display:block;margin:6px 0;color:var(--sumi-2);font-size:12px;line-height:1.7}.skill-card .skill-count{margin-top:8px}.skill-detail-head{margin-bottom:0}.skill-state{font-size:11px;color:var(--sumi-2);white-space:nowrap}.skill-state:not(:empty){min-width:48px;text-align:right}
@media(max-width:880px){.skill-problem{flex-wrap:wrap}.skill-problem-title{min-width:calc(100% - 60px)}.skill-state{margin-left:auto}.btn{padding:7px 10px;font-size:12px}}

.sql-length{min-width:76px;text-align:right}