/* =============================================================
   인재상 페이지 CSS
   인재상_시안3종.html 의 inline 스타일을 추출한 파일
   ============================================================= */

/* ── 한글 줄바꿈 ─────────────────────────────────────────── */
.sas_sub_con_area { word-break: keep-all; }

/* ── 인재상 색상 테마 변수 (기본: 버건디 #800D00) ────────── */
:root {
    --c-main:          #800D00;
    --c-quad:          #F6EEED;
    --c-icon-border:   rgba(128, 13,  0, 0.20);
    --c-icon-border-h: rgba(128, 13,  0, 0.50);
    --c-icon-shadow:   rgba(128, 13,  0, 0.15);
    --c-num:           rgba(128, 13,  0, 0.40);
}
:root.theme-ruby {
    --c-main:          #A8151E;
    --c-quad:          #F9EFEF;
    --c-icon-border:   rgba(168, 21, 30, 0.20);
    --c-icon-border-h: rgba(168, 21, 30, 0.50);
    --c-icon-shadow:   rgba(168, 21, 30, 0.15);
    --c-num:           rgba(168, 21, 30, 0.40);
}
:root.theme-crimson {
    --c-main:          #D01C3C;
    --c-quad:          #FCEFF1;
    --c-icon-border:   rgba(208, 28, 60, 0.20);
    --c-icon-border-h: rgba(208, 28, 60, 0.50);
    --c-icon-shadow:   rgba(208, 28, 60, 0.15);
    --c-num:           rgba(208, 28, 60, 0.40);
}

/* ──────────────────────────────────────────────────────────
   시안 ① — 원형 다이어그램형
   ────────────────────────────────────────────────────────── */
.v1-slogan-band {
    background: var(--c-main); padding: 52px 60px 56px;
    text-align: center; position: relative; overflow: hidden;
}
.v1-slogan-band::before {
    content: ''; position: absolute; right: -60px; top: -60px;
    width: 280px; height: 280px;
    border: 48px solid rgba(255,255,255,.07); border-radius: 50%;
}
.v1-slogan-band::after {
    content: ''; position: absolute; right: 120px; bottom: -80px;
    width: 200px; height: 200px;
    border: 32px solid rgba(255,255,255,.07); border-radius: 50%;
}
.v1-eye-tag {
    display: inline-block; border: 1px solid rgba(255,255,255,.5);
    color: rgba(255,255,255,.9); font-size: 10px; letter-spacing: 5px;
    padding: 4px 16px; margin-bottom: 24px;
}
.v1-slogan-text {
    font-size: 40px; font-weight: 700; color: #fff;
    letter-spacing: 2px; line-height: 1.6; position: relative; z-index: 1;
}
.v1-desc-band {
    background: #fff; padding: 44px 60px 48px;
    text-align: center; border-bottom: 2px solid #f0f0f0;
}
.v1-desc-label {
    display: inline-block; border: 1px solid var(--c-icon-border);
    padding: 4px 16px; font-size: 10px; letter-spacing: 6px; font-weight: 700;
    color: var(--c-main); text-transform: uppercase; margin-bottom: 20px;
}
.v1-desc-text {
    font-size: 22px; color: #1A1A1A; line-height: 1.75;
    font-weight: 400; letter-spacing: 0.5px;
}
.v1-diagram-wrap {
    background: #ffffff; padding: 48px 40px 52px;
}
.v1-diagram-label {
    display: block; width: fit-content; margin: 0 auto 32px;
    border: 1px solid var(--c-icon-border); padding: 4px 16px;
    font-size: 10px; letter-spacing: 6px; font-weight: 700;
    color: var(--c-main); text-transform: uppercase;
}
.v1-diagram-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; position: relative; max-width: 820px;
    aspect-ratio: 1; margin: 0 auto;
    border-radius: 50%; overflow: hidden; background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
}
.v1-center-badge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 160px; height: 160px;
    background: var(--c-main); border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,.35);
    text-align: center; pointer-events: none;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.v1-diagram-grid:has(.v1-quad:hover) .v1-center-badge {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 6px 32px rgba(0,0,0,.32);
}
.v1-center-badge-ttl {
    font-size: 16px; font-weight: 700; color: #fff;
    letter-spacing: 2px; line-height: 1.3;
}
.v1-center-badge-sub {
    font-size: 11px; color: rgba(255,255,255,.8); letter-spacing: 1.5px; margin-top: 4px;
    font-weight: 700;
}
.v1-center-badge-icon {
    font-size: 2rem; color: rgba(255,255,255,.9); margin-bottom: 10px; line-height: 1;
}
.v1-footer-bar {
    background: #e8e8e8; padding: 22px 40px;
    display: flex; justify-content: center; gap: 48px; margin-top: 40px;
}
.v1-footer-item { display: flex; align-items: center; gap: 12px; }
.v1-footer-eng { font-size: 11px; color: #1A1A1A; letter-spacing: 2px; font-weight: 700; }
.v1-footer-kor { font-size: 13px; color: #555555; margin-top: 2px; }
.v1-fi-red, .v1-fi-blue, .v1-fi-grn, .v1-fi-pur { font-size: 1.4rem; color: var(--c-main); }
.v1-quad {
    padding: 26px 16px; position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    transition: filter .28s ease, transform .28s ease;
    overflow: hidden;
}
.v1-quad::after {
    content: ''; position: absolute; inset: 0;
    background: var(--c-main);
    opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.v1-quad:hover { transform: scale(1.03); }
.v1-quad:hover::after { opacity: 0.07; }
.v1-quad-num {
    font-size: 10px; letter-spacing: 3px; font-weight: 700;
    color: var(--c-num); margin-bottom: 10px;
}
.v1-quad-icon {
    width: 48px; height: 48px; border: 2px solid var(--c-icon-border);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--c-main); margin-bottom: 14px;
    transition: border-color .28s ease, box-shadow .28s ease;
}
.v1-quad:hover .v1-quad-icon {
    border-color: var(--c-icon-border-h);
    box-shadow: 0 0 10px var(--c-icon-shadow);
}
.v1-quad-name {
    font-size: 22px; font-weight: 700; color: #1A1A1A;
    letter-spacing: 1px; margin-bottom: 10px;
    transition: letter-spacing .28s ease, transform .28s ease;
}
.v1-quad:hover .v1-quad-name { letter-spacing: 2px; transform: translateY(-3px); }
.v1-quad-desc {
    font-size: 13px; color: rgba(0,0,0,.55); line-height: 1.75;
    max-width: 170px; margin: 0 auto; word-break: keep-all;
    transition: opacity .28s ease, transform .28s ease;
}
.v1-quad:hover .v1-quad-desc { opacity: 1; transform: translateY(-2px); }
/* 각 사분면 — 중앙 배지 방향으로 패딩 */
.v1-q1 { background: var(--c-quad); justify-content: center; padding: 80px 28px 4px; }
.v1-q2 { background: var(--c-quad); justify-content: center; padding: 80px 28px 4px; }
.v1-q3 { background: var(--c-quad); justify-content: center; padding: 4px 28px 90px; }
.v1-q4 { background: var(--c-quad); justify-content: center; padding: 4px 28px 90px; }

/* ──────────────────────────────────────────────────────────
   시안 ② — 심플형
   ────────────────────────────────────────────────────────── */
.v2-inner { max-width: 860px; margin: 0 auto; }
.v2-label {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: 2px; color: var(--c-main);
    margin-bottom: 16px;
}
.v2-vision-sec {
    padding: 72px 80px 60px; background: #fff;
    border-top: 3px solid var(--c-main); border-bottom: 1px solid #e8e8e8;
}
.v2-slogan-txt {
    font-size: 40px; font-weight: 700; color: #1A1A1A;
    letter-spacing: 1px; line-height: 1.55; word-break: keep-all;
    margin-bottom: 32px;
}
.v2-vision-line {
    width: 36px; height: 2px; background: var(--c-main);
    margin: 0 0 28px; border-radius: 2px;
}
.v2-talent-txt {
    font-size: 18px; color: #444; line-height: 1.9;
    font-weight: 400; word-break: keep-all;
}
.v2-cv-sec { padding: 68px 80px 80px; background: #f8f8f8; }
.v2-cv-row {
    display: grid; grid-template-columns: 130px 1fr;
    column-gap: 32px; align-items: center;
    padding: 20px 0; border-top: 1px solid #d8d8d8;
}
.v2-cv-row:last-child { border-bottom: 1px solid #d8d8d8; }
.v2-cv-name {
    font-size: 17px; font-weight: 700; color: #1A1A1A; letter-spacing: 0;
}
.v2-cv-eng {
    font-size: 9px; color: #888; letter-spacing: 2px;
    font-weight: 600; margin-top: 6px; text-transform: uppercase;
}
.v2-cv-desc { font-size: 15px; color: #555; line-height: 1.4; word-break: keep-all; }

/* ──────────────────────────────────────────────────────────
   시안 ③ — 카드형 (파일 스택 레이아웃)
   ────────────────────────────────────────────────────────── */
.v3-hero {
    background: var(--c-main); padding: 56px 64px 68px;
    position: relative; overflow: hidden;
    border-radius: 24px 24px 0 0;
}
.v3-hero::before {
    content: ''; position: absolute; right: -20px; top: -40px;
    width: 148px; height: 200px;
    border: 2px solid rgba(255,255,255,.20);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    transform: rotate(14deg);
}
.v3-hero::after {
    content: ''; position: absolute; right: 68px; top: -60px;
    width: 120px; height: 180px;
    border: 2px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    transform: rotate(14deg);
}
.v3-hero-tag {
    font-size: 10px; letter-spacing: 6px; font-weight: 700;
    color: rgba(255,255,255,.8); text-transform: uppercase; margin-bottom: 22px;
}
.v3-hero-slogan {
    font-size: 40px; font-weight: 700; color: #fff;
    letter-spacing: 2px; line-height: 1.6; position: relative; z-index: 1;
}
.v3-sec-tag {
    font-size: 10px; letter-spacing: 5px; font-weight: 700;
    color: var(--c-main); text-transform: uppercase; margin-bottom: 10px;
}
.v3-talent-label {
    font-size: 26px; font-weight: 700; color: #1A1A1A;
    letter-spacing: 1px; margin-bottom: 20px;
}
.v3-talent-text {
    font-size: 22px; color: #1A1A1A; line-height: 1.75; font-weight: 400;
}
.v3-cv-title {
    font-size: 26px; font-weight: 700; color: #1A1A1A;
    letter-spacing: 1px; margin-bottom: 32px;
}
.v3-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.v3-card {
    border-radius: 12px; overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex; flex-direction: column;
    background: #ffffff;
}
.v3-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.24);
}
.v3-card-head { padding: 26px 24px 24px; }
.v3-card-icon {
    width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 16px;
    background: rgba(255,255,255,.20); color: #fff;
}
.v3-card-name {
    font-size: 20px; font-weight: 700; color: #fff;
    letter-spacing: 2px; line-height: 1; margin-bottom: 4px;
}
.v3-card-eng { font-size: 9px; color: rgba(255,255,255,.65); letter-spacing: 2px; }
.v3-card-body { padding: 20px 24px 28px; background: #fff; flex: 1; }
.v3-card-bar { width: 28px; height: 3px; margin-bottom: 14px; }
.v3-card-desc { font-size: 14px; color: #4a5568; line-height: 1.95; word-break: keep-all; }
/* 카드 헤더 색상 */
.v3-cc1 .v3-card-head { background: var(--c-main); }
.v3-cc1 .v3-card-bar  { background: var(--c-main); }
.v3-cc2 .v3-card-head { background: #1a6b8a; }
.v3-cc2 .v3-card-bar  { background: #1a6b8a; }
.v3-cc3 .v3-card-head { background: #1a1a1a; }
.v3-cc3 .v3-card-bar  { background: #1a1a1a; }
.v3-cc4 .v3-card-head { background: #3a4f6e; }
.v3-cc4 .v3-card-bar  { background: #3a4f6e; }
/* 파일 스택 레이아웃 */
.v3-talent-sec {
    background: #f2efed; padding: 64px 64px 80px;
    margin-top: -28px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    box-shadow: 0 -4px 10px rgba(0,0,0,.38);
    position: relative; z-index: 2;
}
.v3-cv-sec {
    background: #d4cdc6; padding: 44px 64px 52px;
    margin-top: -28px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    box-shadow: 0 -4px 10px rgba(80,60,50,.42);
    position: relative; z-index: 3;
}
.v3-cv-sec .v3-sec-tag  { color: #1a1a1a; }
.v3-cv-sec .v3-cv-title { color: #1a1a1a; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .v2-kv-defs, .v3-cards { grid-template-columns: repeat(2,1fr); }
    .v1-slogan-band  { padding: 40px 24px 44px; }
    .v1-slogan-text  { font-size: 30px; }
    .v1-desc-band    { padding: 36px 24px 40px; }
    .v1-desc-text    { font-size: 19px; }
    .v1-diagram-wrap { padding: 40px 24px 44px; }
    .v1-diagram-grid { max-width: 100%; }
    .v1-footer-bar   { padding: 20px 24px; gap: 14px 24px; }
    .v2-vision-sec   { padding: 48px 24px 44px; }
    .v2-cv-sec       { padding: 48px 24px 56px; }
    .v3-hero         { padding: 56px 24px 48px; }
    .v3-talent-sec   { padding: 56px 24px 72px; }
    .v3-cv-sec       { padding: 44px 24px 52px; }
}

@media (max-width: 600px) {
    .v1-slogan-band  { padding: 32px 20px 36px; }
    .v1-slogan-text  { font-size: 24px; letter-spacing: 1px; }
    .v1-eye-tag      { letter-spacing: 2px; font-size: 9px; margin-bottom: 16px; }
    .v1-desc-band    { padding: 28px 20px 32px; }
    .v1-desc-label   { letter-spacing: 3px; font-size: 9px; }
    .v1-desc-text    { font-size: 16px; line-height: 1.7; }
    .v1-desc-text br { display: none; }
    .v1-diagram-wrap { padding: 28px 16px 32px; }
    .v1-diagram-label { letter-spacing: 3px; font-size: 9px; }
    .v1-diagram-grid {
        border-radius: 0; overflow: visible; aspect-ratio: auto;
        gap: 10px; max-width: 100%; box-shadow: none; background: transparent;
    }
    .v1-center-badge { display: none; }
    .v1-q1, .v1-q2  { padding: 24px 18px; justify-content: flex-start; }
    .v1-q3, .v1-q4  { padding: 24px 18px; justify-content: flex-start; }
    .v1-quad         { border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
    .v1-quad-num     { font-size: 9px; margin-bottom: 8px; }
    .v1-quad-icon    { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 10px; }
    .v1-quad-name    { font-size: 18px; margin-bottom: 8px; }
    .v1-quad-desc    { font-size: 12.5px; max-width: 100%; }
    .v1-footer-bar   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 20px; margin-top: 28px; }
    .v1-footer-item  { justify-content: center; }
    .v1-footer-eng   { font-size: 10px; letter-spacing: 1px; }
    .v1-footer-kor   { font-size: 12px; }
    .v2-cv-row       { grid-template-columns: 1fr; column-gap: 0; row-gap: 6px; min-height: auto; padding: 24px 0; }
    .v2-slogan-txt   { font-size: 30px; }
}

@media (max-width: 480px) {
    .v2-kv-defs, .v3-cards { grid-template-columns: 1fr; }
    .v1-slogan-band  { padding: 28px 16px 32px; }
    .v1-slogan-text  { font-size: 20px; letter-spacing: 0.5px; }
    .v1-desc-band    { padding: 24px 16px 28px; }
    .v1-desc-text    { font-size: 14px; }
    .v1-diagram-wrap { padding: 24px 12px 28px; }
    .v1-quad-name    { font-size: 16px; }
    .v1-quad-desc    { font-size: 12px; }
    .v1-footer-bar   { gap: 8px 12px; padding: 14px 16px; }
    .v2-slogan-txt, .v3-hero-slogan { font-size: 26px; }
}