/* ═══════════════════════════════════════════════════════════════
   도다맵 브랜드 / 커리큘럼 / DQGS 소개 공용 스타일

   브랜드 색 = 네이비 · 오렌지 · 옐로우.
   면은 네이비에서 연한 하늘색으로 흐르는 그라데이션으로 깔고,
   강조에만 오렌지를 조금 쓴다. 세 페이지가 같은 토큰을 쓰므로
   색을 바꿀 때는 여기 :root 블록만 고치면 된다.
   ═══════════════════════════════════════════════════════════════ */
.dq-page {
    --dq-deep: #12315f;
    --dq-mid: #2f6fd0;
    --dq-sky: #7db6ef;
    --dq-soft: #c5ddf7;
    --dq-bg: #f2f7fd;
    --dq-accent: #ef8b1f;
    --dq-accent-soft: #ffd166;
    --dq-ink: #1b2436;
    --dq-muted: #6b7280;
    --dq-line: #dfe9f5;

    color: var(--dq-ink);
    font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dq-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.dq-section {
    padding: 110px 0;
}

.dq-section.is-tinted {
    background: var(--dq-bg);
}

.dq-section.is-anchored {
    scroll-margin-top: 130px;
}

.dq-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--dq-mid);
    margin-bottom: 16px;
}

.dq-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.28;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.dq-title em {
    font-style: normal;
    color: var(--dq-mid);
}

.dq-title mark {
    background: none;
    color: var(--dq-accent);
}

.dq-lead {
    font-size: 18px;
    line-height: 1.85;
    color: #4b5563;
    max-width: 820px;
}

.dq-lead strong {
    color: var(--dq-deep);
    font-weight: 700;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.dq-hero {
    background: linear-gradient(160deg, #0d2547 0%, #1b4a8c 55%, #3f86d6 100%);
    color: #fff;
    padding: 190px 0 110px;
    position: relative;
    overflow: hidden;
}

.dq-hero::after {
    content: '?';
    position: absolute;
    right: -30px;
    bottom: -120px;
    font-size: 460px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.dq-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
}

.dq-hero-badge {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 26px;
}

.dq-hero-title {
    font-size: 60px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin-bottom: 10px;
}

.dq-hero-title span {
    color: var(--dq-accent-soft);
}

.dq-hero-sub {
    font-size: 22px;
    font-weight: 600;
    color: #cfe2f8;
    margin-bottom: 30px;
}

.dq-hero-desc {
    font-size: 17px;
    line-height: 1.9;
    color: #dce9f8;
    max-width: 720px;
}

.dq-hero-desc b {
    color: var(--dq-accent-soft);
}

.dq-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 42px;
}

.dq-hero-stat {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 16px 24px;
}

.dq-hero-stat b {
    display: block;
    font-size: 28px;
    font-weight: 800;
}

.dq-hero-stat span {
    font-size: 13px;
    color: #c4d9f2;
}

/* ── 섹션 바로가기 (커리큘럼 상단 고정 탭) ─────────────────────── */
.dq-anchor-nav {
    position: sticky;
    top: 80px;
    z-index: 900;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dq-line);
}

.dq-anchor-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 0;
    scrollbar-width: none;
    /* 자리가 남으면 가운데로 모으고, 좁아져 넘칠 때는 왼쪽부터 보이게 둔다.
       safe 를 빼면 넘칠 때 첫 버튼이 잘려 스크롤로도 못 잡는다. */
    justify-content: center;
    justify-content: safe center;
}

.dq-anchor-track::-webkit-scrollbar {
    display: none;
}

.dq-anchor-btn {
    flex: 0 0 auto;
    border: 1px solid var(--dq-line);
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dq-deep);
    background: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dq-anchor-btn:hover,
.dq-anchor-btn.is-active {
    background: var(--dq-deep);
    border-color: var(--dq-deep);
    color: #fff;
}

/* ── 철학 ─────────────────────────────────────────────────────── */
.dq-philosophy-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 54px;
}

.dq-ask-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
}

.dq-ask-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--dq-line);
    font-size: 19px;
    font-weight: 700;
    color: var(--dq-deep);
}

.dq-ask-item:last-child {
    border-bottom: none;
}

.dq-ask-num {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dq-soft);
    color: var(--dq-deep);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.dq-oecd {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 22px;
    padding: 34px;
}

.dq-oecd-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dq-deep);
    margin-bottom: 6px;
}

.dq-oecd-sub {
    font-size: 13.5px;
    color: var(--dq-muted);
    margin-bottom: 22px;
}

.dq-oecd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px dashed var(--dq-line);
}

.dq-oecd-item:last-of-type {
    border-bottom: none;
}

.dq-oecd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dq-mid);
    flex: 0 0 8px;
}

.dq-oecd-name {
    font-size: 15.5px;
    font-weight: 700;
}

.dq-oecd-en {
    font-size: 12.5px;
    color: var(--dq-muted);
    margin-left: auto;
}

.dq-oecd-note {
    margin-top: 22px;
    background: var(--dq-bg);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #33455c;
}

.dq-oecd-note b {
    color: var(--dq-deep);
}

/* ── 심볼 ─────────────────────────────────────────────────────── */
/* 제목 바로 아래 심볼 한 컷. 세 카드가 무엇을 설명하는지 먼저 보여준다. */
.dq-symbol-mark {
    display: flex;
    justify-content: center;
    margin: 30px 0 6px;
}

.dq-symbol-mark img {
    width: 132px;
    height: auto;
}

/* 심볼이 담은 세 단계를 영문 설명과 함께 보여주는 마무리 컷 */
.dq-symbol-explained {
    display: flex;
    justify-content: center;
    margin-top: 46px;
}

/* 원본이 흰 배경 이미지라, 카드로 감싸야 배경 위에서 판처럼 떠 보이지 않는다 */
.dq-symbol-explained img {
    width: 100%;
    max-width: 420px;
    height: auto;
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 20px;
    padding: 26px 30px;
    box-shadow: 0 12px 30px rgba(18, 49, 95, 0.08);
}

.dq-symbol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 54px;
}

.dq-symbol {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 22px;
    padding: 38px 30px;
    text-align: center;
}

.dq-symbol-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: var(--dq-bg);
    color: var(--dq-mid);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dq-symbol-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.dq-symbol-role {
    font-size: 14px;
    font-weight: 700;
    color: var(--dq-accent);
    margin-bottom: 14px;
}

.dq-symbol-desc {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--dq-muted);
    word-break: keep-all;
}

/* ── 성장 구조 (Q → M → C) ────────────────────────────────────── */
.dq-qmc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 54px;
}

.dq-qmc-card {
    position: relative;
    border-radius: 22px;
    padding: 38px 32px;
    background: #fff;
    border: 2px solid var(--dq-line);
}

.dq-qmc-card:nth-child(1) { border-color: var(--dq-soft); }
.dq-qmc-card:nth-child(2) { border-color: var(--dq-sky); }
.dq-qmc-card:nth-child(3) { border-color: var(--dq-mid); }

.dq-qmc-step {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--dq-mid);
    margin-bottom: 12px;
}

.dq-qmc-name {
    font-size: 30px;
    font-weight: 900;
    color: var(--dq-deep);
    margin-bottom: 6px;
}

.dq-qmc-ko {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
}

.dq-qmc-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--dq-muted);
    word-break: keep-all;
}

/* 어두운 면 위에 얹는 변형 (DQGS 소개 히어로) — 배경 '?' 워터마크 위로 올린다 */
.dq-hero .dq-qmc {
    position: relative;
    z-index: 1;
}

.is-on-dark .dq-qmc-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.is-on-dark .dq-qmc-step { color: var(--dq-accent-soft); }
.is-on-dark .dq-qmc-name { color: #fff; }
.is-on-dark .dq-qmc-ko { color: #dbe8f8; }
.is-on-dark .dq-qmc-desc { color: #b9cee8; }

/* ── 흐름 (수업/사고) ─────────────────────────────────────────── */
.dq-flow-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 54px;
}

.dq-flow {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 22px;
    padding: 32px;
}

.dq-flow-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dq-deep);
    margin-bottom: 20px;
}

.dq-flow-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dq-flow-node {
    background: var(--dq-bg);
    border: 1px solid var(--dq-line);
    border-radius: 12px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dq-deep);
}

.dq-flow-node small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--dq-muted);
    margin-top: 2px;
}

.dq-flow-arrow {
    color: var(--dq-accent);
    font-weight: 800;
}

/* ── 실제 수업 4단계 ──────────────────────────────────────────── */
.dq-lesson {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 54px;
}

.dq-lesson-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 22px;
    padding: 34px 28px 30px;
}

/* 카드 사이 화살표. 세로로 접히면 아래를 가리키게 돌린다 */
.dq-lesson-step:not(:last-child)::after {
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dq-accent);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.dq-lesson-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--dq-deep);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 18px;
}

.dq-lesson-name {
    font-size: 21px;
    font-weight: 800;
    color: var(--dq-deep);
    margin-bottom: 12px;
}

.dq-lesson-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #4b5563;
    word-break: keep-all;
}

.dq-lesson-desc + .dq-lesson-desc {
    margin-top: 10px;
}

/* 수업에서 실제로 던지는 질문 예시. 본문과 눈에 띄게 구분한다. */
.dq-lesson-quotes {
    list-style: none;
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--dq-bg);
    border-left: 3px solid var(--dq-sky);
    border-radius: 0 10px 10px 0;
}

.dq-lesson-quotes li {
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--dq-deep);
    word-break: keep-all;
}

.dq-lesson-quotes li + li {
    margin-top: 6px;
}

/* ── 수업 구성 ────────────────────────────────────────────────── */
.dq-compose {
    margin-top: 34px;
    border: 1px solid var(--dq-line);
    border-radius: 20px;
    padding: 0 26px 26px;
    background: #fff;
}

.dq-compose-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-50%);
    background: var(--dq-deep);
    color: #fff;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 17px;
    font-weight: 800;
}

.dq-compose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.dq-compose-item {
    text-align: center;
    padding: 4px 18px;
}

.dq-compose-item + .dq-compose-item {
    border-left: 1px dashed var(--dq-line);
}

.dq-compose-icon {
    font-size: 30px;
    color: var(--dq-mid);
    margin-bottom: 14px;
}

.dq-compose-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--dq-deep);
    margin-bottom: 10px;
}

.dq-compose-desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: #4b5563;
    word-break: keep-all;
}

@media (max-width: 720px) {
    .dq-compose-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dq-compose-item + .dq-compose-item {
        border-left: none;
        border-top: 1px dashed var(--dq-line);
        padding-top: 24px;
    }
}

.dq-lesson-note {
    margin-top: 34px;
    background: linear-gradient(120deg, var(--dq-deep), var(--dq-mid));
    color: #fff;
    border-radius: 20px;
    padding: 30px 34px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.dq-lesson-note i {
    font-size: 26px;
    color: var(--dq-accent-soft);
}

.dq-lesson-note b {
    font-size: 21px;
    font-weight: 800;
}

.dq-lesson-note span {
    font-size: 15.5px;
    color: #d6e5f7;
}

/* ── 수업 프로그램(반 편성) ───────────────────────────────────── */
.dq-program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.dq-program {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}

.dq-program-no {
    font-size: 13px;
    font-weight: 800;
    color: var(--dq-sky);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.dq-program-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--dq-deep);
    line-height: 1.45;
    margin-bottom: 6px;
    word-break: keep-all;
}

.dq-program-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--dq-accent);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dq-line);
}

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

.dq-program-list li {
    position: relative;
    padding: 5px 0 5px 15px;
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
    word-break: keep-all;
}

.dq-program-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dq-sky);
}

/* ── 단계별 커리큘럼 스트립 ───────────────────────────────────── */
.dq-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-top: 46px;
}

.dq-strip-item {
    display: block;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.dq-strip-item:hover {
    transform: translateY(-4px);
}

.dq-strip-name {
    border-radius: 12px;
    padding: 13px 8px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.dq-strip-keyword {
    font-size: 14px;
    font-weight: 700;
    color: var(--dq-ink);
    line-height: 1.6;
    word-break: keep-all;
}

.dq-strip-grade {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dq-muted);
    margin-top: 6px;
}

/* ── 6대 사고영역 ─────────────────────────────────────────────── */
.dq-domain-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 50px;
}

.dq-domain {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
}

/* 칩 배경만 영역 색으로 칠하고 글자는 잉크색으로 고정한다.
   영역 색 뒤로 갈수록 밝아져서 글자에 그대로 쓰면 읽히지 않는다. */
.dq-domain-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: var(--dq-mid);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dq-domain-name {
    font-size: 19px;
    font-weight: 900;
    color: var(--dq-deep);
    margin-bottom: 4px;
}

.dq-domain-plain {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dq-accent);
    margin-bottom: 12px;
}

.dq-domain-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--dq-muted);
    word-break: keep-all;
}

/* ── 로드맵 표 ────────────────────────────────────────────────── */
.dq-table-scroll {
    margin-top: 54px;
    overflow-x: auto;
    border: 1px solid var(--dq-line);
    border-radius: 18px;
    background: #fff;
}

.dq-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.dq-table th {
    background: var(--dq-deep);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 16px 18px;
    text-align: left;
    white-space: nowrap;
}

.dq-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--dq-line);
    font-size: 14.5px;
    color: #3c465a;
}

.dq-table tr:last-child td {
    border-bottom: none;
}

.dq-table tr:nth-child(even) td {
    background: #fbfdff;
}

.dq-table-stage {
    font-weight: 800;
    color: var(--dq-deep);
}

.dq-table-stage small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dq-muted);
}

.dq-table-q {
    font-weight: 700;
    color: var(--dq-mid);
    white-space: nowrap;
}

/* ── 단계 상세 카드 ───────────────────────────────────────────── */
.dq-stage {
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 22px;
    scroll-margin-top: 150px;
}

.dq-stage-head {
    background: var(--dq-deep);
    color: #fff;
    padding: 26px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* "STAGE" 와 숫자를 같은 크기로 넣으면 46px 안에 글자가 안 들어간다.
   라벨은 작게 위에, 숫자는 크게 아래로 나눠 담는다. */
.dq-stage-order {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dq-stage-order small {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.72);
}

.dq-stage-order b {
    margin-top: 3px;
    font-size: 22px;
    font-weight: 900;
}

.dq-stage-name {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* 헤드 배경이 단계 색으로 바뀌므로 고정 색 대신 반투명 흰색을 쓴다 */
.dq-stage-title {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 2px;
}

.dq-stage-tags {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dq-stage-tag {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
}

.dq-stage-tag b {
    font-weight: 700;
    margin-left: 5px;
}

.dq-stage-body {
    padding: 28px 32px 32px;
}

.dq-stage-desc {
    font-size: 15.5px;
    line-height: 1.8;
    color: #3f4d63;
    background: var(--dq-bg);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 26px;
}

.dq-qcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.dq-qcard {
    border: 1px solid var(--dq-line);
    border-radius: 16px;
    padding: 20px;
    background: #fbfdff;
}

.dq-qcard-code {
    display: inline-block;
    background: var(--dq-mid);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 9px;
    margin-bottom: 10px;
}

.dq-qcard-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--dq-deep);
    margin-bottom: 8px;
}

.dq-qcard-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: #445;
    word-break: keep-all;
}

.dq-qcard-all {
    grid-column: 1 / -1;
    border: 1px dashed var(--dq-mid);
    border-radius: 16px;
    padding: 22px;
    background: var(--dq-bg);
    font-size: 15px;
    line-height: 1.8;
    color: #33455c;
}

.dq-stage-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dq-col-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--dq-deep);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--dq-soft);
}

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

.dq-col-list li {
    position: relative;
    padding: 5px 0 5px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
    word-break: keep-all;
}

.dq-col-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dq-mid);
}

.dq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dq-chip {
    background: var(--dq-bg);
    border: 1px solid var(--dq-line);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dq-deep);
}

/* ── 성장 레포트 소개 ─────────────────────────────────────────── */
.dq-report {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    margin-top: 50px;
}

.dq-report-quote {
    background: linear-gradient(140deg, var(--dq-deep), var(--dq-mid));
    color: #fff;
    border-radius: 24px;
    padding: 46px 42px;
}

.dq-report-quote b {
    display: block;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 14px;
}

.dq-report-quote span {
    font-size: 16px;
    line-height: 1.9;
    color: #d3e3f7;
}

/* 리포트 실물 미리보기 — 말로 설명한 항목을 바로 눈으로 확인시킨다 */
/* 리포트 안의 글씨가 작아서, 위 블럭과 같은 너비까지 키운다. */
.dq-report-preview {
    margin: 48px 0 0;
    text-align: center;
}

.dq-report-preview button {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.dq-report-preview img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--dq-line);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(18, 49, 95, 0.12);
    transition: transform 0.25s, box-shadow 0.25s;
}

.dq-report-preview button:hover img {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(18, 49, 95, 0.2);
}

.dq-report-preview figcaption {
    margin-top: 16px;
    font-size: 14px;
    color: var(--dq-muted);
}

.dq-report-preview figcaption i {
    color: var(--dq-accent);
    margin-right: 5px;
}

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

.dq-report-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px dashed var(--dq-line);
    font-size: 16px;
    line-height: 1.65;
    color: #3f4d63;
    word-break: keep-all;
}

.dq-report-list li:last-child {
    border-bottom: none;
}

.dq-report-list i {
    color: var(--dq-accent);
    margin-top: 4px;
}

.dq-report-list b {
    color: var(--dq-deep);
}

/* ── DQGS 란 + 특허증 ─────────────────────────────────────────── */
/* 설명 글은 어차피 한 줄 길이가 정해져 있어 왼쪽 절반만 쓴다.
   비는 오른쪽을 특허증이 채운다. 카드로 감싸지 않는다. */
.dq-about {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 420px);
    gap: 60px;
    align-items: center;
}

/* 증서는 그 자체로 이미지다. 버튼 껍데기는 지운다. */
.dq-patent-figure {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    cursor: zoom-in;
    text-align: center;
}

.dq-patent-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(18, 49, 95, 0.18);
    transition: transform 0.25s, box-shadow 0.25s;
}

.dq-patent-figure:hover img {
    transform: translateY(-4px);
    box-shadow: 0 24px 54px rgba(18, 49, 95, 0.24);
}

.dq-patent-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dq-muted);
}

.dq-patent-hint i {
    color: var(--dq-accent);
}

/* ── 특허증 크게 보기 ─────────────────────────────────────────── */
.dq-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    background: rgba(9, 24, 46, 0.86);
    overflow-y: auto;
    padding: 60px 20px;
    -webkit-overflow-scrolling: touch;
}

/* 증서와 설명이 한 화면에 같이 들어와야 한다 — 스크롤해야 설명이 보이면
   "이미지 + 설명"이 아니라 그냥 이미지 뷰어가 된다. */
.dq-lightbox.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dq-lightbox-inner {
    max-width: 720px;
    width: 100%;
    margin: auto;
}

/* 가로로 긴 이미지(리포트 예시)는 세로 증서보다 넓게 잡아야 글씨가 읽힌다.
   화면 높이에 맞추면 페이지에 박힌 것보다 오히려 작아지므로,
   여기서는 너비를 키우고 넘치면 세로로 스크롤한다. */
.dq-lightbox.is-wide .dq-lightbox-inner {
    max-width: 1500px;
}

.dq-lightbox.is-wide .dq-lightbox-inner img {
    max-height: none;
    width: 100%;
}

.dq-lightbox-inner img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 230px);
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.dq-lightbox-desc {
    margin: 22px auto 0;
    font-size: 16px;
    line-height: 1.85;
    color: #e6eefb;
    text-align: center;
    word-break: keep-all;
}

.dq-lightbox-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.dq-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ── 질문 성장 시스템 ─────────────────────────────────────────── */
/* 왼쪽에 아이 사진, 오른쪽에 다섯 단계. 단계는 세로로 이어져야
   "이 순서로 쌓인다"가 읽히므로 가로 그리드로 풀지 않는다. */
.dq-qgs {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: 46px;
    align-items: start;
    margin-top: 46px;
}

.dq-qgs-visual {
    position: sticky;
    top: 120px;
}

.dq-qgs-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(18, 49, 95, 0.16);
}

.dq-qgs-caption {
    margin-top: 18px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--dq-muted);
    word-break: keep-all;
}

.dq-qgs-caption b {
    color: var(--dq-deep);
}

.dq-qgs-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: qgs;
}

.dq-qgs-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--dq-line);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 6px 18px rgba(18, 49, 95, 0.06);
}

/* 단계 사이를 잇는 화살촉 */
.dq-qgs-step:not(:last-child) {
    margin-bottom: 34px;
}

.dq-qgs-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 48px;
    bottom: -26px;
    width: 16px;
    height: 16px;
    border-right: 3px solid var(--dq-sky);
    border-bottom: 3px solid var(--dq-sky);
    transform: translateX(-50%) rotate(45deg);
}

.dq-qgs-step.is-patent {
    border-color: var(--dq-accent);
    box-shadow: 0 10px 26px rgba(239, 139, 31, 0.18);
}

.dq-qgs-no {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dq-bg);
    color: var(--dq-mid);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dq-qgs-step.is-patent .dq-qgs-no {
    background: var(--dq-accent);
    color: #fff;
}

.dq-qgs-body b {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--dq-deep);
    margin-bottom: 7px;
}

.dq-qgs-body p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: #4b5563;
    word-break: keep-all;
}

.dq-qgs-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--dq-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}

/* ── CTA ──────────────────────────────────────────────────────── */
.dq-cta {
    background: linear-gradient(150deg, #0d2547 0%, #1b4a8c 100%);
    color: #fff;
    padding: 92px 0;
    text-align: center;
}

.dq-cta-title {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 18px;
}

.dq-cta-title span {
    color: var(--dq-accent-soft);
}

.dq-cta-desc {
    font-size: 17px;
    line-height: 1.9;
    color: #cfe0f5;
    margin-bottom: 38px;
}

.dq-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.dq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 16px 38px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.dq-cta-btn:hover {
    transform: translateY(-2px);
}

.dq-cta-btn.is-primary {
    background: var(--dq-accent);
    color: #fff;
}

.dq-cta-btn.is-ghost {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .dq-domain-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dq-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .dq-philosophy-grid,
    .dq-flow-wrap,
    .dq-report {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .dq-about {
        gap: 38px;
    }

    .dq-symbol-grid,
    .dq-qmc,
    .dq-qcards,
    .dq-stage-cols,
    .dq-lesson,
    .dq-program-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dq-lesson-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .dq-container {
        padding: 0 20px;
    }

    .dq-section {
        padding: 72px 0;
    }

    .dq-hero {
        padding: 150px 0 80px;
    }

    .dq-hero-title {
        font-size: 38px;
    }

    .dq-hero-sub {
        font-size: 18px;
    }

    .dq-title {
        font-size: 30px;
    }

    .dq-lead,
    .dq-hero-desc {
        font-size: 16px;
    }

    .dq-anchor-nav {
        top: 70px;
    }

    .dq-anchor-btn {
        padding: 9px 18px;
        font-size: 14px;
    }

    .dq-symbol-grid,
    .dq-qmc,
    .dq-qcards,
    .dq-stage-cols,
    .dq-lesson,
    .dq-program-grid {
        grid-template-columns: 1fr;
    }

    .dq-domain-grid,
    .dq-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .dq-about {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .dq-patent-figure {
        max-width: 420px;
        margin: 0 auto;
    }

    .dq-lightbox {
        padding: 56px 14px 40px;
    }

    .dq-qgs {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .dq-qgs-visual {
        position: static;
    }

    .dq-qgs-step {
        padding: 20px;
        gap: 16px;
    }

    .dq-stage-head {
        padding: 20px;
    }

    .dq-stage-tags {
        margin-left: 0;
        width: 100%;
    }

    .dq-stage-body {
        padding: 22px 20px 26px;
    }

    .dq-report-quote {
        padding: 34px 26px;
    }

    .dq-report-quote b {
        font-size: 22px;
    }

    .dq-cta-title {
        font-size: 27px;
    }
}