/* 글꼴은 HTML head에서 언어별 Pretendard(한국어 Pretendard, 일본어 Pretendard JP, 그 밖 Pretendard Std)를 불러옵니다.
   디자인: 어느 나라에서도 낯설지 않은 중립적인 회색 + 파란 포인트, 둥근 카드, 큰 숫자. 기기 밝기 설정에 따라 어두운 화면도 지원. */
:root { color-scheme:light;
  --bg:#f4f5f8; --bg2:#eceef3; --card:#ffffff; --fg:#111318; --muted:#6a7180; --line:#e3e6ec;
  --screen:#f6f7fa; --key:#f1f3f6; --key-hover:#e8ebf0; --key-edge:rgba(17,19,24,.07);
  --op:#e9effe; --op-fg:#2457e6; --accent:#2f66f0; --accent-2:#1f4fd6; --accent-fg:#fff;
  --shadow:0 1px 2px rgba(17,19,24,.04), 0 12px 32px rgba(17,19,24,.07); }
@media (prefers-color-scheme:dark) {
  :root { color-scheme:dark;
    --bg:#0d0f13; --bg2:#151820; --card:#171a21; --fg:#eef0f4; --muted:#949bab; --line:#262a34;
    --screen:#12151b; --key:#20242d; --key-hover:#2a2f3a; --key-edge:rgba(0,0,0,.35);
    --op:#1b2846; --op-fg:#93b1ff; --accent:#4b7dff; --accent-2:#3a6af0; --accent-fg:#fff;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35); }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family:"Pretendard Variable", "Pretendard JP Variable", "Pretendard Std Variable", system-ui, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; }
button, input, select { font:inherit; color:inherit; }

/* 폭: 휴대폰 꽉 차게, 태블릿·컴퓨터는 계산기가 너무 넓어지지 않게 가운데 */
header, main, footer { width:100%; max-width:540px; margin:0 auto; padding-left:16px; padding-right:16px; }
header { display:flex; align-items:center; gap:10px; height:56px; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--fg); text-decoration:none; font-weight:800; font-size:17px; letter-spacing:-0.02em; }
.brand img { width:28px; height:28px; border-radius:8px; }
.lang { margin-inline-start:auto; max-width:11em; height:36px; padding:0 30px 0 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:14px; font-weight:600; color:var(--muted);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236a7180' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
[dir="rtl"] .lang { padding:0 12px 0 30px; background-position:left 12px center; }

/* 계산기 고르는 탭: 둥근 막대 안의 칸(진짜 링크라 검색엔진이 탭마다 따로 찾습니다). 넘치면 옆으로 밀어서 봅니다 */
.tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin:0 0 12px; padding:4px; border-radius:14px; background:var(--bg2); }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { flex:1 0 auto; padding:7px 12px; border-radius:10px; color:var(--muted); font-size:14px; font-weight:600; text-align:center; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; }
.tabs a:hover { color:var(--fg); }
.tabs a[aria-current="page"] { background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(17,19,24,.12); }

.card { background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:16px; }
.card:not(.doc) > h1 { font-size:13px; line-height:1.3; color:var(--muted); font-weight:700; letter-spacing:.02em; margin:2px 4px 8px; }

/* 계산기 화면 */
.screen { position:relative; padding:10px 14px 8px; margin-bottom:12px; border-radius:16px; background:var(--screen); text-align:right;
  min-height:92px; display:flex; flex-direction:column; justify-content:flex-end; }
.expr { min-height:1.5em; color:var(--muted); font-size:17px; word-break:break-all; font-variant-numeric:tabular-nums; }
.out { display:block; width:100%; padding:0; border:0; background:none; text-align:right; cursor:copy;
  font-size:clamp(32px, 10.5vw, 46px); font-weight:700; letter-spacing:-0.025em; line-height:1.15; font-variant-numeric:tabular-nums; word-break:break-all; }
.out.err { font-size:20px; color:#e5484d; }
.hint { position:absolute; left:14px; bottom:8px; margin:0; font-size:12px; color:var(--accent); font-weight:600; }
[dir="rtl"] .hint { left:auto; right:14px; }

/* 버튼 */
.keys { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.keys.sci { grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:8px; }
.keys button { height:clamp(46px, 8.2vh, 62px); border:0; border-radius:16px; background:var(--key); font-size:21px; font-weight:600; cursor:pointer;
  box-shadow:inset 0 -1px 0 var(--key-edge); transition:background .12s, transform .06s, filter .12s; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.keys.sci button { height:clamp(36px, 5.6vh, 46px); border-radius:12px; font-size:15px; }
.keys button:hover { background:var(--key-hover); }
.keys button:active { transform:scale(.96); }
.keys .op { background:var(--op); color:var(--op-fg); font-size:24px; }
.keys .fn { color:var(--muted); }
.keys .eq { background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:var(--accent-fg); font-size:24px; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.keys .eq:hover { filter:brightness(1.06); background:linear-gradient(180deg, var(--accent), var(--accent-2)); }
.keys .on { background:var(--fg); color:var(--bg); }
/* 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어도 계산기 버튼·숫자 배치는 세계 공통 그대로 */
[dir="rtl"] .calc, [dir="rtl"] .frac, [dir="rtl"] input { direction:ltr; }

/* 입력 칸 계산기 (퍼센트·날짜·시간·나이·분수): 문장 안에 칸, 답은 자리가 있으면 같은 줄 오른쪽에(한 화면에 결과까지 보이게) */
.rows { display:grid; gap:8px; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:8px 10px; border-radius:16px; background:var(--screen); border:1px solid transparent; transition:border-color .15s; }
.row:focus-within { border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.row .q { display:flex; flex-wrap:wrap; align-items:center; gap:5px; flex:1 1 auto; font-size:14.5px; font-weight:500; }
.row input, .row select { width:4.3em; height:38px; padding:0 9px; border:1px solid var(--line); border-radius:11px; background:var(--card); font-size:16px; font-weight:600;
  text-align:right; font-variant-numeric:tabular-nums; transition:border-color .15s, box-shadow .15s; }
.row input:focus, .row select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.row input[type="date"], .row input[type="time"] { width:auto; min-width:8.2em; padding:0 7px; text-align:left; font-size:14.5px; }
.row select { width:auto; text-align:left; }
.row .res { flex:0 1 auto; margin-inline-start:auto; text-align:end; font-size:21px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; color:var(--fg); font-variant-numeric:tabular-nums; cursor:copy; }
.row .res:empty { display:none; }
.row .res small { display:block; margin-top:0; font-size:12px; font-weight:500; letter-spacing:0; line-height:1.4; color:var(--muted); }
.frac { display:inline-grid; gap:3px; justify-items:center; }
.frac input { width:4.4em; height:36px; text-align:center; }
.frac i { width:100%; height:2px; background:var(--fg); border-radius:2px; }

/* 최근 계산 */
.history { margin:10px 0 0; padding:0; list-style:none; font-size:14px; color:var(--muted); }
.history li { display:flex; justify-content:space-between; gap:12px; padding:7px 6px; border-top:1px solid var(--line); cursor:pointer; border-radius:8px; }
.history li:hover { background:var(--screen); }
.history li span:last-child { color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; }

/* 첫 화면: 휴대폰·태블릿·컴퓨터 모두 계산기와 광고만. 설명 글은 화면 높이만큼 아래에서 시작합니다 */
.stage { min-height:100vh; min-height:100svh; padding-bottom:24px; }
.ad { display:block; min-height:280px; margin:24px 0; }
.ad:empty { display:none; }
/* 맨 위 광고 칸: 태블릿·컴퓨터 728×90 (본문보다 넓어서 가운데 정렬로 밖으로 나오게) */
.ad.ad-top, .ad.ad-top:empty { display:block; width:min(728px, calc(100vw - 32px)); height:90px; min-height:90px; margin:0 0 22px 50%; transform:translateX(-50%); overflow:hidden; }
/* 넓은 컴퓨터 화면: 계산기 양옆 세로 광고 칸 160×600 */
.ad.rail { display:none; }

/* 설명 글 */
.doc { margin-top:8px; padding:24px; }
.doc h1 { font-size:26px; line-height:1.3; letter-spacing:-0.02em; margin:4px 0 14px; }
.doc h2 { font-size:19px; line-height:1.4; margin:30px 0 10px; letter-spacing:-0.01em; }
.doc h2:first-child { margin-top:4px; }
.doc p, .doc li { color:color-mix(in srgb, var(--fg) 88%, var(--muted)); }
.doc ul, .doc ol { padding-inline-start:1.3em; }
.doc li { margin:4px 0; }
.doc table { width:100%; border-collapse:collapse; font-size:15px; margin:6px 0; }
.doc th { text-align:start; font-size:13px; color:var(--muted); font-weight:700; padding:8px 8px; border-bottom:1px solid var(--line); }
.doc td { text-align:start; padding:9px 8px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.doc tr:last-child td { border-bottom:0; }
kbd { padding:1px 7px; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; background:var(--card); font-family:inherit; font-size:13px; }

footer { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; padding-top:24px; padding-bottom:40px; color:var(--muted); font-size:14px; }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:var(--fg); }

/* 휴대폰 언어가 페이지와 다를 때 맨 위에 한 번 뜨는 안내(그 사람 언어 이름만) */
.langbar { position:fixed; top:0; left:0; right:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 16px; background:var(--fg); color:var(--bg); font-size:15px; font-weight:600; }
.langbar a { color:inherit; text-decoration:none; }
.langbar button { border:0; background:none; color:inherit; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; opacity:.7; }

/* ---- 휴대폰 (가로 559px 이하) ---- */
@media (max-width:559px) {
  header { height:48px; }
  .brand { font-size:16px; }
  .brand img { width:26px; height:26px; }
  .lang { height:32px; font-size:13px; }
  .tabs { margin-bottom:8px; }
  .tabs a { padding:6px 10px; font-size:13.5px; }
  .card { padding:12px; border-radius:22px; }
  .screen { min-height:84px; margin-bottom:10px; }
  /* 맨 위 광고 칸이 있을 때(화면 높이 600 초과): 390×664에서 = 버튼 아래 끝이 604px 안 */
  .keys button { height:clamp(40px, calc((100svh - 460px) / 5), 60px); border-radius:14px; }
  .ad.ad-top, .ad.ad-top:empty { width:100%; max-width:320px; height:100px; min-height:100px; margin:0 auto 10px; transform:none; }
  .stage { padding-bottom:72px; }  /* 화면 아래 띠 광고(앵커) 자리 */
  .doc { padding:20px 18px; }
}
@media (max-width:559px) and (max-height:600px) {
  .ad.ad-top, .ad.ad-top:empty { display:none; }
  .keys button { height:clamp(40px, calc((100svh - 340px) / 5), 60px); }
}

/* ---- 태블릿 (560~1023px) ---- */
@media (min-width:560px) {
  header, main, footer { max-width:560px; }
  .card { padding:20px; }
  .tabs a { font-size:14.5px; }
  .keys { gap:10px; }
  .keys button { height:clamp(52px, calc((100vh - 470px) / 5), 68px); font-size:22px; }
  .keys.sci button { height:clamp(38px, 4.6vh, 48px); font-size:16px; }
}

/* ---- 컴퓨터 (1024px 이상): 계산기는 가운데, 넓으면 양옆 세로 광고 ---- */
@media (min-width:1024px) {
  header, main, footer { max-width:600px; }
  header { height:64px; }
  .keys button { height:clamp(48px, calc((100vh - 470px) / 5), 64px); }
  .keys.sci button { height:clamp(34px, calc((100vh - 470px) / 9), 46px); }
}
@media (min-width:1100px) {
  .ad.rail, .ad.rail:empty { display:block; position:fixed; top:170px; width:160px; height:600px; min-height:600px; margin:0; }
  .rail-l { left:calc(50% - 300px - 200px); }
  .rail-r { right:calc(50% - 300px - 200px); }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } .keys button:active { transform:none; } }
/* 공학용(버튼 8줄): 태블릿·컴퓨터에서 화면 높이에 맞춰 버튼 높이를 정해 = 버튼까지 첫 화면에.
   버튼 말고 나머지 높이 ≈ 340px(맨 위 광고가 있으면 +112px). 숫자 5줄 + 함수 3줄(숫자의 3/4) = 숫자 높이 × 7.25
   shortcut: 광고 칸이 있으면 화면 높이 750px 아래(노트북 등)에서 = 버튼이 30~40px 잘림, 승인 뒤 광고(SLOTS) 켤 때 맞출 것 */
@media (min-width:560px) {
  .keys.sci ~ .keys button { height:clamp(34px, calc((100svh - 360px) / 7.25), 64px); }
  .keys.sci button { height:clamp(26px, calc((100svh - 360px) / 9.7), 46px); }
  .stage:has(.ad-top) .keys.sci ~ .keys button { height:clamp(34px, calc((100svh - 470px) / 7.25), 64px); }
  .stage:has(.ad-top) .keys.sci button { height:clamp(26px, calc((100svh - 470px) / 9.7), 46px); }
}
/* 꼬리말 언어 목록: 검색엔진이 다른 언어 페이지를 찾을 수 있게(사람에게는 작게) */
footer .langs { flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px; margin-top:8px; font-size:12.5px; }
/* 휴대폰: 입력 칸 계산기는 결과까지 첫 화면에 들어오게 한 번 더 촘촘하게 */
@media (max-width:559px) {
  header { height:44px; }
  .card:not(.doc) > h1 { font-size:12px; margin:0 4px 6px; line-height:1.2; }
  .rows { gap:6px; }
  .row { padding:6px 10px; border-radius:14px; }
  .row input, .row select { height:34px; border-radius:10px; }
  .frac input { height:32px; }
  .row .res { font-size:20px; line-height:1.2; }
  .row[data-calc^="pct-"] .res small { display:inline; margin-inline-start:6px; }
  .tabs { padding:3px; }
  .tabs a { padding:5px 10px; }
}
@media (max-width:559px) {
  .row input:not([type="date"]):not([type="time"]) { width:3.7em; padding:0 7px; font-size:15.5px; }
  .row .q { font-size:14px; gap:4px; }
  .row { gap:2px 8px; }
}
/* 휴대폰: 카드 안 작은 제목은 바로 위 탭이 같은 이름을 보여 주므로 화면에서만 숨김(검색엔진·화면낭독기는 그대로 읽음) */
@media (max-width:559px) {
  .card:not(.doc) > h1 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tabs { margin-bottom:6px; }
  .rows { gap:5px; }
  .row { padding:5px 9px; }
  .row input, .row select { height:32px; }
  .frac input { height:30px; }
}
@media (max-width:559px) and (max-height:600px) { header { height:40px; } }
/* 휴대폰 공학용: 함수 버튼 15개를 8칸 2줄로 접고, 숫자 버튼을 조금 낮춰 = 버튼까지 첫 화면에 */
@media (max-width:559px) {
  .keys.sci { grid-template-columns:repeat(8, 1fr); gap:4px; margin-bottom:6px; }
  .keys.sci button { height:34px; padding:0; border-radius:9px; font-size:12.5px; }
  .keys.sci ~ .keys { gap:6px; }
  .keys.sci ~ .keys button { height:clamp(36px, calc((100svh - 520px) / 5), 54px); }
  .calc:has(.keys.sci) .screen { min-height:68px; margin-bottom:8px; }
}
@media (max-width:559px) and (max-height:600px) {
  .keys.sci ~ .keys button { height:clamp(36px, calc((100svh - 400px) / 5), 54px); }
}

/* 전문가 점검 반영 */
/* 휴대폰: 맨 위 광고와 탭 사이 간격을 넓힘(실수 클릭 방지) */
@media (max-width:559px) { .ad.ad-top, .ad.ad-top:empty { margin-bottom:16px; } }
/* 아이폰은 16px보다 작은 입력 칸을 누르면 화면을 확대하므로 모든 입력 칸·선택 상자는 16px */
.row input, .row select, .row input[type="date"], .row input[type="time"], .lang { font-size:16px !important; }
/* 태블릿·컴퓨터: 계산기는 탭 바로 아래에(가운데 정렬하면 칸이 적은 탭에서 위 공백이 너무 커서, 2026-11-14 사용자 요청) */
@media (min-width:560px) { .stage { display:flex; flex-direction:column; } .stage > .card { margin-bottom:auto; } .stage > .tabs { margin-top:0; } }
/* 양옆 세로 광고는 화면 높이가 충분할 때만(노트북에서 잘리지 않게) */
@media (min-width:1100px) and (max-height:799px) { .ad.rail, .ad.rail:empty { display:none; } }
/* 태블릿·컴퓨터 맨 위 광고 칸 가운데 맞춤: 아랍어(오른쪽→왼쪽)에서도 옆으로 넘치지 않게 flex로 */
@media (min-width:560px) { .ad.ad-top, .ad.ad-top:empty { margin:0 0 22px; transform:none; align-self:center; } }
/* 가이드 글 */
.doc h3 { font-size:16px; margin:20px 0 6px; }
/* 사용자 시험 반영: 퍼센트 칸은 1,234,567처럼 큰 숫자도 안 잘리게 넓힘 / 어두운 화면에서 지금 탭이 또렷하게 / 작은 글자 키움 */
@media (max-width:559px) { .row[data-calc^="pct-"] input:not([type="date"]):not([type="time"]) { width:4.4em; padding:0 4px; } }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .tabs a[aria-current="page"] { background:var(--key-hover); } }
.row .res small { font-size:13px; }
/* 화면 높이가 낮은 휴대폰(600px 이하): 입력 칸 계산기 간격을 조금 더 줄여 결과까지 첫 화면에 */
@media (max-width:559px) and (max-height:600px) {
  .rows { gap:4px; }
  .row { padding:4px 9px; }
  .row .res { font-size:19px; }
}
/* 계산기 아래 설명: 주제마다 작은 카드(블로그 글처럼 보이지 않게), 질문은 눌러서 펼치기, 관련 가이드는 링크 카드 */
.info { display:grid; gap:12px; margin-top:16px; }
.info > .doc { margin:0; padding:20px 22px; min-width:0; }
.info h2, .info h2:first-child { font-size:17px; margin:0 0 10px; }
.info p { margin:0 0 8px; font-size:15px; line-height:1.65; }
.info p:last-child { margin-bottom:0; }
.info table { margin:0 0 10px; }
.faq details { border-top:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; font-weight:600; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--muted); font-size:20px; font-weight:400; line-height:1; }
.faq details[open] summary::after { content:'−'; }
.faq details p { padding-bottom:13px; }
.doc .links { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.doc .links li { margin:0; }
.links a { display:block; padding:12px 14px; border-radius:14px; background:var(--screen); color:var(--fg); text-decoration:none; }
.links a:hover { background:var(--key-hover); }
.links b { display:block; font-size:15px; }
.links span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font-size:13px; color:var(--muted); }
@media (max-width:559px) { .info > .doc { padding:18px; } }
/* 한국어는 단어 중간에서 줄이 바뀌지 않게(상용로그 → 상/용로그 방지). 아주 긴 단어만 예외로 끊음 */
:lang(ko) { word-break:keep-all; overflow-wrap:break-word; }
/* 가이드 글의 첨자(log₂, 10⁻³): 유니코드 첨자 글자는 Pretendard에 없어서 <sub>/<sup>로 숫자를 작게. 줄 간격은 그대로 */
.doc sub, .doc sup { font-size:.72em; line-height:0; }
.doc .tbl { overflow-x:auto; margin:6px 0; }
.doc .tbl table { margin:0; }
/* 글 속 링크는 파란색 대신 회색 + 얇은 밑줄(깔끔하게, 2026-11-14 사용자 요청). 링크 카드는 그대로 */
.doc a { color:var(--muted); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset:3px; }
.doc a:hover { color:var(--fg); text-decoration-color:currentColor; }
.doc .links a { color:var(--fg); text-decoration:none; }
/* 가이드 글 끝 "계산기 열기": 계산기 = 버튼과 같은 파란 버튼 하나 */
.doc a.try { display:inline-block; margin-top:8px; padding:12px 18px; border-radius:14px; background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:var(--accent-fg); font-weight:700; text-decoration:none; }
.doc a.try:hover { color:var(--accent-fg); filter:brightness(1.06); }