/* =========================================================
   GALMAEUMSU — MAIN PAGE (2026 리뉴얼)
   6-Section 원페이지 구조 · PC·모바일 반응형
   ========================================================= */

/* ===== FADE-UP (common.js initFadeUp 연동) ===== */
.fade-up {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
    will-change:opacity, transform;
}
.fade-up.visible { opacity:1; transform:none; }
.fade-up.d1 { transition-delay:.08s; }
.fade-up.d2 { transition-delay:.16s; }
.fade-up.d3 { transition-delay:.24s; }
.fade-up.d4 { transition-delay:.32s; }

/* ===== 섹션 공통 헤더 ===== */
.sec {
    padding:120px 0;
    position:relative;
    scroll-margin-top:var(--header-h);
}
.sec--soft { background:var(--c-bg-soft); }

.sec-head { margin-bottom:64px; max-width:760px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-no {
    display:inline-flex; align-items:baseline; gap:10px;
    font-family:var(--serif);
    font-size:14px; font-weight:700; letter-spacing:.25em;
    color:var(--c-accent);
    margin-bottom:18px;
}
.sec-no::before {
    content:''; width:28px; height:1px;
    background:var(--c-accent);
    align-self:center;
}
.sec-title {
    font-family:var(--serif);
    font-size:40px; font-weight:800;
    letter-spacing:-.025em; line-height:1.2;
    color:var(--c-primary);
    margin-bottom:20px;
}
.sec-lead {
    font-size:18px; line-height:1.85;
    color:var(--c-text-soft);
    word-break:keep-all;
}
.sec-lead strong { color:var(--c-primary); font-weight:700; }

/* =========================================================
   HERO — 영상 배경 (1. 회사 소개 / 사람들이 행복·자유·만족하는 영상)
   ========================================================= */
.hero {
    position:relative;
    margin-top:var(--header-h);
    height:calc(100vh - var(--header-h));
    min-height:600px; max-height:900px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    overflow:hidden;
    color:var(--c-white);
    background:#0a0e23;
}
.hero-video {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
    pointer-events:none;
}
.hero-overlay {
    position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(180deg, rgba(8,12,32,.62) 0%, rgba(8,12,32,.45) 45%, rgba(8,12,32,.74) 100%),
        radial-gradient(ellipse at 50% 38%, rgba(184,152,90,.14) 0%, transparent 62%);
}
.hero-inner {
    position:relative; z-index:2;
    max-width:920px;
    margin:0 auto; padding:0 24px;
}
.hero-eyebrow {
    display:inline-block;
    font-size:14px; font-weight:600;
    letter-spacing:.42em;
    color:rgba(255,255,255,.9);
    margin-bottom:26px;
    padding-bottom:14px;
    position:relative;
}
.hero-eyebrow::after {
    content:''; position:absolute;
    left:50%; bottom:0; transform:translateX(-50%);
    width:38px; height:1px; background:var(--c-accent);
}
.hero-title {
    font-family:var(--serif);
    font-size:clamp(34px, 5.2vw, 60px);
    font-weight:800; letter-spacing:-.025em;
    line-height:1.2;
    color:var(--c-white);
    text-shadow:0 2px 26px rgba(0,0,0,.45);
    margin-bottom:14px;
    word-break:keep-all;
}
.hero-title .em { color:var(--c-accent); }
.hero-sub {
    font-family:var(--serif);
    font-size:clamp(19px, 2.6vw, 27px);
    font-weight:700;
    color:#fff;
    text-shadow:0 2px 20px rgba(0,0,0,.45);
    margin-bottom:26px;
}
.hero-desc {
    font-size:clamp(15px, 1.8vw, 18px);
    line-height:1.85;
    color:rgba(255,255,255,.85);
    max-width:640px; margin:0 auto 44px;
    word-break:keep-all;
    font-weight:400;
}
.hero-menu {
    display:flex; flex-wrap:wrap;
    justify-content:center; gap:14px;
}
.hero-menu a {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:158px;
    padding:16px 28px;
    font-size:16px; font-weight:600;
    letter-spacing:-.01em;
    color:#fff;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.5);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:all .3s var(--ease);
}
.hero-menu a:hover {
    background:var(--c-accent);
    border-color:var(--c-accent);
    color:var(--c-primary-dk);
    transform:translateY(-2px);
}
.hero-scroll {
    position:absolute;
    bottom:30px; left:50%;
    transform:translateX(-50%);
    z-index:3;
    font-size:11px; letter-spacing:.4em;
    color:rgba(255,255,255,.75);
}
.hero-scroll::after {
    content:''; display:block;
    width:1px; height:30px;
    background:var(--c-accent);
    margin:8px auto 0;
    animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%,100% { transform:scaleY(.4); transform-origin:top; }
    50% { transform:scaleY(1); transform-origin:top; }
}
@media (prefers-reduced-motion:reduce) {
    .hero-scroll::after { animation:none; }
}

/* 우측 고정 섹션 인덱스 (홈페이지 화면 1~6) — PC 전용 */
.sec-dots {
    position:fixed; top:50%; right:28px;
    transform:translateY(-50%);
    z-index:60;
    display:flex; flex-direction:column; gap:14px;
}
.sec-dots a {
    display:flex; align-items:center; gap:10px;
    font-size:11px; font-weight:700; letter-spacing:.05em;
    color:var(--c-text-light);
    transition:color .25s;
}
.sec-dots a .dot {
    width:9px; height:9px; border-radius:50%;
    border:1.5px solid var(--c-text-light);
    background:transparent;
    transition:all .25s;
    flex-shrink:0;
}
.sec-dots a .txt {
    opacity:0; transform:translateX(6px);
    transition:all .25s;
    white-space:nowrap;
}
.sec-dots a:hover .dot,
.sec-dots a.active .dot {
    border-color:var(--c-accent); background:var(--c-accent);
    transform:scale(1.15);
}
.sec-dots a:hover, .sec-dots a.active { color:var(--c-primary); }
.sec-dots a:hover .txt { opacity:1; transform:translateX(0); }

/* =========================================================
   링크 카드 그리드 (고객센터 등)
   ========================================================= */
.link-grid { display:grid; gap:20px; }
.link-grid.col-4 { grid-template-columns:repeat(4, 1fr); }
.link-grid.col-2 { grid-template-columns:repeat(2, 1fr); }

.link-card {
    display:block;
    background:var(--c-white);
    border:1px solid var(--c-line);
    padding:34px 28px 30px;
    position:relative;
    transition:all .35s var(--ease);
    overflow:hidden;
}
.link-card::before {
    content:''; position:absolute; left:0; top:0;
    width:100%; height:3px; background:var(--c-accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
}
.link-card:hover {
    border-color:var(--c-accent);
    box-shadow:var(--shadow-lg);
    transform:translateY(-6px);
}
.link-card:hover::before { transform:scaleX(1); }
.link-card .lc-no {
    font-family:var(--serif);
    font-size:13px; font-weight:700; letter-spacing:.1em;
    color:var(--c-accent);
    margin-bottom:14px; display:block;
}
.link-card h4 {
    font-family:var(--serif);
    font-size:21px; font-weight:700;
    color:var(--c-primary);
    margin-bottom:10px;
}
.link-card p {
    font-size:14.5px; line-height:1.7;
    color:var(--c-text-soft);
    word-break:keep-all;
    min-height:48px;
}
.link-card .lc-go {
    margin-top:18px;
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:600; letter-spacing:.05em;
    color:var(--c-primary);
}
.link-card .lc-go::after { content:'→'; transition:transform .25s; }
.link-card:hover .lc-go::after { transform:translateX(4px); }

/* =========================================================
   2. 도서 출판
   ========================================================= */
.book-showcase {
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:64px; align-items:center;
}
.book-visual {
    position:relative;
    display:flex; justify-content:center;
    padding:40px;
    background:
        radial-gradient(ellipse 60% 60% at 50% 40%, rgba(184,152,90,.16), transparent 70%);
}
.book-visual img {
    width:100%; max-width:330px;
    box-shadow:var(--shadow-lg);
    border-radius:2px;
}
.book-detail .sec-no { margin-bottom:16px; }
.book-detail h3 {
    font-family:var(--serif);
    font-size:32px; font-weight:800;
    color:var(--c-primary);
    line-height:1.25; margin-bottom:14px;
}
.book-detail .book-tagline {
    font-size:16px; color:var(--c-text-soft);
    line-height:1.8; margin-bottom:26px;
    word-break:keep-all;
}
.book-price {
    display:flex; align-items:baseline; gap:12px;
    margin-bottom:30px;
    padding-bottom:26px;
    border-bottom:1px solid var(--c-line);
}
.book-price .now {
    font-family:var(--serif);
    font-size:34px; font-weight:800; color:var(--c-primary);
}
.book-price .now small { font-size:18px; font-weight:600; }
.book-price .save {
    font-size:13px; font-weight:700;
    color:var(--c-white); background:var(--c-danger);
    padding:4px 10px; border-radius:2px;
}
.book-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* =========================================================
   3. 교육 과정 / 4. 자탐 모임 — 코스 카드
   ========================================================= */
.course-grid { display:grid; gap:24px; }
.course-grid.col-3 { grid-template-columns:repeat(3, 1fr); }
.course-grid.col-2 { grid-template-columns:repeat(2, 1fr); max-width:840px; margin:0 auto; }

.course-card {
    display:flex; flex-direction:column;
    background:var(--c-white);
    border:1px solid var(--c-line);
    padding:38px 32px;
    transition:all .35s var(--ease);
}
.course-card:hover {
    border-color:var(--c-primary);
    box-shadow:var(--shadow-lg);
    transform:translateY(-6px);
}
.course-card .cc-icon {
    width:56px; height:56px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--c-line);
    color:var(--c-accent);
    margin-bottom:24px;
    transition:all .35s var(--ease);
}
.course-card:hover .cc-icon {
    background:var(--c-primary); border-color:var(--c-primary);
    color:var(--c-accent);
}
.course-card .cc-icon svg { width:30px; height:30px; }
.course-card .cc-no {
    font-size:12px; font-weight:700; letter-spacing:.15em;
    color:var(--c-accent); margin-bottom:8px;
}
.course-card h4 {
    font-family:var(--serif);
    font-size:23px; font-weight:700;
    color:var(--c-primary); margin-bottom:12px;
}
.course-card > p {
    font-size:15px; line-height:1.75;
    color:var(--c-text-soft);
    word-break:keep-all; margin-bottom:20px;
    flex:1;
}
.cc-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.cc-tags a, .cc-tags span {
    font-size:13px; font-weight:600;
    color:var(--c-text-soft);
    background:var(--c-bg-soft);
    border:1px solid var(--c-line);
    padding:6px 12px; border-radius:20px;
    transition:all .2s;
}
.cc-tags a:hover {
    background:var(--c-primary); border-color:var(--c-primary);
    color:var(--c-white);
}
.course-card .cc-go {
    display:inline-flex; align-items:center; gap:6px;
    font-size:14px; font-weight:600; color:var(--c-primary);
    align-self:flex-start;
}
.course-card .cc-go::after { content:'→'; transition:transform .25s; }
.course-card:hover .cc-go::after { transform:translateX(4px); }

/* =========================================================
   4. 자탐 모임 — gal_fa.jpg 영상 썸네일 피처
   ========================================================= */
.meeting-wrap {
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:56px; align-items:center;
}
.meeting-media {
    position:relative; display:block;
    border:1px solid var(--c-line);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    aspect-ratio:16 / 9;
}
.meeting-media img {
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .6s var(--ease);
}
.meeting-media::after {
    content:''; position:absolute; inset:0;
    background:rgba(20,26,61,0);
    transition:background .3s var(--ease);
}
.meeting-media:hover img { transform:scale(1.04); }
.meeting-media:hover::after { background:rgba(20,26,61,.18); }
.meeting-media .media-tag {
    position:absolute; top:16px; left:16px; z-index:2;
    background:var(--c-accent); color:var(--c-primary-dk);
    font-size:12px; font-weight:700; letter-spacing:.05em;
    padding:6px 13px;
}
.meeting-media .play-btn {
    position:absolute; top:50%; left:50%; z-index:2;
    transform:translate(-50%,-50%);
    width:74px; height:74px; border-radius:50%;
    background:rgba(31,42,94,.82);
    border:2px solid rgba(255,255,255,.9);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    transition:all .3s var(--ease);
}
.meeting-media .play-btn svg { width:30px; height:30px; margin-left:3px; }
.meeting-media:hover .play-btn {
    background:var(--c-accent); border-color:#fff;
    color:var(--c-primary-dk);
    transform:translate(-50%,-50%) scale(1.08);
}
.meeting-info .sec-no { margin-bottom:16px; }
.meeting-info .sec-title { margin-bottom:16px; }
.meeting-info .sec-lead { margin-bottom:26px; }
.meeting-points {
    margin-bottom:30px;
    display:flex; flex-direction:column; gap:14px;
}
.meeting-points li {
    position:relative;
    padding-left:20px;
    font-size:15.5px; line-height:1.65;
    color:var(--c-text-soft);
    word-break:keep-all;
}
.meeting-points li::before {
    content:''; position:absolute; left:0; top:9px;
    width:7px; height:7px; border-radius:50%;
    background:var(--c-accent);
}
.meeting-points li strong {
    display:inline-block; margin-right:6px;
    color:var(--c-primary); font-weight:700;
}
.meeting-links { display:flex; flex-wrap:wrap; gap:12px; }

/* =========================================================
   3. 교육 과정 — 학사모 졸업생 사진 배경
   ========================================================= */
.sec--edu {
    position:relative;
    background:
        linear-gradient(180deg, rgba(20,26,61,.78) 0%, rgba(20,26,61,.7) 45%, rgba(20,26,61,.82) 100%),
        url('/img/edu_bg.jpg') center center / cover no-repeat;
    background-attachment:fixed;
}
.sec--edu .sec-title { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.4); }
.sec--edu .sec-lead { color:rgba(255,255,255,.88); }
.sec--edu .sec-no { color:var(--c-accent); justify-content:center; }

/* =========================================================
   5. 자탐 카페 (개발 중)
   ========================================================= */
.cafe-band {
    background:
        radial-gradient(ellipse 50% 80% at 80% 50%, rgba(184,152,90,.18), transparent 65%),
        var(--c-primary);
    color:var(--c-white);
    text-align:center;
    padding:110px 0;
}
.cafe-band .sec-no { color:var(--c-accent); justify-content:center; }
.cafe-band .sec-no::before { background:var(--c-accent); }
.cafe-soon-badge {
    display:inline-block;
    font-size:13px; font-weight:700; letter-spacing:.1em;
    color:var(--c-primary); background:var(--c-accent);
    padding:6px 16px; border-radius:20px;
    margin-bottom:24px;
}
.cafe-band h2 {
    font-family:var(--serif);
    font-size:clamp(30px, 4vw, 46px); font-weight:800;
    color:var(--c-white); margin-bottom:18px;
    letter-spacing:-.02em;
}
.cafe-band p {
    font-size:17px; line-height:1.8;
    color:rgba(255,255,255,.75);
    max-width:560px; margin:0 auto;
    word-break:keep-all;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1240px) {
    .sec-dots { display:none; }
}
@media (max-width:960px) {
    .sec { padding:80px 0; }
    .sec-head { margin-bottom:44px; }
    .sec-title { font-size:30px; }
    .sec-lead { font-size:16px; }

    .hero { min-height:540px; max-height:none; height:calc(100vh - var(--header-h)); }
    .hero-menu a { min-width:140px; padding:14px 20px; font-size:15px; }

    .link-grid.col-4 { grid-template-columns:repeat(2, 1fr); }
    .course-grid.col-3 { grid-template-columns:1fr; }

    .book-showcase { grid-template-columns:1fr; gap:36px; }
    .book-visual { padding:24px; }
    .book-visual img { max-width:240px; }
    .book-detail { text-align:center; }
    .book-detail .sec-head, .book-detail .sec-no { justify-content:center; }
    .book-price { justify-content:center; }
    .book-actions { justify-content:center; }

    .cafe-band { padding:80px 0; }
    .sec--edu { background-attachment:scroll; }

    .meeting-wrap { grid-template-columns:1fr; gap:32px; }
    .meeting-info { text-align:center; }
    .meeting-info .sec-no { justify-content:center; }
    .meeting-points { text-align:left; max-width:480px; margin-left:auto; margin-right:auto; }
    .meeting-links { justify-content:center; }
}
@media (max-width:600px) {
    .sec { padding:64px 0; }
    .sec-title { font-size:25px; }
    .sec-no { font-size:12px; }

    .hero { min-height:520px; }
    .hero-eyebrow { font-size:11px; letter-spacing:.3em; }
    .hero-menu { gap:10px; }
    .hero-menu a {
        flex:1 1 calc(50% - 10px);
        min-width:0; padding:14px 10px; font-size:14px;
    }
    .hero-scroll { display:none; }

    .link-grid.col-4, .link-grid.col-2 { grid-template-columns:1fr; }
    .link-card p { min-height:0; }

    .book-detail h3 { font-size:26px; }
    .book-price .now { font-size:28px; }
    .course-card { padding:30px 24px; }
    .course-grid.col-2 { grid-template-columns:1fr; }

    .meeting-media .play-btn { width:58px; height:58px; }
    .meeting-media .play-btn svg { width:24px; height:24px; }
    .meeting-links .btn { flex:1; min-width:140px; }
}