/* =====================================================
   와와학습코칭센터
   센터 상세페이지
===================================================== */


/* =========================
   기본
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "SUIT",
        "Noto Sans KR",
        Arial,
        sans-serif;

    color: #222222;
    background: #ffffff;

    word-break: keep-all;
}

a {
    color: inherit;
}

:root {
    --orange: #FF7A00;
    --orange-dark: #E96B00;
    --orange-soft: #FF922B;
    --orange-light: #FFF0DF;

    --cream: #FFF8F1;
    --cream-dark: #FFF1E4;

    --black: #222222;
    --dark: #202020;

    --gray: #727272;
    --line: #ECECEC;
}


/* =====================================================
   HEADER
===================================================== */

.header {
    width: 100%;

    background: #ffffff;

    border-bottom:
        1px solid #eeeeee;
}


.header-inner {
    width: 100%;
    max-width: 1380px;

    min-height: 96px;

    margin: 0 auto;

    padding:
        18px
        32px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.logo {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    text-decoration: none;

    white-space: nowrap;
}


.logo-mark {
    display: block;

    width: 72px;
    height: auto;

    max-height: 38px;

    object-fit: contain;
}


.logo-text {
    display: block;

    color: var(--orange);

    font-size: 27px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.8px;
}


.nav {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 25px;

    flex-wrap: nowrap;
}


.nav a {
    position: relative;

    color: #222222;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s,
        transform 0.2s;
}


.nav a:hover {
    color: var(--orange);

    transform: translateY(-1px);
}


.nav a.active {
    color: var(--orange);
}


.nav a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -11px;

    width: 6px;
    height: 6px;

    transform: translateX(-50%);

    background: var(--orange);

    border-radius: 50%;
}


/* =====================================================
   HERO
===================================================== */

.center-hero {
    position: relative;

    min-height: 720px;

    padding:
        95px
        30px
        105px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #FFF9F3 0%,
            #FFF0E2 100%
        );
}


.center-hero-inner {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    gap: 75px;

    align-items: center;
}


/* 배경 원 */

.hero-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.hero-orb-one {
    width: 520px;
    height: 520px;

    right: -160px;
    top: -190px;

    border:
        110px solid
        rgba(255, 122, 0, 0.055);
}


.hero-orb-two {
    width: 220px;
    height: 220px;

    left: 42%;
    bottom: -120px;

    background:
        rgba(255, 122, 0, 0.065);
}


/* 왼쪽 */

.back-link {
    display: inline-block;

    margin-bottom: 42px;

    color: #766B62;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.2s,
        transform 0.2s;
}


.back-link:hover {
    color: var(--orange);

    transform: translateX(-3px);
}


.eyebrow {
    margin: 0 0 17px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 2px;
}


.center-hero h1 {
    margin: 0;

    color: #222222;

    font-size:
        clamp(48px, 5.1vw, 68px);

    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -2.8px;
}


.center-hero h1 em {
    display: inline-block;
    margin-top: 10px;

    color: var(--orange);
    font-style: normal;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.6px;

}


.hero-address {
    max-width: 590px;

    margin: 26px 0 0;

    color: #70675F;

    font-size: 18px;

    line-height: 1.7;
}

.hero-overview-grid {
    margin-top: 28px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    max-width: 620px;
}

.hero-overview-card {
    padding: 16px 18px;

    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255, 122, 0, 0.12);
    border-radius: 18px;

    box-shadow: 0 10px 24px rgba(40, 30, 20, 0.04);
}

.hero-overview-card span {
    display: block;
    margin-bottom: 8px;

    color: var(--orange);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.hero-overview-card strong {
    display: block;

    color: #222;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}


/* HERO 버튼 */

.hero-actions {
    margin-top: 38px;

    display: flex;

    gap: 11px;
}


.button {
    display: inline-flex;

    min-width: 168px;

    padding:
        16px
        24px;

    justify-content: center;
    align-items: center;

    border-radius: 13px;

    font-size: 15px;
    font-weight: 850;

    text-decoration: none;

    transition:
        transform 0.2s,
        background 0.2s,
        box-shadow 0.2s;
}


.button:hover {
    transform: translateY(-2px);
}


.button-primary {
    color: #ffffff;

    background: var(--orange);

    border:
        2px solid var(--orange);

    box-shadow:
        0 14px 30px
        rgba(255, 122, 0, 0.16);
}


.button-primary:hover {
    background: var(--orange-dark);
}


.button-secondary {
    color: var(--orange);

    background: #ffffff;

    border:
        2px solid
        rgba(255, 122, 0, 0.22);
}


/* =========================
   HERO 오른쪽 비주얼
========================= */

.hero-visual {
    position: relative;

    min-height: 470px;
}


.visual-main {
    position: absolute;

    left: 0;
    top: 15px;

    width: calc(100% - 55px);
    min-height: 380px;

    padding:
        53px
        43px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #252525,
            #171717
        );

    border-radius: 30px;

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.16);
}


.visual-main > span {
    display: inline-flex;

    padding:
        7px
        11px;

    color: #ffffff;

    background: var(--orange);

    border-radius: 50px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


.visual-main strong {
    display: block;

    margin-top: 67px;

    font-size: 34px;
    font-weight: 850;

    line-height: 1.35;

    letter-spacing: -1.5px;
}


.visual-main p {
    max-width: 350px;

    margin:
        20px
        0
        0;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 15px;

    line-height: 1.8;
}


.visual-mini {
    position: absolute;

    width: 165px;
    height: 150px;

    padding: 21px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: #ffffff;

    border:
        1px solid #eeeeee;

    border-radius: 22px;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.10);
}


.visual-mini-one {
    right: 0;
    top: 72px;
}


.visual-mini-two {
    right: 28px;
    bottom: 0;
}


.visual-mini span {
    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.4px;
}


.visual-mini strong {
    margin-top: 8px;

    color: #222222;

    font-size: 38px;
    font-weight: 900;
}


.visual-mini p {
    margin:
        4px
        0
        0;

    color: #808080;

    font-size: 12px;
}


/* =====================================================
   공통
===================================================== */

.section-inner {
    width: 100%;
    max-width: 1140px;

    margin: 0 auto;
}


.section-eyebrow,
.section-heading > p,
.subject-heading > div > p,
.difference-heading > p,
.recommend-copy > p {
    margin: 0 0 12px;

    color: var(--orange);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
}


.section-heading {
    margin-bottom: 48px;
}


.center-heading {
    text-align: center;
}


.section-heading h2 {
    margin: 0;

    color: #222222;

    font-size: 43px;
    font-weight: 850;

    line-height: 1.3;

    letter-spacing: -1.7px;
}


.section-heading > span {
    display: block;

    margin-top: 14px;

    color: #777777;

    font-size: 16px;

    line-height: 1.7;
}


/* =====================================================
   센터 한눈에 보기
===================================================== */

.quick-section {
    padding:
        115px
        25px;

    background: #ffffff;
}


.quick-grid {
    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 70px;

    align-items: center;
}


.quick-copy h2 {
    margin: 0;

    color: #222222;

    font-size: 44px;
    font-weight: 850;

    line-height: 1.35;

    letter-spacing: -1.8px;
}


.quick-copy > p:last-child {
    max-width: 420px;

    margin:
        22px
        0
        0;

    color: #777777;

    font-size: 16px;

    line-height: 1.8;
}


.quick-cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 13px;
}


.quick-card {
    min-height: 220px;

    padding:
        27px
        24px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background: #FFF8F1;

    border:
        1px solid #F5E8DC;

    border-radius: 22px;
}


.quick-card > span {
    color: #777777;

    font-size: 13px;
    font-weight: 700;
}


.quick-card strong {
    margin-top: 24px;

    color: #222222;

    font-size: 25px;
    font-weight: 850;

    line-height: 1.35;
}


.quick-card p {
    margin:
        8px
        0
        0;

    color: #8B8B8B;

    font-size: 12px;
}


.quick-card.orange-card {
    color: #ffffff;

    background: var(--orange);

    border-color: var(--orange);
}


.quick-card.orange-card > span,
.quick-card.orange-card p {
    color:
        rgba(255, 255, 255, 0.76);
}


.quick-card.orange-card strong {
    color: #ffffff;
}


/* =====================================================
   기본 정보
===================================================== */

.info-section {
    padding:
        115px
        25px;

    background: #FFF9F4;
}


.info-layout {
    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 16px;
}


.info-feature {
    position: relative;

    min-height: 315px;

    padding:
        38px
        36px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #272727,
            #191919
        );

    border-radius: 25px;
}


.info-number {
    position: absolute;

    right: 24px;
    top: 3px;

    color:
        rgba(255, 255, 255, 0.05);

    font-size: 110px;
    font-weight: 900;
}


.info-feature > p {
    margin: 0;

    color: var(--orange-soft);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
}


.info-feature h3 {
    margin:
        55px
        0
        12px;

    font-size: 31px;
    font-weight: 850;
}


.info-feature strong {
    display: block;

    max-width: 520px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 17px;
    font-weight: 600;

    line-height: 1.75;
}


.info-feature a {
    display: inline-block;

    margin-top: 28px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;
}


.info-side {
    display: grid;

    gap: 16px;
}


.info-card {
    min-height: 149px;

    padding:
        28px
        29px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: #ffffff;

    border:
        1px solid #EDEDED;

    border-radius: 22px;
}


.info-card span {
    margin-bottom: 11px;

    color: var(--orange);

    font-size: 12px;
    font-weight: 850;
}


.info-card strong {
    color: #2C2C2C;

    font-size: 17px;
    font-weight: 750;

    line-height: 1.55;
}


/* =====================================================
   학교
===================================================== */

.school-section {
    padding:
        120px
        25px;

    background: #ffffff;
}


.school-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}


.school-card {
    position: relative;

    min-height: 265px;

    padding:
        31px
        29px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #eeeeee;

    border-radius: 24px;

    transition:
        transform 0.25s,
        border-color 0.25s,
        box-shadow 0.25s;
}


.school-card:hover {
    transform: translateY(-5px);

    border-color: #FFC690;

    box-shadow:
        0 20px 45px
        rgba(255, 122, 0, 0.08);
}


.school-badge {
    width: 48px;
    height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: var(--orange);

    background: var(--orange-light);

    border-radius: 14px;

    font-size: 16px;
    font-weight: 900;
}


.school-card h3 {
    margin:
        46px
        0
        13px;

    color: #222222;

    font-size: 24px;
    font-weight: 850;
}


.school-card p {
    margin: 0;

    color: #737373;

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   학습코칭
===================================================== */

.coaching-section {
    padding:
        130px
        25px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #222222,
            #181818
        );
}


.coaching-layout {
    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 80px;

    align-items: center;
}


.coaching-copy > p:first-child {
    margin: 0 0 15px;

    color: var(--orange);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
}


.coaching-copy h2 {
    margin: 0;

    font-size: 46px;
    font-weight: 850;

    line-height: 1.35;

    letter-spacing: -1.8px;
}


.coaching-copy h2 span {
    color: #FF922B;
}


.coaching-description {
    margin:
        27px
        0
        0;

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 16px;

    line-height: 1.9;
}


.coaching-tags {
    margin-top: 30px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.coaching-tags span {
    padding:
        8px
        12px;

    color:
        rgba(255, 255, 255, 0.85);

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 40px;

    font-size: 12px;
    font-weight: 750;
}


.coaching-steps {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;
}


.coaching-step {
    min-height: 250px;

    padding:
        28px
        26px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 20px;
}


.coaching-step > div {
    width: 39px;
    height: 39px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: #ffffff;

    background: var(--orange);

    border-radius: 11px;

    font-size: 11px;
    font-weight: 900;
}


.coaching-step > span {
    display: block;

    margin-top: 27px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 1.3px;
}


.coaching-step h3 {
    margin:
        5px
        0
        11px;

    font-size: 23px;
    font-weight: 850;
}


.coaching-step p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 14px;

    line-height: 1.75;
}


/* =====================================================
   과목
===================================================== */

.subject-section {
    padding:
        120px
        25px;

    background: #ffffff;
}


.subject-heading {
    margin-bottom: 47px;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;
}


.subject-heading h2 {
    margin: 0;

    color: #222222;

    font-size: 43px;
    font-weight: 850;

    letter-spacing: -1.6px;
}


.subject-heading > span {
    max-width: 350px;

    color: #777777;

    font-size: 14px;

    line-height: 1.7;
}


.subject-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 12px;
}


.subject-card {
    min-height: 245px;

    padding:
        27px
        23px;

    background: #FFF9F4;

    border:
        1px solid #F2E6DA;

    border-radius: 22px;

    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}


.subject-card:hover {
    transform: translateY(-4px);

    border-color: #FFB66F;

    box-shadow:
        0 15px 35px
        rgba(255, 122, 0, 0.07);
}


.subject-icon {
    width: 45px;
    height: 45px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: #ffffff;

    background: var(--orange);

    border-radius: 13px;

    font-size: 14px;
    font-weight: 900;
}


.subject-card h3 {
    margin:
        55px
        0
        11px;

    color: #222222;

    font-size: 22px;
    font-weight: 850;
}


.subject-card p {
    margin: 0;

    color: #757575;

    font-size: 13px;

    line-height: 1.7;
}


.subject-card.is-empty {
    opacity: 0.55;

    background: #F7F7F7;

    border-color: #EEEEEE;
}


.subject-card.is-empty .subject-icon {
    color: #999999;

    background: #E6E6E6;
}


/* =====================================================
   WHY WAWA
===================================================== */

.difference-section {
    padding:
        125px
        25px;

    background: #FFF8F1;
}


.difference-heading {
    max-width: 760px;
}


.difference-heading h2 {
    margin: 0;

    color: #222222;

    font-size: 47px;
    font-weight: 850;

    line-height: 1.35;

    letter-spacing: -1.9px;
}


.difference-heading > span {
    display: block;

    margin-top: 19px;

    color: #777777;

    font-size: 16px;

    line-height: 1.8;
}


.difference-grid {
    margin-top: 60px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}


.difference-card {
    min-height: 275px;

    padding:
        29px
        27px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background: #ffffff;

    border:
        1px solid #F0E3D8;

    border-radius: 23px;
}


.difference-icon {
    width: 45px;
    height: 45px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: var(--orange);

    background: var(--orange-light);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}


.difference-card div > p {
    margin: 0 0 5px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.difference-card h3 {
    margin: 0;

    color: #222222;

    font-size: 24px;
    font-weight: 850;
}


.difference-card div > span {
    display: block;

    margin-top: 11px;

    color: #777777;

    font-size: 14px;

    line-height: 1.7;
}


/* =====================================================
   추천 대상
===================================================== */

.recommend-section {
    padding:
        125px
        25px;

    background: #ffffff;
}


.recommend-layout {
    display: grid;

    grid-template-columns:
        0.75fr
        1.25fr;

    gap: 80px;

    align-items: start;
}


.recommend-copy {
    position: sticky;

    top: 40px;
}


.recommend-copy h2 {
    margin: 0;

    color: #222222;

    font-size: 45px;
    font-weight: 850;

    line-height: 1.4;

    letter-spacing: -1.7px;
}


.recommend-list {
    border-top:
        1px solid #E7E7E7;
}


.recommend-list article {
    min-height: 125px;

    padding:
        27px
        7px;

    display: flex;

    align-items: center;

    gap: 29px;

    border-bottom:
        1px solid #E7E7E7;
}


.recommend-list article > span {
    flex-shrink: 0;

    width: 45px;
    height: 45px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: #ffffff;

    background: var(--orange);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}


.recommend-list article > p {
    margin: 0;

    color: #303030;

    font-size: 20px;
    font-weight: 750;

    line-height: 1.55;
}


/* =====================================================
   CTA
===================================================== */

.cta-section {
    padding:
        120px
        25px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #FF8615,
            #EF6900
        );
}


.cta-inner {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.cta-inner > p {
    margin: 0 0 17px;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
}


.cta-inner h2 {
    margin: 0;

    font-size: 47px;
    font-weight: 850;

    line-height: 1.38;

    letter-spacing: -1.8px;
}


.cta-inner h2 span {
    color: #222222;
}


.cta-description {
    display: block;

    margin-top: 20px;

    color:
        rgba(255, 255, 255, 0.90);

    font-size: 16px;

    line-height: 1.7;
}


.cta-buttons {
    margin-top: 38px;

    display: flex;

    justify-content: center;

    gap: 11px;
}


.cta-buttons a {
    min-width: 180px;

    padding:
        16px
        25px;

    border-radius: 12px;

    font-size: 15px;
    font-weight: 850;

    text-decoration: none;

    transition:
        transform 0.2s;
}


.cta-buttons a:hover {
    transform: translateY(-2px);
}


.cta-light {
    color: var(--orange);

    background: #ffffff;
}


.cta-dark {
    color: #ffffff;

    background: #222222;
}


/* =====================================================
   ERROR
===================================================== */

.error-box {
    width:
        calc(100% - 40px);

    max-width: 720px;

    margin:
        110px
        auto;

    padding:
        55px
        30px;

    text-align: center;

    background: #FFF6ED;

    border-radius: 25px;
}


.error-box h1 {
    margin: 0;

    font-size: 34px;
    font-weight: 850;
}


.error-box p {
    margin:
        15px
        0
        0;

    color: #777777;

    line-height: 1.7;
}


.error-box a {
    display: inline-block;

    margin-top: 24px;

    padding:
        14px
        24px;

    color: #ffffff;

    background: var(--orange);

    border-radius: 11px;

    text-decoration: none;

    font-weight: 800;
}


/* =====================================================
   1150
===================================================== */

@media (max-width: 1150px) {

    .header-inner {
        padding:
            16px
            22px;

        gap: 20px;
    }


    .logo-mark {
        width: 62px;

        max-height: 34px;
    }


    .logo-text {
        font-size: 23px;
    }


    .nav {
        gap: 16px;
    }


    .nav a {
        font-size: 14px;
    }


    .center-hero-inner {
        gap: 45px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .header-inner {
        flex-direction: column;

        justify-content: center;

        gap: 18px;
    }


    .nav {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap:
            15px
            20px;
    }


    .center-hero-inner {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .hero-visual {
        width: 100%;
        max-width: 600px;

        margin: 0 auto;
    }


    .quick-grid,
    .info-layout,
    .coaching-layout,
    .recommend-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .quick-cards {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .subject-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .difference-grid {
        grid-template-columns: 1fr;
    }


    .recommend-copy {
        position: static;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    /* 헤더 */

    .header-inner {
        min-height: auto;

        padding:
            17px
            15px;

        flex-direction: column;

        gap: 17px;
    }


    .logo {
        justify-content: center;

        gap: 10px;
    }


    .logo-mark {
        width: 58px;

        max-height: 30px;
    }


    .logo-text {
        font-size: 22px;
    }


    .nav {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap:
            13px
            16px;
    }


    .nav a {
        font-size: 14px;
    }


    .nav a.active::after {
        bottom: -8px;
    }


    /* HERO */

    .center-hero {
        min-height: auto;

        padding:
            72px
            20px
            82px;
    }


    .back-link {
        margin-bottom: 33px;
    }


    .center-hero h1 {
        font-size: 43px;

        letter-spacing: -1.8px;
    }


    .hero-address {
        font-size: 16px;
    }


    .hero-actions {
        flex-direction: column;
    }


    .button {
        width: 100%;

        max-width: 330px;
    }


    .hero-visual {
        min-height: 410px;
    }


    .visual-main {
        width: calc(100% - 25px);

        min-height: 330px;

        padding:
            38px
            28px;
    }


    .visual-main strong {
        margin-top: 52px;

        font-size: 28px;
    }


    .visual-mini {
        width: 140px;
        height: 125px;

        padding: 17px;
    }


    .visual-mini-one {
        top: 68px;
    }


    .visual-mini-two {
        right: 10px;
    }


    .visual-mini strong {
        font-size: 31px;
    }


    /* 공통 */

    .quick-section,
    .info-section,
    .school-section,
    .subject-section,
    .difference-section,
    .recommend-section {
        padding:
            85px
            20px;
    }


    .section-heading h2,
    .quick-copy h2,
    .subject-heading h2,
    .difference-heading h2,
    .recommend-copy h2 {
        font-size: 34px;
    }


    /* quick */

    .quick-cards {
        grid-template-columns: 1fr;
    }


    .quick-card {
        min-height: 170px;
    }


    /* info */

    .info-feature {
        min-height: 290px;
    }


    /* 학교 */

    .school-grid {
        grid-template-columns: 1fr;
    }


    .school-card {
        min-height: 215px;
    }


    /* 학습 방식 */

    .coaching-section {
        padding:
            95px
            20px;
    }


    .coaching-copy h2 {
        font-size: 37px;
    }


    .coaching-steps {
        grid-template-columns: 1fr;
    }


    .coaching-step {
        min-height: auto;
    }


    /* 과목 */

    .subject-heading {
        flex-direction: column;

        align-items: flex-start;

        gap: 17px;
    }


    .subject-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .subject-card {
        min-height: 220px;
    }


    /* 추천 */

    .recommend-list article > p {
        font-size: 17px;
    }


    /* CTA */

    .cta-section {
        padding:
            90px
            20px;
    }


    .cta-inner h2 {
        font-size: 35px;
    }


    .cta-buttons {
        flex-direction: column;

        align-items: center;
    }


    .cta-buttons a {
        width: 100%;

        max-width: 310px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

    .logo-mark {
        width: 52px;
    }


    .logo-text {
        font-size: 20px;
    }


    .nav {
        gap:
            11px
            13px;
    }


    .nav a {
        font-size: 13px;
    }


    .center-hero h1 {
        font-size: 37px;
    }


    .hero-visual {
        min-height: 430px;
    }


    .visual-main {
        width: 100%;
    }


    .visual-mini-one {
        top: auto;

        right: auto;
        left: 10px;

        bottom: 0;
    }


    .visual-mini-two {
        right: 10px;

        bottom: 0;
    }


    .subject-grid {
        grid-template-columns: 1fr;
    }


    .subject-card {
        min-height: 190px;
    }


    .recommend-list article {
        align-items: flex-start;
    }


    .cta-inner h2 {
        font-size: 31px;
    }

}

/* =====================================================
   HERO 오른쪽 비주얼 재배치
   검은 박스 + 아래 통계카드 2개
===================================================== */

.hero-panel-wrap {
    width: 100%;
    max-width: 500px;

    display: flex;
    flex-direction: column;

    gap: 15px;
}


/* 검은 메인 박스 */

.hero-dark-card {
    min-height: 380px;

    padding: 52px 43px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #242424,
            #171717
        );

    border-radius: 30px;

    box-shadow:
        0 25px 60px
        rgba(30, 20, 10, 0.12);
}

.hero-info-list {
    width: 100%;
    margin-top: 28px;

    display: grid;
    gap: 12px;
}

.hero-info-item {
    padding: 14px 16px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;

    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(4px);
}

.hero-info-item span {
    display: block;
    margin-bottom: 6px;

    color: rgba(255,255,255,0.58);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.hero-info-item strong {
    display: block;

    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}


.hero-wawa-badge {
    display: inline-flex;

    margin-bottom: 68px;

    padding: 8px 14px;

    color: #ffffff;

    background: #FF7A00;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.hero-dark-card h2 {
    margin: 0;

    color: #ffffff;

    font-size: 31px;
    font-weight: 900;

    line-height: 1.4;

    letter-spacing: -1.3px;
}


.hero-dark-card p {
    max-width: 340px;

    margin: 26px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================
   통계 카드 2개
========================= */

.hero-stats-row {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}


.hero-stat-box {
    min-height: 145px;

    padding: 24px 27px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffffff;

    border:
        1px solid rgba(0, 0, 0, 0.06);

    border-radius: 22px;

    box-shadow:
        0 14px 35px
        rgba(50, 35, 20, 0.07);
}


.hero-stat-box > span {
    display: block;

    margin-bottom: 9px;

    color: #FF7A00;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.hero-stat-box strong {
    display: block;

    color: #202020;

    font-size: 39px;
    font-weight: 900;

    line-height: 1;
}


.hero-stat-box p {
    margin: 10px 0 0;

    color: #888888;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================
   모바일
========================= */

@media (max-width: 900px) {

    .hero-panel-wrap {
        max-width: 100%;
    }

}


@media (max-width: 520px) {

    .hero-dark-card {
        min-height: 330px;

        padding: 38px 28px;

        border-radius: 24px;
    }

    .hero-wawa-badge {
        margin-bottom: 50px;
    }

    .hero-dark-card h2 {
        font-size: 27px;
    }

    .hero-stats-row {
        gap: 10px;
    }

    .hero-stat-box {
        min-height: 125px;

        padding: 20px;
    }

    .hero-stat-box strong {
        font-size: 33px;
    }

}

/* =====================================================
   WAWA LEARNING SPACE
===================================================== */

.center-gallery-section {
    padding: 110px 24px 120px;

    background: #ffffff;
}


.center-gallery-inner {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* 제목 */

.center-gallery-heading {
    margin-bottom: 44px;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items: end;

    gap: 70px;
}


.center-gallery-heading p {
    margin: 0 0 12px;

    color: #FF7A00;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;
}


.center-gallery-heading h2 {
    margin: 0;

    color: #222222;

    font-size: 42px;
    font-weight: 900;

    line-height: 1.3;

    letter-spacing: -1.8px;
}


.center-gallery-heading > span {
    color: #777777;

    font-size: 16px;

    line-height: 1.8;
}


/* 사진 2장 */

.center-gallery-grid {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 16px;
}


.center-gallery-photo {
    position: relative;

    height: 430px;

    margin: 0;

    overflow: hidden;

    border-radius: 26px;

    background: #eeeeee;

    box-shadow:
        0 18px 45px
        rgba(30, 30, 30, 0.08);
}


.center-gallery-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.center-gallery-photo:hover img {
    transform: scale(1.035);
}


/* 사진 아래쪽 그라데이션 */

.center-gallery-photo::after {
    content: "";

    position: absolute;

    inset: 45% 0 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(15, 15, 15, 0.72)
        );

    pointer-events: none;
}


/* 사진 위 글 */

.center-gallery-photo figcaption {
    position: absolute;
    z-index: 2;

    left: 30px;
    right: 30px;
    bottom: 28px;

    color: #ffffff;
}


.center-gallery-photo figcaption span {
    display: block;

    margin-bottom: 8px;

    color: #FF9B3D;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.center-gallery-photo figcaption strong {
    display: block;

    font-size: 21px;
    font-weight: 850;

    line-height: 1.4;

    letter-spacing: -0.5px;
}


/* 안내문 */

.center-gallery-notice {
    margin: 16px 3px 0;

    color: #999999;

    font-size: 12px;
}


/* =========================
   TABLET / MOBILE
========================= */

@media (max-width: 850px) {

    .center-gallery-section {
        padding:
            85px 20px 95px;
    }


    .center-gallery-heading {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .center-gallery-heading h2 {
        font-size: 35px;
    }


    .center-gallery-grid {
        grid-template-columns: 1fr;
    }


    .center-gallery-photo {
        height: 390px;
    }

}


@media (max-width: 520px) {

    .center-gallery-heading h2 {
        font-size: 31px;
    }


    .center-gallery-heading > span {
        font-size: 14px;
    }


    .center-gallery-photo {
        height: 300px;

        border-radius: 20px;
    }


    .center-gallery-photo figcaption {
        left: 22px;
        right: 22px;
        bottom: 21px;
    }


    .center-gallery-photo figcaption strong {
        font-size: 18px;
    }

}
.center-seo-intro{line-height:1.8;margin:20px 0;max-width:640px;color:#555;}
/* Existing colors, typography, section widths and cards remain in use. */
.branch-breadcrumb{grid-column:1/-1;font-size:13px;color:#777;line-height:1.8;margin-bottom:18px}
.branch-breadcrumb a{color:inherit;text-decoration:none}
.branch-jump{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;gap:12px;flex-wrap:wrap;border-bottom:1px solid #e7e7e7}
.branch-jump a{display:inline-block;padding:10px 16px;border:1px solid #ddd;border-radius:24px;color:inherit;text-decoration:none;font-size:14px;background:#fff}
.branch-jump a:hover,.branch-jump a:focus-visible{background:#f4f4f4;border-color:#777}
.branch-lead{max-width:880px;line-height:1.9;color:#555;margin:0 0 32px;font-size:16px;word-break:keep-all}
.branch-course-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:36px}
.branch-course{--course-ink:#94552f;--course-tint:#fff6ed;--course-line:#f1dfd0;grid-column:span 2;display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid var(--course-line);border-radius:24px;background:linear-gradient(150deg,var(--course-tint),#fff 85%);box-shadow:0 5px 20px #35221104;transition:transform .2s ease,box-shadow .2s ease}
.branch-course[data-subject="영어"]{--course-ink:#42685b;--course-tint:#eff7f2;--course-line:#dce9e1}
.branch-course[data-subject="수학"]{--course-ink:#4d608d;--course-tint:#f0f3fc;--course-line:#dfe5f3}
.branch-course[data-subject="과학"]{--course-ink:#76578d;--course-tint:#f7f1fa;--course-line:#eadeef}
.branch-course[data-subject="사회"]{--course-ink:#866721;--course-tint:#fcf7e9;--course-line:#eee4c9}
.branch-course:hover{transform:translateY(-3px);box-shadow:0 12px 30px #3522110a}
.branch-course-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.branch-course-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#ffffffc9;border:1px solid var(--course-line);color:var(--course-ink);font-size:23px;font-weight:800}
.branch-course-number{font-size:14px;font-weight:650;letter-spacing:2px;color:var(--course-ink);opacity:.65}
.branch-course .branch-course-center{margin:0 0 9px;color:var(--course-ink);font-size:12px;font-weight:600;line-height:1.6}
.branch-course h3{font-size:25px;margin:0 0 20px;line-height:1.4;letter-spacing:-.7px;color:#292622}
.branch-course h3 span{font-size:16px;font-weight:500;color:#756e66;letter-spacing:-.4px}
.branch-grade-group{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.branch-grade-chip{display:inline-block;padding:7px 10px;border-radius:9px;background:#fff;border:1px solid var(--course-line);color:#494642;font-size:12px;font-weight:600;line-height:1.5}
.branch-course-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--course-line);font-size:13px;font-weight:650;color:var(--course-ink);text-decoration:none}
.branch-course-action span{font-size:20px;line-height:1}
.branch-course-action:focus-visible{outline:2px solid var(--course-ink);outline-offset:5px;border-radius:4px}
.branch-course-grid>.branch-course:last-child:nth-child(3n+2),.branch-course-grid>.branch-course:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
.branch-course-grid>.branch-course:last-child:nth-child(3n+1){grid-column:1/-1}
.branch-course-note{display:flex;align-items:flex-start;gap:13px;padding:20px 23px;margin-top:20px;border:1px solid #eee7df;border-radius:16px;background:#faf8f5}
.branch-note-icon{flex-shrink:0;display:grid;place-items:center;width:22px;height:22px;border:1px solid #b4a493;border-radius:50%;color:#806e59;font-size:13px;font-weight:700}
.branch-course-note strong{font-size:13px;color:#594e41}
.branch-course-note p{margin:6px 0 0;font-size:13px;line-height:1.8;color:#776c60;word-break:keep-all}
.branch-faq-section{padding:80px 25px;background:#fafafa}
.branch-faq-list details{border-bottom:1px solid #ddd;padding:22px 0}
.branch-faq-list summary{font-weight:700;font-size:17px;line-height:1.6;cursor:pointer}
.branch-faq-list details p{line-height:1.9;color:#555;margin:16px 0 0;max-width:900px;word-break:keep-all}
#courses,#schools,#location,#space,#branch-faq,#consultation{scroll-margin-top:100px}
@media(max-width:900px){.branch-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.branch-course-grid>.branch-course,.branch-course-grid>.branch-course:last-child:nth-child(3n+2),.branch-course-grid>.branch-course:nth-last-child(2):nth-child(3n+1),.branch-course-grid>.branch-course:last-child:nth-child(3n+1){grid-column:auto}.branch-course-grid>.branch-course:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:560px){.branch-course-grid{grid-template-columns:1fr;gap:14px}.branch-course-grid>.branch-course{grid-column:1/-1;padding:23px}.branch-course-top{margin-bottom:15px}.branch-course-note{padding:18px}.branch-jump{padding:18px 20px;gap:8px}.branch-jump a{font-size:13px;padding:8px 12px}.branch-faq-section{padding:56px 20px}.branch-lead{font-size:15px}}
@media(prefers-reduced-motion:reduce){.branch-course{transition:none}.branch-course:hover{transform:none}}

/* Section shortcuts and subject reading guide. */
.branch-jump{max-width:1180px;margin:28px auto 0;padding:12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;border:1px solid #f0e5d9;border-radius:22px;background:#fffaf5;box-shadow:0 8px 24px #9a663008}
.branch-jump a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;padding:10px 8px;border:1px solid transparent;border-radius:14px;background:transparent;color:#574538;font-size:13px;font-weight:650;white-space:nowrap;transition:background .18s,border-color .18s,box-shadow .18s}
.branch-jump-icon{display:grid;place-items:center;flex-shrink:0;color:#e77818}
.branch-jump-icon svg{width:21px;height:21px}
.branch-jump-arrow{display:none}
.branch-jump a:hover,.branch-jump a:focus-visible{background:#fff;border-color:#f1d8bf;box-shadow:0 4px 12px #9a663010;outline-offset:3px}
.branch-jump a.branch-jump-cta{background:#ff8000;border-color:#ff8000;color:#fff;box-shadow:0 4px 12px #ff800022}
.branch-jump-cta .branch-jump-icon{color:#fff}
.branch-jump a.branch-jump-cta:hover{background:#e97200;border-color:#e97200}
.subject-section{padding-top:70px}
.subject-section .subject-heading{margin-bottom:0}
.branch-study{margin:0 0 26px}
.branch-study h4{margin:0 0 12px;font-size:13px;line-height:1.6;font-weight:700;color:var(--course-ink)}
.branch-study ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.branch-study li{position:relative;padding-left:12px;font-size:13px;line-height:1.85;color:#625e58;word-break:keep-all;overflow-wrap:anywhere}
.branch-study li::before{content:'';position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:var(--course-ink);opacity:.55}
.branch-study li:first-child {
    display: none;
}
@media(max-width:1200px){.branch-jump{margin-left:25px;margin-right:25px}}
@media(max-width:900px){.branch-jump{grid-template-columns:repeat(3,minmax(0,1fr))}.branch-jump a{justify-content:flex-start;padding:12px}.branch-jump-arrow{display:block;margin-left:auto;color:inherit;opacity:.6}}
@media(max-width:560px){.branch-jump{margin:20px 20px 0;padding:8px;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px}.branch-jump a{min-height:50px;font-size:12px;gap:8px}.branch-jump-icon svg{width:19px;height:19px}.subject-section{padding-top:48px}.branch-study li{font-size:14px}}
@media(prefers-reduced-motion:reduce){.branch-jump a{transition:none}}

.branch-research-section{padding:90px 25px;background:#fffaf5}
.branch-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.branch-feature{background:#fff;border:1px solid #f0e5d9;border-radius:20px;padding:25px;min-width:0}
.branch-feature-number{color:#e97717;font-size:12px;font-weight:750;letter-spacing:2px}
.branch-feature h3{font-size:19px;color:#352e27;margin:15px 0 12px}
.branch-feature p{font-size:14px;color:#6a6158;line-height:1.85;word-break:keep-all}
.branch-source{display:flex;gap:15px;flex-wrap:wrap;margin-top:22px;color:#827970;font-size:12px;line-height:1.7}
.branch-source a{color:#7c6550;text-underline-offset:3px}
.branch-location-extra{margin-top:28px;padding:28px;border:1px solid #eee3d7;border-radius:22px;background:#fffaf5}
.branch-contact-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.branch-detail-label{font-size:12px;font-weight:750;letter-spacing:.5px;color:#a06b38}
.branch-contact-grid p,.branch-wayfinding>p{margin:10px 0;font-size:15px;line-height:1.9;word-break:keep-all}
.branch-phone{font-size:23px;font-weight:750;color:#392e24;text-decoration:none}
.branch-wayfinding{margin-top:22px;padding-top:22px;border-top:1px solid #eadfD3}
.branch-wayfinding .branch-source{font-size:12px}
.branch-useful-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.branch-useful-links a{padding:10px 14px;background:#fff;border:1px solid #eadfD3;border-radius:10px;text-decoration:none;font-size:13px;color:#6b503b}
.branch-availability-note{margin:20px 0 0;color:#805f3d;font-size:13px;line-height:1.8}
@media(max-width:900px){.branch-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.branch-research-section{padding:60px 20px}.branch-feature-grid,.branch-contact-grid{grid-template-columns:1fr}.branch-location-extra{padding:22px}.branch-feature{padding:22px}.branch-phone{font-size:21px}}

/* Readable, branch-specific long-form information before the course cards. */
.branch-editorial{padding:76px 24px;background:#fffdf9;border-bottom:1px solid #f0e8de;scroll-margin-top:100px}
.branch-editorial>.section-inner{max-width:960px;margin:0 auto;padding:0}
.branch-editorial-header{max-width:850px;margin-bottom:36px}
.branch-editorial-kicker{font-size:13px;font-weight:700;color:#a6602f;letter-spacing:.04em;margin:0 0 18px}
.branch-editorial h2{font-size:clamp(25px,3vw,38px);line-height:1.5;letter-spacing:-.04em;color:#2e2b27;margin:0 0 24px;word-break:keep-all;overflow-wrap:anywhere}
.branch-editorial-lead{font-size:18px;line-height:1.95;color:#514b43;word-break:keep-all;overflow-wrap:anywhere;margin:0}
.branch-editorial-body{max-width:850px;display:grid;gap:36px}
.branch-editorial-body section{padding:0;margin:0;background:transparent;scroll-margin-top:100px}
.branch-editorial h3{font-size:21px;line-height:1.6;color:#38312a;margin:0 0 14px;word-break:keep-all}
.branch-editorial-body p{font-size:16px;line-height:2;color:#5e564d;margin:0 0 12px;word-break:keep-all;overflow-wrap:anywhere}
.branch-editorial-body .branch-editorial-note{font-size:12px;line-height:1.7;color:#877b6e;margin-top:14px}
.branch-editorial-cta{padding:28px 30px;background:#f8f0e5;border:1px solid #ebddcc;border-radius:20px}
.branch-editorial-cta a{display:inline-flex;align-items:center;gap:14px;margin-top:8px;padding:12px 18px;border-radius:12px;background:#c86620;color:white;font-weight:700;font-size:14px;text-decoration:none;line-height:1.6}
.branch-editorial-cta a:hover,.branch-editorial-cta a:focus-visible{background:#a85217;outline:2px solid #a85217;outline-offset:3px}
.center-seo-intro a{display:block;margin-top:12px;color:#9e581f;font-weight:650;text-underline-offset:4px}
@media(max-width:560px){.branch-editorial{padding:48px 20px}.branch-editorial-lead{font-size:16px}.branch-editorial-body p{font-size:15px;line-height:1.95}.branch-editorial h3{font-size:19px}.branch-editorial-cta{padding:22px}.branch-editorial-body{gap:28px}}