/* 원본 색 변수(public/Regularclass/index.html :root, 34~56행)를 문자 그대로 옮겨 쓴다.
   전역 CSS는 건드리지 않고 이 컴포넌트 scoped 안에서만 값을 그대로 사용(하드코딩).
   --mint:#21b173 · --mint-d:#156a47 · --mint-soft:#e6f5ec · --ink:#0f1c17 · --ink-2:#4a5550
   --ink-3:#7a857f · --bg:#fff · --gut-mob:20px · --gut-pc:24px · --y-mark:rgba(255,209,68,.85) */
.ins_page[data-v-22aa00ec] {
    background: #fff;
    /* 정규과정 원본(public/Regularclass/index.html)·온라인 상세페이지와 같은 본문 폰트.
       사이트 기본(Noto Sans KR)보다 획이 부드럽고 자간이 고르다. 링크는 mounted 에서 주입한다. */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 제목·경로는 전역 CSS(base/content.css)가 font-family 를 직접 지정해 상속을 덮는다 — 같은 폰트로 맞춘다. */
.ins_page h1[data-v-22aa00ec],
.ins_page h2[data-v-22aa00ec],
.ins_page h3[data-v-22aa00ec],
.ins_page .breadcrumb_nav[data-v-22aa00ec],
.ins_page .breadcrumb_nav a[data-v-22aa00ec],
.ins_page button[data-v-22aa00ec] {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.ins_hero[data-v-22aa00ec] {
    position: relative;
    overflow: hidden;
    /* 좌우 여백은 .ins_inner 가 맡는다(brand.vue 의 .sub_con_wrapB 와 같은 어법 — 최대폭
       1340px 안쪽에 40px). 배경 그라데이션은 여기 그대로 두어 화면 전체 폭을 덮는다.
       위 여백 100px = 탭 하단에서 경로까지 112px 중 .breadcrumb_nav 의 margin-top 12px 을
       뺀 값. /brand 는 .sub_con_wrapB padding-top 230px 에서 탭의 margin-bottom:-130px 이
       상쇄돼 같은 100px 이 남는다. */
    padding: 100px 0 160px;
    /* 원본 section.s.ins-s 배경 그대로 — 흰 바탕 위에 옅은 민트 방사형 그라데이션 */
    background: radial-gradient(197.87% 158.38% at 35.19% -5.67%, rgba(33, 177, 115, 0.05) 0%, rgba(33, 177, 115, 0.05) 67.58%), #ffffff;
}
.ins_inner[data-v-22aa00ec] {
    /* brand.vue 의 .sub_con_wrapB(layout.css) 규격 그대로 — 최대폭 1340px · 좌우 padding 40px.
       두 페이지의 경로·제목·본문이 정확히 같은 좌측 정렬선에서 시작한다. */
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
}

/* 경로(breadcrumb) — 위치·크기·간격은 base.css 공통값(13px · margin 12px 0 8px)을 그대로 쓰고
   색만 밝은 테마로 바꾼다. 공통값의 #888·#bbb·hover #EE732E 는 검정 배경을 전제한 값이라
   흰+민트 배경에서 뜬다.
   ⚠️ --ink-3(#7a857f) 를 그대로 쓰면 흰 배경에서 명도 대비가 3.8:1 로 13px 작은 글자 기준
   미달이다(/brand 의 #888 은 검정 배경 위라 5.4:1). 같은 색 계열에서 한 단계만 내려
   4.7:1 로 맞춰 두 페이지의 "보이는 진하기"를 같게 한다. */
.breadcrumb_nav[data-v-22aa00ec] { color: #9aa5a0;
}
.breadcrumb_nav a[data-v-22aa00ec] { color: #9aa5a0;
}
.breadcrumb_nav a[data-v-22aa00ec]:hover { color: #156a47;
}
.breadcrumb_nav li + li[data-v-22aa00ec]::before { color: #c2cbc6;
}

/* 페이지 제목 — brand.vue 의 h1.title(content.css 2104행: 24px/700)과 같은 크기·굵기.
   위 간격 8px 은 .breadcrumb_nav 의 margin-bottom 이 만든다(brand 와 동일). */
.page_title[data-v-22aa00ec] {
    /* 폰트는 페이지 전체와 같은 Pretendard, 굵기는 /brand(700)보다 한 단계 올린 800.
       Pretendard 는 같은 값에서 Noto 보다 6% 얇게 그려지므로 굵기로 시각 무게를 맞춘다. */
    font-size: 24px;
    font-weight: 800;
    color: #0f1c17;
    margin: 0 0 24px;
}
.sec_title[data-v-22aa00ec] {
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #0f1c17;
    margin: 64px 0 40px;
}
/* 모바일 전용 줄바꿈 — "강사진을 소개합니다" 부터 다음 줄로 내린다. PC 는 한 줄에 들어가므로 숨긴다. */
.br_mo[data-v-22aa00ec] { display: none;
}

/* 두 번째 섹션(스페셜 과정)은 앞 섹션과 구분되도록 위 여백을 더 크게 둔다. */
.sec_title--special[data-v-22aa00ec] { margin-top: 160px;
}
.sec_title .mark[data-v-22aa00ec] {
    background-image: linear-gradient(transparent 60%, rgba(195, 247, 238, 0.95) 60%, rgba(195, 247, 238, 0.95) 94%, transparent 94%);
    padding: 0 3px;
}
@media (min-width: 951px) {
.sec_title[data-v-22aa00ec] { font-size: 40px; line-height: 1.35; margin-top: 80px; margin-bottom: 48px;
}
    /* 위 줄이 뒤에 와서 바깥의 --special 규칙을 덮으므로 같은 블록 안에서 다시 지정한다. */
.sec_title--special[data-v-22aa00ec] { margin-top: 160px;
}
    /* 경로·페이지 제목(강사진 소개)은 /brand 와 같은 좌측 정렬선(x 87.5)에 그대로 두고,
       콘텐츠(큰 문장 + 카드 목록)만 좁혀 가운데에 둔다. */
.sec_title[data-v-22aa00ec] { max-width: 1080px; margin-left: auto; margin-right: auto;
}
.instructor_list[data-v-22aa00ec] { max-width: 1080px; margin-left: auto; margin-right: auto;
}
}
.instructor_list[data-v-22aa00ec] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.instructor_card[data-v-22aa00ec] {
    display: flex;
    gap: 40px;
    padding: 32px;
    /* 원본 .ins-card — 흰 반투명 카드 + 그림자, 테두리선 없음 */
    background: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    box-shadow: 0 14px 32px -22px rgba(15, 28, 23, 0.18);
}
.instructor_photo[data-v-22aa00ec] {
    /* 카드가 1080 → 1340 규격으로 넓어지면서 같은 35% 면 사진이 이력 칸보다 길어진다.
       접힘(기본) 상태에서 사진 하단과 "약력 더보기" 하단이 맞도록 비율을 다시 잡았다
       (카드 안쪽 1196px 기준 32% ≈ 383px → 높이 ≈ 308px = 접힘 이력 높이). */
    flex: 0 0 38%;
    max-width: 38%;
    /* 좌우 구조에서 사진·이력 높이가 안 맞을 때(펼침 시 특히) 부모(.instructor_card)의
       align-items:stretch 기본값이 사진 칸을 이력 높이만큼 늘려 사진 아래에 큰 빈 칸을
       만든다. 사진은 자기 높이(aspect-ratio)만큼만 차지하고 카드 상단에 붙인다 —
       사진을 텍스트 높이로 늘리면(height:100%) 원본 비율(473/380)이 깨지고 얼굴이 잘린다. */
    align-self: flex-start;
}
/* 세로로 긴 원본 사진은 위를 기준으로 잘라야 얼굴이 살아남는다(기본은 가운데). */
.instructor_photo img.is_top[data-v-22aa00ec] { -o-object-position: center top; object-position: center top;
}
.instructor_photo img[data-v-22aa00ec] {
    display: block;
    width: 100%;
    /* height="380" HTML 속성이 있으면 aspect-ratio 가 계산할 대상이 없어져(가로·세로 둘 다
       확정값) 폭을 줄여도 높이가 380px 에 고정된 채 비율이 깨진다 — height:auto 로 그
       속성을 무시하게 해야 aspect-ratio 가 실제로 폭에서 높이를 계산한다. */
    height: auto;
    aspect-ratio: 473 / 380;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    background: #eef3f0;
}
.instructor_body[data-v-22aa00ec] { flex: 1; min-width: 0; padding-top: 4px;
}
.instructor_name[data-v-22aa00ec] {
    /* 원본 .ins-name 그대로 */
    font-size: 20px;
    font-weight: 700;
    color: #156a47;
    letter-spacing: -0.16px;
    line-height: 1.4;
    margin: 0 0 16px;
}
.instructor_name .instructor_role[data-v-22aa00ec] {
    /* 원본 — 이름과 직함 전체가 한 스타일(상속) */
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin-left: 8px;
}
.instructor_cred[data-v-22aa00ec] { margin: 0; padding: 0; list-style: none;
}
.instructor_cred li[data-v-22aa00ec] {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    /* 원본 .ins-cred li 그대로 — flat px, 뷰포트와 무관하게 항상 14px */
    font-size: 14px;
    font-weight: 400;
    color: #0f1c17;
    line-height: 1.6;
    letter-spacing: -0.16px;
}
.instructor_cred li[data-v-22aa00ec]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #21b173;
}
.instructor_more[data-v-22aa00ec] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 8px 0;
    /* 원본 .ins-more 그대로 — flat px */
    font-size: 14px;
    font-weight: 600;
    color: #156a47;
    letter-spacing: -0.16px;
    background: none;
    border: 0;
    cursor: pointer;
}
.instructor_more_arrow[data-v-22aa00ec] { width: 13px; height: 13px; transition: transform 0.2s ease;
}
.instructor_more.is_open .instructor_more_arrow[data-v-22aa00ec] { transform: rotate(180deg);
}

/* 이 아래는 원본에 없던 "세로 카드 스택"으로 새로 짠 구조라 rem 이 아닌 flat px 로 직접
   조정한다(글자 크기는 위에서 이미 flat px 로 고정했으니 뷰포트가 좁아져도 변하지 않는다 —
   layout.css 의 950/640/420/340px 4단 root 축소와 무관해 지난번 같은 문제가 생기지 않는다). */
@media (max-width: 950px) {
    /* 위 여백·좌우 여백은 /brand 의 모바일 규격(.sub_con_wrapB #content { padding: 22.4rem 4.8rem })
       을 그대로 따른다 — 두 페이지의 탭 아래 간격과 좌측 정렬선이 모바일에서도 같아진다.
       ⚠️ rem 은 layout.css 의 4단 축소(950→10px · 640→6px · 420→5px · 340→4px)를 탄다.
       390px 에서 22.4rem=112px · 4.8rem=24px 로 /brand 와 같은 값이 된다. */
.ins_hero[data-v-22aa00ec] { padding: 22.4rem 0 120px;
}
.ins_inner[data-v-22aa00ec] { padding: 0 4.8rem;
}
    /* 크기는 390px 에서 /brand 의 h1.title 과 같은 22px 로 맞추되 rem 이 아닌 flat px 로 둔다 —
       /brand 는 4.4rem 이라 951px 에서 44px 로 뛰어, 여기서는 리드 문장(.sec_title flat 32px)과
       크기 관계가 뒤집힌다. flat 22px 이면 어느 폭에서도 리드보다 작다. */
    /* 모바일에서는 경로를 감춘다 — /brand 는 히어로 사진이 경로를 덮어 실질적으로 보이지 않는다
       (실측: elementsFromPoint 맨 위가 .about_us_top). 두 페이지의 제목 위치를 같게 유지해야 하므로
       공간은 그대로 두고 보이기만 감춘다(경로 구조는 JSON-LD 로 유지된다). */
.breadcrumb_nav[data-v-22aa00ec] { visibility: hidden;
}
    /* /brand 의 h1.title 은 전역 content.css(6398행)에서 모바일 4.4rem 이다.
       rem 은 layout.css 의 4단 축소(950→10px · 640→6px · 420→5px)를 타므로
       flat px 로 두면 폭에 따라 최대 2배까지 벌어진다(950~641px 구간: 44px vs 22px).
       같은 rem 값을 써야 모든 모바일 폭에서 크기가 일치한다. */
.page_title[data-v-22aa00ec] { font-size: 4.4rem; margin-bottom: 3.6rem;
}
.sec_title[data-v-22aa00ec] { font-size: 32px; margin-top: 84px; margin-bottom: 32px;
}
.sec_title--special[data-v-22aa00ec] { margin-top: 128px;
}
.br_mo[data-v-22aa00ec] { display: inline;
}
    /* 모바일은 두 줄로 나뉘므로 포인트를 윗줄에만 둔다(둘째 줄 "강사진"의 밑줄 해제). */
.sec_title .mark_pc[data-v-22aa00ec] { background-image: none; padding: 0;
}
.instructor_list[data-v-22aa00ec] { gap: 24px;
}
.instructor_card[data-v-22aa00ec] {
        flex-direction: column;
        gap: 0;
        padding: 24px;
        border-radius: 12px;
}
.instructor_photo[data-v-22aa00ec] { flex: none; max-width: 100%; margin-bottom: 20px;
}
.instructor_body[data-v-22aa00ec] { padding-top: 0;
}
}