/* 디자이너 시안(2026-11-13 '에그링크 실버톤 개선안') 공통 스타일 — 그대로 가져옴.
   사이트에서 덧붙인 것(모바일·실제 입력칸·움직임 등)은 egglink-site.css 에 둔다. */
/* =========================================================
   에그링크 리디자인 — 공통 스타일 (2026-11-13)
   원칙: 그라데이션·그림자·형광펜 없음. 면 색과 1px 선으로만 구분.
         본문은 18px 이상, 설명글은 20px. 노랑은 로고에만.
========================================================= */
:root {
    /* 색 */
    --bg: #f3f4f6;          /* 실버 바탕 */
    --white: #ffffff;
    --line: #dadde2;
    --line-strong: #c4c8cf;
    --ink: #15171a;         /* 제목 · 버튼 */
    --text: #383c43;        /* 본문 */
    --sub: #5f646d;         /* 보조 (15px 이상에만) */
    --footer: #1e2024;
    --egg: #ffc107;         /* 브랜드 노랑 — 로고와 '무료 진단'에만 */
    --alert: #e03131;       /* 무료 진단 깜빡이는 점 */

    /* 글씨 — 웹 기준 (PC) */
    --fs-display: 60px;  /* 페이지 첫 제목 */
    --fs-h2: 44px;       /* 섹션 제목 */
    --fs-h3: 26px;       /* 카드 제목 */
    --fs-lead: 23px;     /* 섹션 설명 — 전 페이지 통일 */
    --fs-body: 19px;     /* 본문 */
    --fs-small: 17px;    /* 보조 설명 */
    --fs-label: 16px;    /* 라벨 · 캡션 (최소 크기) */

    --sec-y: 120px;
    --radius: 8px;
    --radius-btn: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: var(--fs-body);
    line-height: 1.75;
    letter-spacing: -0.01em;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }

/* ---------- 글씨 ---------- */
.t-display { font-size: var(--fs-display); line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.t-h2 { font-size: var(--fs-h2); line-height: 1.32; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.t-h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.t-lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--text); }
.t-body { font-size: var(--fs-body); line-height: 1.75; color: var(--text); }
.t-small { font-size: var(--fs-small); line-height: 1.65; color: var(--sub); }
.t-label { font-size: var(--fs-label); line-height: 1.4; font-weight: 600; color: var(--sub); letter-spacing: 0; }

/* ---------- 버튼 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 56px; padding: 0 28px; border-radius: var(--radius-btn);
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
    border: 1px solid var(--ink); background: var(--ink); color: #fff;
}
.btn-line { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-off { background: #c9cdd3; border-color: #c9cdd3; color: #fff; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.link { font-size: var(--fs-small); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---------- 헤더 ---------- */
.hd { background: var(--white); border-bottom: 1px solid var(--line); }
.hd .wrap { display: flex; align-items: center; height: 76px; gap: 40px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo svg { width: 40px; height: 24px; }
.logo b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.gnb { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.gnb a { font-size: 17px; font-weight: 500; color: var(--text); }
.gnb a.on { color: var(--ink); font-weight: 700; }
/* 무료 진단: 앞에 빨간 점만 천천히 깜빡임 */
.gnb a.nav-dx { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.nav-dx i { width: 8px; height: 8px; border-radius: 50%; background: var(--alert); animation: dx-blink 1.4s ease-in-out infinite; }
@keyframes dx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .nav-dx i { animation: none; } }

/* ---------- 섹션 ---------- */
.sec { padding: var(--sec-y) 0; }
.sec.white { background: var(--white); }
/* 섹션 머리: 제목 → 바로 아래 설명. 오른쪽 아래에 짧은 안내(aside)가 올 수 있음 */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
.sec-head .t-lead { margin-top: 20px; max-width: 1000px; line-height: 1.65; }
.sec-aside { flex: none; margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
/* 제목 아래에 설명을 바로 붙이는 형태 (서비스 소개) */
.sec-head.stack { display: block; }
.sec-head.stack > .t-lead { margin-top: 20px; max-width: 1000px; font-size: 22px; line-height: 1.65; }

.hero { padding: 104px 0 112px; }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.hero .t-lead { margin-top: 24px; max-width: 840px; }
.hero .btns { margin-top: 40px; }
.hero-tag { display: block; margin-bottom: 18px; font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

/* 패키지 첫 화면 오른쪽: 할인 · 구성 · 맞춤 카드 */
.perks { display: grid; gap: 12px; }
.perks li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; padding: 22px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.perks b { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.perks span { font-size: 18px; line-height: 1.6; color: var(--ink); }

/* ---------- 카드 ---------- */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; display: flex; flex-direction: column; }
.white .card { background: var(--bg); border-color: var(--bg); }
.card .t-h3 + .t-body, .card .t-h3 + .t-small { margin-top: 12px; }
.card .link { margin-top: auto; align-self: flex-start; }
.card .t-body + .link { margin-top: 32px; }
/* 카드 안 '자세히 보기 →': 밑줄 없이, 항상 카드 맨 아래에 맞춰 정렬 */
.card .more { margin-top: auto; padding-top: 28px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.svc .card { padding: 40px; }
.svc .t-h3 { font-size: 26px; }
.svc .t-body { font-size: 19px; }
.card-lg { padding: 44px; min-height: 260px; }
.card-lg .t-h3 { font-size: 28px; }

/* 목록 행 */
.rows { border-top: 1px solid var(--ink); }
.rows > li { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.rows > li b { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.rows > li span { font-size: var(--fs-body); color: var(--text); }
.hero .rows > li { grid-template-columns: 88px 1fr; }
.hero .rows { border-top: 0; }
.hero .rows > li:first-child { padding-top: 0; }

/* 사진 */
.ph { border-radius: var(--radius); overflow: hidden; background: #e4e6ea; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mosaic .ph { aspect-ratio: 1 / 1; }
.fig figcaption { margin-top: 14px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.fig .ph { aspect-ratio: 4 / 3; }

/* ---------- 폼 ---------- */
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-label); font-weight: 600; color: var(--ink); }
.input { height: 56px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--white); font-size: 17px; color: var(--sub); display: flex; align-items: center; }
.input.area { height: 140px; align-items: flex-start; padding-top: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); color: var(--text); }
.check i { width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); flex: none; }
.form { display: grid; gap: 20px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 문의 섹션 */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.contact .t-lead { margin-top: 20px; }
.info { margin-top: 40px; border-top: 1px solid var(--line); }
.info li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
.info li b { font-weight: 700; color: var(--ink); font-size: var(--fs-small); padding-top: 2px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; }
/* 문의 양식 섹션 — 가운데 정렬 */
.contact.center { display: block; text-align: center; }
.contact.center .t-lead { margin-top: 20px; }
.info-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px; margin-top: 36px; font-size: var(--fs-body); color: var(--text); }
.info-row b, .info-addr b { margin-right: 10px; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.info-addr { margin-top: 10px; font-size: var(--fs-small); color: var(--sub); }
.contact.center .panel { max-width: 760px; margin: 44px auto 0; text-align: left; }
.white .panel { background: var(--bg); border-color: var(--bg); }

/* 마지막 상담 띠 */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.cta .t-lead { margin-top: 16px; }
.cta.center { flex-direction: column; text-align: center; gap: 36px; }
.cta.center .btns { justify-content: center; }

/* ---------- 푸터 ---------- */
.ft { background: var(--footer); color: #c3c7ce; padding: 64px 0 72px; font-size: var(--fs-label); line-height: 1.8; }
.ft .wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; }
.ft .logo b { color: #fff; }
.ft p.t { margin-top: 16px; font-size: var(--fs-small); color: #e6e8eb; }
.ft dl { display: grid; grid-template-columns: repeat(2, auto 1fr); gap: 6px 16px; margin: 0; }
.ft dt { color: #8e939b; }
.ft dd { margin: 0; color: #e6e8eb; }
.ft small { display: block; margin-top: 24px; color: #8e939b; font-size: 14px; }

/* ---------- 페이지별 ---------- */
/* 메인 */
.logos { display: grid; grid-template-columns: repeat(11, 1fr); align-items: center; justify-items: center; gap: 24px; }
.logos img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.logos img.sq { width: 52px; height: 52px; max-height: none; border-radius: 50%; object-fit: cover; }
.logos img.dk { max-height: 44px; padding: 12px 10px; border-radius: 6px; background: var(--ink); }   /* 흰 글자 로고 */
.logos-sec { padding: 64px 0; }
.logos-sec .t-label { margin-bottom: 28px; display: block; }
.dx { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: center; }
.dx .t-lead { margin-top: 20px; }
.dx.center { display: block; text-align: center; }
.dx.center .t-lead { margin-top: 18px; }
.dx-form { display: flex; gap: 8px; max-width: 760px; margin: 44px auto 0; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); }
.white .dx-form { background: var(--bg); border-color: var(--bg); }
.dx-input { flex: 1; display: flex; align-items: center; padding: 0 18px; font-size: 17px; color: var(--sub); text-align: left; min-width: 0; }
.dx-form .btn { height: 58px; padding: 0 36px; }
.dx.center .t-small { margin-top: 16px; }
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; }
.faq dl { margin: 0; border-top: 1px solid var(--ink); }
.faq dt { font-size: 22px; font-weight: 700; color: var(--ink); padding-top: 28px; letter-spacing: -0.02em; }
.faq dd { margin: 10px 0 0; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); color: var(--text); }

/* 회사소개 */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 72px; }
.facts div { padding-top: 0; }
.facts strong { display: block; font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.facts span { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--sub); }
.ceo { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.ceo .ph { aspect-ratio: 4 / 5; }
.ceo .t-body { margin-top: 20px; }
.ceo .t-h2 { margin-bottom: 36px; }
.ceo .sign { margin-top: 36px; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.hist > li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.hist > li:first-child { border-top: 1px solid var(--ink); }
.hist > li > b { font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.hist ul { display: grid; gap: 18px; }
.hist ul li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.hist ul li em { font-style: normal; font-size: var(--fs-small); font-weight: 700; color: var(--ink); padding-top: 2px; }
.hist ul li p { font-size: var(--fs-body); color: var(--text); }
.news .ph { aspect-ratio: 5 / 4; }
.news h3 { margin-top: 18px; font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.news time { display: block; margin-top: 6px; font-size: var(--fs-label); color: var(--sub); }

/* 서비스 소개 */
.jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.jump a { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.jump b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); }
.jump span { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--text); }
.jump i { display: block; margin-top: 24px; font-style: normal; font-size: var(--fs-label); font-weight: 600; color: var(--ink); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.msg { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.white .msg { border-color: var(--line); }
.msg-h { padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-label); font-weight: 600; color: var(--sub); }
.msg-b { padding: 24px; }
.msg-b strong { display: block; font-size: 19px; line-height: 1.5; color: var(--ink); }
.kv { margin-top: 16px; border-top: 1px solid var(--line); }
.kv li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text); }
.kv li b { color: var(--ink); font-weight: 700; }
.msg .btn { margin-top: 20px; }
.example { margin-top: 14px; font-size: var(--fs-label); color: var(--sub); }
.bar { height: 8px; border-radius: 4px; background: #e4e6ea; margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); }
.prog li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.prog li div { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--text); }
.prog li div b { color: var(--ink); }
.est { display: grid; grid-template-columns: 8fr 4fr; gap: 40px; align-items: start; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line-strong); }
.tabs span { padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs span.on { color: var(--ink); border-bottom-color: var(--ink); }
.picks li { display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.picks li i { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); }
.picks li span { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.picks li b { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.sum { background: var(--bg); border-radius: var(--radius); padding: 32px; }
.sum strong { display: block; margin-top: 6px; font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.sum .t-small { margin-top: 8px; }
.sum hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.sum .form { gap: 12px; }

/* 가격 안내 */
.pr { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.pr-nav { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 0; }
.pr-nav li { display: flex; justify-content: space-between; padding: 10px 24px; font-size: var(--fs-small); color: var(--text); }
.pr-nav li.on { color: var(--ink); font-weight: 700; }
.pr-nav li em { font-style: normal; color: var(--sub); }
.pr-list { display: grid; gap: 32px; }
.pr-cat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 40px 16px; }
.pr-cat-h { display: flex; align-items: center; gap: 12px; padding: 28px 0 24px; border-bottom: 1px solid var(--ink); }
.pr-cat-h h3 { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.pr-cat-h em { font-style: normal; font-size: var(--fs-small); color: var(--sub); }
.pr-cat-h .btn { margin-left: auto; }
.pr-item { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.pr-item:last-child { border-bottom: 0; }
.pr-item h4 { font-size: var(--fs-body); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.pr-item p { margin-top: 8px; font-size: var(--fs-small); color: var(--text); max-width: 680px; }
.pr-item .price { font-size: var(--fs-body); font-weight: 700; color: var(--ink); white-space: nowrap; }
.pr-item .price.ask { color: var(--sub); font-weight: 600; }
.tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--text); letter-spacing: 0; }

/* 패키지 */
.pkg-nav { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pkg-nav span { font-size: 17px; font-weight: 600; color: var(--text); }
.pkg-nav span.on, .pkg-nav a.on { color: var(--ink); font-weight: 700; }
.pkg-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.white .pkg-card { background: var(--white); border-color: var(--line); }
.pkg-card .ph { border-radius: 0; aspect-ratio: 16 / 10; }
.pkg-b { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.pkg-b h3 { font-size: 22px; font-weight: 700; color: var(--ink); }
.pkg-price { margin-top: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pkg-price .was { font-size: var(--fs-small); color: var(--sub); }
.pkg-price .was del { margin-right: 8px; }
.pkg-price .was b { color: var(--ink); }
.pkg-price strong { display: block; margin-top: 4px; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.pkg-price strong small { font-size: 18px; font-weight: 600; margin-left: 2px; }
.pkg-price span { display: block; margin-top: 8px; font-size: var(--fs-label); color: var(--sub); }
.pkg-list { margin-top: 20px; display: grid; gap: 8px; }
.pkg-list li { position: relative; padding-left: 14px; font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
.pkg-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--sub); }
.pkg-b .btn { margin-top: 28px; }
.pkg-group + .pkg-group { margin-top: 0; }
.pkg-card { position: relative; }
.pkg-card.rec { border: 2px solid var(--ink); }   /* 색은 그룹 대표색으로 덮어씀 */
/* 추천 띠: 카드 바로 위에 붙여서, 세 카드의 높이·정렬은 그대로 */
.pkg-group .grid { padding-top: 44px; }
.pkg-card.rec { overflow: visible; }
.pkg-card.rec .ph { border-radius: 0; }
.rec-band { position: absolute; left: -2px; right: -2px; bottom: 100%; padding: 9px 0; border-radius: 8px 8px 0 0; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: 0; }
/* 카드 위 띠: 플랜 이름 · 집행기간. 세 카드 모두 같은 높이에, 가운데는 '추천' + 그룹 대표색 */
.pkg-card { overflow: visible; }
.pkg-card .ph { border-radius: 0; }
.plan-band { position: absolute; left: -1px; right: -1px; bottom: 100%; display: flex; justify-content: center; align-items: baseline; gap: 10px;
             padding: 10px 12px; border-radius: 8px 8px 0 0; background: #e4e6ea; color: var(--ink); font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
.plan-band.rec { left: -2px; right: -2px; }
.plan-band b { font-weight: 700; }
.plan-band em { font-style: normal; font-size: 16px; font-weight: 500; opacity: .85; }
.plan-band i { font-style: normal; font-weight: 700; padding-right: 10px; border-right: 1px solid currentColor; }
.pkg-card .pkg-price { margin-top: 0; }
/* 패키지 첫 화면: 탭이 실버 바탕 맨 아래에 닿게 */
.hero-pkg { padding-bottom: 0; }
.hero-pkg .pkg-nav { margin-top: 72px; border-bottom: 0; }

/* 패키지 탭: 여섯 칸으로 가로 전체에 고르게 */
.pkg-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; }
.pkg-nav span, .pkg-nav a { padding: 22px 8px; text-align: center; font-size: 19px; font-weight: 600; color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pkg-nav span.on, .pkg-nav a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* ---------- 메인: 첫 화면 가운데 정렬 + 포트폴리오 두 줄 흐름 ---------- */
.hero-home { padding-bottom: 72px; text-align: center; }
.hero-home .t-lead { margin-left: auto; margin-right: auto; }
.hero-home .btns { justify-content: center; }

/* 고객사 로고: 두 줄이 서로 반대로 지나감 */
.logos-sec { padding: 72px 0; display: grid; gap: 28px; overflow: hidden; }
.logo-row { overflow: hidden; }
.logo-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: flow-left 140s linear infinite; }   /* 천천히 */
.logo-row.to-right .logo-track { animation-name: flow-right; }
.logo-cell { flex: none; height: 56px; display: flex; align-items: center; }
.logo-cell img { max-height: 40px; max-width: 140px; width: auto; height: auto; }
.logo-cell img.sq { width: 52px; height: 52px; max-height: none; border-radius: 50%; object-fit: cover; }
.logo-cell img.dk { max-height: 44px; padding: 12px 10px; border-radius: 6px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
.flow { display: grid; gap: 16px; overflow: hidden; padding-bottom: 0; }   /* 아래 회색 여백 없이 다음 섹션까지 */
.flow-row { overflow: hidden; }
.flow-track { display: flex; gap: 16px; width: max-content; animation: flow-left 300s linear infinite; }   /* 천천히 */
.flow-row.to-right .flow-track { animation-name: flow-right; }
.flow-tile { flex: none; height: 290px; border-radius: var(--radius); overflow: hidden; background: #e4e6ea; }
.flow-tile img { height: 100%; width: auto; max-width: none; }
@keyframes flow-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@keyframes flow-right { from { transform: translateX(calc(-50% - 8px)); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .flow-track { animation: none; } }

/* ---------- 서비스 소개: 카카오톡 화면 ---------- */
.split-r { grid-template-columns: 7fr 5fr; align-items: center; }
.phone { width: 360px; max-width: 100%; margin: 0 auto; padding: 12px; border-radius: 48px; background: #1d1f23; }
.screen { height: 680px; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; font-size: 14px; line-height: 1.55; color: #191919; letter-spacing: -0.01em; }
.kk-status { display: flex; justify-content: space-between; padding: 14px 26px 4px; font-size: 13px; font-weight: 700; color: #191919; }
.kk { background: #bacee0; }
.kk-top { display: flex; align-items: center; gap: 12px; padding: 10px 18px 12px; font-size: 17px; }
.kk-top b { flex: 1; font-weight: 700; }
.kk-back { font-size: 26px; line-height: 1; }
.kk-menu { font-size: 20px; }
.kk-room { flex: 1; padding: 6px 14px; display: flex; flex-direction: column; gap: 12px; }
.kk-date { align-self: center; padding: 4px 12px; border-radius: 12px; background: rgba(0, 0, 0, .14); color: #fff; font-size: 12px; }
.kk-msg { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.kk-ava { width: 40px; height: 40px; border-radius: 15px; background: #fff; display: grid; place-items: center; }
.kk-ava svg { width: 30px; height: 18px; }
.kk-name { display: block; margin-bottom: 4px; font-size: 13px; color: #3b4048; }
.kk-row { display: flex; align-items: flex-end; gap: 6px; }
.kk-bubble { width: 240px; background: #fff; border-radius: 4px 16px 16px 16px; overflow: hidden; }
.kk-bubble-h { padding: 10px 14px; background: #fee500; font-size: 13px; font-weight: 700; color: #191919; }
.kk-bubble-b { padding: 14px; font-size: 14px; line-height: 1.6; color: #191919; }
.kk-btn { margin: 0 12px 12px; padding: 10px; border-radius: 6px; background: #f1f1f1; text-align: center; font-size: 13px; font-weight: 500; color: #191919; }
.kk-time { flex: none; font-size: 11px; color: #4f5965; }
.kk-input { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 18px 26px; background: #fff; font-size: 14px; color: #9a9a9a; }
.kk-input i { font-style: normal; color: #191919; }
.kb { background: #fff; }
.kk-status.light { background: #fff; }
.kb-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid #ececec; }
.kb-top div { flex: 1; text-align: center; min-width: 0; }
.kb-top b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-top small { display: block; font-size: 11px; color: #8a8a8a; }
.kb-x, .kb-more { font-size: 16px; width: 20px; text-align: center; }
.kb-body { flex: 1; padding: 20px 20px 0; overflow: hidden; }
.kb-store { display: block; font-size: 13px; color: #6b6f76; }
.kb-title { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; color: #15171a; }
.kb-date { display: block; margin-top: 2px; font-size: 13px; color: #6b6f76; }
.kb-body .prog { margin-top: 14px; border-top: 1px solid #ececec; }
.kb-body .prog li { padding: 14px 0; border-bottom: 1px solid #ececec; }
.kb-body .prog li div { font-size: 14px; }
.kb-sub { display: block; margin-top: 18px; font-size: 13px; font-weight: 700; color: #15171a; }
.kb-posts li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ececec; font-size: 14px; }
.kb-posts i { font-style: normal; color: #8a8a8a; }
.kb-nav { display: flex; justify-content: space-around; padding: 12px 0 24px; border-top: 1px solid #ececec; font-size: 18px; color: #6b6f76; }
.phone + .example { text-align: center; }
.split-c { grid-template-columns: 5fr 7fr; align-items: center; }

/* 결과 보고서 — 기존 사이트 목업 (사장님 전용 결과 페이지) */
.rp { position: relative; background: #fff; }
.rp-body { padding: 8px 18px; font-size: 13.5px; color: #111; }
.rp-body h5 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.rp-s { margin-top: 2px; font-size: 13px; color: #777; }
.rp-s em { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; background: #111; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; }
.rp-seg { display: flex; gap: 6px; margin-top: 12px; }
.rp-seg span { padding: 6px 14px; border-radius: 6px; background: #f1f1f1; color: #444; font-size: 12.5px; font-weight: 700; }
.rp-seg span.on { background: #111; color: #fff; }
.rp-card { margin-top: 10px; padding: 12px 13px; border: 1px solid #e6e6e6; border-radius: 8px; }
.rp-card > b { font-size: 14px; font-weight: 700; }
.rp-card > b em { font-style: normal; }
.rp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed #e6e6e6; }
.rp-card > b + .rp-row, .rp-row.first, .rp-row.nb { border-top: 0; }
.rp-row.nb { margin-top: 6px; }
.rp-row a { color: #111; text-decoration: underline; text-underline-offset: 2px; }
.rp-row span:last-child { color: #777; font-size: 12px; }
.rp-bar { height: 7px; margin-top: 4px; border-radius: 4px; background: #eee; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--egg); border-radius: 4px; }
.rp-rank { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 10px; }
.rp-rank i { flex: 1; background: #111; border-radius: 2px 2px 0 0; }
.rp-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 30px; background: #fff; border-top: 2px solid #111; border-radius: 16px 16px 0 0; }
.rp-sheet small { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--egg); font-size: 12px; font-weight: 700; color: #111; }
.rp-sheet > b { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; color: #111; }
.rp-doc { margin-top: 10px; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 8px; font-size: 13px; color: #111; }
.rp-doc div { display: flex; justify-content: space-between; padding: 3px 0; }
.rp-open { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 10px; border-radius: 6px; background: #111; color: #fff; font-size: 13.5px; font-weight: 700; }
.rp-stamp { position: absolute; right: 18px; top: 16px; padding: 4px 8px; border: 2px solid #111; border-radius: 4px; font-size: 12px; font-weight: 700; color: #111; transform: rotate(-8deg); }

/* 서비스 소개 첫 화면: 카카오톡 대화 모션 */
.chat { background: #bacee0; border-radius: var(--radius); overflow: hidden; font-size: 15px; line-height: 1.55; color: #191919; }
.chat-h { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px; background: rgba(255, 255, 255, .35); }
.chat-h b { font-size: 16px; }
.chat-h span { font-size: 13px; color: #4f5965; }
.chat-b { display: flex; flex-direction: column; gap: 12px; padding: 20px; min-height: 420px; }
.cm { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.cm.r { grid-template-columns: 1fr; justify-items: end; }
.ava-gap { width: 40px; }
.cb { justify-self: start; max-width: 300px; padding: 10px 14px; background: #fff; border-radius: 4px 16px 16px 16px; }
.cb.me { background: #fee500; border-radius: 16px 4px 16px 16px; }
.cm.r .cb { justify-self: end; }
.cb.alim { padding: 0; overflow: hidden; width: 280px; }
.m1, .m2, .m3, .m4 { animation: 10s ease-out infinite both; }
.m1 { animation-name: chat1; } .m2 { animation-name: chat2; } .m3 { animation-name: chat3; } .m4 { animation-name: chat4; }
@keyframes chat1 { 0%, 3% { opacity: 0; transform: translateY(10px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat2 { 0%, 15% { opacity: 0; transform: translateY(10px); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat3 { 0%, 35% { opacity: 0; transform: translateY(10px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat4 { 0%, 52% { opacity: 0; transform: translateY(10px); } 57%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m1, .m2, .m3, .m4 { animation: none; } }
.hero .hero-grid + .jump { margin-top: 72px; }

/* 오프라인 광고 첫 화면: 매체 스튜디오 사진 한 장씩 넘김 */
.slides { margin: 0; }
.slides-img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #e9ebee; }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide 36s infinite both; }
.slide:first-child { opacity: 1; }
@keyframes slide { 0% { opacity: 0; } 1.5%, 8.3% { opacity: 1; } 9.8%, 100% { opacity: 0; } }
.slides figcaption { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.slides-caps { position: relative; height: 30px; flex: 1; }
.slide-cap { position: absolute; left: 0; top: 0; font-size: 20px; font-weight: 700; color: var(--ink); opacity: 0; animation: slide 36s infinite both; }
.slide-cap:first-child { opacity: 1; }
.slides figcaption > span { font-size: var(--fs-label); color: var(--sub); }
.slides-list { margin-top: 8px; font-size: var(--fs-label); color: var(--sub); }
@media (prefers-reduced-motion: reduce) { .slide, .slide-cap { animation: none; } }

/* ---------- 오프라인 광고: 매체지도 ---------- */
.mapui { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.white .mapui { border-color: var(--line-strong); }
.mapui-top { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.mapui-top span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.mapui-top em { margin-left: 12px; font-style: normal; font-size: var(--fs-label); color: var(--sub); }
.mapui-body { display: grid; grid-template-columns: 1fr 400px; }
.map { position: relative; height: 480px; overflow: hidden; background: #e8e6e1; }
.map .tile { position: absolute; width: 256px; height: 256px; max-width: none; }
.pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; }
.pin.sel { width: 32px; height: 32px; margin: -16px 0 0 -16px; outline: 3px solid var(--ink); }
.clu { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 3px solid #fff; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 700; }
.map-side { border-left: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.map-search { height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); display: flex; align-items: center; font-size: var(--fs-small); color: var(--ink); }
.map-info { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; row-gap: 2px; align-items: start; }
.map-info .ph { grid-row: 1 / span 5; aspect-ratio: 1 / 1; }
.map-tag { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.map-tag i, .map-cart li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.map-info strong { font-size: 18px; font-weight: 700; color: var(--ink); }
.map-info small { font-size: 14px; color: var(--sub); }
.map-info em { font-style: normal; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.map-info .btn { grid-column: 1 / -1; margin-top: 14px; }
.map-cart { border-top: 1px solid var(--ink); padding-top: 14px; }
.map-cart-h { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.map-cart-h b { color: var(--ink); }
.map-cart ul { margin-top: 8px; }
.map-cart li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.map-cart li span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.map-cart li b { white-space: nowrap; color: var(--ink); }
.map-total { display: flex; justify-content: space-between; padding-top: 14px; font-size: var(--fs-small); }
.map-total b { font-size: 20px; color: var(--ink); }
.map-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; }
.map-foot .example { margin: 0; }

/* 매체 카드 (스튜디오 사진 + 자세히 보기) */
.media { row-gap: 24px; }
.media-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.media-card .ph { border-radius: 0; aspect-ratio: 4 / 3; }
.media-b { padding: 18px 20px 20px; }
.media-b b { display: block; font-size: 18px; font-weight: 700; color: var(--ink); }
.media-b span { display: block; margin-top: 6px; font-size: var(--fs-label); font-weight: 600; color: var(--sub); }
.media-card:hover .media-b span { color: var(--ink); }
.pkg-group .t-h2 { font-size: 32px; margin-bottom: 32px; }

/* =========================================================
   5차 수정 (2026-11-13)
========================================================= */
/* 메인 · 서비스 바로가기: 설명 없이 작게 한 줄 */
.sec-quick { padding: 88px 0; }
.quick .t-h2 { font-size: 32px; }
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 32px; }
.quick-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 140px; padding: 24px 22px; border-radius: var(--radius); background: var(--bg); }
.quick-card b { font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.quick-card span { font-size: var(--fs-small); font-weight: 600; color: var(--sub); }
.quick-card:hover span { color: var(--ink); }

/* 메인 · 자주 묻는 질문: 제목 위, 질문 한 단 */
.faq.stack { display: block; }
.faq.stack dl { margin-top: 40px; }

/* 서비스 소개 · 휴대폰 옆 칸에 제목 → 설명 → 카드 */
.split-c, .split-r { align-items: center; }
.split .sec-head { margin-bottom: 36px; }
.split .grid.g2 .card { padding: 30px; }

/* 서비스 소개 첫 화면 · 바로가기 2개를 설명 아래에 */
.jump.two { grid-template-columns: 1fr 1fr; margin-top: 40px; }

/* 서비스 소개 · 예상 견적: 가운데 정렬 + 포인트 */
.center-head { text-align: center; }
.center-head .sec-head { justify-content: center; }
.point { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 20px; font-weight: 700; color: var(--ink); }
.point i { width: 10px; height: 10px; border-radius: 50%; background: var(--egg); }

/* =========================================================
   6차 수정
========================================================= */
/* 깜빡이는 점 (무료 진단 메뉴와 같은 움직임) */
.blink-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--alert); animation: dx-blink 1.4s ease-in-out infinite; }
.blink-dot.yellow { background: var(--egg); }
@media (prefers-reduced-motion: reduce) { .blink-dot { animation: none; } }
.hero-tag { display: inline-flex; align-items: center; gap: 14px; }

/* 메인 · 무료 진단: 첫 화면 버튼 바로 아래 흰 판 */
.dx-hero { max-width: 1000px; margin: 72px auto 0; padding: 52px 48px 44px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.dx-hero .t-h2 { font-size: 34px; }
.dx-hero .t-lead { font-size: 21px; }
.dx-hero .dx-form { margin-top: 32px; }
.logos-sec.white { background: var(--white); }

/* 서비스 소개 · 휴대폰 칸은 고정 폭, 글 칸을 넓게 */
.split-c { grid-template-columns: 400px 1fr; }
.split-r { grid-template-columns: 1fr 400px; }
.jump strong { font-weight: 700; color: var(--ink); }

/* 패키지 · 탭 링크, 그룹 제목 가운데, 상담 버튼 높이 맞춤 */
.pkg-nav a { text-align: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pkg-group .t-h2 { text-align: center; }
.pkg-b .pkg-list { margin-bottom: 28px; }
.pkg-b .btn { margin-top: auto; }

/* =========================================================
   7차 수정
========================================================= */
/* 메인 첫 화면: 버튼 없이 설명 → 무료 진단 판 */
.hero-home .dx-hero { margin-top: 56px; }
.dot-title { display: inline-flex; align-items: center; gap: 14px; }
.blink-dot.green { background: #03c75a; }   /* 네이버 초록 */

/* 메인 · 서비스 바로가기: 포트폴리오와 간격을 넉넉히, 3칸 × 2줄 가로형 */
.sec-quick { padding: 120px 0; }
.quick .t-h2 { font-size: var(--fs-h2); }
.quick-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.quick-card { flex-direction: row; align-items: center; min-height: 104px; padding: 28px 32px; gap: 16px; }
.quick-card b { font-size: 22px; }
.quick-card span { flex: none; }