@charset "utf-8";

/* 전역: 한글 줄바꿈 + 강제 개행 허용 */
body, body *:not(pre):not(code):not(table) { word-break: keep-all !important; overflow-wrap: break-word !important; }

/* 코드/표: 줄바꿈 보존 + 가로 스크롤 허용 */
pre, code, table { word-break: normal; overflow-wrap: normal; max-width: 100%; overflow-x: auto; }

/* ---------- Typography family (unified) ---------- */
body, .content-wrap, .content_wrap, .services-v2, .core, .prod_info, .our-services, .sub_title2, .service-label, .core__title, .core__sub, .services-title { font-family: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif !important; }
:root { --gray-50: #f5f5f5; --text: #111; --white: #fff; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Sub titles / typography (consolidated) ---------- */
.sub_title2 { text-align: center; font-weight: 700; color: #333; font-size: 24px; line-height: 1.8; }
.sub_title2 .emph { color: #007ec4; font-size: 32px; font-weight: 700; }

/* ---------- Sub titles / typography (600) ---------- */
.content_wrap .sub_title p.sub_title2 { font-family: "Pretendard Variable","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; text-align: center; font-size: 36px !important; line-height: 1.5; color: #434343; letter-spacing: -1.0px; font-weight: 600; font-synthesis: none; }
@supports (font-variation-settings: normal) { .content_wrap .sub_title p.sub_title2 { font-variation-settings: "wght" 600; } }
.content_wrap .sub_title p.sub_title2 .emph { font-size: 40px !important; font-weight: 700; color: #007ec4; }

@media (max-width: 900px) {
  .content_wrap .sub_title p.sub_title2 {
    font-weight: 700;
    font-size: 24px !important;
    line-height: 1.6 !important;
    margin-bottom: -30px !important;
  }
  .content_wrap .sub_title p.sub_title2.custom-margin { margin-bottom: -80px !important; }
  .content_wrap .sub_title p.sub_title2 .emph { font-size: 28px !important; }
}


/* ---------- Greeting section ---------- */
.greeting { position: relative; max-width: 1200px; }
.greeting .img { background: url(../img/bg_greeting.jpg) no-repeat 50%; background-size: cover; height: 324px; margin-top: 110px; position: relative; }
.greeting .img:before { background: url(../img/bg_chairman.png) no-repeat; bottom: 0; content: ""; display: block; height: 400px; left: 135px; position: absolute; width: 400px; }
.greeting .tit { background: #4168ad; height: 274px; position: absolute; right: 70px; top: 90px; width: 514px; }
.greeting .tit h3 { box-sizing: border-box; color: #fff; font-size: 22px; font-weight: 100; letter-spacing: -1px; line-height: 1.6; margin: 0; padding: 140px 20px 0 50px; position: relative; text-align: left; word-break: keep-all; }
.greeting .tit h3:before { background: #fff; content: ""; display: block; height: 124px; left: 50px; margin: 0; position: absolute; top: 0; width: 1px; }
.greeting .tit h3 span { display: block; font-weight: 600; }
.greeting .colum { margin: 0 auto; max-width: 1160px; padding: 80px 20px 0 20px; }
.greeting .colum:after { clear: both; content: ""; display: block; }
.greeting .colum .left { float: left; width: 48%; }
.greeting .colum .right { float: right; width: 48%; }
.greeting .sign { background-position: right center; background-repeat: no-repeat; color: #222; font-size: 1.125em; font-weight: bold; line-height: 50px; margin-top: 0; padding-right: 100px; text-align: right; }
.greeting .sign .name { font-size: 24px; margin-left: 5px; }

@media (max-width: 980px) {
  .greeting .tit { height: auto; padding: 0 50px 50px 0; position: relative; right: 0; top: 0; width: 100%; }
  .greeting .tit h3 { font-size: 22px; line-height: 1.6em; }
  .greeting .tit h3 br { display: none; }
  .greeting .img { height: 253px; }
  .greeting .img:before { background-size: cover; height: 310px; left: 50%; margin-left: -150px; width: 300px; }
  .greeting .colum .left { clear: both; width: 100%; }
  .greeting .colum .right { clear: both; padding-top: 20px; width: 100%; }
}

@media (max-width: 560px) {
  .greeting .tit { height: auto; padding: 0 30px 30px 0; position: relative; right: 0; top: 0; width: 100%; }
  .greeting .tit h3 { font-size: 20px; }
  .greeting .colum { padding: 50px 10px 0 10px; }
  .greeting .colum .left, .greeting .colum .right { width: 100%; padding: 10px 0; }
}


/* ---------- About / Generic layout ---------- */
.about-img-wrapper { width: 100%; }
.responsive-img { display: block; height: auto; margin-bottom: 100px; width: 100%; }

@media (max-width: 767px) {
  .responsive-img { margin-bottom: 20px; }
}


/* ---------- Content / contact blocks ---------- */
.contact_t01 { color: #000; font-size: 1.7em; line-height: 1.8em; padding: 30px 0 60px; text-align: center; }
.contact_t01 span { color: #009fdc; font-weight: 600; }
.content01 .box { display: block; padding-bottom: 80px; position: relative; }
.content01 .box .img_right { float: right; }
.content01 .box .txt_wrap { background: #fff; padding: 40px; position: absolute; right: 0; top: 45px; width: 60%; }
.content01 .box .txt_wrap .half-round-tit { display: inline-block; margin-bottom: 20px; }
.content01 .box .txt_wrap .half-round-tit strong { color: #1a1a1a; float: left; font-size: 22px; font-weight: 500; letter-spacing: 0; line-height: 1.6; vertical-align: middle; }
.content01 .box .txt_wrap .half-round-tit span { background: #8abd00; border-radius: 50%; color: #fff; display: inline-block; float: left; font-size: 16px; height: 35px; line-height: 35px; margin-right: 10px; text-align: center; vertical-align: middle; width: 35px; }
.content01 .box .txt_wrap p { text-align: left; }
.content01 .box .txt_wrap02 { background: #fff; left: 0; position: absolute; top: 45px; width: 60%; }

@media screen and (max-width: 960px) {
  .contact_t01 { font-size: 1.4em; padding: 20px 0 20px; }
  .content01 .box .img { clear: both; display: block; float: none; text-align: center; }
  .content01 .box .img img { width: 100%; }
  .content01 .box .txt_wrap { clear: both; display: block; padding: 20px; position: relative; width: 100%; }
}


/* ---------- Lead text ---------- */
.lead2 { color: #555; margin-bottom: 50px; margin-top: 50px; }

@media (max-width: 767px) {
  .lead2 { margin-bottom: 0; margin-top: 0; }
}


/* ---------- Responsive layout for content list ---------- */
.content02 ul li { float: left; width: 50%; }
.content02 ul li .profile { float: left; padding-bottom: 50px; width: 48%; }
.content02 ul li .profile img { width: 100%; }
.content02 ul li dl { float: left; padding: 0 40px; width: 52%; }
.content02 ul li dl dt { color: #1a1a1a; font-size: 22px; font-weight: bold; letter-spacing: 0; padding-bottom: 20px; text-align: left; }
.content02 ul li dl dd { clear: both; color: #555; display: block; font-size: 16px; letter-spacing: -0.02em; line-height: 1.75; text-align: left; }

.counsel_area .left { float: left; width: 15%; }
.counsel_area .left h2 { color: #000; font-size: 18px; font-weight: bold; }
.counsel_area .left p { color: #555; font-size: 16px; }
.counsel_area .right { float: left; margin-bottom: 50px; text-align: left; width: 80%; }
.counsel_area .right .frm_input { width: inherit; }

@media screen and (max-width: 1210px) {
  .content02 ul li { margin-bottom: 6%; margin-left: 2%; width: 49%; }
  .content02 ul li:nth-child(2n+1) { margin-left: 0; }
  .content02 ul li .profile { width: 100%; }
  .content02 ul li dl { padding: 0 20px; width: 100%; }
}

@media screen and (max-width: 640px) {
  .content02 ul li { margin-left: 0; width: 100%; }
  .counsel_area .left, .counsel_area .right { width: 100%; }
}



/* ---------- Product info ---------- */
.prod_info { height: auto; margin-top: -90px; width: 100%; }
.prod_info .img_page { background-position: center; background-repeat: no-repeat; background-size: cover; height: 700px; width: 100%; }
.prod_info .img_page.bg01 { background-image: url(../img/prod01_bg.jpg); }
.prod_info .img_page.bg02 { background-image: url(../img/prod02_bg.jpg); }
.prod_info .img_page.bg03 { background-image: url(../img/prod03_bg.jpg); }
.prod_info .img_page.bg04 { background-image: url(../img/prod04_bg.jpg); }
.prod_info .img_page.bg05 { background-image: url(../img/prod05_bg.jpg); }
.prod_info .img_page.bg06 { background-image: url(../img/prod06_bg.jpg); }
.prod_info .img_page.bg07 { background-image: url(../img/prod07_bg.jpg); }
.prod_info .img_page.bg08 { background-image: url(../img/prod08_bg.jpg); }
.prod_info .img_page.bg09 { background-image: url(../img/prod09_bg.jpg); }
.prod_info .img_page.bg10 { background-image: url(../img/prod10_bg.jpg); }
.prod_info .img_page.bg11 { background-image: url(../img/prod11_bg.jpg); }
.prod_info .img_page.bg12 { background-image: url(../img/prod12_bg.jpg); }
.prod_info .img_page.bg_token { background-image: url(../img/token_bg.jpg); }
.prod_info .img_page.bg_token_purchase { background-image: url(../img/token_bg2.jpg); }

.prod_info .img_page .title { color: #fff; display: block; font-size: 50px; font-weight: 600; line-height: 1; margin-bottom: 44px; padding-top: 100px; text-align: center; }
.prod_info .img_page .sub_title { color: #fff; display: block; font-size: 27px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.prod_info .img_page .text { color: #fff; display: block; font-size: 16px; font-weight: 300; line-height: 1.6; margin-bottom: 44px; padding-top: 10px; }
.prod_info .img_page .text h2 { color: #fff; display: block; font-size: 24px; font-weight: 400; line-height: 1.6; margin-bottom: 20px; padding-top: 0; }

.s-text { font-size: 16px; }
.prod_info .txt_page { margin: 0 auto 20px; max-width: 1300px; padding: 10px; }
.prod_info .txt_page h2 { display: block; font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 44px; padding-top: 100px; }

@media (max-width: 768px) {
  .prod_info .img_page .title { font-size: 2rem !important; }
  .prod_info .img_page .sub_title {font-size: 20px; }
  .prod_info .text { font-size: 1rem; }
  .prod_info .img_page { height: auto; padding: 10px; }
  .content-flex-fixed .text, .content-flex .text { box-sizing: border-box; width: 100%; }
}


/* ---------- Product info note section ---------- */
.prod_info .note_section { color: #555; font-size: 1.2em; margin-top: 50px; padding: 20px; }
.prod_info .note_content { display: flex; flex-wrap: wrap; gap: 20px; }
.prod_info .note_text { margin-left: 40px; flex: 1 1 auto; max-width: 30%; }
.prod_info .note_text p { font-size: 1em; line-height: 1.6; margin: 0; }
.prod_info .note_image { flex: 1 1 auto; max-width: 40%; }
.prod_info .note_image img { height: auto; width: 100%; }

@media (max-width: 768px) {
  .prod_info .note_section { padding: 15px; }
  .prod_info .note_content { flex-direction: column; }
  .prod_info .note_text, .prod_info .note_image { max-width: 100%; }
}


/* ---------- Product info note section 2 ---------- */
.note_section2 { margin: 0 auto; max-width: 1000px; padding: 20px; }
.note_text2 { margin-bottom: 20px; }
.image_row2 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.image_item2 { margin-bottom: 20px; width: calc(50% - 10px); }
.image_item2 img { display: block; height: auto; width: 100%; }

@media screen and (max-width: 768px) {
  .image_item2 { width: 100%; }
}


/* ---------- Product info text & table ---------- */
.prod_info .txt_page p { font-size: 1.4em; line-height: 1.75; }
@media (max-width: 960px) { .prod_info .txt_page p { font-size: 1em; } }

.prod_info .txt_page .lead { color: #555; font-size: 1.2em; line-height: 1.6; margin-bottom: 20px; text-align: justify; }

.prod_info .tbl-stat { border-collapse: collapse; margin-top: 20px; width: 100%; }
.prod_info .tbl-stat th, .prod_info .tbl-stat td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.prod_info .tbl-stat th { background-color: #f4f4f4; font-weight: bold; }

.prod_info table { border-collapse: collapse; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; width: 100%; }
.prod_info th, .prod_info td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.prod_info th { background-color: #f4f4f4; color: #333; }

@media (max-width: 960px) {
  .prod_info .note_content { align-items: flex-start; flex-direction: column; }
  .prod_info .note_image, .prod_info .note_text { margin-bottom: 40px; margin-right: 0; max-width: 90%; }
  .prod_info .txt_page .lead { font-size: 1em; }
  .prod_info .tbl-stat th, .prod_info .tbl-stat td { padding: 8px; font-size: 12px; }
}


/* ---------- Flexible content blocks ---------- */
.content-flex { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 40px; padding: 40px 20px; }
.content-flex .image { flex: 0 0 40%; }
.content-flex .image img { display: block; height: auto; width: 100%; }
.content-flex .text { color: #333; flex: 1; font-size: 1.1em; line-height: 1.75; text-align: left; }

@media (max-width: 960px) {
  .content-flex { flex-direction: column; }
  .content-flex .image, .content-flex .text { flex: 1 0 100%; }
}

.br-pc { display: none; }
.br-mobile { display: none; }
@media (min-width: 769px) { .br-pc { display: inline; } }
@media (max-width: 768px) { .br-mobile { display: inline; } }

.usage-item { text-indent: -10px; padding-left: 12px; display: block; margin-top: 0; }

@media (max-width: 768px) {
  .img_page { padding: 30px 15px; }
  .content-flex-fixed { display: block; }
  .image, .text { width: 100%; }
}
  
/* ---------- Fixed flex block ---------- */
.content-flex-fixed { align-items: flex-start; box-sizing: border-box; display: flex; flex-wrap: nowrap; gap: 40px; margin: 0 auto; max-width: 1200px; padding: 40px 20px; }
.content-flex-fixed .image { flex: 0 0 40%; min-width: 380px; order: 0; }
.content-flex-fixed .image img { display: block; height: auto; width: 100%; }
.content-flex-fixed .text { color: #222; flex: 1; font-size: 1.1em; line-height: 1.8; min-width: 280px; order: 1; padding: 20px; position: relative; z-index: 2; }
.content-flex-fixed.reverse .text { order: 0; }
.content-flex-fixed.reverse .image { order: 1; }

@media (max-width: 768px) {
  .content-flex-fixed, .content-flex-fixed.reverse { flex-direction: column; flex-wrap: wrap; }
  .content-flex-fixed .image, .content-flex-fixed .text, .content-flex-fixed.reverse .image, .content-flex-fixed.reverse .text { min-width: auto; order: unset; width: 100%; }
}
  
/* ---------- Images / visuals ---------- */
.image-container { display: flex; justify-content: space-between; max-width: 1200px; width: 80%; }
.image-container img { height: auto; width: 49%; }

@media (max-width: 960px) {
  .image-container { max-width: 380px; width: 100%; }
  .image-container img { width: 49%; }
}

.image-container_2 { display: flex; justify-content: space-between; max-width: 700px; width: 100%; }
.image-container_2 img { height: auto; width: 340px; }

@media (max-width: 960px) {
  .image-container_2 { max-width: 380px; width: 100%; }
  .image-container_2 img { width: 49%; }
}

.lingo-image { height: auto; max-width: 380px; min-width: 350px; object-fit: contain; width: 100%; }

@media (max-width: 768px) {
  .lingo-image { margin: 0 auto; min-width: 0; width: 80%; display: block; max-width: none; }
}

  
/* ---------- Ruby & Sapphire Section ---------- */
.note-container-ruby { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 60px 0; }
.note-image-ruby { flex: 1 1 200px; text-align: center; }
.lingo-image-ruby { min-width: 360px; height: auto; max-width: 400px; object-fit: contain; width: 100%; }
.prod_info .txt_page .note-container-ruby .note-image-ruby .note-caption-ruby { font-size: 18px; font-weight: 700; line-height: 1.35; margin-top: 12px; }

@media (max-width: 768px) {
  .note-container-ruby { align-items: center; flex-direction: column; }
  .lingo-image-ruby { display: block; max-width: 400px; margin: 0 auto; min-width: 300px; width: 80%; }
  .prod_info .txt_page .note-container-ruby .note-image-ruby .note-caption-ruby { font-size: 16px !important; line-height: 1.4; }
}


/* ---------- Ruby & Sapphire (deduped mobile rule) ---------- */
.ruby-sapphire-section .img_page.bg02 { height: auto !important; }

@media (max-width: 768px) {
  .ruby-sapphire-section .img_page.bg02 { padding: 20px 10px; }
}



/* ---------- JOJU TOKEN HERO ---------- */
@media (min-width: 1025px) {
  .joju-token-hero { 
    align-items: center; 
    background: url('../img/joju_main_bg.jpg') center/cover no-repeat; 
    color: var(--white); 
    display: flex; 
    flex-direction: column; 
    height: 852px; 
    justify-content: center; 
    margin-top: -50px; 
    min-height: 852px; 
    padding: 0 20px; 
    text-align: center; 
  }
  .joju-token-hero h3 { 
    font-weight: 300; 
    letter-spacing: .45em; 
    text-transform: uppercase; 
    font-size: clamp(35px, 1.3vw, 52px); 
    margin-bottom: 26px; 
  }
  .joju-token-hero h2 { 
    letter-spacing: -.01em; 
    line-height: 1.66; 
    font-weight: 600; 
    margin-top: 36px; 
    text-shadow: none; 
    font-size: clamp(40px, 5.8vw, 75px); 
  }
}

/* Responsive Media Queries for Mobile (1024px 이하) */
@media (max-width: 1024px) {
  .joju-token-hero { 
    align-items: center; 
    background: url('../img/joju_main_bg.jpg') center/cover no-repeat; 
    color: var(--white); 
    display: flex; 
    flex-direction: column; 
    height: auto; 
    justify-content: center; 
    margin-top: 0; 
    min-height: 560px; 
    padding: 56px 20px; 
    text-align: center; 
  }
  .joju-token-hero h3 { 
    margin-bottom: 14px; 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 1.2; 
  }
  .joju-token-hero h2 { 
    font-size: 26px; 
    font-weight: 700; 
    line-height: 1.5; 
  }
}


  
/* ---------- VALUE section (merged & deduped) ---------- */
@media (min-width: 1025px) {
  .joju-token .value-section { background: linear-gradient(90deg, #e9edf3 0 38%, #fff 38% 100%) !important; padding: 72px 0 !important; font-family: 'Noto Sans KR','Pretendard',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing: -0.008em; }
  .joju-token .value-inner { --sharkBleed: clamp(120px,12vw,240px); --containerW: 1440px; --gap: 24px; --colH: 680px; --leftCol: clamp(340px,32%,500px); --sharkW: clamp(420px,30vw,580px); --sharkTop: -180px; max-width: var(--containerW) !important; display: flex !important; align-items: stretch !important; gap: var(--gap) !important; margin: 0 auto !important; }
  .joju-token .value-left { background: transparent !important; display: flex !important; flex: 0 0 var(--leftCol) !important; flex-direction: column !important; justify-content: center !important; min-height: var(--colH) !important; padding: 0 32px 0 48px !important; }
  .joju-token .value-right { background: none !important; flex: 1 1 auto !important; min-height: var(--colH) !important; overflow: visible !important; padding: 0 12px 0 20px !important; position: relative !important; top: 120px !important; padding-left: 78px !important; }
  .joju-token .value-right .copy { margin-top: 12px; max-width: none !important; position: relative; transform: translateX(16px); z-index: 1; }
  .joju-token .value-right .copy p { font-size: 22px !important; letter-spacing: -0.05em; line-height: 1.6 !important; margin: 30px 0 18px !important; }
  .joju-token .value-left h2 { line-height: 1.15 !important; color: #1f4fb0 !important; font-size: clamp(54px,5.2vw,66px) !important; margin-bottom: 28px !important; }
  .joju-token .value-left p { letter-spacing: -0.01em !important; line-height: 1.4 !important; color: #1a1d26 !important; font-size: 30px !important; }
  .joju-token .value-left p strong { font-weight: 800 !important; color: inherit !important; font-size: 1.12em !important; }
  .joju-token .value-right .char { display: none !important; }
  .joju-token .value-right::before { content: none !important; }
  .joju-token .value-right::after { content: ""; position: absolute; right: calc(-1 * var(--sharkBleed)); top: var(--sharkTop); width: var(--sharkW); aspect-ratio: 1 / 1; background: url('../img/shark_character.png') no-repeat center/contain; pointer-events: none; z-index: 0; }
}

@media (max-width: 1024px) {
  .joju-token .value-section { background: #fff; padding: 48px 0; }
  .joju-token .value-inner { display: block; margin: 0 auto; max-width: 960px; }
  .joju-token .value-left, .joju-token .value-right { padding: 0 20px; }
  .joju-token .value-left { padding-left: 16px !important; }
  .joju-token .value-right { padding-left: 20px !important; }
  .joju-token .value-left h2 { font-size: clamp(22px,6vw,44px); color: #1f4fb0; }
  .joju-token .value-left p, .joju-token .value-right .copy p { font-size: 18px; line-height: 1.6; }
  .value-section .value-left { min-height: 300px; display: flex; justify-content: center; flex-direction: column; width: 100%; text-align: center; align-items: center; box-sizing: border-box; padding: 40px 16px; background-color: #e9edf3; }
  .joju-token .value-right .copy p { font-size: 18px; line-height: 1.6; margin-top: 26px; }
  .joju-token .value-right::after { content: none !important; }
  .joju-token .value-right .char { display: block !important; width: clamp(260px,60vw,380px); height: auto; margin: 16px auto 0; }
}



/* ---------- SLOGAN ---------- */
.slogan { 
  align-items: center; 
  background: url('../img/joju_main_bg2.jpg') right center/cover no-repeat; 
  color: #fff; 
  display: flex; 
  flex-direction: column; 
  height: 940px; 
  justify-content: center; 
  padding: 0 20px; 
  text-align: center; 
}
.slogan h3 { 
  font-size: 80px; 
  font-weight: 700; 
  margin-bottom: 80px; 
}
.slogan p { 
  font-size: 30px; 
  line-height: 1.8; 
  margin: 0 auto; 
  max-width: 1100px; 
}

@media (max-width: 768px) {
  .slogan { 
    background-position: center; 
    height: auto; 
    min-height: 500px; 
    padding: 60px 20px; 
  }
  .slogan h3 { 
    font-size: 40px; 
    margin-bottom: 40px; 
  }
  .slogan p { 
    font-size: 18px; 
    line-height: 1.7; 
  }
}



/* ---------- Core / Services titles (consolidated) ---------- */
.core .core__title, .core__title, .services-title { display: block; color: #003153; font-size: 64px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; text-align: center; }
.core__sub, .services-sub { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #003153; font-size: 28px; line-height: 1.6; font-weight: 400; margin: 0 0 60px; text-align: center; }
.core__arrow, .arrow-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-left: 8px; }

@media (max-width: 980px) {
  .core .core__title, .core__title, .services-title { font-size: 56px; }
  .core__sub, .services-sub { font-size: 22px; }
}

@media (max-width: 560px) {
  .core .core__title, .core__title, .services-title { font-size: 40px; letter-spacing: -0.01em; }
  .core__sub, .services-sub { font-size: 18px; gap: 4px; }
  .core__arrow, .arrow-icon { width: 20px; height: 20px; margin-left: 0; }
}



/* ---------- Core section ---------- */
.core { background: #fff; color: #000; font-family: 'Noto Sans KR','Pretendard',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing: -0.008em; }
.core .core__inner { margin: 0 auto; max-width: 1600px; padding: 100px 20px 70px; text-align: center; }
.core .core__visual { margin: 0 auto 52px; }
.core .core__visual > img { display: block; height: auto; margin: 0 auto; width: min(100%,1600px); }
.core .core__cards { display: flex; gap: 0; justify-content: center; list-style: none; margin: 80px 0 50px; padding: 0; }
.core .core-card { flex: 1 1 0; max-width: 520px; padding: 6px 28px 0; position: relative; }
.core .core-card + .core-card::before { background: #b6c7e3; content: ""; height: 85%; left: 0; position: absolute; top: 50%; transform: translate(-1px,-50%); width: 2px; }
.core .core-card__title { color: #0047ab; font-size: 40px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.18; margin: 0 0 12px; }
.core .core-card__title small { color: #0047ab; display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.05em; vertical-align: baseline; white-space: nowrap; }
.core .core-card__desc { color: #222; font-size: 28px; font-weight: 500; letter-spacing: -0.07em; line-height: 1.64; margin-top: 20px; }

@media (max-width: 1280px) {
  .core .core__title { font-size: 64px; }
  .core .core-card__title { font-size: 38px; }
  .core .core-card__title small { font-size: 22px; }
  .core .core-card__desc { font-size: 20px; }
}

@media (max-width: 980px) {
  .core .core__title { font-size: 56px; }
  .core .core-card { padding: 10px 8px 0; }
  .core .core-card + .core-card::before { display: none; }
  .core .core__cards { flex-direction: column; gap: 18px; }
  .core .core-card:not(:last-child) { border-bottom: 1px solid #b6c7e3; padding-bottom: 24px; }
}

@media (max-width: 560px) {
  .core .core__title { font-size: 40px; letter-spacing: -0.01em; }
  .core .core-card__title { font-size: 28px; }
  .core .core-card__title small { font-size: 18px; margin-left: 6px; }
  .core .core-card__desc { font-size: 18px; }
}



/* ---------- FUTURE HERO ---------- */
.future-hero { background: #0b4aa8 url('../img/joju_main_bg3.jpg') center/cover no-repeat; color: #fff; overflow: hidden; position: relative; }
.future-hero__inner { margin: 0 auto; max-width: 1500px; min-height: 960px; padding: 56px 20px 0; position: relative; }
.future-hero__logo { display: block; height: auto; pointer-events: none; position: absolute; right: -50px; top: 90px; width: 120px; z-index: 3; }
.future-hero__text { letter-spacing: normal; max-width: 1100px; padding-right: 520px; position: relative; text-align: left; word-break: keep-all; z-index: 2; }
.future-hero__text h2 { color: #fff; font-size: clamp(60px, 4.8vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; margin: 120px 0 16px; white-space: nowrap; }
.future-hero__text .accent { color: #fae927; }
.future-hero__text .sub { font-size: 30px; font-weight: 300; letter-spacing: 0.01em; margin: 40px 0 24px; opacity: .95; }
.future-hero__text .lead { color: #fff; font-size: 32px; letter-spacing: -0.07em; line-height: 1.6; margin: 120px 0 0; }
.future-hero__people { bottom: 0; margin: 0; position: absolute; right: 42px; text-align: right; z-index: 1; }
.future-hero__people img { pointer-events: none; max-width: none; display: block; filter: none; height: 600px; margin: 0; width: auto; }

@media (max-width: 1199.98px) {
  .future-hero__inner { min-height: auto; padding: 40px 16px 0; }
  .future-hero__logo { right: 16px; top: 50px; width: 64px; }
  .future-hero__text { max-width: none; padding-right: 0; top: -40px; }
  .future-hero__text h2 { font-size: clamp(34px, 6.2vw, 48px); line-height: 1.2; white-space: normal; }
  .future-hero__text .sub { font-size: clamp(16px, 2.2vw, 18px); margin-bottom: 16px; }
  .future-hero__text .lead { font-size: 18px; line-height: 1.8; margin-top: 50px; }
  .future-hero__people { bottom: auto; margin-top: 12px; position: static; right: auto; text-align: center; }
  .future-hero__people img { height: auto; max-width: min(560px, 90vw); }
}

@media (min-width: 1200px) {
  .future-hero__text { max-width: 1280px; padding-right: 480px; margin-left: -60px; }
  .future-hero__people { right: -80px; }
  .future-hero__text .lead { max-width: none; }
  .future-hero__inner { padding-left: 0; }
}



/* ---------- Banner ---------- */
.banner-wrap { background: url('../img/gradient_bg.jpg') center/cover no-repeat; margin: 0; text-align: center; width: 100%; }
.banner-wrap img { display: block; height: 570px; margin: 0 auto; max-width: 80%; object-fit: contain; width: auto; }

@media (max-width: 980px) {
  .banner-wrap img { height: 300px; max-width: 90%; }
}

@media (max-width: 560px) {
  .banner-wrap img { height: 200px; max-width: 95%; }
}



/* ---------- Video hero ---------- */
.hero-video { background: #000; position: relative; width: 100%; }
.hero-video__wrap { height: 90vh; min-height: 400px; overflow: hidden; position: relative; width: 100%; }
.hero-video__bg { background: #000; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero-video__content { align-items: center; display: flex; inset: 0; justify-content: center; pointer-events: none; position: absolute; text-align: center; z-index: 1; }
.hero-video__title { aspect-ratio: 6/1; background: url('../img/token_text.png') center/contain no-repeat; color: transparent; font-size: 0 !important; font-weight: 0; letter-spacing: 0; overflow: hidden; text-indent: -9999px; text-shadow: none; width: clamp(260px, 60vw, 900px); }

@media (max-width: 900px) {
  .hero-video__title { aspect-ratio: 6/1; width: clamp(220px, 88vw, 720px); }
  .hero-video__wrap { height: 62vh; min-height: 320px; overflow: hidden; }
  .hero-video { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .hero-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
  .hero-video__content { inset: 0; padding: 0 16px; align-items: center; justify-content: center; text-align: center; }
  .hero-video__title { width: clamp(220px, 88vw, 640px); aspect-ratio: 6/1; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero-video__wrap { height: 100vh; min-height: 300px; }
  .hero-video__title { width: clamp(220px, 55vw, 520px); }
}



/* ---------- Utility images ---------- */
.service-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.label-icon-img { display: inline-block; width: 48px !important; height: 48px !important; object-fit: contain; background: transparent; border-radius: 0; filter: none; }

/* ---------- Services grid ---------- */
.our-services { margin: 0 auto; max-width: 1200px; padding: 60px 20px; text-align: center; }
.our-services h2 { font-size: 5.5em; margin: 60px 0 30px; }
.our-services .subtitle { color: #444; font-size: 1.6em; line-height: 1.6; margin-bottom: 60px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1200px; column-gap: 36px; row-gap: 20px; }
.service-item { align-items: center; border-radius: 12px; display: flex; flex-direction: column; padding: 10px; transition: transform 0.2s ease; }
.service-item:hover { transform: translateY(-5px); }
.service-item img { border-radius: 8px; height: auto; max-width: 480px; object-fit: cover; width: 100%; }
.service-item p { color: #111; font-size: 1.5em; font-weight: 500; margin-top: 15px; }

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .services-grid { 
    grid-template-columns: 1fr; /* 모바일에서 그리드 컬럼을 1로 설정 */
  }

  .service-item img { 
    max-width: 100%; 
  }

  .our-services h2 { 
    font-size: 3.5em !important;
  }
}

/* ---------- Services V2 ---------- */
.services-v2 .service-label { align-items: center; display: flex; flex-direction: column; gap: 10px; }
.services-badge-wrapper { text-align: center; margin: 40px 0 30px; }
.services-badge { max-width: 150px; width: 100%; height: auto; object-fit: contain; margin: 0 auto; }
.service-label { align-items: center; display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.label-text { color: #0063a2; font-size: 32px; font-weight: 700; line-height: 1.4; text-align: center; }

@media (max-width: 640px) {
  .services-v2 .label-text { font-size: 22px; }
}

.services-v2 .service-card { filter: drop-shadow(6px 3px 6px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.12)); transition: transform .15s ease, filter .15s ease; background: transparent; border-radius: 10px; box-shadow: none; clip-path: none; overflow: hidden; }
.services-v2 .service-card:hover { filter: drop-shadow(9px 12px 14px rgba(0,0,0,.58)) drop-shadow(0 3px 6px rgba(0,0,0,.14)); transform: translateY(-1px); }
.services-v2 .service-card img { border-radius: inherit; display: block; height: 100%; object-fit: cover; width: 100%; }

@media (max-width: 480px) {
  .services-badge { max-width: 100px; }
}

/* ---------- Our Services Section ---------- */
.services-section { background: #fff; padding: 80px 0; }
.services-container { box-sizing: border-box; margin: 0 auto; max-width: 1372px; padding: 0 16px; }
.services-card { background: #eee; border-radius: 14px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.22); padding: 30px 0 32px; text-align: center; }

/* ---------- Account Section ---------- */
.account-title { background: #6b95dd; border-radius: 12px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.22); color: #fff; display: block; font-size: 20px; font-weight: 700; line-height: 1; margin: 20px 0 9px; padding: 20px 24px; width: 75%; margin: 0 auto; }
.account-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.22); color: #1a1d26; display: block; font-size: 22px; padding: 28px 24px; width: 75%; margin: 0 auto; margin: 8px auto 0 auto; }

@media (max-width: 1024px) {
  .account-title { width: 95%; }
  .account-box { width: 95%; margin: 8px auto 0 auto; }
}







/* ---------- Hero Grid Layout ---------- */
.hero-wrap { margin: 0 auto; max-width: 1372px; }
.cluster { margin: 0 auto; max-width: 970px; }

.hero-grid {
  display: grid;
  align-items: start;            /* 상단 정렬 (end → start) */
  justify-content: center;
  grid-template-columns: 630px 300px;
  gap: 6px;
  margin: 0 auto;
}

.hero-text {
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 1.7;
  margin: 25px 0 0 50px;         /* 위 여백 확보 */
  color: #fff;
}
.hero-text p { margin: 0 0 10px; white-space: nowrap; }
.hero-text b { font-weight: 800; }

.hero-note   { color: #ff8a2b; font-size: 20px; }
.hero-thanks { font-size: 28px; font-weight: 500; padding-top: 40px; color: #fff; }

.hero-illust { text-align: right; }
.hero-illust img {
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.45));
  height: auto;
  margin-top: 32px;
  max-width: 300px;
  width: 100%;
}

/* ---------- Background Token Purchase Section ---------- */
.bg_token_purchase {
  box-sizing: border-box;
  color: #fff;
  min-height: 760px;
  padding: 24px 20px;
  position: relative;
}

/* ---------- Sub Title Styles (base) ---------- */
.content_wrap .sub_title .sub_title2 span.txt-blue,
.content_wrap .sub_title .sub_title2 span.txt-dark {
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
}
.content_wrap .sub_title .sub_title2 span.txt-blue { color: #007ec4; font-size: 48px; }
.content_wrap .sub_title .sub_title2 span.txt-dark { color: #383737; font-size: 48px; }

/* ---------- Password & Signup Instructions ---------- */
.password-label     { letter-spacing: 3.5px; }
.signup-instruction { letter-spacing: 1px; margin-top: 8px; }

/* ---------- Button & Image Styles ---------- */
.btn-image { display: flex; justify-content: center; margin: 40px 0 8px; width: 100%; }
.btn-image img { display: block; height: auto; max-width: 720px; width: 100%; }

/* ---------- Desktop Only ---------- */
@media (min-width: 1025px) {
  .hero-grid { transform: translateX(110px); }
  .hero-text p:nth-of-type(1),
  .hero-text p:nth-of-type(2) { white-space: nowrap; }
}

/* ---------- ≤1024px (Tablet & Mobile) ---------- */
@media (max-width: 1024px) {
  .hero-thanks { font-size: 26px; }                  /* 중복 통합 */
  .hero-note   { font-size: 18px; } 
  .joju-token .value-right::after { content: none; } /* 유지 */
  .joju-token .value-right .char { display: block; } /* 유지 */

  .cluster { max-width: 720px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; margin-left: 0; justify-items: center; }

  .hero-text { font-size: 20px; margin: 8px 0 0 10px; }
  .hero-text p:nth-of-type(1),
  .hero-text p:nth-of-type(2) { white-space: normal; }

  .hero-illust { text-align: center; }
  .hero-illust img { margin-top: 0; max-width: 240px; }

  .content_wrap .sub_title .sub_title2 span.txt-blue,
  .content_wrap .sub_title .sub_title2 span.txt-dark { font-size: 36px !important; }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
  .hero-text  { font-size: 17px; margin: 10px 20px; }
  .hero-thanks{ font-size: 24px; }
  .hero-note   { font-size: 18px; } 

  .content_wrap .sub_title .sub_title2 span.txt-blue,
  .content_wrap .sub_title .sub_title2 span.txt-dark { font-size: 32px !important; }
}

/* ---------- ≤600px ---------- */
@media (max-width: 600px) {
  .hero-thanks { font-size: 20px; }
  .hero-note   { font-size: 17px; } 

  .content_wrap .sub_title .sub_title2 span.txt-blue,
  .content_wrap .sub_title .sub_title2 span.txt-dark { font-size: 30px !important; }

  .password-label     { letter-spacing: 2.2px; }
  .signup-instruction { letter-spacing: 0.5px; }

  .btn-image img { max-width: 100%; }
}







 /* 광물 영상 */


.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 필요 시 */
  margin: 60px auto 90px !important;
  aspect-ratio: 16 / 9; /* 근래 브라우저 */
  /* 만약 구형 지원이 필요하면 padding-top:56.25% 방식으로 대체 */
}

.video-wrapper__player,
.video-wrapper iframe { /* 과거 호환 위해 iframe 규칙 남겨도 됨 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 12px; /* 선택 */
  background: #000;
}