/* ============================================================
   refresh.css — 2026-09 홈페이지 리프레시 레이어
   기존 style.css / pages.css 위에 마지막으로 로드됩니다.
   원칙: 토큰은 최소한만 덮고, 나머지는 새 클래스에만 적용합니다.
   ============================================================ */

:root {
    /* 라이브 chon.ai(2026-09 리뉴얼)에서 뽑은 값입니다.
       브랜드는 오렌지이고, 바탕은 흰색에 가까운 따뜻한 회백색,
       글자는 검정에 가깝습니다. 저장소에 남아 있던 네이비·블루는
       그 이전 세대입니다. */
    --brand-orange: #f5821f;
    --brand-orange-2: #fdb94e;
    --peach: #ffcf8f;
    --peach-soft: #ffe6c4;

    --ivory: #faf9f7;
    --ivory-2: #f2f0ec;
    --ink: #1e1e1e;
    --ink-2: #565656;
    --ink-3: #8f8f8f;
    --rule: #e6e2db;
    --live: #008250;
    --live-soft: #e6f3ec;
    --brand: #1e1e1e;
    --brand-blue: var(--brand-orange);  /* 이름은 유지하고 값만 브랜드색으로 */

    --pad-section: clamp(56px, 6.2vw, 84px);
    --measure: 62ch;

    /* 기존 스타일시트가 쓰는 토큰도 같은 팔레트로 맞춥니다 */
    --primary-color: #1e1e1e;
    --secondary-color: #2b2b2b;
    --accent-color: var(--brand-orange);
    --highlight-color: var(--brand-orange);
    --light-bg: var(--ivory);
    --section-bg: #ffffff;
    --card-bg: #ffffff;
    --text-dark: var(--ink);
    --text-light: var(--ink-2);
    --text-muted: var(--ink-3);
    --border-light: var(--rule);
    --border-medium: #d9d4cb;
    --divider: #efece6;
    --gradient-primary: linear-gradient(135deg, #f5821f 0%, #fdb94e 100%);
    --gradient-accent: linear-gradient(135deg, #fdb94e 0%, #ffcf8f 100%);
    --gradient-hero: linear-gradient(105deg, #f5821f 0%, #fbb055 42%, #ffd9a8 72%, #faf9f7 100%);

    --font-display: 'Syne', 'Noto Sans KR', system-ui, sans-serif;
    --font-sans: 'Noto Sans KR', 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { background: var(--ivory); color: var(--ink); }

/* ── 섹션 리듬 ─────────────────────────────────────────────
   한 주제를 이루는 두 섹션(족보 2개, 기술+특허)은 같은 면에 두고,
   주제가 바뀔 때만 면을 바꿉니다. 색이 바뀌는 자리가 곧 단락입니다. */
#genealogy, #genealogy-detail, #traction, #download { background: var(--ivory); }
#services, #tech, #patent, #faq, .partners-section { background: #fff; }

#services, #genealogy, #genealogy-detail, #tech, #patent,
#traction, #faq, #download, .partners-section {
    padding-block: var(--pad-section);
}
/* 같은 면이 이어지는 경계는 여백을 반으로 — 두 섹션이 한 덩어리로 읽힙니다 */
#genealogy { padding-bottom: calc(var(--pad-section) * .38); }
#genealogy-detail { padding-top: calc(var(--pad-section) * .38); }
#tech { padding-bottom: calc(var(--pad-section) * .38); }
#patent { padding-top: calc(var(--pad-section) * .38); }

/* ── 섹션 헤더 ───────────────────────────────────────────── */
.section-header { max-width: 760px; margin-inline: auto; }
.section-subtitle {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 700; color: var(--brand-blue);
}
.section-title {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem) !important;
    line-height: 1.24; letter-spacing: -.03em; font-weight: 800;
    color: var(--ink); text-wrap: balance;
}
.section-description {
    font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ink-2);
    max-width: var(--measure); margin-inline: auto; line-height: 1.7;
}

/* ── 히어로 ───────────────────────────────────────────────
   13MB 자동재생 비디오를 배경에서 뺐습니다. 모바일 첫 화면에서
   그만한 다운로드를 강요할 이유가 없고, 그 자리는 제품 화면이
   대신하는 편이 CHON을 더 잘 설명합니다. */
.hero-v2 {
    background: var(--gradient-hero);
    color: var(--ink);
    padding-block: clamp(72px, 8vw, 108px);
    position: relative; overflow: hidden;
}
.hero-v2::after { content: none; }

.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 700; color: #6b3a12; margin: 0 0 20px;
}
.hero-eyebrow .mark {
    font-size: 15px; letter-spacing: 0; color: var(--ink);
    border: 1px solid rgba(30,30,30,.24); border-radius: 6px;
    padding: 1px 7px 3px;
}
.hero-title-v2 {
    font-size: clamp(2.2rem, 5.1vw, 4rem); line-height: 1.16;
    letter-spacing: -.035em; font-weight: 800; margin: 0 0 22px;
    color: var(--ink); text-wrap: balance;
}
.hero-title-v2 .grad {
    /* 오렌지 바탕에 오렌지 글자는 읽히지 않습니다. 라이브도 제목은 한 톤이고,
       색은 바탕이 맡습니다. 강조는 굵기와 줄바꿈으로 냅니다. */
    color: var(--ink);
}
.hero-sub-v2 {
    font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.72;
    color: #4a3a2b; max-width: 46ch; margin: 0 0 32px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero-cta .btn { border-radius: 999px; padding: 15px 30px; font-weight: 700; font-size: 15px; }
.btn-ghost {
    background: rgba(255,255,255,.72); color: var(--ink); border: 1px solid rgba(30,30,30,.16);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-ghost:hover { background: #fff; border-color: rgba(30,30,30,.32); }
.hero-note { font-size: 13.5px; color: #7a6a58; margin: 0; }

.hero-shot { display: flex; gap: 18px; justify-content: center; }
.hero-shot img {
    width: min(232px, 44%); height: auto; border-radius: 22px;
    box-shadow: 0 22px 52px rgba(120,70,10,.22);
    border: 1px solid rgba(255,255,255,.6);
}
.hero-shot img:first-child { transform: translateY(20px) rotate(-2.5deg); }
.hero-shot img:last-child  { transform: translateY(-14px) rotate(2deg); }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-sub-v2 { margin-inline: auto; }
    .hero-cta { justify-content: center; }
    .hero-shot img:first-child, .hero-shot img:last-child { transform: none; }
}

/* ── FAQ 아코디언 ────────────────────────────────────────── */
.faq-section { background: #fff; padding-block: var(--pad-section); }
.faq-list { max-width: 820px; margin: 40px auto 0; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item > summary {
    list-style: none; cursor: pointer; padding: 22px 44px 22px 2px;
    font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 700; color: var(--ink);
    position: relative; line-height: 1.55;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 11px; height: 11px; margin-top: -6px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg); transition: transform var(--transition-fast);
}
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item > summary:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 4px; }
.faq-answer {
    padding: 0 44px 24px 2px; margin: 0; color: var(--ink-2);
    font-size: 15.5px; line-height: 1.78; max-width: var(--measure);
}
.faq-answer strong { color: var(--ink); font-weight: 700; }

/* ── 마일스톤 타임라인 (안내 페이지) ─────────────────────── */
.timeline { max-width: 780px; margin: 44px auto 0; position: relative; }
.timeline::before {
    content: ""; position: absolute; left: 78px; top: 8px; bottom: 8px;
    width: 2px; background: var(--rule);
}
.tl-row { display: grid; grid-template-columns: 78px 1fr; gap: 28px; padding: 16px 0; position: relative; }
.tl-year {
    font-weight: 800; font-size: 15px; color: var(--ink); text-align: right;
    font-variant-numeric: tabular-nums; padding-top: 1px;
}
.tl-body { position: relative; padding-left: 4px; }
.tl-body::before {
    content: ""; position: absolute; left: -29px; top: 6px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #fff; border: 2px solid var(--ink-3);
}
.tl-row.is-live .tl-body::before { border-color: var(--live); background: var(--live); }
.tl-title { font-weight: 700; color: var(--ink); font-size: 16px; margin: 0 0 4px; }
.tl-desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; margin: 0; max-width: 54ch; }
.tl-tag {
    display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; padding: 2px 9px; border-radius: 999px;
    background: var(--live-soft); color: #0c7a55; vertical-align: 2px;
}
@media (max-width: 620px) {
    .timeline::before { left: 5px; }
    .tl-row { grid-template-columns: 1fr; gap: 4px; padding-left: 26px; }
    .tl-year { text-align: left; }
    .tl-body::before { left: -26px; }
}

/* ── 카드 톤 정리 ────────────────────────────────────────── */
.hc-card, .patent-card, .service-card-new, .overview-feature-card {
    border-radius: 16px;
}
.hc-card, .overview-feature-card {
    background: #fff; border: 1px solid var(--rule); box-shadow: none;
}
#genealogy-detail .overview-feature-card, #patent .patent-card { background: #fff; }
#tech .hc-card { background: #fff; }

/* ── 핵심 서비스 카드 ─────────────────────────────────────
   카드가 흰 면으로 바뀌면서 흰색이던 배지·부제가 보이지 않게 됐습니다.
   면 위에서 읽히도록 색을 다시 잡고, 이중으로 들어가던 안쪽 여백을 줄입니다. */
.services-grid .service-card-new {
    background: #fff; border: 1px solid var(--rule); box-shadow: none;
    padding: 0; overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.services-grid .service-card-new:hover {
    border-color: #c9d4e6; box-shadow: 0 14px 34px rgba(19,26,36,.07); transform: translateY(-2px);
}
.services-grid .service-card-content { padding: 30px 28px 32px; }
.services-grid .service-badge {
    display: inline-block; background: #eef3fd; color: var(--brand-blue);
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px; margin-bottom: 16px;
}
.services-grid .service-card-new h3 {
    font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink); margin: 0 0 4px; text-wrap: balance;
}
.services-grid .service-subtitle {
    color: var(--brand-blue); font-weight: 700; font-size: 14px; margin: 0 0 14px;
}
.services-grid .service-description {
    color: var(--ink-2); font-size: 15px; line-height: 1.72; margin: 0 0 20px;
}
.services-grid .service-features-list {
    border-top: 1px solid var(--rule); padding-top: 16px;
    display: flex; flex-direction: column; gap: 9px;
}
.services-grid .feature-item { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.services-grid .feature-item::before {
    content: "·"; color: var(--brand-blue); font-weight: 700; margin-right: 8px;
}

/* 카드 5장이 3열에 들어가면 마지막 줄이 비어 보입니다. 자동 배치로 두어
   폭에 따라 3열·2열이 자연스럽게 잡히게 합니다. */
.services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 20px; align-items: stretch;
}

/* ── FAQ: 기존 pages.css의 카드형 위에 얹지 않고 우리 것만 씁니다 ── */
.faq-section .faq-list .faq-item {
    background: transparent; border: 0; border-bottom: 1px solid var(--rule);
    border-radius: 0; box-shadow: none; padding: 0; margin: 0;
}
.faq-section .faq-list .faq-item > summary { background: transparent; }
.services-grid .feature-item {
    background: transparent !important; border: 0 !important;
    padding: 0 !important; border-radius: 0 !important;
}
.services-grid .feature-item span { color: inherit; }


/* ── 세로 길이 조절 ───────────────────────────────────────
   첫 페이지가 18화면이었습니다. 내용을 지우는 대신, 한 화면에 들어가는
   밀도를 올려 스크롤을 절반 가까이 줄입니다. */

/* 섹션 헤더: 제목과 본문 사이의 빈 구간을 좁힙니다 */
.section-header { margin-bottom: 28px !important; padding-bottom: 0 !important; }
.section-header .section-subtitle { margin-bottom: 8px !important; }
.section-header .section-title { margin-bottom: 10px !important; }
.section-header .section-description { margin-bottom: 0 !important; }

/* 시작 3단계: 화면 4장이 세로로 큰 자리를 차지했습니다 */
#genealogy .getting-started-content { gap: 32px; align-items: center; }
#genealogy .cta-images-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
#genealogy .cta-images-grid img { width: 100%; height: auto; border-radius: 10px; }
#genealogy .getting-started-steps { gap: 10px; }

/* 족보 4기능: 2×2가 아니라 한 줄 4칸으로 눕힙니다 */
#genealogy-detail .overview-features-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
#genealogy-detail .overview-feature-card { padding: 20px 18px; }
#genealogy-detail .overview-main { margin-bottom: 26px; }

/* 기술·특허 카드: 안쪽 여백만 줄여도 8장이면 크게 줄어듭니다 */
#tech .hc-card, #patent .patent-card, #traction .patent-card { padding: 20px 20px 18px; }
#tech .hc-card-grid { gap: 14px; }
#tech .tech-overview { margin: 26px 0 14px; }
#patent .patent-stats-row { margin-bottom: 22px; padding: 18px 0; }

/* 다운로드: 폰 이미지가 섹션 하나를 통째로 쓰고 있었습니다 */
#download .download-content {
    display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    gap: 36px; align-items: center;
}
#download .phone-mockup-image img { max-width: 260px; margin-inline: auto; display: block; }
#download .download-info h3 { margin-top: 0; }
@media (max-width: 820px) {
    #download .download-content { grid-template-columns: 1fr; }
}

/* 파트너 로고: 두 줄로 흩어져 있던 것을 한 줄에 담습니다 */
.partners-section .partners-grid {
    display: flex !important; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 30px 44px;
}
.partners-section .partners-grid > * { margin: 0 !important; }
.partners-section .partners-grid img {
    max-height: 34px; width: auto; opacity: .62;
    filter: grayscale(1); transition: opacity var(--transition-fast), filter var(--transition-fast);
}
.partners-section .partners-grid img:hover { opacity: 1; filter: none; }

/* 마무리 CTA */
#contact { padding-block: clamp(56px, 6vw, 84px) !important; }

/* 섹션 헤더의 남는 여백 정리 */
.section-header .section-subtitle { margin: 0 0 6px !important; }
.section-header .section-title { margin: 6px 0 8px !important; }
.section-header .section-description { margin-top: 8px !important; }

/* 파트너: 카드가 7장 두 줄을 차지했습니다. 로고는 기존 스타일시트가
   이미 숨겨 둔 상태라(텍스트 표기가 의도) 이름과 역할만 압축합니다. */
.partners-section .partner-card {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 8px 4px !important; min-height: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; transition: opacity var(--transition-fast);
}
.partners-section .partner-card:hover { opacity: .62; }
.partners-section .partner-card h4 {
    margin: 0 !important; font-size: 15px; font-weight: 700; color: var(--ink);
    letter-spacing: -.01em; white-space: nowrap;
}
.partners-section .partner-card p {
    margin: 0 !important; font-size: 12px; color: var(--ink-3); white-space: nowrap;
}

/* 트랙션 4장을 한 줄로 — 3+1로 떨어지면 마지막 칸이 비어 보입니다 */
#traction .patent-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px;
}
#traction .patent-card h3 { font-size: 1.05rem; margin: 8px 0 6px; }
#traction .patent-feature-list li { font-size: 13.5px; line-height: 1.6; }

/* 다운로드: 체크리스트와 스토어 배지만 남기고 높이를 절반으로 */
#download .download-info ul, #download .download-info .download-features { gap: 8px; }
#download .download-info li { margin: 4px 0; }
#download .phone-mockup-image img { max-width: 220px; }
#download .download-content { gap: 30px; }

/* 안내 페이지도 같은 리듬으로 */
#brand-story, #company, #vision, #values, #business, #healthcare, #team, #milestones {
    padding-block: var(--pad-section);
}
#brand-story .brand-story-graphic { max-height: 340px; }

/* ── 다운로드 QR ──────────────────────────────────────────
   데스크톱에서 보는 사람은 링크를 눌러도 폰으로 옮겨야 합니다.
   좁은 화면에서는 스토어 버튼을 바로 누르면 되므로 QR을 숨깁니다. */
.download-qr {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.download-qr figure { margin: 0; text-align: center; }
.download-qr img {
    display: block; width: 108px; height: 108px;
    padding: 8px; background: #fff;
    border: 1px solid var(--rule); border-radius: 10px;
    image-rendering: crisp-edges;
}
.download-qr figcaption {
    margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2);
    letter-spacing: -.01em;
}
.download-qr-note {
    flex: 1 1 120px; align-self: center; margin: 0;
    font-size: 13px; color: var(--ink-3); line-height: 1.6;
}
@media (max-width: 820px) { .download-qr { display: none; } }

/* pages.css의 .faq-answer는 max-height:0으로 접혀 있고 자체 아코디언 JS가
   펴는 구조입니다. 여기서는 네이티브 <details>를 쓰므로 그 JS를 거치지
   않아 답이 한 줄로 잘렸습니다. 접고 펴는 것은 <details>가 이미 합니다. */
.faq-section .faq-list .faq-answer {
    max-height: none !important; overflow: visible !important; opacity: 1 !important;
}

/* ============================================================
   좁은 화면 (≤760px)
   여러 열이 1단으로 무너지면서 카드가 전부 세로로 쌓입니다. 데스크톱과
   같은 여백·글자 크기를 쓰면 스크롤이 20화면을 넘습니다. 내용을 지우지
   않고 밀도만 올립니다.
   ============================================================ */
@media (max-width: 760px) {
    :root { --pad-section: 44px; }

    .section-header { margin-bottom: 20px !important; }
    .section-title { font-size: clamp(1.45rem, 6.4vw, 1.8rem) !important; line-height: 1.3; }
    .section-description { font-size: 14.5px; line-height: 1.62; }
    .section-subtitle { font-size: 11px; }

    /* 히어로: 폰 두 장이 첫 화면의 절반을 먹지 않게 */
    .hero-v2 { padding-block: 56px 44px; }
    .hero-grid { gap: 26px; }
    .hero-title-v2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin-bottom: 16px; }
    .hero-sub-v2 { font-size: 15px; line-height: 1.62; margin-bottom: 22px; }
    .hero-cta { margin-bottom: 14px; }
    .hero-cta .btn { padding: 13px 22px; font-size: 14px; }
    .hero-shot { gap: 12px; }
    .hero-shot img { width: min(150px, 42%); border-radius: 16px; }
    .hero-eyebrow { margin-bottom: 14px; font-size: 11px; }

    /* 카드 안쪽 여백 — 세로로 쌓이면 여백이 그대로 스크롤이 됩니다 */
    .services-grid { gap: 12px; }
    .services-grid .service-card-content { padding: 20px 18px 22px; }
    .services-grid .service-card-new h3 { font-size: 1.15rem; }
    .services-grid .service-badge { margin-bottom: 10px; padding: 4px 9px; }
    .services-grid .service-subtitle { margin-bottom: 10px; font-size: 13px; }
    .services-grid .service-description { font-size: 14px; line-height: 1.62; margin-bottom: 14px; }
    .services-grid .service-features-list { padding-top: 12px; gap: 6px; }
    .services-grid .feature-item { font-size: 13px; }

    #tech .hc-card, #patent .patent-card, #traction .patent-card,
    #genealogy-detail .overview-feature-card { padding: 15px 16px 14px; }
    #tech .hc-card-grid, #patent .patent-cards-grid,
    #traction .patent-cards-grid, #genealogy-detail .overview-features-grid { gap: 10px; }
    #tech .tech-overview { margin: 18px 0 10px; }
    #tech .tech-overview h3 { font-size: 1.15rem; }
    #tech .tech-overview p { font-size: 14px; }
    #tech .hc-card h4 { font-size: 15px; margin-bottom: 8px; }
    #tech .hc-tags span { font-size: 12.5px; }
    #patent .patent-stats-row { padding: 14px 0; margin-bottom: 16px; }
    #traction .patent-card h3 { font-size: 1rem; margin: 6px 0 5px; }
    #traction .patent-feature-list li { font-size: 13px; line-height: 1.55; }
    #genealogy-detail .overview-main { margin-bottom: 18px; }

    /* 시작 3단계 */
    #genealogy .getting-started-content { gap: 20px; }
    #genealogy .getting-started-steps { gap: 8px; }
    #genealogy .cta-images-grid { gap: 6px; }

    /* FAQ */
    .faq-list { margin-top: 24px; }
    .faq-item > summary { padding: 16px 36px 16px 2px; font-size: 15px; }
    .faq-answer { padding-bottom: 18px; font-size: 14.5px; line-height: 1.68; }

    /* 다운로드: 폰 목업은 장식이고, 좁은 화면에서는 한 화면을 통째로 씁니다.
       바로 위 히어로에 이미 같은 앱 화면이 나와 있습니다. */
    #download .download-visual { display: none; }
    #download .download-content { grid-template-columns: 1fr; gap: 0; }
    #download .app-features-list { gap: 6px; margin: 14px 0; }
    #download .app-feature-item { font-size: 14px; }

    .partners-section .partners-grid { gap: 18px 26px; }
    #contact { padding-block: 44px !important; }
}

@media (max-width: 760px) {
    /* 히어로 CTA가 각각 280px로 잡혀 세로로 쌓였습니다 — 한 줄에 나란히 */
    .hero-cta { flex-wrap: nowrap; gap: 10px; }
    .hero-cta .btn { flex: 1 1 0; width: auto !important; min-width: 0; padding: 13px 12px; }

    /* 작은 카드들은 2단으로 — 세로로만 쌓이면 한 섹션이 두 화면을 씁니다 */
    #tech .hc-card-grid,
    #patent .patent-cards-grid,
    #genealogy-detail .overview-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #tech .hc-card h4, #genealogy-detail .overview-feature-card h4 { font-size: 13.5px; line-height: 1.4; }
    #tech .hc-tags { gap: 4px; }
    #tech .hc-tags span { font-size: 11.5px; }
    #genealogy-detail .overview-feature-card p { font-size: 12.5px; line-height: 1.5; }
    #genealogy-detail .feature-icon-wrapper { transform: scale(.82); transform-origin: left top; }
    #patent .patent-card h3 { font-size: 14px; line-height: 1.4; }
    #patent .patent-feature-list li { font-size: 12px; line-height: 1.5; }
    #patent .patent-card { padding: 14px 13px 13px; }

    /* 서비스 카드의 특징 목록을 한 줄로 눕힙니다 (내용은 그대로) */
    .services-grid .service-features-list { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
    .services-grid .feature-item { font-size: 12.5px; }

    /* 모바일 메뉴 버튼이 16px이라 누를 수 없었습니다. 아이콘 폰트에
       기대지 않고 직접 그려 확실히 보이게 합니다. */
    .navbar .mobile-menu-toggle {
        width: 40px; height: 40px; display: inline-flex !important;
        align-items: center; justify-content: center; position: relative;
        background: transparent; border: 0; cursor: pointer;
    }
    .navbar .mobile-menu-toggle i { display: none; }
    .navbar .mobile-menu-toggle::before,
    .navbar .mobile-menu-toggle::after,
    .navbar .mobile-menu-toggle span.bar {
        content: ""; position: absolute; left: 10px; width: 20px; height: 2px;
        background: var(--ink); border-radius: 2px;
    }
    .navbar .mobile-menu-toggle::before { top: 13px; }
    .navbar .mobile-menu-toggle::after { bottom: 13px; }
    .navbar .mobile-menu-toggle span.bar { top: 19px; }
}

@media (max-width: 760px) {
    /* 히어로 폰: 첫 화면에서 CTA 아래 450px를 쓰고 있었습니다 */
    .hero-shot img { width: min(126px, 38%); }

    /* 서비스 카드 5장이 모바일 스크롤의 5분의 1입니다 */
    .services-grid .service-card-content { padding: 17px 16px 18px; }
    .services-grid .service-card-new h3 { font-size: 1.05rem; }
    .services-grid .service-subtitle { margin-bottom: 8px; font-size: 12.5px; }
    .services-grid .service-description { font-size: 13.5px; line-height: 1.58; margin-bottom: 11px; }
    .services-grid .service-features-list { padding-top: 10px; }
    .services-grid .service-badge { font-size: 10px; margin-bottom: 8px; }

    /* 트랙션도 2단으로 */
    #traction .patent-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #traction .patent-card { padding: 13px 12px 12px; }
    #traction .patent-card h3 { font-size: 13.5px; }
    #traction .patent-feature-list li { font-size: 11.5px; line-height: 1.5; }
    #traction .patent-status-badge, #traction .patent-id { font-size: 10px; }
}

@media (max-width: 760px) {
    /* 2단으로 좁아진 카드에서 태그가 넘쳐 잘렸습니다 */
    #tech .hc-tags { flex-wrap: wrap; min-width: 0; }
    #tech .hc-tags span {
        white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
        min-width: 0; max-width: 100%;
    }
    #tech .hc-card, #patent .patent-card, #traction .patent-card,
    #genealogy-detail .overview-feature-card { min-width: 0; overflow: hidden; }
    #patent .patent-card h3, #traction .patent-card h3,
    #patent .patent-feature-list li, #traction .patent-feature-list li,
    #genealogy-detail .overview-feature-card p { word-break: keep-all; overflow-wrap: anywhere; }
}

/* ── 모바일 메뉴 ──────────────────────────────────────────
   가운데 정렬된 데스크톱 메뉴를 그대로 좁힌 상태였습니다. 왼쪽 정렬한
   목록으로 바꾸고, 펼침 표시와 닫기 표시를 눈에 보이게 만듭니다. */
@media (max-width: 968px) {
    .navbar .nav-menu.active {
        padding: 6px 0 14px; gap: 0;
        box-shadow: 0 18px 40px rgba(19,26,36,.10);
        border-bottom: 1px solid var(--rule);
        max-height: calc(100dvh - 72px); overflow-y: auto;
    }
    .navbar .nav-menu.active > li { width: 100%; }
    body .navbar .nav-menu.active .dropdown > a {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; text-align: left; padding: 15px 22px;
        font-size: 16px; font-weight: 700; color: var(--ink);
        background: transparent; border-radius: 0;
        border-bottom: 1px solid var(--rule-2, #eee);
    }
    .navbar .nav-menu.active .dropdown-menu { padding: 4px 0 8px; background: var(--ivory); }
    .navbar .nav-menu.active .dropdown-menu a {
        display: block; text-align: left; padding: 11px 22px 11px 34px;
        font-size: 14.5px; color: var(--ink-2); position: relative;
    }
    .navbar .nav-menu.active .dropdown-menu a::before {
        content: ""; position: absolute; left: 22px; top: 50%;
        width: 4px; height: 1px; background: var(--ink-3);
    }
    .navbar .nav-menu.active .dropdown-menu a:active { color: var(--brand-blue); }
}

/* 열림 상태에서 햄버거를 X로 — 아이콘 폰트를 숨겼으므로 직접 그립니다 */
@media (max-width: 760px) {
    .navbar .mobile-menu-toggle::before,
    .navbar .mobile-menu-toggle::after,
    .navbar .mobile-menu-toggle span.bar {
        transition: transform var(--transition-fast), opacity var(--transition-fast);
    }
    .navbar .mobile-menu-toggle[aria-expanded="true"]::before { top: 19px; transform: rotate(45deg); }
    .navbar .mobile-menu-toggle[aria-expanded="true"]::after { bottom: 19px; transform: rotate(-45deg); }
    .navbar .mobile-menu-toggle[aria-expanded="true"] span.bar { opacity: 0; }
}

/* 앵커로 이동했을 때 상단 고정 내비에 제목이 가리지 않도록 */
#services, #genealogy, #genealogy-detail, #tech, #patent, #traction,
#faq, #download, #company, #vision, #values, #business, #healthcare,
#team, #milestones, #brand-story, #contact {
    scroll-margin-top: 84px;
}
@media (max-width: 968px) { :root { --nav-h: 72px; } [id] { scroll-margin-top: 76px; } }

/* 햄버거의 X 표시는 aria-expanded와 .active 어느 쪽으로도 켜지게 합니다 */
@media (max-width: 760px) {
    .navbar .mobile-menu-toggle.active::before { top: 19px; transform: rotate(45deg); }
    .navbar .mobile-menu-toggle.active::after { bottom: 19px; transform: rotate(-45deg); }
    .navbar .mobile-menu-toggle.active span.bar { opacity: 0; }
}

/* ── 서비스 · 안내를 누르면 그 페이지로 갑니다 ────────────
   모바일에서 상위 항목이 펼침 전용이라 index.html / about.html 자체에는
   갈 수 없었습니다. 라벨은 이동, 오른쪽 버튼은 펼침으로 나눕니다. */
.dropdown > .dropdown-toggle { display: none; }

@media (max-width: 968px) {
    .navbar .nav-menu.active > li.dropdown {
        display: grid; grid-template-columns: 1fr 56px; align-items: stretch;
        border-bottom: 1px solid var(--rule);
    }
    .navbar .nav-menu.active > li.dropdown > .dropdown-menu { grid-column: 1 / -1; }
    body .navbar .nav-menu.active .dropdown > a {
        border-bottom: 0; padding-right: 8px;
    }
    .navbar .nav-menu.active .dropdown > .dropdown-toggle {
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: 0; border-left: 1px solid var(--rule-2, #eee);
        cursor: pointer; padding: 0; position: relative;
    }
    .navbar .nav-menu.active .dropdown > .dropdown-toggle::after {
        content: ""; width: 9px; height: 9px;
        border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
        transform: rotate(45deg) translateY(-2px);
        transition: transform var(--transition-fast);
    }
    .navbar .nav-menu.active .dropdown.active > .dropdown-toggle::after {
        transform: rotate(-135deg) translateY(-2px);
        border-color: var(--brand-blue);
    }
    .navbar .nav-menu.active .dropdown > .dropdown-toggle:focus-visible {
        outline: 2px solid var(--brand-blue); outline-offset: -3px;
    }
}


/* ── 라이브 사이트의 서체·모서리·버튼 ─────────────────────
   제목은 Syne + Noto Sans KR, 버튼은 알약형, 카드 모서리는 20px. */
/* Syne는 라틴 대문자 라벨에서만 씁니다. 한글 제목에 물리면 자간과 글자폭이
   맞지 않아 어색해집니다 — 라이브도 본문 제목은 한글 산세리프입니다. */
.hero-eyebrow, .section-subtitle { font-family: var(--font-display); }
.hero-title-v2, .section-title, h1, h2, h3 { font-family: var(--font-sans); }
body, p, li, td, th, input, textarea, button, .btn { font-family: var(--font-sans); }

.btn, .store-button, .hero-cta .btn { border-radius: 999px; }
.btn-primary { background: var(--ink) !important; background-image: none !important; color: #fff !important; border: 0; }
.btn-primary:hover { background: #000 !important; }

.services-grid .service-card-new, .hc-card, .patent-card,
.overview-feature-card, #download .phone-mockup-image img { border-radius: 20px; }

.section-subtitle {
    color: var(--ink-3) !important; background: transparent !important;
    border: 0 !important; padding: 0 !important; font-weight: 700; letter-spacing: .14em;
}
.services-grid .service-badge { background: var(--peach-soft); color: #a8500a; }
.services-grid .service-subtitle { color: #a8500a; }
.services-grid .feature-item::before { color: var(--brand-orange); }
.faq-item > summary:focus-visible { outline-color: var(--brand-orange); }
#traction .patent-card { border-top: 3px solid var(--brand-orange); }
#contact { background: var(--ink) !important; }
.tl-row.is-live .tl-body::before { border-color: var(--brand-orange); background: var(--brand-orange); }

/* ── 페이지 헤더를 전 페이지 같은 톤으로 ─────────────────
   about·ir은 어두운 기술 패턴, ceo는 하늘색이라 페이지마다 인상이
   달랐습니다. 히어로와 같은 오렌지 그라디언트에 어두운 글자로 통일합니다. */
.page-header {
    background: var(--gradient-hero) !important;
    color: var(--ink);
}
.page-header-background { opacity: .07 !important; filter: grayscale(1) !important; }
.page-header .page-title,
.page-header .page-subtitle,
.page-header .breadcrumb,
.page-header .breadcrumb a,
.page-header p {
    color: var(--ink) !important; text-shadow: none !important;
}
.page-header .breadcrumb a { text-decoration: none; }
.page-header .breadcrumb, .page-header .breadcrumb * { background: transparent !important; }

/* about·ir의 페이지 제목이 흰 글자 + 그림자로 박혀 있어(어두운 배경 전제)
   오렌지 헤더 위에서 읽히지 않습니다. 특이도를 올려 되돌립니다. */
body .page-header .page-title,
body[data-page] .page-header .page-title,
body .page-header h1.page-title {
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    text-shadow: none !important;
}
body .page-header .page-subtitle,
body[data-page] .page-header .page-subtitle {
    color: #4a3a2b !important; text-shadow: none !important;
}
/* 브레드크럼의 회색 알약 배경 제거 */
body .page-header .breadcrumb a,
body .page-header .breadcrumb span {
    background: transparent !important; color: #6b3a12 !important;
}