/* =============================================
   Font Face - Arita Dotum KR
   Weight: 100(Thin), 300(Light), 500(Medium), 600(SemiBold), 700(Bold)
   ============================================= */

@font-face {
    font-family: 'Arita Dotum KR';
    src: url('/int/ko/resource/fonts/AritaDotumKR-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arita Dotum KR';
    src: url('/int/ko/resource/fonts/AritaDotumKR-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arita Dotum KR';
    src: url('/int/ko/resource/fonts/AritaDotumKR-Medium.woff2') format('woff2');
    font-weight: 400;   /* 라이브 fonts.css 와 동일 매핑: Medium=400 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arita Dotum KR';
    src: url('/int/ko/resource/fonts/AritaDotumKR-SemiBold.woff2') format('woff2');
    font-weight: 500;   /* 라이브 fonts.css 와 동일 매핑: SemiBold=500 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arita Dotum KR';
    src: url('/int/ko/resource/fonts/AritaDotumKR-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   1. Custom Properties
   ============================================= */

:root {
    /* Layout */
    --max-width: 1100px;
    --padding-inline: 20px;
    --gap-section: 60px;
    --gap-content: clamp(16px, 2vw, 30px);
    --gray-padding: 60px 0;
    --header-height: 60px;
    --faq-padding: 24px;
    --faq-gap: clamp(16px, 2vw, 20px);

    /* Colors */
    --color-text: #333;
    --color-heading: #222;
    --color-text-light: #666;
    --color-text-accent: #444;
    --color-white: #fff;
    --color-bg-gray: #f5f5f5;
    --color-border: #ccc;

    /* Font sizes */
    --fs-h1: clamp(30px, 5vw, 48px);
    --fs-h2: clamp(22px, 4vw, 34px);
    --fs-h3: clamp(14px, 2.5vw, 20px);
    --fs-body: clamp(14px, 2vw, 18px);

    /* Font weights — 라이브 fonts.css 매핑 정합 (Medium=400, SemiBold=500).
     * 변수 사용처는 동일 파일 유지(시각 무변화), 숫자만 라이브와 일치. */
    --fw-thin: 100;
    --fw-light: 300;
    --fw-medium: 400;
    --fw-semibold: 500;
    --fw-bold: 700;

    /* Transition */
    --transition-base: 0.3s ease;
}

/* =============================================
   2. Reset & Base
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

body {
    font-family: 'Arita Dotum KR', 'Pretendard', 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    color: var(--color-text);
}

ul { list-style: none; }

li::before {
    content: "\2022";
    vertical-align: middle;
    margin-right: 2px;
}

b, strong { font-weight: 500; }

/* =============================================
   3. Typography
   ============================================= */

h1, h2, h3 {
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    line-height: 1.3;
}

h1 { font-size: var(--fs-h1); text-align: center; }
h2 { font-size: var(--fs-h2); text-align: center; }
h3 { font-size: var(--fs-h3); text-align: left; }

p {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    line-height: 1.6;
}

/* =============================================
   4. Layout (Group Selectors)
   ============================================= */

/* Section base layout */
.first-section,
.second-section,
.third-section,
.fourth-section,
.fifth-section,
.seventh-section,
.eighth-section,
.ninth-section,
.tenth-section {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-inline);
    display: flex;
    flex-direction: column;
}

/* Title containers */
.third-section-title,
.fourth-section-title,
.fifth-section-title,
.eighth-section-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Intro containers */
.fourth-section-intro,
.fifth-section-intro,
.seventh-section-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-content);
}

/* Content containers */
.third-section-content,
.fifth-section-content,
.eighth-section-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-content);
}

/* List wrappers */
.fourth-section-list-wrapper,
.fifth-section-list-wrapper,
.eighth-section-list-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-section);
}

/* List items */
.fourth-section-list,
.fifth-section-list,
.eighth-section-list,
.seventh-section-example {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-content);
}

/* =============================================
   5. Components
   ============================================= */

/* --- Gray Background --- */
.gray-bg {
    width: 100%;
    padding: var(--gray-padding);
    background-color: var(--color-bg-gray);
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-section);
}

/* --- Table --- */
.table-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 690px;
    table-layout: auto;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
}

/* Second Section table (3col) */
.second-section col:first-child { width: 110px !important; }
.second-section col:nth-child(2) { width: 250px !important; }
.second-section col:nth-child(3) { width: 330px !important; }

/* Third Section table (4col) */
.third-section col:first-child { width: 110px !important; }
.third-section col:nth-child(2) { width: 180px !important; }
.third-section col:nth-child(3) { width: 270px !important; }
.third-section col:nth-child(4) { width: 120px !important; }

thead {
    background-color: var(--color-text-light);
}

thead th {
    padding: 15px 10px;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-white);
    text-align: left;
    vertical-align: middle;
}

tbody tr {
    min-height: 110px;
}

tbody td {
    padding: 0;
    vertical-align: middle;
    text-align: left;
}

tbody td > div {
    min-height: 80px;
    padding: 15px 10px;
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--color-text);
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
}

tbody td:first-child > div {
    font-weight: var(--fw-medium);
}

tbody tr:nth-child(odd) { background-color: var(--color-white); }
tbody tr:nth-child(even) { background-color: var(--color-bg-gray); }

/* --- Header --- */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    height: var(--header-height);
    background-color: #000;
}

.site-header .container {
    width: 100%;
    padding: 0 5%;
    height: 100%;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
}

.header-lang {
    display: flex;
    gap: 15px;
    order: 2;
}

.header-lang a {
    color: var(--color-text-light);
    font-size: 14px;
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.header-lang a:hover {
    color: var(--color-white);
}

.header-lang a.active {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.logo {
    text-decoration: none;
    display: block;
    width: fit-content;
    height: fit-content;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.logo-image {
    display: block;
    height: 20px;
    width: auto;
    margin: 0;
    padding: 0;
}

.header-links {
    display: none;
    gap: 14px;
    justify-self: end;
    justify-content: center;
    align-items: center;
}

.header-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--color-white);
    text-decoration: none;
}

.header-links .external-icon {
    width: 14px;
    height: 14px;
    margin-left: 2px;            /* 라이브 외부링크 아이콘 간격 정합 (텍스트-아이콘 6px = gap4 + 2) */
    cursor: pointer;
}

.header-links #search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

/* --- Banner --- */
.banner-image {
    position: relative;
    width: 100%;
    height: 427px;          /* 640 × 2/3 — 사용자 피드백 (이미지 영역 축소) */
}

.banner-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
    pointer-events: none;
}

.banner-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ingredient-title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    text-align: center;
    padding: 0 20px;
}

.ingredient-title h1 {
    color: #ffffff;
}

/* --- Brand Images (Sixth Section) --- */
.sixth-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 25px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sixth-section-image {
    position: relative;
    width: 280px;
    height: 280px;
    min-width: 280px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sixth-section-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

.sixth-section-image a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.sixth-section-image .bg-image {
    display: block;
    width: 100%;
    height: 100%;
    /* 브랜드 배경은 정사각(1:1) 에셋 — 정사각 카드에 cover 로 잘림·레터박스 없이 꽉 참. */
    object-fit: cover;
}

.sixth-section-image .logo-image {
    /* 로고 파일이 브랜드 이미지와 동일한 정사각 규격으로 정규화됨(공통 바운딩박스에 contain·중앙).
     * → CSS 비율기반 조정 없이 카드에 1:1 오버레이만. (고객 요청: 파일로 통일, CSS 별도조정 금지) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    transition: transform var(--transition-base);
}

.sixth-section-image:hover .logo-image {
    transform: scale(1.05);
}

/* --- Amore Link Button --- */
.amore-link-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 3vw, 35px) clamp(40px, 5vw, 75px);
    gap: 10px;
    border: 1px solid rgba(162, 162, 162, 0.5);
    border-radius: 100px;
    background-color: transparent;
    text-decoration: none;
    margin: 0 auto;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.amore-link-button span {
    font-size: clamp(16px, 3vw, 28px);
    font-weight: var(--fw-medium);
    color: var(--color-text-accent);
    transition: color var(--transition-base);
}

.amore-link-button .link-arrow {
    width: clamp(16px, 3vw, 30px);
    height: clamp(16px, 3vw, 30px);
    filter: brightness(0);
    transition: filter var(--transition-base);
}

.amore-link-button:hover {
    background-color: var(--color-text-accent);
    border-color: var(--color-text-accent);
}

.amore-link-button:hover span {
    color: var(--color-white);
}

.amore-link-button:hover .link-arrow {
    filter: brightness(0) invert(1);
}

/* --- FAQ / Accordion --- */
.ninth-section-faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--faq-gap);
}

.ninth-section-faq-item {
    display: flex;
    padding: var(--faq-padding);
    border: 1px solid rgba(153, 153, 153, 0.5);
    flex-direction: column;
}

.ninth-section-faq-item-question {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--faq-gap);
}

.ninth-section-faq-item-answer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--faq-gap);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height var(--transition-base), opacity var(--transition-base), margin-top var(--transition-base);
}

.ninth-section-faq-item img {
    width: clamp(20px, 2vw, 28px);
    height: clamp(20px, 2vw, 28px);
}

.faq-answer-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-answer-content ul {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    line-height: 1.6;
}

.faq-answer-content ul li b {
    font-weight: var(--fw-semibold);
}

.faq-answer-content li {
    margin-bottom: 8px;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    gap: clamp(14px, 2vw, 32px);
}

.faq-chevron {
    width: clamp(12px, 2vw, 24px);
    height: clamp(12px, 2vw, 24px);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.ninth-section-faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

.ninth-section-faq-item.active .ninth-section-faq-item-answer {
    max-height: 500px;
    opacity: 1;
    margin-top: 30px;
}

/* Factcheck: mobile accordion, desktop table */
.factcheck-table { display: none; }
.factcheck-accordion { display: flex; flex-direction: column; gap: var(--faq-gap); }

/* =============================================
   6. Sections (Overrides)
   ============================================= */

/* First Section */
.first-section {
    justify-content: center;
    align-items: center;
    gap: var(--gap-section);
}

.introduction {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduction p {
    font-weight: var(--fw-medium);
    text-align: center;
}

/* Second Section */
.second-section { gap: var(--gap-content); }

.second-section-title { width: 100%; }

.second-section-title h3 {
    font-size: clamp(18px, 2.5vw, 20px);
}

/* Third Section */
.third-section { gap: var(--gap-section); }

.third-section-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-content);
}

.third-section-content p {
    text-align: center;
    font-weight: var(--fw-medium);
}

/* Fourth Section */
.fourth-section { gap: var(--gap-section); }

.fourth-section-content p { text-align: center; }

/* Fifth Section */
.fifth-section { gap: var(--gap-section); }

.fifth-section-content p { text-align: center; }

/* Seventh Section */
.seventh-section { gap: var(--gap-section); }

.seventh-section-content p { text-align: center; }

.seventh-section-example-content ul {
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    color: var(--color-heading);
}

.seventh-section-example-content li { margin-bottom: 4px; }

/* Eighth Section */
.eighth-section { gap: var(--gap-section); }

.eighth-section-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.eighth-section-content p { text-align: center; }

.eighth-section-list ul {
    margin-left: 1rem;
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    color: var(--color-heading);
    line-height: 1.6;
}

.eighth-section-list li { margin-bottom: 1rem; }

/* Ninth Section */
.ninth-section { gap: var(--gap-section); }

.ninth-section-intro { width: 100%; }

/* Tenth Section */
.tenth-section { gap: var(--gap-content); }

.tenth-section p {
    text-align: left;
    color: var(--color-text-light);
}

/* =============================================
   7. Responsive - Tablet (768px+)
   ============================================= */

@media screen and (min-width: 768px) {
    :root {
        --padding-inline: 40px;
        --gap-section: 90px;
        --gray-padding: 80px 0;
        --header-height: 80px;
        --faq-padding: 32px;
    }

    /* Header: 3-column grid */
    .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 20px;
    }
    .header-lang { order: unset; }
    .header-links { display: flex; }
    .logo-image { height: 22px; }

    /* Banner: tablet height */
    .banner-image { height: 350px; }   /* 525 × 2/3 */

    /* Table: restore desktop style */
    .table-wrapper { justify-content: center; }
    table { width: 100%; min-width: 0; max-width: var(--max-width); }
    thead th { text-align: center; }
    tbody td { text-align: center; }
    tbody td > div { justify-content: center; }

    /* FAQ answer: 85% width */
    .ninth-section-faq-item-answer { width: 85%; }

    /* FAQ align */
    .ninth-section-faq-item-question { align-items: center; }

    /* Factcheck: show table, hide accordion */
    .factcheck-table { display: flex; }
    .factcheck-accordion { display: none; }
}

/* =============================================
   8. Responsive - Brand Images (971px+)
   ============================================= */

@media screen and (min-width: 971px) {
    .sixth-section {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

/* =============================================
   9. Responsive - Desktop (1200px+)
   ============================================= */

@media screen and (min-width: 1200px) {
    :root {
        --padding-inline: 0px;
        --gap-section: 120px;
        --gap-content: 30px;    /* Desktop: fixed gap replaces fluid clamp */
        --gray-padding: 110px 0;
        --header-height: 100px;
        --faq-padding: 40px;
        --faq-gap: 30px;
    }

    /* Logo: original size */
    .logo-image { height: 25px; width: 251px; }

    /* Brand images: 크기는 asset_bundler 패치(3-카드 기준 고정 flex-basis)에서 통일 관리.
     * (섹션이 PC 전 구간 max-width 760 이라 카드는 ~237px 고정 — 개수 무관 동일 크기.) */
    .sixth-section { flex-wrap: nowrap; }

    /* Table: fixed layout
    table { table-layout: fixed; }
    table col { width: revert !important; }
    thead th { padding: 20px 0; }
    tbody td > div { min-height: 110px; padding: 20px 0; } */
}


/* ===== Template Publisher Patches (v3) ===== */

.lead-bold {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
    margin-top: 32px;
    margin-bottom: 12px;
}

.sup {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
}

.references-section { padding: 0 var(--padding-inline); }
.references-section .inner { max-width: var(--max-width); margin: 0 auto; }
.references-section .l-narrow { width: 100%; }
.reference { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.reference-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 16px 0;
    gap: 20px;
    user-select: none;
}
.reference-header p { margin: 0; font-weight: 500; font-size: 16px; color: var(--color-heading); }
.reference-header .arrow2 { width: 14px; transition: transform 0.3s; transform: rotate(180deg); }
.reference.active .arrow2 { transform: rotate(0deg); }
.reference-body { display: none; padding: 10px 0 20px; color: #333; font-size: 14px; line-height: 1.6; }
.reference-body ul { padding-left: 0; list-style: none; margin: 0; }
.reference-body li { margin-bottom: 30px; }
.reference-body li::before { content: ""; margin: 0; }
.reference-body a.sub_black { color: #333; word-break: break-all; }
.reference.active .reference-body { display: block; }
@media (max-width: 767px) {
    .reference-header p { font-size: 14px; }
    .reference-body { font-size: 13px; }
}

/* h2 section decoration */
.second-section-title h2,
.third-section-title h2,
.fourth-section-title h2,
.fifth-section-title h2,
.seventh-section-title h2,
.eighth-section-title h2,
.ninth-section-title h2 {
    position: relative;
    padding-top: 20px;
}
.second-section-title h2::after,
.third-section-title h2::after,
.fourth-section-title h2::after,
.fifth-section-title h2::after,
.seventh-section-title h2::after,
.eighth-section-title h2::after,
.ninth-section-title h2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    margin-left: -25px;
    margin-top: 2px;
    height: 2px;
    background-color: #222;
}

/* ===== GEO 한글 published 정합 패치 =====
 * @font-face 가 라이브 fonts.css 와 동일 매핑(Medium=400, SemiBold=500)으로 통일됨
 * (styles.css). 따라서 weight 숫자 = 라이브 그대로 사용:
 *   본문/body = 400 (Medium 파일), 제목·소제목·강조 = 500 (SemiBold 파일).
 * (과거 "한 단계 올림" 트릭은 @font-face 재매핑으로 제거됨)
 */

/* body 기본: 라이브 body weight 400 (Medium) */
body {
    color: #222;
    font-weight: 400;
}

/* 본문 p: 기업사이트 본문 weight 400 (라이브 KO/EN 모두 400 — browse 실측).
 * 강조 b/strong 만 500(가이드 §8). 기존 "GEO=500" 가정은 오류였음. */
p {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
    letter-spacing: 0;
}

/* 본문 강조 <b>/<strong>: GEO 시각 SemiBold = 우리 600 / color #222 / -.03em */
b, strong {
    font-weight: 500;
    color: #222;
    letter-spacing: -0.03em;
}

/* 헤딩 위계: GEO fixed px + PC/MO 분리 (clamp 대신)
 * weight 600 = 우리 SemiBold 파일 = GEO 시각 weight 500 (SemiBold)
 */
h1 {
    font-size: 46px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.03em;
}
/* ===== 섹션 H2 (GEO h2.subtitle) — 1st/10th 제외 모든 섹션 통일 =====
 * size, weight, line-height, letter-spacing, text-align, margin 한 곳에서 통합. */
.second-section h2,
.third-section h2,
.fourth-section h2,
.fifth-section h2,
.seventh-section h2,
.eighth-section h2,
.ninth-section h2 {
    font-size: 28px;             /* GEO h2.subtitle */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 30px;
}
/* ===== H3 3-tier 위계 시스템 =====
 * Tier 1 (main):       PC 24 / MO 18 / weight 600 / margin-bottom 20→30
 *   섹션 내 메인 sub-section. 3rd diff, 4/5 list
 * Tier 2 (sub-label):  PC 18 / MO 16 / weight 600 / margin-bottom 18→16
 *   짧은 라벨 성격 하위 헤딩. 7 example-title, 8 list
 * Tier 3 (interactive): PC 16 / MO 14 / weight 500 / margin 0
 *   FAQ 질문 (label tone). 9 FAQ item
 * 공통: text-align left, line-height 1.6, letter-spacing -0.03em, color #222
 */
.third-section-difference-title h3,
.fourth-section-list h3,
.fifth-section-list h3,
.seventh-section-example-title h3,
.eighth-section-list h3,
.ninth-section-faq-item h3 {
    text-align: left;
    line-height: 1.6;
    letter-spacing: -0.03em;
    color: #222;
}
/* Tier 1 */
.third-section-difference-title h3,
.fourth-section-list h3,
.fifth-section-list h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}
/* Tier 2 */
.seventh-section-example-title h3,
.eighth-section-list h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 18px;
}
/* Tier 3 — FAQ 질문: 라이브 faq-question weight 400 정합 (Medium, 본문 굵기).
 * h1~h4 500 !important (제목) 보다 우선하도록 !important — 소제목 h3(500)와 달리 FAQ 질문은 400. */
.ninth-section-faq-item h3 {
    font-size: 16px;
    font-weight: 400 !important;
    margin: 0;
}

/* amore_view 의 BoldLead 가 이제 <h4> 로 렌더링됨 — GEO h4 18px / weight 500
 * (기업사이트 .detail-contents .h2 = 500, margin-top 3em=48px PC 정합) */
.fifth-section-list h4,
.lead-bold {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.6;
    letter-spacing: -0.03em;
    margin-top: 48px;
    margin-bottom: 18px;
    text-align: left;
}

/* MO 반응형 (GEO 동일 분기 ≤ 767px) */
@media (max-width: 767px) {
    h1 {
        font-size: 26px;
    }
    .second-section h2,
    .third-section h2,
    .fourth-section h2,
    .fifth-section h2,
    .seventh-section h2,
    .eighth-section h2,
    .ninth-section h2 {
        font-size: 21px;         /* GEO h2.subtitle MO */
    }
    /* H3 Tier 1 MO */
    .third-section-difference-title h3,
    .fourth-section-list h3,
    .fifth-section-list h3 {
        font-size: 18px;
        margin-bottom: 30px;
    }
    /* H3 Tier 2 MO */
    .seventh-section-example-title h3,
    .eighth-section-list h3 {
        font-size: 16px;
        margin-bottom: 16px;
    }
    /* H3 Tier 3 MO */
    .ninth-section-faq-item h3 {
        font-size: 14px;
    }
    .fifth-section-list h4,
    .lead-bold {
        font-size: 16px;
        margin-bottom: 16px;
    }
    /* 본문 p: GEO EN 260424 PDF 스펙 MO 15px (한글 버전은 16 유지, 영문이 최신) */
    p {
        font-size: 15px;
    }
    b, strong {
        font-size: 15px;          /* 인라인 강조도 본문 사이즈 상속 */
    }
}

/* FAQ answer p: 본문 weight 400 (Medium, 라이브 본문 정합).
 * FAQ question h3 는 위 Tier 3 시스템에서 처리. */
.ninth-section-faq-item-answer p {
    font-weight: 400;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 767px) {
    .ninth-section-faq-item-answer p {
        font-size: 13px;
    }
}

/* 본문 단락 margin-bottom: GEO p.text-size-medium 40px (intro/content 만, 카드
 * 내부 p 는 아래 카드 spacing 룰이 별도 관리).
 * NOTE: .third/fifth/eighth-section-content 는 flex column + gap=var(--gap-content)
 *   이라 margin 까지 더하면 gap+margin 누적. 3rd 처럼 multi-p 인 경우 spacing 과대.
 *   margin 0 으로 두고 gap 으로 일원화. */
.third-section-content p,
.fourth-section-content p,
.fifth-section-content p,
.eighth-section-content p {
    margin-bottom: 0;
}

/* GEO intro-box 패턴 — 도입부 회색 박스. 우리 introduction 에 적용 */
.first-section .introduction {
    background: #f5f5f5;
    padding: 60px;
    text-align: left;
    margin: 0 auto;
    max-width: 760px;
}
.first-section .introduction p {
    margin-bottom: 24px;
    text-align: left;
}
.first-section .introduction p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .first-section .introduction {
        padding: 20px;
    }
}

/* FAQ item — GEO border-radius 8px / 흰 배경 / border 1px ddd / margin-bottom 30px
 * + padding 18 / Q-question gap 12 / 박스 폭 760 (GEO .l-narrow 정합) */
.ninth-section-faq-item {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 0;            /* gap-only spacing (누적 차단) */
    padding: 18px !important;       /* --faq-padding clamp override */
    overflow: hidden;
}
.ninth-section-faq-list {
    max-width: 760px;
    margin: 0 auto;
    gap: 30px !important;        /* --faq-gap clamp override, GEO 정합 */
}
.ninth-section-faq-item .faq-header {
    gap: 12px !important;
}
.ninth-section-faq-item-question {
    gap: 12px !important;
    align-items: center !important;
}
.ninth-section-faq-item-question img {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
}
.ninth-section-faq-item-answer {
    gap: 12px !important;
}
.ninth-section-faq-item-answer img {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
}
.ninth-section-faq-item.active .ninth-section-faq-item-answer {
    margin-top: 12px !important;
}
@media (max-width: 767px) {
    .ninth-section-faq-item {
        padding: 14px !important;
    }
    .ninth-section-faq-item-question img,
    .ninth-section-faq-item-answer img {
        width: 24px !important;
        height: 24px !important;
    }
}
/* FAQ question h3 / answer p 는 위 Tier 3 + FAQ answer p 블록에서 통합 처리 */

/* disclaimer (tenth-section) 스타일은 아래 통합 블록에서 처리 */

/* ===== Breakpoint 정리 — GEO 2-tier (mobile / PC) 정합 =====
 * 기존 styles.css 는 768+ (tablet 값) / 971+ (brand wrap) / 1200+ (desktop 값) 의
 * 3-tier 였음. 1000px 같은 중간 viewport 에서 padding-inline 40 이 적용되어
 * .tenth-section (max-width:760 + padding) 와 .references-section (.inner 760
 * centered) 사이 alignment 가 어긋남.
 * → 768+ 에서 1200+ 의 desktop 값을 채택하여 PC 단일 tier 로 통일.
 *
 * Brand carousel (sixth-section) 도 971+ tier 를 제거하고 PC 전체 nowrap.
 */
@media (min-width: 768px) {
    :root {
        --padding-inline: 0px;       /* tablet 40 → desktop 0 */
        --gap-section: 120px;        /* tablet 90 → desktop 120 */
        --gap-content: 30px;         /* clamp → 30 */
        --gray-padding: 110px 0;     /* tablet 80 → desktop 110 */
        --header-height: 100px;      /* tablet 80 → desktop 100 */
        --faq-padding: 40px;         /* tablet 32 → desktop 40 */
        --faq-gap: 30px;
    }
    /* brand carousel — PC 는 본문 단락 폭(760)에 3 카드 균등 배치, scroll 없음.
     * mobile 은 styles.css 의 280px fixed + overflow-x: auto 그대로 유지. */
    .sixth-section {
        max-width: 760px;
        margin: 0 auto;
        flex-wrap: nowrap;
        overflow: visible;
        justify-content: center;    /* 카드 수가 3 미만이면 가운데 정렬(좌측 쏠림 방지) */
    }
    .sixth-section-image {
        /* 3-카드 기준 고정 크기: (섹션 760 - 2×25gap) / 3 ≈ 237px.
         * flex-grow 0 → 브랜드가 1~2개여도 카드/로고가 커지지 않고 동일 크기 유지 (고객 요청). */
        flex: 0 0 calc((100% - 50px) / 3);
        max-width: calc((100% - 50px) / 3);
        min-width: 0;
        height: auto;
        aspect-ratio: 1;
    }
    .logo-image { height: 25px; width: 251px; }
}

/* 표 셀: flex → block 으로 변경
 * 기존 styles.css 의 tbody td > div { display: flex; align-items: center } 는
 * 단일 줄 수직 중앙정렬 의도이지만, 본문 텍스트 + <span class="sup">[N]</span>
 * 을 별도 flex item 으로 분리시켜 인용 마커가 셀 끝으로 밀려나는 버그 유발.
 * block + text-align 으로 변경하여 인용 마커가 본문에 인라인 flow. */
.table-wrapper tbody td > div {
    display: block;
    text-align: left;
}
/* 본문 셀은 전 해상도 좌측 정렬 (고객 요청: 표 제목=헤더행만 중앙, 내용은 좌측).
 * thead th 중앙 정렬은 .table-wrapper thead th 규칙에서 유지. */

/* ===== 본문 폭 GEO 정합 — .l-narrow 760px 패턴 =====
 * GEO: 본문 텍스트가 max-width 760px 안에서 가독성 우선.
 * 우리: 섹션 wrapper 는 1100 max-width 유지, 본문 컨테이너만 760 강제.
 * 표·이미지 그리드는 1100 유지 (정보 밀도 보존). */
.first-section .introduction,
.third-section-content,
.third-section-difference-title,
/* ===== GEO .l-narrow 760px 단락 폭 통일 =====
 * 본문/카드 전반에 동일한 column 폭 적용. 섹션별 다른 wrapper 클래스들을 한 곳에서 처리.
 * .tenth-section 자체는 아래 disclaimer 블록에서 760 + auto margin 적용되므로 여기서 제외. */
.fourth-section-intro,
.fourth-section-list,
.fifth-section-intro,
.fifth-section-list,
.seventh-section-intro,
.seventh-section-example,
.eighth-section-intro,
.eighth-section-list,
.third-section-container > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== 표 스타일 GEO 정합 — .compare-table 패턴 ===== */
.table-wrapper {
    max-width: 864px;            /* C1: 라이브 .l-narrow(864px) 정합 — 본문(760≈.l-small)보다 넓은 표 폭 (1440px 실측) */
    margin: 0 auto;
    overflow-x: auto;            /* 기존 scroll → 필요할 때만 (스크롤바 그림자 차단) */
}
.table-wrapper table {
    border-collapse: collapse;
    width: 100%;
    border: none;
}
.table-wrapper thead th {
    background: #666;
    color: #fff;
    font-weight: 400;
    padding: 9px 20px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    border: 1px solid #ddd;
}
.table-wrapper tbody tr {
    min-height: 0;
}
.table-wrapper tbody td {
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    vertical-align: middle;
}
/* GEO .f5 zebra 패턴 정합 — 짝수행 음영 (#f5f5f5) */
.table-wrapper tbody tr:nth-child(even) td {
    background: #f5f5f5;
}
.table-wrapper tbody td > div {
    min-height: 0;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
}
/* 표 첫 컬럼: 라이브 .compare-table 은 첫 컬럼에 weight/color 강조 없음(본문과 동일).
 * 라이브 정합 위해 별도 볼드 제거 — 본문 weight/color 상속. (배경·width 는 별도 규칙 유지) */
@media (max-width: 767px) {
    /* GEO 동일 동작: 모바일에서도 표 레이아웃 유지 + 좌우 스크롤.
     * min-width 로 컬럼 squeeze 방지 → 화면보다 좁으면 .table-wrapper 가 스크롤.
     * 폰트: GEO EN 260424 PDF 스펙 MO th 14 / td 15 */
    .table-wrapper table {
        min-width: 600px;
    }
    .table-wrapper thead th {
        padding: 8px 12px;
        font-size: 14px;
    }
    .table-wrapper tbody td > div {
        padding: 10px 12px;
        font-size: 15px;
    }
}

/* ===== 헤딩 weight 기업사이트 정합 — 500 (= SemiBold 파일) =====
 * @font-face 를 라이브 fonts.css 와 동일 매핑(Medium=400, SemiBold=500)으로 통일했으므로
 * (styles.css), 라이브와 동일하게 제목 weight 500 = SemiBold 파일 = 라이브 제목 500.
 * (이전 "600 트릭"은 @font-face 재매핑으로 제거 — 같은 woff2, 숫자만 라이브 정합) */
h1, h2, h3, h4 {
    font-weight: 500 !important;
    color: #222;
}

/* h3 size/align/margin 은 위 H3 3-tier 위계 시스템에서 통합 처리 */

/* 섹션 H2 사이즈/정렬/마진 은 위 통합 H2 블록에서 처리 */

/* ===== 카드/섹션 내부 spacing 조정 — 라이브 .pt-75 (h2→본문 75px) 패턴 =====
 * 라이브: <section.pt-110> 안에 h2 만, 그 다음 <section.pb120.pt-75> 안에 본문.
 * 우리: h2 + 본문이 동일 section 안 → 내부 flex gap 으로 h2↔본문 spacing 형성.
 */
.fourth-section,
.fifth-section,
.seventh-section,
.eighth-section,
.ninth-section {
    gap: 75px;                  /* 라이브 .pt-75 매핑 */
}
.fourth-section-list-wrapper,
.fifth-section-list-wrapper,
.eighth-section-list-wrapper {
    gap: 60px;
}

/* 카드 내부 단락 사이 spacing — gap-content (30px) 누적 제거.
 * GEO 는 p.text-size-medium { margin-bottom: 40px } 만 사용하여 단락 간격.
 * 우리도 동일하게 margin 만 사용. */
.fourth-section-list,
.fifth-section-list,
.eighth-section-list {
    gap: 0;
}
.fourth-section-list p + p,
.eighth-section-list p + p {
    margin-top: 16px;
}
.fourth-section-list p,
.fifth-section-list p,
.eighth-section-list p {
    margin-bottom: 0;
}

/* amore_view (fifth-section): 같은 H4 그룹 안 paragraph 들을 inline 화 하여
 * 한 문단처럼 줄바꿈 없이 흐르게. CLN 원본 paragraph 구조는 보존.
 *
 * 부모 .fifth-section-list 의 display:flex 가 자식 모두를 flex item 으로 만들어
 * inline 적용을 무력화 → block 으로 override. */
.fifth-section-list {
    display: block !important;
}
.fifth-section-list p {
    display: inline;
}
.fifth-section-list p::after {
    content: " ";              /* paragraph 끝에 공백 1개 자동 삽입 */
}
.fifth-section-list h3,
.fifth-section-list h4 {
    display: block;
}

@media (max-width: 767px) {
    .fourth-section,
    .fifth-section,
    .seventh-section,
    .eighth-section,
    .ninth-section {
        gap: 30px;              /* 라이브 .pt-75 MO 30 */
    }
    .fourth-section-list-wrapper,
    .fifth-section-list-wrapper,
    .eighth-section-list-wrapper {
        gap: 32px;
    }
}

/* ===== amore-link-button GEO .btn.btn-m 정합 =====
 * 기존: clamp 기반 큰 prominent CTA (28px text / 35px padding / 100px radius)
 * GEO .btn.btn-m: 16px text / 12px 36px padding / 50px radius — list-btn 패턴
 */
.amore-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 36px;
    border-radius: 50px;
    background: #fff;
    color: #444;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    border: 1px solid rgba(153, 153, 153, 0.5);
    margin: 0 auto;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.amore-link-button span {
    font-size: 16px;
    font-weight: 500;
    color: #444;
    transition: color 0.3s ease;
}
.amore-link-button .link-arrow {
    width: 14px;
    height: auto;
    filter: none;
    transition: filter 0.3s ease, transform 0.3s ease;
}
.amore-link-button:hover,
.amore-link-button:focus {
    color: #fff;
    border-color: #444;
    background: #444;
    text-decoration: none;
}
.amore-link-button:hover span,
.amore-link-button:focus span {
    color: #fff;
}
.amore-link-button:hover .link-arrow,
.amore-link-button:focus .link-arrow {
    filter: invert(1) brightness(2);
    transform: translateX(4px);
}
@media (max-width: 767px) {
    .amore-link-button {
        font-size: 14px;
        padding: 9px 24px;
    }
    .amore-link-button span {
        font-size: 14px;
    }
}

/* disclaimer (tenth-section) GEO p.lightgray 정합.
 * GEO 패턴: references + disclaimer 가 동일 section 안 → 자연 흐름.
 * 우리는 형제 섹션이라 main.container { gap } 만큼 보정 필요. */
.tenth-section {
    text-align: left;
    margin: 0 auto;
    max-width: 760px;
    padding: 0 var(--padding-inline);
}
.tenth-section p {
    text-align: left;
    color: #666;                 /* 라이브 disclaimer #666 (DevTools 실측) */
    font-size: 16px;             /* KO 본문 16 정합 (EN 은 아래 EN 패치에서 18) */
    font-style: italic;          /* 라이브 disclaimer 이탤릭 (DevTools 실측) */
    line-height: 1.6;
    font-weight: 400;            /* 라이브 disclaimer weight 400 정합 (Medium) */
}
@media (max-width: 767px) {
    .tenth-section p {
        font-size: 15px;          /* MO body 15 정합 */
    }
}

/* ===== 섹션 spacing — 라이브 (apgroup.com Preventive Care) 패턴 직접 매핑 =====
 * 라이브: 모든 .section 이 자체 padding-top/bottom 부여. main flex gap 없음.
 * .pt-110 = 100 PC / 80 Tablet / 50 MO
 * .pb120  = 110 PC / 100 Tablet / 50 MO
 * .pt-faq = 75 PC / 30 MO (FAQ h2→첫 문항)
 *
 * 우리 v3 의 .{N}-section 에 동일 값 직접 적용.
 * main.container { gap } 폐지 — 각 섹션이 spacing 책임. */
main.container {
    gap: 0;
}

/* 일반 콘텐츠 섹션 — .pt-110 + .pb120 (라이브 기본 패턴) */
.first-section,
.second-section,
.third-section,
.fourth-section,
.fifth-section,
.seventh-section,
.eighth-section {
    padding-top: 100px;
    padding-bottom: 110px;
}
/* FAQ — h2→첫 문항 .pt-faq (75) */
.ninth-section {
    padding-top: 75px;
    padding-bottom: 110px;
}
/* references — 직전 .pb120 으로 spacing 처리되므로 .pt0 */
.references-section {
    padding-top: 0;
    padding-bottom: 60px;
}
/* disclaimer — 마지막 섹션, references 직후 */
.tenth-section {
    padding-top: 0;
    padding-bottom: 60px;
}

@media (max-width: 1119px) {
    /* 라이브 tablet 패턴 .pt-110 = 80, .pb120 = 100 */
    .first-section,
    .second-section,
    .third-section,
    .fourth-section,
    .fifth-section,
    .seventh-section,
    .eighth-section {
        padding-top: 80px;
        padding-bottom: 100px;
    }
    .ninth-section { padding-bottom: 100px; }
}
@media (max-width: 767px) {
    /* 라이브 MO 패턴 .pt-110 = 50, .pb120 = 50, .pt-faq = 30 */
    .first-section,
    .second-section,
    .third-section,
    .fourth-section,
    .fifth-section,
    .seventh-section,
    .eighth-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .ninth-section {
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .references-section,
    .tenth-section {
        padding-bottom: 40px;
    }
}

/* 인트로(.first-section)→'한눈에 보기' 갭 축소 (사용자 피드백 2026-06-13).
 * 우리 콘텐츠 섹션은 전부 흰색 → 라이브의 110/110 더블(흰→회색 전환 전용) 근거 없음.
 * 인트로 하단 패딩 제거 → 갭 = 다음 섹션 상단(데스크탑 100 / 태블릿 80 / MO 50) 단일.
 * 비-media 규칙이라 cascade 상 위 media 규칙들을 이기고 전 breakpoint 적용. */
.first-section {
    padding-bottom: 0;
}

/* 회색 배경 (.gray-bg) — 라이브 .gray 는 background-color 만. 자체 padding 제거.
 * 안쪽 .{N}-section 이 자체 padding 으로 회색 영역 높이 형성. */
.gray-bg {
    padding: 0 !important;
}

/* ===== FAQ chevron — 사용자 요청 큰 사이즈 (styles.css clamp 12-24 복원) =====
 * collapsed = ∨ (chevron-down.svg 그대로) / active = ∧ (rotate 180) */
.faq-chevron {
    transition: transform 0.3s;
    flex-shrink: 0;
}
.ninth-section-faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

/* ===== references-section 정합 — GEO .reference 패턴 =====
 * borders 제거 (GEO 도 .reference 자체엔 border 없음), 헤더 좌측 정렬,
 * 화살표 collapsed=∨ / expanded=∧ */
.references-section {
    padding: 0 var(--padding-inline);
}
.references-section .inner {
    max-width: 760px;
    margin: 0 auto;
}
.references-section .l-narrow {
    max-width: 760px;
    margin: 0 auto;
}
.reference {
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 auto;
}
.reference-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 16px 0;
    gap: 20px;
    user-select: none;
}
.reference-header p {
    margin: 0;
    font-weight: 500;            /* 우리 SemiBold 파일 = GEO weight 500 (SemiBold) 시각 매칭 */
    font-size: 16px;
    color: #222;
}
.reference-header .arrow2 {
    width: 14px;
    height: auto;                /* aspect 유지 — arrow-open.png 원본 비율 */
    transition: transform 0.3s;
    transform: rotate(180deg);   /* arrow-open.png 원본은 ∧ → 180° = ∨ (collapsed, GEO 동일) */
}
.reference.active .arrow2 {
    transform: rotate(0deg);     /* expanded = ∧ (이미지 원본) */
}
@media (max-width: 767px) {
    .reference-header p { font-size: 14px; }
    .reference-body { font-size: 13px; }
}

/* ===== 라이브 폭 정합 (데스크탑 ≥1280px) — 반응형 l-narrow/l-small =====
 * 기업사이트는 .l-wrap(max 1600, padding 5%)→.l-narrow(margin 16.67%)→.l-small(6.25%)
 * %-마진 모델이라 본문/표 폭이 뷰포트에 비례. 우리 고정 760/864 는 1440 에서만 일치.
 * 데스크탑 전 구간 px 정합 (실측 검증):
 *   본문 .l-small = min(52.5vw, 840px)  → 672@1280 / 756@1440 / 840@1600
 *   표   .l-narrow = min(60vw,  960px)  → 768@1280 / 864@1440 / 960@1600
 * 태블릿/모바일(<1280)은 기존 반응형 유지 (사용자: 데스크탑 정확 일치). */
@media (min-width: 1280px) {
    .first-section .introduction,
    .third-section-content,
    .third-section-difference-title,
    .fourth-section-intro,
    .fourth-section-list,
    .fifth-section-intro,
    .fifth-section-list,
    .seventh-section-intro,
    .seventh-section-example,
    .eighth-section-intro,
    .eighth-section-list,
    .third-section-container > p,
    .ninth-section-faq-list,
    .tenth-section,
    .references-section .inner,
    .references-section .l-narrow {
        max-width: min(52.5vw, 840px);
    }
    .table-wrapper {
        max-width: min(60vw, 960px);
    }
}

/* ===== 768~1279px 폭 정합 — 기업사이트 .l-narrow 정확 일치 (고객 피드백 2차) =====
 * <80em(1280) 에선 corporate l-small = l-narrow (추가 6.25% 마진 없음) → 본문·표 동일 폭.
 * corporate .l-wrap(padding 5%)→.l-narrow(margin 10px@≥48em / 8.333%@≥70em) 를
 * 뷰포트 기준 폭으로 환산 (좌우 대칭이라 중앙배치 시 좌우여백이 corporate 와 동일):
 *   ≥768  : l-narrow = 0.9·vp - 20px  →  calc(90vw - 20px)
 *   ≥1120 : l-narrow = 0.75·vp        →  75vw
 * 섹션 max-width(1100) 안에 들어가므로 클리핑 없음. ≥1280 은 위 블록이 이미 정합. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .first-section .introduction,
    .third-section-content,
    .third-section-difference-title,
    .fourth-section-intro,
    .fourth-section-list,
    .fifth-section-intro,
    .fifth-section-list,
    .seventh-section-intro,
    .seventh-section-example,
    .eighth-section-intro,
    .eighth-section-list,
    .third-section-container > p,
    .ninth-section-faq-list,
    .tenth-section,
    .references-section .inner,
    .references-section .l-narrow,
    .table-wrapper {
        max-width: calc(90vw - 20px);
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 1120px) and (max-width: 1279.98px) {
    .first-section .introduction,
    .third-section-content,
    .third-section-difference-title,
    .fourth-section-intro,
    .fourth-section-list,
    .fifth-section-intro,
    .fifth-section-list,
    .seventh-section-intro,
    .seventh-section-example,
    .eighth-section-intro,
    .eighth-section-list,
    .third-section-container > p,
    .ninth-section-faq-list,
    .tenth-section,
    .references-section .inner,
    .references-section .l-narrow,
    .table-wrapper {
        max-width: 75vw;
    }
}

/* ===== <768px(모바일) 폭 정합 — corporate .l-narrow 기본(margin 5px) =====
 * corporate <48em: l-wrap(padding 5%) + l-narrow(margin 5px) → l-narrow = 0.9·vp - 10px.
 *   → calc(90vw - 10px), 중앙배치. (섹션 padding 안에서 더 좁게 중앙 → 좌우여백 corporate 동일.) */
@media (max-width: 767.98px) {
    .first-section .introduction,
    .third-section-content,
    .third-section-difference-title,
    .fourth-section-intro,
    .fourth-section-list,
    .fifth-section-intro,
    .fifth-section-list,
    .seventh-section-intro,
    .seventh-section-example,
    .eighth-section-intro,
    .eighth-section-list,
    .third-section-container > p,
    .ninth-section-faq-list,
    .tenth-section,
    .references-section .inner,
    .references-section .l-narrow,
    .table-wrapper {
        max-width: calc(90vw - 10px);
        margin-left: auto;
        margin-right: auto;
    }
}


/* ===== 팩트체크 — 표 단일 렌더링 (v1 의 mobile accordion 토글 무력화) ===== */
.factcheck-table { display: block !important; }
.factcheck-accordion { display: none !important; }


/* ===== 섹션 intro 간격 정합 — eighth 도 --gap-content 사용 ===== */
.eighth-section-intro { gap: var(--gap-content); }


/* ===== 불릿 항목 — title 위계 + 본문 단락 정렬 =====
 * 기업사이트 정합으로 heading·인라인 볼드 전부 500 (가이드 §8). 위계는 size 로:
 * h3 18/500 > b 16/500 (label, body p 와 동일 weight·size 차) > body p 16/500. */
.seventh-section-example-content p {
    padding-left: 12px;
}
.seventh-section-example-content li b {
    font-size: 16px;
    font-weight: 500;
}
@media (max-width: 767px) {
    .seventh-section-example-content li b {
        font-size: 15px;
    }
}


/* ===== H3 자동 번호 (시각 전용) — 스펙 §B-1 + P2 결정 =====
 * H3 텍스트 / FAQ schema name 은 깨끗하게 유지 (검색 결과에 "1. " 노출 방지).
 * CSS counter 로 웹 상에만 번호 표시 (amore_view subsection 만). */

/* amore_view subsection — 4개 sub-section */
.fifth-section-list-wrapper {
    counter-reset: amore-sub;
}
.fifth-section-list > h3::before {
    counter-increment: amore-sub;
    content: counter(amore-sub) ". ";
}


/* ===== 헤더 — 라이브 (apgroup.com) 패턴 정합 ===== */
.site-header {
    position: fixed !important;     /* sticky → fixed */
    top: 0;
    left: 0;
    right: 0;
}
/* fixed header 가 본문 가리지 않도록 body 또는 main 에 상단 여백 확보 */
body {
    padding-top: var(--header-height);
}
.site-header .container {
    position: relative;
    max-width: 100%;
    padding: 0 5%;
    height: 100%;
}
/* header-inner 의 기존 grid/flex 를 무력화하고 relative 컨테이너로만 사용 */
.header-inner {
    display: block !important;
    position: relative;
    height: 100%;
}
/* logo 중앙 정렬 */
.header-inner > .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}
/* lang box — 좌측 5% 패딩 안쪽에 absolute */
.header-lang {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: none;                  /* 기본 숨김 — 1120px 이상에서 표시 */
}
/* utils (외부 링크 + 검색) — 우측 5% 패딩 안쪽에 absolute */
.header-links {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: none;                  /* 기본 숨김 — 좁은 폭에선 가운데 로고와 겹쳐 1120 이상에서만 표시 */
}
/* 라이브 1120px (70em) 이상에서만 lang + 외부링크 표시 (그 미만은 로고만, 겹침 방지) */
@media (min-width: 1120px) {
    .header-lang,
    .header-links {
        display: flex;
    }
}


/* ===== D1/D8: 표 첫 컬럼 너비 (라이브 .compare-table 정합) ===== */
.table-wrapper tbody td:first-child { width: 20%; }
.factcheck-table .table-wrapper tbody td:first-child { width: 32%; }


/* ===== D9: '효과, 이렇게 느껴보세요' 세부제목↔본문 여백 축소 ===== */
.seventh-section-example-title h3 { margin-bottom: 12px; }


/* ===== D10: FAQ Q-A 간격 18px + MO 폰트 15px (라이브 실측 정합) =====
 * 라이브는 .faq-question padding-bottom 18px 으로 질문↔답변 텍스트 간격 18px 확보.
 * 우리 구조엔 질문 padding 이 없어 answer margin-top 으로 동일 18px 부여
 * (margin-top:0 은 텍스트가 1px 로 붙어 과도하게 좁았음 — browse 실측 교정). */
.ninth-section-faq-item.active .ninth-section-faq-item-answer { margin-top: 18px !important; }
@media (max-width: 767px) {
    .ninth-section-faq-item h3 { font-size: 15px; }
    .ninth-section-faq-item-answer p { font-size: 15px; }
}


.nowrap {
  display: inline-block;
  white-space: nowrap;
}