/* WALDLUST 통합 도움말 — 고객용 도움말 센터 스타일 (4개 서비스 · 국가/언어) */
:root {
  --bg: #ffffff;
  /* 색: 메인 차콜 #222222 + 포인트 딥 그린 #1F7A4D (2026-10-27 확정). 녹색은 링크·현재 위치·포커스·Step 등 표시 용도로만 */
  --main: #222222;
  --bg-soft: #f6f6f4;
  --bg-tint: #f6f6f4;
  --fg: #222222;
  --fg-soft: #4b4b4b;
  --fg-muted: #737373;
  --border: #e6e6e3;
  --accent: #1f7a4d;
  --accent-strong: #17603c;
  --accent-soft: #eaf4ee;
  --accent-line: #a9d3b8;
  --mark: #e5484d;
  --mark-soft: #fff4f4;
  --info-bg: #f1f7f3;
  --info-border: #d3e8da;
  --warn-bg: #fff9ec;
  --warn-border: #fde7b0;
  --radius: 14px;
  --sidebar-w: 272px;
  --toc-w: 220px;
  --topbar-h: 60px;
  --shadow: 0 1px 2px rgba(34, 34, 34, 0.04), 0 6px 20px rgba(34, 34, 34, 0.06);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar-h) + 20px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }

/* ── 상단 바 ── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 700; font-size: 17px; }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand .logo {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--main); color: #fff;
}
.topbar .brand small { color: var(--fg-muted); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; }
.topbar .spacer { flex: 1; }
.topbar .full-link { display: none; font-size: 14px; font-weight: 600; }
.menu-toggle {
  display: none;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--fg);
  align-items: center; justify-content: center; cursor: pointer;
}

/* ── 3단 배치 ── */
.layout { display: flex; align-items: flex-start; }
.sidebar {
  position: sticky; top: var(--topbar-h);
  width: var(--sidebar-w); flex: none;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 20px 14px 48px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.nav-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-soft); color: var(--fg-soft); }
.nav-home { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--fg); font-size: 15px; font-weight: 600; }
.nav-home:hover { background: var(--bg-soft); text-decoration: none; }
.nav-home.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-home.active .nav-ico { background: #fff; color: var(--accent); }
.nav-sec { margin: 18px 10px 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.nav-group { margin-bottom: 2px; }
.nav-group > .nav-group-title {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 10px; border-radius: 10px;
  color: var(--fg); font-size: 15px; font-weight: 600; line-height: 1.4;
}
.nav-group > .nav-group-title:hover { background: var(--bg-soft); text-decoration: none; }
.nav-group > .nav-group-title.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-group > .nav-group-title.active .nav-ico, .nav-group.open > .nav-group-title .nav-ico { background: var(--accent-soft); color: var(--accent); }
.nav-label { flex: 1; min-width: 0; }
.nav-group > .nav-group-title .chev { color: var(--fg-muted); transition: transform 0.15s; display: flex; }
.nav-group.open > .nav-group-title .chev { transform: rotate(90deg); }
.nav-group .nav-docs { display: none; margin: 4px 0 10px 24px; padding-left: 14px; border-left: 2px solid var(--border); }
.nav-group.open .nav-docs { display: block; }
.nav-doc { display: block; padding: 5px 10px; border-radius: 8px; color: var(--fg-soft); font-size: 14.5px; line-height: 1.5; }
.nav-doc:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.nav-doc.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-doc.disabled { color: #a3a3a0; cursor: default; }
.nav-doc.disabled:hover { background: none; }
.nav-group.pending > .nav-group-title { color: #8f8f8b; font-weight: 500; }
.nav-group.pending .nav-ico { color: #a3a3a0; }
.nav-badge { font-size: 11px; font-weight: 600; color: #8f8f8b; background: var(--bg-soft); border-radius: 999px; padding: 0 8px; line-height: 20px; white-space: nowrap; }
.nav-empty { padding: 10px 12px; font-size: 14px; color: var(--fg-muted); }
/* 3 depth 사이드바 (메뉴 → 그룹 → 안내, 메뉴 정의가 있는 서비스만): 메뉴는 기존 그룹 모양, 그룹은 아이콘 없는 한 단계 작은 줄 */
.nav-menu { margin-bottom: 2px; }
.nav-menu > .nav-menu-title {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 10px; border-radius: 10px;
  color: var(--fg); font-size: 15px; font-weight: 600; line-height: 1.4;
}
.nav-menu > .nav-menu-title:hover { background: var(--bg-soft); text-decoration: none; }
.nav-menu > .nav-menu-title.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-menu > .nav-menu-title.active .nav-ico, .nav-menu.open > .nav-menu-title .nav-ico { background: var(--accent-soft); color: var(--accent); }
.nav-menu .chev { color: var(--fg-muted); transition: transform 0.15s; display: flex; padding: 4px; margin: -4px -4px -4px 0; border-radius: 6px; cursor: pointer; }
.nav-menu .chev:hover { background: #ececea; color: var(--fg); }
.nav-menu.open > .nav-menu-title .chev { transform: rotate(90deg); }
.nav-menu-body { display: none; margin: 2px 0 8px 23px; padding-left: 8px; border-left: 2px solid var(--border); }
.nav-menu.open > .nav-menu-body { display: block; }
.nav-group.sub > .nav-group-title { gap: 6px; padding: 5px 8px 5px 10px; font-size: 14.5px; color: var(--fg-soft); }
.nav-group.sub.open > .nav-group-title { color: var(--fg); }
.nav-group.sub > .nav-group-title.active { color: var(--accent-strong); }
.nav-group.sub .nav-docs { margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-group.sub .nav-doc, .nav-group.flat .nav-doc { font-size: 14px; padding: 4px 10px; }
.nav-group.flat .nav-docs { display: block; margin: 0; padding: 0; border: 0; }

.content { flex: 1; min-width: 0; padding: 44px 56px 96px; }
.article { max-width: 860px; margin: 0 auto; }
.toc {
  position: sticky; top: var(--topbar-h);
  width: var(--toc-w); flex: none;
  max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 44px 24px 40px 0;
  font-size: 13.5px;
}
.toc .toc-title { font-weight: 700; color: var(--fg); margin-bottom: 10px; }
.toc a { display: block; padding: 4px 0 4px 14px; border-left: 2px solid var(--border); color: var(--fg-muted); line-height: 1.5; }
.toc a:hover { color: var(--fg); text-decoration: none; }
.toc a.active { color: var(--accent-strong); border-left-color: var(--accent); font-weight: 600; }

/* ── 본문 공통 ── */
.doc-crumb { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--fg-muted); margin-bottom: 12px; }
.doc-crumb > * + *::before { content: "›"; margin: 0 8px; color: #c4c4c0; }
.doc-crumb a { color: var(--fg-muted); }
.doc-crumb a:hover { color: var(--accent); }
.article h1 { font-size: 32px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.02em; }
.article h2 { font-size: 22px; margin: 48px 0 16px; letter-spacing: -0.01em; }
.article h3 { font-size: 19px; margin: 44px 0 12px; }
.article p { margin: 8px 0; }
.article ul { margin: 6px 0 12px; padding-left: 22px; }
.article li { margin: 4px 0; }
.article li::marker { color: #a3a3a0; }
.article strong { font-weight: 700; }
.article table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15px; }
.article th, .article td { border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.article th { font-weight: 600; color: var(--fg-soft); }
.lead { font-size: 17.5px; color: var(--fg-soft); margin: 4px 0 20px !important; }
.ver { color: var(--fg-muted); font-size: 13px; margin-top: 24px !important; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; }
.btn:hover { background: var(--accent-strong); text-decoration: none; }

/* 메뉴 위치 · 이용 대상 */
.doc-info { margin: 0 0 12px; padding: 14px 18px; border-radius: var(--radius); background: var(--bg-soft); display: grid; gap: 8px; font-size: 15px; }
.info-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.info-k { flex: none; width: 92px; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted); font-size: 14px; font-weight: 600; }
.info-k svg { position: relative; top: 1px; }
.info-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--fg); font-weight: 600; }
.info-path svg { color: #a3a3a0; }

/* 단계 */
.step-title { display: flex; align-items: center; gap: 12px; padding-top: 28px; border-top: 1px solid var(--border); }
.step-title .step-no {
  flex: none; display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}

/* 안내 상자 */
.callout { display: flex; gap: 12px; padding: 16px 18px; margin: 20px 0; border-radius: var(--radius); border: 1px solid var(--info-border); background: var(--info-bg); font-size: 15px; }
.callout .ico { flex: none; color: var(--accent); margin-top: 2px; display: flex; }
.callout-title { font-weight: 700; margin-bottom: 2px; }
.callout.warn { border-color: var(--warn-border); background: var(--warn-bg); }
/* 서비스 홈: 「처음이라면」 · 「알아두세요」 좌우 두 칸 */
.svc-intro { margin: 20px 0; }
.svc-intro.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.svc-intro .callout { margin: 0; height: 100%; }
.cat-card.start-card { position: relative; min-height: 0; background: var(--info-bg); border-color: var(--info-border); }
.start-card .svc-go { background: #fff; box-shadow: inset 0 0 0 1px var(--info-border); }
.start-card:hover .svc-go { background: var(--accent); color: #fff; box-shadow: none; }
.start-k { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent-strong); }
.start-card .cat-t { margin-top: 2px; }
/* 단계 카드(주문접수 프로그램 등): 「처음이라면」 제목 + 1·2·3 카드 한 줄 */
.start-steps-k { display: flex; align-items: center; gap: 6px; margin: 24px 0 10px; font-size: 14px; font-weight: 700; color: var(--accent-strong); }
.start-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.start-steps .step-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--main); color: #fff; font-weight: 700; font-size: 15px; }
.start-steps .cat-t { margin-top: 14px; }
@media (max-width: 760px) { .start-steps { grid-template-columns: 1fr; } }
.intro-notes { margin: 2px 0 0; padding-left: 18px; }
.intro-notes li + li { margin-top: 4px; }
@media (max-width: 760px) { .svc-intro.two { grid-template-columns: 1fr; } }
.callout.warn .ico { color: #c27c0e; }
.inline-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mark); color: #fff; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }

/* 화면 번호 설명 */
.marks { margin: 18px 0 8px; display: grid; gap: 8px; }
.mark-item { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--bg-soft); border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; }
.mark-item.hl { background: var(--mark-soft); border-color: #ffd0d1; }
.mark-item .num {
  flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  background: var(--mark); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; cursor: pointer;
}
.mark-item .mark-body { flex: 1; min-width: 0; }
.mark-item .mark-title { font-weight: 700; }
.mark-item ul { margin: 4px 0 0; font-size: 15px; color: var(--fg-soft); }

/* 문서 하단 */
.pager { display: flex; gap: 12px; margin-top: 64px; }
.pager a { flex: 1; display: block; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); font-weight: 600; }
.pager a:hover { border-color: var(--accent-line); box-shadow: var(--shadow); text-decoration: none; }
.pager a small { display: flex; align-items: center; gap: 4px; color: var(--fg-muted); font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.pager a.next { text-align: right; }
.pager a.next small { justify-content: flex-end; }
.pager .empty { flex: 1; }
.help-card { display: flex; gap: 14px; align-items: center; margin-top: 20px; padding: 18px 20px; border-radius: var(--radius); background: var(--bg-soft); }
.help-card .help-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--accent); box-shadow: var(--shadow); }
.help-card b { display: block; }
.help-card p { margin: 0 !important; color: var(--fg-soft); font-size: 14.5px; }

/* ── 홈 ── */
.hero {
  margin: -8px 0 8px; padding: 44px 40px 40px; border-radius: 22px;
  background: var(--bg-soft);
}
.hero-eyebrow { display: inline-block; padding: 2px 12px; border-radius: 999px; background: #fff; color: var(--accent-strong); font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.hero h1 { font-size: 36px !important; margin: 14px 0 8px !important; }
.hero p { color: var(--fg-soft); font-size: 17px; margin: 0 0 24px !important; }
.hero-search { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-radius: 16px; background: #fff; color: var(--fg-muted); box-shadow: 0 8px 30px rgba(34, 34, 34, 0.06); border: 1px solid var(--border); }
.hero-search:focus-within { border-color: var(--accent); }
/* 서비스 홈 검색창 (그 서비스 안내만) */
.svc-search { height: 50px; margin: 16px 0 0; box-shadow: none; }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--fg); background: transparent; }
.hero-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(34, 34, 34, 0.14); border: 1px solid var(--border); padding: 6px; max-height: 420px; overflow: auto; }
.hero-results a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--fg); }
.hero-results a:hover { background: var(--bg-soft); text-decoration: none; }
.hero-results a b { display: block; font-size: 15px; }
.hero-results a span { display: block; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; }
.hero-results .no-hit { padding: 14px; color: var(--fg-muted); font-size: 14.5px; }

.pop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.pop-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); color: var(--fg); font-weight: 600; font-size: 15px; }
.pop-item small { margin-left: auto; color: var(--fg-muted); font-weight: 500; font-size: 13px; }
.pop-item svg { color: #a3a3a0; }
.pop-item:hover { border-color: var(--accent-line); box-shadow: var(--shadow); text-decoration: none; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cat-card { display: flex; flex-direction: column; padding: 20px; border-radius: 18px; border: 1px solid var(--border); background: #fff; color: var(--fg); min-height: 180px; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
.cat-card:hover { text-decoration: none; border-color: var(--accent-line); box-shadow: 0 10px 28px rgba(34, 34, 34, 0.08); transform: translateY(-2px); }
.cat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--main); color: #fff; }
.cat-ico.lg { width: 56px; height: 56px; border-radius: 16px; flex: none; }
.cat-t { font-weight: 700; font-size: 17px; margin-top: 14px; }
.cat-d { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin-top: 4px; }
.cat-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.cat-card.pending { background: var(--bg-soft); border-color: transparent; }
/* 서비스 홈의 메뉴 카드: 카드 아래 그 메뉴의 그룹 이름 */
.cat-subs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.cat-subs span { font-size: 12.5px; line-height: 1.5; color: var(--fg-soft); background: var(--bg-soft); border-radius: 6px; padding: 1px 8px; }
/* 메뉴 화면: 그룹마다 제목 + 설명 + 안내 목록 */
.menu-sec { margin-top: 28px; }
.article h2.menu-sec-h { margin: 0 0 4px; padding: 0; border: 0; font-size: 19px; }
.menu-sec-h a { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.menu-sec-h a:hover { color: var(--accent-strong); text-decoration: none; }
.menu-sec-h .cat-ico { width: 32px; height: 32px; border-radius: 10px; }
.article p.menu-sec-d { margin: 0 0 10px 42px; font-size: 14.5px; color: var(--fg-muted); }
@media (max-width: 900px) { .article p.menu-sec-d { margin-left: 0; } }
.cat-card.pending .cat-ico { background: #ececea; color: #a3a3a0; }
.cat-card.pending .cat-t, .cat-card.pending .cat-d { color: #9a9a96; }
.cat-card.pending .cat-foot { color: #a3a3a0; font-weight: 500; }

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.role-card { padding: 14px 16px; border-radius: 14px; background: var(--bg-soft); }
.role-card b { display: block; }
.role-card span { display: block; font-size: 14px; color: var(--fg-soft); }
.role-card small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--fg-muted); }

/* ── 그룹 ── */
.group-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.group-head h1 { margin: 2px 0 4px !important; }
.group-head .lead { margin: 0 !important; }
.doc-list { display: grid; gap: 10px; margin: 8px 0 20px; }
.doc-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--border); color: var(--fg); }
.doc-row > div { flex: 1; min-width: 0; }
.doc-row b { display: block; font-size: 16.5px; }
.doc-row p { margin: 2px 0 0 !important; font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; }
.doc-row .doc-for { flex: none; font-size: 12.5px; color: var(--fg-muted); background: var(--bg-soft); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.doc-row svg { flex: none; color: #a3a3a0; }
.doc-row:hover { text-decoration: none; border-color: var(--accent-line); box-shadow: var(--shadow); }
.doc-row.pending { color: #9a9a96; background: var(--bg-soft); border-color: transparent; }

.notfound { text-align: center; padding: 72px 0; color: var(--fg-muted); }
.notfound .cat-ico { margin: 0 auto 8px; }
.notfound h1 { color: var(--fg); }

/* ── 임베드 모드 (어드민에서 열 때) ── */
body.embed .sidebar, body.embed .toc, body.embed .menu-toggle, body.embed .pager, body.embed .top-search, body.embed .top-rel, body.embed .search-panel { display: none !important; }
body.embed .topbar .full-link { display: inline; }
body.embed .content { padding: 28px 24px 48px; }

/* ── 반응형 ── */
@media (max-width: 1240px) { .toc { display: none; } }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  /* 휴대폰 폭: 오른쪽 ☰ 패널 (위쪽 .side-mobile: 검색 · 서비스 · 릴리즈 노트 · 국가/언어, 아래 #nav: 현재 서비스 목차) */
  .sidebar {
    position: fixed; right: 0; top: var(--topbar-h); z-index: 40;
    width: min(340px, 100vw);
    transform: translateX(100%); transition: transform 0.2s; visibility: hidden;
    border-right: 0; border-left: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(34, 34, 34, 0.15);
  }
  body.nav-open .sidebar { transform: none; visibility: visible; }
  .content { padding: 28px 16px 72px; }
  .article h1 { font-size: 26px; }
  .hero { padding: 28px 20px; border-radius: 18px; }
  .hero h1 { font-size: 27px !important; }
  .pop-list { grid-template-columns: 1fr; }
  .doc-row .doc-for { display: none; }
  .article table { display: block; overflow-x: auto; }
  .pager { flex-direction: column; }
  .topbar { padding: 0 16px; }
  .topbar .brand small { display: none; }
  .info-k { width: auto; }
}

@media print {
  .topbar, .sidebar, .toc, .pager, .help-card { display: none !important; }
  .content { padding: 0; }
}

/* 문서 첫 단계는 위 구분선 없이 */
.doc-info + .step-title { border-top: 0; padding-top: 12px; }


/* ── 통합 도움말 추가 ── */
body[data-lang="ja"] { --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Pretendard Variable", sans-serif; font-family: var(--font); word-break: normal; line-break: strict; }
.svc-tabs { display: flex; gap: 4px; margin-left: 12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tab { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--fg-soft); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.svc-tab:hover { background: var(--bg-soft); text-decoration: none; color: var(--fg); }
.svc-tab.active { background: transparent; color: var(--main); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.svc-tab.pending { color: #9a9a96; font-weight: 500; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 18px; border: 1px solid var(--border); background: #fff; color: var(--fg); min-height: 168px; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
.svc-card:hover { text-decoration: none; border-color: var(--accent-line); box-shadow: 0 10px 28px rgba(34, 34, 34, 0.08); transform: translateY(-2px); }
.svc-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--main); color: #fff; }
.svc-t { font-weight: 700; font-size: 18px; margin-top: 14px; }
.svc-d { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin-top: 4px; }
/* 카드 오른쪽 위 뱃지: 준비된 서비스는 화살표, 준비 중은 「준비 중」 */
.svc-go { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: background 0.15s, color 0.15s; }
.svc-card:hover .svc-go { background: var(--accent); color: #fff; }
.svc-soon { position: absolute; top: 22px; right: 20px; padding: 0 10px; line-height: 24px; border-radius: 999px; background: #ececea; color: #8f8f8b; font-size: 12px; font-weight: 600; }
.svc-card.pending { background: var(--bg-soft); border-color: transparent; }
.svc-card.pending .svc-ico { background: #ececea; color: #a3a3a0; }
.svc-card.pending .svc-t, .svc-card.pending .svc-d { color: #9a9a96; }

.nav-svc, .nav-svc-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--fg); font-weight: 600; }
.nav-svc:hover, .nav-svc-head:hover { background: var(--bg-soft); text-decoration: none; }
.nav-svc.pending { color: #8f8f8b; font-weight: 500; }
.nav-svc.pending .nav-ico { color: #a3a3a0; }
.nav-svc-head { margin-top: 6px; }
.nav-svc-head.active { background: var(--accent-soft); color: var(--accent-strong); }
.region-tag { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 6px; margin-left: 4px; }
.region-tag.jp { background: #fff1e8; color: #c2410c; }
.region-tag.kr { background: #ececea; color: #3d3d3d; }
h1 .region-tag { font-size: 13px; padding: 5px 8px; position: relative; top: -4px; }
.article ol { margin: 6px 0 12px; padding-left: 22px; }
.article ol li { margin: 4px 0; }

@media (max-width: 1100px) { .svc-tab span { display: none; } .svc-tab { padding: 0 10px; } }
@media (max-width: 900px) {
  .svc-tabs { display: none; }
  .topbar { gap: 8px; }
  .topbar .brand { font-size: 15px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 420px) { .topbar .brand .logo { display: none; } }

/* ── 릴리즈 노트: 게시판 (안내 목록과 같은 카드형) ── */
.rn-board { margin: 8px 0 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; font-size: 15px; }
.rn-board-head, .rn-board-row { display: grid; grid-template-columns: 170px 1fr 92px 108px 16px; gap: 16px; align-items: center; padding: 0 20px; }
.rn-board-head { height: 42px; background: var(--bg-soft); border-bottom: 1px solid var(--border); color: var(--fg-muted); font-size: 13px; font-weight: 600; }
.rn-board-head span:nth-child(3), .rn-board-head span:nth-child(4), .rn-date { text-align: center; }
.rn-board-row { padding-top: 16px; padding-bottom: 16px; color: var(--fg); transition: background 0.15s; }
.rn-board-row + .rn-board-row { border-top: 1px solid var(--border); }
.rn-board-row > svg { color: #a3a3a0; }
.rn-board-row:hover { background: var(--bg-tint); text-decoration: none; }
.rn-board-row:hover > svg { color: var(--accent); }
.rn-date { color: var(--fg-muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-upd { color: var(--fg-soft); }
.rn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rn-tags i { font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--fg-soft); background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.rn-tags .region-tag { margin-left: 0; }
/* 구분 뱃지 5종 */
.rn-tags i.rn-badge { font-weight: 700; letter-spacing: 0.02em; }
.rn-badge.app { background: #f3edff; border-color: #e2d4ff; color: #6d28d9; }
.rn-badge.admin { background: #eef0ff; border-color: #d9ddff; color: #4338ca; }
.rn-badge.pos { background: #e7f7f4; border-color: #c4ebe3; color: #0f766e; }
.rn-badge.kiosk { background: #ecfbef; border-color: #c9eed2; color: #15803d; }
.rn-badge.agent { background: #fdeef5; border-color: #f8d3e4; color: #be185d; }
.rn-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.rn-t b { font-size: 16px; font-weight: 600; }
.rn-t small { margin-top: 2px; color: var(--fg-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-empty { padding: 32px; text-align: center; color: var(--fg-muted); border: 1px dashed var(--border); border-radius: var(--radius); }
.rn-more { text-align: right; margin: 0 0 8px !important; font-size: 14.5px; }
.rn-more a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.rn-back { margin-top: 20px !important; }
.rn-back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ── 릴리즈 노트: 글 ── */
.rn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; }
.rn-meta > span:not(.rn-tags) { color: var(--fg-muted); font-size: 14px; }
.rn-body .rn-h { display: flex; align-items: center; gap: 10px; padding-top: 28px; border-top: 1px solid var(--border); }
.rn-body .rn-h em { font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: var(--fg); border-radius: 6px; padding: 3px 8px; line-height: 1.3; }
.rn-desc { color: var(--fg-soft); margin: -6px 0 16px !important; }
.rn-sub { font-size: 16.5px; margin: 24px 0 6px; }
.rn-note { color: var(--fg-muted); font-size: 13.5px; }
.rn-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; margin: 16px 0; }
.rn-facts span { display: block; color: var(--fg-muted); font-size: 13px; }
.rn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rn-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.rn-card em { font-style: normal; color: var(--accent); font-weight: 700; font-size: 13px; }
.rn-card b { display: block; margin: 4px 0 6px; }
.rn-card p { margin: 0; color: var(--fg-soft); font-size: 14.5px; line-height: 1.65; }
.rn-index { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rn-index-row { display: grid; grid-template-columns: 36px 220px 1fr; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); color: var(--fg); font-size: 15px; }
.rn-index-row:last-child { border-bottom: 0; }
.rn-index-row:hover { background: var(--bg-tint); text-decoration: none; }
.rn-index-row em { font-style: normal; color: var(--accent); font-weight: 700; }
.rn-index-row span { color: var(--fg-muted); font-size: 14px; text-align: right; }
/* 변경 전·후 화면 */
.rn-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; margin: 18px 0 8px; padding: 22px; border-radius: var(--radius); background: var(--bg-soft); }
.rn-shot { margin: 0; width: 210px; }
.rn-pair.wide .rn-shot { width: 100%; max-width: 640px; }
.rn-shot a { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); }
.rn-shot img { display: block; width: 100%; height: auto; }
.rn-tag { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--accent); color: #fff; }
.rn-tag.before { background: #8b95a7; }
.rn-pair.arrow { align-items: center; }
.rn-arrow { color: var(--fg-muted); display: flex; margin-top: 24px; }
.rn-fig { margin: 18px 0 8px; }
.rn-fig a { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.rn-fig img { display: block; width: 100%; height: auto; }
.rn-fig.doc a { max-width: 682px; margin: 0 auto; }
.rn-fig figcaption { text-align: center; }
.rn-fig figcaption { margin-top: 8px; color: var(--fg-muted); font-size: 13.5px; }
/* 기존·변경 비교 상자 */
.rn-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.rn-compare > div { padding: 16px 18px; border-radius: var(--radius); }
.rn-compare p, .rn-compare ul { margin: 8px 0 0 !important; font-size: 15px; }
.rn-before { background: #fdf2f1; }
.rn-after { background: #eef6f0; }
.rn-label { font-size: 13px; font-weight: 700; color: #b4483d; }
.rn-after .rn-label, .rn-flow .on .rn-label { color: #2f6b45; }
.rn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rn-chips i { font-style: normal; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--border); }
.rn-chips.on i { background: #2f5d43; color: #fff; border-color: #2f5d43; }
.rn-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.rn-lang { text-align: center; padding: 18px; border: 1.5px solid #2f5d43; border-radius: var(--radius); }
.rn-lang small { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #2f5d43; color: #fff; font-size: 12px; font-weight: 600; }
.rn-lang b { display: block; margin-top: 8px; font-size: 19px; }
.rn-lang.old { border-color: var(--border); background: var(--bg-soft); color: var(--fg-muted); }
.rn-lang.old small { background: #c4c4c0; }
.rn-scope { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rn-scope div { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; }
.rn-scope b { display: block; margin-bottom: 4px; }
.rn-scope span { display: block; color: var(--fg-soft); line-height: 1.6; }
.rn-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.rn-flow > div { padding: 16px 18px; border-radius: var(--radius); background: #fdf2f1; }
.rn-flow > div.on { background: #eef6f0; }
.rn-flow ol { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rn-flow li { padding: 6px 12px; border-radius: 8px; background: #fff; font-size: 14.5px; font-weight: 600; }
.rn-flow li + li::before { content: '→'; margin: 0 8px 0 -2px; color: var(--fg-muted); font-weight: 400; }
.rn-flow em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 13px; font-weight: 700; color: #2f6b45; }
.rn-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.rn-points > div { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.rn-points p { margin: 6px 0 0 !important; color: var(--fg-soft); font-size: 15px; }
@media (max-width: 900px) {
  .rn-board-head { display: none; }
  .rn-board-row { grid-template-columns: auto auto 1fr; gap: 6px 12px; padding: 14px 16px; }
  .rn-board-row > svg { display: none; }
  .rn-tags { grid-column: 1 / -1; }
  .rn-t { grid-column: 1 / -1; }
  .rn-t small { white-space: normal; }
  .rn-date { text-align: left; font-size: 13px; }
  .rn-date::before { content: attr(data-k) ' '; color: var(--fg-muted); }
  .rn-cards, .rn-compare, .rn-flow, .rn-points, .rn-langs { grid-template-columns: 1fr; }
  .rn-scope { grid-template-columns: 1fr 1fr; }
  .rn-index-row { grid-template-columns: 28px 1fr; }
  .rn-index-row span { grid-column: 2; text-align: left; }
  .rn-pair { padding: 14px; gap: 12px; }
  .rn-shot { width: calc(50% - 6px); }
  .rn-arrow { display: none; }
}

/* ── 이미지 촬영 모드 (?shot=N) ── */
body.shot { background: #fff; }
body.shot .topbar, body.shot .sidebar, body.shot .toc { display: none !important; }
body.shot .content { padding: 0; }
body.shot .article { max-width: none; width: 720px; margin: 0; }
body.shot .article > * { display: none !important; }
body.shot .article .mock-figure.shot-on { display: block !important; margin: 0; }
body.shot .mock-frame { border: 0; border-radius: 0; box-shadow: none; }
body.shot .mock-figure figcaption, body.shot .zoom-hint { display: none !important; }
/* 번호 영역은 테두리 없이 스포트라이트·연결선으로 표시 (screen.css .spot-*, app.js spotMarks) */
body.shot .soft-marks .mark-box { outline: 0; background: none; }

/* ── 상단 바 오른쪽: 검색 · 릴리즈 노트 · 국가/언어 ── */
.top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.top-search, .top-rel, .locale-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 10px; border: 1px solid transparent; background: none;
  color: var(--fg-soft); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.top-search { min-width: 200px; border-color: var(--border); background: var(--bg-soft); color: var(--fg-muted); font-weight: 500; margin-right: 4px; }
.top-search .ts-label { flex: 1; text-align: left; }
.top-search:hover, body.search-open .top-search { border-color: var(--accent-line); background: #fff; }
kbd { font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--fg-muted); white-space: nowrap; }
.top-rel:hover, .locale-btn:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.top-rel.active { background: var(--accent-soft); color: var(--accent-strong); }
.locale { position: relative; }
.locale-btn { border-color: var(--border); }
.locale-btn[aria-expanded="true"] { border-color: var(--accent-line); background: #fff; color: var(--fg); }
.locale-btn > svg:last-child { color: var(--fg-muted); }
.locale-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 280px;
  padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: #fff;
  box-shadow: 0 16px 40px rgba(34, 34, 34, 0.14);
}
.loc-sec + .loc-sec { margin-top: 12px; }
.loc-k { font-size: 12px; font-weight: 600; color: var(--fg-muted); margin-bottom: 6px; }
.loc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.loc-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--fg-soft);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.loc-opt b { font-size: 12px; color: var(--fg-muted); }
.loc-opt:hover { border-color: var(--accent-line); color: var(--fg); }
.loc-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.loc-opt.on b { color: var(--accent); }
.article p.loc-note, .loc-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); }
@media (max-width: 1240px) { .top-search { min-width: 0; } .top-search .ts-label { display: none; } }
@media (max-width: 1000px) { .top-rel span { display: none; } }
.menu-toggle .i-close, body.nav-open .menu-toggle .i-open { display: none; }
body.nav-open .menu-toggle .i-close { display: block; }

/* ── 검색 패널 (상단 오른쪽 아래로 펼침, 좌측 목차는 가리지 않음) ── */
.search-panel {
  position: fixed; top: calc(var(--topbar-h) + 8px); right: 24px; z-index: 45;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - var(--topbar-h) - 32px);
  display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid var(--border); background: #fff;
  box-shadow: 0 20px 50px rgba(34, 34, 34, 0.18);
}
.search-panel[hidden] { display: none; }
.search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--fg-muted); flex: none; }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--fg); background: transparent; }
.sp-results { overflow: auto; padding: 6px; }
.sp-results:empty { display: none; }
.sp-k { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.sp-item { display: block; padding: 9px 12px; border-radius: 10px; color: var(--fg); line-height: 1.5; }
.sp-item b { display: block; font-size: 15px; font-weight: 600; }
.sp-item span { display: block; font-size: 13px; color: var(--fg-muted); }
.sp-item:hover, .sp-item.on { background: var(--bg-soft); text-decoration: none; }
.sp-results .no-hit { padding: 14px; color: var(--fg-muted); font-size: 14.5px; }
.sp-foot { flex: none; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); }

/* 좌측 목차가 검색어로 걸러진 상태 */
.nav-filter { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding: 7px 8px 7px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.nav-filter[hidden] { display: none; }
.nav-filter span { flex: 1; min-width: 0; }
.nav-filter button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: #fff; color: var(--accent-strong); cursor: pointer; }

/* 릴리즈 노트 화면의 좌측: 글 목록 */
.nav-rels { margin: 6px 0 0 23px; padding-left: 8px; border-left: 2px solid var(--border); }
.nav-rel { display: block; padding: 6px 10px; border-radius: 8px; color: var(--fg-soft); font-size: 14px; line-height: 1.45; }
.nav-rel small { display: block; margin-top: 1px; color: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.nav-rel:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.nav-rel.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-svc.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-svc-head { margin-top: 0; }

/* 휴대폰 메뉴 패널 위쪽 (넓은 화면에서는 숨김) */
.side-mobile { display: none; }
.sm-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--fg-muted); font-size: 15px; cursor: pointer; }
.sm-locale { margin-top: 14px; padding: 14px 10px 0; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .top-actions { display: none; }
  .side-mobile { display: block; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
  .side-mobile .nav-sec:first-of-type { margin-top: 16px; }
  .search-panel { right: 8px; left: 8px; width: auto; top: calc(var(--topbar-h) + 6px); }
}

/* 홈 · 준비 중 서비스: 좌측 메뉴 · 우측 목차 없이 가운데 한 열 (휴대폰 폭에서는 ☰ 패널로 남김) */
body.no-side .toc { display: none; }
@media (min-width: 901px) {
  body.no-side .sidebar { display: none; }
}