/* 미니사이트 공용 도구 틀 v1 — 2026-10-08, eurojackpot 리빌드에서 정함.
   MINISITE_REBUILD.md §2: 쪽마다 따로 꾸미지 않는다. 쪽은 이 파일을 불러 **클래스만** 붙인다.

   왜 이 규칙들인가 (eurojackpot before 캡처에서 실측)
     · 모바일 첫 화면이 사진 두 장이었다 — 번호판(도구 본체)이 2~3 스크롤 아래였다.
     · 사진에 width/height 가 없어 늦게 뜨며 아래 내용을 밀어낸다(CLS).
     · 언어 단추 19개가 두 줄을 먹었다.
     · h1 이 테마 단추와 겹쳤다.
   글(설명·FAQ·근거)은 **줄이지 않는다.** 감싸는 틀만 바꾼다 — 심사 중이다. */

/* 1) 사진: 자리를 미리 잡아 두고(CLS 0), 모바일에서는 띠처럼 얕게 */
.tool-photo { margin: .75rem 0; text-align: center; }
.tool-photo img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.tool-photo p { font-size: .75rem; opacity: .72; margin: .25rem 0 0; }
@media (max-width: 640px) {
  .tool-photo img { aspect-ratio: 21 / 7; }      /* 도구를 첫 화면으로 끌어올린다 */
  .tool-photo { margin: .5rem 0; }
}

/* 2) 제목이 테마 단추와 겹치지 않게 */
.tool-title, main > h1 { padding-right: 52px; }

/* 3) 언어·보조 단추 줄: 모바일에서 한 줄로 밀어 보기 */
@media (max-width: 640px) {
  .lang-bar {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .lang-bar::-webkit-scrollbar { display: none; }
  .lang-bar button { flex: 0 0 auto; min-height: 28px; }
}

/* 4) 손가락이 닿는 크기 — 모바일에서 주요 단추는 44px 이상 */
@media (max-width: 640px) {
  .btn-full, .btn-primary { min-height: 44px; }
}

/* 5) 결과는 크게, 근거는 바로 밑에 작게 (§2 원칙) */
.tool-result-big { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.tool-basis { font-size: .85rem; opacity: .78; margin-top: .4rem; }

/* 6) 자바스크립트가 채우는 자리를 **미리 비워 둔다** — CLS 의 가장 큰 원인.
   2026-10-08 실측: 번호판이 JS로 채워지며 eurojackpot 의 CLS 가 0.155 였다(한도 0.1).
   쪽마다 크기가 다르므로 쪽이 값을 준다:
     <div class="grid tool-reserve" style="--reserve-m:270px;--reserve-d:153px">
   브라우저에서 잰 값을 적는다 — 어림잡지 않는다. 내용이 더 크면 min-height 는 영향이 없다. */
.tool-reserve { min-height: var(--reserve-m, 0px); }
@media (min-width: 641px) {
  .tool-reserve { min-height: var(--reserve-d, var(--reserve-m, 0px)); }
}

/* 7) 흐린 글씨도 대비를 지킨다 — opacity 로 흐리면 대비가 깨진다.
   2026-10-08 실측(us-powerball): 바닥글 `<p style="opacity:.8">` 이 #828893/#f4f5f7 로
   대비 3.26 이었다(기준 4.5). opacity 대신 **색을 정한다**. */
.tool-muted { opacity: 1; color: #5a616e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-muted { color: #a9b1bd; }
}
:root[data-theme="dark"] .tool-muted { color: #a9b1bd; }

/* 8) 접었다 펴는 제목(FAQ)도 손가락이 닿는 크기로.
   실측: <summary> 가 350x21px 이라 터치 기준(24x24)에 못 미쳤다. */
summary { padding: .45rem 0; min-height: 24px; }
@media (max-width: 640px) { summary { padding: .6rem 0; } }

/* 9) 표가 좁은 화면에서 쪽을 가로로 밀지 않게 */
@media (max-width: 640px) {
  .tool-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tool-scroll-x > table { min-width: 460px; }
}

/* ── v2 (2026-10-09, 경쟁 분석 리뉴얼) ─────────────────────────────
   watts-amps-volts · air-filter-size-guide · wood-stain-calculator 에서 같이 쓴다.
   쪽마다 색 변수 이름이 달라서(--accent / --primary …) 공용 토큰을 두고 쪽 변수를 먼저 읽는다. */
[hidden] { display: none !important; }   /* .row{display:flex} 같은 쪽 CSS 가 hidden 을 이기지 못하게 */
:root { --t-acc: var(--accent, var(--primary, #1d4ed8)); --t-line: var(--border, #d6dbe3); --t-soft: rgba(127,127,127,.08); }

/* 10) 빠른 답 상자 — 검색어의 답을 첫 화면에 한 문단으로 */
.tool-answer { border: 1px solid var(--t-line); border-left: 4px solid var(--t-acc); border-radius: 10px;
  padding: .85rem 1rem; margin: .75rem 0 1rem; background: var(--t-soft); line-height: 1.65; }
.tool-answer > strong:first-child { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .2rem; }

/* 11) 목차 — 접었다 펴는 한 줄, 모바일에서 첫 화면을 먹지 않게 */
.tool-toc { border: 1px solid var(--t-line); border-radius: 10px; padding: .25rem .9rem; margin: 1rem 0; }
.tool-toc ol { margin: .25rem 0 .6rem; padding-left: 1.2rem; line-height: 1.9; }
.tool-toc a { text-decoration: none; }

/* 12) 분절 단추(모드 선택) — aria-pressed 로 상태를 알린다 */
.tool-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--t-line); border-radius: 10px; margin: 0 0 14px; }
.tool-seg button { flex: 1; min-height: 44px; border: 0; border-radius: 7px; background: transparent; font: inherit;
  font-weight: 600; font-size: .9rem; cursor: pointer; color: inherit; }
.tool-seg button[aria-pressed="true"] { background: var(--t-acc); color: #fff; }

/* 13) 빠른 값 칩 */
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.tool-chips button { min-height: 32px; padding: 0 10px; border: 1px solid var(--t-line); border-radius: 999px;
  background: transparent; font: inherit; font-size: .82rem; cursor: pointer; color: inherit; }
.tool-chips button:hover, .tool-chips button:focus-visible { border-color: var(--t-acc); }

/* 14) 값 + 단위 한 줄 입력 */
.tool-field { margin-bottom: 14px; }
.tool-field > label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.tool-unit { display: flex; gap: 6px; }
.tool-unit input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.tool-unit select { flex: 0 0 auto; width: auto; min-height: 44px; }
.tool-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 641px) { .tool-grid2 { grid-template-columns: 1fr 1fr; } }

/* 15) 결과 카드 묶음 + 계산 과정 + 동작 단추 */
.tool-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 641px) { .tool-results { grid-template-columns: repeat(4, 1fr); } }
.tool-results > div { border: 1px solid var(--t-line); border-radius: 10px; padding: 10px; text-align: center; }
.tool-results b { display: block; font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--t-acc); }
.tool-results span { display: block; font-size: .75rem; margin-top: 2px; }
.tool-work { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; background: var(--t-soft);
  border-radius: 8px; padding: .6rem .75rem; margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tool-actions button { min-height: 44px; padding: 0 14px; border: 1px solid var(--t-line); border-radius: 8px;
  background: transparent; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.tool-msg { min-height: 1.3em; font-size: .85rem; margin-top: 6px; }
.tool-warn { color: #b42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tool-warn { color: #ff8a80; } }
:root[data-theme="dark"] .tool-warn { color: #ff8a80; }

/* 16) 상태 막대(차단기 부하 등) */
.tool-meter { height: 8px; border-radius: 4px; background: var(--t-soft); overflow: hidden; margin-top: 4px; }
.tool-meter > i { display: block; height: 100%; background: var(--t-acc); }
.tool-meter > i.over { background: #c2410c; }

/* 17) 출처 줄 — 값 바로 밑에 붙는다 */
.tool-cite { font-size: .8rem; margin-top: .35rem; }

@media print {
  .tool-seg, .tool-chips, .tool-actions, .ad-slot, .blogreads, footer nav, button.toggle, .theme-toggle { display: none !important; }
}