@charset "UTF-8";

/* =========================================================
   WOWON · JANGGEUM OVERVIEW
   DARK CORPORATE SUB PAGE
   ---------------------------------------------------------
   pages.css  : 공통 레이아웃 / 간격 / 버튼
   본 CSS     : 장금 페이지 전용 컬러 / 콘텐츠 디자인
========================================================= */


/* =========================================================
   01. BASE
========================================================= */

.subpage.janggeum-overview{background:#111820;color:#c6ced5}
.subpage.janggeum-overview main{background:#111820}
.subpage.janggeum-overview .section{background:#111820;border-bottom-color:#2b353f}


/* =========================================================
   02. HEADER
========================================================= */

/* .subpage.janggeum-overview .header{background:#111820;border-bottom:1px solid #29333d}
.subpage.janggeum-overview .header .logo-word{color:#f3f5f6}
.subpage.janggeum-overview .main-nav>a{color:#a3adb6}
.subpage.janggeum-overview .main-nav>a:hover{color:#fff}
.subpage.janggeum-overview .main-nav>a[aria-current="page"]{color:#fff}
.subpage.janggeum-overview .main-nav>a[aria-current="page"]::after{background:#819b68}
.subpage.janggeum-overview .main-nav .nav-cta{border-color:#197650;background:#197650;color:#fff}
.subpage.janggeum-overview .main-nav .nav-cta:hover{background:#23875f;border-color:#23875f;color:#fff} */


/* =========================================================
   03. HERO
========================================================= */

.subpage.janggeum-overview .sub-hero{background:#151e27;border-bottom-color:#303b45}
.subpage.janggeum-overview .breadcrumb{color:#697580}
.subpage.janggeum-overview .breadcrumb a{color:#697580}
.subpage.janggeum-overview .breadcrumb a:hover{color:#a0b78a}
.subpage.janggeum-overview .breadcrumb [aria-current="page"]{color:#a5afb7}
.subpage.janggeum-overview .sub-hero>.container>.eyebrow{color:#829d68}
.subpage.janggeum-overview .sub-hero h1{color:#f2f5f7}
.subpage.janggeum-overview .sub-hero h1 em{color:#a5bd89}
.subpage.janggeum-overview .sub-description{color:#9ba6af}
.subpage.janggeum-overview .ip-meta{border-top-color:#303b45}
.subpage.janggeum-overview .ip-meta span{color:#87939d}
.subpage.janggeum-overview .ip-meta span+span::before{background:#3c4852}


/* =========================================================
   04. SECTION SHORTCUT
========================================================= */

.subpage.janggeum-overview .section-shortcuts{background:#111820;border-top-color:#34404a}
.subpage.janggeum-overview .section-shortcuts a{background:#111820;border-right-color:#34404a;color:#929da6}
.subpage.janggeum-overview .section-shortcuts a:first-child{border-left-color:#34404a}
.subpage.janggeum-overview .section-shortcuts a:hover{background:#19232c;color:#eef1f3}
.subpage.janggeum-overview .section-shortcuts a.is-active{background:#197650;color:#fff}
.subpage.janggeum-overview .section-shortcuts a.is-active::after{background:#fff}


/* =========================================================
   05. COMMON SECTION HEADING
========================================================= */

.subpage.janggeum-overview .section-heading .eyebrow{color:#829d68}
.subpage.janggeum-overview .section-heading h2{color:#f0f3f5}
.subpage.janggeum-overview .section-heading h2 em{color:#a4bd87}
.subpage.janggeum-overview .section-heading>p{color:#9aa5ae}


/* =========================================================
   06. PROJECT SECTION
   PC : LEFT VIDEO / RIGHT CONTENT
========================================================= */

.subpage.janggeum-overview .ip-project{background:#111820}
.subpage.janggeum-overview .ip-project>.container.split-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:70px}


/* =========================================================
   07. PROJECT VIDEO
========================================================= */

.subpage.janggeum-overview .project-film{position:relative;width:100%;height:500px;min-width:0;background:#18222c;border:1px solid #394550;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.subpage.janggeum-overview .project-film video{display:block;width:100%;height:100%;object-fit:cover}
.subpage.janggeum-overview .project-film::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.09);z-index:2;pointer-events:none}
.subpage.janggeum-overview .film-shade{background:linear-gradient(180deg,rgba(0,0,0,.02) 20%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.82) 100%)}
.subpage.janggeum-overview .film-label{top:20px;left:20px;padding:7px 10px;border:1px solid rgba(255,255,255,.28);background:rgba(9,14,19,.52);color:#eef2f4;font-family:"Inter",sans-serif;font-size:9px;letter-spacing:.13em}
.subpage.janggeum-overview .film-caption{left:23px;right:23px;bottom:22px}
.subpage.janggeum-overview .film-caption span{color:#bac3c9;font-family:"Inter",sans-serif;font-size:9px;letter-spacing:.11em}
.subpage.janggeum-overview .film-caption strong{display:block;margin:6px 0 4px;color:#fff;font-size:21px;line-height:1.3;letter-spacing:-.045em}
.subpage.janggeum-overview .film-caption span:last-child{color:#d2d8dc;font-size:11px;letter-spacing:-.02em}
.subpage.janggeum-overview .film-play{border:1px solid rgba(255,255,255,.4);background:rgba(10,15,20,.55);color:#fff}
.subpage.janggeum-overview .film-play:hover{background:#197650;border-color:#197650}


/* =========================================================
   08. PROJECT CONTENT
========================================================= */

.subpage.janggeum-overview .ip-project .section-heading{width:100%;min-width:0;margin-bottom:0}
.subpage.janggeum-overview .ip-project .section-heading h2{font-size:clamp(30px,3vw,40px);line-height:1.32}
.subpage.janggeum-overview .ip-project .section-heading>p{color:#a0abb4}


/* =========================================================
   09. SYNOPSIS
========================================================= */

.subpage.janggeum-overview .ip-synopsis{margin-top:25px!important;padding:20px 0 0 18px;border-top:1px solid #303b45;border-left:2px solid #718d5b;color:#858f98!important}


/* =========================================================
   10. PROJECT INFO GRID
========================================================= */

.subpage.janggeum-overview .ip-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-top:28px;border-top:1px solid #4a5761;border-bottom:1px solid #303b45}
.subpage.janggeum-overview .ip-info{position:relative;min-width:0;padding:19px 18px 20px;background:#151e27;border-right:1px solid #303b45;border-bottom:1px solid #303b45}
.subpage.janggeum-overview .ip-info:nth-child(2n){border-right:0}
.subpage.janggeum-overview .ip-info:nth-last-child(-n+2){border-bottom:0}
.subpage.janggeum-overview .ip-info::before{content:"";display:block;width:20px;height:2px;margin-bottom:13px;background:#76915d}
.subpage.janggeum-overview .ip-info>span{display:block;color:#819b66;font-family:"Inter",sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em}
.subpage.janggeum-overview .ip-info h3{margin:6px 0 7px;color:#edf1f3;font-size:17px;line-height:1.4;letter-spacing:-.04em}
.subpage.janggeum-overview .ip-info p{margin:0;color:#818d97;font-size:13px;line-height:1.65;letter-spacing:-.025em}


/* =========================================================
   11. PROJECT NOTE / ENTRY
========================================================= */

.subpage.janggeum-overview .ip-plan-note{margin-top:11px;color:#626f79;font-size:13px;line-height:1.6}
.subpage.janggeum-overview .ip-site-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding-top:19px;border-top:1px solid #29343e}
.subpage.janggeum-overview .ip-site-entry p{margin:0;color:#737f89;font-size:11px;line-height:1.5}


/* =========================================================
   12. BUTTON
   DARK PAGE : GREEN PRIMARY BUTTON
========================================================= */

.subpage.janggeum-overview .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:0!important;border:1px solid #197650;background:#197650;color:#fff;font-size:13px;font-weight:700;line-height:1}
.subpage.janggeum-overview .button:hover{background:#23875f;border-color:#23875f;color:#fff}
.subpage.janggeum-overview .button:focus-visible{outline:2px solid #a4bd87;outline-offset:3px}


/* =========================================================
   13. CONSORTIUM
========================================================= */

.subpage.janggeum-overview .ip-consortium{background:#151e27;border-bottom-color:#303b45}
.subpage.janggeum-overview .partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #4b5862;border-bottom:1px solid #303b45;gap:0}
.subpage.janggeum-overview .partner-card:hover{transform:initial;box-shadow:none}
.subpage.janggeum-overview .partner-card{position:relative;min-height:300px;padding:29px 27px 27px;background:#111920;border-right:1px solid #303b45}
.subpage.janggeum-overview .partner-card:last-child{border-right:0}
.subpage.janggeum-overview .partner-letter{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:24px;border:1px solid #4b5862;background:#172129;color:#8da66f;font-family:"Inter",sans-serif;font-size:11px;font-weight:800}
.subpage.janggeum-overview .partner-card .eyebrow{display:block;margin-bottom:8px;color:#809a65;font-family:"Inter",sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em}
.subpage.janggeum-overview .partner-card h3{margin:0 0 12px;color:#edf1f3;font-size:18px;line-height:1.4;letter-spacing:-.045em}
.subpage.janggeum-overview .partner-card p{margin:0;color:#8d98a2;font-size:12px;line-height:1.75;letter-spacing:-.025em}
.subpage.janggeum-overview .ip-partner-detail{display:block;margin-top:22px;padding-top:15px;border-top:1px solid #2c3741;color:#71808a;font-size:10px;line-height:1.5}


/* =========================================================
   14. CONSORTIUM BOTTOM
========================================================= */

.subpage.janggeum-overview .consortium-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}
.subpage.janggeum-overview .consortium-bottom p{margin:0;color:#78848e;font-size:11px}
.subpage.janggeum-overview .ip-bottom-statement{position:relative;margin-top:55px;padding-top:28px;border-top:1px solid #4b5862}
.subpage.janggeum-overview .ip-bottom-statement::after{content:"";position:absolute;top:-1px;left:0;width:70px;height:1px;background:#819a66}
.subpage.janggeum-overview .ip-bottom-statement>span{display:block;margin-bottom:12px;color:#819b67;font-family:"Inter",sans-serif;font-size:9px;font-weight:800;letter-spacing:.14em}
.subpage.janggeum-overview .ip-bottom-statement p{margin:0;color:#e8ecef;font-size:clamp(20px,2vw,29px);font-weight:500;line-height:1.5;letter-spacing:-.055em}
.subpage.janggeum-overview .ip-bottom-statement strong{color:#a3bc86;font-weight:800}


/* =========================================================
   15. FINAL CTA
========================================================= */

.subpage.janggeum-overview .ip-website{background:#101820;border-top:1px solid #35414b;border-bottom:1px solid #35414b}
.subpage.janggeum-overview .ip-website .eyebrow{color:#819b67}
.subpage.janggeum-overview .ip-website h2{color:#edf1f3}
.subpage.janggeum-overview .ip-website p{color:#8e9aa4}
.subpage.janggeum-overview .ip-website .button{background:#197650;border-color:#197650;color:#fff}
.subpage.janggeum-overview .ip-website .button:hover{background:#23875f;border-color:#23875f;color:#fff}


/* =========================================================
   16. FOOTER
========================================================= */

.subpage.janggeum-overview #footer{background:#0b1117;border-top:1px solid #29343e;color:#808b94}
.subpage.janggeum-overview #footer .logo-word{color:#f1f4f5}
.subpage.janggeum-overview #footer nav a{color:#727e88}
.subpage.janggeum-overview #footer nav a:hover{color:#fff}
.subpage.janggeum-overview #footer nav a[aria-current="page"]{color:#829d68}
.subpage.janggeum-overview .footer-bottom{border-top-color:#29343e}
.subpage.janggeum-overview .footer-bottom span{color:#65717b}
.subpage.janggeum-overview .footer-bottom a{color:#7f8b94}


/* =========================================================
   17. TABLET
========================================================= */

@media(max-width:1100px){

.subpage.janggeum-overview .ip-project>.container.split-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:45px}
.subpage.janggeum-overview .project-film{height:460px}
.subpage.janggeum-overview .partner-card{padding:26px 22px}
.subpage.janggeum-overview .partner-card h3{font-size:17px}
.subpage.janggeum-overview .partner-card p{font-size:12px}
.subpage.janggeum-overview .ip-project .section-heading h2{font-size:clamp(29px,3.2vw,36px)}
.subpage.janggeum-overview .ip-info{padding:18px 16px 19px}

}


/* =========================================================
   18. TABLET SMALL
========================================================= */

@media(max-width:900px){

.subpage.janggeum-overview .ip-project>.container.split-layout{display:grid;grid-template-columns:1fr;gap:45px}
.subpage.janggeum-overview .project-film{height:460px;box-shadow:none}
.subpage.janggeum-overview .ip-project .section-heading{order:1}
.subpage.janggeum-overview .project-film{order:2}
.subpage.janggeum-overview .ip-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.subpage.janggeum-overview .partner-grid{grid-template-columns:1fr}
.subpage.janggeum-overview .partner-card{min-height:0;border-right:0;border-bottom:1px solid #303b45}
.subpage.janggeum-overview .partner-card:last-child{border-bottom:0}
.subpage.janggeum-overview .partner-letter{margin-bottom:20px}
.subpage.janggeum-overview .consortium-bottom{gap:25px}

}


/* =========================================================
   19. MOBILE
========================================================= */

@media(max-width:700px){

.subpage.janggeum-overview .project-film{height:380px}
.subpage.janggeum-overview .project-film::before{inset:7px}
.subpage.janggeum-overview .film-label{top:15px;left:15px}
.subpage.janggeum-overview .film-caption{left:19px;right:19px;bottom:19px}
.subpage.janggeum-overview .film-caption strong{font-size:19px}
.subpage.janggeum-overview .film-caption span:last-child{font-size:10px}
.subpage.janggeum-overview .ip-info-grid{grid-template-columns:1fr}
.subpage.janggeum-overview .ip-info{padding:18px 16px 19px;border-right:0;border-bottom:1px solid #303b45}
.subpage.janggeum-overview .ip-info:nth-child(2n){border-right:0}
.subpage.janggeum-overview .ip-info:nth-last-child(-n+2){border-bottom:1px solid #303b45}
.subpage.janggeum-overview .ip-info:last-child{border-bottom:0}
.subpage.janggeum-overview .ip-info h3{font-size:16px}
.subpage.janggeum-overview .ip-info p{font-size:12px;line-height:1.7}
.subpage.janggeum-overview .ip-site-entry{align-items:flex-start;flex-direction:column;gap:15px}
.subpage.janggeum-overview .ip-site-entry p{font-size:10px}
.subpage.janggeum-overview .ip-site-entry .button{width:100%}
.subpage.janggeum-overview .partner-card{padding:25px 21px}
.subpage.janggeum-overview .partner-card h3{font-size:18px}
.subpage.janggeum-overview .partner-card p{font-size:12px}
.subpage.janggeum-overview .ip-partner-detail{font-size:10px}
.subpage.janggeum-overview .consortium-bottom{align-items:flex-start;flex-direction:column}
.subpage.janggeum-overview .consortium-bottom .button{width:100%}
.subpage.janggeum-overview .ip-bottom-statement{margin-top:42px}
.subpage.janggeum-overview .ip-bottom-statement p{font-size:20px}
.subpage.janggeum-overview .ip-website .button{width:100%}

}


/* =========================================================
   20. VERY SMALL MOBILE
========================================================= */

@media(max-width:370px){

.subpage.janggeum-overview .project-film{height:330px}
.subpage.janggeum-overview .film-caption{left:16px;right:16px;bottom:16px}
.subpage.janggeum-overview .film-caption strong{font-size:17px}
.subpage.janggeum-overview .film-caption span{font-size:8px}
.subpage.janggeum-overview .film-caption span:last-child{font-size:9px}
.subpage.janggeum-overview .sub-hero h1{font-size:29px}
.subpage.janggeum-overview .ip-project>.container.split-layout{gap:35px}
.subpage.janggeum-overview .ip-info{padding:17px 14px 18px}
.subpage.janggeum-overview .ip-info h3{font-size:14px}
.subpage.janggeum-overview .ip-info p{font-size:11px}
.subpage.janggeum-overview .partner-card{padding:23px 17px}
.subpage.janggeum-overview .partner-card h3{font-size:17px}
.subpage.janggeum-overview .partner-card p{font-size:11px}
.subpage.janggeum-overview .partner-letter{width:32px;height:32px}
.subpage.janggeum-overview .ip-bottom-statement p{font-size:18px}

}


/* =========================================================
   21. MOBILE SAFETY
========================================================= */

@media(max-width:700px){

.subpage.janggeum-overview .ip-project>.container.split-layout>*{min-width:0;width:100%}
.subpage.janggeum-overview .project-film video{width:100%;height:100%;object-fit:cover}
.subpage.janggeum-overview .ip-project .section-heading h2{font-size:27px;line-height:1.35}
.subpage.janggeum-overview .ip-project .section-heading>p{font-size:14px;line-height:1.85}
.subpage.janggeum-overview .ip-synopsis{margin-top:20px!important;padding:17px 0 0 14px}
.subpage.janggeum-overview .ip-plan-note{font-size:11px}
.subpage.janggeum-overview .consortium-bottom p{font-size:10px}
.subpage.janggeum-overview .ip-website h2{font-size:23px}
.subpage.janggeum-overview .ip-website p{font-size:12px;line-height:1.8}

}