/* 작업대(bench) 톤 — 안쪽 화면용. 2026-09-26 승현님이 고른 새 겉모습.
   style.css는 어두운 한 벌로 짜여 있고, 거의 모든 규칙이 색 이름표(--surface-0 같은 것)를 거쳐 색을 받는다.
   그래서 여기서는 이름표 값을 밝은 작업대 값으로 바꿔 끼우는 것이 일의 대부분이다.
   body.bx 에 걸어두면 :root 값보다 가까운 쪽이 이겨서, 미리보기를 켠 화면에만 먹는다.

   색의 뜻: 알루미늄 판(바탕) · 흑연(글자) · 강철 청회색(진행·선택) · 안전 노랑(숫자 표시).
   빨강·노랑·초록은 상태를 알리는 데만 쓴다. */

body.bx{
  --surface-0:#ebecec;      /* 바탕 */
  --surface-1:#e0e3e4;      /* 막대 홈·눌린 줄·옅은 칸 */
  --surface-2:#f6f7f7;      /* 패널·카드: 알루미늄 위에 올린 흰 판 */
  --text-primary:#1e2226;
  --text-secondary:#4a5157;
  --text-muted:#646b71;
  --border:#c9cdd0;
  --border-strong:#a4abb0;
  --fill-accent:#2f4a60;    /* 진행 막대·체크: 강철 청회색 */
  --bg-accent:#d5dee5;
  --text-accent:#24435c;
  --on-accent:#f5f6f6;
  --bg-danger:#f2d9d4;
  --text-danger:#9a2b1c;
  --bg-warning:#f7e6a8;
  --text-warning:#5f4600;
  --text-success:#2c6a33;
  --bar-bg:rgba(235,236,236,.92);
  --radius:10px;
  --font-sans:'Sora','IBM Plex Sans KR',-apple-system,sans-serif;
  background:var(--surface-0);color:var(--text-primary);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased}

/* ── 틀 ───────────────────────────────── */
/* 상단 띠가 46px → 68px로 커졌다. 본문도 그만큼 내려 앉힌다.
   본문 폭은 상단 띠·첫 화면과 같은 1284px 기둥 — 로고의 왼쪽 끝과 제목의 왼쪽 끝이 한 줄에 선다. */
body.bx{--shell:1284px}
.bx .page{padding-top:108px;padding-bottom:96px;padding-inline:clamp(16px,5.4vw,78px)}
.bx .chips{top:68px;background:var(--surface-0);padding-block:10px}
.bx .bx-links a.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}

/* 화면 제목. 첫 화면 인사말과 같은 굵은 산세리프로, 크기만 한 단계 낮춘다. */
.bx h1{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.bx .sect{margin:36px 0 12px}
.bx .sect,.bx .lbl{font-weight:500}
.bx .date{color:var(--text-muted)}

/* ── 면 ───────────────────────────────── */
/* 어두운 화면에서는 테두리 0.5px로 면을 나눴다. 밝은 바탕에서는 면의 색 차이가 그 일을 하므로
   테두리를 걷고 둥글기를 첫 화면 카드(18px)에 가깝게 키운다. 표·목록의 가는 줄은 그대로 둔다. */
.bx .pane,.bx .panel,.bx .st-card,.bx .ibx,.bx .mcard{border:0;border-radius:14px}
.bx .panel,.bx .st-card,.bx .mcard{background:var(--surface-2)}
.bx .pane,.bx .ibx{background:var(--surface-2)}
.bx .ibx:hover,.bx .mcard:hover{background:var(--surface-1)}
.bx .pc-thumb{background:var(--surface-2);border-color:transparent;border-radius:14px}
.bx .pcard:hover .pc-thumb{background:var(--surface-1)}
.bx .st-num,.bx .ibx-n{font-weight:600;font-variant-numeric:tabular-nums}
.bx .st-num{font-size:30px}

/* 줄 목록: 누를 수 있는 줄은 살짝 어두워지며 반응한다. */
.bx .row:hover,.bx a.prow:hover,.bx a.st-row:hover,.bx .mi:hover,.bx .mi.on{background:var(--surface-1)}
.bx .row,.bx .prow{border-top-color:var(--border)}

/* ── 단추·입력 ─────────────────────────── */
/* 주 단추는 첫 화면과 같은 흑연 알약. 테두리 단추는 흑연 선으로. */
.bx button{border:1px solid var(--border-strong);border-radius:8px;color:var(--text-primary);background:transparent;
  font-family:inherit}
.bx button:hover:not(:disabled){border-color:var(--text-primary)}
.bx button.pri,.bx button[type=submit].pri{background:var(--text-primary);color:var(--surface-0);border-color:var(--text-primary)}
.bx button.plain{border:none}
.bx textarea,.bx input[type=text],.bx input[type=date],.bx select,.bx .in{
  background:#f7f8f8;border:1px solid var(--border);border-radius:8px;color:var(--text-primary)}
.bx textarea:focus,.bx input[type=text]:focus,.bx input[type=date]:focus,.bx select:focus{
  outline:none;border-color:var(--text-primary);box-shadow:0 0 0 3px rgba(30,34,38,.1)}
.bx :focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}

/* 칩(분류 고르기): 고른 것은 흑연으로 채운다. */
.bx .chip{border-color:var(--border-strong);color:var(--text-secondary);background:transparent}
.bx .chip.on{background:var(--text-primary);color:var(--surface-0);border-color:var(--text-primary)}

/* 배지. 경고 노랑은 첫 화면의 '접수 대기 63'과 같은 안전 노랑 계열이다. */
.bx .pill{font-weight:500}
.bx .p-neutral{background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)}
.bx .flash{background:var(--text-primary);color:var(--surface-0)}
.bx .banner{background:var(--bg-warning);color:var(--text-warning)}

/* 체크 상자 */
.bx .box{border-color:var(--border-strong);border-radius:5px}
.bx .box.on{background:var(--text-primary);border-color:var(--text-primary);color:var(--surface-0)}

/* 팝업: 어두운 그림자 대신 흑연을 옅게 깐다. */
.bx .mdl-bg{background:rgba(30,34,38,.35)}
.bx .mdl-box{background:#f5f6f6;border:0;box-shadow:0 24px 64px rgba(30,34,38,.22)}

/* 아바타·번호 동그라미 */
.bx .av{background:var(--surface-1);color:var(--text-secondary)}
.bx .mc-av,.bx .sd-n{background:var(--text-primary);color:var(--surface-0)}

/* ── 폰 ────────────────────────────────── */
/* 폰에서는 위 띠에 로고만 남고 메뉴는 아래 띠로 간다(첫 화면과 같다). */
.bx .tabbar{background:var(--bar-bg);border-top:1px solid var(--border)}
.bx .tabbar a{color:var(--text-muted)}
.bx .tabbar a.on{color:var(--text-primary)}
@media (max-width:600px){
  .bx .page{padding-top:84px;padding-bottom:96px;padding-inline:16px}
  .bx .chips{top:68px}
  .bx h1{font-size:24px}
  .bx .pcard{background:var(--surface-2);border:0;border-radius:14px}
  .bx .pc-thumb{background:var(--surface-1)}
}

/* ── 화면별 손질 ───────────────────────── */
/* 제목 아래 한 줄 설명: 제목과 붙여 한 덩어리로 읽히게. */
.bx h1+.note,.bx h1+.date{margin-top:8px;font-size:14px}

/* 본문 기둥이 1284px로 넓어졌다. 글을 읽는 곳·적는 곳은 따로 좁혀 한 줄이 너무 길어지지 않게 한다. */
.bx .lrn-body{max-width:760px}
.bx form[action='/request']{max-width:760px}

/* 팀원 화면 왼쪽 목록: 폭이 넓어진 만큼 품번이 한 줄에 들어가게 넓힌다. */
.bx .split{grid-template-columns:300px 1fr;gap:28px}
.bx .split3{grid-template-columns:1fr 320px;gap:20px}
/* 위 두 줄이 style.css의 폰 규칙(한 줄로 쌓기)보다 세서 폰에서 오른쪽이 화면 밖으로 밀렸다(2026-09-27 점검). */
@media (max-width:720px){.bx .split,.bx .split3{grid-template-columns:1fr}}
/* 아이템 화면 제목 줄: 작업대 글자가 커서 폰에서 오른쪽 단추(지연·문제 발생·수정)가 18px 밀려났다. 넘치면 아랫줄로. */
@media (max-width:600px){.bx .ihead{flex-wrap:wrap}.bx .ihead-r{margin-left:auto}}

/* 글을 적는 칸이 있는 폼의 제출 단추는 이 화면의 주인공이다 — 흑연으로 채운다. */
.bx form:has(textarea) button[type=submit]:not(.plain){background:var(--text-primary);color:var(--surface-0);
  border-color:var(--text-primary);padding-inline:20px}
.bx form:has(textarea) button[type=submit]:not(.plain):hover{background:#363c42}
.bx form[action='/request'] button[type=submit]{background:var(--text-primary);color:var(--surface-0);border-color:var(--text-primary)}

/* 배우기 목차 */
.bx .lrn-i{background:var(--surface-2);border:0;border-radius:14px;padding:16px 18px}
.bx .lrn-i:hover{background:var(--surface-1)}
.bx .lrn-i.on{box-shadow:inset 0 0 0 1.5px var(--text-primary)}
.bx .lrn-n{background:var(--text-primary);color:var(--surface-0)}
.bx .lrn-c,.bx .lrn-body code,.bx .lrn-t th{background:var(--surface-2)}

/* 아이디어 좋아요 */
.bx .ic-like{padding:5px 12px;border-radius:999px}

/* GAME 옆 명예의 전당 판 */
.bx .hof{background:var(--surface-2);border:0;border-radius:14px}

/* ── GAME 판 (2026-09-27 승현님 '톤 맞춰줘') ──
   game/theme.css의 어두운 판 위에 덮는다. body.bx를 앞에 붙여야 나중에 실리는 theme.css를 이긴다.
   숫자가 커질수록 흰 판 → 강철 청회색 → 안전 노랑 → 흑연으로 간다. 합쳐질 때의 주황 파문은 손맛이라 그대로 둔다. */
body.bx #g2048 .game-container{background:#c9ced2;border:1px solid #b3b9be}
body.bx #g2048 .grid-cell{background:#dde1e3}
body.bx #g2048 .tile .tile-inner{box-shadow:0 1px 0 rgba(30,34,38,.08)}
body.bx #g2048 .tile.tile-2 .tile-inner{background:#f6f7f7;color:#4a5157}
body.bx #g2048 .tile.tile-4 .tile-inner{background:#e6e9ea;color:#1e2226}
body.bx #g2048 .tile.tile-8 .tile-inner{background:#c9d5df;color:#24435c}
body.bx #g2048 .tile.tile-16 .tile-inner{background:#9fb4c6;color:#1e2226}
body.bx #g2048 .tile.tile-32 .tile-inner{background:#6f8aa2;color:#fff}
body.bx #g2048 .tile.tile-64 .tile-inner{background:#2f4a60;color:#f5f6f6}
body.bx #g2048 .tile.tile-128 .tile-inner{background:#f5d97a;color:#1e2226}
body.bx #g2048 .tile.tile-256 .tile-inner{background:#f2c230;color:#1e2226}
body.bx #g2048 .tile.tile-512 .tile-inner{background:#e3a51a;color:#1e2226}
body.bx #g2048 .tile.tile-1024 .tile-inner{background:#1e2226;color:#f2c230;
  box-shadow:0 0 18px rgba(242,194,48,.45)}
body.bx #g2048 .tile.tile-2048 .tile-inner{background:#1e2226;color:#f2c230;
  box-shadow:0 0 0 3px #f2c230,0 0 26px rgba(242,194,48,.6)}
body.bx #g2048 .tile.tile-super .tile-inner{background:#9a2b1c;color:#fff;
  box-shadow:0 0 22px rgba(154,43,28,.45)}
body.bx #g2048 .restart-button{background:#1e2226;color:#f5f6f6;border:0}
body.bx #g2048 .restart-button:hover{background:#363c42}
body.bx #g2048 .game-container .game-message{background:rgba(235,236,236,.9)}
body.bx #g2048 .game-container .game-message a{background:#1e2226;color:#f5f6f6}
body.bx #g2048 .game-container .game-message a:hover{background:#363c42}
body.bx #g2048 .game-container .game-message.game-won{background:rgba(242,194,48,.88)}
body.bx #g2048 .game-container .game-message.game-won p{color:#1e2226}
/* My Bench — 아래 띠에서도 눈에 띄게 (2026-09-28) */
.bx .tabbar a.mine{color:#2f4a60;font-weight:700}
.bx .tabbar a.mine svg{background:#2f4a60;stroke:#fff;border-radius:10px;padding:3px;box-sizing:content-box}