/* HotS Scrap 공통 디자인 토큰 — 새 앱은 이 파일을 링크하고 var(--scrap-*) 를 쓴다.
   라이트가 기본, 다크는 OS 설정 또는 전역 바 토글(html[data-theme="dark"])로 켜진다.
   기존 앱들은 자기 변수 체계를 유지하며 값만 이 팔레트에 맞춘다 (특화 계층). */
:root {
  --scrap-bg:#f3f6fb;
  --scrap-card:#ffffff;
  --scrap-card2:#eef2f8;
  --scrap-line:#cdd9ea;
  --scrap-fg:#122036;
  --scrap-dim:#5d6d84;
  --scrap-blue:#1758a8;
  --scrap-blue-soft:#e8f0fb;
  --scrap-gold:#a97e1f;
  --scrap-gold-line:#d7b45c;
  --scrap-bar:#0b1526;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scrap-bg:#0b1526;
    --scrap-card:#101f38;
    --scrap-card2:#152747;
    --scrap-line:#233a5c;
    --scrap-fg:#eaf1fa;
    --scrap-dim:#8fa2bd;
    --scrap-blue:#5aa8ff;
    --scrap-blue-soft:#132b4d;
    --scrap-gold:#e8c268;
    --scrap-gold-line:#8a6d2f;
  }
}
:root[data-theme="dark"] {
  --scrap-bg:#0b1526;
  --scrap-card:#101f38;
  --scrap-card2:#152747;
  --scrap-line:#233a5c;
  --scrap-fg:#eaf1fa;
  --scrap-dim:#8fa2bd;
  --scrap-blue:#5aa8ff;
  --scrap-blue-soft:#132b4d;
  --scrap-gold:#e8c268;
  --scrap-gold-line:#8a6d2f;
}

/* ───────── 손가락으로 쓰는 화면에서의 공통 규칙 ─────────
   `any-pointer:coarse` 로 가른다. `pointer:coarse` 는 **주** 입력장치만 보므로,
   트랙패드를 붙인 아이패드나 마우스를 꽂은 터치 노트북처럼 '손가락으로도 쓰는' 기기가 빠져나간다.
   any- 를 쓰면 "손가락 입력이 하나라도 있으면" 참이 된다.

   애플·구글이 권하는 최소 누를 거리는 44px 다. 높이를 직접 키우면 줄 간격이 벌어지므로,
   **보이는 크기는 그대로 두고 누를 넓이만** `min-height` 로 넓힌다.

   예전에는 44px 짜리 ::after 띠를 위아래로 넘치게 깔았는데, 단추가 줄바꿈되면
   윗줄 띠가 아랫줄 단추를 덮어 **엉뚱한 단추가 눌렸다**(빌드메이커에서 '본 서버' 아래를
   누르면 KO/EN 이 실행됐다). 띠 방식으로 되돌리지 마라. */
@media (any-pointer:coarse) {
  #scrap-bar a, #scrap-bar button, .scrap-tap {
    min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  }
  /* 전역 바는 **누를 자리만 44px, 보이는 알약은 28px**.
     링크는 content-box 라 44px 에 안쪽 여백이 더해져 54px 짜리 세로로 길쭉한 타원이 됐고
     (? · GitHub · 고른 앱 아이콘), 바도 66px 로 두꺼워졌다. border-box 로 44px 에 맞추고,
     테두리·바탕은 단추 **안쪽**의 ::before 에 그린다(단추 밖으로 넘치지 않으니 이웃을 덮지 않는다). */
  html #scrap-bar { padding-top:2px; padding-bottom:2px; }   /* html 을 붙인 건 아래 좁은 화면 규칙(padding:5px 8px)보다 앞서려고 */
  #scrap-bar a, #scrap-bar button { box-sizing:border-box; }
  #scrap-tools > a, #scrap-tools > button { position:relative; z-index:0; min-width:32px;
    background:transparent !important; border-color:transparent !important; }
  #scrap-tools > a::before, #scrap-tools > button::before { content:""; position:absolute; left:0; right:0; top:8px; bottom:8px;
    z-index:-1; border-radius:99px; background:var(--scrap-tool-bg); border:1px solid var(--scrap-tool-line); }
  #scrap-bar .scrap-nav { position:relative; z-index:0; }
  html #scrap-bar .scrap-nav.on, html #scrap-bar .scrap-nav:hover { background:transparent; }   /* html: 아래쪽 .on 규칙보다 앞서려고 */
  #scrap-bar .scrap-nav.on::before { content:""; position:absolute; left:0; right:0; top:8px; bottom:8px;
    z-index:-1; border-radius:99px; background:rgba(255,255,255,.14); }
}
/* 위 알약 색 — scrap.js 의 paint() 가 넓은 화면에 직접 칠하는 색과 같다 */
:root { --scrap-tool-bg:#ffffff; --scrap-tool-line:#cdd9ea; }
:root[data-theme="dark"] { --scrap-tool-bg:#132b4d; --scrap-tool-line:#233a5c; }

/* ── 어디서든 네 갈래 ──────────────────────────────────────────────
   전역 바 안에서 브랜드 바로 옆에 선다. 바가 좁아지면 글자만 남기고
   테두리를 접어 넷이 그대로 들어가게 한다. */
#scrap-nav { display:inline-flex; gap:4px; margin-left:12px; vertical-align:middle; }
#scrap-bar .scrap-nav { text-decoration:none; font-size:12px; line-height:1;
  border-radius:99px; padding:4px 10px; opacity:.72; white-space:nowrap; }
#scrap-bar .scrap-nav:hover { opacity:1; background:rgba(255,255,255,.10); }
#scrap-bar .scrap-nav.on { opacity:1; font-weight:600;
  background:rgba(255,255,255,.14); }
/* 넓은 화면: 브랜드+갈래는 가운데, 오른쪽 단추(밝기·GitHub)는 바에 **떠 있다**.
   떠 있는 단추 몫은 양쪽 여백으로 비운다.
   (예전에는 이 여백을 scrap.js 가 인라인으로 박아서 아래 좁은 화면 규칙이 하나도 안 먹었다 —
    320px 에서 가운데 칸이 128px 뿐이라 바가 두 줄로 접히고, 단추가 갈래 아이콘 위에 얹혔다.
    배치는 여기서만 정한다.) */
#scrap-bar { padding:6px 164px; text-align:center; }   /* 오른쪽 단추 셋(?·밝기·GitHub) 몫 */
#scrap-tools { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:flex; gap:6px; align-items:center; }
/* 좁은 화면: 한 줄 가로 배치로 바꾼다. 브랜드 ─ 갈래 ─ 단추 순서로 흐르니
   아무것도 겹치지 않고, 바 높이도 한 줄로 끝난다. */
@media (max-width:860px) {
  #scrap-bar { display:flex; align-items:center; gap:6px; padding:5px 8px; text-align:left; }
  #scrap-brand { flex:0 0 auto; white-space:nowrap; }
  #scrap-nav { flex:1 1 auto; justify-content:center; margin-left:0; gap:2px; min-width:0; }
  #scrap-tools { position:static; transform:none; flex:0 0 auto; gap:4px; }
  #scrap-bar .scrap-tl { display:none; }            /* 'Light/Dark' 낱말은 접고 ☀/☾ 만 */
  #scrap-theme-btn, #scrap-gh, #scrap-help { padding:4px 8px !important; }
}
@media (max-width:560px) {
  #scrap-bar .scrap-nav { padding:4px 6px; font-size:11.5px; }
}

/* 갈래마다 제 아이콘 — 메인 타일에 쓰는 육각 그림 그대로다.
   `<img>` 가 아니라 **마스크**라서 바탕이 currentColor 를 따라간다(밝기 전환 OK). */
/* **색을 바에서 물려받는다.** 안 주면 브라우저 기본 링크색(파랑)이 걸리고,
   아이콘은 그 색을 그대로 뒤집어쓴다(currentColor 라서). */
#scrap-bar .scrap-nav { display:inline-flex; align-items:center; gap:5px; color:inherit; }
.scrap-ic { width:15px; height:15px; flex:0 0 auto; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.ic-talent { -webkit-mask-image:url(../images/main/talent.svg); mask-image:url(../images/main/talent.svg); }
.ic-codex  { -webkit-mask-image:url(../images/main/codex.svg);  mask-image:url(../images/main/codex.svg); }
.ic-replay { -webkit-mask-image:url(../images/main/replay.svg); mask-image:url(../images/main/replay.svg); }
.ic-viewer { -webkit-mask-image:url(../images/main/viewer.svg); mask-image:url(../images/main/viewer.svg); }
@media (max-width:560px) { .scrap-ic { width:14px; height:14px; } }
/* **아주 좁으면 글자를 접고 아이콘만 남긴다.** 네 갈래에 브랜드·밝기·GitHub 까지
   한 줄에 들어갈 수 없어 바가 옆으로 밀렸다(320px 에서 49px 넘침). 글자를 접으면
   넷이 다 들어가고, 무엇인지는 `title` 이 말해 준다. */
@media (max-width:520px) {
  /* '?'(사용법) 단추 몫을 만들려고 브랜드 글자도 접는다 — 로고만으로도 처음 화면으로 간다 */
  #scrap-brand .scrap-bt { display:none; }
  #scrap-bar .scrap-nav span { display:none; }
  #scrap-bar .scrap-nav { padding:4px 7px; gap:0; }
  .scrap-ic { width:16px; height:16px; }
}

/* ── 한글 줄바꿈 ──────────────────────────────────────────────
   브라우저 기본값은 한글을 **글자마다** 끊어서 폰 폭에서 '그/대로', '있/습니다' 처럼
   낱말 한가운데서 줄이 바뀌었다. 띄어쓰기 자리에서만 끊고(keep-all),
   한 낱말이 칸보다 길 때만 그 낱말을 쪼갠다(break-word — anywhere 와 달리
   표·flex 칸의 최소 폭을 키우지 않는다). 입력칸·코드는 건드리지 않는다. */
body { word-break:keep-all; overflow-wrap:break-word; }
input, textarea, pre, code, kbd, samp { word-break:normal; }