/* AB 학원소개 · CU 교육과정 — 소개 성격의 두 화면이 같은 구성이라 한 벌만 둡니다([UD-3] about · curriculum). */

.view { padding: clamp(44px, 6vw, 72px) 24px 0; }

/* 가운데 정렬 섹션 머리 */
.section-center { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 48px); text-align: center; }
.section-center .section-eyebrow { justify-content: center; }
.section-center .section-desc { margin-left: auto; margin-right: auto; }

/* 카드 hover — [UD-2] 05 "Hover: -6px 리프트 + 골드 탑바, Shadow는 hover에만" */
.step-card, .system-card { position: relative; background: var(--surface); border: 1px solid var(--line);
    transition: transform .25s, box-shadow .25s; }
.step-card::before, .system-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px;
    background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.step-card:hover, .system-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -20px rgba(13, 22, 38, .35); }
.step-card:hover::before, .system-card:hover::before { transform: scaleX(1); }

/* ══════════ AB-01 교육철학 ══════════ */
.vision { max-width: 820px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.vision-eyebrow { margin: 0 0 14px; font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--gold-500); }
.vision-title { margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.3; color: var(--navy-800); }
.vision-desc { margin: 22px 0 0; font-size: 16px; color: var(--text-mute); }

.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.step-card { padding: 34px 30px 36px; }
.step-no { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--gold-500); }
.step-card h3 { margin: 14px 0; font-size: 22px; line-height: 1.45; color: var(--navy-800); }
.step-card p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-mute); }

/* ══════════ AB-02 원장 · 강사진 ══════════ */
.director-block { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(32px, 5vw, 64px);
    align-items: center; margin-bottom: clamp(56px, 8vw, 88px); }
/* 인물 사진 프레임 — [UD-2] 05 "모든 이미지에 인셋 10–14px Line Gold 프레임, 이미지 부재 시 Navy 그라디언트" */
.director-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); }
.director-frame::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(201, 164, 92, .4); pointer-events: none; }
.director-photo { position: absolute; inset: 0; display: grid; place-items: center; background-size: cover;
    background-position: center; color: var(--gold-300); font-family: var(--font-serif); font-size: 72px; }
.director-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 56px 30px 28px;
    display: grid; gap: 4px; font-size: 13px; color: rgba(255, 255, 255, .75);
    background: linear-gradient(transparent, rgba(13, 22, 38, .8)); }
.director-caption b { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: #fff; }
.director-body .section-title { margin-bottom: 18px; }
.director-summary { margin: 0 0 22px; font-size: 15px; line-height: 1.8; color: var(--text-mute); }
.career-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.career-list li { display: flex; align-items: baseline; gap: 18px; padding: 14px 0;
    border-bottom: 1px solid var(--line); font-size: 15px; }
.career-no { flex: none; min-width: 28px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--gold-500); }

.teacher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; margin-top: 28px; }
.teacher-card { background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.teacher-photo { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--gold-300);
    font-family: var(--font-serif); font-size: 40px;
    background: linear-gradient(150deg, var(--navy-700), var(--navy-900)) center / cover no-repeat; }
.teacher-body { padding: 22px 22px 26px; }
.teacher-position { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--gold-500); }
.teacher-body h3 { margin: 6px 0 10px; font-size: 19px; color: var(--navy-800); }
.teacher-summary { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-mute); }
.teacher-careers { margin: 14px 0 0; padding: 12px 0 0 16px; border-top: 1px solid var(--line);
    font-size: 13px; line-height: 1.8; color: var(--text-mute); }

/* ══════════ AB-03 갤러리 ══════════ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.gallery-item { position: relative; aspect-ratio: 4 / 3; padding: 0; border: none; cursor: pointer; overflow: hidden;
    background: var(--navy-800); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 28px 14px 12px;
    text-align: left; background: linear-gradient(transparent, rgba(13, 22, 38, .78)); }
.gallery-cap .en { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--gold-300); }
.gallery-cap .ko { font-size: 13px; font-weight: 600; color: #fff; }
.gallery-hint { display: none; margin: 14px 0 0; font-size: 13px; text-align: center; color: var(--text-mute); }

.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    background: rgba(13, 22, 38, .92); }
.lightbox-figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.lightbox-image { max-width: 86vw; max-height: 76vh; object-fit: contain; border: 1px solid rgba(201, 164, 92, .4); }
.lightbox-caption { display: flex; align-items: baseline; gap: 12px; color: #fff; }
.lb-en { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--gold-300); }
.lb-label { font-size: 14px; font-weight: 600; }
.lb-count { font-family: var(--font-display); font-size: 15px; color: rgba(255, 255, 255, .6); }
.lightbox-close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; display: grid; place-items: center;
    padding: 0; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; }
.lightbox-close:hover { color: var(--gold-300); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid;
    place-items: center; padding: 0; cursor: pointer; font-size: 24px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.lightbox-nav:hover { border-color: var(--gold-500); color: var(--gold-300); }
.lightbox-nav.is-prev { left: 20px; }
.lightbox-nav.is-next { right: 20px; }

/* ══════════ AB-04 오시는 길 ══════════ */
.location { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: stretch; }
.map-box { position: relative; min-height: 360px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 32px; text-align: center;
    background: linear-gradient(150deg, #E9E5DC, var(--bg)); border: 1px solid var(--line); }
.map-pin { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); background: var(--navy-800); }
.map-pin::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-500); }
.map-name { margin: 12px 0 0; font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--navy-800); }
.map-address { margin: 0; font-size: 14px; color: var(--text-mute); }
.map-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.map-link { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--navy-800);
    background: var(--surface); border: 1px solid rgba(21, 34, 56, .2); }
.map-link:hover { border-color: var(--gold-500); color: var(--gold-700); }
.location-info .section-title { margin-bottom: 22px; }
.location-rows { display: grid; margin: 0; border-top: 2px solid var(--navy-800); }
.location-rows > div { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.location-rows dt { font-size: 13px; font-weight: 700; color: var(--navy-800); }
.location-rows dd { margin: 0; font-size: 14.5px; line-height: 1.7; }

/* ══════════ CU-01 대상별 커리큘럼 ══════════ */
.target-tabs { justify-content: center; margin-bottom: 28px; }
.target-tabs .chip { padding: 12px 26px; font-size: 14px; font-weight: 700; }
.cur-panel { background: var(--surface); border: 1px solid var(--line); padding: clamp(28px, 4vw, 48px); }
.cur-en { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--gold-500); }
.cur-message { margin: 10px 0 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.45; color: var(--navy-800); }
.cur-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.keyword { padding: 7px 15px; font-size: 13.5px; font-weight: 600; color: var(--navy-800);
    background: var(--bg); border: 1px solid var(--line); }
.cur-content { margin-top: 28px; }
.cur-content > p:first-child { margin-top: 0; font-size: 16px; color: var(--text-mute); }
/* 단계 표 — [UD-2] 08 "상단 2px Navy 룰 + 헤더 캡스 · 줄무늬 금지, 1px Line 행 구분만" */
.cur-content table { border-top: 2px solid var(--navy-800); }
.cur-content th { background: none; border: none; border-bottom: 1px solid var(--line); text-align: left;
    font-size: 12.5px; letter-spacing: .06em; color: var(--text-mute); }
.cur-content td { border: none; border-bottom: 1px solid var(--line); }
/* 첫 칸은 최소 170px, 이름이 길면(성인부 「Specialized Conversation」 — 2026-09-25) 그만큼 넓어져 한 줄로 */
.cur-content td:first-child { width: 170px; white-space: nowrap; font-weight: 700; color: var(--navy-800); }

/* ══════════ CU-02 학습 시스템 ══════════ */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.process-step { position: relative; padding: 26px 16px; text-align: center; background: var(--surface); border: 1px solid var(--line); }
/* 웹은 가로 화살표 흐름, 모바일은 세로 흐름([SD-3] 교육과정 §7) */
/* 화살표는 칸 사이 틈(16px) 한가운데에 둡니다 — 글자(→)였을 때는 기준선 탓에 위아래로 어긋났습니다(아이콘: tokens.css) */
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -16px; z-index: 1;
    width: 14px; height: 14px; transform: translateY(-50%); background: var(--gold-500);
    -webkit-mask: var(--icon-arrow-right) center / contain no-repeat; mask: var(--icon-arrow-right) center / contain no-repeat; }
.process-no { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--gold-500); }
.process-step strong { display: block; margin: 8px 0 4px; font-family: var(--font-serif); font-size: 18px;
    font-weight: 600; color: var(--navy-800); }
.process-step p { margin: 0; font-size: 13.5px; color: var(--text-mute); }
.process-note { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--text-mute); }
.process-note b { color: var(--navy-800); }

.system-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
    margin-top: clamp(40px, 6vw, 56px); }
.system-card { padding: clamp(28px, 4vw, 40px); }
.system-no { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--gold-500); }
.system-card h3 { margin: 12px 0 14px; font-size: 23px; color: var(--navy-800); }
.system-card p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-mute); }
.system-card .link-more { display: inline-block; margin-top: 18px; }
.system-points { display: grid; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.system-points li { position: relative; padding-left: 18px; font-size: 14px; font-weight: 600; color: var(--navy-800); }
.system-points li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--gold-500); }

/* ══════════ CU-03 변화 사례 ══════════ */
.chart-card { margin-bottom: 28px; padding: clamp(24px, 4vw, 36px); background: var(--surface); border: 1px solid var(--line); }
.chart-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 36px; }
.chart-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.chart-name { font-size: 15px; font-weight: 700; color: var(--navy-800); }
.chart-delta { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold-500); }
.chart-bar { display: grid; grid-template-columns: 22px 1fr 56px; align-items: center; gap: 10px; margin-top: 6px; }
.chart-bar > span:first-child { font-size: 12px; color: var(--text-mute); }
.chart-track { height: 14px; overflow: hidden; background: rgba(21, 34, 56, .06); border-radius: var(--radius); }
.chart-track i { display: block; height: 100%; background: rgba(21, 34, 56, .2); }
.chart-bar.is-after .chart-track i { background: var(--gold-500); }
.chart-value { font-size: 13px; font-weight: 700; text-align: right; }
.chart-basis { margin: 20px 0 0; font-size: 12.5px; color: var(--text-mute); }

.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.case-card { padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); }
.case-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.case-period { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--gold-700); }
.case-card h3 { margin: 14px 0 10px; font-size: 20px; color: var(--navy-800); }
.case-content { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--text-mute); }
.case-note { margin: 18px 0 0; font-size: 12.5px; text-align: center; color: var(--text-mute); }

/* ══════════ 반응형 ══════════ */
/* ══════════ DATA-03 수강후기 — 자료실·나눔(board.css)에서 옮겨 왔습니다(2026-09-25 · 위치만 변경) ══════════ */
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.review-note { margin: 0; font-size: 13.5px; color: var(--text-mute); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.review-card { display: flex; flex-direction: column; padding: 24px 24px 20px; background: var(--surface); border: 1px solid var(--line); }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stars { color: var(--gold-500); letter-spacing: 2px; }
.star-off { color: #D6D9DE; }
.review-content { flex: 1; margin: 14px 0 16px; font-size: 15px; line-height: 1.75; white-space: pre-line; }
.review-by { margin: 0; font-size: 13px; color: var(--text-mute); }

/* 후기 작성 — 목록을 대신하는 인라인 화면([UD-3] archive).
   「‹ 후기 목록」은 자료실 상세의 .back-link(board.css)와 같은 모양 — 이 페이지에는 board.css가 없어 후기 폼 안에서만 다시 적습니다. */
.review-write .back-link { display: none; margin-bottom: 14px; padding: 6px 0; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--navy-800); }
.review-write { max-width: 720px; margin: 0 auto; }
.review-form { padding: clamp(26px, 4vw, 40px); background: var(--surface); border: 1px solid var(--line); }
.form-title { margin: 0; font-size: 26px; color: var(--navy-800); }
.form-lead { margin: 12px 0 26px; padding: 12px 14px; font-size: 14px; background: rgba(201, 164, 92, .1); }
.form-row > label em { color: var(--danger); font-style: normal; }
.label-sub { font-size: 12.5px; font-weight: 400; color: var(--text-mute); }
.star-input { display: flex; gap: 4px; }
.star-input button { padding: 0 2px; background: none; border: none; cursor: pointer; font-size: 28px; line-height: 1; color: #D6D9DE; }
.star-input button.is-on { color: var(--gold-500); }
.form-actions { display: flex; gap: 10px; margin-top: 26px; }
.form-actions .btn { flex: 1; }
.form-actions .btn:not(.btn-primary) { background: var(--surface); border-color: rgba(21, 34, 56, .2); color: var(--navy-800); }
.review-done { padding: 56px 28px; text-align: center; background: var(--surface); border: 1px solid rgba(201, 164, 92, .4); }
.done-eyebrow { margin: 0 0 10px; font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--gold-500); }
.review-done h2 { font-size: 24px; color: var(--navy-800); }
.review-done p:not(.done-eyebrow) { margin: 12px 0 26px; font-size: 14.5px; color: var(--text-mute); }

@media (max-width: 960px) {
    .review-head { flex-direction: column; align-items: stretch; }
    .review-grid { grid-template-columns: 1fr; }
    .review-write .back-link { display: inline-block; }
    .view { padding: 36px 20px 0; }
    .director-block, .location { grid-template-columns: 1fr; }
    .director-frame { width: 100%; max-width: 360px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gallery-hint { display: block; }
    .lightbox-nav { display: none; }          /* 모바일은 스와이프 */
    .lightbox-image { max-width: 94vw; }

    .target-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .target-tabs::-webkit-scrollbar { display: none; }
    .target-tabs .chip { flex: none; }
    /* 커리큘럼 표는 카드 세로 스택([SD-3] 교육과정 §7) */
    .cur-content table, .cur-content tbody, .cur-content tr, .cur-content td { display: block; width: auto; }
    .cur-content thead { display: none; }
    .cur-content tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .cur-content td { padding: 2px 0; border: none; }
    .cur-content td:first-child { width: auto; white-space: normal; }

    .process { grid-template-columns: 1fr; gap: 14px; }
    .process-step { display: grid; grid-template-columns: 52px 1fr; align-items: center; column-gap: 12px;
        padding: 16px 18px; text-align: left; }
    .process-no { grid-row: span 2; }
    .process-step strong { margin: 0; }
    /* 세로 흐름은 같은 화살표를 돌려 씁니다 — 칸 사이 틈(14px) 가운데 · 번호 열(52px) 가운데 */
    .process-step:not(:last-child)::after { top: auto; right: auto; bottom: -14px; left: 38px; width: 12px; height: 12px;
        transform: rotate(90deg); }
}