/* =============== 전체 =============== */
@font-face {
	font-family: 'Pretendard';
	src: url('/fonts/Pretendard.woff') format('woff');
	font-display: swap;
}

:root {
	--font-family-main: 'Pretendard', 'Malgun Gothic', sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--font-family-main);
	letter-spacing: -0.02em;
}

li {
	list-style-type: none;
}


input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body {
            text-align: center;
            background-color: #f8f9fa;
            margin-top: 130px;
        }

/* 가로선 */
.divider-h {
    max-width: 1120px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid rgba(56, 52, 52, 0.5);
}

/* 세로선 */
.divider {
    width: 1px;
    height: 800px;
    background-color: rgba(56, 52, 52, 0.5);
    margin: 0 auto;
    animation: divider-darken linear;
    animation-timeline: view();
}

/* 스크롤해서 지나가는 동안 연한 색 → 진한 색으로 (Safari 등 미지원 브라우저는 이 애니메이션만 무시하고 고정된 연한 색으로 보임) */
@keyframes divider-darken {
    to {
        background-color: rgba(56, 52, 52, 1);
    }
}


/* =============== header =============== */
/* 헤더 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 50px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    overflow: visible;
}

/* 로고 */
.header_logo {
    display: flex;
    align-items: center;
}

.header_logo img {
    height: 50px;
    object-fit: contain;
}

.header_nav {
    position: relative;
}

/* 메뉴 */
.header_menu {
    position: relative;
    display: flex;
    gap: 100px;
    padding: 0;
    list-style: none;
    margin: 0;
}

/* about, business, notice */
.header_menu-item {
	padding-top: 20px;
    position: relative;
    padding-bottom: 20px;
}

/* about, business, notice 링크 */
.header_menu-link {
    font-size: 24px;
    font-weight: 600;
    color: #383434;
    text-decoration: none;
    cursor: pointer;
}

/* about, business, notice */
.header_menu-link:hover {
    color: #666666;
    text-decoration: underline;
}

/* 드롭다운 메뉴 (숨겨진 상태) */
.header_dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 30px;
    z-index: 2;
    list-style: none;
    margin: 0;
}

.header_nav:hover .header_dropdown-bg {
    display: block;
}

/* 드롭다운 수정 */
.header_dropdown a {
    display: inline-block;
    text-decoration: none;
    color: #383434;  /* 평소: 진회색 텍스트, 배경 없음 */
    font-size: 20px;
    font-weight: 500; /* 굵기 */
    padding: 12px 20px;
    border-radius: 10px;
    white-space: nowrap;
}

.header_dropdown a:hover {
    background-color: rgba(90, 85, 129, 0.5);  /* 호버 시: 남색 반투명 pill */
    color: #ffffff;
}

.header_dropdown-bg {
    display: none;
    position: absolute;
    top: 100%;
    left: -30px;
    right: -30px; /* .menu 전체 폭(About~Culture)에 맞춰 늘어남 */
    height: 270px; /* 가장 긴 목록(Business 4개) 기준 */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.header_nav:hover .header_dropdown {
	display: flex;
}


/* =============== hero =============== */
/* 메인 콘텐츠 (헤더 아래 공간) */
.main-content {
    margin-top: 140px;
}

.hero {
    width: 100%;
    height: 600px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    width: 100%;
    height: 100%;
    background-color: #e8e8e8;
}

.page-hero {
    position: relative;
    margin: 40px 50px 0;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
}

.page-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-title {
    position: absolute;
    left: 40px;
    bottom: 40px;
    font-size: 46px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
    .page-hero-title {
        font-size: 32px;
    }
}


/* =============== footer =============== */
.footer {
    position: relative;
    background-color: #28293b;
    padding: 40px 40px 40px;
    text-align: center;
    color: #ffffff;
}

.footer_brand {
    font-size: 22px;
    font-weight: 600;
}

.footer_addr,
.footer_reg {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.footer_logo {
    width: 70px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.footer_copy {
    margin-top: 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}

.footer_top {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}


/* =============== 스크롤 애니메이션 =============== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* =============== about =============== */
:root {
    --about-navy: #2e2f5b;
    --about-text: #383434;
    --about-divider: #383434;
}

body.about-page {
    margin-top: 0;
    text-align: left;
    background-color: #ffffff;
}

.about {
    margin-top: 140px;
}

.about-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-section {
    padding: 200px 0;
}

.about-headline {
    font-size: 40px;
    font-weight: 600;
    color: var(--about-text);
    line-height: 1.3;
}

/* Active nav state on the About page */
body.about-page .header_menu > .header_menu-item:first-child > .header_menu-link {
	text-decoration: underline; /* 밑줄 */
    position: relative;
    color: var(--about-navy);
    font-weight: 800;
}

/* Hero, Footer는 위쪽 공용 .page-hero / .footer 클래스 사용 (page_hero.html, footer.html 프래그먼트) */

/* ----- Intro ----- */
.about-intro .about-headline {
    margin-bottom: 40px;
}

.about-body {
    max-width: 1000px;
    font-size: 24px;
    line-height: 1.6;
    color: var(--about-text);
}

.about-body p {
    margin-bottom: 28px;
}

.about-body p:last-child {
    margin-bottom: 0;
}

/* ----- 축적된 개발 노하우 ----- */
.about-strength {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    flex-direction: column;
}

.about-strength-text {
    flex: 0 0 auto;
    max-width: 800px;
    padding-top: 100px;
    margin: 20px auto;
    text-align: center;
}

.about-lead {
    margin-top: 24px;
    font-size: 24px;
    line-height: 1.6;
    color: var(--about-text);
    text-align: center;
}

.strength-cards {
    display: flex;
    flex: 1;
    max-width: 1000px;
    margin: auto;
}

.strength-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.strength-col.offset {
    margin-top: 90px;
}

.strength-card {
    background-color: #f9f9f9;
    border-radius: 20px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    padding: 20px;
    text-align: center;
    margin: 50px;
}

.strength-card-img {
    width: 100%;
    aspect-ratio: 320 / 213;
    object-fit: cover;
    border-radius: 20px;
}

.strength-card-title {
    margin-top: 24px;
    font-size: 24px;
    font-weight: 700;
    color: var(--about-text);
}

.strength-card-desc {
    margin-top: 24px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--about-text);
}

/* ----- 경영진 이력 ----- */
.about-management .about-headline {
    margin-bottom: 50px;
}

.exec-list {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.exec-card {
    display: flex;
    gap: 40px;
}

.exec-photo {
    flex: 0 0 230px;
}

.exec-info {
    flex: 1;
    padding-top: 4px;
}

.exec-name {
    font-size: 40px;
    font-weight: 500;
    color: var(--about-text);
    margin-bottom: 30px;
}

.exec-title {
    font-size: 25px;
    margin-left: 8px;
}

.exec-career-label {
    font-size: 26px;
    font-weight: 500;
    color: var(--about-text);
    margin-bottom: 16px;
}

.exec-develop-label {
    font-size: 25px;
    font-weight: 500;
    color: var(--about-text);
    margin-bottom: 16px;
}

.exec-lecture-label {
    font-size: 25px;
    font-weight: 500;
    color: var(--about-text);
    margin-top: 30px;
    margin-bottom: 16px;
}

.exec-timeline {
    display: flex;
    flex-direction: column;
}

.exec-timeline li {
    display: flex;
    gap: 30px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--about-divider);
    font-size: 20px;
    color: var(--about-text);
}

.timeline-date {
    flex: 10px 10px 90px;
}

/* ----- VISION & MISSION ----- */
.about-vision .about-headline {
    margin-bottom: 50px;
}

.vision-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.vision-num {
    font-size: 30px;
    font-weight: 700;
    color: var(--about-text);
    margin-bottom: 24px;
}

.vision-sub {
    font-size: 24px;
    font-weight: 700;
    color: var(--about-text);
    margin-bottom: 20px;
}

.vision-desc {
    max-width: 1200px;
    font-size: 24px;
    line-height: 1.6;
    color: var(--about-text);
}

/* ----- COMPANY BI ----- */
.about-bi .about-headline {
    margin-bottom: 50px;
}

.bi-subhead {
    font-size: 20px;
    font-weight: 400;
    color: #383434;
    margin: 60px 0 24px;
    position: relative;
}

.bi-subhead:first-of-type {
    margin-top: 0;
}

.bi-design {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin: 80px auto;
}

.bi-colors {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin: 80px auto;    
}

.bi-swatch {
    display: block;
    height: 150px;
}

.bi-color-card p {
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #383434;
}

.bi-concept p {
    font-size: 24px;
    line-height: 1.8;
    color: #383434;
    margin-bottom: 16px;
}

.bi-concept p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .about-strength {
        flex-direction: column;
    }

    .about-strength-text {
        max-width: none;
    }

    .exec-card {
        flex-direction: column;
    }
}

.bi-under-logo {
    text-align: center;
    margin-bottom: 200px;
    margin-top: 200px;    
}

.bi-under-logo img {
    height: 200px;
    width: auto;
    margin-bottom: 200px;
    margin-top: 100px;
}


/* =============== business 공통 =============== */
/* Active nav state on Business pages */
body.business-page .header_menu > .header_menu-item:nth-child(2) > .header_menu-link {
	text-decoration: underline; /* 밑줄 */
    position: relative;
    color: #2e2f5b;
    font-weight: 800;
}


/* =============== PODA =============== */
:root {
    --poda-orange: #ff6d00;
    --poda-orange-2: #ff9201;
    --poda-orange-3: #f68f37;
    --poda-card-bg: #fdf8ee;
    --poda-card-border: #38343433;
    --poda-text: #383434;
    --poda-text-light: #383434;
}

body.poda-page {
    margin-top: 0;
    text-align: left;
    background-color: #ffffff;
}

.poda {
    margin-top: 140px;
}

.poda-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

.poda-section {
    padding: 90px 0;
}

.poda-headline {
    font-size: 36px;
    font-weight: 600;
    color: var(--poda-text);
    line-height: 1.4;
}

.poda-headline .accent {
    color: var(--poda-orange);
}

/* Hero, Footer는 위쪽 공용 .page-hero / .footer 클래스 사용 (page_hero.html, footer.html 프래그먼트) */

/* ----- 브랜드 마크 ----- */
.poda-brand {
    text-align: center;
}

/* 상단로고 */
.poda-brand-mark {
    height: 140px;
    width: auto;
    margin-top: 200px;
    margin-bottom: 350px;
}

/* 하단로고 */
.poda-brand-mark2 {
    height: 90px;
    width: auto;
    margin-top: 500px;
    margin-bottom: 500px;
}

/* ----- 헤드라인 / 태그라인 ----- */
.poda-headline-section {
    text-align: center;
    margin-top: 320px
}

.poda-headline-section .poda-headline {
    max-width: 1200px;
    margin: auto;
    font-size: 40px;
}

.poda-acronym {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 500;
    color: var(--poda-orange-2);
    letter-spacing: 10px; /* 자간 */
}

.poda-acronym strong {
    color: var(--poda-orange);
    font-weight: 700;
    letter-spacing: 10px; /* 자간 */
}

/* ----- 서비스 소개 본문 ----- */
.poda-intro {
	margin-bottom: 50px;    
}

.poda-body {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1.7;
    color: var(--poda-text);
    text-align: center;
}

.poda-body p {
    margin-bottom: 26px;
}

.poda-body p:last-child {
    margin-bottom: 0;
}

.poda-body-strong {
    font-weight: 700;
}

/* ----- 4가지 문제점  ----- */
.problem-columns {
    display: flex;
    justify-content: center;
    gap: 119px;
    margin-bottom: 800px;
}

.problem-columns img {
    width: 1400px;  
    height: auto;
}

.problem-col {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

.problem-col--offset {
    margin-top: 183px;
}

.problem-card {
    position: relative;
    width: 320px;
    height: 480px;
    flex-shrink: 0;
    background: var(--poda-card-bg);
    border: 1px solid var(--poda-card-border);
    border-radius: 10px;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.problem-badge {
    position: absolute;
    left: 30px;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--poda-orange-2);
    color: #fdfcfa;
    font-size: 14px;
    font-weight: 700;
}

.problem-title {
    position: absolute;
    left: 30px;
    top: 80px;
    font-size: 22px;
    font-weight: 700;
    color: var(--poda-text);
    white-space: nowrap;
}

.problem-underline {
    position: absolute;
    left: 30px;
    top: 120px;
    width: 40px;
    height: 2px;
    background: var(--poda-orange-2);
}

.poda_problem-desc {
    position: absolute;
    left: 30px;
    top: 150px;
    width: 260px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--poda-text);
}

.problem-card--1 .poda_problem-desc {
    top: 249px;
}

.problem-pill {
    position: absolute;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    background: #ffd181;
    font-size: 12px;
    color: var(--poda-text);
    white-space: nowrap;
}

.problem-pill--1 {
    top: 150px;
    width: 90px;
}

.problem-pill--2 {
    top: 190px;
    width: 170px;
}

.problem-photo {
    position: absolute;
    overflow: hidden;
}

.problem-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 카드 01 — 사진: 오른쪽 하단 고정, 카드 모서리와 맞춰 우하단만 라운드 */
.problem-card--1 .problem-photo {
    right: 0;
    bottom: 0;
    width: 174px;
    height: 218px;
    border-radius: 0 0 10px 0;
}

.problem-card--1 .problem-sticker {
    left: 94px;
    top: 320px;
}

/* 카드 02 — 사진: 카드 전체 너비, 하단에 캡션 스트립 오버랩 */
.problem-card--2 .problem-photo {
    left: 0;
    top: 186px;
    width: 320px;
    height: 269px;
}

.problem-card--2 .problem-strip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 64px;
    background: #f2e5d4;
    border-radius: 0 0 10px 10px;
}

.problem-card--2 .problem-sticker {
    left: 50px;
    top: 229px;
}

/* 카드 03 — 사진: 하단 고정, 좌우 중앙에 가까운 위치 */
.problem-card--3 .problem-photo {
    left: 126px;
    bottom: 0;
    width: 179px;
    height: 220px;
}

.problem-card--3 .problem-sticker {
    left: 56px;
    top: 233px;
}

/* 카드 04 — 사진: 오른쪽 여백을 두고 카드 중앙 하단부에 위치 */
.problem-card--4 .problem-photo {
    right: 30px;
    top: 233px;
    width: 170px;
    height: 227px;
}

.problem-card--4 .problem-sticker {
    left: 76px;
    top: 311px;
}

.problem-sticker {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fdfcfa;
    border: 2px solid #d6bd9e;
    color: #d6bd9e;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ----- 콜아웃 ----- */
.poda-callout {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--poda-card-bg);
    border: 1px solid var(--poda-text);
    border-radius: 10px;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.25);
    padding: 32px 50px;
}

.poda-callout-icon {
    flex: 0 0 auto;
    height: 60px;
    width: auto;
}

.poda-callout-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--poda-text);
    margin-bottom: 10px;
}

.poda-callout-title .accent {
    color: var(--poda-orange-3);
    font-weight: 800;
}

.poda-callout-sub {
    font-size: 18px;
    font-weight: 500;
    color: var(--poda-text);
}

/* ----- 기능 섹션 ----- */
.poda-feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 300px;
}

.poda-feature-row.reverse {
    flex-direction: row-reverse;
}

.poda-feature-text {
    flex: 1;
}

.poda-feature-text .poda-headline {
    text-align: left;
    max-width: none;
}

.poda-quote {
    margin-top: 24px;
    font-size: 22px;
    font-weight: 500;
    color: var(--poda-text-light);
    line-height: 1.6;
}

.poda-quote-underline {
    display: block;
    margin-top: 16px;
    width: 100px;
    height: 2px;
    background: var(--poda-orange);
}

.poda-feature-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.poda-feature-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.poda-feature-image.center {
    margin-top: 50px;
}

/* ----- 기능 1: Step 카드 ----- */
.poda-steps {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.poda-step {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
}

.poda-step-photo {
    flex: 0 0 auto;
    width: 240px;
    height: 240px;
    background: #F8C167;
}

.poda-step-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.poda-step-text {
    flex: 0 0 500px;
    height: 240px;
    background: #f7f7f7;
    padding: 50px 50px;
}

.poda-step-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--poda-orange-2);
    margin-bottom: 20px;
}

.poda-step-sub {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 700;
    color: var(--poda-text);
    margin-bottom: 10px;
}

.poda-step-list {
    margin-top: 22px;
    list-style: disc;
}

.poda-step-list li {
    font-size: 18px;
    line-height: 1.7;
    color: var(--poda-text);
}

/* ----- 기능 2: Point 카드 + 이미지 ----- */
.poda-feature-2 .poda-headline {
    max-width: none;
    text-align: center;
    margin-top: 300px;
    margin-bottom: 50px;
}

.poda-feature-row-2 {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-direction: column;
    margin-top: 50px;
}

.poda-points {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.poda-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    background: #ffffff;
    border: 1px solid var(--poda-card-border);
    border-radius: 16px;
    width: 500px;
    height: 300px;
}

.poda-point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 146, 1, 0.12);
    color: var(--poda-orange-2);
    font-size: 20px;
}

.poda-point-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 700;
    color: var(--poda-orange-2);
}

.poda-point-title .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--poda-orange-2);
}

.poda-point-desc {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.6;
    color: var(--poda-text-light);
}

/* ----- 최종 클로징 ----- */
.poda-feature-final {
    text-align: center;
}

.poda-closing-text {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--poda-text);
}

.poda-closing-text .accent {
    color: var(--poda-orange);
}

.poda-closing-text .accent-2 {
    color: var(--poda-orange-2);
}

@media (max-width: 900px) {
    .problem-columns {
        flex-direction: column;
        align-items: center;
        gap: 90px;
    }

    .problem-col--offset {
        margin-top: 0;
    }

    .poda-feature-row,
    .poda-feature-row.reverse {
        flex-direction: column;
    }

    .poda-headline-section .poda-headline {
        font-size: 26px;
    }

    .poda-closing-text {
        font-size: 24px;
    }

    .poda-step {
        flex-direction: column;
    }

    .poda-step-photo {
        width: 100%;
        height: 200px;
    }

    .poda-points {
        grid-template-columns: 1fr;
    }
}


/* =============== KKK =============== */
:root {
    --kkk-navy: #183857;
    --kkk-blue: #357abd;
    --kkk-text: #383434;
    --kkk-text-light: #383434;
}

body.kkk-page {
    margin-top: 0;
    text-align: left;
    background-color: #ffffff;
}

.kkk {
    margin-top: 140px;
}

.kkk-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

.kkk-subtitle-text {
    text-align: center;
    font-size: 44px;
    font-weight: 700;
    color: var(--kkk-text);
    line-height: 1.4;
}

.kkk-section {
    padding: 100px 0;
}

.kkk-headline {
    font-size: 44px;
    font-weight: 700;
    color: var(--kkk-text);
    line-height: 1.4;
}

.kkk-headline.center {
    text-align: center;
}

.kkk-lead {
    margin-top: 20px;
    font-size: 24px;
    line-height: 1.6;
    color: var(--kkk-text);
}

.kkk-lead.center {
    text-align: center;
}


/* Hero, Footer는 위쪽 공용 .page-hero / .footer 클래스 사용 (page_hero.html, footer.html 프래그먼트) */

/* ----- 브랜드 마크 ----- */
.kkk-brand {
    text-align: center;
}

/* 상단로고 */
.kkk-logo {
    height: 240px;
    width: auto;
    margin-top: 180px;
    margin-bottom: 350px;
}

/* 하단로고 */
.kkk-brand-mark {
    height: 250px;
    width: auto;
    margin-bottom: 400px;
}

.kkk-url {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--kkk-navy);
}

/* ----- 태그라인 ----- */
.kkk-tagline {
    text-align: center;
}

.kkk-tagline-text {
    max-width: 900px;
    margin: 50px auto;
    font-size: 28px;
    line-height: 1.6;
    color: var(--kkk-text);
    letter-spacing: 26px;
    line-height: 3;
}

.kkk-tagline-text strong {
    color: var(--kkk-navy);
    font-weight: 700;
    letter-spacing: 26px;
}

/* ----- 서비스 소개 본문 ----- */
.kkk-body {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1.7;
    color: var(--kkk-text);
    text-align: center;
    margin-top: 20px;
}

.kkk-body p {
    margin-bottom: 24px;
}

.kkk-body p:last-child {
    margin-bottom: 0;
}

.kkk-body strong {
    font-weight: 700;
}

.kkk-body-strong {
    font-weight: 700;
}

/* ----- 문제 인식 ----- */
.problem-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.problem-item {
    padding-top: 32px;
}

.problem-num {
    font-size: 32px;
    font-weight: 700;
    color: var(--kkk-text);
    margin-bottom: 12px;
}

.problem-quote {
    font-size: 24px;
    font-weight: 700;
    color: var(--kkk-text);
    margin-bottom: 16px;
}

.kkk_problem-desc {
    max-width: 900px;
    font-size: 22px;
    line-height: 1.7;
    color: var(--kkk-text-light);
}

/* ----- 콜아웃 카드 ----- */
.kkk-callout {
    background: linear-gradient(to right, var(--kkk-navy), #494949);
    border: 1px solid var(--kkk-text);
    border-radius: 10px;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.25);
    padding: 44px 50px;
    text-align: center;
    color: #ffffff;
    margin-top: 50px;
}

.kkk-callout-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.kkk-callout-sub {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
}

.kkk-callout-desc {
    font-size: 20px;
    font-weight: 500;
}

/* ----- 3단계 분석 ----- */
.kkk-steps .kkk-headline {
    margin-bottom: 16px;
}

.kkk-steps .kkk-lead {
    margin-bottom: 60px;
}

.kkk-headline.kkk-headline-steps {
    text-align: center;
    font-size: 44px;
}

.steps-grid {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.step-card {
    flex: 1;
    border: 1px solid #a6c0db;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    transition: max-height 0.35s ease;
}

.step-head {
    background: #0c2a4a;
    color: #dfdfe9;
    font-size: 24px;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

.step-badge {
    color: #ffffff;
}

.step-body {
    padding: 24px 20px;
}

.step-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--kkk-text);
    line-height: 1.5;
    margin-bottom: 16px;
}

.step-tag {
    font-size: 20px;
    font-weight: 600;
    color: var(--kkk-text-light);
    margin-bottom: 12px;
}

.step-body p {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(56, 52, 52, 0.7);
    margin-bottom: 10px;
}

.step-body p:last-child {
    margin-bottom: 0;
}

.step-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0 14px;
    background: none;
    border: none;
    cursor: pointer;
}

.step-toggle-icon {
    transition: transform 0.3s ease;
}

.step-card.is-open {
    max-height: 800px;
}

.step-card.is-open .step-toggle-icon {
    transform: rotate(180deg);
}

.step-detail {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.step-card.is-open .step-detail {
    max-height: 500px;
    padding: 0 20px 24px;
}

.step-detail p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--kkk-text);
    margin-bottom: 10px;
}

.step-detail p:last-child {
    margin-bottom: 0;
}

/* ----- 4가지 포인트 ----- */
.kkk-points .kkk-headline {
    text-align: center;
    margin-bottom: 50px;
}

.points-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.kkk_point-card {
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    padding: 32px;
}

.point-1 { background: #f3f3f3; }
.point-2 { background: #cfe6ee; }
.point-3 { background: #b9dcec; }
.point-4 { background: #a2b8c2; }

.point-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--kkk-text);
    line-height: 1.6;
    margin-bottom: 16px;
}

.point-desc {
    font-size: 20px;
    line-height: 1.6;
    color: var(--kkk-text);
}

/* ----- 앱 화면 ----- */
.kkk-shots .kkk-headline{
	margin-bottom: 50px;
}

.kkk-shots {
    text-align: center;
}

.kkk-shots-img {
    max-width: 900px;
    width: 100%;
    height: auto;
    margin-top: 50px;
}

/* ----- 클로징 ----- */
.kkk-closing {
    text-align: center;
}

.kkk-closing-text {
    max-width: 900px;
    margin: 50px auto;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--kkk-text);
}

.kkk-closing-text strong {
    color: var(--kkk-navy);
}

@media (max-width: 900px) {
    .steps-grid {
        flex-direction: column;
    }

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

    .kkk-wordmark {
        font-size: 56px;
    }

    .kkk-tagline-text,
    .kkk-closing-text {
        font-size: 22px;
    }
}


/* =============== KAMINOAI =============== */
:root {
    --kai-navy: #0C2A4A;
    --kai-accent: #2e2f5b;
    --kai-blue: #0c447c;
    --kai-heading: #181b38;
    --kai-text: #383434;
    --kai-text-light: #817979;
    --kai-light-bg: #f9f9f9;
    --kai-subtext: #95b4d4;
    --kai-reason-bg: rgba(217, 217, 217, 0.5);
}

body.kaminoai-page {
    margin-top: 0;
    text-align: left;
    background-color: #ffffff;
}

.kaminoai {
    margin-top: 140px;
}

.kaminoai-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

.kaminoai-section {
    padding: 100px 0;
}


/* Hero, Footer는 위쪽 공용 .page-hero / .footer 클래스 사용 (page_hero.html, footer.html 프래그먼트) */

/* ----- 브랜드 마크 ----- */
.kaminoai-brand {
    text-align: center;
}

/* 상단 로고 */
.kaminoai-brand-mark {
    height: 120px;
    width: auto;
    margin-top: 200px;
    margin-bottom: 350px;
}

/* 하단 로고 */
.kaminoai-brand-mark2 {
    height: 120px;
    width: auto;
    margin-top: 300px;
    margin-bottom: 300px;
}

.kaminoai-brand-tagline {
    margin-top: 16px;
    font-size: 18px;
    color: var(--kai-text);
    letter-spacing: 1px;
}

/* ----- 태그라인 ----- */
.kaminoai-tagline {
    text-align: center;
}

.kaminoai-tagline-text {
    max-width: 1200px;
    margin: 160px auto 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kai-text);
}

.kaminoai-tagline-text strong {
    color: var(--kai-accent);
    font-weight: 700;
}

.kaminoai-tagline-sub {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 8px;
    color: var(--kai-accent);
}

/* ----- 서비스 소개 본문 ----- */
.kaminoai-body {
    max-width: 1200px;
    margin: 40px auto;
    font-size: 26px;
    line-height: 1.7;
    color: var(--kai-text);
    text-align: center;
}

.kaminoai-body p {
    margin-bottom: 24px;
}

.kaminoai-body p:last-child {
    margin-bottom: 0;
}

.kaminoai-body-strong {
    font-weight: 600;
    font-size: 28px;
    color: var(--kai-blue);
}

/* ----- 콜아웃 (다크) ----- */
.kaminoai-callout {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--kai-navy);
    border: 1px solid var(--kai-text);
    border-radius: 10px;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.25);
    padding: 32px 50px;
    margin-top: 50px;
    margin-bottom: 300px;
}

.kaminoai-callout-icon {
    flex: 0 0 auto;
    height: 50px;
    width: auto;
}

.kaminoai-callout-title {
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10px;
}

.kaminoai-callout-sub {
    font-size: 24px;
    font-weight: 400;
    color: var(--kai-subtext);
}

/* ----- 태그라인 2 ----- */
.kaminoai-tagline2 {
    text-align: center;
}

.kaminoai-tagline2-text {
    max-width: 900px;
    margin: 200px auto 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kai-text);
}

/* ----- 4가지 문제 리스트 ----- */
.reason-list {
    display: flex;
    flex-direction: column;
    gap: 24px;    
    margin-bottom: 300px;
}

.reason-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: var(--kai-reason-bg);
    border-radius: 10px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 32px 40px;    
    margin-bottom: 40px;
}

.reason-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 28px;
    color: #0C447C;
}

.reason-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--kai-text);
    margin-bottom: 12px;
}

.reason-quote {
    font-size: 24px;
    font-weight: 500;
    color: var(--kai-text-light);
    margin-bottom: 12px;
}

.reason-desc {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--kai-text);
}

/* ----- 프로세스: 콜아웃(라이트) + 3단계 카드 ----- */
.kaminoai-callout-light {
    background: var(--kai-light-bg);
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    padding: 44px 50px;
    text-align: center;
    margin-bottom: 100px;
}

.kaminoai-process-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--kai-text);
    margin-bottom: 16px;
}

.kaminoai-process-sub {
    font-size: 22px;
    color: var(--kai-text);
}

.process-steps {
    display: flex;
    gap: 24px;
}

.process-step {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #d9d9d9;
}

.process-step-head {
    background: var(--kai-navy);
    color: #dfdfe9;
    font-size: 22px;
    font-weight: 700;
    padding: 18px 10px;
}

.process-step-head strong {
    color: #ffffff;
}

.process-step-title {
    margin: 30px auto;
    font-size: 24px;
    font-weight: 700;
    color: var(--kai-text);
}

.process-step-desc {
    margin: 12px 24px 24px;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--kai-text-light);
}

/* ----- 독자적 탐지 엔진: 헤딩 고정 + 카드 캐러셀 ----- */
.engine-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    flex-direction: column;
}

.engine-text {
    flex: 0 0 auto;
    margin-bottom: 50px;
}

.kaminoai-headline {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kai-heading);
}

.engine-desc {
    margin-top: 24px;
    font-size: 24px;
    line-height: 1.6;
    color: var(--kai-heading);
}

.engine-underline {
    display: block;
    margin-top: 20px;
    width: 100px;
    height: 2px;
    background: var(--kai-heading);
}

.engine-carousel {
    width: 90%; /* 길이조절 */
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.engine-carousel-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.engine-carousel-track {
    display: flex;
    gap: 24px;
}

.kaminoai_point-card {
    flex: 0 0 336px;
    width: 336px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.point-card-img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

.point-card-body {
    padding: 24px;
}

.point-card-num {
    font-size: 20px;
    font-weight: 600;
    color: var(--kai-heading);
    margin-bottom: 12px;
}

.point-card-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--kai-heading);
    margin-bottom: 12px;
}

.point-card-desc {
    font-size: 20px;
    line-height: 1.7;
    color: var(--kai-text-light);
}

.engine-carousel-prev,
.engine-carousel-next {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kai-navy);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.engine-carousel-prev:hover,
.engine-carousel-next:hover {
    background: var(--kai-heading);
}

/* ----- 클로징 ----- */
.kaminoai-closing {
    text-align: center;
}

.kaminoai-closing-text {
    max-width: 1000px;
    margin: 200px auto;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--kai-text);
}

.kaminoai-closing-text strong {
    color: var(--kai-blue);
}

@media (max-width: 900px) {
    .reason-item {
        flex-direction: column;
    }

    .process-steps {
        flex-direction: column;
    }

    .engine-row {
        flex-direction: column;
    }

    .engine-text {
        flex: 1 1 auto;
    }

    .kaminoai-tagline-text,
    .kaminoai-tagline2-text,
    .kaminoai-closing-text {
        font-size: 22px;
    }
}


/* =============== DOPPLEMATE =============== */
:root {
    --dopple-text: #383434;
    --dopple-text-light: #383434;
    --dopple-navy: #28293b;
    --dopple-body-bg: #6e6f83;
    --dopple-border: #dddddd;
    --dopple-accent-1: #99a6ec;
    --dopple-accent-2: #d7b3fd;
    --dopple-accent-3: #f5a5d1;
    --dopple-accent-4: #f7a0ab;
    --dopple-accent-5: #f6ce4c;
    --dopple-accent-6: #6de5b6;
}

body.dopplemate-page {
    margin-top: 0;
    text-align: left;
    background-color: #ffffff;
}

.dopplemate {
    margin-top: 140px;
}

.dopple-container {
    max-width: 1120px;
    margin: 10px auto 300px;
    padding: 0 40px;
}

.dopple-section {
    padding: 80px 0;
}

/* ----- 로고 (상/하단 이미지) ----- */
.dopple-brand {
    text-align: center;
}

/* 상단로고 */
.dopple-logo-top {
    max-width: 500px;
    width: 100%;
    height: auto;
    margin-top: 200px;
    margin-bottom: 350px;
}

/* 하단로고 */
.dopple-logo-bottom {
    max-width: 708px;
    width: 100%;
    height: auto;
    margin-top: 200px;
    margin-bottom: 90px;
}

/* ----- 태그라인 ----- */
.dopple-tagline {
    text-align: center;
}

.dopple-tagline-text {
    font-size: 44px;
    font-weight: 700;
    color: var(--dopple-text);
    margin-top: 300px;
}

.dopple-tagline-sub {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 12px;
    color: var(--dopple-text-light);
}

/* ----- 서비스 카드 그리드 (벌집형 태그 카드 7개, Figma: Group 223~229) ----- */
.dopple-box-wrap {
    text-align: center;
}

.dopple-honeycomb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 80px;
}

.dopple-hc-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* 모양내기용 */
.dopple-hc-row-wide {
    margin-top: 5;
}

.dopple-hc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 195px;
    height: 138px;
    padding-top: 15px;
    border-radius: 20px;
    background: var(--dopple-navy);
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.25);
}

/* Font Awesome 아이콘 (회색 동그라미 배경 제거, 색은 각 항목의 accent 색을 따라감) */
.dopple-hc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    font-size: 26px;
}

.dopple-hc-label {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -1px;
    text-align: center;
}

/* ----- 서비스 소개 ----- */
.dopple-body {
    max-width: 1000px;
    margin: 60px auto 0;
    font-size: 24px;
    line-height: 1.8;
    color: var(--dopple-text);
    text-align: center;
}

/* ----- 아코디언 카드 공통 ----- */
.dopple-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.dopple-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--dopple-border);
    background: var(--dopple-body-bg);
}

.dopple-card-header {
    padding: 40px;
    background: var(--dopple-navy);
    cursor: pointer;
}

.dopple-card-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dopple-card-title {
    font-size: 26px;
    font-weight: 700;
}

.dopple-accent-1 { color: var(--dopple-accent-1); }
.dopple-accent-2 { color: var(--dopple-accent-2); }
.dopple-accent-3 { color: var(--dopple-accent-3); }
.dopple-accent-4 { color: var(--dopple-accent-4); }
.dopple-accent-5 { color: var(--dopple-accent-5); }
.dopple-accent-6 { color: var(--dopple-accent-6); }

.dopple-card-chevron {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.dopple-card.is-open .dopple-card-chevron {
    transform: rotate(180deg);
}

.dopple-card-desc {
    margin-top: 16px;
    font-size: 20px;
    line-height: 1.6;
    color: #ffffff;
}

.dopple-card-desc strong {
    font-weight: 700;
}

.dopple-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.dopple-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 16px;
}

.dopple-card-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 40px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.dopple-card.is-open .dopple-card-body {
    max-height: 4000px;
    padding: 40px;
}

/* ----- 카드1 스타일 리스트 (불릿) ----- */
.dopple-list {
    list-style: disc;
    padding-left: 22px;
    color: #ffffff;
}

.dopple-list li {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.8;
}

.dopple-list li:last-child {
    margin-bottom: 0;
}

.dopple-list strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* ----- 흰 동그라미 + 아이콘 리스트 ----- */
.dopple-icon-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dopple-icon-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.dopple-icon-circle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--dopple-navy);
    font-size: 22px;
}

.dopple-icon-text {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8;
}

.dopple-icon-text strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* ----- 이미지 카드 그리드 ----- */
.dopple-image-grid {
    display: grid;
    gap: 24px;
}

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

.dopple-image-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.dopple-image-card {
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dopple-border);
}

.dopple-image-card-img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    display: block;
}

.dopple-image-card-text {
    padding: 20px;
}

.dopple-image-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.dopple-image-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .dopple-tagline-text {
        font-size: 24px;
    }

    .dopple-card-header {
        padding: 24px;
    }

    .dopple-card.is-open .dopple-card-body {
        padding: 24px;
    }

    .dopple-card-header-top {
        align-items: flex-start;
    }

    .dopple-image-grid-3,
    .dopple-image-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* =============== notice/inquiry 공통 (공지사항·1:1문의 4개 페이지 공용) =============== */
:root {
    --notice-text: #383434;
    --notice-text-sub: #383434;
    --notice-border: #e2e2e2;
    --notice-navy: #2e2f5b;
    --notice-num-bg: #f1f1f1;
}

body.notice-page {
    margin-top: 0;
    text-align: left;
    background-color: #ffffff;
}

.notice {
    margin-top: 140px;
}

.notice-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Active nav state on the Notice page */
body.notice-page .header_menu > .header_menu-item:nth-child(3) > .header_menu-link {
	text-decoration: underline; /* 밑줄 */
    position: relative;
    color: var(--notice-navy);
    font-weight: 800;
}

.notice-list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 40px;
    border-radius: 12px;
    background: rgba(84, 78, 78, 0.8);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

.notice-list-btn:hover {
    background: rgba(84, 78, 78, 1);
}


/* =============== notice - 공지사항 목록 (notice_list.html, Figma: Culture_공지사항목록) =============== */
.notice-section {
    padding: 60px 0 120px;
}

/* ----- 목록 상단: 총 게시물 수 ----- */
.notice-meta {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

/* ----- 목록 테이블 ----- */
.notice-table {
    border-top: 2px solid var(--notice-text);
}

.notice-row {
    display: flex;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid var(--notice-border);
    font-size: 14px;
    color: var(--notice-text-sub);
    text-decoration: none;
    cursor: pointer;
}

.notice-row:hover .notice-col-title {
    text-decoration: underline;
}

.notice-col-num {
    flex: 0 0 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--notice-num-bg);
    border-right: 1px solid var(--notice-border);
}

.notice-col-date {
    flex: 0 0 140px;
    padding-left: 24px;
}

.notice-col-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
}

.notice-col-title .fa-thumbtack {
    font-size: 12px;
    color: var(--notice-navy);
}

.notice-row-empty {
    justify-content: center;
    color: var(--notice-text-sub);
    cursor: default;
}

/* ----- 더보기 버튼 ----- */
.notice-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 10px 0;
    background: none;
    border: none;
    cursor: pointer;
}

.notice-more:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 900px) {
    .notice-col-date {
        flex: 0 0 100px;
        padding-left: 12px;
    }

    .notice-col-title {
        padding-left: 8px;
    }
}


/* =============== notice - 공지사항 상세 (notice_detail.html, Figma: Culture_공지사항_게시글) =============== */
.notice-detail-section {
    padding: 60px 0 120px;
}

.notice-detail-title {
    font-size: 30px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

.notice-detail-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--notice-text);
    font-size: 14px;
    color: var(--notice-text-sub);
}

.notice-detail-views {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notice-detail-views i {
    color: var(--notice-text-sub);
    font-size: 14px;
}

.notice-detail-body {
    min-height: 260px;
    padding: 60px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--notice-text);
    border-bottom: 1px solid var(--notice-border);
}

.notice-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.notice-detail-actions {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

@media (max-width: 900px) {
    .notice-detail-title {
        font-size: 24px;
    }

    .notice-detail-body {
        font-size: 15px;
        min-height: 160px;
        padding: 40px 0;
    }
}


/* =============== notice - 1:1문의 목록 (inquiry_list.html, Figma: Culture_문의하기목록, notice_list 위에 얹는 확장) =============== */
.notice-meta-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notice-write-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    background: rgba(84, 78, 78, 0.8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.notice-write-link:hover {
    background: rgba(84, 78, 78, 1);
}

.inquiry-row {
    padding-right: 16px;
}

.inquiry-col-name {
    flex: 0 0 100px;
    text-align: right;
    padding-right: 24px;
    color: var(--notice-text-sub);
}

.inquiry-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 30px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.inquiry-status-pending {
    background: #ffffff;
    border: 1px solid var(--notice-text);
    color: var(--notice-text);
}

.inquiry-status-done {
    background: var(--notice-text);
    color: #ffffff;
}

@media (max-width: 900px) {
    .inquiry-col-name {
        flex: 0 0 60px;
        padding-right: 12px;
        font-size: 12px;
    }
}


/* =============== notice - 1:1문의 작성 (inquiry_write.html, Figma: Culture_문의하기) =============== */
.inquiry-write-section {
    padding: 60px 0 120px;
}

.inquiry-write-title {
    padding-bottom: 20px;
    font-size: 25px;
    font-weight: 500;
    color: var(--notice-text-sub);
    border-bottom: 2px solid var(--notice-text);
}

.inquiry-form-row {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--notice-border);
}

.inquiry-form-row-password {
    border-bottom: none;
}

.inquiry-form-label {
    flex: 0 0 164px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

.inquiry-form-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.inquiry-input,
.inquiry-select,
.inquiry-textarea {
    height: 26px;
    padding: 0 10px;
    font-size: 14px;
    color: var(--notice-text);
    background: #ffffff;
    border: 1px solid var(--notice-text-sub);
    border-radius: 4px;
    outline: none;
}

.inquiry-input {
    width: 100%;
    max-width: 585px;
}

.inquiry-input-sm {
    max-width: 230px;
}

.inquiry-textarea {
    width: 100%;
    max-width: 585px;
    height: 110px;
    padding: 10px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
}

/* ----- 이메일 ----- */
.inquiry-email-field {
    flex-wrap: nowrap;
}

.inquiry-input-email {
    width: 230px;
}

.inquiry-email-at {
    font-size: 16px;
    color: var(--notice-text-sub);
}

.inquiry-select {
    width: 118px;
    cursor: pointer;
}

.inquiry-input-email-domain {
    width: 150px;
    display: none;
}

.inquiry-input-email-domain.is-visible {
    display: inline-block;
}

/* ----- 첨부 ----- */
.inquiry-file-trigger {
    width: 100%;
    max-width: 585px;
    height: 26px;
    padding: 0 10px;
    font-size: 14px;
    text-align: left;
    color: rgba(0, 0, 0, 0.5);
    background: #ffffff;
    border: 1px solid var(--notice-text-sub);
    border-radius: 4px;
    cursor: pointer;
}

.inquiry-file-trigger.has-file {
    color: var(--notice-text);
}

/* ----- 비밀번호 ----- */
.inquiry-input-pw {
    max-width: 127px;
}

.inquiry-pw-hint {
    font-size: 14px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.7);
}

/* ----- 등록 / 취소 버튼 ----- */
.inquiry-write-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.notice-write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 40px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.notice-write-btn-primary {
    background: rgba(84, 78, 78, 0.8);
    color: #ffffff;
    border: none;
}

.notice-write-btn-primary:hover {
    background: rgba(84, 78, 78, 1);
}

.notice-write-btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: var(--notice-text-sub);
    border: 1px solid var(--notice-text);
}

.notice-write-btn-secondary:hover {
    background: #f5f5f5;
}

@media (max-width: 900px) {
    .inquiry-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .inquiry-form-label {
        text-align: left;
    }

    .inquiry-email-field {
        flex-wrap: wrap;
    }
}


/* =============== notice - 1:1문의 상세 (inquiry_detail.html, Figma: Culture_문의하기) =============== */
.inquiry-detail-section {
    padding: 60px 0 120px;
}

.inquiry-detail-title {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

.inquiry-detail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--notice-text);
    font-size: 14px;
    color: var(--notice-text-sub);
}

.inquiry-detail-writer {
    display: flex;
    gap: 20px;
}

.inquiry-detail-body {
    min-height: 220px;
    padding: 60px 0;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

.inquiry-detail-attachment {
    padding: 16px 0;
    border-bottom: 1px solid var(--notice-border);
    font-size: 18px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

.inquiry-detail-actions {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* ----- 답변 ----- */
.inquiry-answer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--notice-text);
}

.inquiry-answer-title {
    font-size: 25px;
    font-weight: 500;
    color: var(--notice-text-sub);
}

.inquiry-answer-body {
    min-height: 150px;
    border-bottom: 1px solid var(--notice-border);
}

@media (max-width: 900px) {
    .inquiry-detail-title {
        font-size: 22px;
    }

    .inquiry-detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .inquiry-detail-body {
        font-size: 18px;
        min-height: 120px;
        padding: 30px 0;
    }
}