/* Box Maker 사이트 공통 스타일 — 화이트 단일 톤
   원칙 4가지
   1) 화면은 흰색 하나. 구분은 색이 아니라 여백과 아주 옅은 선.
   2) 페이지당 검정 채움은 하나(주 버튼)만.
   3) UI 에서 색을 뺀다. 빨강·파랑은 도면 안에서만 쓴다 — 그래야 도면이 더 또렷해진다.
   4) 여백을 넓게. 다크 모드는 두지 않는다(도구 화면과 톤이 어긋난다). */

:root{
  --paper:#ffffff;
  --panel:#ffffff;
  --line:#ECEAE5;        /* 기본 경계 */
  --line2:#DCD8D0;       /* 조금 진한 경계·제도 표시 */
  --text:#22262b;        /* 순검정은 흰 바탕에서 눈이 아프다 */
  --muted:#7b766c;
  --ink:#15181c;         /* 유일한 검정 채움 */
  /* 도면 전용 — UI 에는 쓰지 않는다 */
  --cut:#d8362a;
  --crease:#2f6fe0;
  --perf:#a21caf;
  --grid:rgba(34,38,43,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column
}
a{color:inherit}
main{flex:1 0 auto;max-width:1000px;margin:0 auto;padding:0 24px 110px;width:100%}
main > p, main > ul, main > ol, main > .kv, main > .note{max-width:74ch}

/* 방안지 — 도면이 놓이는 자리에만. 화면 전체에 깔면 탁해진다. */
.paper{
  background-color:#fff;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:10px 10px,10px 10px
}

/* ── 머리 ─────────────────────────────────────────────────────────── */
.nav{
  display:flex;align-items:center;gap:26px;
  padding:16px max(24px, calc((100% - 1000px) / 2 + 24px));
  /* 메뉴 줄에 색을 준다 — 흰 바탕 위 흰 머리는 경계가 안 보인다.
     히어로와 같은 계열(#EEF3F8)이라 위쪽이 한 덩어리로 읽힌다. */
  background:rgba(238,243,248,.92);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid #DFE7EF;
  position:sticky;top:0;z-index:5;flex-wrap:wrap
}
.nav .brand{
  font-weight:650;text-decoration:none;font-size:16.5px;letter-spacing:-.015em;
  display:inline-flex;align-items:center;gap:9px
}
/* 재단 표시 — 화면에서 유일하게 남기는 빨강. 로고 표식이다. */
.nav .brand:before{content:"";width:12px;height:12px;flex:none;border-left:2px solid var(--cut);border-top:2px solid var(--cut)}
.nav nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
/* 도구(index.html)의 .topnav .auth 와 같은 자리·같은 크기.
   여기에 아무것도 없으면 도구에서 정적 페이지로 넘어갈 때 메뉴가 통째로 오른쪽으로 밀린다. */
.nav .auth{display:flex;align-items:center;gap:8px;margin-left:14px}
.nav .auth .nbtn{
  font-size:12.5px;padding:6px 12px;line-height:1.25;white-space:nowrap;border-radius:7px;
  text-decoration:none;font-weight:600;
  border-width:1px;border-style:solid;border-color:transparent;
  background:var(--ink);color:#fff}
.nav .auth .nbtn.ghost{background:#fff;color:var(--text);border-color:var(--ink);font-weight:500}
.nav nav a{text-decoration:none;font-size:14px;color:var(--muted);padding:2px 0;border-bottom:1px solid transparent;transition:color .12s,border-color .12s}
.nav nav a:hover{color:var(--text);border-bottom-color:var(--text)}

/* ── 히어로 ───────────────────────────────────────────────────────── */
/* 히어로 배경 — tools/hero_bg.js 가 엔진으로 그린 전개도.
   글이 놓이는 왼쪽은 비어 있어서 오버레이 없이 읽힌다. 도면 카드는 흰색 그대로 둔다. */
.hero{position:relative;padding:96px 0 84px;border-bottom:1px solid var(--line);margin:0 0 64px;
      background:#EEF3F8 url("/assets/hero-grid.svg") center/cover no-repeat;
      /* 본문 축은 유지하되 배경만 전폭으로 */
      width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hero > *{max-width:1000px;margin-left:auto;margin-right:auto;padding:0 24px}
/* 폭을 줄이면 auto 마진에 가운데로 밀린다. 폭은 그대로 두고 오른쪽 여백으로 좁힌다. */
.hero p{padding-right:calc(46% + 24px)}
.hero h1{padding-right:calc(34% + 24px)}
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.24;margin:0 auto 20px;letter-spacing:-.03em;font-weight:650}
.hero p{font-size:17px;color:var(--muted);margin:0 auto 34px}  /* 폭은 위 .hero p 규칙이 정한다 */
.hero .stamp{
  position:absolute;right:0;bottom:24px;font-size:11px;letter-spacing:.12em;
  color:var(--line2);text-transform:uppercase
}

/* ── 버튼: 검정 채움은 페이지에 하나 ──────────────────────────────── */
.btn{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:7px;font-weight:600;font-size:14.5px;
  border:1px solid var(--ink);transition:opacity .12s
}
.btn:hover{opacity:.86}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line2);margin-left:10px;font-weight:500}
.btn.ghost:hover{border-color:var(--text);opacity:1}

/* ── 본문 ─────────────────────────────────────────────────────────── */
h1{letter-spacing:-.025em;font-weight:650}
h2{font-size:21px;margin:76px 0 22px;letter-spacing:-.015em;font-weight:650}
h3{font-size:16.5px;margin:38px 0 10px;font-weight:600}
p{margin:0 0 14px}
.lead{color:var(--muted)}

/* ── 카드: 테두리 대신 여백. 얹지 말고 놓는다 ─────────────────────── */
.grid{display:grid;gap:34px 26px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.card{
  background:#fff;border:none;border-radius:0;padding:0;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:9px
}
.card .thumb{
  border:1px solid var(--line);border-radius:6px;height:168px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;
  background-color:#fff;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:10px 10px,10px 10px;
  transition:border-color .14s
}
a.card:hover .thumb{border-color:var(--text)}
.card .thumb svg{width:100%;height:100%}
.card b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.card .sub{color:var(--muted);font-size:13px;line-height:1.6}

/* 특징 3칸 — 상자를 없애고 위에 얇은 선만 */
.three{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:0 0 12px}
.three .card{gap:8px;padding-top:18px;border-top:1px solid var(--text)}
.three .card b{font-size:15px}

/* ── 배지: 색 없이 ────────────────────────────────────────────────── */
.badge{
  display:inline-block;font-size:11px;padding:2px 8px;border-radius:3px;
  background:#fff;color:var(--muted);border:1px solid var(--line2);letter-spacing:.01em
}
.badge.ref{color:var(--line2);border-color:var(--line)}

/* ── 표: 선을 최소로 ──────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:14.5px;background:#fff;border:none}
th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}
th{background:#fff;font-weight:600;font-size:12.5px;color:var(--muted);letter-spacing:.03em;
   border-bottom:1px solid var(--text);text-transform:none}
tr:last-child td{border-bottom:1px solid var(--line)}
td.c,th.c{text-align:center}

/* ── 도면 상자 ────────────────────────────────────────────────────── */
.figure{
  position:relative;border:1px solid var(--line);border-radius:8px;
  padding:34px;margin:26px 0;text-align:center;
  background-color:#fff;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:10px 10px,10px 10px
}
.figure:before,.figure:after{content:"";position:absolute;width:12px;height:12px;pointer-events:none}
.figure:before{left:10px;top:10px;border-left:1px solid var(--line2);border-top:1px solid var(--line2)}
.figure:after{right:10px;bottom:10px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.figure svg{max-width:100%;height:auto}
.figure figcaption{color:var(--muted);font-size:12.5px;margin-top:18px}
.legend{display:flex;gap:20px;justify-content:center;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:20px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px}
.legend i.cut{border-color:var(--cut)}
.legend i.crease{border-color:var(--crease);border-top-style:dashed}

/* 도면 선 — 색은 여기서만 준다 */
svg .cut{stroke:var(--cut)}
svg .crease{stroke:var(--crease)}
svg .perf{stroke:var(--perf)}
svg .other{stroke:var(--muted)}

/* ── 그밖 ─────────────────────────────────────────────────────────── */
.note{background:#fff;border:none;border-left:1px solid var(--text);border-radius:0;
      padding:4px 0 4px 18px;font-size:14px;margin:26px 0;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:14.5px;margin:18px 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.crumb{font-size:12.5px;color:var(--muted);margin:34px 0 10px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
ul.tick{list-style:none;padding:0;margin:14px 0}
ul.tick li{padding-left:20px;position:relative;margin-bottom:9px}
ul.tick li:before{content:"";position:absolute;left:0;top:.78em;width:11px;height:0;border-top:1px solid var(--line2)}
.foot{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:12.5px;
      padding:44px max(24px, calc((100% - 1000px) / 2 + 24px))}
.foot .sub{margin-top:8px;font-size:12px;color:var(--line2)}

@media(max-width:720px){
  .hero{padding:56px 0 44px;margin-bottom:44px;background-position:right -180px center}
  .hero > *{padding:0 18px}
  .hero p, .hero h1{padding-right:18px}
  main{padding:0 18px 72px}
  h2{margin:56px 0 18px}
  .nav{gap:12px;padding:12px 16px}
  .nav .brand{white-space:nowrap}
  .nav nav{margin-left:0;width:100%;order:3;gap:16px}
  .nav .auth{margin-left:auto}
  .foot{padding:32px 18px}
  .nav nav{gap:16px}
}