/* OhSoft 재구축 프리뷰 — 설계서 J절 디자인 토큰 */

:root {
    --color-bg: #ffffff;
    --color-fg: #1d1d1f;
    --color-fg-muted: #6e6e73;
    --color-fg-faint: #a1a1a6;
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-surface: #f5f5f7;
    --color-surface-2: #ebebf0;
    --color-border: #e5e5ea;
    --color-ad: #d2d2d7;

    --space-section: 7rem;
    --measure: 68ch;
    --radius: 12px;
    --radius-lg: 18px;

    --font-ko: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
    --font-ja: "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
    --font-zh: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #000000;
        --color-fg: #f5f5f7;
        --color-fg-muted: #a1a1a6;
        --color-fg-faint: #6e6e73;
        --color-surface: #1c1c1e;
        --color-surface-2: #2c2c2e;
        --color-border: #38383a;
        --color-ad: #48484a;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-ko);
    font-size: 17px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

body[data-locale="ja"] { font-family: var(--font-ja); }
body[data-locale="zh-cn"],
body[data-locale="zh-tw"] { font-family: var(--font-zh); word-break: normal; }

a { color: var(--color-accent); }

/* ---------- 상단 내비게이션 (1단: 브랜드 + 제품 탭 + 언어) ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 52px;
}

.brand {
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: inherit;
    text-decoration: none;
    flex: none;
}

.nav-products {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    font-size: 0.8125rem;
}

.nav-products::-webkit-scrollbar { display: none; }

.nav-products a,
.nav-products span {
    color: var(--color-fg-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 0;
}

.nav-products a:hover { color: var(--color-fg); }
.nav-products .is-current { color: var(--color-fg); font-weight: 600; }
.nav-products .is-soon { color: var(--color-fg-faint); }

/* 언어 전환기 */

.lang-switcher {
    flex: none;
    display: flex;
    gap: 10px;
    font-size: 0.8125rem;
    align-items: center;
}

.lang-switcher a { color: var(--color-fg-muted); text-decoration: none; }
.lang-switcher a:hover { color: var(--color-fg); }
.lang-switcher .lang-current { font-weight: 600; }
.lang-switcher .lang-unavailable {
    color: var(--color-fg-faint);
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- 제품 섹션 내비 (2단) ---------- */

.nav-sections {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.nav-sections-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 48px;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-sections-inner::-webkit-scrollbar { display: none; }

.nav-sections .product-name {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    margin-right: 8px;
    white-space: nowrap;
}

.nav-sections a {
    color: var(--color-fg-muted);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    padding: 2px 0;
    border-bottom: 2px solid transparent;
}

.nav-sections a:hover { color: var(--color-fg); }

.nav-sections a.is-current {
    color: var(--color-fg);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

/* ---------- 레이아웃 ---------- */

main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

.prose {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.2; }

/* ---------- 홈 히어로 ---------- */

.home-hero {
    padding: calc(var(--space-section) * 0.8) 0 0;
    text-align: center;
}

.home-hero h1 {
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    margin: 0 0 16px;
}

.home-hero p {
    font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
    color: var(--color-fg-muted);
    margin: 0 auto;
    max-width: 44ch;
}

/* ---------- 제품 카드 그리드 ---------- */

.section-title {
    font-size: 1.5rem;
    margin: var(--space-section) 0 28px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, background 0.2s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    background: var(--color-surface-2);
}

/* 맨 아래 - 스크린샷. 카드 모서리까지 꽉 차는 16:10 고정 상자다.
   위에 제목·소개라는 가변 요소가 있으므로 그대로 두면 한 줄의 이미지가 어긋난다.
   .card-head·.card-tagline의 고정 높이와 여기의 margin-top: auto가 함께
   카드마다 이미지가 같은 높이에서 시작하게 만든다.
   원본 비율이 1.23~2.02로 제각각이라 contain 레터박스는 카드마다 다른 여백을
   만들어 cover + 위쪽 정렬을 쓴다(화면 상단의 제목줄 메뉴가 늘 보인다). */
.card-shot-frame {
    display: block;
    width: 100%;
    margin-top: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.product-card .card-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s ease;
}

.product-card:hover .card-shot { transform: scale(1.035); }

/* 스크린샷이 없는 제품 - 같은 16:10 자리를 지키고 아이콘만 흐리게 가운데에 둔다. */
.card-shot-frame.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * 제품 아이콘. 설치된 프로그램 실행 파일에서 뽑은 **진짜 제품 아이콘**이다
 * (data/icons/{id}.png, 128x128). 생성기가 assets/icons/ 로 옮기고
 * <img class="icon"> 으로 내보낸다. 크기는 자리마다 따로 준다 — 여기서는 모양만 잡는다.
 *
 * 가장 큰 쓰임이 .product-hero 의 128px 이라 원본도 128px 로 맞춰 뒀다.
 * **그보다 키우려면 아이콘을 다시 뽑아야 한다** — 설치 경로의 실행 파일에는
 * 256px 판이 들어 있다(공식 사이트의 /kor/img/web/{id}_icon.png 는 41px뿐이다).
 */
img.icon {
    object-fit: contain;
    /* 투명 PNG라 배경이 비친다. 어두운 배경에서도 아이콘 자체 흰 면이 살아 있다. */
    background: none;
}

.card-shot-frame.is-empty .icon {
    width: 56px;
    height: 56px;
    opacity: 0.35;
}

/* 본문 - 패딩은 카드가 아니라 여기에 있다.
   높이를 흡수하지 않는다(flex: none) — 남는 높이는 아래 스크린샷의
   margin-top: auto가 가져가야 카드마다 이미지가 같은 줄에서 시작한다. */
.card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    flex: none;
}

/* 머리줄은 고정 높이다. 제목이 한 줄이든 두 줄이든, 아이콘이 있든 없든
   높이가 같아야 아래 소개와 스크린샷이 한 줄에서 나란히 맞는다. */
.card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 62px;
}

.product-card .card-head .icon {
    width: 44px;
    height: 44px;
    flex: none;
}

.card-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.product-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 1.0625rem;
    margin: 0;
    overflow-wrap: anywhere;
}

/* 간략 소개 - 두 줄까지만 보이고 남는 높이는 flex로 흡수한다.
   (line-clamp를 지원하지 않는 브라우저에서는 min-height만 적용돼 자연스럽게 흐른다) */
.product-card .card-tagline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    flex: none;
    margin: 0;
    min-height: calc(2 * 1.5 * 0.875rem);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-fg-muted);
}

.product-card .card-badge {
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.6875rem;
    color: var(--color-fg-muted);
    background: var(--color-bg);
    border-radius: 980px;
    padding: 2px 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1040px) {
    .product-grid,
    .featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 제품 히어로 ---------- */

.product-hero {
    padding: var(--space-section) 0 0;
    text-align: center;
}

.product-hero .icon {
    width: 128px;
    height: 128px;
    margin-bottom: 28px;
}

.product-hero h1 {
    font-size: clamp(2.125rem, 5.5vw, 3.25rem);
    margin: 0 0 14px;
}

.product-hero .tagline {
    font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
    color: var(--color-fg-muted);
    margin: 0 auto 36px;
    max-width: 38ch;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: center;
    margin-top: 20px;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
}

/* ---------- 강조 3종 ---------- */

.highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: var(--space-section) 0 0;
    list-style: none;
    padding: 0;
}

.highlights li {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
}

.highlights strong { display: block; font-size: 1.125rem; margin-bottom: 6px; }
.highlights span { font-size: 0.875rem; color: var(--color-fg-muted); }

/* ---------- 기능 그룹 ---------- */

.feature-group { margin: var(--space-section) 0 0; }
.feature-group h2 { font-size: 1.75rem; margin: 0 0 24px; text-align: center; }

/* 기능 목록. 예전에는 1px 간격 격자 + 배경색으로 칸 사이 선을 그렸는데,
   항목 수가 열 수의 배수가 아니면 **마지막 빈 칸이 회색 상자로 남았다**(5개 / 3열).
   선을 그리지 않고 항목마다 떠 있는 카드로 두면 빈 칸이 아예 생기지 않는다. */
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.format-grid li {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 14px 16px;
    text-align: center;
}

.format-grid strong { display: block; font-size: 1rem; }
.format-grid span { font-size: 0.75rem; color: var(--color-fg-muted); }

/* ---------- 버튼 ---------- */

.btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 980px;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    min-width: 11rem;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-accent);
    color: #ffffff;
}

.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ---------- 다운로드 ---------- */

.download-block {
    text-align: center;
    padding: var(--space-section) 0 0;
}

.download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: center;
    color: var(--color-fg-muted);
    font-size: 0.875rem;
    margin-top: 18px;
}

.download-meta code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* ---------- 받기 준비 페이지 ---------- */

/* 받기 단추를 누르면 파일로 바로 가지 않고 이 페이지가 먼저 뜬다. 몇 초 뒤 자동으로
   내려받기가 시작되고, 직접 받기 링크도 처음부터 보인다.

   **애드센스 정책** — 광고와 받기 링크를 붙여 놓으면 실수로 광고를 누르게 된다.
   그래서 광고 아래에 가로줄과 큰 여백을 두고, 광고 위에는 "광고" 꼬리표를 둔다.
   광고를 단추처럼 꾸미는 스타일은 넣지 않는다. */
.download-gate {
    text-align: center;
    padding: var(--space-section) 0 0;
    max-width: 640px;
    margin: 0 auto;
}

.download-gate h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    margin: 0 0 12px;
}

.gate-lead {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.gate-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: center;
    color: var(--color-fg-muted);
    font-size: 0.875rem;
    margin: 18px 0 0;
}

.gate-ad {
    margin: 40px auto 0;
    max-width: 728px;
}

.gate-ad-label {
    margin: 0 0 6px;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-faint);
}

/* 광고 바로 아래에 붙은 여백과 가로줄. 받기 링크를 광고에서 떼어 놓는 장치다. */
.gate-ad + .gate-actions,
.gate-actions {
    margin: 56px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
    max-width: 640px;
    text-align: center;
}

.gate-manual {
    margin: 0 0 20px;
    color: var(--color-fg-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.gate-direct { margin: 0; }

.gate-back {
    margin: 28px 0 0;
    font-size: 0.875rem;
}

.gate-back a { color: var(--color-fg-muted); text-decoration: none; }
.gate-back a:hover { color: var(--color-fg); }

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 32px;
    font-size: 0.9375rem;
}

.spec-table th,
.spec-table td {
    text-align: left;
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.spec-table th {
    width: 11rem;
    color: var(--color-fg-muted);
    font-weight: 400;
}

/* ---------- 가격 ---------- */

.price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin: 28px 0 8px;
}

.price-list { color: var(--color-fg-muted); text-decoration: line-through; font-size: 1.125rem; }
.price-discount { color: var(--color-accent); font-weight: 600; }
.price-final { font-size: 2.5rem; letter-spacing: -0.03em; }
.price-unit, .price-tax { font-size: 0.875rem; color: var(--color-fg-muted); }

.purchase-channels {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 36px 0 0;
}

.plan {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
}

.plan.is-featured { outline: 2px solid var(--color-accent); }
.plan h3 { margin: 0 0 6px; font-size: 1.25rem; }
.plan .plan-for { font-size: 0.875rem; color: var(--color-fg-muted); margin: 0 0 20px; }
.plan ul { padding-left: 1.1rem; margin: 20px 0 0; font-size: 0.9375rem; }
.plan li { margin-bottom: 6px; }

/* ---------- 도움말 ---------- */

.help-categories { margin: 48px 0 0; }

.help-category + .help-category { margin-top: 56px; }

.help-category h2 {
    font-size: 1.3125rem;
    margin: 0 0 4px;
}

.help-category .count {
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    font-weight: 400;
}

.help-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    border-top: 1px solid var(--color-border);
}

.help-list li { border-bottom: 1px solid var(--color-border); }

.help-list a {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 14px 4px;
    text-decoration: none;
    color: inherit;
}

.help-list a:hover { color: var(--color-accent); }

.help-list .help-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-fg-faint);
    flex: none;
    width: 3.5rem;
}

.help-search {
    width: 100%;
    max-width: 26rem;
    padding: 11px 16px;
    border: 1px solid var(--color-border);
    border-radius: 980px;
    font: inherit;
    font-size: 0.9375rem;
    background: var(--color-surface);
    color: inherit;
}

.breadcrumb {
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    margin: 32px 0 0;
}

.breadcrumb a { color: var(--color-fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-fg); }

.article-header { margin: 12px 0 0; }
.article-header h1 { font-size: clamp(1.75rem, 4vw, 2.375rem); margin: 0 0 12px; }

.article-meta {
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.article-body { margin-top: 40px; font-size: 1.0625rem; }
.article-body h2 { font-size: 1.375rem; margin: 48px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body ol, .article-body ul { padding-left: 1.4rem; margin: 0 0 20px; }
.article-body li { margin-bottom: 8px; }

.article-body code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: 5px;
}

.callout {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin: 0 0 24px;
    font-size: 0.9375rem;
}

.callout strong { display: block; margin-bottom: 4px; }

.shot {
    margin: 0 0 28px;
}

.shot .shot-frame {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-faint);
    font-size: 0.8125rem;
    text-align: center;
    padding: 16px;
}

.shot figcaption {
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    margin-top: 10px;
    text-align: center;
}

.related-help {
    margin: var(--space-section) 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.related-help h2 { font-size: 1.125rem; margin: 0 0 16px; }

/* ---------- 배너 ---------- */

.translation-banner,
.license-notice {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 28px 0 0;
    font-size: 0.9375rem;
    color: var(--color-fg-muted);
}

.translation-banner strong { color: var(--color-fg); }

/* ---------- 광고 자리 ---------- */

/* 실제 광고가 들어가는 자리. 테두리를 그리지 않고 **공간만 잡아 둔다** —
   애드센스가 늦게 뜨거나 비어 있어도 본문이 위아래로 튀지 않게 하려는 것이다.

   자리마다 쓰는 광고 단위(wide · box · auto)에 따라 잡아 두는 크기가 다르다.
   관리자에서 붙여넣은 코드에 고정 크기가 들어 있으면 <ins>에 인라인으로 그 값이
   붙고, 아래 max-width가 좁은 화면에서 넘치는 것을 막는다. */
.ad-slot {
    margin: var(--space-section) auto 0;
    max-width: 100%;
    min-height: 100px;
    background: var(--color-surface);
    border-radius: var(--radius);
}

/* 광고가 가로로 넘쳐 페이지에 좌우 스크롤이 생기지 않게 한다
   (728px 짜리를 좁은 화면에서 열었을 때). */
.ad-slot > ins { display: block; max-width: 100%; }

.ad-slot.ad-wide { max-width: 728px; min-height: 90px; }
.ad-slot.ad-box { max-width: 336px; min-height: 280px; }
.ad-slot.ad-auto { max-width: 100%; min-height: 100px; }

.ad-slot.is-inline { margin: 32px auto; }

/* --preview 로 생성했을 때만 쓰는 점선 상자. 자리를 눈으로 확인하는 용도다. */
.ad-slot.is-placeholder {
    border: 1px dashed var(--color-ad);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    color: var(--color-fg-faint);
    font-size: 0.75rem;
    text-align: center;
    padding: 16px;
}

.ad-slot code { font-family: var(--font-mono); font-size: 0.6875rem; }

/* ---------- 푸터 ---------- */

.site-footer {
    margin-top: var(--space-section);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 16px 48px;
    color: var(--color-fg-muted);
    font-size: 0.8125rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 20px;
}

.footer-links a { color: var(--color-fg-muted); text-decoration: none; }
.footer-links a:hover { color: var(--color-fg); }

/* 법정 사업자 정보. 기존 사이트와 같은 " · " 이어 쓰기를 두 줄로 나눠 둔다
   (윗줄: 상호·대표이사·등록번호 / 아랫줄: 주소·이메일). 좁은 화면에서 자연스럽게 줄바꿈된다. */
.footer-business {
    margin: 0 0 12px;
    color: var(--color-fg-muted);
    overflow-wrap: anywhere;
}

.footer-business p {
    margin: 0;
    line-height: 1.9;
}

.footer-business .sep {
    margin: 0 6px;
    color: var(--color-fg-faint);
}

.footer-company { line-height: 1.8; margin: 0; }

.preview-note {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-fg-faint);
    font-size: 0.75rem;
}

/* ---------- 프리뷰 안내 페이지 ---------- */

.preview-index { max-width: 860px; margin: 0 auto; padding: 64px 16px 96px; }
.preview-index h1 { font-size: 2.25rem; margin: 0 0 12px; }
.preview-index .lead { font-size: 1.125rem; color: var(--color-fg-muted); margin: 0 0 48px; }
.preview-index h2 { font-size: 1.25rem; margin: 48px 0 16px; }

.preview-list { list-style: none; padding: 0; margin: 0; }

.preview-list li {
    border-bottom: 1px solid var(--color-border);
}

.preview-list a {
    display: block;
    padding: 18px 4px;
    text-decoration: none;
    color: inherit;
}

.preview-list a:hover { background: var(--color-surface); }
.preview-list .title { font-weight: 600; display: block; }
.preview-list .path { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); }
.preview-list .why { display: block; font-size: 0.875rem; color: var(--color-fg-muted); margin-top: 4px; }

.check-list { font-size: 0.9375rem; padding-left: 1.2rem; }
.check-list li { margin-bottom: 10px; }

/* ---------- 반응형 ---------- */

@media (max-width: 860px) {
    :root { --space-section: 4.5rem; }
    .header-inner { gap: 14px; }
    .nav-products { font-size: 0.75rem; gap: 16px; }
}

@media (max-width: 600px) {
    :root { --space-section: 3.5rem; }
    body { font-size: 16px; }
    .btn { width: 100%; }
    .btn-row .btn { width: 100%; }
    .purchase-channels { flex-direction: column; }
    .purchase-channels .btn { width: 100%; }
    .spec-table th { width: 7.5rem; }
    .card-body { padding: 16px 16px 14px; }
    .card-head { min-height: 58px; }
    .product-card .card-head .icon { width: 40px; height: 40px; }
    .nav-sections .product-name { font-size: 1.0625rem; }
}

/* ======================================================================
   제품 20개 규모 — 설계서 D.4 / J.1
   제품이 7개를 넘으면 평면 나열을 버리고 카테고리 구조로 전환한다.
   ====================================================================== */

/* ---------- 상단 제품 메가 메뉴 ---------- */

.nav-mega {
    position: relative;
    flex: 1 1 auto;
}

/* 모양은 아래 "전체 제품 버튼" 블록(.nav-all)이 평면 메뉴와 공유한다. */
.nav-mega > summary { list-style: none; }
.nav-mega > summary::-webkit-details-marker { display: none; }

.mega-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: -16px;
    z-index: 30;
    width: min(92vw, 880px);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
    padding: 28px 28px 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 28px 24px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mega-panel {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    }
}

.mega-col h3 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-fg-faint);
    margin: 0 0 10px;
    font-weight: 600;
}

.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col li + li { margin-top: 2px; }

.mega-col a,
.mega-col span.is-soon {
    display: block;
    padding: 5px 8px;
    margin-left: -8px;
    border-radius: 7px;
    font-size: 0.875rem;
    color: var(--color-fg);
    text-decoration: none;
}

.mega-col a:hover { background: var(--color-surface); }
.mega-col .is-current { font-weight: 600; background: var(--color-surface); }

.mega-footer {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 0.8125rem;
}

.mega-footer .count { color: var(--color-fg-muted); }

/* ---------- 홈: 전면 배치 + 카테고리 섹션 ---------- */

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

/* 위쪽 1040px 규칙은 이 선언보다 앞에 있어 덮인다. 여기서 한 번 더 칸 수를 고정한다. */
@media (min-width: 1040px) {
    .featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.category-block { margin-top: var(--space-section); }

.category-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.category-head h2 { font-size: 1.3125rem; margin: 0; }
.category-head .count { font-size: 0.8125rem; color: var(--color-fg-muted); font-weight: 400; }
.category-head a { font-size: 0.8125rem; text-decoration: none; }

/* 20개 규모에서는 카드보다 밀도 높은 행이 훑기 쉽다 */

.product-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
}

.product-row:hover { background: var(--color-surface); }

.product-row .icon { width: 42px; height: 42px; flex: none; }

.product-row .row-text { min-width: 0; }
.product-row .row-name { font-weight: 600; font-size: 0.9375rem; display: block; }

.product-row .row-tagline {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-row .row-badge {
    margin-left: auto;
    flex: none;
    font-size: 0.6875rem;
    color: var(--color-fg-muted);
    background: var(--color-surface-2);
    border-radius: 980px;
    padding: 3px 9px;
    white-space: nowrap;
}

.product-row.is-paid .row-badge { color: var(--color-accent); }

/* ---------- 전체 카탈로그 페이지 ---------- */

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 28px 0 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-chips a {
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border-radius: 980px;
    padding: 6px 14px;
}

.filter-chips a:hover { color: var(--color-fg); }
.filter-chips a.is-active { background: var(--color-fg); color: var(--color-bg); }

.catalog-count { margin-left: auto; font-size: 0.8125rem; color: var(--color-fg-muted); }

/* 카탈로그 본문(카테고리 띠)의 규칙은 아래 "전체 카탈로그: 카테고리마다 가로 띠 한 줄"에 모아 둔다. */

/* ---------- 제품 페이지: 형제 제품 안내 ---------- */

.sibling-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
}

.related-products { margin-top: var(--space-section); }
.related-products h2 { font-size: 1.1875rem; margin: 0 0 16px; }

/* ---------- 비교 메모 ---------- */

.note-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin: 36px 0 0;
    font-size: 0.9375rem;
}

.note-box h2 { font-size: 1.0625rem; margin: 0 0 10px; }
.note-box ul { padding-left: 1.2rem; margin: 0; }
.note-box li { margin-bottom: 7px; }
.note-box li:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
    .mega-panel { left: -8px; padding: 22px 20px 18px; }
    .product-row .row-badge { display: none; }
}

.row-badge.is-paid { color: var(--color-accent); }

/* ---------- 하이브리드 내비: 주요 제품은 펼쳐두고, 전체는 펼쳐본다 ---------- */

.site-header .nav-products { flex: 0 1 auto; }

.nav-mega {
    flex: none;
    position: static;      /* 패널을 뷰포트 기준으로 띄운다 */
    margin-left: auto;
}

/* 가운데 정렬된 고정 패널 — 좌우 어느 쪽으로도 넘치지 않는다 */
.mega-panel {
    position: fixed;
    top: 62px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(94vw, 900px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.site-header .lang-switcher { margin-left: 18px; }

@media (max-width: 760px) {
    .site-header .nav-products { display: none; }  /* 좁은 화면에서는 전체 메뉴만 남긴다 */
    .nav-mega { margin-left: auto; }
    .mega-panel { top: 58px; }
}

/* ======================================================================
   CONTRACT-V2 4절 — 전체제품 버튼 · 언어 콤보박스 · 기계번역 안내
   ====================================================================== */

/* ---------- 보조 유틸 ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- "전체 제품" 버튼 (평면 메뉴 a.nav-all · 메가 메뉴 summary.nav-all 공용) ---------- */

.nav-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 980px;
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-all::-webkit-details-marker { display: none; }

.nav-all:hover,
.nav-all:focus-visible,
.nav-all.is-current,
.nav-mega[open] > .nav-all {
    background: var(--color-surface);
    border-color: var(--color-fg-faint);
    color: var(--color-fg);
}

.nav-all:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.nav-all-grid {
    flex: none;
    width: 12px;
    height: 12px;
    color: var(--color-fg-muted);
    transition: color 0.2s ease;
}

.nav-all:hover .nav-all-grid,
.nav-all:focus-visible .nav-all-grid,
.nav-mega[open] > .nav-all .nav-all-grid { color: var(--color-accent); }

.nav-all-label { letter-spacing: -0.01em; }

.nav-all-count {
    flex: none;
    min-width: 19px;
    padding: 0 5px;
    border-radius: 980px;
    background: var(--color-surface-2);
    color: var(--color-fg-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-all:hover .nav-all-count,
.nav-all:focus-visible .nav-all-count,
.nav-mega[open] > .nav-all .nav-all-count {
    background: var(--color-bg);
    color: var(--color-fg);
}

.nav-all-chevron {
    flex: none;
    width: 10px;
    height: 10px;
    color: var(--color-fg-faint);
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-all:hover .nav-all-chevron,
.nav-all:focus-visible .nav-all-chevron {
    transform: translateY(1px);
    color: var(--color-fg-muted);
}

.nav-mega[open] > .nav-all .nav-all-chevron {
    transform: rotate(180deg);
    color: var(--color-fg-muted);
}

/* 평면 메뉴: 제품명 링크들과 버튼 사이 세로 구분선, 언어는 오른쪽 끝 */
.nav-sep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 -7px;
    background: var(--color-border);
}

.header-inner .nav-all-flat ~ .lang-switcher { margin-left: auto; }

/* ---------- 언어 콤보박스 ---------- */

.site-header .lang-switcher {
    flex: 0 1 auto;
    min-width: 0;
}

.lang-select {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 150px;
    padding: 5px 27px 5px 11px;
    border: 1px solid var(--color-border);
    border-radius: 980px;
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.4 3.4 5 7l3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 9px 9px;
    color: var(--color-fg-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-select:hover { color: var(--color-fg); border-color: var(--color-fg-faint); }

.lang-select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.lang-select option {
    color: var(--color-fg);
    background: var(--color-bg);
}

/* JS가 없을 때만 보이는 링크 목록 (layout.php의 head noscript가 켠다) */
.lang-noscript {
    display: none;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.8125rem;
    max-width: 100%;
}

.lang-noscript a { color: var(--color-fg-muted); text-decoration: none; }
.lang-noscript a:hover { color: var(--color-fg); }
.lang-noscript .lang-current { font-weight: 600; color: var(--color-fg); }

/* ---------- 기계번역 안내 (.translation-banner와 달리 작고 흐린 정보 한 줄) ---------- */

.mt-notice {
    margin: 12px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-fg-faint);
}

/* ---------- 좁은 화면: 브랜드 + 전체제품 + 언어가 한 줄에 들어가야 한다 ---------- */

@media (max-width: 760px) {
    .nav-sep { display: none; }
}

@media (max-width: 600px) {
    .header-inner { gap: 10px; }
    .nav-all { gap: 6px; padding: 4px 9px; font-size: 0.75rem; }
    .lang-select { max-width: 116px; padding: 4px 24px 4px 10px; font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .header-inner { gap: 8px; }
    .nav-all-label { display: none; }
    .lang-select { max-width: 112px; }
}

/* ======================================================================
   홈 상단 2단 — 왼쪽 소개(.home-hero) + 오른쪽 공지(aside.home-notices)
   CONTRACT-V3 1.5. 공지가 없으면 .home-top에 has-notices가 붙지 않고
   .home-hero가 지금까지와 똑같이 전체 폭 중앙 정렬로 남는다.
   ====================================================================== */

.home-top.has-notices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 20px 44px;
    align-items: center;
    padding: 22px 0 0;
}

/* 2단일 때만 소개를 왼쪽으로 돌린다 — 기존 .home-hero 규칙은 그대로 둔다 */
.home-top.has-notices .home-hero {
    padding: 0;
    text-align: left;
}

.home-top.has-notices .home-hero h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    text-wrap: balance;
}

.home-top.has-notices .home-hero p {
    margin: 0;
    max-width: none;
    font-size: 1.0625rem;
    text-wrap: balance;
}

/* 소개 칸의 제품 아이콘 줄. 글 두 줄만 있어 허전하던 자리를 채운다.
   머리말의 글자 메뉴와 겹치지만, 이쪽은 아이콘이라 성격이 다르고 눈이 먼저 간다. */
.hero-products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.hero-products a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px 8px 9px;
    border-radius: 980px;
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.hero-products a:hover { color: var(--color-fg); }

.hero-products .icon { width: 26px; height: 26px; flex: none; }

/* 홈 공지 한 건 — 제목 아래 본문 첫 문단까지 보여 준다(사용자 지시). */
.notice-body {
    margin: 8px 0 0;
    color: var(--color-fg-muted);
    font-size: 0.875rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-notices .notice-more {
    margin: 14px 0 0;
    font-size: 0.8125rem;
}

.home-notices .notice-more a { color: var(--color-fg-muted); text-decoration: none; }
.home-notices .notice-more a:hover { color: var(--color-fg); }
/* ---------- 공지 패널 ---------- */

/* 제목과 [전체 보기]를 한 줄에 둔다 — 목록 아래에 있던 링크를 위로 올렸다(사용자 지시). */
.home-notices-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* 홈의 [전체 보기] — 민무늬 링크는 눈에 띄지 않아 작은 알약으로 둔다.
   공지 패널과 최신 글 두 곳이 같은 모양을 쓴다. */
.home-notices-head a,
.home-content-head a,
.home-today-head a {
    flex: none;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--color-fg-muted);
    background: var(--color-surface-2);
    border-radius: 980px;
    padding: 6px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.home-notices-head a:hover,
.home-content-head a:hover,
.home-today-head a:hover {
    color: var(--color-fg);
    background: var(--color-surface);
}


.home-notices {
    min-width: 0;
    padding: 20px 22px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}

.home-notices-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-fg-muted);
    margin: 0 0 12px;
}

.notice-list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 한 항목 = 제목 줄 + 날짜 줄. 날짜·배지·제목을 한 줄에 욱여넣지 않아
   제목이 어디서 끊기든 줄 모양이 흐트러지지 않는다. */
.notice-item {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 11px 0;
    border-top: 1px solid var(--color-border);
}

.notice-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.notice-item:last-child { padding-bottom: 0; }

.notice-date {
    font-size: 0.75rem;
    color: var(--color-fg-faint);
    font-variant-numeric: tabular-nums;
}

.notice-pin-icon {
    flex: none;
    margin-top: 0.2em;
    color: var(--color-accent);
}

.notice-text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

a.notice-text {
    color: var(--color-fg);
    text-decoration: none;
}

a.notice-text:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.notice-item.is-pinned .notice-text { font-weight: 600; }

.notice-more {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    text-align: right;
}

.notice-more a { text-decoration: none; }
.notice-more a:hover { text-decoration: underline; }

/* 900px 이하: 2단을 1단으로. 소스 순서대로 공지가 소개 아래로 간다. */
@media (max-width: 900px) {
    .home-top.has-notices {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
    .home-top.has-notices .home-hero { text-align: center; }
    .home-top.has-notices .home-hero p { margin: 0 auto; max-width: 44ch; }
}

@media (max-width: 400px) {
    .home-notices { padding: 16px 16px 14px; }
}

/* ---------- 공지사항 목록 페이지 ({lang}/notice/) ---------- */

.notice-page-head { padding-top: var(--space-section); }

.notice-page-head h1 {
    font-size: clamp(1.875rem, 4.5vw, 2.5rem);
    margin: 0 0 10px;
}

.notice-page-empty {
    margin: 28px 0 0;
    color: var(--color-fg-muted);
}

.notice-page-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
}

.notice-page-item {
    display: block;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
}

.notice-page-item .notice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 6px;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
}

.notice-page-item .notice-badge {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
}

.notice-page-title {
    font-size: 1.125rem;
    margin: 0;
}

.notice-page-item .notice-body {
    margin-top: 10px;
    max-width: var(--measure);
}

.notice-page-item .notice-body p {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    line-height: 1.75;
}

.notice-page-item .notice-body p:last-child { margin-bottom: 0; }

/* ======================================================================
   홈 본문 — 히어로 버튼

   "오소프트 제품 안내" 3칸(강점 카드 격자)은 2026-10-10에 사용자 지시로 규칙째 제거했다.
   그 자리는 홈 하단의 오늘의 뉴스/팁(.home-today)이 받는다. 되살리지 마라 —
   build/test.php 9-2절이 그 클래스가 다시 생기지 않았는지 본다.
   ====================================================================== */

/* 히어로 아래 버튼 한 개 — 2단일 때도 왼쪽 정렬을 따라간다 */
.home-hero-actions { margin: 24px 0 0; }
.home-hero-actions .btn { display: inline-flex; }

@media (max-width: 900px) {
    .home-top.has-notices .home-hero .home-hero-actions { text-align: center; }
}

/* ======================================================================
   도움말 · 블로그 ({lang}/help/, {lang}/blog/)

   본문 HTML은 관리자 에디터가 만든 것이고 build/lib/content.php가 정제해서
   허용 태그만 남긴다. 그래서 여기서는 그 태그들의 보기만 정한다.
   ====================================================================== */

.content-head { padding-top: var(--space-section); }

.content-head h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    margin: 0;
}

.content-head-sub {
    margin: 10px 0 0;
    color: var(--color-fg-muted);
    font-size: 1.0625rem;
}

/* 블로그 분류 — 위쪽 칩 줄과 섹션 제목. 분류가 하나뿐이면 둘 다 나오지 않는다. */
.content-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.content-cats a {
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border-radius: 980px;
    padding: 6px 14px;
    text-decoration: none;
}

.content-cats a:hover { color: var(--color-fg); }

.content-cats-count { color: var(--color-fg-faint); margin-left: 2px; }

/* 주제 페이지 아래의 "다른 주제" 칩 줄. 현재 주제는 링크가 아니라 눌리지 않는 칩이다. */
.content-cats-foot { margin-top: 44px; }

.content-cats-here {
    font-size: 0.8125rem;
    color: var(--color-fg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 980px;
    padding: 5px 13px;
    cursor: default;
}

.content-cat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 44px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 110px;
}

.content-cat-head a {
    flex: none;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
    text-decoration: none;
}

.content-cat-head a:hover { color: var(--color-fg); }

/* 제목의 아래선과 첫 항목의 위선이 겹쳐 두 줄로 보였다. 첫 항목의 위선을 지운다. */
.content-cat-head + .content-list > .content-list-item:first-child { border-top: 0; }

.content-cat-head .content-cat-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.content-cat-title {
    font-size: 1.125rem;
    margin: 44px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 110px;
}

.content-cat-title + .content-list { margin-top: 0; }
.content-cat-head + .content-list { margin-top: 14px; }

/* 목록 마지막 항목의 아래선과 바닥 줄의 위선이 겹쳐 두 줄로 보였다. 위선을 지우고 간격만 둔다. */
.content-list + .content-foot {
    border-top: 0;
    margin-top: 20px;
    padding-top: 0;
}

/* ---------- 글 둘러보기 (이전·다음 · 같은 제품 글 · 맨 위로) ---------- */

/* 이전 글 / 다음 글. 한 칸만 있어도 그 자리를 지키도록 그리드로 둔다. */
.content-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: var(--space-section);
}

.content-nav a {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
}

.content-nav a:hover { background: var(--color-bg); border-color: var(--color-fg-muted); }

.content-nav-next { text-align: right; }

.content-nav-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-fg-muted);
    margin-bottom: 4px;
}

.content-nav-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
}

/* 같은 제품의 가까운 글. 좁은 칸에서도 읽히게 두 열까지만 벌린다. */
.content-siblings { margin-top: 44px; }

.content-siblings-title {
    font-size: 1rem;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.content-siblings ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-siblings li { padding: 7px 0; min-width: 0; }

.content-siblings a {
    display: block;
    font-size: 0.9375rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-siblings a:hover { color: var(--color-accent); }

/* 바닥 줄 — 왼쪽 [목록으로], 오른쪽 [맨 위로]. */
.content-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 44px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.content-foot .to-top { margin-left: auto; color: var(--color-fg-muted); text-decoration: none; }
.content-foot .to-top:hover { color: var(--color-fg); }
.content-foot .content-back { text-decoration: none; }
.content-foot .content-back:hover { text-decoration: underline; }

.content-list {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}

.content-list-item {
    padding: 22px 0;
    border-top: 1px solid var(--color-border);
}

.content-list-item:last-child { border-bottom: 1px solid var(--color-border); }

/* 자른 목록 끝의 "남은 N건 더 보기" 한 줄(`li.content-more`).
   섹션 머리의 [전체 보기 74]는 목록을 끝까지 내려온 눈에는 보이지 않아, 여덟 줄이 전부인 것처럼
   읽혔다. 목록 안의 마지막 줄로 두고 옅은 면을 깔아 "여기서 끝이 아니다"를 눌릴 것처럼 보여 준다.
   항목이 아니라 이 줄이 목록의 끝이라, 아래선은 이 줄이 가진다. */
.content-more {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.content-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px 0;
    background: var(--color-surface);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-fg-muted);
    text-decoration: none;
}

.content-more a:hover { color: var(--color-fg); }

.content-list-title {
    font-size: 1.1875rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.content-list-title a { text-decoration: none; }
.content-list-title a:hover { text-decoration: underline; }

.content-list-item.is-pinned .content-list-title { font-weight: 700; }

.content-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
}

.content-category {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.75rem;
}

.content-badge { display: inline-flex; align-items: center; color: var(--color-accent); }

/* 제품 배지 — 전체 도움말 목록에서 "어느 제품 글인지" 알려 준다.
   제품별 목록({언어}/{제품}/help/)은 전부 같은 제품이라 줄마다 붙이지 않는다. */
.content-product {
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.75rem;
    color: var(--color-accent);
    white-space: nowrap;
}

/* 제품별 목록에서 전체 도움말로 돌아가는 줄 */
.content-head-link {
    margin: 14px 0 0;
    font-size: 0.875rem;
}

.content-head-link a { text-decoration: none; }
.content-head-link a:hover { text-decoration: underline; }

.content-excerpt {
    margin: 10px 0 0;
    color: var(--color-fg-muted);
    font-size: 0.9375rem;
}

/* ---------- 글 한 편 ---------- */

.content-article {
    margin: 0 auto;
    padding-top: var(--space-section);
}

.content-crumbs {
    margin: 0 0 14px;
    font-size: 0.8125rem;
}

.content-crumbs a { text-decoration: none; }
.content-crumbs a:hover { text-decoration: underline; }

.content-article h1 {
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    margin: 0;
}

.content-body { margin-top: 32px; }

/* 본문은 전체 제품 페이지와 같은 폭을 쓴다(사용자 지시). 글줄도 가두지 않는다. */
.content-body img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* 유튜브 미리보기. 16:9를 유지하고 본문 폭을 넘지 않는다. */
.content-embed {
    position: relative;
    margin: 0 0 18px;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

.content-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.content-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }


.content-body h2 {
    font-size: 1.375rem;
    margin: 44px 0 12px;
}

.content-body h3 {
    font-size: 1.125rem;
    margin: 32px 0 10px;
}

.content-body h4 {
    font-size: 1rem;
    margin: 26px 0 8px;
}

.content-body p { margin: 0 0 18px; }

.content-body ul,
.content-body ol { margin: 0 0 18px; padding-left: 1.4em; }

.content-body li { margin-bottom: 6px; }

.content-body blockquote {
    margin: 0 0 18px;
    padding: 2px 0 2px 18px;
    border-left: 3px solid var(--color-border);
    color: var(--color-fg-muted);
}

.content-body pre {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 16px 18px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.55;
}

.content-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.content-body :not(pre) > code {
    background: var(--color-surface);
    border-radius: 5px;
    padding: 1px 5px;
}

.content-body hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 36px 0;
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.content-body figure { margin: 0 0 18px; }

.content-body figcaption {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
}

.content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 0.9375rem;
}

.content-body th,
.content-body td {
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.content-body th { background: var(--color-surface); font-weight: 600; }

.content-back {
    margin: 48px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

.content-back a { text-decoration: none; }
.content-back a:hover { text-decoration: underline; }

/* 홈 하단 — 최신 도움말 · 블로그 (관리자에서 쓴 글이 홈에서 바로 보인다) */
.home-content { margin-top: var(--space-section); }
.home-content-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.home-content-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--color-border); padding-bottom: 8px; margin-bottom: 10px; }
.home-content-head h3 { margin: 0; font-size: 1.0625rem; }
.home-content-list { list-style: none; margin: 0; padding: 0; }
.home-content-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,.06)); }
.home-content-list li:first-child { border-top: 0; }
.home-content-list a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-content-list a { text-decoration: none; color: inherit; }
.home-content-list a:hover { color: var(--color-accent); }
.home-content-tag { flex: 0 0 auto; font-size: 0.75rem; color: var(--color-fg-muted);
  background: var(--color-surface-2); border-radius: 980px; padding: 2px 10px; white-space: nowrap; }
@media (max-width: 640px) { .home-content-cols { grid-template-columns: minmax(0, 1fr); } }

/* 홈 하단 — 오늘의 뉴스/팁 (도움말·블로그 한 건을 본문째 펼친다)
   본문은 글 페이지와 같은 .content-body 를 쓴다. 다만 글 제목이 h3 라서
   본문 안의 h2·h3 를 그대로 두면 제목보다 커 보인다 — 여기서만 한 단계씩 줄인다. */
.home-today { margin-top: var(--space-section); }
.home-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.home-today-head h2 { margin: 0; font-size: 1.5rem; }
.home-today-article { padding-top: 24px; }
.home-today-title { margin: 0; font-size: 1.25rem; }
.home-today-title a { text-decoration: none; color: inherit; }
.home-today-title a:hover { color: var(--color-accent); }
.home-today-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.home-today .content-body { margin-top: 22px; }
.home-today .content-body h2 { font-size: 1.125rem; margin: 30px 0 10px; }
.home-today .content-body h3 { font-size: 1rem; margin: 24px 0 8px; }
.home-today .content-body h4 { font-size: 0.9375rem; margin: 20px 0 8px; }

/* ---------- 전체 카탈로그: 카테고리마다 가로 띠 한 줄 ----------
   전에는 홈과 같은 .product-card 를 2~3열 격자에 놓았다. 제품이 4개뿐이라 카드가 띄엄띄엄
   놓이고 격자에 빈 칸이 남았다. 카탈로그는 "어떤 제품이 있나"를 훑는 색인이므로
   큰 스크린샷(제품 페이지에 있다)을 버리고 카테고리 하나 = 화면 폭을 꽉 채우는 띠 한 줄로 바꿨다.
   제품이 늘어도 띠 오른쪽에서 가로로 늘어서기만 하므로 제품 수에 따른 분기가 필요 없다. */

.catalog-head { padding-top: var(--space-section); }
.catalog-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 14px; }
.catalog-sub { color: var(--color-fg-muted); font-size: 1.0625rem; margin: 0; }

.catalog-rows { margin-top: 4px; }

/* 띠 하나 = 왼쪽 이름 칸 + 오른쪽 제품들. 띠 사이는 가는 구분선으로만 나눈다. */
.catalog-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border);
    /* 필터 칩에서 #cat-<id>로 내려올 때 고정 헤더에 가리지 않게 */
    scroll-margin-top: 110px;
}

.catalog-row:last-child { border-bottom: 0; }

/* 이름 칸은 폭을 고정한다 — 띠가 여러 개일 때 이름이 세로로 줄맞춤되어야 훑기 쉽다. */
.catalog-row-head {
    flex: 0 0 190px;
    width: 190px;
    min-width: 0;
}

.catalog-row-head h2 {
    font-size: 1.0625rem;
    line-height: 1.35;
    margin: 0;
}

/* 제품들은 가로로 나란히. 폭이 모자라면 줄바꿈한다. */
.catalog-row-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 제품이 하나뿐인 카테고리도 띠를 꽉 채워 비어 보이지 않게 한다. */
.catalog-row-items > li {
    display: flex;
    flex: 1 1 300px;
    min-width: 0;
}

/* 납작한 가로 항목: 아이콘 + 이름 + 한 줄 설명 + 가격 배지. 전체가 하나의 링크다. */
.catalog-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
}

.catalog-item:hover { background: var(--color-bg); border-color: var(--color-fg-muted); }

.catalog-item .icon { width: 44px; height: 44px; flex: none; }

.catalog-item-text { flex: 1 1 auto; min-width: 0; }

.catalog-item-name { display: block; font-weight: 600; font-size: 1rem; }

.catalog-item-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.875rem;
    color: var(--color-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 가격은 색인에서도 봐야 하므로 좁은 화면에서도 숨기지 않는다(홈의 .product-row 와 다른 점). */
.catalog-item-badge {
    flex: none;
    font-size: 0.75rem;
    color: var(--color-fg-muted);
    background: var(--color-surface-2);
    border-radius: 980px;
    padding: 4px 11px;
    white-space: nowrap;
}

.catalog-item.is-paid .catalog-item-badge { color: var(--color-accent); }

/* 좁은 화면: 카테고리 이름이 제품들 위로 올라가고 제품은 한 줄에 하나씩 쌓인다. */
@media (max-width: 640px) {
    .catalog-head { padding-top: 4rem; }
    .catalog-row { flex-direction: column; gap: 12px; padding: 20px 0; }
    .catalog-row-head { flex: 0 0 auto; width: auto; }
    .catalog-row-head h2 { font-size: 1rem; }
    .catalog-row-items { flex-direction: column; gap: 8px; }
    .catalog-row-items > li { flex: 0 0 auto; }
    .catalog-item { gap: 12px; padding: 12px 14px; }
    .catalog-item .icon { width: 38px; height: 38px; }
}

/* ---------- 오캠 부가 서비스(PC 초기화 · 견적서) ---------- */

/* ---------- 제품 부가 서비스(PC 초기화 서비스 · 견적서 출력) ----------
 *
 * {lang}/{제품}/pc-reset/ 와 {lang}/{제품}/estimate/ 두 페이지가 같은 클래스를 쓴다.
 * 색은 전부 기존 변수(var(--color-*))만 쓰고 하드코딩하지 않는다.
 * 넣을 자리: assets/site.css 의 "배너" 블록 앞뒤 어디든 — 다른 규칙과 겹치지 않는다.
 */

/* 페이지 전체. 폼이 주인공이라 본문 폭을 좁게 잡는다. */
.service-page {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--space-section) 0 0;
}

/* h1. download/buy 페이지의 제목과 같은 크기 규칙이다. */
.service-title {
    font-size: clamp(1.875rem, 4.5vw, 2.75rem);
    margin: 0 0 32px;
    text-align: center;
}

/* 폼 카드 */
.service-form {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

/* 라벨 + 입력칸 한 묶음 */
.service-field {
    margin: 0 0 24px;
}

.service-label {
    display: block;
    margin: 0 0 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-fg);
}

/* 입력칸 공통 — text · number · select 전부 같은 모양이다. */
.service-control {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.service-control:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

select.service-control {
    appearance: none;
}

/* 수량 줄. 왼쪽 −, 숫자칸, 오른쪽 +. 단추는 자바스크립트가 켜 준다(평소 hidden). */
.service-qty {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.service-qty-input {
    text-align: center;
    max-width: 8rem;
}

.service-qty-btn {
    flex: none;
    width: 3rem;
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-fg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.service-qty-btn:hover {
    background: var(--color-surface-2);
}

.service-qty-btn[hidden] {
    display: none;
}

/* 읽기 전용 총액칸 */
.service-total {
    font-size: 1.25rem;
    font-weight: 600;
    background: var(--color-surface);
}

/* 입력칸 아래 작은 설명(단가 등) */
.service-hint {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--color-fg-muted);
}

/* 제출 단추 줄 */
.service-actions {
    margin: 32px 0 0;
    text-align: right;
}

/* 폼 아래 안내문. 본문 톤은 .translation-banner와 같은 회색 글씨다. */
.service-note {
    margin: 32px 0 0;
    font-size: 0.9375rem;
    color: var(--color-fg-muted);
    line-height: 1.7;
}

.service-note p {
    margin: 0 0 14px;
}

.service-note p:last-child {
    margin-bottom: 0;
}

.service-note strong {
    color: var(--color-fg);
}

/* 자바스크립트가 꺼졌을 때만 보이는 안내(<noscript> 안) */
.service-noscript {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 0 0 24px;
    font-size: 0.9375rem;
    color: var(--color-fg-muted);
}

/* 처리 주소가 없어 폼을 내지 못할 때의 대체 단추 줄 */
.service-fallback {
    margin: 0;
    text-align: center;
}

/* ---------- 인쇄되는 견적서 문서(.service-doc) ----------
 *
 * 견적서는 더 이상 기존 사이트가 그리지 않는다 — build/templates/estimate.php가
 * 공급자 정보까지 박아 둔 문서를 같은 페이지에 담고 있다. 화면에서는 보이지 않고
 * 인쇄할 때만 이것 하나만 남는다.
 *
 * **생김새는 기존 서버 출력(company_estimate_print.php)을 그대로 옮긴 것이다**
 * (2026-10-09 사용자 지시 — "견적서 양식은 기존 것으로, 바뀌는 건 주소뿐"). 치수·글자
 * 크기·색은 원본의 값이다: A4 210mm × 297mm · 패딩 15mm · 제목 2.2rem · 셀 0.9rem ·
 * 표 머리글 배경 #f5f5f7.
 */
.service-doc {
    display: none;
}

@media print {
    /* 견적서 외의 모든 것을 내린다. 머리글·바닥글·폼·안내문 전부다. */
    body > *:not(main) {
        display: none !important;
    }

    main > *:not(.service-page) {
        display: none !important;
    }

    .service-page > *:not(.service-doc) {
        display: none !important;
    }

    .service-page {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* 용지. 원본의 @page와 같은 규칙이고, 여백은 .service-doc의 패딩 15mm가 맡는다. */
    @page {
        size: A4;
        margin: 0;
    }

    /* ── 아래 색은 전부 **인쇄 전용 고정색**이다 ──────────────────────────
     * 종이에는 다크 모드가 없다. var(--color-*)를 쓰면 다크 모드로 인쇄할 때
     * 검은 바탕·흰 글씨가 찍히므로, 이 블록 안에서만 원본의 색을 그대로 박아 둔다.
     * (#1d1d1f 본문 · #6e6e73 보조 · #f5f5f7 표 머리글 · #ffffff 종이)
     * 이 고정색은 @media print 밖으로 나가면 안 된다.
     */
    .service-doc {
        display: block;
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        padding: 15mm;
        box-sizing: border-box;
        background: #ffffff;
        color: #1d1d1f;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* 가운데 큰 제목 — 원본 .invoice-header */
    .service-doc-header {
        text-align: center;
        margin: 0 0 20mm;
    }

    .service-doc-header h2 {
        margin: 0;
        font-size: 2.2rem;
        font-weight: 600;
        color: #1d1d1f;
    }

    /* 왼쪽 공급자 / 오른쪽 날짜·견적서 번호 — 원본 .info-section */
    .service-doc-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 50px;
        margin: 0 0 15mm;
    }

    .service-doc-info-left,
    .service-doc-info-right {
        flex: 1;
    }

    .service-doc-info-right {
        text-align: right;
    }

    .service-doc-info p,
    .service-doc-recipient p {
        margin: 4px 0;
        font-size: 0.9rem;
        color: #6e6e73;
    }

    .service-doc-info-title {
        margin: 0 0 4px;
        font-size: 1rem;
        font-weight: 600;
        color: #1d1d1f;
    }

    /* 공급받는자 — 원본 .recipient-section */
    .service-doc-recipient {
        margin: 0 0 15mm;
    }

    .service-doc-recipient p {
        margin: 0;
    }

    /* 품목 표 — 원본 .table. 셀 테두리는 없고 머리글만 옅은 배경이다. */
    .service-doc-table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 8px;
        overflow: hidden;
        margin: 0 0 20mm;
    }

    .service-doc-table th,
    .service-doc-table td {
        border: none;
        padding: 12px;
        vertical-align: middle;
        font-size: 0.9rem;
        text-align: left;
    }

    .service-doc-table th {
        background: #f5f5f7;
        color: #6e6e73;
        font-weight: 500;
    }

    .service-doc-table td {
        background: #ffffff;
        color: #1d1d1f;
    }

    /* 소계 · 총액 — 원본 .total-section */
    .service-doc-total {
        margin: 15mm 0 0;
        text-align: right;
    }

    .service-doc-total p {
        margin: 5px 0;
        font-size: 1rem;
        color: #1d1d1f;
    }

    /* .service-doc-total p 보다 선택자가 구체적이어야 1.3rem이 이긴다. */
    .service-doc-total .service-doc-total-sum {
        font-size: 1.3rem;
        font-weight: 600;
        color: #1d1d1f;
    }
}