/* ─────────────────────────────────────────────────────
   EZYPATTERN — 공통 토큰 (홈 · 패턴 뷰어 · 마커 네스팅)
   마커 스튜디오 톤: 베이지 바탕 · 흰 카드 · 주황 강조
   ───────────────────────────────────────────────────── */
:root {
  --bg: #F3F0E9;
  --bg-2: #ECE8DE;
  --surface: #FFFFFF;
  --surface-2: #FAF8F3;
  --ink: #15171C;
  --ink-2: #474C56;
  --ink-3: #6E737D;
  --line: #E2DDD1;
  --line-2: #D3CDBF;
  --accent: #E2552B;
  --accent-2: #C8431C;
  --accent-ink: #B2401C;
  --accent-soft: #FBE3D9;
  --ok: #2E8B57;
  --soon-bg: #FDF6E3;
  --soon-line: #EAD9A6;
  --soon-ink: #6B4D00;
  --fabric: #FFFDF8;
  --fabric-edge: #CFC7B6;
  --piece-line: #4A4F59;
  --weave: rgba(40, 30, 10, .05);
  --shadow: 0 1px 2px rgba(30, 25, 15, .06), 0 8px 24px -12px rgba(30, 25, 15, .18);
  --shadow-lg: 0 24px 60px -24px rgba(30, 25, 15, .35);
  --font: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1014; --bg-2: #13161B; --surface: #171A20; --surface-2: #1C2027;
    --ink: #ECEDEF; --ink-2: #B4B9C2; --ink-3: #8C929C;
    --line: #272B33; --line-2: #333843;
    --accent: #FF6A3D; --accent-2: #FF8A63; --accent-ink: #FF8A63; --accent-soft: #3A1E14;
    --ok: #4CC38A; --soon-bg: #33270F; --soon-line: #5A4718; --soon-ink: #E3A93A;
    --fabric: #1F232A; --fabric-edge: #3A404B; --piece-line: #0E1014; --weave: rgba(255, 255, 255, .035);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1014; --bg-2: #13161B; --surface: #171A20; --surface-2: #1C2027;
  --ink: #ECEDEF; --ink-2: #B4B9C2; --ink-3: #8C929C;
  --line: #272B33; --line-2: #333843;
  --accent: #FF6A3D; --accent-2: #FF8A63; --accent-ink: #FF8A63; --accent-soft: #3A1E14;
  --ok: #4CC38A; --soon-bg: #33270F; --soon-line: #5A4718; --soon-ink: #E3A93A;
  --fabric: #1F232A; --fabric-edge: #3A404B; --piece-line: #0E1014; --weave: rgba(255, 255, 255, .035);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── 상단바 ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  height: 64px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 34px; height: 34px; display: block; }
.brand b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.brand small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.2; }
.nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 99px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-3); border: 1px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
/* 아직 시험 중인 도구 — 메뉴 이름 옆 BETA */
a.beta::after { content: "BETA"; margin-left: 6px; padding: 2px 5px 1px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.3; vertical-align: 1px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.engine { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.engine .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.seg button, .seg a {
  border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.seg button.on, .seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg a { display: inline-flex; align-items: center; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2);
  background: transparent; display: grid; place-items: center; color: var(--ink-2);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn .i-moon { display: none; }
:root[data-theme="dark"] .icon-btn .i-sun { display: none; }
:root[data-theme="dark"] .icon-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .i-sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .i-moon { display: block; }
}

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; box-shadow: 0 6px 18px -8px var(--accent); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }

/* ── 공통 레이아웃 ─────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--accent-ink);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
h1, h2 { margin: 0; letter-spacing: -.045em; font-weight: 800; }
.feats { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.feats li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; }
.feats b { font-weight: 700; }
.feats span { color: var(--ink-2); }

/* ── 첫 화면 ───────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; padding: 64px 0 80px; }
.hero h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.06; margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 520px; margin: 0 0 32px; }
.hero .feats { max-width: 520px; }

.drop { border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }

/* ── 실제 패턴 그림 (앞판 카드 · 도구 카드) ─────────── */
.pc-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }
.pc-fig {
  padding: 8px 18px 4px; display: grid; place-items: center;
  background:
    linear-gradient(var(--weave) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--weave) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--surface-2);
}
.piece-svg { display: block; width: 100%; max-height: 470px; color: var(--ink-2); }
.p-cut { fill: #A7B8D1; fill-opacity: .42; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.p-net { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.p-nest { fill: none; stroke: var(--ink-3); stroke-width: .9; opacity: .75; vector-effect: non-scaling-stroke; }
.p-inn { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 10 3 2 3; vector-effect: non-scaling-stroke; }
.p-grn { fill: none; stroke: var(--ink-2); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.p-nt { stroke: var(--ink); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.p-bh { stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.p-meas { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.p-end { fill: var(--surface); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p-end.on { fill: var(--accent); }
.p-lab { font-family: var(--mono); font-size: 17px; fill: var(--ink-2); text-anchor: middle; }
.p-lab.big { font-size: 26px; font-weight: 600; fill: var(--ink); letter-spacing: .04em; }
.p-lab.sm { font-size: 13px; fill: var(--ink-3); }
.p-sz { font-family: var(--mono); font-size: 14px; fill: var(--ink-3); }
.p-sz.on { fill: var(--ink); font-weight: 600; }
.p-tag rect { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-tag text { font-family: var(--mono); font-size: 32px; font-weight: 700; fill: var(--ink); }
.pc-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.pc-read div { padding: 12px 16px 14px; }
.pc-read div + div { border-left: 1px solid var(--line); }
.pc-read dt { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.pc-read dd { margin: 0; font-size: 18px; font-weight: 600; }
.pc-read small, .mk-read small { font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* ── 첫 화면 작업대: ① 패턴 뷰어 → ② 마커 네스팅 ─────── */
.bench-step {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3);
}
.bench-step + .pc-fig { border-bottom: 1px solid var(--line); }
.pc-fig + .bench-step { border-top: 0; }
.bench-step .st { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 5px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.bench-step .st i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; background: var(--accent-2); color: #fff; }
.bench-step .st b { font-weight: 700; }
.bench .pc-fig { padding: 4px 18px 0; }
.bench .piece-svg { max-height: 330px; }
.bench-mk { padding: 12px 18px 14px; background: var(--surface-2); }
.bench-mk .mk-svg { min-width: 0; }
/* 패턴 뷰어 화면처럼: 굵은 재단선 · 회색 완성선 · 파란 꼭짓점 · 조각 이름표 */
.v-cut { stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.v-cut.v-a { fill: #A7B8D1; } .v-cut.v-b { fill: #F7BE85; }
.v-net { fill: none; stroke: var(--ink-3); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.v-inn { fill: none; stroke: var(--ink-3); stroke-width: .9; opacity: .7; vector-effect: non-scaling-stroke; }
.v-grn { fill: none; stroke: var(--ink-2); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.v-pt { fill: #3B82F6; stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-lab { font-family: var(--font); font-size: 30px; font-weight: 700; fill: var(--ink); }
.p-str { fill: none; stroke: #2F6FEB; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.p-sq { fill: #2F6FEB; stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-tag.s rect { stroke: #2F6FEB; }
.bench-step .k { padding: 2px 7px; border-radius: 6px; font-weight: 600; }
.bench-step .k.along { color: var(--accent-ink); background: var(--accent-soft); }
.bench-step .k.straight { color: #1F55C4; background: #E3ECFD; }
.pc-read.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-read.four dd { font-size: 17px; }
.bench .drop-act { flex-direction: row; justify-content: space-between; padding: 14px 18px 16px; text-align: left; }
.bench .drop-act b { font-size: 14px; }
.bench .drop-act .btn { height: 38px; }

/* ── 실제 마커 ─────────────────────────────────────── */
.mk-band { padding: 0 0 88px; }
.mk-card { border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.mk-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; padding: 28px 28px 20px; }
.mk-head .eyebrow { margin-bottom: 10px; }
.mk-head h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.mk-note { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.mk-fig { padding: 6px 28px 18px; overflow-x: auto; }
.mk-svg { display: block; width: 100%; min-width: 760px; height: auto; }
.m-fab { fill: var(--fabric); stroke: var(--fabric-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-sel { fill: none; stroke: var(--fabric-edge); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.m-tick { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-rl { font-family: var(--mono); font-size: 118px; fill: var(--ink-3); }
.m-cut { stroke: var(--piece-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-net { fill: none; stroke: var(--piece-line); stroke-width: .6; stroke-dasharray: 3 3; opacity: .55; vector-effect: non-scaling-stroke; }
.m-grn { fill: none; stroke: var(--accent-2); stroke-width: .8; opacity: .7; vector-effect: non-scaling-stroke; }
.m-u.ka { fill: #A7B8D1; } .m-u.kb { fill: #F7BE85; } .m-u.kc { fill: #A9CF9F; }
.m-u.kd { fill: #EFA3A0; } .m-u.ke { fill: #D6B6D2; } .m-u.kf { fill: #A8D6CF; }
.mk-read { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.mk-read div { padding: 14px 20px 16px; }
.mk-read div + div { border-left: 1px solid var(--line); }
.mk-read dt { font-size: 12.5px; color: var(--ink-3); margin-bottom: 2px; }
.mk-read dd { margin: 0; font-size: 20px; font-weight: 600; }
.tool .fig .tool-svg { width: auto; height: 186px; max-width: 92%; color: var(--ink-2); }
.tool-svg .m-cut { stroke-width: .8; }

/* 첫 화면 카드 그림 — site.js 가 .js-anim 을 붙이고, .play 를 껐다 켜며 되풀이 (끝나고 2초 쉼) */
.p-lead { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .p-meas, .js-anim .p-str { stroke-dashoffset: 1; }
  .js-anim .p-end.on, .js-anim .p-tag, .js-anim .p-lead, .js-anim .p-sq, .js-anim .m-u { opacity: 0; }
  .js-anim .play .p-meas { animation: draw 1.8s .5s cubic-bezier(.6, .1, .2, 1) forwards; }
  .js-anim .play .p-end.on, .js-anim .play .p-tag, .js-anim .play .p-lead { animation: pop .4s 2.2s ease-out forwards; }
  .js-anim .play .p-str { animation: draw 1s 2.5s cubic-bezier(.6, .1, .2, 1) forwards; }
  .js-anim .play .p-sq, .js-anim .play .p-tag.s { animation: pop .4s 3.4s ease-out forwards; }
  .js-anim .play .m-u { animation: pop .5s ease-out forwards; animation-delay: calc(var(--i) * 28ms + .3s); }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { to { opacity: 1; } }
}
:root[data-theme="dark"] .p-cut { fill-opacity: .22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-cut { fill-opacity: .22; } }

.drop-act { padding: 24px 28px 28px; background: var(--surface-2); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.drop-act b { font-size: 15px; }
.drop-act .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── 구역 ─────────────────────────────────────────── */
.band { background: var(--bg-2); padding: 80px 0; }
.sec { padding: 88px 0; }
.sec-head { margin-bottom: 32px; }
.sec-head h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; }

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tool {
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tool:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tool .top { height: 4px; background: var(--accent); }
.tool .meta { display: flex; justify-content: space-between; gap: 12px; padding: 22px 24px 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tool .fig {
  margin: 14px 24px 0; height: 210px; border-radius: 10px; display: grid; place-items: center;
  background:
    linear-gradient(var(--weave) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--weave) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--surface-2);
}
.tool .fig svg { width: 300px; max-width: 90%; height: auto; }
.tool .body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tool h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.tool p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 99px;
  background: var(--bg); border: 1px solid var(--line); font-size: 13px; font-weight: 600;
}
.chip i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; background: var(--ink-2); color: var(--surface);
}
.chip i.a { background: var(--accent); color: #fff; }
.tool .go { align-self: flex-start; margin-top: auto; }

.soon {
  display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-radius: 18px;
  border: 1.5px dashed var(--line-2); background: var(--bg);
}
.soon .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.soon b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-2); }
.badge {
  padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: var(--soon-bg); border: 1px solid var(--soon-line); color: var(--soon-ink);
}

.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
.split .feats { border-color: var(--line-2); }
.split .feats li { grid-template-columns: 200px 1fr; padding: 16px 0; font-size: 14.5px; border-color: var(--line-2); }
kbd { font-family: var(--mono); font-size: 12.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface); }

.related {
  display: flex; align-items: center; gap: 24px; padding: 22px 26px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.related:hover { border-color: var(--line-2); }
.related .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--ink-2); flex: none; }
.related .txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.related small { font-size: 12px; font-weight: 700; letter-spacing: .07em; color: var(--ink-3); }
.related b { font-size: 16px; }
.related span { font-size: 13.5px; color: var(--ink-2); }
.related .url { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

.foot {
  margin-top: 72px; padding: 28px 0; background: var(--bg-2); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px;
}
.foot .wrap { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.foot .brand img { width: 26px; height: 26px; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a:hover { color: var(--ink); }
.foot .legal { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.foot .legal a { text-decoration: underline; }

/* ── 반응형 ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .engine { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 64px; }
}
@media (max-width: 860px) {
  .mk-head { grid-template-columns: 1fr; gap: 12px; }
  .mk-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-read div:nth-child(3) { border-left: 0; }
  .mk-read div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tools, .split { grid-template-columns: 1fr; }
  .split { gap: 24px; }
  .related { flex-wrap: wrap; }
  .related .url { width: 100%; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .brand small { display: none; }
  .nav { order: 3; width: 100%; }
  .feats li, .split .feats li { grid-template-columns: 1fr; gap: 2px; }
  .band, .sec { padding: 56px 0; }
  .tool .fig { margin: 14px 16px 0; }
  .tool .meta { padding: 18px 16px 0; }
  .tool .body { padding: 18px 16px 20px; }
  .foot .legal { margin-left: 0; }
}

/* ── 홈 · 사용 설명서 칸 ─────────────────────────────── */
.guides-sec { padding: 72px 0 8px; }
.guides-sec .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.guides-sec .sec-head p.sub { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.guides-sec .sec-head .all { font-weight: 700; font-size: 14px; color: var(--accent-ink); }
.guides-sec .sec-head .all:hover { text-decoration: underline; }
.gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gcard { display: grid; grid-template-columns: 210px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.gcard .shot { display: block; background: var(--surface-2); border-right: 1px solid var(--line); min-height: 170px; }
.gcard .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.gcard .in { padding: 20px 22px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gcard small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.gcard h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.gcard p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.gcard .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.gcard .acts .btn { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.gcard .acts .btn small { font-size: 10.5px; }
.gcard .acts .btn.primary small { color: rgba(255, 255, 255, .8); }
@media (max-width: 1000px) { .gcards { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gcard { grid-template-columns: 1fr; } .gcard .shot { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; aspect-ratio: 16 / 9; } }

/* ── 문의 ─────────────────────────────────────────── */
.contact-sec { padding: 64px 0 72px; }
.contact-sec .sec-head p.sub { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 900px; }
.ccard { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; }
a.ccard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.ccard .ci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); }
.ccard.kakao .ci { background: #FEE500; color: #191600; }
.ccard .ci .ic { width: 22px; height: 22px; }
.ccard .ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ccard .ct small { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ccard .ct > b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; word-break: break-all; }
.ccard .ct > span { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }