@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');


/* ================================================================== */
/* 1. CORE & VARIABLES                                                */
/* ================================================================== */

:root {
  /* Common Core */
  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --color-primary: #a17b04;
  --color-primary-dark: #004494;
  --color-accent: #c5a059;

  /* Light Theme */
  --color-bg-light: #ffffff;
  --color-bg-section: #f4f6f9;
  --color-text-dark: #0b1624;
  --color-text-muted: #5a6a7e;
  --border-light: 1px solid #e1e4e8;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);

  /* Dark Theme variables */
  --color-bg-dark: #050a10;
  --color-text-white: #ffffff;
  --color-highlight: #00f2ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  padding: 0.8rem 1.8rem; border-radius: 4px; font-weight: 600;
  text-decoration: none; transition: 0.3s; font-size: 1.1rem; cursor: pointer;
}
.btn-primary { background: var(--color-text-dark); color: #fff; }
.btn-outline { border: 1px solid var(--color-text-dark); color: var(--color-text-dark); }
.btn:hover { opacity: 0.8; transform: translateY(-2px); }


/* ================================================================== */
/* 2. HEADER & NAVIGATION                                             */
/* ================================================================== */
header {
  position: absolute; top: 0; left: 0; width: 100%; z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; padding-bottom: 0.5em; }
.logo { width: 25%; }

/* Desktop Menu */
.nav-menu { display: flex; gap: 2rem; list-style: none; margin-top: 0.8em; }
.nav-item { position: relative; }
.nav-link { color: rgba(0, 0, 0, 0.9); text-decoration: none; font-weight: 500; font-size: 1rem; padding: 10px 0; display: block; }

/* Dropdown Submenu */
.sub-menu {
  position: absolute; top: 100%; left: 0; width: 220px;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 8px; padding: 1rem 0; opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: 0.3s; list-style: none; z-index: 1001;
}
.nav-item:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu li a { display: block; padding: 0.6rem 1.5rem; color: #333; text-decoration: none; font-size: 0.95rem; transition: 0.2s; }
.sub-menu li a:hover { background: var(--color-bg-section); color: var(--color-primary); }

/* Mobile Menu Toggle */
.menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1002; }
.bar { width: 25px; height: 2px; background: #fff; transition: 0.3s; }
.menu-toggle.active .bar { background-color: #333; }


/* slogan */
.slogan-area {
    padding: 4rem 0;
    text-align: center;
    background-color: #fff;
}

.slogan-handwriting {
    font-family: 'Nanum Pen Script', cursive;
    font-size: 2.8rem;
    color: var(--color-primary);
    font-weight: 400;
}

.slogan-sub {
    font-family: 'Pretendard', sans-serif;
    font-weight: 300; /* Light 설정 */
    font-size: 1.2rem;
    color: var(--color-text-muted);
    letter-spacing: -0.02em;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .slogan-handwriting { font-size: 2rem; padding: 0 1rem; }
    .slogan-sub { font-size: 1rem; padding: 0 1.5rem; }
}


/* ================================================================== */
/* 3. HERO SECTION                                                    */
/* ================================================================== */
.hero-wrapper { display: flex; height: 55vh; min-height: 480px; background-color: var(--color-bg-dark); color: #fff; padding-top: 80px; position: relative; overflow: hidden; }
.hero-left {
  flex: 2; position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 4rem 3rem max(2rem, calc((100vw - 1200px) / 2 + 2rem)); overflow: hidden;
}
.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.5; }
.video-bg iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-left-content { position: relative; z-index: 2; max-width: 800px; }
.hero-tag { display: inline-block; padding: 0.3rem 0.8rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 1rem; font-size: 0.9rem; letter-spacing: 0.05em; }
.hero-left h1 { font-size: 3rem; line-height: 1.1; margin-bottom: 1.5rem; color: #fff; word-break: keep-all; }
.hero-desc { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 2rem; max-width: 600px; font-weight: 300; }

.hero-right { flex: 1; background-color: #0b1624; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: 2; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.carousel-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; }
.carousel-slide { display: block; min-width: 100%; flex-shrink: 0; }
.slide-num { font-size: 3.2rem; font-weight: 800; color: rgba(255, 255, 255, 0.1); line-height: 1; margin-bottom: 0.5rem; }
.slide-title { font-size: 1.7rem; margin-bottom: 0.5rem; color: var(--color-accent); word-break: keep-all; }
.slide-desc { color: rgba(255, 255, 255, 0.7); margin-bottom: 1.5rem; font-size: 1rem; min-height: 3em; }
.slide-link { color: #fff; text-decoration: none; border-bottom: 1px solid var(--color-highlight); padding-bottom: 5px; cursor: pointer; display: inline-block; margin-bottom: 3.5rem; }
.carousel-controls { position: absolute; bottom: 20px; left: 0; display: flex; gap: 1rem; align-items: center; }
.control-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.control-btn:hover { border-color: var(--color-highlight); color: var(--color-highlight); }
.hero-left-btn {display:flex; gap:0.25rem;}


/* ================================================================== */
/* 4. ADVISORS SECTION                                                */
/* ================================================================== */
.section { padding: 1.5rem 0; }
.section-head { text-align: center; margin-bottom: 1rem; }
.advisor-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.advisor-card { width: 180px; text-align: left; cursor: pointer; transition: transform 0.3s, opacity 0.3s; }
.advisor-card:hover { transform: translateY(-10px); }
.advisor-card.active-advisor .advisor-img-box { border: 3px solid var(--color-primary); }
.advisor-img-box { width: 100%; aspect-ratio: 1/1; position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); border: 2px solid transparent; transition: 0.3s; }
.advisor-img-box img { width: 100%; height: 100%; object-fit: cover; object-position:top; }
.advisor-name { font-size: 1.2rem; font-weight: 700; color: var(--color-text-dark); text-align: center; display: block; }
.advisor-role { font-size: 1rem; font-weight: 500; color: gray; text-align: center; display: block; }

/* ================================================================== */
/* 5. CONCEPT SECTION                                                 */
/* ================================================================== */
.concept-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: flex-start; min-height: 400px; }
.concept-img { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; justify-content: center; align-items: center; }
.concept-img img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-card); object-fit: contain; transition: opacity 0.3s ease; }
.advisor-detail-box { display: flex; flex-direction: column; height: 100%; animation: fadeIn 0.5s ease; }
.advisor-detail-photo { height: 250px; width: 100%; overflow: hidden; border-radius: 12px; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); }
.advisor-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.advisor-detail-info { background: var(--color-bg-section); padding: 1.5rem; border-radius: 12px; border-left: 4px solid var(--color-primary); }
#advisorDetailName { font-size: 1.55rem; font-weight: 800; margin-bottom: 0.3rem; color: var(--color-text-dark); }
#advisorDetailTitle { font-size: 1.05rem; color: #666; font-weight: 500; }
#conceptBody { font-size: 1.2rem; line-height: 1.8; color: #555; white-space: pre-line; }
#conceptTitle { font-size: 2.2rem; margin-bottom: 1rem; color: var(--color-text-dark); transition: 0.3s; }
.advisor-highlight { color: var(--color-primary); }
.concept-fade-anim { animation: fadeBright 0.6s ease forwards; }
@keyframes fadeBright { 0% { opacity: 0.4; filter: brightness(1.5); } 100% { opacity: 1; filter: brightness(1); } }


/* ================================================================== */
/* 6. DASHBOARD & BOARD SECTION                                       */
/* ================================================================== */
.dashboard-section {position:relative;  padding: 3rem 0; background: #fff; border-bottom: 1px solid #eee; }
.dashboard-grid {position:relative;  width:100%;  display:flex; flex-wrap:wrap;  gap: 2rem; margin-bottom: 3rem;   }
.dash-col { width:calc((100% - 4rem)/3); }
.dash-col h3 { font-size: 1.35rem; margin-bottom: 1.2rem; border-bottom: 2px solid #000; padding-bottom: 0.5rem; }
.dash-links { display: flex; flex-direction: column; gap: 0.6rem; }
.dash-link-card { display: flex; font-weight: 500; justify-content: space-between; align-items: center; padding: 1rem; border: 1.5px solid #eee; border-radius: 6px; text-decoration: none; color: #333; transition: 0.3s; font-size: 1rem; }
.dash-link-card:hover { border-color: var(--color-primary); background: #f8fbff; }
.status-list { list-style: none; }
.status-item { margin-bottom: 0.8rem; }
.status-date { display: block; font-size: 0.85rem; color: var(--color-primary); font-weight: 700; }
.status-text { font-size: 0.95rem; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.board-col h3 { font-size: 1.25rem; margin-bottom: 0.8rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; padding-bottom: 0.5rem; }
.btn-more { font-size: 1.6rem; color: #ccc; text-decoration: none; line-height: 0.5; }
.board-list { list-style: none; }
.board-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid #eee; }
.board-item a { text-decoration: none; color: #444; flex: 1; margin-right: 1rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; }
.board-date { font-size: 0.95rem; color: #999; white-space: nowrap; }


.m_gall {position:relative;  display: block;  }
.m_gall .slick-slide {position:relative;overflow:hidden;}
.m_gall div {position:relative;overflow:hidden;}
.m_gall .imgfit {width:100%; overflow:hidden;}
.m_gall .imgfit img {width:67%; height:67%; object-fit:cover; margin-left: 16%; margin-right: 16%; }
.m_gall .txt{padding:0px; margin:10px 0 15px; margin-right : 15%; margin-left : 15%; font-size: 0.8rem;text-align:center; color:black;}
.m_gall .slick-arrow {position:absolute; top:50%; width:20px; height:30px; font-size:0; margin-top:-20px; z-index:1;border: 0px;background: none;}
.m_gall .slick-arrow:before,
.m_gall .slick-arrow:after {content:""; position:absolute; top:50%; left:50%; width:20px; height:4px; background:#c9c9c9; margin-left:-10px;}
.m_gall .slick-arrow:before {margin-top:-6px;}
.m_gall .slick-arrow:after {margin-top:6px;}
.m_gall .slick-prev {left:5px;}
.m_gall .slick-prev:before {transform:rotate(-45deg);}
.m_gall .slick-prev:after {transform:rotate(45deg);}
.m_gall .slick-next {right:5px;}
.m_gall .slick-next:before {transform:rotate(45deg);}
.m_gall .slick-next:after {transform:rotate(-45deg);}

/* ================================================================== */
/* 7. FOOTER                                                          */
/* ================================================================== */
footer { background: #0b1624; color: #fff; padding: 2rem 0; margin-top: 0; font-size: 0.9rem; }
.footer-info a {color: #fff; text-decoration: none;}


/* ================================================================== */
/* 8. Main _ RESPONSIVE DESIGN                                               */
/* ================================================================== */
/* 로그인/회원가입 영역 */
.nav-container {position: relative;}
.nav-menu{}
.nav-container .top { position:absolute;    top:-30px;    right:10px;   line-height:34px;    color:#666;    z-index:10; }
.nav-container .top li { float:left; font-weight:bold;    padding:15px 3px; }
.nav-container .top li { display: flex; gap: 10px; font-size: 14px; color: #666; white-space: nowrap; } 
.nav-container .top li a { text-decoration: none; color: #666; }
.nav-container .top li span {display:inline-block; width:1px; height:10px; background:#838383; margin:13px 2px; vertical-align:top;}

@media (max-width: 1200px) {
  .hero-right { width: 40%; padding: 3rem 2rem; border-left: none; }
}

@media (max-width: 900px) {
  .hero-wrapper { flex-direction: column; height: auto; min-height: auto; }
  .hero-left { padding: 4rem 2rem; }
  .hero-left-btn { display: none; }
  .hero-right { display: none; }
  .video-bg iframe { height: 100vh; width: 177vh; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 2rem; }
  .board-row { grid-template-columns: 1fr; gap: 2rem; }
  .footer-link {display : none !important;}
  .footer-link2 {display : none !important;}
  .footer-info div {display : none !important;}
  .footer-info hr {display : none !important;}
  .footer-info br {display : none !important;}
  footer {display: none;}
  .board-date {display : none;}
  .dash-links span.arrow {display: none;}
  .logo {width: 30%;}
  .carousel-controls {bottom: 5px;}
  .flow-arrow {rotate: 270deg;}
  .board-row {display: block;}
  .section-head h2 {display: none;}
  .section-head p {display: none;}
  .hero-desc {display: none;}

  /* Mobile Menu Off-canvas */
  .menu-toggle { display: flex; position: absolute; right: 20px; top: 25px; }
  .nav-menu {
    position: fixed; top: 0; right: -100%; width: 80%; height: 100vh;
    background: #fff; flex-direction: column; padding: 80px 2rem 2rem; gap: 0;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2); transition: 0.3s; overflow-y: auto; z-index: 1001;
  }
  .nav-menu.active { right: 0; }
  .bar { background: #333; }
  .nav-menu .nav-link { color: #333; font-size: 1.25rem; font-weight: 700; border-bottom: 1px solid #eee; padding: 1rem 0; }
  .sub-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 1rem; width: 100%; }
  .nav-item.active .sub-menu { display: block; }

	.nav-container .top {position:fixed; top:-40px; right:149px; transition:.2s linear;}
	.nav-container .top.active {top:15px; right: 149px; z-index:1005}
	.nav-container .top a {font-size:12px; line-height:30px; margin-left:5px;}
    .dashboard-grid {position: relative; display:inline-block;   gap: 0px; width: 100%; }
	.dash-col { width:100%;}
}

/* ================================================================== */
/* 9. SUB-PAGE COMMON                             */
/* ================================================================== */

/* --- Sub Navigation (Tabs) --- */
.sub-nav { border-bottom: 1px solid #e1e4e8; background: #fff; }
.sub-nav .container { display: flex; justify-content: center; flex-wrap: wrap; }
.tab-link {
  display: block; padding: 1.2rem 2rem;
  text-decoration: none; color: #888; font-weight: 500;
  border-bottom: 3px solid transparent; transition: 0.3s;
}
.tab-link:hover { color: var(--color-primary); }
.tab-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }

/* --- Content Layouts --- */
.content-section { padding: 80px 0; }
.section-title { font-size: 1.95rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #eee; position: relative; }
.text-block { max-width: 900px; margin: 0 auto 4rem; font-size: 1.15rem; line-height: 1.8; color: #444; word-break: keep-all; }
.text-block p { margin-bottom: 1.5rem; }

/* --- Feature Grid (Vision & Org) --- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; }
.feature-card {
  background: var(--color-bg-section); padding: 2.5rem 2rem; border-radius: 12px;
  text-align: center; transition: 0.3s; border: 1px solid transparent;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: #eee; }
.feature-icon { font-size: 3.2rem; margin-bottom: 1.5rem; display: block; }
.feature-card h3 { margin-bottom: 1rem; color: var(--color-primary); }

/* --- Timeline (History) --- */
.timeline-wrap { max-width: 800px; margin: 0 auto; border-left: 3px solid var(--color-primary); padding-left: 2rem; }
.timeline-item { position: relative; margin-bottom: 3rem; }
.timeline-item::before {
  content: ''; position: absolute; left: calc(-2rem - 9px); top: 5px;
  width: 15px; height: 15px; background: #fff; border: 3px solid var(--color-primary); border-radius: 50%;
}
.timeline-year { font-size: 1.9rem; font-weight: 800; color: var(--color-primary); margin-bottom: 1rem; line-height: 1; }
.timeline-events { list-style: none; }
.timeline-events li { margin-bottom: 0.5rem; font-size: 1.15rem; position: relative; padding-left: 1rem; }
.timeline-events li::before { content: '-'; position: absolute; left: 0; color: #888; }

/* --- Organization (Org) --- */
.org-group { margin-bottom: 4rem; }
.exec-list { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; background: #f8f9fa; padding: 2rem; border-radius: 12px; }
.exec-item { font-size: 1.15rem; font-weight: 500; }
.exec-item em { font-style: normal; color: var(--color-text-muted); margin-right: 0.5rem; font-size: 0.9rem; }
/* Profile Grid override */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem; }
.profile-card { text-align: center; }
.profile-img { width: 195px; height: 195px; border-radius: 5%; object-fit: cover; margin-bottom: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* --- CI Page: Color System (Circle Style) --- */

.ci-layout { display: flex; align-items: center; gap: 3rem; margin-bottom: 4rem; }
.ci-visual { flex: 1; text-align: center; padding: 2rem; background: #f9f9f9; border-radius: 12px; }
.ci-visual img { max-width: 70%; height: auto; }
.ci-desc { flex: 1.2; }

.color-system {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center !important;
    padding: 3rem 0;
}

.color-item {
    position: relative; /* 설명 박스 배치를 위한 기준점 */
    flex: none;
    width: 100px; /* 원형 칩 크기 */
    min-width: 100px;
    background: transparent;
    border: none;
    overflow: visible; /* 설명 박스가 삐져나와야 하므로 */
    cursor: pointer;
}

/* 원형 컬러칩 */
.color-preview {
    width: 100px;
    height: 100px;
    border-radius: 50% !important; /* 무조건 원형 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.color-item:hover .color-preview {
    transform: scale(1.1);
}

/* 호버 시 나타나는 설명 박스 (이미지의 디자인 재현) */
.color-info {
    position: absolute;
    top: 110%; /* 원형 칩 아래에 배치 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 240px;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
    text-align: left;
}

/* 박스 하단 화살표 (선택 사항) */
.color-info::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
}

.color-item:hover .color-info {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.color-info h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #1a1a1a;
}

.color-info p {
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: keep-all;
    color: #444;
}

/* HEX 코드를 위한 스타일 */
.color-code {
    display: block;
    margin-bottom: 0.5rem;
    color: #888 !important;
    font-family: monospace;
}

/* Mobile Response */
@media (max-width: 768px) {
  .feature-grid, .ci-layout, .exec-list { grid-template-columns: 1fr; flex-direction: column; }
  .tab-link { padding: 0.5rem 1rem; font-size: 0.9rem; }
  .ci-layout { flex-direction: column-reverse; }
  .hero-right {display : none;}
  .timeline-events li {font-size: 0.8rem;}
  .org-group p {display: none;}
  .org-group p {display: none;}
}


@media (max-width: 480px) {
  .advisor-card { width: 45%; }
  .logo {width: 50%;}
  .container{padding: 0 1rem;}
  .content-section{padding: 30px 0;}
  .tab-link { padding: 0.7rem 0.7rem; font-size: 0.8rem; }
  .text-block{font-size: 0.9rem;}
  .section-title{font-size: 1.2rem;}
}




/* ================================================================== */
/* 10. MENU 1-C SPECIFIC (Activities & Partners)                      */
/* ================================================================== */

/* Major Activities Card */
.activity-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.3s;
  height: 100%; /* For consistent height in grid */
  display: flex;
  flex-direction: column;
}
.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: #ddd;
}
.activity-thumb {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0; /* Image placeholder color */
  position: relative;
  overflow: hidden;
}
.activity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.activity-card:hover .activity-thumb img {
  transform: scale(1.05); /* Zoom effect on hover */
}
.activity-info {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.activity-info h3 {
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
  color: var(--color-text-dark);
}
.activity-info p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Partner Organization Card */
.partner-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  padding: 2rem;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  text-align: left;
}
.partner-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  background-color: #fcfcfc;
}
.partner-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #eee;
  display: inline-block;
  width: 100%;
}
.partner-desc {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

/* Mobile Responsiveness for 1-C */
@media (max-width: 768px) {
  .activity-thumb { height: 180px; }
  .partner-card { min-height: auto; padding: 1.5rem; }
}

/* ================================================================== */
/* 11. MENU 2-C SPECIFIC (Reward Info)                                */
/* ================================================================== */

/* Intro Section Layout */
.reward-intro-wrapper {
  display: flex; gap: 40px; margin-bottom: 60px; flex-wrap: wrap;
}
.reward-img-box {
  flex: 1; min-width: 300px;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-card);
   height: 25rem;
}
.reward-img-box img {
  width: 100%; height: 100%; object-fit: cover;
}
.reward-text-box {
  flex: 1.2; min-width: 300px;
  display: flex; flex-direction: column; justify-content: center;
}
.reward-title {
  font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--color-text-dark);
}
.reward-highlight { color: var(--color-primary); }
.reward-desc {
  margin-bottom: 1rem; color: #555; line-height: 1.6;
}
.reward-desc strong { font-weight: 700; color: #333; }

/* Process Flow Chart */
.process-flow-container {
  display: flex; align-items: center; justify-content: space-around;
  background: #f8f9fa; padding: 1.5rem; border-radius: 20px; margin-top: 1rem;
}
.flow-step {
    flex: 0.2; /* 모든 카드가 동일한 너비를 가짐 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 위쪽부터 정렬 */
    
    background: #ffffff;
    border: 1px solid #e0e0e0; /* 테두리 설정 */
    border-radius: 15px;
    padding: 1.5rem 1rem;
    text-align: center;
    
    /* 그림자 효과 (선택사항 - 더 깔끔해 보입니다) */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	
}
.flow-icon { font-size: 2rem; margin-bottom: 0.5rem; color: #888; }
.flow-label { font-size: 0.9rem; font-weight: 600; display: block; }
.flow-arrow-icon { color: #ccc; font-size: 1rem; }
.flow-step.active .flow-icon { color: var(--color-primary); }
.flow-step.active .flow-label { color: var(--color-primary); font-weight: 700; }

/* Reward Table */
.reward-table-wrapper { overflow-x: auto; margin-bottom: 1.5rem; }
.reward-table {
  width: 100%; border-collapse: collapse; min-width: 600px;
}
.reward-table th {
  padding: 1rem; border: 1px solid #e1e4e8;
  background-color: #f4f6f9; color: #333; font-weight: 700; text-align: center;
}
.reward-table td {
  padding: 1rem; border: 1px solid #e1e4e8; vertical-align: middle;
}
.td-center { text-align: center; }
.td-bold { font-weight: 600; }
.money-text { color: #e74c3c; font-weight: 700; }

/* Note Box */
.note-box {
  margin-top: 20px; padding: 15px;
  background: #fff8e1; border-radius: 4px;
  color: #856404; font-size: 0.9rem;
}
.note-icon { margin-right: 5px; }

/* Action Button Area */
.action-area { text-align: center; margin-top: 50px; }
.btn-round { padding: 1rem 3rem; font-size: 1.1rem; border-radius: 30px; }
.btn-icon { margin-right: 8px; }

/* Mobile Response */
@media (max-width: 768px) {
  .reward-intro-wrapper { flex-direction: column; }
  .process-flow-container { flex-wrap: wrap; gap: 1rem; padding:1rem; justify-content: center;flex-direction: column; }
  .flow-step { padding:1rem; min-width: 150px;}
  .flow-arrow-icon { transform: rotate(180deg); display: none; /* Hide arrows on small mobile for cleaner look */ }
  .reward-table th, .reward-table td { padding: 0.8rem; font-size: 0.9rem; }
}

/* ================================================================== */
/* 12. MENU 2-B SPECIFIC (Reporting Guide)                            */
/* ================================================================== */

/* Emergency Banner */
.emergency-banner {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
  box-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
}
.emergency-text h2 { color: #fff; font-size: 2rem; margin-bottom: 0.5rem; }
.emergency-text p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 0; }
.emergency-contacts { display: flex; gap: 2rem; }
.contact-item { text-align: center; }
.contact-label { display: block; font-size: 0.9rem; opacity: 0.8; margin-bottom: 0.2rem; }
.contact-number { font-size: 2.2rem; font-weight: 800; color: #ffffff; line-height: 1; }

/* Report Card Grid */
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.report-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  padding: 2rem;
  transition: 0.3s;
}
.report-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.report-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f4f6f9;
}
.report-icon {
  width: 50px; height: 50px;
  background: var(--color-bg-section);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--color-primary);
  margin-right: 1rem;
}
.report-title { font-size: 1.3rem; margin-bottom: 0; }
.evidence-list {
  list-style: none;
  background: #fcfcfc;
  padding: 1.2rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.evidence-list li {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
  position: relative;
}
.evidence-list li::before {
  content: '✔';
  position: absolute; left: 0; top: 0;
  color: var(--color-primary);
  font-size: 0.8rem;
}
.report-actions { display: flex; gap: 10px; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; flex: 1; }

/* Mobile Response for 2-B */
@media (max-width: 768px) {
  .emergency-banner { flex-direction: column; text-align: center; gap: 2rem; }
  .emergency-contacts { flex-direction: column; gap: 1.5rem; }
  .report-grid { grid-template-columns: 1fr; }
  .emergency-text h2 { color: #fff; font-size: 1.6rem; margin-bottom: 0.3rem; }
  .emergency-text p { font-size: 0.8rem; opacity: 0.9; margin-bottom: 0; }
  .note-box {display: none;}
  .reward-title {text-align: center;}
}

/* ================================================================== */
/* 13. MENU 2-A SPECIFIC (Crime Types Hub & Detail)                   */
/* ================================================================== */

/* --- Hub Grid Layout --- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
.hub-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hub-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
  z-index: 10;
}

/* Category Badge (Top Right) */
.hub-badge {
  position: absolute; top: 0; right: 0;
  font-size: 0.75rem; font-weight: 700;
  padding: 0.5rem 1rem;
  border-bottom-left-radius: 16px;
  background: #e8f1ff; color: #64748b;
  letter-spacing: 0.05em;
}
.hub-card:hover .hub-badge {
  background: var(--color-bg-section); color: var(--color-primary);
}
.hub-link span { color : var(--color-primary);}

/* Title Text */
h3.text-xl.font-bold.text-gray-500.uppercase.tracking-widest.italic {
    text-align: center;
    margin-bottom: 25px;
    background: #fbfbfb;
    border-radius: 15px;
    padding: 5px 5px;
}

h2#modal-title {
    text-align: center;
    margin-top : 35px;
    margin-bottom: 25px;
    background: #fbfbfb;
    border-radius: 25px;
    padding: 5px 5px;
}


/* Icon Animation */
.hub-icon-box {
  width: 80px; height: 80px;
  background: #f8fafc; color: #94a3b8;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; margin-bottom: 2rem;
  transition: all 0.4s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.hub-card:hover .hub-icon-box {
  transform: scale(1.1) rotate(-5deg);
  background: #eff6ff; color: var(--color-primary);
}

.hub-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.8rem; color: var(--color-text-dark); }
.hub-desc { font-size: 1rem; color: #64748b; line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; }
.hub-link {
  display: flex; align-items: center;
  font-weight: 700; color: #94a3b8; transition: 0.3s;
}
.hub-card:hover .hub-link { color: var(--color-primary); }
.hub-arrow { opacity: 0; transform: translateX(-10px); transition: 0.3s; margin-left: 0.5rem; }
.hub-card:hover .hub-arrow { opacity: 1; transform: translateX(0); }


/* --- Detail View Section (Hidden by default) --- */
#detail-view { display: none; animation: fadeIn 0.4s ease; }

.detail-header {
  text-align: center; padding: 4rem 0;
  background: #fff; border-bottom: 1px solid #eee; margin-bottom: 3rem;
}
.detail-tag {
  display: inline-block; padding: 0.4rem 1rem;
  background: #eff6ff; color: var(--color-primary);
  border-radius: 30px; font-weight: 700; font-size: 0.9rem; margin-bottom: 1.5rem;
}
.detail-title { font-size: 2.5rem; margin-bottom: 1.5rem; }
.detail-desc { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto; }

.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 4rem; }
.method-card {
  padding: 2rem; border-radius: 20px; border: 1px solid;
}
/* Color variations for method cards */
.method-blue { background: #eff6ff; border-color: #dbeafe; }
.method-red { background: #fef2f2; border-color: #fee2e2; }
.method-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; }
.method-text { color: #475569; line-height: 1.6; }

.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.case-card { cursor: pointer; text-align: center; group: wrapper; }
.case-img-box {
  width: 100%; aspect-ratio: 1/1; border-radius: 40px; overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem; position: relative;
  transition: 0.4s; border: 1px solid #e2e8f0;
}
.case-card:hover .case-img-box { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.case-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: 0.3s;
}
.case-card:hover .case-overlay { opacity: 1; }
.btn-case {
  background: var(--color-primary); color: #fff; padding: 0.8rem 1.5rem;
  border-radius: 30px; font-weight: 700; transform: translateY(20px); transition: 0.3s;
}
.case-card:hover .btn-case { transform: translateY(0); }


/* --- Modal (Card News) --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  z-index: 2000; display: none; overflow-y: auto; padding: 3rem 1rem;
}
.modal-overlay.active { display: block; }
.modal-content { max-width: 600px; margin: 0 auto; position: relative; }
.modal-close {
  position: fixed; top: 2rem; right: 2rem;
  width: 50px; height: 50px; background: #0f172a; color: #fff;
  border-radius: 50%; border: none; font-size: 1.5rem; cursor: pointer; z-index: 2001;
}
.card-news-img {
  width: 100%; border-radius: 16px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); transition: 0.6s ease;
}
.card-news-img.show { opacity: 1; transform: translateY(0); }

/* Mobile Response */
@media (max-width: 900px) {
  .hub-grid { grid-template-columns: 1fr; }
  .method-grid, .case-grid { grid-template-columns: 1fr; }
  .detail-title { font-size: 1.8rem; }
}

/* ================================================================== */
/* 14. MENU 3 SPECIFIC (Certification Tabs)                           */
/* ================================================================== */

/* Tab Navigation */
.content-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #e1e4e8;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 1.1rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  transition: 0.3s;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active {
  color: var(--color-text-dark);
  border-bottom-color: var(--color-text-dark);
  font-weight: 700;
}

/* Tab Content Areas */
.tab-content { display: none; animation: fadeIn 0.5s ease; }
.tab-content.active { display: block; }

/* Info Definition List (기본정보 테이블) */
.info-deflist {
  width: 100%; border-top: 2px solid #333; border-bottom: 1px solid #ddd;
  margin-bottom: 2rem; border-collapse: collapse;
}
.info-deflist th {
  background: #f9f9f9; padding: 1rem; text-align: left;
  font-weight: 700; width: 25%; border-bottom: 1px solid #eee;
}
.info-deflist td {
  padding: 1rem; border-bottom: 1px solid #eee; color: #555;
}

/* Apply Table (접수현황) */
.apply-table {
  width: 100%; border-top: 2px solid var(--color-primary);
  border-collapse: collapse; text-align: center; margin-bottom: 1rem;
}
.apply-table th {
  background: #f4f6f9; padding: 1rem 0.5rem; font-weight: 700;
  border-bottom: 1px solid #ddd; color: #333; font-size: 0.95rem;
}
.apply-table td {
  padding: 1rem 0.5rem; border-bottom: 1px solid #eee;
  font-size: 0.95rem; color: #555; vertical-align: middle;
}
.tag-grade {
  display: inline-block; padding: 0.2rem 0.6rem;
  border-radius: 4px; font-size: 0.8rem; font-weight: 700;
  color: #fff; background: #888;
}
.tag-grade.analyst { background: var(--color-primary); }
.tag-grade.expert { background: #c5a059; }
.apply-btn {
  display: inline-block; padding: 0.4rem 1.2rem;
  background: var(--color-text-dark); color: #fff;
  border-radius: 4px; text-decoration: none; font-size: 0.9rem;
}
.apply-btn:hover { background: var(--color-primary); }

/* Info List Style */
.info-list { padding-left: 1rem; margin-bottom: 2rem; list-style: none; }
.info-list li {
  position: relative; padding-left: 1rem; margin-bottom: 0.5rem;
  color: #555; line-height: 1.6;
}
.info-list li::before {
  content: '•'; position: absolute; left: 0; color: var(--color-primary);
}
.info-list.ordered { list-style: decimal; padding-left: 1.5rem; }
.info-list.ordered li::before { content: none; }

/* Process Flow (Horizontal) */
.process-flowchart {
  display: flex; align-items: center; justify-content: space-between;
  background: #f8f9fa; padding: 2rem; border-radius: 12px; margin-bottom: 2rem;
}
.process-step.icon-step {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center;
}
.icon-wrapper {
  width: 60px; height: 60px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.arrow { color: #ccc; font-size: 0.85rem; font-weight: 400; }

/* Mobile Response */
@media (max-width: 768px) {
  .process-flowchart { flex-direction: column; gap: 1rem; }
  .arrow { transform: rotate(90deg); }
   .info-table {font-size: 90%;}
  .info-deflist  {font-size: 90%;}
  .tab-btn { padding: 0.8rem 1rem; font-size: 0.95rem; }
  .apply-table thead tr { position: absolute; top: -9999px; left: -9999px; }
  .apply-table td { 
    border: none; border-bottom: 1px solid #eee; 
    position: relative; padding-left: 50%; text-align: right; 
  }
  .apply-table td:before { 
    position: absolute; top: 1rem; left: 6px; width: 45%; 
    padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; 
    content: attr(data-label); 
   }
  .post-actions {flex-direction: column;}
  .cta-btn-main {margin-top: 10px !important; margin-bottom: 10px !important;}
}

/* ================================================================== */
/* 15. MENU 4-A SPECIFIC (Safe Zone Certification)                    */
/* ================================================================== */

/* Visual Banner */
.safe-banner {
  width: 100%;
  height: 320px;
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../image/main_visual_12.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin-bottom: 4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.safe-banner h2 { color: #fff; font-size: 2.5rem; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.safe-banner p { font-size: 1.1rem; opacity: 0.9; max-width: 700px; line-height: 1.6; }
.safe-badge { 
  background: var(--color-accent); color: #000; padding: 0.4rem 1rem; 
  border-radius: 30px; font-weight: 700; font-size: 0.85rem; margin-bottom: 1rem; text-transform: uppercase;
}

/* Feature Grid (Why Safe Zone) */
.safe-feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 5rem;
}
.safe-feature-item {
  background: #fff; padding: 2rem; border-radius: 12px;
  border: 1px solid #e1e4e8; transition: 0.3s;
  display: flex; align-items: flex-start; gap: 1.5rem;
}
.safe-feature-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--color-primary); }
.safe-icon {
  flex-shrink: 0; width: 60px; height: 60px; background: var(--color-bg-section);
  color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.safe-text h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.safe-text p { font-size: 0.95rem; color: #666; line-height: 1.5; margin: 0; }

/* Requirements List (Criteria) */
.req-container { margin-bottom: 5rem; }
.req-list-styled { display: flex; flex-direction: column; gap: 1.5rem; }
.req-box {
  background: #f8f9fa; padding: 2rem; border-radius: 12px;
  border-left: 5px solid var(--color-primary); display: flex; gap: 1.5rem; align-items: center;
}
.req-box-icon { font-size: 2rem; color: var(--color-primary); width: 60px; text-align: center; }
.req-box-content h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.req-box-content p { color: #555; margin: 0; font-size: 0.95rem; }

/* Process Section (Blue Background) */
.safe-process-section {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  padding: 4rem 2rem; border-radius: 20px; text-align: center; color: #fff;
}
.safe-process-title { font-size: 2rem; margin-bottom: 0.5rem; color: #fff; }
.safe-process-desc { opacity: 0.8; margin-bottom: 3rem; }
.safe-steps {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem;
}
.safe-step-item { flex: 1; min-width: 140px; position: relative; }
.safe-step-icon {
  width: 70px; height: 70px; background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
  margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; backdrop-filter: blur(5px);
}
.safe-step-text { display: block; font-size: 1rem; font-weight: 600; }
/* Arrow between steps */
.safe-step-item:not(:last-child)::after {
  content: '\f054'; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: -15px; top: 25px; font-size: 1.2rem; opacity: 0.5;
}

/* Two Block Sys */
/* --- 안심 Zone 구축 프로세스 2단 레이아웃 --- */
.safe-process-layout {
    display: flex;
    gap: 3rem;
    align-items: stretch;
    margin-top: 3rem;
    text-align: left;
}

/* 좌측 프로세스 영역 */
.safe-process-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.safe-step-detail {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.safe-step-detail .safe-step-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: #004488; /* 메인 컬러에 맞게 수정 가능 */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
}

.safe-step-text-box h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #ffffff;
}

.safe-step-text-box p {
    margin: 0;
    font-size: 0.95rem;
    color: #ffffff;
    line-height: 1.5;
}

.safe-process-left .safe-contact-btn  {
    display: inline-block;
    margin-top: 1rem;
    padding: 12px 25px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    width: fit-content;
}

.safe-contact-btn {
    width: 100% !important;
    border-radius: 20px !important;
    background: linear-gradient(45deg,#35354e,#5c4a6d) !important;
    text-align: center !important;
}

/* 우측 시안 영역 */
.safe-process-right {
    flex: 1;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mockup-header h4 {
    margin: 0 0 0.5rem 0;
    color: #222;
    font-size: 1.2rem;
}

.mockup-header p {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: #777;
}

.cert-mockup-box {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    background-color: #e2e2e2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cert-mockup-box i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.mockup-notice {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: #999;
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
    .safe-process-layout {
        flex-direction: column;
        gap: 2rem;
    }
    .safe-process-right {
        padding: 2rem 1rem;
    }

    .safe-banner p {display:none;}
    .board_top {flex-direction:column;}
}



/* Contact Button inside Process */
.safe-contact-btn {
  display: inline-block; background: #fff; color: #1e3c72;
  padding: 1rem 2.5rem; border-radius: 50px; font-weight: 800;
  text-decoration: none; margin-top: 3rem; transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.safe-contact-btn:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* Mobile Response */
@media (max-width: 768px) {
  .safe-feature-grid { grid-template-columns: 1fr; }
  .req-box { flex-direction: column; text-align: center; border-left: none; border-top: 5px solid var(--color-primary); }
  .safe-steps { flex-direction: column; gap: 2rem; }
  .safe-step-item { width: 100%; }
  .safe-step-item:not(:last-child)::after {
    content: '\f078'; /* Down arrow */
    right: 50%; top: auto; bottom: -25px; transform: translateX(50%);
  }
}

/* ================================================================== */
/* 16. MENU 4-B SPECIFIC (Certification Status)                       */
/* ================================================================== */

/* Search & Total Bar */
.status-top-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;
}
.status-count { font-size: 1.1rem; font-weight: 700; color: var(--color-text-dark); }
.status-count span { color: var(--color-primary); }
.status-search { display: flex; gap: 0.5rem; }
.status-search input {
  padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; width: 250px;
}
.status-search button {
  padding: 0.5rem 1.2rem; background: var(--color-text-dark); color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
}

/* Status Grid */
.status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem;
}
.status-card {
  background: #fff; border: 1px solid #e1e4e8; border-radius: 12px;
  overflow: hidden; transition: 0.3s;
}
.status-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--color-primary);
}
.status-thumb {
  width: 100%; height: 220px; background: #f0f0f0; position: relative; overflow: hidden;
}
.status-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.status-card:hover .status-thumb img { transform: scale(1.05); }

.status-info { padding: 1.5rem; }
.status-name {
  font-size: 1.2rem; font-weight: 700; color: var(--color-text-dark);
  margin-bottom: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.status-meta { font-size: 0.9rem; color: #666; display: flex; flex-direction: column; gap: 0.3rem; }
.status-meta i { width: 20px; text-align: center; margin-right: 5px; color: #999; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.page-btn {
  width: 40px; height: 40px; border: 1px solid #ddd; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #555; text-decoration: none; border-radius: 4px; transition: 0.3s;
}
.page-btn:hover { background: #f4f6f9; color: var(--color-primary); }
.page-btn.active {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 700;
}

/* Mobile Response */
@media (max-width: 900px) {
  .status-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .status-top-bar { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .status-search { width: 100%; }
  .status-search input { flex: 1; }
  .status-grid { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* 17. MENU 4-C SPECIFIC (Application Form)                           */
/* ================================================================== */

/* Form Container */
.form-container {
  max-width: 800px; margin: 0 auto;
  background: #fff; padding: 3rem; border: 1px solid #e1e4e8; border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.form-title {
  font-size: 1.5rem; margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-text-dark); color: var(--color-text-dark);
}

/* Form Group */
.form-group { margin-bottom: 1.5rem; }
.form-label {
  display: block; font-weight: 700; margin-bottom: 0.5rem; color: #333;
}
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px;
  font-size: 1rem; font-family: var(--font-main); transition: 0.3s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}
.form-textarea { resize: vertical; min-height: 150px; }

/* Phone Input Group */
.phone-group { display: flex; gap: 0.5rem; align-items: center; }
.phone-input { flex: 1; text-align: center; }

/* File Upload */
.file-upload-box {
  border: 2px dashed #ddd; padding: 2rem; text-align: center;
  border-radius: 8px; cursor: pointer; transition: 0.3s; background: #fafafa;
}
.file-upload-box:hover { border-color: var(--color-primary); background: #f0f7ff; }
.file-text { color: #888; font-size: 0.9rem; margin-top: 0.5rem; }

/* Privacy Agreement */
.privacy-box {
  margin-top: 3rem; border-top: 1px solid #eee; padding-top: 2rem;
}
.privacy-textarea {
  width: 100%; height: 150px; padding: 1rem; background: #f9f9f9;
  border: 1px solid #ddd; font-size: 0.85rem; color: #666;
  overflow-y: auto; margin-bottom: 1rem; border-radius: 4px; resize: none;
}
.privacy-check {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 700; cursor: pointer;
}
.privacy-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }

/* Submit Button Area */
.form-actions {
  margin-top: 3rem; text-align: center; display: flex; gap: 1rem; justify-content: center;
}
.btn-submit {
  background: var(--color-primary); color: #fff; padding: 1rem 3rem;
  border: none; border-radius: 4px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: 0.3s;
}
.btn-submit:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.btn-cancel {
  background: #fff; color: #666; border: 1px solid #ddd; padding: 1rem 3rem;
  border-radius: 4px; font-size: 1.1rem; cursor: pointer; transition: 0.3s; text-decoration: none;
}
.btn-cancel:hover { background: #f4f4f4; color: #333; }

/* Mobile Response */
@media (max-width: 600px) {
  .form-container { padding: 1.5rem; }
  .phone-group { flex-direction: row; }
  .form-actions { flex-direction: column; }
  .btn-submit, .btn-cancel { width: 100%; }
}

/* ================================================================== */
/* 18. MENU 5 SPECIFIC (Education Center)                             */
/* ================================================================== */

/* --- Lecture Card Grid (Menu 5-A) --- */
.lecture-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem;
}
.lecture-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid #e1e4e8; border-radius: 12px;
  overflow: hidden; transition: 0.3s; height: 100%;
}
.lecture-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--color-primary);
}
.lecture-thumb {
  width: 100%; height: 200px; background: #eee; position: relative; overflow: hidden;
}
.lecture-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: 0.3s;
}
.lecture-card:hover .lecture-thumb img { transform: scale(1.05); }
.lecture-badges {
  position: absolute; top: 10px; left: 10px; display: flex; gap: 5px;
}
.badge {
  padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; color: #fff;
}
.badge.online { background: #3498db; }
.badge.offline { background: #e67e22; }
.badge.new { background: #e74c3c; }
.badge.end { background: #c1c1c1; }

.lecture-cat { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; margin-bottom: 0.5rem; }
.lecture-title {
  font-size: 1.15rem; font-weight: 700; color: var(--color-text-dark);
  margin-bottom: 0.8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lecture-meta {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid #eee;
  display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: #666;
}
.lecture-price { font-weight: 700; color: var(--color-text-dark); font-size: 1.1rem; }

/* --- Offline Education Info (Menu 5-B) --- */
.edu-intro-box {
  background: #f8f9fa; padding: 3rem; border-radius: 12px; text-align: center; margin-bottom: 4rem;
}
.edu-intro-box h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--color-text-dark); }
.edu-intro-box p { font-size: 1.05rem; color: #555; max-width: 700px; margin: 0 auto 2rem; }

.edu-process-row { display: flex; gap: 2rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.edu-step {
  flex: 1; min-width: 200px; background: #fff; padding: 2rem;
  border-radius: 12px; border: 1px solid #eee; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.edu-step-num {
  display: inline-block; width: 30px; height: 30px; background: var(--color-primary); color: #fff;
  border-radius: 50%; font-weight: 700; line-height: 30px; margin-bottom: 1rem;
}
.edu-step h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }

/* Board List (Notice Style) */
.board-table { width: 100%; border-collapse: collapse; border-top: 2px solid #333; }
.board-table th { background: #f9f9f9; padding: 1rem; font-weight: 700; border-bottom: 1px solid #ddd; color: #333; }
.board-table td { padding: 1rem; border-bottom: 1px solid #eee; color: #555; text-align: center; }
.board-table td.subject { text-align: left; }
.board-table td.subject a { text-decoration: none; color: #333; transition: 0.2s; }
.board-table td.subject a:hover { color: var(--color-primary); text-decoration: underline; }

/* Mobile Response */
@media (max-width: 900px) {
  .lecture-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .lecture-grid { grid-template-columns: 1fr !important; }
  .board-table thead { display: none; }
  .board-table tr { display: block; border-bottom: 1px solid #eee; padding: 1rem; }
  .board-table td { display: block; text-align: left; padding: 0.2rem 0; border: none; }
  .board-table td.subject { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; }
}

/* ================================================================== */
/* 19. MENU 5-DETAIL SPECIFIC (Lecture Detail)                        */
/* ================================================================== */

/* Top Info Section */
.lecture-detail-top {
  display: flex; gap: 3rem; margin-bottom: 4rem;
  align-items: flex-start;
}
.lecture-detail-thumb {
  flex: 1; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid #eee;
}
.lecture-detail-thumb img { width: 100%; height: auto; display: block; }

.lecture-detail-summary {
  flex: 1.2; display: flex; flex-direction: column; justify-content: center;
}
.lecture-tag {
  display: inline-block; color: var(--color-primary); font-weight: 700;
  margin-bottom: 0.5rem; font-size: 0.95rem;
}
.lecture-detail-title {
  font-size: 2rem; line-height: 1.3; margin-bottom: 1.5rem;
  color: var(--color-text-dark); word-break: keep-all;
}
.lecture-info-grid {
  display: grid; gap: 1rem 2rem;
  margin-bottom: 2rem; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  padding: 1.5rem 0;
}
.info-item { font-size: 1rem; color: #555; }
.info-item strong { color: #333; margin-right: 0.5rem; font-weight: 600; }
.lecture-total-price {
  font-size: 1.8rem; font-weight: 800; color: #e74c3c; margin-bottom: 2rem;
  text-align: right; display: block;
}
.lecture-actions { display: flex; gap: 1rem; }
.btn-cart {
  flex: 1; border: 1px solid #ddd; background: #fff; color: #333;
}
.btn-enroll {
  flex: 2; background: var(--color-primary); color: #fff; border: none;
}

/* Curriculum List */
.curriculum-list {
  list-style: none; border: 1px solid #e1e4e8; border-radius: 8px; overflow: hidden;
}
.curriculum-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid #eee; background: #fff;
  transition: 0.2s;
}
.curriculum-item:last-child { border-bottom: none; }
.curriculum-item:hover { background: #f9f9f9; }
.curr-title { font-weight: 500; color: #333; display: flex; align-items: center; gap: 10px; }
.curr-icon { color: var(--color-primary); }
.curr-time { font-size: 0.9rem; color: #888; }

/* Instructor Profile */
.instructor-box {
  display: flex; gap: 1.5rem; align-items: center; background: #f8f9fa;
  padding: 2rem; border-radius: 12px; margin-top: 2rem;
}
.instructor-img {
  width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Mobile Response */
@media (max-width: 768px) {
	.lecture-detail-top { flex-direction: column; gap: 2rem; }
	.lecture-detail-title { font-size: 1.2rem; }
	.lecture-info-grid { grid-template-columns: 1fr; gap: 0.8rem; }
	.info-item { font-size: 0.8rem; }
	.lecture-info-grid {
	  gap: 0.5rem;
	  margin-bottom: 1rem;  padding: 1.5rem 0;
	}
}

/* ================================================================== */
/* 20. MENU 6 SPECIFIC (Notice & Gallery)                             */
/* ================================================================== */

/* --- Gallery Grid (Menu 6-C) --- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem;
}
.gallery-item {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid #e1e4e8; border-radius: 12px; overflow: hidden;
  transition: 0.3s;
}
.gallery-item:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--color-primary);
}
.gallery-thumb {
  width: 100%; aspect-ratio: 4/3; background: #f4f6f9; overflow: hidden; position: relative;
}
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: 0.5s;
}
.gallery-item:hover .gallery-thumb img { transform: scale(1.1); }
.gallery-text { padding: 1.5rem; }
.gallery-title {
  font-size: 1.1rem; font-weight: 700; color: var(--color-text-dark);
  margin-bottom: 0.5rem; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gallery-date { font-size: 0.85rem; color: #888; }

/* --- Post Detail View (Menu 6-Detail) --- */
.post-view-box { border-top: 2px solid var(--color-text-dark); border-bottom: 1px solid #ddd; margin-bottom: 2rem; }
.post-header {
  background: #f9f9f9; padding: 1.5rem 2rem; border-bottom: 1px solid #eee;
}
.post-title { font-size: 1.4rem; font-weight: 700; color: var(--color-text-dark); margin-bottom: 0.8rem; }
.post-meta { font-size: 0.9rem; color: #666; display: flex; gap: 1.5rem; }
.post-meta span i { margin-right: 5px; color: #999; }

.post-body { padding: 3rem 2rem; min-height: 300px; font-size: 1.05rem; line-height: 1.8; color: #333; }
.post-attach {
  padding: 1rem 2rem; background: #fbfbfb; border-top: 1px solid #eee;
  display: flex; align-items: center; gap: 1rem;
}
.file-link {
  font-size: 0.9rem; color: #555; text-decoration: none; display: flex; align-items: center; gap: 5px;
}
.file-link:hover { color: var(--color-primary); text-decoration: underline; }

.post-nav { border-top: 1px solid #333; margin-bottom: 3rem; }
.nav-row {
  display: flex; border-bottom: 1px solid #eee; transition: 0.2s;
}
.nav-row:hover { background: #f9f9f9; }
.nav-label {
  width: 100px; background: #f4f6f9; padding: 1rem; text-align: center;
  font-weight: 600; font-size: 0.9rem; color: #333; display: flex; align-items: center; justify-content: center;
}
.nav-link-text {
  flex: 1; padding: 1rem; color: #555; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-link-text:hover { color: var(--color-primary); }

/* Mobile Response */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .post-header, .post-body { padding: 1.5rem 1rem; }
  .post-title { font-size: 1.2rem; }
  .post-meta { flex-direction: column; gap: 0.5rem; }
}

/* ================================================================== */
/* 21. MISC PAGES (Sitemap, FAQ, Payment)                             */
/* ================================================================== */

/* --- Sitemap Grid (Map.html) --- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; margin-bottom: 4rem; }
.sitemap-col { background: #fff; border: 1px solid #e1e4e8; border-radius: 12px; padding: 2rem; transition: 0.3s; }
.sitemap-col:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card); }
.sitemap-col h3 { font-size: 1.3rem; border-bottom: 2px solid #333; padding-bottom: 0.8rem; margin-bottom: 1.2rem; color: var(--color-text-dark); }
.sitemap-col ul { list-style: none; padding: 0; }
.sitemap-col li { margin-bottom: 0.8rem; }
.sitemap-col a { text-decoration: none; color: #666; transition: 0.2s; font-size: 1rem; display: block; }
.sitemap-col a:hover { color: var(--color-primary); transform: translateX(5px); font-weight: 500; }

/* --- FAQ Accordion (Policy-faq.html) --- */
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item { border: 1px solid #e1e4e8; border-radius: 8px; overflow: hidden; background: #fff; transition: 0.3s; }
.faq-item:hover { border-color: #ccc; }
.faq-question {
  width: 100%; text-align: left; padding: 1.2rem 1.5rem; background: #fff; border: none;
  font-size: 1.05rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #333;
}
.faq-question::before { content: 'Q.'; color: var(--color-primary); font-weight: 800; margin-right: 10px; font-size: 1.2rem; }
.faq-question::after { content: '\f078'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.9rem; color: #ccc; transition: 0.3s; }
.faq-item.active .faq-question { border-bottom: 1px solid #eee; background: #fcfcfc; }
.faq-item.active .faq-question::after { transform: rotate(180deg); color: var(--color-primary); }
.faq-answer { display: none; padding: 2rem; background: #fbfbfb; color: #555; line-height: 1.7; font-size: 0.95rem; }
.faq-answer::before { content: 'A.'; color: #e74c3c; font-weight: 800; margin-right: 10px; font-size: 1.2rem; float: left; }
.faq-item.active .faq-answer { display: block; animation: fadeIn 0.3s ease; }

/* --- Policy Text Box (Regulation, Usage, Info) --- */
.policy-box { background: #fff; padding: 3rem; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.policy-box h3 { font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 1rem; color: #2c3e50; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
.policy-box h3:first-child { margin-top: 0; }
.policy-box p { margin-bottom: 1rem; color: #555; line-height: 1.8; text-align: justify; }
.policy-box ul, .policy-box ol { margin-bottom: 1.5rem; padding-left: 1.5rem; color: #555; }
.policy-box li { margin-bottom: 0.5rem; line-height: 1.6; }
.policy-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; margin-top: 1rem; }
.policy-table th, .policy-table td { border: 1px solid #ddd; padding: 0.8rem; font-size: 0.9rem; }
.policy-table th { background: #f9f9f9; font-weight: 700; color: #333; }

/* policy-infomanage */
.terms-container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; background-color: #fff; line-height: 1.7; color: #444; font-size: 15px; }
.terms-chapter { font-size: 1.4rem; font-weight: 800; color: #111; margin-top: 50px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #0056b3; }
.terms-chapter:first-of-type { margin-top: 0; }
.terms-article-title { font-size: 1.1rem; font-weight: 700; color: #0056b3; margin-top: 30px; margin-bottom: 10px; background-color: #f4f8fb;  padding: 8px 15px; border-radius: 5px; }
.terms-text {margin-bottom: 10px; text-align: justify; }
.terms-list { padding-left: 20px; margin-bottom: 15px; }
.terms-list li { margin-bottom: 5px; list-style-type: decimal; padding-left: 5px; }
.terms-sub-list { padding-left: 20px; margin-top: 5px; }
.terms-sub-list li { list-style-type: disc; }
.terms-info-box { background-color: #f9f9f9; border: 1px solid #ddd; padding: 20px; margin-top: 40px; border-radius: 8px; }
.terms-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.terms-table th { background-color: #e5e5ff; color: #333; font-weight: bold; padding: 12px; border: 1px solid #ccc; text-align: center; }
.terms-table td { padding: 10px; border: 1px solid #ccc; text-align: center; vertical-align: middle; }   
.contact-box {  background-color: #f9f9f9; border: 1px solid #eee; padding: 20px; margin-top: 30px; border-radius: 8px; }
.contact-info { margin-bottom: 10px; }
.contact-label { font-weight: bold; color: #ffffff; display: inline-block; width: 120px; }



/* --- Payment Summary (Payment Pages) --- */
.order-summary { width: 100%; border-collapse: collapse; margin-bottom: 2rem; border-top: 2px solid #333; }
.order-summary th { background: #f8f9fa; padding: 1.2rem; text-align: left; border-bottom: 1px solid #ddd; font-weight: 600; width: 120px; }
.order-summary td { padding: 1.2rem; border-bottom: 1px solid #eee; color: #333; font-size: 1rem; }
.total-price-row td { background: #fff8f8; color: #e74c3c; font-weight: 800; font-size: 1.2rem; }
.payment-method-box { background: #fff; border: 1px solid #ddd; padding: 1.5rem; border-radius: 8px; text-align: center; margin-bottom: 2rem; }
.agree-check label { font-weight: 600; cursor: pointer; color: #333; }

/* Mobile Response */
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sitemap-grid { grid-template-columns: 1fr; } .policy-box { padding: 1.5rem; } }


/* glass-style.css */

/* --- 글래스모피즘 게이트웨이 스타일 --- */
.glass-section {
    /* 신뢰감을 주는 푸른빛/보랏빛 계열의 부드러운 그라데이션 배경 */
    background: #f7effd8a;
    padding: 5rem 2rem;
    min-height: 70vh;
}

.glass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.glass-card {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    background: rgba(255, 255, 255, 0.45);
}

.avatar-img {
    overflow: hidden;
    border-radius: 20px;
    width: 125px;
    height: 125px;
    object-fit: cover;
    object-position:top;
}

.speaker-avatar {
    width: 125px;
    height: 125px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.05);
}

.speaker-role {
    font-size: 0.95rem;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 0.5rem;
}

.speaker-name {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.speaker-desc {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* --- 기고문 상세 페이지 스타일 --- */
.article-section {
    padding: 5rem 2rem;
    background-color: #f8f9fa;
    min-height: 60vh;
}

.article-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 4rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.article-header {
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.article-theme {
    font-size: 1.1rem;
    color: #3498db;
    font-weight: bold;
    margin-bottom: 1rem;
    display: block;
}

.article-title {
    font-size: 2.2rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
    word-break: keep-all;
    line-height: 1.4;
}

.article-author {
    font-size: 1.2rem;
    color: #555;
    font-weight: 600;
}

.article-content {
    font-size: 1.15rem;
    line-height: 2;
    color: #333;
    word-break: keep-all;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-quote {
    font-size: 1.3rem;
    font-style: italic;
    color: #2c3e50;
    border-left: 4px solid #3498db;
    padding-left: 1.5rem;
    margin: 2rem 0;
    line-height: 1.8;
    background: #f1f8ff;
    padding: 1.5rem;
    border-radius: 0 10px 10px 0;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 3rem;
    padding: 12px 25px;
    background: #2c3e50;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.back-btn i {
    margin-right: 8px;
}

.back-btn:hover {
    background: #1a252f;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .article-title {font-size: 1rem !important;}
    .article-author {font-size: 0.9rem !important;}
    .article-theme {display: none !important;}
    .article-content p {font-size: 0.85rem;}
    .family-site-grid {grid-template-rows: repeat(3,1fr) !important; grid-template-columns: repeat(1, 1fr) !important;}
}


    /* --- FAMILY SITE --- */
    .family-site-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 40px;
        width: 100%;
    }

    .family-site-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 50px 20px;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        text-decoration: none;
        color: inherit;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 280px;
        border: 1px solid rgba(0,0,0,0.02);
    }

    .family-site-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .family-site-item img {
        height: 60px;
        width: auto;
        max-width: 90%;
        margin-bottom: 25px;
        object-fit: contain;
    }

    .family-site-item h3 {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #a28100;
    }

    .family-site-item p {
        font-size: 0.95rem;
        color: #888;
        letter-spacing: 0.5px;
    }



	/* --- CAMPAIGN.PHP --- */

	.campaign-main-logo {
		display: flex;
		align-items: center;
		padding: 40px;
		max-width: 100%;
		margin: 0 auto;
		justify-content: center;
		flex-direction: column;
	}

	.campaign-compact-cards {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: 2rem 0;
		background: rgba(245, 247, 250, 0.4);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-radius: 20px;
	}

	.campaign-glass-card {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 16px;
		padding: 1.5rem 2rem;
		box-shadow: 0 5px 20px 0 rgba(31, 38, 135, 0.05);
		transition: all 0.3s ease;
		opacity: 0;
		transform: translateY(20px);
	}

	.campaign-glass-card.campaign-show {
		opacity: 1;
		transform: translateY(0);
	}

	.campaign-glass-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 30px 0 rgba(31, 38, 135, 0.1);
	}

	.campaign-card-police { border-left: 6px solid #82C5FF; background: linear-gradient(135deg, rgba(225, 240, 255, 0.6), rgba(255, 255, 255, 0.3)); }
	.campaign-card-local { border-left: 6px solid #A0D8B3; background: linear-gradient(135deg, rgba(230, 250, 235, 0.6), rgba(255, 255, 255, 0.3)); }
	.campaign-card-finance { border-left: 6px solid #FFB8A1; background: linear-gradient(135deg, rgba(255, 240, 235, 0.6), rgba(255, 255, 255, 0.3)); }
	.campaign-card-justice { border-left: 6px solid #CCCCCC; background: linear-gradient(135deg, rgba(240, 240, 240, 0.6), rgba(255, 255, 255, 0.3)); }
	.campaign-card-person { border-left: 6px solid #FFE066; background: linear-gradient(135deg, rgba(255, 250, 225, 0.6), rgba(255, 255, 255, 0.3)); }

	/* 가로 분할 및 아이콘 래퍼 */
	.campaign-col-icon {
		flex: 0 0 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5rem;
		position: relative;
	}

	.campaign-main-emoji {
		font-size: 4rem;
		line-height: 1;
		filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		position: relative;
		z-index: 2;
	}

	/* =========================================
	   Hover 애니메이션
	========================================= */

	/* 1. 경찰 (운전) */
	@keyframes campaign-drive {
		0% { transform: translateY(0) translateX(0) rotate(0deg); }
		25% { transform: translateY(-3px) translateX(2px) rotate(2deg); }
		50% { transform: translateY(0) translateX(5px) rotate(0deg); }
		75% { transform: translateY(-3px) translateX(8px) rotate(-2deg); }
		100% { transform: translateY(0) translateX(10px) rotate(0deg); }
	}
	.campaign-card-police:hover .campaign-main-emoji { animation: campaign-drive 0.6s infinite alternate ease-in-out; }

	/* 2. 지자체 (미소 팝업) */
	.campaign-smile-pop {
		position: absolute;
		font-size: 1.8rem;
		opacity: 0;
		z-index: 1;
		transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.campaign-card-local:hover .campaign-smile-1 { opacity: 1; transform: translate(-35px, -30px) scale(1.1) rotate(-15deg); }
	.campaign-card-local:hover .campaign-smile-2 { opacity: 1; transform: translate(35px, -20px) scale(1.1) rotate(15deg); }
	.campaign-card-local:hover .campaign-main-emoji { transform: scale(1.05); }

	/* 3. 금융회사 (돈다발 팝업) */
	.campaign-money-pop {
		position: absolute;
		font-size: 1.5rem;
		opacity: 0;
		z-index: 1;
		transition: all 0.5s ease-out;
	}
	.campaign-card-finance:hover .campaign-money-1 { opacity: 1; transform: translate(-30px, -45px) rotate(-20deg); }
	.campaign-card-finance:hover .campaign-money-2 { opacity: 1; transform: translate(0, -55px) scale(1.2); }
	.campaign-card-finance:hover .campaign-money-3 { opacity: 1; transform: translate(30px, -40px) rotate(20deg); }
	.campaign-card-finance:hover .campaign-main-emoji { transform: scale(1.05); }

	/* 4. 법무부 (망치 스윙) */
	.campaign-gavel-pop {
		position: absolute;
		font-size: 2.2rem;
		opacity: 0;
		right: 15px;
		top: 15px;
		z-index: 3;
		transform-origin: bottom right;
		transform: rotate(45deg) translate(20px, -20px);
		transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	@keyframes campaign-strike {
		0% { transform: rotate(0deg) translate(30px, -15px); }
		100% { transform: rotate(-35deg) translate(30px, -15px); }
	}
	.campaign-card-justice:hover .campaign-gavel-pop {
		opacity: 1;
		transform: rotate(0deg) translate(30px, -15px);
		animation: campaign-strike 0.4s ease-in-out infinite alternate;
		animation-delay: 0.3s;
	}
	.campaign-card-justice:hover .campaign-main-emoji { transform: translateX(-10px); }

	/* 5. 개인 (방패 회전) */
	.campaign-card-person:hover .campaign-main-emoji { transform: rotate(360deg) scale(1.3); }

	/* =========================================
	   텍스트 및 리스트
	========================================= */
	.campaign-col-text {
		flex: 1;
		margin-right: 1.5rem;
	}

	.campaign-col-list {
		flex: 0 0 180px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.campaign-col-text h3 {
		font-size: 1.3rem;
		font-weight: 700;
		color: #333;
		margin-bottom: 0.3rem;
		line-height: 1.2;
	}

	.campaign-col-text .campaign-desc {
		font-size: 0.95rem;
		color: #666;
		line-height: 1.4;
		margin: 0;
	}

	.campaign-col-list li {
		position: relative;
		padding-left: 1.3rem;
		margin-bottom: 0.3rem;
		font-size: 0.9rem;
		font-weight: 500;
		color: #444;
		display: flex;
		align-items: center;
	}

	.campaign-col-list li::before {
		content: '✓';
		position: absolute;
		left: 0;
		color: #2c3e50;
		font-weight: bold;
		font-size: 1.1rem;
	}

	/* =========================================
	   모바일 반응형
	========================================= */
	@media (max-width: 768px) {
		.campaign-glass-card {
			flex-direction: column;
			gap: 0;
			padding: 0.5rem; /* 요청하신 콤팩트한 패딩 */
		}

		/* 이모지 래퍼(및 팝업 애니메이션), 체크리스트, 설명글 모두 숨김 */
		.campaign-col-icon, 
		.campaign-col-list, 
		.campaign-desc {
			display: none !important;
		}
		.campaign-rule-title {font-size:2rem !important;}
		.campaign-rule-subtitle {display:none;}
		.campaign-col-text {
			flex: none;
			margin-right: 0;
			width: 100%;
			text-align: center;
		}
		.list-item {padding: 6px 10px !important;}
		/* 모바일용 제목 스타일 최적화 */
		.campaign-col-text h3 {
			font-size: 0.95rem;
			line-height: 1;
			font-weight: 500;
			margin-bottom: 0;
			padding: 0.5rem 0; /* 텍스트 위아래로 약간의 여백만 부여 */
		}
	}


	/* corp-style */

	/* 전기통신금융사기 통합대응단 전용 스타일 */

	/* 상하 여백을 줄이기 위해 해당 섹션만 타겟팅 */
	.content-section:has(.corp-grid) {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		background-color: #f8f9fa;
	}


	/* 7개 기관 한 줄 가로 배치 컨테이너 */
	.corp-grid {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 6px;           /* 카드 사이 적절한 간격 */
		flex-wrap: nowrap;  /* 절대 줄바꿈 금지 */
		width: 100%;
		overflow-x: auto;   /* 모바일 등 좁은 화면에서 가로 스크롤 허용 */
		padding: 2px 0;
	}

	/* 개별 카드 스타일 */
	.corp-card {
		flex: 1;
		min-width: 0;       /* Flex 자식의 너비 축소를 허용 */
		min-height: 0 !important;
		background: #ffffff;
		border: 1px solid #e2e8f0;
		border-radius: 4px;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.corp-card:hover {
		border-color: #3182ce;
		box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}

	/* 링크 및 텍스트 스타일 */
	.corp-card a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 10px 4px;  /* 적절한 클릭 영역 확보 */
		text-decoration: none;
		color: #4a5568;
	}

	.corp-name {
		font-size: 0.85rem;  /* 글자 크기를 합리적으로 키움 */
		font-weight: 500;
		white-space: nowrap; /* 텍스트 한 줄 유지 */
		letter-spacing: -0.04em; /* 자간을 좁혀 시각적 여유 확보 */
		text-align: center;
	}

	/* 가로 스크롤 시 바 디자인 (깔끔한 처리) */
	.corp-grid::-webkit-scrollbar {
		height: 3px;
	}
	.corp-grid::-webkit-scrollbar-thumb {
		background: #cbd5e0;
		border-radius: 10px;
	}


/* ================================================================== */
/* 22. CI IDENTITY SECTION (Expert & Analyst)                         */
/* ================================================================== */

.ci-identity-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-top: 3rem;
}

/* 메인 슬로건 (따옴표 스타일) */
.ci-main-quote {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

/* 본문 설명 */
.ci-intro-text {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
    word-break: keep-all;
}

/* 심볼 의미 타이틀 */
.ci-symbol-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

/* 심볼 리스트 스타일 */
.ci-symbol-list {
    list-style: none;
    padding: 0;
}

.ci-symbol-list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    color: #444;
}

.ci-symbol-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

.ci-symbol-list li strong {
    color: var(--color-text-dark);
    margin-right: 5px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .ci-main-quote { font-size: 1.4rem; }
    .ci-identity-wrapper { gap: 3rem; }
    .ci-visual img { max-width: 100%; }
}

/* ================================================================== */
/* 23. KAKAO               */
/* ================================================================== */

/* 우측 상단 고정 컨테이너 */
.quick {
  position: fixed;
  bottom: 30px;   /* 화면 아래쪽에서의 거리 */
  right: 30px; /* 화면 오른쪽에서의 거리 */
  z-index: 9999; /* 다른 요소들보다 항상 위에 표시 */
}

/* 기본 버튼 스타일 (호버 전: 동그란 아이콘 모양) */
.kakao-btn {
  display: flex;
  align-items: center;
  background-color: #FEE500; /* 카카오톡 공식 노란색 */
  color: #3C1E1E; /* 카카오톡 공식 텍스트(다크브라운) 색상 */
  text-decoration: none;
  border-radius: 50px; /* 완전한 둥근 모서리 */
  padding: 10px;
  width: 50px;  /* 초기 너비: 아이콘 크기에 딱 맞춤 */
  height: 50px; /* 초기 높이 */
  box-sizing: border-box;
  overflow: hidden; /* 영역을 벗어나는 텍스트 숨김 */
  transition: width 0.3s ease-in-out; /* 부드러운 너비 확장 애니메이션 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 살짝 그림자 효과 */
}

/* 카카오톡 이미지 아이콘 */
.kakao-btn .icon {
  display: inline-block;
  min-width: 30px; /* 아이콘 고정 크기 */
  height: 30px;
  /* 실제 사용하시는 카카오톡 아이콘 이미지 경로로 변경해 주세요 */
  background-image: url('https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png'); 
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 12px; /* 텍스트가 나타날 때 아이콘과의 간격 */
}

/* 텍스트 스타일 (호버 전에는 투명하게) */
.kakao-btn .text {
  white-space: nowrap; /* 줄바꿈 방지 */
  font-weight: 700;
  font-size: 16px;
  opacity: 0; /* 처음엔 글자 투명도 0으로 숨김 */
  transition: opacity 0.3s ease-in-out; /* 글자가 부드럽게 나타나도록 처리 */
}

/* 🖱️ 마우스 호버(Hover) 시 변화 */
.kakao-btn:hover {
  width: 140px; /* 텍스트가 다 보일 만큼 너비 확장 (필요시 조절) */
}

.kakao-btn:hover .text {
  opacity: 1; /* 글자 보이게 처리 */
}