/* ══════════════════════════════════════════
   칼퇴서류 · 공통 스타일
   ──────────────────────────────────────────
   설계 원칙
   · 간격은 8px 그리드 (--s1 ~ --s10)
   · 포인트 컬러는 --accent 하나만. 카테고리 구분은 색이 아니라 여백·아이콘으로
   · 카드는 border 대신 box-shadow 로 띄운다
   · 구버전 변수명(--panel/--brand/--radius/--shadow)은 별칭으로 유지 —
     20개 서식 페이지가 그대로 참조하므로 절대 지우지 말 것
   ══════════════════════════════════════════ */
@font-face{font-family:Premade;src:url('fonts/PretendardVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  /* 색 ─ 흰 바탕과 아주 옅은 회색 두 가지로만 구획을 나눈다.
     장식으로 쓰는 색은 없다. 색은 문서 썸네일에서만 나온다 */
  --bg:#ffffff;
  --bg-2:#f5f5f7;          /* 섹션 교대용 옅은 회색 */
  --surface:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#e8e8ed;
  --line-2:#d2d2d7;

  /* 먹빛 브랜드 구간 */
  --dark:#100f0f;
  --dark-2:#1b1918;
  --dark-ink:#f3f2f2;
  --dark-ink-2:#a8a29d;
  --sand:#eeeae4;              /* 어둠과 짝을 이루는 따뜻한 밝은 면 */

  /* 강조색은 인감 도장의 주황빛 빨강. 어두운 바탕에서 살고 서류 정체성과도 맞는다.
     (--brand 는 구버전 별칭으로 이미 쓰이고 있어 --stamp 로 둔다) */
  --stamp:#d6482b;
  /* 흰 글씨를 얹는 버튼용. #d6482b 는 4.36:1 로 AA(4.5) 에 못 미친다 */
  --stamp-btn:#bc3a1f;
  --stamp-soft:#fbeeea;

  /* 포인트 하나. 버튼은 먹색, 링크만 파랑 */
  --accent:#0b66c3;
  /* 등락 — 한국 관행대로 상승 빨강, 하락 파랑.
     색만으로 뜻을 전하지 않도록 화면에서는 +/− 부호를 항상 함께 쓴다 */
  --up:#d13a2a;
  --down:#1263c4;
  --accent-ink:#ffffff;
  --accent-soft:#eaf2fb;
  --accent-dark:#08519c;
  --danger:#c9483a;

  /* 유리는 상단 바 한 곳에만 남긴다 (스크롤 시 콘텐츠가 비쳐 지나가는 자리) */
  --glass:#ffffff;
  --glass-strong:rgba(255,255,255,.72);
  --glass-line:var(--line);

  /* 움직임 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.18s;
  --t-slow:.5s;

  /* 간격 ─ 8px 그리드 */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s8:64px; --s10:80px;

  /* 반경 */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;

  /* 그림자 — 중성 회색. 따뜻한 갈색 그림자는 흰 바탕에서 때가 탄 것처럼 보인다 */
  --sh-1:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --sh-2:0 2px 6px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.07);
  --sh-3:0 6px 16px rgba(0,0,0,.07), 0 22px 54px rgba(0,0,0,.11);

  /* 구버전 별칭 (삭제 금지) */
  --panel:var(--surface);
  --brand:var(--accent);
  --brand-ink:var(--accent-ink);
  --radius:var(--r);
  --shadow:var(--sh-1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Premade,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic","맑은 고딕","Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* 큰 글씨일수록 자간을 좁혀야 뭉치지 않는다 */
h1,h2,h3{line-height:1.12; margin:0; letter-spacing:-.028em; font-weight:700}
a{color:var(--accent); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ── 스크롤 리빌 ─────────────────────────
   .reveal 은 JS 가 붙인다. JS 가 안 돌면 아무 일도 없어 콘텐츠는 그대로 보인다.
   위로 24px 떠오르며 살짝 확대 — 애플 페이지의 절제된 진입 모션 */
.reveal{
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ── 헤더 ───────────────────────────── */
/* 헤더는 스크롤 중 배경이 비쳐야 하므로 유리 질감을 쓴다 */
.site-header{
  background:var(--glass-strong);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--glass-line);
  position:sticky; top:0; z-index:50;
}
@supports not (backdrop-filter:blur(1px)){
  .site-header{background:rgba(255,255,255,.96)}
}
/* ⚠ 예전에는 max-width:1320px 로 묶고 가운데 정렬했다. 그러면 넓은 화면에서
     로고가 화면 안쪽으로 밀리는데, 세계 페이지만 home.css 에서 그걸 풀어 놔서
     페이지마다 로고 위치가 달랐다 (세계 47px vs 도구 256px).
     여기 한 곳에서 모두 같은 여백을 쓴다. home.css 의 덮어쓰기는 제거함. */
.site-header .inner{
  max-width:none; margin:0; padding:var(--s2) clamp(20px,3.4vw,56px);
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
}
/* The site's headers use one pair of overlapping black rings. Scope excludes logos
   uploaded to printable business cards and other user-created documents. */
header.site-header .inner > a.logo,
body.contact-page .contact-header > a.contact-brand{
  display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px;
  font-family:Premade,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:24px;font-weight:750;line-height:1.2;letter-spacing:-.04em;
  color:#172033;text-decoration:none;white-space:nowrap;
}
header.site-header .inner > a.logo::before,
body.contact-page .contact-header > a.contact-brand::before,
body .xp-header > a.xp-logo::before{
  content:'';display:block;flex:none;position:static;inset:auto;box-sizing:border-box;
  width:34px;height:34px;border:0;border-radius:0;box-shadow:none;transform:none;
  background:transparent url('brand-mark.svg?v=97d0eec9ea') center/contain no-repeat;
}
body .xp-header > a.xp-logo::before{filter:invert(1)}
body.contact-page .contact-header > a.contact-brand > svg,
body .xp-header > a.xp-logo > img{display:none}
@media(max-width:540px){
  header.site-header .inner > a.logo,
  body.contact-page .contact-header > a.contact-brand{gap:9px;font-size:22px}
  header.site-header .inner > a.logo::before,
  body.contact-page .contact-header > a.contact-brand::before,
  body .xp-header > a.xp-logo::before{width:30px;height:30px}
}

/* ── 세계 이동 줄 ────────────────────────────
   ⚠ 세계가 7개가 되면서 화살표로 한 칸씩 넘어가는 게 일이 됐다
     (반대편 세계까지 최대 3번). 헤더에 전부 늘어놓아 한 번에 가게 한다.
   ⚠ 화살표(.world-nav)는 그대로 둔다. 옆 세계로 훑어보는 것과
     특정 세계로 바로 가는 것은 다른 행동이다. */
.world-tabs{
  /* 세 요소뿐이라 가로 스크롤·마스크가 필요 없다 — 메뉴 팝업이 잘리지 않게 overflow 를 풀어 둔다 */
  margin-left:auto; display:flex; align-items:center; gap:4px; position:relative;
}
.world-tabs a{
  flex:none; padding:7px 11px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  transition:background .14s ease, color .14s ease;
}
.world-tabs a:hover{ background:rgba(0,0,0,.05); color:var(--ink) }
/* 지금 보고 있는 세계. 도구 페이지에서도 그 도구가 속한 세계가 켜진다 */
.world-tabs a[aria-current]{ background:var(--ink); color:#fff; font-weight:600 }

/* ── 다른 도구 ▾ 메뉴 — <details> 라 JS 없이 열린다 ── */
.world-more{ position:relative }
.world-more summary{
  list-style:none; cursor:pointer; padding:7px 11px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap; user-select:none;
}
.world-more summary::-webkit-details-marker{ display:none }
.world-more summary::after{ content:" ▾"; font-size:11px; opacity:.7 }
.world-more summary:hover, .world-more[open] summary{ background:rgba(0,0,0,.05); color:var(--ink) }
.world-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:236px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-2);
  padding:8px; display:grid; gap:1px;
}
.world-menu b{ font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--ink-3); padding:8px 10px 4px }
.world-menu b + b{ margin-top:6px }
.world-menu a{ padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--ink); text-decoration:none }
.world-menu a:hover{ background:rgba(0,0,0,.05) }
.world-menu a[aria-current]{ font-weight:700; background:rgba(0,0,0,.055) }
@media (max-width:720px){
  /* 메뉴는 헤더 오른쪽 끝에 붙는다 — left:0 으로 두면 화면 밖으로 나갔다 */
  .world-menu{ right:0; left:auto; max-width:calc(100vw - 24px) }
}
/* ⚠ 헤더는 sticky 다. 폰에서 두 줄이 되면 화면 위쪽을 계속 잡아먹으므로
     이 줄만큼은 최대한 얇게 — 손가락으로 누를 수 있는 선까지만 줄인다. */
@media (max-width:560px){
  .site-header .inner{ row-gap:4px }
  .world-tabs a{ padding:6px 9px; font-size:12px }
}
/* 드롭다운도 회색 알약을 걷어내고 글자와 얇은 화살표만 남긴다 */
.doc-picker{
  font:inherit; font-size:14.5px; font-weight:500; color:var(--ink-2);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2386868b' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 2px center/10px;
  border:0; border-radius:0; padding:10px 18px 10px 0;
  appearance:none; -webkit-appearance:none; cursor:pointer; max-width:220px; min-height:44px;
  transition:color var(--t-fast) var(--ease);
}
.doc-picker:hover{color:var(--ink)}
.doc-picker:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.header-actions{margin-left:auto; display:flex; gap:var(--s1)}
@media (max-width:720px){
  /* 폰에서는 헤더를 고정하지 않는다 — 두 줄 헤더가 화면의 1/5 을 계속 잡아먹었다 */
  .site-header{position:static}
  .site-header .inner{padding:12px var(--s2); gap:10px 12px}
  .doc-picker{order:3; width:100%; max-width:none; font-size:16px}
  .header-actions{margin-left:0; width:100%}
  .header-actions .btn{flex:1; min-height:44px}
}

/* ── 레이아웃 ───────────────────────── */
.wrap{max-width:1320px; margin:0 auto; padding:var(--s3)}
/* 편집 패널 480px = 안쪽 여백 24px×2 를 빼면 432px.
   품목 표가 가장 넓은 페이지(견적서·발주서)가 424px 이므로 가로 스크롤이 나지 않는다.
   여기를 줄이려면 각 페이지의 ItemTable minWidth 도 같이 줄여야 함 */
.app{display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:var(--s3); align-items:start}
/* minmax(0,1fr) 필수 — 그냥 1fr 이면 최소값이 min-content 라서
   고정 폭 용지가 컬럼을 밀어내 페이지 전체에 가로 스크롤이 생긴다 */
@media (max-width:1060px){ .app{grid-template-columns:minmax(0,1fr)} }

.panel{
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.panel > .panel-head{
  padding:var(--s3) var(--s3) var(--s2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s1); flex-wrap:wrap;
}
.panel-head h2{font-size:18px; font-weight:700; letter-spacing:-.02em}
.panel-body{padding:var(--s3)}
/* 미리보기 패널은 용지만 담으므로 여백을 줄여 용지 폭을 확보한다 */
.app > .panel:last-child > .panel-body{padding:var(--s2)}

/* ══════════════════════════════════════════
   홈 ─ 히어로 · 검색 · 필터 칩 · 도구 카드
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   브랜드 구간 — 먹빛 무대
   들어오자마자 이 사이트가 뭘 하는 곳인지 서류가 직접 보여 준다.
   말로 설명하지 않고 결과물이 채워지는 걸 보여 주는 것이 이 구간의 전부다.
   ══════════════════════════════════════════ */
.stage{
  background:var(--dark); color:var(--dark-ink);
  padding:clamp(56px,9vh,104px) var(--s3) clamp(64px,10vh,120px);
  position:relative; overflow:hidden;
}
/* 도장색 광원 하나. 그라데이션 장식이 아니라 무대 조명 역할 */
.stage::before{
  content:''; position:absolute; width:70vmax; height:70vmax; right:-22vmax; top:-30vmax;
  background:radial-gradient(circle, rgba(214,72,43,.20), transparent 62%);
  pointer-events:none;
}
.stage-inner{
  max-width:1320px; margin:0 auto; position:relative;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.stage h1{
  font-size:clamp(38px,5.4vw,72px); font-weight:800; letter-spacing:-.042em;
  line-height:1.04; color:#fff; margin:0 0 var(--s3);
}
.stage h1 .em{ color:var(--stamp) }
.stage-sub{
  font-size:clamp(16px,1.5vw,20px); color:var(--dark-ink-2); line-height:1.55;
  margin:0 0 var(--s5); max-width:30em;
}
.stage-cta{
  display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 30px;
  background:var(--stamp-btn); color:#fff; border:0; border-radius:var(--r-pill);
  font:inherit; font-size:17px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.stage-cta:hover{ background:#a53219; transform:translateY(-2px); box-shadow:0 12px 30px rgba(214,72,43,.34) }
.stage-cta:active{ transform:translateY(0) scale(.98) }
.stage-cta svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* ── 스스로 채워지는 서류 ─────────────── */
.stage-doc{ display:flex; justify-content:center; perspective:1400px }
.doc-anim{
  width:min(370px,86vw); aspect-ratio:1/1.414; background:#fff; color:#1d1d1f;
  border-radius:6px; padding:30px 28px 0; position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  transform:rotateX(7deg) rotateY(-9deg) rotateZ(1.2deg);
  transform-style:preserve-3d;
}
.doc-anim .dt{ font-size:19px; font-weight:800; letter-spacing:.24em; text-align:center; margin-bottom:22px }
.doc-anim .dl{ display:flex; align-items:baseline; gap:10px; margin-bottom:13px; font-size:12.5px }
.doc-anim .dl b{ flex:0 0 52px; color:#86868b; font-weight:600 }
/* 값이 타이핑되듯 드러난다. width 대신 clip-path 로 (레이아웃 재계산 없음) */
.doc-anim .dv{
  flex:1 1 auto; border-bottom:1px solid #e8e8ed; padding-bottom:3px; min-height:19px;
  clip-path:inset(0 100% 0 0);
}
.doc-anim .amt{ font-size:23px; font-weight:800; letter-spacing:-.02em }
.doc-anim .ko{ font-size:12px; color:#6e6e73; letter-spacing:.02em }
.doc-anim .seal{
  position:absolute; right:26px; bottom:34px; width:62px; height:62px; border-radius:50%;
  border:2.5px solid var(--stamp); color:var(--stamp);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:13px; font-weight:800; letter-spacing:.06em; line-height:1.15;
  opacity:0; transform:scale(1.9) rotate(-22deg);
}
.doc-anim .rule{ position:absolute; left:28px; right:28px; bottom:22px; height:1px; background:#e8e8ed }

@media (prefers-reduced-motion:no-preference){
  /* nth-of-type 은 같은 태그(div) 안에서 세므로 .dt 때문에 한 칸씩 밀린다.
     .dl 은 실제로 2~5번째 자식이라 nth-child 로 세야 맞는다 */
  .doc-anim .dv{ animation:docFill .5s var(--ease) forwards }
  .doc-anim .dl:nth-child(2) .dv{ animation-delay:.45s }
  .doc-anim .dl:nth-child(3) .dv{ animation-delay:.95s }
  .doc-anim .dl:nth-child(4) .dv{ animation-delay:1.45s }
  .doc-anim .dl:nth-child(5) .dv{ animation-delay:1.95s }
  .doc-anim .seal{ animation:sealDrop .5s cubic-bezier(.3,1.5,.5,1) 2.6s forwards }
  .doc-anim{ animation:docIn 1s var(--ease) both }
}
@keyframes docFill{ to{ clip-path:inset(0 0 0 0) } }
@keyframes sealDrop{ to{ opacity:.92; transform:scale(1) rotate(-11deg) } }
@keyframes docIn{ from{ opacity:0; transform:rotateX(16deg) rotateY(-16deg) translateY(38px) } }

/* 어둠에서 밝은 도구 격자로 넘어가는 이음매 */
.stage-foot{
  background:linear-gradient(180deg,var(--dark) 0%,var(--dark) 42%,#fff 100%);
  height:120px;
}

@media (max-width:900px){
  .stage-inner{ grid-template-columns:minmax(0,1fr); gap:var(--s5) }
  .stage-copy{ text-align:center }
  .stage-sub{ margin-left:auto; margin-right:auto }
  .doc-anim{ transform:none; width:min(300px,80vw) }
  .stage-foot{ height:72px }
}

/* 히어로 — 큰 글씨 하나와 검색창 하나. 그 외에는 아무것도 두지 않는다 */
.hero{
  background:transparent; border-bottom:0;
  padding:var(--s10) var(--s3) var(--s8);
}
.hero-inner{max-width:820px; margin:0 auto; text-align:center}
/* 카탈로그 제목은 h2 다(페이지당 h1 은 히어로 문구 하나). 모양은 예전 h1 과 같게 */
.hero h1, .hero h2#toolTitle{
  font-size:clamp(38px, 6vw, 68px); font-weight:700;
  letter-spacing:-.035em; margin:0 0 var(--s3);
}
.hero-sub{
  font-size:clamp(17px, 2.2vw, 22px); font-weight:400; color:var(--ink-2);
  margin:0 auto var(--s6); max-width:34em; line-height:1.45;
}
@media (max-width:720px){
  .hero{padding:var(--s6) var(--s2) var(--s5)}
  .hero-sub{margin-bottom:var(--s4)}
}

.search-wrap{position:relative; display:flex; align-items:center}
.search-wrap .ico{
  position:absolute; left:20px; width:20px; height:20px; pointer-events:none;
  fill:none; stroke:var(--ink-3); stroke-width:2;
}
#toolSearch{
  width:100%; min-height:56px; padding:14px 52px;
  font:inherit; font-size:17px; color:var(--ink);
  background:var(--bg-2); border:1px solid transparent;
  border-radius:var(--r-pill); outline:0;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#toolSearch::placeholder{color:var(--ink-3)}
#toolSearch:hover{background:#ededf0}
#toolSearch:focus{
  background:var(--surface); border-color:var(--line-2);
  box-shadow:0 0 0 4px var(--accent-soft), var(--sh-2);
}
.search-clear{
  position:absolute; right:12px; width:36px; height:36px; border:0; border-radius:50%;
  background:transparent; color:var(--ink-3); font-size:17px; cursor:pointer; line-height:1;
}
.search-clear:hover{background:#f1f3f4; color:var(--ink)}
.search-clear[hidden]{display:none}

/* 한 줄로 밀어 보게 두었더니 오른쪽 칩에 닿을 방법이 없었다.
   (가로 스크롤 막대도 숨겼고 마스크로 흐려 놓아 더 안 보였다)
   칩은 감기게 두는 것이 맞다. 전부 한눈에 들어오고 아무것도 숨지 않는다 */
.chips{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:var(--s4);
}
.chip{
  font:inherit; font-size:14.5px; font-weight:500; color:var(--ink-2);
  background:var(--bg-2); border:0;
  border-radius:var(--r-pill); padding:0 17px; height:38px; flex:0 0 auto;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover{background:#e8e8ed; color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{ background:var(--ink); color:#fff; font-weight:600 }

/* ── 섹션 ────────────────────────────────
   제목이 카드 이름(16px)보다 확실히 커야 구획으로 읽힌다.
   위 여백을 아래보다 크게 둬서 제목이 자기 그룹에 붙어 보이게 한다 */
.tool-section{margin:0 0 var(--s8)}
.tool-section + .tool-section{margin-top:0}
/* 구분선을 빼고 크기 차이만으로 구획을 만든다. 애플은 선을 거의 쓰지 않는다 */
.sec-head{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 var(--s3); padding-bottom:0; border-bottom:0;
}
.sec-head h2{font-size:34px; font-weight:700; letter-spacing:-.032em; margin:0}
.sec-ico{
  width:22px; height:22px; flex:0 0 auto; align-self:center;
  fill:none; stroke:var(--ink-3); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.sec-count{
  margin-left:auto; font-size:15px; font-weight:400; color:var(--ink-3);
  font-variant-numeric:tabular-nums; align-self:center;
}
.is-featured .sec-head h2{font-size:40px}
@media (max-width:720px){
  .tool-section{margin-bottom:var(--s8)}
  .sec-head h2{font-size:26px}
  .is-featured .sec-head h2{font-size:29px}
}

/* 카드 사이 간격이 카드 안쪽 여백보다 좁으면 카드들이 한 덩어리로 뭉쳐 보인다.
   gap 은 반드시 padding 이상 */
/* 상자를 없앴으니 칸 사이 간격도 필요 없다. 선으로 이어 붙인 목록에 가깝다 */
.tool-grid{
  display:grid; gap:0 var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
/* 카드가 세로로 긴 타일이라 모바일에서 1열로 두면 스크롤이 두 배가 된다.
   2열이면 한 화면에 네 개가 들어와 훑기 좋다 */
@media (max-width:640px){
  .tool-grid{grid-template-columns:minmax(0,1fr)}
  .tool-card{padding:16px 4px 18px}
  .tool-card::before{left:4px; right:4px}
  .tool-card .tool-name{font-size:16.5px}
}

/* 카드 — 글자만 남긴다.
   서류 실루엣 썸네일을 80장 깔았더니 비슷한 회색 덩어리가 반복돼 난잡했다.
   도구 이름이 곧 정보라 그림이 거들 게 없다. 미니멀은 덜어 내는 쪽이다 */
.tool-card{
  display:block; text-decoration:none; color:inherit;
  background:transparent; border:0; border-radius:14px;
  padding:20px 20px 22px; margin:-1px 0 0;
  position:relative;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
/* 구분은 카드 상자가 아니라 얇은 선 하나로 */
.tool-card::before{
  content:''; position:absolute; left:20px; right:20px; top:0; height:1px;
  background:var(--line);
}
.tool-card:hover{ background:var(--bg-2); transform:none }
.tool-card:hover::before{ background:transparent }
.tool-card:active{ background:#ededf0 }

/* 아래 .tool-thumb 계열은 이제 홈 히어로의 서류 애니메이션에서만 쓰인다.
   도구 카드에서는 뺐다 (같은 그림 80장이 반복돼 지저분했다) */
.tool-thumb{
  display:block; position:relative; height:106px; flex:0 0 auto;
  background:linear-gradient(180deg,#fcfcfd 0%,#f0f0f3 100%);
  overflow:hidden;
}
.tool-thumb .pg{
  position:absolute; left:50%; bottom:-22px; width:88px; height:112px;
  transform:translateX(-50%);
  background:#fff; border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.07), 0 10px 24px rgba(0,0,0,.10);
  transition:transform .45s var(--ease);
  padding:11px 10px 0; text-align:left;
}
.tool-card:hover .tool-thumb .pg{ transform:translateX(-50%) translateY(-7px) }
/* 종이 위의 내용을 선으로만 흉내 낸다. 가짜 글자를 그리지 않는다 */
.tool-thumb i{ display:block; background:#d7d7dd; border-radius:1px; margin-bottom:5px }
.tool-thumb .t{ height:6px; width:52%; background:#1d1d1f; margin-bottom:8px }
.tool-thumb .r{ height:3px }
.tool-thumb .r.w1{ width:100% } .tool-thumb .r.w2{ width:86% } .tool-thumb .r.w3{ width:64% }
.tool-thumb .box{
  position:absolute; right:10px; top:11px; width:30px; height:16px;
  border:1px solid #d7d7dd; border-radius:1px;
}
.tool-thumb .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:7px }
.tool-thumb .grid span{ height:11px; background:#ececf1; border-radius:1px; display:block }
.tool-thumb .amt{ height:9px; width:44%; background:#c8c8d0; border-radius:1px; margin-top:8px }

.tool-card .tool-name{
  display:block; font-size:18px; font-weight:600; color:var(--ink);
  margin-bottom:5px; letter-spacing:-.022em; line-height:1.25;
}
.tool-card .tool-desc{display:block; font-size:14px; color:var(--ink-2); line-height:1.5}

/* 접기 — 카드는 전부 HTML 에 그대로 두고 JS 가 넘치는 것만 감춘다.
   크롤러는 여전히 72개를 다 보고, 사람은 한 화면에 훑을 만큼만 본다 */
.tool-card.is-folded{display:none}
.sec-more{
  margin-top:var(--s3); width:auto; padding:0 20px;
  background:transparent; border:0; color:var(--accent);
  border-radius:var(--r-pill); min-height:40px; font:inherit; font-size:15px; font-weight:500;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.sec-more:hover{background:var(--accent-soft); text-decoration:underline}
.sec-more[hidden]{display:none}
.tool-card .badge{
  display:inline-block; margin-left:6px; vertical-align:middle;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--accent-dark); background:var(--accent-soft);
  border-radius:var(--r-pill); padding:3px 8px;
}

/* ══════════════════════════════════════════
   계산기 — 입력 패널 + 결과 카드 2단
   ══════════════════════════════════════════ */
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s3); align-items:start; max-width:1000px; margin:0 auto;
}
@media (max-width:860px){ .calc{grid-template-columns:minmax(0,1fr)} }

.result-card{
  background:var(--glass-strong); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:var(--s4); position:sticky; top:88px;
}
@media (max-width:860px){ .result-card{position:static} }
.result-label{font-size:14px; font-weight:600; color:var(--ink-2)}
.result-main{
  font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1.15;
  margin:10px 0 6px; color:var(--accent-dark); word-break:keep-all;
}
.result-main.sm{font-size:32px}
.result-sub{font-size:15px; color:var(--ink-2); margin:0}
.result-rows{margin-top:var(--s3); border-top:1px solid var(--line); padding-top:var(--s2)}
.rrow{display:flex; justify-content:space-between; gap:var(--s2); padding:9px 0; font-size:15px}
.rrow .k{color:var(--ink-2)}
.rrow .v{font-weight:700; font-variant-numeric:tabular-nums; text-align:right}
.rrow.em{border-top:1px solid var(--line); margin-top:6px; padding-top:14px}
.rrow.em .v{color:var(--accent-dark); font-size:19px}
.rrow.muted .v{font-weight:600; color:var(--ink-2)}
.calc-note{
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px dashed var(--line);
  font-size:13px; color:var(--ink-3); line-height:1.6;
}
.result-empty{color:var(--ink-3); font-size:15px; padding:var(--s3) 0}

/* ══════════════════════════════════════════
   안내 허브 — 외부 사이트 링크 모음
   ══════════════════════════════════════════ */
.link-grid{
  display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin:var(--s3) 0 var(--s6);
}
@media (max-width:640px){ .link-grid{grid-template-columns:1fr} }

.link-card{
  display:flex; gap:var(--s2); align-items:flex-start;
  text-decoration:none; color:inherit;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--sh-1);
  transition:box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.link-card:hover{
  box-shadow:var(--sh-3); transform:translateY(-3px) scale(1.02);
  background:var(--glass-strong);
}
.link-card:active{transform:translateY(-1px) scale(.995)}
.link-ico{font-size:24px; line-height:1.2; flex:none}
.link-body{min-width:0}
.link-name{
  display:block; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:4px;
}
.link-name::after{content:' ↗'; font-size:12px; color:var(--ink-3); font-weight:600}
.link-desc{display:block; font-size:14px; color:var(--ink-2); line-height:1.6}

.hub-head{max-width:760px; margin:var(--s5) auto var(--s4); text-align:center}
.hub-head h1{font-size:34px; font-weight:800; margin-bottom:var(--s2)}
.hub-head p{font-size:17px; color:var(--ink-2); margin:0}
@media (max-width:720px){ .hub-head{margin:var(--s3) auto var(--s3)} .hub-head h1{font-size:26px} .hub-head p{font-size:15px} }
.hub-body > h2{font-size:20px; font-weight:700; margin:var(--s5) 0 0}
.hub-body > h2:first-child{margin-top:0}

.aff-note{
  background:var(--accent-soft); border:1px solid var(--glass-line);
  border-radius:var(--r-sm); padding:14px 16px;
  font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-bottom:var(--s3);
}

.search-empty{
  text-align:center; padding:var(--s8) var(--s3); color:var(--ink-2);
}
.search-empty strong{display:block; font-size:19px; color:var(--ink); margin-bottom:var(--s1)}
[hidden]{display:none !important}

/* ── 폼 ─────────────────────────────── */
/* min-width:0 필수 — fieldset 기본값이 min-content 라서, 없으면 넓은 자식(품목 표)이
   패널을 강제로 늘려 입력칸이 화면 밖으로 튀어나간다 */
/* 폼 글자를 12~13px 로 두면 화면이 촘촘하고 답답해 보인다.
   브리핑의 "본문 16px 이상" 원칙에 맞춰 라벨·설명을 키우고
   요소 사이 간격도 8px 그리드로 넓혔다 */
fieldset{border:0; margin:0 0 var(--s5); padding:0; min-width:0}
fieldset:last-of-type{margin-bottom:0}
legend{
  font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  padding:0 0 10px; margin-bottom:var(--s2); border-bottom:1px solid var(--line); width:100%;
}
.field{margin-bottom:var(--s2)}
/* minmax(0,1fr) 이어야 칸이 실제로 줄어든다. 그냥 1fr 이면 최소 폭이 min-content 라
   time·date 처럼 안쪽 폭이 정해진 입력이 칸을 밀어내 패널 밖으로 넘친다 */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.grid-2 > *,.grid-3 > *{min-width:0}
/* 좁은 화면에서는 칸을 줄이는 대신 줄을 나눈다 — 억지로 욱여넣으면 다 못 읽는다 */
@media (max-width:560px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){ .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)} }
label{display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:7px}
/* ⚠ 여기 빠진 type 은 브라우저 기본 모양으로 남는다 — 테두리도 없고
     width:100% 도 안 먹어서 제 칸을 뚫고 나간다. 실제로 number 가 빠져 있어
     여행 경비 정산의 금액 칸이 63px 칸 안에서 177px 로 그려졌다.
     입력 type 을 새로 쓸 때는 반드시 이 목록에 같이 넣을 것.
     ops/tests/inputstyle.test.js 가 빠진 걸 잡는다. */
input[type=text],input[type=date],input[type=time],input[type=email],
input[type=number],input[type=tel],input[type=search],input[type=url],
input[type=password],input[type=month],input[type=week],
select,textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); outline:0;
  min-height:46px;
  transition:border-color .12s, box-shadow .12s;
}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.hint{font-size:13.5px; color:var(--ink-2); margin-top:7px; line-height:1.6}
.check{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); font-weight:500}
.check input{width:18px; height:18px; accent-color:var(--accent); flex:none}

.btn{
  appearance:none; border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font:inherit; font-size:14.5px; font-weight:600; padding:11px 20px;
  border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;                            /* 터치 대상 최소 44px */
  transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
/* 터치 대상은 최소 44px */
@media (max-width:720px){ .btn,.btn-sm{min-height:44px} }
.btn:hover{background:var(--bg-2); transform:translateY(-1px)}
.btn:active{transform:scale(.97)}          /* 눌리는 느낌 */
/* 주 버튼은 파랑이 아니라 먹색. 애플 스토어의 구입 버튼과 같은 무게 */
.btn-primary{background:var(--ink); border-color:var(--ink); color:#fff}
.btn-primary:hover{background:#000; box-shadow:var(--sh-2); transform:translateY(-1px)}
.btn-sm{padding:9px 15px; font-size:13.5px; min-height:38px}
.btn-ghost-danger{color:var(--danger); border-color:transparent; background:transparent; padding:4px 6px}
.btn-ghost-danger:hover{background:#fce8e6}

/* ── 품목 입력 ───────────────────────── */
.items-scroll{overflow-x:auto; padding-bottom:2px}
.items-head,.item-row{display:grid; gap:5px; align-items:center}
.items-head{font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:var(--s1); padding:0 2px}
.items-head span.ta-r{text-align:right}
.item-row{margin-bottom:6px}
.item-row input{padding:8px 8px; font-size:14px; min-width:0}
.item-row input.num{text-align:right}
.item-amt{font-size:13px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); padding-right:2px; overflow:hidden; text-overflow:ellipsis}

.sum-box{margin-top:var(--s2); padding:var(--s2); background:#f8f9fa; border-radius:var(--r-sm)}
.sum-line{display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:var(--ink-2)}
.sum-line.total{font-size:17px; font-weight:800; color:var(--ink); border-top:1px solid var(--line); margin-top:var(--s1); padding-top:10px}
.sum-line b{font-variant-numeric:tabular-nums}
.sum-ko{font-size:13px; color:var(--ink-2); padding-top:6px}

/* ══════════════════════════════════════════
   용지 — 여기부터는 출력물이라 시스템 톤과 무관하게 유지
   ══════════════════════════════════════════ */
.paper-scroll{overflow-x:auto; padding-bottom:4px}
/* 미리보기용 폭. 인쇄 시에는 width:100% 로 바뀌므로 출력물에는 영향 없음.
   700px 로 둬야 1280 화면에서도 미리보기가 가로 스크롤 없이 들어간다 */
#paper{
  /* 1280 화면에서 미리보기 칸 안쪽 폭이 679px 이라 700 이면 21px 이 넘쳐
     안쪽 가로 스크롤이 생겼다. 인쇄 시에는 width:100% 로 덮이므로 출력물과 무관 */
  width:672px; margin:0 auto; background:#fff; color:#000;
  border:1px solid #d4d4d4; padding:26px 26px 22px;
  box-shadow:var(--sh-1);
  /* 바탕체는 그 자체로 옛 문서처럼 보인다. 결재·증빙 형식은 그대로 두고
     글꼴만 현대 고딕으로 바꾸면 인상이 가장 크게 달라진다 */
  font-family:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  font-size:14.5px; line-height:1.65;
  font-variant-numeric:tabular-nums;
}
.doc-title{text-align:center; font-size:27px; font-weight:700; letter-spacing:18px; text-indent:18px; margin:2px 0 6px; white-space:nowrap; color:#111}
.doc-title.wide{letter-spacing:10px; text-indent:10px; font-size:25px}
.doc-sub{text-align:center; font-size:13px; margin-bottom:14px}
.doc-no{font-size:12.5px; margin-bottom:6px}

table.rc{width:100%; border-collapse:collapse; table-layout:fixed}
/* 안쪽 선까지 새까맣게 두면 표가 답답해진다. 바깥 테두리만 진하게 두고
   칸 사이는 옅은 회색으로 — 격자는 유지하되 숨을 틔운다 */
table.rc th,table.rc td{border:1px solid #c9c9c9; padding:7px 9px; font-size:13px; vertical-align:middle; word-break:break-all}
table.rc{border:1px solid #4a4a4a}
table.rc th{background:#f6f6f7; font-weight:600; text-align:center; letter-spacing:.02em; color:#2b2b2b}
table.rc.dense th,table.rc.dense td{padding:4px 6px; font-size:12px}
/* 세로 라벨(공급자·인계자 등). 가로로 두면 좁은 칸을 넘쳐 옆칸을 침범하므로 세로쓰기.
   선택자를 table.rc td.lbl-v 로 둔 이유: `table.rc td` 규칙이 padding 을 덮어써 칸이 넘쳤음 */
table.rc td.lbl-v{
  width:26px; background:#f6f6f7; text-align:center; font-weight:600; padding:7px 2px;
  writing-mode:vertical-rl; text-orientation:upright;
  letter-spacing:2px; white-space:nowrap; line-height:1.2;
}
/* ⚠ 위쪽 입력 기본값(padding:12px 14px; min-height:46px)은 폼 한 줄을 꽉 채우는
     칸을 기준으로 잡은 값이다. 표 안 60~90px 짜리 칸에 그대로 쓰면 좌우 여백만
     28px 이라 글자가 들어갈 자리가 없다 — 여행 경비 정산에서 "1,234,567" 이
     14px 폭 안에 잘렸다. 표 안에서는 표의 밀도에 맞춘다. */
table.rc td input,table.rc td select,table.rc td textarea{
  padding:5px 7px; min-height:32px; font-size:13px; border-radius:6px;
}
table.rc.dense td input,table.rc.dense td select{ padding:3px 5px; min-height:26px; font-size:12px }
/* 증감 화살표는 좁은 칸에서 15px 쯤을 먹는데, 금액을 한 원씩 올릴 일은 없다.
   자리를 숫자에 준다 (표 안에서만 — 폼의 단독 입력칸은 그대로 둔다) */
table.rc td input[type=number]{ -moz-appearance:textfield; appearance:textfield }
table.rc td input[type=number]::-webkit-outer-spin-button,
table.rc td input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

.cell-key{width:88px; background:#f6f6f7; text-align:center; font-weight:600; color:#2b2b2b}
.num-cell{text-align:right; font-variant-numeric:tabular-nums}
.ctr{text-align:center}
table.rc.parties .cell-key{width:auto; font-size:11.5px; padding:4px 3px}
table.rc.parties td.lbl-v{width:20px; font-size:11px; letter-spacing:1px; line-height:1.15}

.to-line{font-size:15px; margin:16px 0 11px; padding-bottom:7px; border-bottom:1px solid #4a4a4a}
.to-line .who{font-weight:700; display:inline-block; min-width:140px}
.amount-band{margin:14px 0; padding:12px 14px; border:1px solid #4a4a4a; background:#fff; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.amount-band .ko{font-size:19px; font-weight:800; letter-spacing:1px}
.amount-band .num{margin-left:auto; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums}
.statement{text-align:center; font-size:15px; font-weight:700; margin:16px 0 12px; letter-spacing:1px}
.sign-row{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:14px; font-size:13.5px}
.stamp{width:52px; height:52px; object-fit:contain; mix-blend-mode:multiply}
.stamp-ph{width:46px; height:46px; border:1px dashed #999; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; color:#999; flex:none}
.paper-note{font-size:11px; color:#555; margin-top:12px; border-top:1px dashed #bbb; padding-top:8px}
.party-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field-line{font-size:13.5px; margin:0 0 7px; display:flex; gap:8px}
.field-line .k{font-weight:700; min-width:74px; flex:none}
.body-box{border:1px solid #c9c9c9; padding:12px 14px; min-height:150px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; line-height:1.75}
.body-box.sm{min-height:88px}
#paper .sec-title{font-size:13.5px; font-weight:700; margin:16px 0 7px; padding-left:8px; border-left:3px solid #4a4a4a; color:#111}

/* 결재란 — 제목은 남는 폭 안에서 가운데, 결재란은 항상 오른쪽 끝. 절대 겹치지 않는다 */
.paper-top{display:flex; align-items:flex-start; gap:14px; margin-bottom:4px}
.paper-top .doc-title{flex:1 1 auto; min-width:0}
.paper-top .ap-cell{flex:none; margin-left:auto; display:flex; justify-content:flex-end}
table.approval{border-collapse:collapse; table-layout:fixed; flex:none}
table.approval td{border:1px solid #b8b8b8; font-size:11px; text-align:center; padding:3px}
table.approval{border:1px solid #4a4a4a}
table.approval .ap-label{width:20px; background:#f6f6f7; font-weight:600; letter-spacing:1px; line-height:1.1; word-break:keep-all}
table.approval .ap-role{width:58px; height:20px; background:#f6f6f7; font-weight:600}
table.approval .ap-sign{height:46px}

/* ── 광고 슬롯 ──────────────────────── */
.ad-slot{margin:var(--s5) auto; max-width:1320px; padding:0 var(--s3)}
/* 광고가 아직 안 붙은 자리는 접어 둔다.
   점선 상자에 "광고 영역"이라고 써 두면 심사에서 미완성 사이트로 읽힌다 */
.ad-slot:empty{display:none; margin:0; padding:0}
.ad-inner{
  min-height:100px; border:1px dashed var(--line-2); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:13px; background:var(--surface);
}

/* ── 안내 ───────────────────────────── */
.notice{
  background:#fef7e0; border:1px solid #feefc3; color:#5f4a05;
  border-radius:var(--r-sm); padding:14px 16px; font-size:14px; line-height:1.6; margin-bottom:var(--s3);
}
.notice b{color:#3f3005}

/* ── 본문 / 법적 페이지 ──────────────── */
/* 도구 설명 — 세로로 길게 늘어지면 도구보다 커 보인다.
   넓은 화면에서는 여러 단으로 흘려 가로로 눕히고 글자도 줄인다.
   ⚠ columns 안에서는 제목이 단 경계에서 잘리므로 break-inside 로 묶어 둔다. */
.article{
  max-width:1180px; margin:var(--s5) auto 0;
  background:var(--glass-strong); border:1px solid var(--glass-line);
  border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-1);
}
@media (min-width:900px){
  .article{ columns:2; column-gap:var(--s6) }
  .article > h1{ column-span:all }
}
@media (min-width:1400px){
  .article{ columns:3 }
}
/* 제목과 뒤따르는 내용이 단 경계에서 갈라지지 않게 */
.article h2, .article h3{ break-after:avoid; break-inside:avoid }
.article p, .article li, .article table, .article ul, .article ol,
.article .faq-item, .article .src-note{ break-inside:avoid }

.article h1{font-size:25px; margin-bottom:var(--s2)}
.article h2{font-size:17px; margin:var(--s4) 0 var(--s1)}
.article h2:first-child{margin-top:0}
.article h3{font-size:15px; margin:var(--s2) 0 var(--s1)}
.article p,.article li{color:#3c4043; font-size:14px; line-height:1.75}
.article ul,.article ol{padding-left:22px}
.article li{margin-bottom:var(--s1)}
.article table{width:100%; border-collapse:collapse; margin:var(--s2) 0; font-size:13px}
.article table th,.article table td{border:1px solid var(--line); padding:7px 9px; text-align:left}
.article table th{background:#f8f9fa; font-weight:600}
.updated{font-size:14px; color:var(--ink-2); margin-bottom:var(--s4)}
@media (max-width:720px){
  .article{padding:var(--s4) var(--s3); margin-top:var(--s4); border-radius:var(--r); columns:auto}
  .article h1{font-size:22px}
  .article h2{font-size:16px; margin-top:var(--s4)}
}

.faq-item{border-top:1px solid var(--line); padding:var(--s3) 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 var(--s1); font-size:17px}
.faq-item p{margin:0}

/* 구버전 카드 (남겨 둠) */
.card-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s2); margin:var(--s3) 0 var(--s1)}
.card{display:block; text-decoration:none; color:inherit; border:0; border-radius:var(--r-lg); padding:var(--s3); background:var(--surface); box-shadow:var(--sh-1); transition:box-shadow .16s, transform .16s}
.card:hover{box-shadow:var(--sh-3); transform:translateY(-3px)}
.card strong{display:block; font-size:17px; margin-bottom:6px}
.card span{font-size:14px; color:var(--ink-2)}

/* ── 이미지 도구 ───────────────────────
   드롭존 · 파일 목록 · 비교 미리보기. img.js 와 짝을 이룬다. */
.dropzone{
  border:2px dashed var(--line-2); border-radius:var(--r-lg);
  padding:var(--s5) var(--s3); text-align:center; cursor:pointer;
  background:rgba(255,255,255,.5); color:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.dropzone.is-over{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.01)}
.dropzone .dz-ico{font-size:32px; line-height:1; display:block; margin-bottom:var(--s1)}
.dropzone .dz-main{font-size:16px; font-weight:600; color:var(--ink)}
.dropzone .dz-sub{font-size:13px; margin-top:6px}

.file-list{margin-top:var(--s2); display:grid; gap:var(--s1)}
.fitem{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s2);
  align-items:center; padding:var(--s1); border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface);
}
.fthumb{width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border-radius:var(--r-sm); overflow:hidden}
.fthumb canvas{max-width:100%; max-height:100%; display:block}
.fmeta{min-width:0}
.fname{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fsub{font-size:12px; color:var(--ink-2); margin-top:2px}
.fsub b{color:var(--accent-dark); font-weight:600}
.fdel{
  border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:15px; width:32px; height:32px; border-radius:var(--r-sm);
}
.fdel:hover{background:var(--bg); color:var(--danger)}

/* 원본 ↔ 결과 나란히. 좁아지면 위아래로 */
.img-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s2)}
.img-box{border:1px solid var(--line); border-radius:var(--r); padding:var(--s1); background:var(--surface); min-width:0}
.img-box h4{margin:0 0 6px; font-size:12px; color:var(--ink-2); font-weight:600; letter-spacing:.02em}
.img-box .canvas-wrap{
  background:var(--bg); border-radius:var(--r-sm); min-height:120px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* 투명 부분이 보이도록 체크무늬 */
  background-image:linear-gradient(45deg,#eceae7 25%,transparent 25%),
                   linear-gradient(-45deg,#eceae7 25%,transparent 25%),
                   linear-gradient(45deg,transparent 75%,#eceae7 75%),
                   linear-gradient(-45deg,transparent 75%,#eceae7 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
}
.img-box canvas,.img-box img{max-width:100%; height:auto; display:block}
.img-box .cap{font-size:12px; color:var(--ink-2); margin:6px 0 0; text-align:center}
@media (max-width:560px){ .img-pair{grid-template-columns:1fr} }

/* 색상 추출 결과 */
.swatch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--s1); margin-top:var(--s2)}
.swatch{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); cursor:pointer; text-align:left; padding:0; width:100%; font:inherit}
.swatch .chip-color{height:64px; display:block}
.swatch .chip-meta{padding:8px 10px}
.swatch code{font-size:13px; font-weight:600; letter-spacing:.02em}
.swatch small{display:block; font-size:11px; color:var(--ink-2); margin-top:2px}
.swatch:hover{box-shadow:var(--sh-2)}

.busy{opacity:.55; pointer-events:none}

/* 직접 주소 대신 검색으로 보내는 링크임을 알려 준다 */
.link-via{
  display:inline-block; margin-left:6px; vertical-align:middle;
  font-size:11px; font-weight:600; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:1px 7px;
}

/* ── 푸터 ───────────────────────────── */
.site-footer{
  max-width:1320px; margin:0 auto; padding:var(--s6) var(--s3) var(--s8);
  color:var(--ink-2); font-size:14px; text-align:center;
  border-top:1px solid var(--line);
}
.site-footer nav{margin-bottom:var(--s2); display:flex; gap:var(--s1); justify-content:center; flex-wrap:wrap}
.site-footer nav a{color:var(--ink-2); text-decoration:none}
.site-footer nav a:hover{color:var(--ink); text-decoration:underline}
.site-footer nav span{opacity:.35}
.site-footer p{margin:var(--s1) 0; font-size:13px; line-height:1.7}

/* ── 인쇄 ───────────────────────────── */
@media print{
  /* ⚠ 여백을 0 으로 두는 이유: 브라우저는 인쇄 여백 자리에 제목·주소(칼퇴서류.com)를
       머리글·바닥글로 찍는다. 여백이 없으면 찍을 자리가 없어 사라진다.
       종이 여백은 body 안쪽 padding 으로 우리가 직접 준다. */
  @page{ size:A4 portrait; margin:0; }
  html,body{margin:0}
  body{background:#fff; padding:11mm 13mm !important}
  /* 파스텔 배경·유리 질감·애니메이션은 출력물에서 전부 제거 */
  body::before{display:none !important}
  .site-header,.panel,.result-card,.article,.tool-card,.chip,#toolSearch{
    background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    box-shadow:none !important; border-color:#ddd !important;
  }
  .reveal{opacity:1 !important; transform:none !important}
  .no-print{display:none !important}
  .wrap{padding:0; max-width:none}
  .app{display:block}
  .panel{border:0; box-shadow:none; background:none}
  .panel-body{padding:0}
  .paper-scroll{overflow:visible}
  /* 화면에서 다듬은 선 두께가 출력물에서도 유지되어야 한다.
     여기서 2px 검정으로 덮으면 인쇄물만 예전 모습으로 돌아간다 */
  #paper{width:100%; margin:0; box-shadow:none; border:1px solid #555; padding:14px 18px; page-break-inside:avoid}
  #paper.modern{border:0; padding:0}
  /* 한 장에 넣으려고 표 칸을 조금 조인다. 그래도 넘치면 doc.js 가 인쇄 직전에
     #paper 를 zoom 으로 줄여 A4 한 장에 맞춘다 (폭은 그대로, 글자만 작아진다) */
  table.rc th,table.rc td{padding:5px 8px}
  table.rc th,.lbl-v,.cell-key,table.approval .ap-label,table.approval .ap-role{background:#f2f2f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .amount-band{background:#fafafa !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ══════════════════════════════════════════
   B · 현대 서식 (#paper.modern)
   ──────────────────────────────────────────
   거래처에 나가는 문서에만 붙인다. 세무 증빙·사내 결재용 서식에는 쓰지 않는다.
   격자를 걷어내고 행 밑줄만 남기는 방식이라 형식이 느슨해 보이기 때문이다.
   토글은 quote / invoice / statement / order 네 곳에만 있다.
   ══════════════════════════════════════════ */
#paper.modern{ border:0; padding:34px 34px 28px; box-shadow:var(--sh-2) }

/* 제목 — 가운데 자간 벌리기를 버리고 왼쪽 큰 글씨로 */
#paper.modern .doc-title{
  text-align:left; font-size:31px; font-weight:700; letter-spacing:-.03em;
  text-indent:0; margin:0 0 4px; color:#111;
}
#paper.modern .doc-sub{ text-align:left; color:#666 }
#paper.modern .paper-top{ align-items:flex-end; border-bottom:2px solid #111; padding-bottom:12px; margin-bottom:18px }

/* 표 — 격자를 없애고 행 밑줄만. 머리글은 채움 없이 얇은 선으로 */
#paper.modern table.rc{ border:0 }
#paper.modern table.rc th,#paper.modern table.rc td{
  border:0; border-bottom:1px solid #e6e6e6; padding:9px 8px;
}
#paper.modern table.rc th{
  background:transparent; border-bottom:1.5px solid #111; color:#111;
  font-size:11.5px; letter-spacing:.06em; text-transform:none;
}
#paper.modern .cell-key{ background:transparent; color:#777; font-weight:500; text-align:left }
#paper.modern table.rc td.lbl-v{ background:transparent; color:#777 }
#paper.modern table.rc tr:last-child td{ border-bottom:1px solid #111 }

/* 금액 — 선 상자 대신 큰 숫자로 */
#paper.modern .amount-band{
  border:0; border-top:2px solid #111; background:transparent;
  padding:14px 0 0; margin:20px 0 0;
}
#paper.modern .amount-band .ko{ font-size:15px; font-weight:600; letter-spacing:0; color:#666 }
#paper.modern .amount-band .num{ font-size:27px; font-weight:700; letter-spacing:-.02em }

#paper.modern .to-line{ border-bottom:1px solid #e6e6e6 }
#paper.modern .body-box{ border:0; border-left:3px solid #e6e6e6; padding-left:14px }
#paper.modern .sec-title{ border-left:0; padding-left:0; color:#777; font-size:11.5px; letter-spacing:.06em }
/* 결재란은 대외 문서에 필요 없다 */
#paper.modern .ap-cell{ display:none }

/* 서식 고르는 스위치 (화면 전용) */
.paper-style{ display:flex; gap:6px; align-items:center; margin-bottom:var(--s2); flex-wrap:wrap }
.paper-style .lbl{ font-size:13px; color:var(--ink-2); margin-right:4px }
.paper-style button{
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--bg-2); border:0; border-radius:var(--r-pill);
  padding:0 14px; height:34px; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.paper-style button:hover{ background:#e8e8ed; color:var(--ink) }
.paper-style button.on{ background:var(--ink); color:#fff }
@media print{ .paper-style{ display:none !important } }
/* 세율·요율을 쓰는 계산기의 출처 표기.
   숫자를 어디서 가져왔는지 밝혀 두지 않으면
   값이 낡았을 때 사용자가 확인할 방법이 없다 */
.article .src-note{
  margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:13px; line-height:1.7; color:var(--ink-3);
}

/* 비교표에서 지금 고른 방식의 줄. 표 안에서 한 줄만 눈에 들어오면 된다 */
table.rc tr.on td{ background:var(--bg-2); font-weight:600 }

/* ── 정책 대출 판정 카드 ─────────────────────
   되는 것과 안 되는 것이 한눈에 갈려야 한다.
   색만으로 구분하지 않고 '가능/조건 미달' 글자를 함께 둔다 */
.loan-item{
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s3) var(--s4); margin-bottom:var(--s3);
}
.loan-item.is-no{ background:var(--bg-2); border-color:var(--line) }
.loan-item.is-ok{ border-color:var(--ink-3) }
.loan-head{ display:flex; align-items:baseline; gap:var(--s3); justify-content:space-between }
.loan-name{ font-weight:700; letter-spacing:-.01em }
.loan-verdict{
  flex:none; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink-2); background:#fff;
}
.loan-item.is-ok .loan-verdict{ background:var(--ink); border-color:var(--ink); color:#fff }
.loan-amount{
  margin-top:var(--s2); font-size:30px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.loan-amount span{ font-size:15px; font-weight:500; color:var(--ink-2); margin-left:4px }
.loan-meta{ font-size:13.5px; color:var(--ink-2); margin-top:2px }
.loan-meta.muted{ color:var(--ink-3) }
.loan-note{ margin:var(--s2) 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.7 }
.loan-fail{ margin:var(--s2) 0 0; padding-left:1.1em; font-size:13.5px; color:var(--ink-2); line-height:1.85 }
.loan-fail li::marker{ color:var(--stamp) }

/* ── 지도 ────────────────────────────────────
   250개 시군구. 색은 규제/비규제 두 가지뿐이고
   선택은 진하게 칠해 표시한다 — 색을 하나 더 쓰면 지도가 지저분해진다.

   선 두께는 vector-effect:non-scaling-stroke 로 잡는다.
   이걸 안 쓰면 확대할 때 선까지 같이 굵어져서
   경계가 뭉개지고 지역이 검은 덩어리로 보인다.
   그래서 stroke-width 는 화면 픽셀 기준의 작은 값이다. */
.calc-wide{ max-width:none }
.map-wrap{ position:relative; max-width:520px; margin:0 auto var(--s4) }
/* #wmap 은 세계 지도. 확대·축소가 같은 모듈이라 스타일도 같이 쓴다 */
#kmap, #wmap{
  width:100%; height:auto; display:block;
  touch-action:none;                 /* 끌어서 이동할 때 화면이 같이 밀리지 않게 */
}
#kmap.is-zoomed, #wmap.is-zoomed{ cursor:grab }
#kmap.is-dragging, #wmap.is-dragging{ cursor:grabbing }

/* 세계 지도는 가로로 길다. 한국 지도용 520px 제한을 풀어 준다 */
.map-wrap.wide{ max-width:920px }
/* 코드가 없는 미승인 지역 — 눌러도 보여 줄 정보가 없으니 대상에서 뺀다 */
.kar.dead{ fill:#f0f0f3; cursor:default; pointer-events:none }

.kar{
  fill:#fff; stroke:#b8b8bd; stroke-width:.6px;
  vector-effect:non-scaling-stroke;
  cursor:pointer; transition:fill .12s linear;
}
.kar.reg{ fill:#d8d8dd }
.kar:hover{ fill:#a9c7e8 }
.kar.on{
  /* 선택은 채움만으로 표시한다. 테두리까지 굵히면 이웃 위로 번져
     확대했을 때 검은 덩어리로 보인다 */
  fill:var(--ink); stroke:#fff; stroke-width:.6px;
}
.kar:focus-visible{ outline:none; stroke:var(--accent); stroke-width:1.4px }

.map-legend{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px }
.map-legend .sw{
  width:11px; height:11px; border:1px solid #b8b8bd; background:#fff;
  display:inline-block; margin-left:8px;
}
.map-legend .sw.on{ background:#d8d8dd; margin-left:0 }

/* 이름표 — 커서 위쪽에 붙는다. 지도 위를 덮지 않게 작게 유지한다 */
.map-tip{
  position:absolute; transform:translate(10px,-140%);
  padding:4px 9px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff;
  font-size:12px; line-height:1.5; white-space:nowrap;
  pointer-events:none; z-index:2;
}

/* 확대·축소 버튼 — 지도 오른쪽 아래에 겹쳐 둔다 */
.map-zoom{
  position:absolute; right:8px; bottom:8px; z-index:2;
  display:flex; flex-direction:column; gap:4px;
}
.map-zoom button{
  width:32px; height:32px; padding:0;
  font-size:16px; line-height:1; font-family:inherit;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--ink); cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.map-zoom button:hover{ background:#fff; border-color:var(--ink-3) }
.map-zoom button:active{ background:var(--bg-2) }
.map-zoom button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }


/* 등락 표시 */
.up{ color:var(--up) }
.down{ color:var(--down) }

/* ── 실시간 시세 (coinprice.html 전용) ────────
   이 페이지만 외부에 요청을 보낸다. 연결 상태를 항상 보여 준다 */
.live{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3) }
.live i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:none }
.live.ok i{ background:#1f9d55 }
.live.warn i{ background:#d9822b }
@media (prefers-reduced-motion:no-preference){
  .live.ok i{ animation:live-pulse 2s ease-in-out infinite }
}
@keyframes live-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.tick{ margin:var(--s3) 0 var(--s4) }
.tick-main{ display:flex; align-items:baseline; gap:4px }
.tick-price{
  font-size:clamp(34px,4.4vw,46px); font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.tick-unit{ font-size:18px; font-weight:600; color:var(--ink-2) }
.tick-sub{ margin-top:4px; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums }

/* 기간 선택 */
.chart-head{ display:flex; justify-content:flex-end; margin-bottom:var(--s2) }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; gap:2px }
.seg button{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  padding:5px 12px; border-radius:999px;
}
.seg button:hover{ color:var(--ink) }
.seg button.on{ background:var(--ink); color:#fff }
.seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.chart-wrap{ position:relative }
#chart{ width:100%; height:auto; display:block }
#chart .grid{ stroke:var(--line); stroke-width:1 }
#chart .axis{ fill:var(--ink-3); font-size:10px; font-family:inherit }
#chart .wick{ stroke-width:1 }
#chart .c-up{ stroke:var(--up); fill:var(--up) }
#chart .c-down{ stroke:var(--down); fill:var(--down) }
.chart-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  margin:0; font-size:13.5px; color:var(--ink-3);
}

/* ── 채용 시즌 · 방식 표시 (hiring.html) ─────
   기업별 확정 일정은 적지 않는다. 시즌은 관례일 뿐이고
   여러 그룹이 이미 공채를 없앴다 */
.season{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-bottom:var(--s3) }
.se{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 8px;
  text-align:center; position:relative;
}
.se b{ display:block; font-size:12.5px; font-weight:700; color:var(--ink) }
.se span{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3) }
.se.hot{ border-color:var(--ink-3); background:var(--bg-2) }
.se.hot span{ color:var(--ink-2) }
.se.now{ border-color:var(--ink); border-width:2px; padding:9px 7px }
.se i{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-style:normal; font-size:10px; font-weight:700; color:#fff;
  background:var(--ink); padding:1px 7px; border-radius:999px;
}

.way{
  display:inline-block; font-size:11.5px; font-weight:700; white-space:nowrap;
  padding:2px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2);
}
.way.w-open{ background:var(--ink); border-color:var(--ink); color:#fff }
.way.w-any{ background:#fff5f2; border-color:#f0c4b8; color:#a8442e }
.way.w-mix{ background:var(--bg-2) }
.way.w-ncs{ background:#f0f5fb; border-color:#c3d7ee; color:#1d5490 }

@media (max-width:720px){
  .season{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* ══════════════════════════════════════════
   도구 페이지 위치 표시줄 + 오른쪽 미니 메뉴
   assets/toolbar.js 가 만들어 붙인다.
   ══════════════════════════════════════════ */
.tool-crumb{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; padding:11px var(--s3) 0;
  font-size:13px; color:var(--ink-2);
}
.tool-crumb a{ color:var(--ink-2); text-decoration:none }
.tool-crumb a:hover{ color:var(--ink); text-decoration:underline }
.tool-crumb .sep{ color:var(--ink-3); font-size:11px }
.tool-crumb b{ color:var(--ink); font-weight:600 }

/* The compact handle stays visible; the closed panel never extends offscreen. */
.tool-mini{
  position:fixed;right:16px;top:var(--mini-top,100px);z-index:45;
  width:216px;max-width:calc(100vw - 24px);
  max-height:calc(100dvh - var(--mini-top,100px) - 16px);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #dedee6;border-radius:16px;
  background:#ffffffed;color:#292a31;backdrop-filter:blur(20px);
  box-shadow:0 8px 30px #20212610;
  font-family:Premade,Arial,sans-serif;
}
.tm-toggle{
  display:flex;align-items:center;gap:10px;flex:none;width:100%;min-height:48px;
  padding:13px 16px;border:0;border-bottom:1px solid #e9e9ef;background:none;
  color:#292a31;font:600 12px/1.5 Premade,sans-serif;cursor:pointer;text-align:left;
}
.tm-toggle::before{
  content:'';width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);
}
.tm-toggle:hover{background:#f4f4f8}
.tool-mini.closed{width:52px}
.tool-mini.closed .tm-toggle{flex-direction:column;justify-content:center;gap:9px;min-height:72px;padding:12px 6px;border:0}
.tool-mini.closed .tm-toggle::before{transform:rotate(135deg)}
.tm-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;scrollbar-width:thin}
.tm-body[hidden]{display:none}
.tm-group+.tm-group{margin-top:3px}
.tm-head{
  display:flex;align-items:center;gap:7px;width:100%;min-height:40px;padding:10px;
  border:0;border-radius:9px;background:none;color:#676873;
  font:600 12px/1.5 Premade,sans-serif;text-align:left;cursor:pointer;
}
.tm-head:hover{background:#f4f4f8}.tm-group.open>.tm-head{color:#202126}
.tm-head::before{
  content:'';width:5px;height:5px;flex:none;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s;
}
.tm-group.open>.tm-head::before{transform:rotate(45deg)}
.tm-n{margin-left:auto;color:#898a94;font-size:10px;font-weight:500}
.tm-listwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s}
.tm-group.open .tm-listwrap{grid-template-rows:1fr}
.tm-list{list-style:none;margin:0;padding:0;min-height:0;overflow:hidden}
.tm-list a{
  position:relative;display:block;margin:2px 0;padding:9px 10px 9px 23px;
  border-radius:8px;color:#656670;text-decoration:none;font-size:12px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tm-list a:hover{background:#f4f4f8;color:#202126}
.tm-list a.on{background:#eeeef3;color:#202126;font-weight:650}
.tm-list a.on::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);width:3px;height:13px;border-radius:2px;background:currentColor}
@media screen{
  body.has-mini{padding-left:0!important;padding-right:0!important}
  body.has-mini>.site-header{margin-left:0!important;margin-right:0!important}
}
/* Reserve a single rail on large screens; laptop editors keep their full width. */
@media screen and (min-width:1601px){body.has-mini.mini-open{padding-right:248px!important}}
@media(max-width:600px){
  .tool-mini{right:12px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));max-height:min(65dvh,520px);width:240px}
  .tool-mini.closed{width:86px;border-radius:24px}
  .tool-mini.closed .tm-toggle{flex-direction:row;min-height:44px;gap:10px;padding:10px 14px}
  .tm-head,.tm-list a{min-height:44px}
}
@media print{.tool-crumb,.tool-mini{display:none!important}}

/* ── 서식 홈의 위계 ── 서식 6묶음 뒤 구분자와 한 단계 내린 '함께 쓰는 도구' 묶음 */
.sec-part{ margin:var(--s7) 0 var(--s4); padding-top:var(--s5); border-top:1px solid var(--line) }
.tool-section.is-sub{ margin-top:var(--s5) }
.sec-part h2{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px }
.sec-part p{ margin:0; color:var(--ink-3); font-size:14px; line-height:1.6 }
.tool-section.is-sub .sec-head h2{ font-size:22px }
.chip.chip-sub{ border-style:dashed }
/* 도구 페이지 액션 버튼 — 헤더에서 첫 입력 패널 머리로 옮겨 왔다 */
.panel-head .panel-actions{ margin-left:auto; flex-wrap:wrap }

/* ══════════════════════════════════════════
   딴세상 — 같은 도메인의 다른 사이트.
   로고 가운데, 아주 작은 대문자 모노 내비, 검은 종이 위 크림색 글씨.
   진입은 홈 히어로의 동그라미(이스터에그)뿐이고 헤더 메뉴에는 없다.
   ══════════════════════════════════════════ */
body.home.xp, body.xp{ background:#0b0b0e; color:#e9e6df }
.xp-header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:14px clamp(16px,3vw,40px);
  background:rgba(11,11,14,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:"Consolas","SF Mono","Menlo","Courier New",monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.xp-back{ justify-self:start; color:rgba(233,230,223,.55); text-decoration:none; white-space:nowrap }
.xp-back:hover{ color:#fff }
.xp-logo{
  justify-self:center; text-decoration:none; color:#e9e6df; text-transform:none; letter-spacing:.06em;
  font-family:Georgia,"Times New Roman","Apple SD Gothic Neo","Malgun Gothic",serif; font-size:22px; font-weight:400;
}
/* 가운데는 글씨가 아니라 홈의 동그라미 — 사용자 지시(2026-09-05). 세계 링크 줄은 없앴다 */
.xp-logo img{ display:block; width:44px; height:44px; object-fit:contain; transition:transform .5s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 6px 18px rgba(170,130,255,.35)) }
.xp-logo:hover img{ transform:scale(1.1) rotate(-8deg) }
@media (max-width:720px){
  .xp-header{ padding:10px 14px }
  .xp-logo img{ width:36px; height:36px }
}
/* 본문·푸터도 검은 종이에 맞춘다 */
body.xp .article{ color:#cfcbc2 }
body.xp .article h1, body.xp .article h2, body.xp .article h3{ color:#f2efe8 }
body.xp .article a{ color:#e9e6df }
body.xp .article .src-note{ border-color:rgba(255,255,255,.1); color:rgba(233,230,223,.55) }
body.xp .article b{ color:#f2efe8 }
body.xp .site-footer{ background:#0b0b0e; color:rgba(233,230,223,.45); border-top:1px solid rgba(255,255,255,.08) }
body.xp .site-footer a{ color:rgba(233,230,223,.6) }
body.xp .site-footer span{ color:rgba(233,230,223,.25) }
body.xp .world-arrow{ background:rgba(255,255,255,.06); color:#e9e6df; border-color:rgba(255,255,255,.14) }
/* 세계 사이 이동 연출은 어두운 막으로 */
#xpVeil{ position:fixed; inset:0; z-index:999; background:#0b0b0e; pointer-events:none; opacity:0; transition:opacity .7s ease }
#xpVeil.on{ opacity:1; pointer-events:auto }
html.xp-arrive #xpVeil{ opacity:1; transition:none }
html.xp-arrive.xp-arrived #xpVeil{ opacity:0; transition:opacity 1.1s ease .1s }

/* Category menu: keep selected labels legible inside the light dropdown. */
body .site-header .world-menu{border-radius:4px;padding:9px;background:#fcfdf9;border-color:#cdd5c6;box-shadow:0 18px 45px #17281724}
body .site-header .world-menu a{border-radius:2px;min-height:41px;display:flex;align-items:center;color:#35442e}
body .site-header .world-menu a[aria-current]{background:#253a2c;color:#fff!important}
body .site-header .world-menu a:hover{background:#e7eddf;color:#20311c}
body .site-header .world-menu a[aria-current]:hover{background:#253a2c;color:white}

/* Keyboard users can reach the working area without traversing the site menu. */
.skip-link{position:fixed;top:8px;left:12px;z-index:10000;padding:12px 18px;min-height:44px;border-radius:8px;background:#252b40;color:#fff;font:600 14px/1.4 sans-serif;transform:translateY(-160%);text-decoration:none}.skip-link:focus{transform:translateY(0);outline:3px solid #8495c2;outline-offset:3px}
@media print{.skip-link{display:none!important}}