:root {
  --navy: #102D50;
  --navy-2: #0B3A66;
  --ink: #0F1B2A;
  --muted: #5B6778;
  --line: #E3E7ED;
  --bg: #F6F7F9;
  --card: #FFFFFF;
  --check-a: #FFFFFF;
  --check-b: #EEF1F5;
  --radius: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ── 히어로 ─────────────────────────── */
.hero { background: var(--navy); color: #fff; padding: 64px 0 56px; }
.hero-inner { display: flex; gap: 40px; align-items: center; }
.hero-mark { width: 132px; flex: none; }
.eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: .18em; opacity: .7; font-weight: 600; }
.hero h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }
.lead { margin: 0 0 22px; max-width: 560px; opacity: .85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }
.btn-light { background: #fff; color: var(--navy); }
.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ── 필터 ─────────────────────────── */
.filters {
  position: sticky; top: 0; z-index: 5;
  margin: 28px 0 8px; padding: 14px 16px;
  background: rgba(246,247,249,.92); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; gap: 8px;
}
.filter-row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.filter-label { flex: none; width: 34px; font-size: 13px; font-weight: 700; color: var(--muted); }
.chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: #C5CDD8; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .mini { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.result-count { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }

/* ── 섹션 · 카드 ─────────────────────── */
.group { margin: 26px 0 40px; }
.group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.group-head h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.group-head p { margin: 0; color: var(--muted); font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.preview {
  height: 200px; display: flex; align-items: center; justify-content: center; padding: 28px;
  background-color: var(--check-a);
  background-image: conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-b) 0 75%, transparent 0);
  background-size: 16px 16px;
  transition: background-color .2s;
}
.preview.dark { background-color: var(--navy); background-image: none; }
.preview.panel { background: #E9EDF2; }
.preview img { width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: 14px 14px 14px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.card-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.card-head h3 small { color: var(--muted); font-weight: 600; margin-right: 6px; }
.tag { flex: none; font-size: 11.5px; font-weight: 600; color: var(--navy); background: #EAF0F7; padding: 3px 8px; border-radius: 999px; }

.dots { display: flex; gap: 6px; align-items: center; }
.dot {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: none;
  display: inline-grid; place-items: center; cursor: pointer;
}
.dot .mini { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.dot[aria-checked="true"] { border-color: var(--navy); }
.dot:focus-visible { outline: 2px solid #6E9BD1; outline-offset: 1px; }
.color-name { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.mini.brand { background: var(--navy); }
.mini.black { background: #000; }
.mini.white-line { background: var(--navy); box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 5px #fff; }
.mini.white { background: #fff; outline: 3px solid var(--navy); outline-offset: -4px; }
.mini.panel { background: linear-gradient(135deg, var(--navy) 50%, #fff 50%); }

.dl { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; }
.dl select, .dl button {
  height: 36px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); padding: 0 10px; cursor: pointer;
}
.dl select { min-width: 0; color: var(--muted); }
.dl button { background: var(--navy); border-color: var(--navy); color: #fff; padding: 0 12px; }
.dl button:hover { background: var(--navy-2); }
.dl button[data-fmt="svg"] { background: #fff; color: var(--navy); border-color: #C9D3DF; }
.dl button:disabled { opacity: .5; cursor: progress; }

.empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* ── 전체 받기 ─────────────────────── */
.band { background: #fff; border-block: 1px solid var(--line); padding: 56px 0; margin-top: 24px; }
.band h2, .guide h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.01em; }
.section-lead { margin: 0 0 22px; color: var(--muted); }
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.bundle { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--bg); }
.bundle:hover { border-color: var(--navy); }
.bundle strong { display: block; font-size: 15px; }
.bundle small { color: var(--muted); font-size: 12.5px; }
/* AI 원본: RGB / CMYK 고르기 */
.ai-pick { grid-column: 1 / -1; align-items: flex-start; }
.ai-pick:hover { border-color: var(--line); }
.ai-body { flex: 1; min-width: 0; }
.ai-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 12px 0; }
.ai-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.ai-opt:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.ai-opt input { margin: 3px 0 0; accent-color: var(--navy); flex: none; }
.ai-opt b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ai-opt em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 999px; padding: 1px 7px; }
.ai-opt small { display: block; margin-top: 2px; line-height: 1.45; }
.ai-dl { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.ai-dl:hover { background: var(--navy-2); }
.bundle-ext { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .04em; }

/* ── 가이드 ─────────────────────────── */
.guide { padding: 56px 0 72px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 20px; }
.g-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.g-card.wide { grid-column: 1 / -1; }
.g-card h3 { margin: 0 0 14px; font-size: 16px; }
.swatches { display: grid; gap: 14px; }
.sw { display: flex; gap: 12px; align-items: flex-start; }
.sw-chip { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.sw-white { background: #fff; border: 1px solid var(--line); }
.sw strong { display: block; font-size: 14px; margin-bottom: 2px; }
.sw code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); cursor: pointer; width: fit-content; }
.sw code[data-copy]:hover { color: var(--navy); text-decoration: underline; }
.hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.fonts { margin: 0; display: grid; grid-template-columns: 40px 1fr; gap: 10px 8px; font-size: 14px; }
.fonts dt { color: var(--muted); font-weight: 600; }
.fonts dd { margin: 0; }
.plain { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 6px; }
.clearspace { margin: 0 0 14px; padding: 18px; border: 1px dashed #AFC0D4; border-radius: 10px; background: repeating-linear-gradient(45deg, #F3F6FA 0 6px, #fff 6px 12px); }
.clearspace img { background: #fff; outline: 14px solid #fff; }
.donts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.donts figure { margin: 0; }
.donts img { height: 90px; width: 100%; object-fit: contain; padding: 14px; background: var(--bg); border-radius: 10px; }
.donts .busy img { background: repeating-linear-gradient(60deg, #2E5D8C 0 14px, #6E8FB0 14px 28px); }
.donts figcaption { margin-top: 8px; font-size: 13px; color: #B3261E; font-weight: 600; }
.donts figcaption::before { content: "✕ "; }

.footer { background: var(--navy); color: rgba(255,255,255,.7); padding: 36px 0; font-size: 13px; }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-logo { height: 44px; width: auto; }
.footer p { margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  transition: .2s; pointer-events: none; z-index: 20;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .hero { padding: 40px 0; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-mark { width: 84px; }
  .filters { padding: 10px 12px; }
  .filter-row { gap: 8px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
}
.chip[aria-pressed="true"] .mini { border-color: #fff; }

/* ── 상단 메뉴 ─────────────────────────── */
[hidden] { display: none !important; }
.topnav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 15px; color: var(--navy); white-space: nowrap; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { flex: none; padding: 7px 11px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.nav-links a:hover { color: var(--ink); background: var(--bg); }
.nav-links a[aria-current] { color: var(--navy); background: #EAF0F7; }
.filters { top: 64px; }

.page-head { padding: 36px 0 8px; }
.page-head h1, .guide h1 { margin: 4px 0 6px; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; }
.crumb { margin: 0; font-size: 13px; color: var(--muted); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.guide { padding-top: 36px; }

/* ── 색인 ─────────────────────────── */
.index-search { margin: 28px 0 8px; }
.index-search input, .field input {
  width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 16px; color: var(--ink);
}
.index-search input:focus, .field input:focus { outline: 2px solid #6E9BD1; outline-offset: 1px; border-color: transparent; }
.idx-group { margin: 28px 0 36px; }
.idx-group > h2 { margin: 0 0 14px; font-size: 21px; }
.idx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.idx-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .15s, transform .15s; }
.idx-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.idx-thumb { height: 150px; display: grid; place-items: center; padding: 22px; background: #fff; border-bottom: 1px solid var(--line); }
.idx-thumb.dark { background: var(--navy); }
.idx-thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.idx-text { padding: 12px 14px; display: grid; gap: 2px; }
.idx-text strong { font-size: 15px; }
.idx-text small { color: var(--muted); font-size: 12.5px; }

/* ── 부서 페이지 ─────────────────────────── */
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #8A5A00; background: #FFF2D6; vertical-align: 2px; }
.badge.big { margin: 0; font-size: 12px; padding: 4px 10px; color: var(--navy); background: #EAF0F7; }
.dept-files { margin: 18px 0 22px; }
.dept-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 28px 0 56px; }
.dept-colors { display: grid; gap: 14px; }
.note { margin: 0; font-size: 14px; color: var(--muted); white-space: pre-line; }

/* ── 로고 만들기 ─────────────────────────── */
.maker { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; padding: 16px 0 64px; }
.maker-form { position: sticky; top: 72px; display: grid; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.wrap-chips { flex-wrap: wrap; overflow: visible; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: -8px; }
.examples .chip { height: 28px; font-size: 12.5px; padding: 0 10px; }
.ex-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.mk-warn { margin: -8px 0 0; font-size: 13px; color: #B3261E; min-height: 0; }
.mk-warn:empty { display: none; }
.maker-out { display: grid; gap: 12px; min-width: 0; }
.preview.big { height: auto; min-height: 320px; padding: 48px; border: 1px solid var(--line); border-radius: var(--radius); }
.preview.big svg { width: 100%; max-height: 360px; height: auto; }
.preview svg { display: block; max-width: 100%; max-height: 100%; }
.loading { color: var(--muted); }
#mk-dl { grid-template-columns: 1fr auto auto auto; max-width: 420px; }
.mk-all h3 { margin: 22px 0 12px; font-size: 15px; }
#mk-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mk-card { display: grid; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; cursor: pointer; font: inherit; text-align: left; }
.mk-card .preview { height: 130px; padding: 20px; }
.mk-card span { padding: 9px 12px; font-size: 13.5px; font-weight: 600; border-top: 1px solid var(--line); }
.mk-card[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }

@media (max-width: 760px) {
  .maker { grid-template-columns: minmax(0, 1fr); }
  .maker-form { position: static; }
  .preview.big { min-height: 200px; padding: 24px; }
  .brand span { display: none; }
}

/* SNS 프로필 사진 */
.pf-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; border: 1px dashed #C9D3DF; border-radius: 10px; background: #fff;
  color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pf-btn:hover { background: #F1F4F8; border-style: solid; }
.pf-ic { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; }
#mk-pf { margin-top: 10px; width: 100%; }
#pf {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink);
  box-shadow: 0 24px 64px rgba(15, 27, 42, .28);
}
#pf::backdrop { background: rgba(15, 27, 42, .5); }
.pf-head { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.pf-head h2 { margin: 0; font-size: 18px; }
.pf-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
#pf-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F1F4F8; color: var(--muted); font-size: 15px; cursor: pointer; flex: none; }
.pf-body { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 20px 22px 22px; align-items: start; }
#pf-canvas {
  width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: repeating-conic-gradient(var(--check-a) 0 25%, var(--check-b) 0 50%) 0 0 / 20px 20px;
}
.pf-form { display: grid; gap: 16px; }
.pf-form small { color: var(--muted); font-size: 12px; }
.pf-bgs { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-sw { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(15, 27, 42, .15); cursor: pointer; padding: 0; }
.pf-sw[aria-pressed="true"] { outline: 3px solid #6E9BD1; outline-offset: 2px; }
.pf-form input[type=range] { width: 100%; accent-color: var(--navy); }
.pf-form select { height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; background: #fff; }
.pf-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-dl button {
  display: grid; gap: 2px; padding: 10px; border-radius: 10px; border: 1px solid var(--navy);
  background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.pf-dl button small { color: rgba(255, 255, 255, .75); font-weight: 500; font-size: 11px; }
.pf-dl button[data-pf="png"] { background: #fff; color: var(--navy); border-color: #C9D3DF; }
.pf-dl button[data-pf="png"] small { color: var(--muted); }
.pf-dl button:disabled { opacity: .5; cursor: progress; }
@media (max-width: 640px) {
  .pf-body { grid-template-columns: 1fr; gap: 16px; }
  #pf-canvas { max-width: 260px; justify-self: center; }
}