/*
 * ToolayBox 공통 스타일 (모든 페이지)
 * - 사이트 헤더 · 빠른 이동(ALL TOOLS) 드로어 · 토스트 · 툴 정보 영역 · 푸터
 * - 툴 페이지에서는 각 툴의 style.css보다 먼저 불러옵니다. 툴 화면과 겹치지 않도록 클래스는 모두 tb- 접두어,
 *   변수는 --tb- 접두어만 씁니다. body · 태그 선택자는 건드리지 않습니다.
 */
:root{
  --tb-bg:#f7f6fa;
  --tb-surface:#ffffff;
  --tb-text:#353144;
  --tb-accent:#8b73ae;
  --tb-divider:color-mix(in srgb,#353144 14%,transparent);
  --tb-divider-soft:color-mix(in srgb,#353144 7%,transparent);
  --tb-accent-100:#f3eef9;
  --tb-accent-200:#e7dcf3;
  --tb-accent-300:#d3c3e6;
  --tb-accent-600:#7d66a0;
  --tb-accent-700:#6a5689;
  --tb-accent-800:#4f3f69;
  --tb-accent-900:#3a2e4f;
  --tb-n-100:#f6f4f9;
  --tb-n-200:#ebe7f0;
  --tb-n-500:#a39dad;
  --tb-n-600:#7f798b;
  --tb-n-700:#655f71;
  --tb-n-800:#4a4556;
  --tb-n-900:#353144;
  --tb-tone-tools:#b9a4d2;
  --tb-tone-doc:#ead698;
  --tb-tone-media:#a9c6e3;
  --tb-tone-test:#efc4b6;
  --tb-tone-play:#b5d3c5;
  --tb-kr:"Pretendard Variable",Pretendard,"IBM Plex Sans KR",system-ui,-apple-system,sans-serif;
  --tb-head:"Barlow Condensed","Pretendard Variable",Pretendard,system-ui,sans-serif;
  --tb-mono:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --tb-max:1240px;
  --tb-shadow:0 12px 32px color-mix(in srgb,#353144 22%,transparent);
}

/* ---------- 공통 버튼 · 프레임 ---------- */
.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--tb-divider);border-radius:0;background:transparent;color:var(--tb-text);font-family:var(--tb-head);font-weight:600;font-size:14px;line-height:1;letter-spacing:.04em;text-decoration:none;cursor:pointer;white-space:nowrap}
.tb-btn:hover{background:color-mix(in srgb,var(--tb-text) 7%,transparent);color:var(--tb-text)}
.tb-btn:focus-visible,.tb-site a:focus-visible,.tb-drawer a:focus-visible,.tb-footer a:focus-visible{outline:2px solid var(--tb-accent);outline-offset:2px}
.tb-btn--primary{background:var(--tb-accent);border-color:var(--tb-accent);color:#fff}
.tb-btn--primary:hover{background:var(--tb-accent-600);color:#fff}
.tb-btn--icon{width:36px;padding:0}
.tb-btn[disabled],.tb-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.tb-btn svg{display:block;flex:none}

.tb-frame{position:relative;border:1px solid var(--tb-divider)}
.tb-frame>.tb-corner{position:absolute;width:11px;height:11px;color:color-mix(in srgb,var(--tb-text) 55%,transparent);pointer-events:none}
.tb-frame>.tb-corner::before,.tb-frame>.tb-corner::after{content:"";position:absolute;background:currentColor}
.tb-frame>.tb-corner::before{left:5px;top:0;width:1px;height:100%}
.tb-frame>.tb-corner::after{top:5px;left:0;width:100%;height:1px}
.tb-corner.tl{top:-6px;left:-6px}.tb-corner.tr{top:-6px;right:-6px}.tb-corner.bl{bottom:-6px;left:-6px}.tb-corner.br{bottom:-6px;right:-6px}

.tb-mono{font-family:var(--tb-mono)}
.tb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 사이트 헤더 ---------- */
.tb-site{position:relative;z-index:60;background:color-mix(in srgb,var(--tb-bg) 92%,transparent);border-bottom:1px solid var(--tb-divider);font-family:var(--tb-kr);color:var(--tb-text);-webkit-font-smoothing:antialiased}
.tb-site--home{position:sticky;top:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tb-site-in{height:48px;padding:0 28px;display:flex;align-items:center;gap:24px}
.tb-site--home .tb-site-in{max-width:var(--tb-max);height:64px;margin:0 auto;padding:0 24px;gap:28px}
.tb-logo{display:flex;align-items:center;gap:9px;flex:none;color:var(--tb-text);text-decoration:none}
.tb-logo:hover{color:var(--tb-text)}
.tb-mark{width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;gap:2px;flex:none}
.tb-mark i{display:block}
.tb-mark i:nth-child(1){background:var(--tb-tone-tools)}.tb-mark i:nth-child(2){background:var(--tb-tone-test)}
.tb-mark i:nth-child(3){background:var(--tb-tone-play)}.tb-mark i:nth-child(4){background:var(--tb-tone-doc)}
.tb-word{font-family:var(--tb-head);font-weight:600;font-size:19px;letter-spacing:.04em;line-height:1}
.tb-word b{font-weight:600;color:var(--tb-accent)}
.tb-site--home .tb-mark{width:26px;height:26px;gap:3px}
.tb-site--home .tb-word{font-size:23px}
.tb-nav{flex:1;min-width:0;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-family:var(--tb-head);font-weight:600;font-size:14px;letter-spacing:.06em}
.tb-nav::-webkit-scrollbar{display:none}
.tb-nav a{color:var(--tb-n-800);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.tb-nav a:hover{color:var(--tb-accent)}
.tb-nav a[aria-current="true"]{color:var(--tb-text);border-bottom-color:var(--tb-accent)}
.tb-site--home .tb-nav{font-size:15px;gap:22px}
.tb-actions{display:flex;align-items:center;gap:6px;flex:none}
.tb-lang{font-size:12.5px;letter-spacing:.06em}

.tb-fav{gap:6px;font-family:var(--tb-kr);font-weight:500;font-size:12.5px;letter-spacing:0}
.tb-fav svg{color:var(--tb-n-500)}
.tb-fav[aria-pressed="true"]{border-color:var(--tb-accent);color:var(--tb-accent-800)}
.tb-fav[aria-pressed="true"] svg{color:var(--tb-accent);fill:currentColor}

/* 툴 상단바 안의 H1 · 짧은 설명 (툴 style.css가 상단바 모양을 정함) */
.tb-site + .app{min-height:calc(100vh - 49px);min-height:calc(100dvh - 49px)}
.topbar h1{margin:0}
.topbar .brand{flex-wrap:wrap;row-gap:2px}
.tb-lead{flex-basis:100%;margin:0;font-size:12.5px;line-height:1.5;color:var(--tb-n-700);font-weight:400;letter-spacing:0}

/* ---------- 슬라이더 직접 입력 · 단계 버튼 (툴 안에서 씀, 툴의 --accent · --ink 색을 따라감) ---------- */
.tb-num{box-sizing:border-box;width:4.6em;height:30px;padding:0 8px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:6px;background:color-mix(in srgb,currentColor 3%,transparent);color:inherit;font:inherit;font-family:var(--mono,var(--tb-mono));font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.tb-num:hover{border-color:color-mix(in srgb,currentColor 40%,transparent)}
.tb-num:focus{outline:2px solid var(--accent,var(--ink,var(--tb-accent)));outline-offset:0;border-color:transparent}
.tb-num:disabled{opacity:.45}
.tb-num-wrap{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted,var(--tb-n-600))}
.tb-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tb-presets button{min-width:38px;height:28px;padding:0 9px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s,border-color .12s}
.tb-presets button:hover{border-color:var(--accent,var(--ink,var(--tb-accent)))}
.tb-presets button[aria-pressed="true"]{background:var(--accent,var(--ink,var(--tb-accent)));border-color:var(--accent,var(--ink,var(--tb-accent)));color:#fff}
.tb-presets button:disabled{opacity:.4;cursor:default}
.tb-presets button:focus-visible{outline:2px solid var(--accent,var(--ink,var(--tb-accent)));outline-offset:2px}
@media (pointer:coarse){.tb-presets button{height:32px;min-width:44px}.tb-num{height:34px;font-size:16px}}

/* ---------- 빠른 이동 드로어 ---------- */
.tb-drawer-back{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--tb-n-900) 40%,transparent);opacity:0;pointer-events:none;transition:opacity .2s}
.tb-drawer{position:fixed;top:0;right:0;bottom:0;z-index:85;width:min(420px,92vw);display:flex;flex-direction:column;background:var(--tb-bg);border-left:1px solid var(--tb-divider);transform:translateX(100%);transition:transform .22s ease;font-family:var(--tb-kr);color:var(--tb-text);visibility:hidden}
.tb-drawer-open .tb-drawer-back{opacity:1;pointer-events:auto}
.tb-drawer-open .tb-drawer{transform:none;visibility:visible}
.tb-drawer-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--tb-divider)}
.tb-drawer-head strong{font-family:var(--tb-head);font-weight:600;font-size:18px;letter-spacing:.08em}
.tb-drawer-head .tb-btn{margin-left:auto}
.tb-drawer-search{padding:14px 18px 8px}
.tb-input{width:100%;height:44px;padding:0 12px;border:1px solid var(--tb-divider);border-radius:0;background:var(--tb-surface);color:var(--tb-text);font:inherit;font-size:15px;box-sizing:border-box}
.tb-input:focus{outline:2px solid var(--tb-accent);outline-offset:-1px}
.tb-drawer-tabs{display:flex;gap:6px;padding:4px 18px 8px;overflow-x:auto;scrollbar-width:none}
.tb-drawer-tabs::-webkit-scrollbar{display:none}
.tb-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--tb-divider);background:transparent;color:var(--tb-text);font-family:var(--tb-kr);font-size:13px;font-weight:500;cursor:pointer}
.tb-chip:hover{border-color:var(--tb-accent)}
.tb-chip[aria-pressed="true"]{background:var(--tb-accent-900);border-color:var(--tb-accent-900);color:#fff}
.tb-chip small{font-family:var(--tb-mono);font-size:10.5px;opacity:.7}
.tb-drawer-body{flex:1;overflow:auto;padding:4px 18px 28px;overscroll-behavior:contain}
.tb-dgroup{margin-top:16px}
.tb-dlabel{display:flex;justify-content:space-between;font-family:var(--tb-mono);font-size:10.5px;letter-spacing:.06em;color:var(--tb-accent-700);padding-bottom:6px;border-bottom:1px solid var(--tb-divider);margin-bottom:2px}
.tb-dlabel span{color:var(--tb-n-600)}
.tb-dlink{display:flex;align-items:center;gap:10px;padding:8px 8px;color:var(--tb-text);text-decoration:none;font-size:14px}
.tb-dlink:hover{background:var(--tb-accent-100);color:var(--tb-text)}
.tb-dlink .tb-no{font-family:var(--tb-mono);font-size:10.5px;color:var(--tb-n-600);width:50px;flex:none}
.tb-dlink .tb-dt{flex:1;min-width:0}
.tb-dlink .tb-ds{font-size:12px;color:var(--tb-n-600);flex:none}
.tb-empty{font-size:13px;color:var(--tb-n-600);padding:10px 0;line-height:1.6}
.tb-empty a{color:var(--tb-accent-700)}
.tb-badge{display:inline-flex;align-items:center;height:16px;padding:0 5px;font-family:var(--tb-mono);font-size:9.5px;letter-spacing:.04em;background:var(--tb-accent-100);color:var(--tb-accent-800);flex:none}
.tb-badge--beta{background:#fdf1d6;color:#7a5a12}

/* ---------- 토스트 ---------- */
.tb-toast{position:fixed;left:50%;bottom:24px;z-index:9999;transform:translate(-50%,12px);padding:11px 16px;background:var(--tb-text);color:#fff;font-family:var(--tb-kr);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--tb-shadow)}
.tb-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 툴 페이지 정보 영역 ---------- */
.tb-info{max-width:1080px;margin:0 auto;padding:56px 28px 8px;display:flex;flex-direction:column;gap:24px;font-family:var(--tb-kr);color:var(--tb-text);overflow-wrap:anywhere}
.tb-steps li>*,.tb-steps li{min-width:0}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.tb-card{position:relative;padding:24px;background:var(--tb-surface);border:1px solid var(--tb-divider)}
.tb-card h2{margin:0 0 14px;font-family:var(--tb-kr);font-size:17px;font-weight:700;letter-spacing:-.02em}
.tb-eyebrow{display:block;margin-bottom:6px;font-family:var(--tb-mono);font-size:10.5px;letter-spacing:.1em;color:var(--tb-accent-700)}
.tb-steps{margin:0;padding:0;list-style:none;counter-reset:tb-step;display:flex;flex-direction:column;gap:10px}
.tb-steps li{counter-increment:tb-step;display:flex;gap:12px;font-size:14px;line-height:1.65;color:var(--tb-n-800)}
.tb-steps li::before{content:counter(tb-step,decimal-leading-zero);flex:0 0 26px;font-family:var(--tb-mono);font-size:11px;line-height:24px;color:var(--tb-accent-700)}
.tb-related{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.tb-related a{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--tb-divider-soft);color:var(--tb-text);text-decoration:none}
.tb-related li:first-child a{border-top:0}
.tb-related a:hover{background:var(--tb-accent-100)}
.tb-related-icon{flex:0 0 34px;height:34px;display:grid;place-items:center;background:var(--tb-n-100);font-size:17px}
.tb-related-text{display:flex;flex-direction:column;min-width:0}
.tb-related-name{font-size:14.5px;font-weight:600}
.tb-related-desc{font-size:12px;color:var(--tb-n-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-faq details{border-top:1px solid var(--tb-divider)}
.tb-faq details:last-of-type{border-bottom:1px solid var(--tb-divider)}
.tb-faq summary{display:flex;justify-content:space-between;gap:16px;padding:14px 2px;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary::after{content:"+";font-family:var(--tb-mono);color:var(--tb-n-600)}
.tb-faq details[open] summary::after{content:"–"}
.tb-faq details p{margin:0 0 16px;padding:0 2px;font-size:14px;line-height:1.75;color:var(--tb-n-800)}

/* ---------- 푸터 ---------- */
.tb-footer{overflow-wrap:anywhere;margin-top:56px;border-top:1px solid var(--tb-divider);background:color-mix(in srgb,var(--tb-text) 3%,var(--tb-bg));font-family:var(--tb-kr);color:var(--tb-text);word-break:keep-all;-webkit-font-smoothing:antialiased}
.tb-footer-in{max-width:var(--tb-max);margin:0 auto;padding:52px 24px 0}
.tb-footer-top{display:flex;flex-wrap:wrap;gap:40px 56px}
.tb-footer-brand{flex:1 1 280px;max-width:380px;display:flex;flex-direction:column;gap:14px}
.tb-footer-brand .tb-mark{width:24px;height:24px;gap:3px}
.tb-footer-brand .tb-word{font-size:22px}
.tb-footer-slogan{font-size:16px;font-weight:700;letter-spacing:-.02em}
.tb-footer-desc{margin:0;font-size:14px;line-height:1.75;color:var(--tb-n-700)}
.tb-footer-nav{flex:2 1 560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:28px 24px}
.tb-footer-h{font-family:var(--tb-head);font-weight:600;font-size:14px;letter-spacing:.12em;color:var(--tb-n-600);margin:0 0 8px}
.tb-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tb-footer li a,.tb-footer li>span{display:inline-flex;align-items:center;gap:8px;min-height:34px;font-size:14px;color:var(--tb-n-800);text-decoration:none;text-underline-offset:4px}
.tb-footer li a:hover{color:var(--tb-accent-700);text-decoration:underline}
.tb-footer li a[aria-current="true"]{font-weight:700;color:var(--tb-text)}
.tb-footer li a[aria-current="true"]::before{content:"";width:6px;height:6px;background:var(--tb-accent);flex:none}
.tb-footer li>span{color:var(--tb-n-500);cursor:not-allowed}
.tb-footer li>span em{font-style:normal;font-size:11px;border:1px solid var(--tb-divider);padding:1px 6px;color:var(--tb-n-600)}
.tb-footer-bottom{margin-top:44px;padding:20px 0 28px;border-top:1px solid var(--tb-divider);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--tb-n-700)}
.tb-footer-bottom small{font-size:12.5px;color:var(--tb-n-600)}

@media (max-width:640px){
  .tb-site-in{padding:0 16px;gap:14px}
  .tb-site--home .tb-site-in{height:56px;padding:0 16px;gap:14px}
  .tb-site--home .tb-mark{width:22px;height:22px}
  .tb-site--home .tb-word{font-size:19px}
  .tb-nav{gap:14px;font-size:13px;mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .tb-site--home .tb-nav{font-size:13.5px;gap:14px}
  .tb-lang,.tb-fav-text{display:none}
  .tb-fav{width:36px;padding:0}
  .tb-info{padding:40px 16px 8px}
  .tb-card{padding:20px 18px}
  .tb-footer-in{padding:40px 16px 0}
}
@media (max-width:380px){
  .tb-site .tb-word,.tb-site--home .tb-word{font-size:16px}
  .tb-site .tb-mark{width:18px;height:18px}
  .tb-site-in,.tb-site--home .tb-site-in{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .tb-drawer,.tb-drawer-back,.tb-toast{transition:none}
}
@media print{
  .tb-site,.tb-info,.tb-footer,.tb-drawer,.tb-drawer-back,.tb-toast{display:none !important}
}

.hm-en-note{display:block;margin-top:6px;font-size:13px;color:var(--tb-n-600)}
.tb-lang{gap:4px}
.tb-lang a{color:var(--tb-n-500);text-decoration:none}
.tb-lang a:hover{color:var(--tb-accent)}
.tb-lang a[aria-current="true"]{color:var(--tb-text)}
.tb-lang i{font-style:normal;color:var(--tb-n-500)}

/* ---------- 다크 모드 (지원 페이지만: head 스크립트가 <html data-theme="dark"> 지정) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --tb-bg:#15131b;
  --tb-surface:#1d1a25;
  --tb-text:#e9e5f0;
  --tb-accent:#b39bd6;
  --tb-divider:color-mix(in srgb,#e9e5f0 14%,transparent);
  --tb-divider-soft:color-mix(in srgb,#e9e5f0 7%,transparent);
  --tb-accent-100:#2a2438;
  --tb-accent-200:#352c47;
  --tb-accent-300:#4a3e62;
  --tb-accent-600:#c3aee0;
  --tb-accent-700:#cdbbe6;
  --tb-accent-800:#ddd0ef;
  --tb-accent-900:#ece4f7;
  --tb-n-100:#211e29;
  --tb-n-200:#2c2836;
  --tb-n-500:#7c7689;
  --tb-n-600:#a19bac;
  --tb-n-700:#bbb5c5;
  --tb-n-800:#d4cfdc;
  --tb-n-900:#e9e5f0;
  --tb-tone-tools:#8f7bab;
  --tb-tone-doc:#b8a65f;
  --tb-tone-media:#7d9cbd;
  --tb-tone-test:#c2907f;
  --tb-tone-play:#7fa894;
  --tb-shadow:0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .tb-btn--primary,:root[data-theme="dark"] .tb-btn--primary:hover{color:#1a1622}
:root[data-theme="dark"] .tb-chip[aria-pressed="true"],:root[data-theme="dark"] .tb-toast{color:var(--tb-bg)}
:root[data-theme="dark"] .tb-badge--beta{background:#3a3020;color:#f0d58c}
.tb-theme .tb-i-sun,:root[data-theme="dark"] .tb-theme .tb-i-moon{display:none}
:root[data-theme="dark"] .tb-theme .tb-i-sun{display:block}

/* ---------- 광고 슬롯 (자리만 미리 잡아 둠 · 실제 광고 코드는 아직 없음) ----------
 * 마크업은 scripts/sync-pages.js의 adSlot()이 만든다:
 *   <aside class="ad-slot ad-slot--content" data-ad-slot="tool-bottom"><span class="ad-slot__label">광고</span><div class="ad-slot__body"></div></aside>
 * 광고를 넣을 때는 .ad-slot__body 안에 광고 코드를 넣고 ToolayBox.ads.fill(slot, node)로 .is-filled를 붙인다.
 * min-height로 자리를 미리 잡아 광고가 늦게 떠도 화면이 밀리지 않게 한다. 버튼과는 최소 32px 이상 떨어뜨린다.
 */
.ad-slot{--ad-min-h:120px;position:relative;display:block;box-sizing:border-box;width:100%;min-height:var(--ad-min-h);margin:40px 0;padding:24px 12px 12px;
  background:var(--tb-n-100);border:1px solid var(--tb-divider-soft);color:var(--tb-n-500);font-family:var(--tb-kr);overflow:hidden;contain:layout}
.ad-slot__label{position:absolute;top:7px;left:10px;font-size:10.5px;line-height:1;letter-spacing:.04em;color:var(--tb-n-500);pointer-events:none}
.ad-slot__body{display:flex;align-items:center;justify-content:center;min-height:calc(var(--ad-min-h) - 36px)}
.ad-slot--content{--ad-min-h:160px}
.ad-slot--inline{--ad-min-h:120px}
.ad-slot--footer{--ad-min-h:100px}
.tb-info .ad-slot{margin:16px 0}
.ad-slot.is-filled{background:transparent;border-color:transparent}
@media (max-width:640px){
  .ad-slot{margin:32px 0}
  .ad-slot--content{--ad-min-h:200px}
  .ad-slot--inline{--ad-min-h:160px}
  .tb-info .ad-slot{margin:8px 0}
}
@media print{.ad-slot{display:none}}