/* ============================================
   Layout Styles - 레이아웃 구조 전용 CSS
   ============================================
   이 파일은 사이트의 모든 레이아웃/구조 관련 CSS를 포함합니다.
   - 컨테이너, wrapper, inner 구조
   - 헤더 레이아웃 및 네비게이션 구조
   - 푸터 레이아웃
   - 섹션 간격 및 그리드 시스템
   - 반응형 레이아웃 조정
   ============================================ */

/* ========== 2025-11-02: 헤더 렌더링 전 컨텐츠 숨김 (FOUC 방지) ========== */
/* GNB가 비동기로 렌더링되는 동안 본문을 숨겨 깜박임 방지 */
body.nav-loading .contents {
  visibility: hidden;
}

/* ========== 기본 컨테이너 구조 ========== */
/* 2025-10-05: 공통 컨테이너 wrapper 클래스 */
.container-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;  /* 모바일/태블릿 기본 여백 (8px 그리드) */
}

/* 2025-10-07: 중간 크기 화면(1025-1440px)에만 패딩 적용 */
@media (min-width: 1025px) and (max-width: 1440px) {
  .container-wrapper {
    padding: 0 32px;  /* 중간 크기 화면 여백 */
  }
}

/* 2025-10-07: 큰 화면(1440px 초과)은 max-width로 중앙 정렬되므로 패딩 불필요 */
@media (min-width: 1441px) {
  .container-wrapper {
    padding: 0;
  }
}

/* ========== 기존 .inner 클래스 (호환성 유지) ========== */
@media all and (min-width:1025px){
	.inner{max-width: 1400px; width: 100%; margin: 0 auto;}
	/* 2025-11-02 수정: 헤더 전체 높이(info_head 32px + head 100px + nav 58px(border 포함) = 190px)에 맞춰 조정 */
	#wrap {padding-top:190px;position:relative;}
	.__graybox_line,.__m_graybox{display:none;}

	/* ========== 데스크탑 헤더 구조 ========== */
	#header {position:absolute;left:0;top:0;width:100%;background:#fff;overflow:hidden;transition:0.3s;height:auto;z-index:200;}
	#header .head .inner {height:100px;position:relative;max-width:1400px;margin:0 auto;}
	#header .head .logo {position:absolute;left:0;top:33px;font-size:0;}

	.search {width:100%;overflow:hidden; position: relative; border-radius: 40px; border: 2px solid var(--accent-blue);}
	.search input[type=text] {display:block;width:100%;height:73px;line-height:73px;width:100%;border:none;outline:none;padding-left:180px;font-size:var(--font-body);font-weight:400;letter-spacing:-0.05em;}
	.search button {display:block;position:absolute;right:0px;top:0;width:100px;height:73px; border:none;color:#333;font-size:var(--font-h2); background: none;}

    .contents .sch, .contents .mnu{
        display: none;
    }
	.xi-search{font-size: var(--font-display);}

	.img_logo_se{position: absolute; left: 15px; height: 73px; display: flex; align-items: center;}

	.search input::placeholder {color: var(--text-light); font-size: var(--font-body); opacity: 1;}
	.search input::-webkit-input-placeholder { color: var(--text-light); }
	.search input::-moz-placeholder { color: var(--text-light); opacity: 1; }
	.search input:-ms-input-placeholder { color: var(--text-light); }
	.search input::-ms-input-placeholder { color: var(--text-light); }

	#header .nav {border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);box-sizing: border-box;}
	#header .nav .inner {max-width:1400px;height:56px;margin:0 auto;position:relative;}

	#header .nav .mnu {position:absolute;right:2px;top:0;height:50px;width:50px; border: none; color:#000;font-size:var(--font-h2);text-align:center;background:#ffffff;z-index:10; border-left: 1px solid var(--border-medium); border-right: 1px solid var(--border-medium);}
	#header .nav .mnu:before {content:"\e120";font-family:axicon;}

	/* 2025-10-05: GNB 스타일 - h4 크기 및 밑줄 애니메이션 적용 */
	#header .nav .gnb {width: 100%; display: flex;}
	#header .nav .gnb:after {content:'';display:block;clear:both;}
	#header .nav .gnb > li {width: calc(100%/7);  position:relative; z-index: 3; transition: all .1s ease; border: 0;}

	#header .nav .gnb > li ~ li:before {content:"";display:block;width:1px;height:15px;background:var(--border-medium);position:absolute;left:-1px;top:50%;margin-top:-7.5px;background:var(--border-medium);z-index: -1;}
	#header .nav .gnb > li ~ li:before{display: none;}

	/* 2025-10-09: 메인 메뉴 - h4 크기 및 weight 모두 CSS 변수 사용 */
	#header .nav .gnb > li > a{display:block;height:56px;line-height:56px;text-align:center;font-size:var(--font-h4) !important;color:#2c313e;letter-spacing:-0.05em; position: relative; font-weight: var(--weight-h4);}
    #header .nav .gnb > li > a::after{position: absolute; bottom: 0; width: 100%; height: 3px; background: #fff; content: ""; left: 0;}
    #header .nav .gnb > li:hover > a::after{background: var(--accent-navy);}
	#header .nav .gnb > li:hover,
	#header .nav .gnb > li.active{color: var(--accent-navy);}
	#header .nav .gnb > li:hover > a,
	#header .nav .gnb > li.active > a {color: var(--accent-navy);}

	/* 서브 메뉴 */
	#header .nav .gnb > li > ul {display:none;position:absolute;left:0;top:100%;width:100%;text-align:center;height:340px; padding-top: 10px; box-sizing: border-box;}
    #header .nav .gnb > li > ul:hover{background: #f7f7f7;}

	/* 2025-10-09: 서브 메뉴 - 디자인 시스템 변수 사용, 얇고 빠른 밑줄 애니메이션, 간격 축소 */
	#header .nav .gnb > li > ul > li > a {display:block;font-size:var(--font-small);padding:6px 0; color: #424242; position: relative; text-align: left; padding-left: 10px; max-width: 160px; box-sizing: border-box;}
    #header .nav .gnb > li > ul > li > a::after{position: absolute; left: 0; bottom: 4px; width: 0; height: 1px; background:var(--accent-navy); content: ""; transition: width 0.15s ease;}
    #header .nav .gnb > li > ul > li > a:hover::after{width: 100%;}
	#header .nav .gnb > li > ul > li:hover > a {color: var(--accent-navy);}
	/* 2025-10-09: 서브메뉴 active 상태도 디자인 시스템 weight 사용 */
	#header .nav .gnb > li > ul > li.active > a {font-weight:var(--weight-h4);color:var(--accent-navy);}
	#header .nav .gnb > li > ul > li > ul {display:none;}

    /*헤더 배열 가운데면서 - 맞추는거 떄메 쩔수*/
    #header .nav .gnb > li:nth-of-type(1) > ul{padding-left: 50px;}
    #header .nav .gnb > li:nth-of-type(2) > ul{padding-left: 25px;}
    #header .nav .gnb > li:nth-of-type(3) > ul{padding-left: 35px;}
    #header .nav .gnb > li:nth-of-type(4) > ul{padding-left: 35px;}
    #header .nav .gnb > li:nth-of-type(5) > ul{padding-left: 70px;}
    #header .nav .gnb > li:nth-of-type(6) > ul{padding-left: 55px;}
    #header .nav .gnb > li:nth-of-type(7) > ul{padding-left: 60px;}
    /*헤더 배열 가운데면서 - 맞추는거 떄메 쩔수*/

	.navOn #header {height:520px; border-bottom:1px solid var(--border-medium);}
	.navOn #header .nav .mnu {background:#000;color:#fff;text-align:center; border-left: 1px solid #ffffff;}
	.navOn #header .nav .mnu:before {content:"\e937";}

	#nav {display:none;}
}

@media all and (max-width: 1150px){
	#header .nav .gnb{width: 100%;}
}

/* ========== 모바일 graybox ========== */
@media all and (max-width:1024px){
	#wrap {padding-top:50px;}

	.__graybox{display: none;}
	.__m_graybox{width:100%; margin:0 auto; text-align:center; color:#fff; letter-spacing:1px;}

	.__m_graybox .gray{margin-bottom: 3%; z-index:100;}
	.__m_graybox .gray h2{font-size:3vw;}
	.__m_graybox .gray1{width:100%; height: 80px; line-height:79px; background:#389db9;}
	.__m_graybox .gray2{width:100%; height: 80px; line-height:79px; background:#64b0c7;}
	.__m_graybox .gray3{width:100%; line-height:79px; background:#38c5bd;}
	.__m_graybox .gray3_inner{width:100%; border:1px solid #e3e3e3; margin:0 auto; display:block; overflow:hidden; background:#fff;}
	.__m_graybox .gray3_inner > li{width:33.3333%; float: left; color: #000; display:inline-block; font-size:2vw;}
	.__m_graybox .gray4{width:100%; line-height:79px; background:#38c5bd;}
	.__m_graybox .gray5{width:100%; line-height:79px; background:#38c5bd;}
}

/* ========== 관련사이트(#rel) 영역 구조 ========== */
#rel {padding:0 15px; border-top: 1px solid #dce4ea;}
#rel .inner{max-width:1400px;margin:0 auto;}
/* 2025-10-05: area를 flexbox로 변경하여 roll 수직 중앙 정렬 */
#rel .area {background-color: #ffffff; height:111px;position:relative;font-size:0;padding-left:160px; display: flex; align-items: center;}
#rel .area h3 {line-height:1em;position:absolute;left:11px;top:13px;font-size:var(--font-small);font-weight:normal;color:#000;}
#rel .area .cont {position:absolute;left:9px;top:37px;}
#rel .area .cont button {width:15px;height:15px;border:1px solid #ddd;text-align:center;background:#fff;color:#777;}
#rel .area .cont button i {font-size:var(--font-small);}
#rel .area .cont .stop i:before {content:"\e748";}
#rel .area .cont button ~ button {margin-left:-1px;}

#rel .area .cont button i{color: #000; font-size: var(--font-small);}

#rel .area .cont{gap: 0;}
#rel .area .cont button{width: 35px; height: 35px;}

/* 2025-10-05: swiper는 flex-1로 남은 공간 채우기, height 제거 */
/* 2025-11-02: .roll → .swiper로 변경 (HTML 구조와 일치) */
#rel .area .swiper {
    display: flex;
    align-items: center;
    flex: 1;
}

/* ========== 푸터 구조 ========== */
#footer {background:#eff3f7;padding:35px 15px;position: relative; border-top: 1px solid #dce4ea;}
#footer .inner {max-width:1400px;margin:0 auto;position:relative;}

#gotop {display: none !important;}
#gotop.show {opacity:1;transform:translate3d(0,0,0);}

.footer_up{display: flex; align-items: center; justify-content: space-between;}
.foot_sub_link{padding: 15px 0;}
.foot_sub_link ul{display: flex; gap: 25px; justify-content: flex-end;}
.foot_sub_link ul li{ font-size: var(--font-small);}

.foot_sub_link{border-bottom: 1px solid #becad6; text-align: right;}

.footer_down{font-size: var(--font-small); color: #666;}
.list_fot_c p{min-width: 150px;}

.footer_down span{min-width: 80px; color: #000;}
.footer_down ul{gap: 15px; display: flex; flex-direction: column; padding: 15px 0;}

.footer_down ul li{display: flex;}
.footer_down ul li.list_fot_c{display: flex; gap: 10px;}

.footer_down ul li div{display: flex;}

.footer_down ul li b{font-size: var(--font-small); font-weight: 300; color: #abb4bd; margin-top: 30px;}

@media all and (max-width:1024px){
	#gotop {width:35px;height:35px;}
}

.sr-only{display: none;}

.foot_link_box{display: flex; gap: 28px;}
.foot_link_box a{padding: 15px; text-align: left; font-size: var(--font-small); box-sizing: border-box; border: 1px solid #000; width: 270px; color: #000; background: url(../images/link_box.png) no-repeat 95% 50%;}

/* ========== 헤더 유틸리티 위치 및 구조 ========== */
.header-util{display: flex; flex-direction: column; align-items: flex-end; height: 100%; gap: 20px;  justify-content: center;}
.header-util .bottom .mo-menu {display:none;}

.header-bottom {position:relative; margin:1rem 0 0 0; border-top:0.1rem solid var(--iw-gray-20);}
.header-bottom::before {content:''; position:absolute; left:0; top:5.6rem; display:block; width:100%; height:0.1rem; background-color:var(--iw-gray-20);}

.tnb{display: flex; gap: 20px;}
.tnb a{font-size: var(--font-small); color: #333; display: flex; align-items: center; font-weight: 600;}
.tnb a img{margin-left: 10px;}

.header-util .top {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 각 항목 */
.util-item {
  position: relative;
}

.header-util .util-item::after{position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 12px; background: #cdd1d5; content: "";}
.header-util .util-item:last-of-type .btn-toggle{padding-right: 0; }
.header-util .util-item:last-of-type:after{display: none;}

.btn-toggle {
	background: none;
	border: 0;
  cursor: pointer;
  font-size: var(--font-small);
  color: #000;
  padding: 5px 10px;
  display: flex;
  align-items: center;
}

.toggle-layer {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 160px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-top: 5px;
  z-index: 1000;
}

.toggle-layer.active {
  display: block;
}

.toggle-layer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toggle-layer li {
  border-bottom: 1px solid #f1f1f1;
}

.toggle-layer li:last-child {
  border-bottom: none;
}

.toggle-layer a,
.toggle-layer button.btn-size {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-small);
  color: #333;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  justify-content: center;
}

.zoom-control button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  background: #fff;
  cursor: pointer;
  font-size: var(--font-small);
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.zoom-control button:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#zoom-reset {
  width: auto;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: var(--font-small);
  font-weight: normal;
  background: #f5f5f5;
}

#zoom-level {
  min-width: 55px;
  text-align: center;
  font-weight: bold;
  font-size: var(--font-small);
}

/* ========== 컨텐츠 패딩 및 flex zone ========== */
.contents{
  /* 2025-10-04 수정: 8px 그리드 시스템 적용 - 상단 여백 64px */
  padding-top: 64px;
  transition: transform 0.2s ease, zoom 0.2s ease;
  transform-origin: top center;
}

/* 2025-10-21: 서브 페이지는 히어로 컴포넌트가 있어서 상단 패딩 불필요 */
.contents.subpage {
  padding-top: 0;
}
.info_head{background:#eef2f7}
.info_head .inner{display: flex; align-items: center; gap: 10px; height: 32px; color: #333; font-weight: 500;}

/* 2025-10-04 수정: 8px 그리드 시스템 적용 - gap 24px, 48px */
/* 2025-10-07: 퀵박스 간격 32px → 24px로 조정 */
.flex_zone30{display: flex; align-items: center; gap: 24px;}
.flex_zone50{display: flex; align-items: center; gap: 48px;}

/* ========== 섹션 간격 ========== */
/* 2025-10-04 수정: 8px 그리드 시스템 적용 - 섹션 간격 64px */
/* 2025-10-21 수정: title_zone margin-bottom 제거 */
.vis_zone,
.notice_zone,
.vis_zone.reverse {
    margin-bottom: 64px;
}

/* 2025-10-05 수정: 정확히 50% 너비로 통일 - gap이 자동으로 간격 처리 */
.flex_zone50 > .grid_vus{width: calc(50% - 24px);}
.vis_zone.flex_zone50{align-items: flex-start}

/* 2025-10-07: 패딩을 디자인 시스템 변수로 변경 */
.qucik_box{width: calc(100%/2 - 15px); box-sizing: border-box; height: 325px; border-radius: 25px; padding: var(--spacing-lg);
	display: flex; flex-direction: column; justify-content: space-between
}

.qucik_box h4{margin-bottom: 15px;}

.vis_zone .area{position: relative; padding-bottom: 19px;}
.vis_zone .roll{height: 325px; border: 2px solid #ddd; box-sizing: border-box; border-radius: 25px; overflow: hidden;}
.vis_zone .cont{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: 2px 2px 5px 0px #0000004f; border-radius: 30px; padding: 10px 15px; z-index: 2; display: flex; gap: 7px; font-size: var(--font-small); font-weight: 700;align-items: center;}
.vis_zone .cont .current{color: #294579;}
.vis_zone .cont button{border: 0; background: none;}

.link_box{display: flex; gap: 15px; flex-direction: column; font-size: var(--font-small);}
.link_box .btn_cus{display: flex; align-items: center; width: 100%; height: 53px; line-height: 47px; border-radius: 50px; border: 2px solid #ddd; padding-left: 18px; color: #fff; gap: 15px; background: url(../images/arrow.png) no-repeat 90% 50%;}

.green_box_color{background: url(../images/qubg_1.png); color: #fff;}
.blue_box_color{background: url(../images/qubg_2.png); color: #fff;}

.small_tit{margin-bottom: 20px; position: relative;}

.vis_zone.reverse .small_tit .cont{right: 0; left: auto; transform:none; box-shadow: none;}

.small_tit{display: flex; align-items: center; justify-content: space-between;}
.small_tit a{ font-size: var(--font-small); text-decoration: underline; font-weight: 600;}

.board-item .board-content {
  width: 100%;
}

.board-item .board-content ul li {
  border-bottom: 1px solid #DBDBDB;
  padding: 20px 0;
}

.board-item .board-content ul li a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* 2025-10-07: 제목 영역 - 날짜 공간 확보하고 말줄임표 처리 */
.board-item .board-content ul li a .sub_txt{
  order: 2;
  display: block;
  flex: 1;
  min-width: 0;

  font-size: var(--font-small);
  line-height: 150%;
  letter-spacing: -1px;
  color: #333333;
  position: relative;
}

.board-item .board-content ul li a .sub_txt strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2025-10-07: 날짜 영역 - 고정 너비, 여러 줄 방지 */
.board-item .board-content ul li a .date {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
  width: 120px;
  gap: 10px;
}

.board-item .board-content ul li a .date span {
  width: 100%;
  font-weight: 900;
  font-size: var(--font-h1);
  color: #333;
  order: 1;
  text-align: center;
  position: relative;
}

.board-item .board-content ul li a .date span::after{position: absolute; top: 0; right: 14px; width: 20px; height: 20px; content: "N"; display: flex; align-items: center; justify-content: center; color: #fff; background: red; border-radius: 100%; font-size: var(--font-small);}
.board-item .board-content ul li.down_noti a .date span::after{display: none;}

.board-item .board-content ul li a .date em {
  font-weight: 400;
  font-size: var(--font-small);
  line-height: 10px;
  color: #84898f;
  order: 2;
}

/* ========== 탭 구조 ========== */
.tab_zone{ font-weight: 500; gap: 10px; display: flex; align-items: center;}
.tab_zone button{border: 0; background: none; font-size: var(--font-small); border-bottom: 5px solid #fff; color: #333; text-align: center;padding: 15px;position: relative;}
.tab_zone button:last-of-type::after{display: none;}
.tab_zone button::after{position: absolute; right: 0; content: "/"; font-size: var(--font-small); color: #ddd; margin-right: -10px;}
.tab_zone button.active{color: #1d335b; border-color: #1d335b;}

.tap_up{ border-bottom: 1px solid #dddddd; display: flex; align-items: center; justify-content: space-between;}
.small_cot_noti{padding: 28px; padding-top: 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 25px;}

.down_noti p{display: none}
.board-item .board-content ul li.down_noti{border: 0; padding:0; padding-top: 10px;}
.board-item .board-content ul li.down_noti a{flex-direction: row-reverse}
.board-item .board-content ul li.down_noti .date{flex-wrap: nowrap !important; flex-direction: row-reverse;  gap: 0;     align-items: center; position: relative;}
.board-item .board-content ul li.down_noti .date span{font-size: var(--font-small) !important; font-weight: 400; width: auto; color: #666;}
/* .board-item .board-content ul li.down_noti .date span::before{content: "-"; font-size: var(--font-small); font-weight: 400; color:#666} */
.board-item .board-content ul li.down_noti a .date em{font-size: var(--font-small); display: inline-block; line-height: normal; color: #666;}

.notice_zone.flex_zone50{align-items: normal}

.up_books{display: flex; text-align: center; position: relative; padding-top: 26px;}
.up_books::after{position: absolute; top: 0; background: #dce4ea; height: 2px; width: 100%; content: ""; border-radius: 25px; overflow: hidden; height: 292px; z-index: -1;}
.up_books .book_list{width: 50%; text-align: center;}
.img_book{margin: 0 auto;}

.book_list a{display: inline-block;}

.down_books{width: 100%;}
.down_books a{display: block; text-align: center; font-size: var(--font-small); padding: 15px 0; border-radius: 15px; background: #13366e; color: #fff;}

.small_cot.small_cot_book{display: flex; flex-direction: column; justify-content: space-between;}

/* .area의 margin-bottom 제거 - 섹션 자체에 margin-bottom 적용됨 */

.pc_none{display: none; position: relative;}

.reverse .box{background: url(../images/banner_zone.png) no-repeat center; background-size: cover; height: 325px; width: 100%;}

.mo_ings{display: none !important;}

#header .nav .gnb > li.active > a{color: var(--accent-navy);}
#header .nav .gnb > li.active > a::after{background: var(--accent-navy);}

/* ========== 데스크탑 navOn 동작 ========== */
/* 데스크톱: 1025px 이상 - navOn 클래스로 서브메뉴 제어 */
@media all and (min-width: 1025px) {
  /* navOn 클래스가 있을 때만 서브메뉴 표시 */
  html.navOn #header .nav .gnb > li > ul {
    display: block !important;
  }

  /* 메뉴 간격 조정 - 2025-10-05: 폰트 크기는 74줄의 var(--font-h4) 사용 */
  #header .nav .gnb > li > a {
    padding: 0 8px;
  }

  /* 서브메뉴 위치 조정 */
  #header .nav .gnb > li:nth-of-type(1) > ul { padding-left: 10px; }
  #header .nav .gnb > li:nth-of-type(2) > ul { padding-left: 10px; }
  #header .nav .gnb > li:nth-of-type(3) > ul { padding-left: 15px; }
  #header .nav .gnb > li:nth-of-type(4) > ul { padding-left: 15px; }
  #header .nav .gnb > li:nth-of-type(5) > ul { padding-left: 20px; }
  #header .nav .gnb > li:nth-of-type(6) > ul { padding-left: 20px; }
  #header .nav .gnb > li:nth-of-type(7) > ul { padding-left: 25px; }
}

/* ========== 모바일 헤더 구조 ========== */
@media all and (max-width: 1024px){
  /* 2025-10-04 수정: 모바일에서 전체 너비 사용하도록 max-width 제거 */
  /* 2025-10-07: flex_zone50 내부 모든 요소 전체 너비 사용 */
  .flex_zone50{flex-direction: column; width: 100%;}
  .flex_zone50 > .grid_vus{width: 100%;}
  .vis_zone > .grid_vus{width: 100%;}
  #visual,#gerrelly{width: 100%;}
  .notice_zone .grid_vus,.vis_zone.reverse .grid_vus{width: 100%;}
  #wrap{padding-top: 60px;}  /* 2025-10-11: 헤더 높이에 맞춰 52px → 60px */
  #visual .slick-slide img{height: auto;}
  #header .mnu, #header .sch{font-size: var(--font-h1) !important;}
  /* 2025-10-11: 로고 top 제거 - 아래에서 top:50%로 중앙 정렬 */
  .pc_none{display: block; height: 60px;}  /* 2025-10-11: 헤더 높이에 맞춰 50px → 60px */
  .info_head,.header-util{display: none;}
  #header .head .inner{height: auto;}

	#header {position:fixed;left:0;top:0;width:100%;height:60px;background:#fff;z-index:200;box-shadow:0 1px 1px rgba(0,0,0,0.15);}  /* 2025-10-11: 50px → 60px (모바일 헤더 높이 증가) */
	#header .logo {left:15px;top:50%;transform:translateY(-50%);width:200px;position:absolute;}  /* 2025-10-11: transform으로 정확한 중앙 정렬 */
	#header .logo a,
	#header .logo img {display:block;}
	#header .tnb {display:none;}
	/* 2025-10-11: 모바일 헤더 버튼 스타일 - 명확하게 재정의 */
	#header .mnu {
		position:absolute;
		right:0;
		top:50%;
		transform:translateY(-50%);
		width:50px;
		height:50px;
		margin:0;
		padding:0;
		background:none;
		border:none;
		font-size:var(--font-h1);
		color:#2c313e;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	#header .sch {
		position:absolute;
		right:50px;
		top:50%;
		transform:translateY(-50%);
		width:40px;
		height:40px;
		margin:0;
		padding:0;
		background:none;
		border:none;
		font-size:var(--font-body);
		color:#2c313e;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.search {position:relative; width:100%;padding-right:40px;background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd;z-index:10;display:none;}
	.search input[type=text] {display:block;width:100%;height:75px;border:none;padding-left:15px;}
	.search button {width:40px;height:40px;position:absolute;right:0;top:0;border:none;background:none;color:#2c313e;font-size:var(--font-body); background-color: #75c392; color: #ffffff;}

	#header .nav .gnb {display:none;} /* nav 자체가 아니라 gnb만 숨김 */

	#nav {position:fixed;left:0;top:60px;width:100%;height:calc(100% - 60px);z-index:1000;background:#fff;overflow:auto;border-top:1px solid #ddd;display:none;}  /* 2025-10-11: 헤더 높이 변경에 맞춰 top도 조정 */
	#nav .tnb {display:table;width:100%;table-layout:fixed;border-bottom:1px solid #ddd;background:#f3f3f3;}
	#nav .tnb li {display:table-cell;}
	#nav .tnb li a {display:block;text-align:center;position:relative;height:30px;line-height:30px;color:#2c313e;}
	#nav .tnb li ~ li a:before {content:"";display:block;width:1px;height:12px;position:absolute;left:0;top:50%;margin-top:-6px;background:#ddd;}
	#nav .gnb a {display:block;letter-spacing:-0.05em;}
	#nav .gnb > li {border-bottom:1px solid #ddd;}
	#nav .gnb > li > a {font-size:var(--font-h4);padding:15px;color:#2c313e;position:relative;}  /* 2025-10-11: h2 → h4로 축소 (모바일 메뉴 크기 적절하게) */
	#nav .gnb > li > a:before {content:"";display:block;position:absolute;right:20px;top:50%;transform: translateY(-50%); line-height:1em;font-style:normal;color:#999;
    background: url(../images/icons_diff2.png) no-repeat center; width: 18px; height: 11px;
  }
	#nav .gnb > li > ul {border-top:1px solid #ddd;padding:10px 0;background:#f3f3f3;display:none;}
	#nav .gnb > li > ul > li > a {font-size:var(--font-small);padding:5px 15px 5px 20px;color:#444444;}
	#nav .gnb > li > ul > li > ul {padding:5px 0 10px;}
	#nav .gnb > li > ul > li > ul > li > a {font-size:var(--font-small);padding:3px 15px 3px 25px;color:#777777;}
	#nav .gnb > li > ul > li > ul > li > a:before {content:"- ";}

	#nav .gnb > .active > a {color:#294579;}

	#nav .gnb > .active > ul {display:block;}
	#nav .gnb > li > ul > li.active > a {color:#f3506b;}
	#nav .gnb > li > ul > li > ul > li.active > a {color:#2c313e;text-decoration:underline;}

	.schOn .search {display:block;}
	.schOn #header .sch i:before {content:"\e9af"; font-weight: 700;}
	.navOn #nav {display:block;}
	.navOn #header .mnu .xi-bars:before{content:"\e9af"; font-weight: 700;}
  .head, .nav{padding: 0 15px;}
}

/* ========== 서브페이지 레이아웃 ========== */
.sub_title{display: flex; align-items: flex-end; justify-content: space-between; padding: 100px 0;}

.list_prit_zone{display: flex; align-items: flex-end;gap: 40px;}

.nav_list ul{display: flex; gap: 25px; font-size: var(--font-small); color: #000; list-style: none; padding: 0; margin: 0;}
.nav_list ul li{position: relative;}
.nav_print ul{display: flex; gap: 20px; list-style: none; padding: 0; margin: 0;}
.nav_print a{background: #eee; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 5px;}

/* 2025-10-12: 히어로 배경색을 accent-tertiary의 알파값으로 변경 */
/* 2025-10-13: border-radius 공통 스타일 추가 */
/* 2025-10-13: padding을 디자인 시스템 변수로 변경 */
/* 2025-10-22: 파스텔톤 그라디언트 배경으로 변경 (디자인 시스템 변수 사용) */
.sub_contents_txt{display: flex; background: var(--bg-hero-gradient); box-sizing: border-box; padding: var(--spacing-3xl);  color: #333; border-radius: var(--spacing-xl);}

/* 2025-10-12: 원 제거됨, common.css에서 아이콘 스타일 관리 */
.sub_contents_icons{width: 15%;}

.board_search{border: 1px solid #ddd; box-sizing: border-box; background: #f7f8f9; display: flex; align-items: center; justify-content: center; gap: 13px; font-size: var(--font-small); padding: 28px 0; margin: 42px 0;}

.board_search_txt{border: 1px solid #ddd; background: #fff; box-sizing: border-box; height: 45px; width: 100%;}
.board_search select{width: 150px; border: 1px solid #ddd; color: #000; height: 45px; padding: 0 10px;}

.board_search_sumit{border: 1px solid #ddd; background: #1d335b; box-sizing: border-box; height: 45px; color: #fff; width: 90px;}

.borad_zone{display: flex; justify-content: space-between; align-items: center; color: #333; padding-bottom: 21px; border-bottom: 2px solid #000;}
.borad_zone span{font-weight: 400; font-size: var(--font-small); position: relative; padding-left: 30px;}

.borad_zone span::after {
    position: absolute;
    width: 19px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background: url(../images/pointer_zeo2.png) no-repeat center;
}

.no_list_board_img img{max-height: 330px; height: 100%;}

.borad_list{display: flex; color: #333; padding: 35px; justify-content: space-between}

.borad_list{border-bottom: 1px solid #ddd;}

.no_list_board{display: flex; flex-direction: column; justify-content: space-between;}

.no_list_board ul{display: flex; flex-direction: column; gap: 30px;}

.no_list_board ul li{display: flex; font-size: var(--font-small);}

.no_list_board ul li span{color: #666; padding-left: 25px; display: inline-block; position: relative; width: 115px;}

.no_list_board ul li span::after{position: absolute; left: 0; content: ""; height: 13px; width: 2px; background: #13366e; top: 50%; transform: translateY(-50%);}

.no_list_board_btn{width: 152px; height: 53px; background: #13366e; color: #fff; display: flex; align-items: center; gap: 15px; justify-content: center; border-radius: 10px; font-size: var(--font-body);}

.paging{margin: 30px 0 150px 0;}

.paging ul{display: flex; gap: 10px; justify-content: center; align-items: center;}

.paging ul li{width: 35px; height: 35px; box-sizing: border-box; border: 1px solid #ddd; color: #333; display: flex; align-items: center; justify-content: center;}
.paging ul li.active{background: #13366e; color: #fff;}
.paging ul li.none_ac{border: 0;}

.subpage2 .borad_list{background: #f7f8f9; border: 1px solid #ddd;}

.subpage2 .borad_list{flex-direction: row-reverse;justify-content: flex-end; gap: 50px; align-items: center;}

.view_contents{padding-top: 50px;}

.subpage2{margin-bottom: 100px;}
.view_contents h3{color: #000; padding-bottom: 30px; border-bottom: 3px solid #000;}

.paper-list {
  list-style: none;
  counter-reset: papers;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* .paper-item 스타일은 components.css에서 관리 */

.paper-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #475569;
  font-size: .92rem;
}

/* 2025-10-21: 색상을 디자인 시스템 변수로 교체 */
.paper-badge{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: .01em;
  background: #f0f9ff;
  color: var(--text-badge-blue);
  border: 1px solid #bae6fd;
}

.paper-info{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 35px;
  color: #475569;
  font-size: var(--font-body);
}
.paper-info > span + span{
  position: relative;
  padding-left: 14px;
}
.paper-info > span + span::before{
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  color: #94a3b8;
}

.paper-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========== 중간 해상도 레이아웃 조정 ========== */
@media all and (min-width: 1025px){
  /* 2025-10-05: 데스크탑 컨텐츠 여백 32px (8px 그리드) */
  .contents > .inner{padding: 0 32px;}
}

/* 2025-10-07: 1025-1430px 중간 해상도 전용 (모바일 1024px 이하 제외) */
@media all and (min-width: 1025px) and (max-width: 1430px){
  #visual{width: 50%;}
  .vis_zone > .grid_vus{width: 50%;}

  .link_box .btn_cus{height: 40px; line-height: 40px;}
  /* 2025-10-09: 중간 해상도 gap 48px로 증가 (24px → 48px) */
  .flex_zone50{gap: 48px;}
  .flex_zone30{gap: 16px;} /* 8px 그리드 */

  .head,.nav{padding: 0 30px;}

  #header .nav .gnb > li > ul{padding-left: 15px !important;}

  html {
    height: auto !important;
  }

  .qucik_box{background-repeat: no-repeat; background-size: cover;}

  /* 2025-10-07: 퀵박스 버튼 아이콘/화살표 숨김 (공간 절약) */
  .item_qu1 img, .item_qu2 img, .item_qu3 img, .item_qu4 img,
  .item_qu1 .material-symbols-outlined,
  .item_qu2 .material-symbols-outlined,
  .item_qu3 .material-symbols-outlined,
  .item_qu4 .material-symbols-outlined {
    display: none;
  }

  /* 2025-10-04 수정: 중간 해상도에서도 전체 너비 활용 */
  .flex_zone50 .grid_vus{width: 100%;}
  #visual .slick-slide img{width: 100%;}
  .vis_zone .roll{height: auto;}
  /* 2025-10-07: height: auto로 변경 시 컨트롤 그림자 공간 확보 */
  .vis_zone .area{padding-bottom: 80px;}

  .small_cot_noti{padding: 15px;}
  .info_head .inner{padding:0 30px}
  /* 2025-10-07: overflow: hidden 제거 - 컨트롤 그림자가 잘리는 문제 */
  #visual{width: 50%;}
  .vis_zone > .grid_vus{width: 50%;}
  .vis_zone.reverse .grid_vus{width: 50%;}
  .notice_zone .grid_vus{width: 50%;}
  .flex_zone30 .qucik_box{width: 50%;}
  #gerrelly{width: 50%; overflow: hidden;}
  .reverse .box img{height: 325px;}
  .down_books a{padding: 10px;}
  #visual .slick-slide img{height: 325px;}

}

/* ========== 서브페이지 반응형 레이아웃 ========== */
@media all and (max-width: 1430px){
/* 서브페이지도 동일한 여백 시스템 사용 */
.contents.subpage .inner{padding: 0 32px;}
}

@media all and (max-width: 1024px){
.contents.subpage .inner{padding: 0 var(--spacing-lg);}

.sub_contents_txt{padding: 30px;}
.sub_contents_icons .circle{width: 70px; height: 70px;}
.circle img:not(.hero-image){max-width: 30px;}
.board_search{padding: 28px 15px;}
}

@media all and (max-width: 800px){
.sub_title{flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 0;}
.circle img:not(.hero-image){width: 100%;}
.sub_contents_txt{gap: 25px;}
.board_search select{width: 100%;}
.board_search{flex-wrap: wrap;}
.borad_list{padding: 23px;}
.no_list_board{width: 67%;}
.no_list_board_img{width: 30%;}
.no_list_board_img img{width: 100%; height: auto;}
.no_list_board ul{gap: 10px;}
.no_list_board_btn{margin-top: 40px; font-size: var(--font-small);}
.no_list_board_btn {
    width: 131px;
    height: 42px;
  }
}

@media all and (max-width: 500px){
.list_prit_zone {
    flex-direction: column; gap: 20px; align-items: flex-start
}
.sub_contents_icons{display: none;}
.board_search{margin: 25px 0;}
.no_list_board {width: 85%;}
.paging {
    margin: 30px 0 50px 0;
}
}

/* ========== 모바일 하위 레이아웃 ========== */
@media all and (max-width: 1024px){
/* 2025-10-05: 모바일/태블릿 컨텐츠 여백 24px (8px 그리드) */
.contents > .inner{padding: 0 24px;}
}

@media all and (max-width: 860px){
.flex_zone30 .qucik_box{width: 100%;}
/* 2025-10-04 수정: 8px 그리드 시스템 - 모바일 상단 여백 32px */
.contents{padding-top: 32px;}
/* 2025-10-09: 모바일 gap 40px로 증가 (16px → 40px) */
.flex_zone50{gap: 40px;}
/* 2025-10-04 수정: 8px 그리드 시스템 - 모바일 섹션 간격 32px */
/* 2025-10-21 수정: title_zone margin-bottom 제거 */
.vis_zone,
.notice_zone,
.vis_zone.reverse {
    margin-bottom: 32px;
}
.qucik_box{padding: 15px;}
.small_cot_noti{padding: 15px;}
.board-item .board-content ul li a .date{height: auto;}
.board-item .board-content ul li a .date span::after{right: 5px;}
.footer_up{flex-direction: column; align-items: flex-start; gap: 15px;}
.foot_sub_link ul{justify-content: flex-start;}
.flex_zone30{gap: 16px;}
.qucik_box{width: calc(100% / 2 - 8px);}
.footer_down ul li.list_fot_c {
    display: flex;
    gap: 10px;
    flex-direction: column;
}
}

@media all and (max-width: 600px){
.link_box .btn_cus{background-position: 94% 50%;}
.reverse .box img{height: auto;}
.small_tit{min-height: 40px;}
.qucik_box{width: 100%;}
.flex_zone30 {
    flex-direction: column;
    width: 100%;
}
.up_books{flex-direction: column;}
.up_books .book_list{width: 100%;}
.up_books::after{height: 100%;}
.down_books a{margin-top: 15px; font-size: var(--font-small);}

.foot_link_box {
    display: flex;
    gap: 28px;
    flex-direction: column;
}

.reverse .box{background: none;}
.mo_ings{display:block !important; width: 100%;}

.reverse.vis_zone .roll,
.reverse.vis_zone .box{height: auto !important;}

.qucik_box{border-radius: 12px;}
.qucik_box{gap: 25px;}
.qucik_box{height: auto;}
.link_box .btn_cus{height: 42px; font-size: var(--font-small);}
/* 600px 이하에서는 24px 여백 유지 (위에서 이미 설정됨) */
.vis_zone .roll{border-radius: 12px;}
.tab_zone,.tap_up{flex-direction: column;}
.tab_zone{border-radius: 10px;}
.tab_zone button::after{display: none;}
.tab_zone,.tab_zone button{width: 100%; gap: 0; box-sizing: border-box; border: 1px solid #ddd;}
.tab_zone button.active{background: #1d335b; color: #fff;}
.tab_zone{border: 0;}
.no_titx{display: none;}
.small_cot_noti{border-radius: 12px;}
.board-item .board-content ul li a .date{width: 93px;}
.board-item .board-content ul li a{align-items: center;}
.reverse .qucik_box{height: 300px;}
.reverse.vis_zone .area{margin-bottom: 0;}
.footer_down ul li p{line-height: 135%;}
.foot_sub_link ul {
    display: flex;
    gap: 25px;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-start;
}
.foot_link_box{width: 100%;}
.foot_link_box a{width: 100%;}
.foot_link_box{gap: 9px;}
.foot_sub_link{margin-top: 0;}
#footer{padding: 15px;}
}

@media all and (max-width: 1200px){
  .paper-info {
      flex-direction: column; align-items: flex-start
  }
  .paper-item{flex-direction: column; align-items: flex-start}
  .paper-info > span + span{padding-left: 0;}
  .paper-info span::before{display: none;}
}

@media all and (max-width: 800px){
  .paper-item::before{top: 0; transform: none; margin-top: 57px;}
}

@media all and (max-width: 500px){
.subpage2 .borad_list{flex-direction: column;}
.subpage2 .no_list_board_img {width: 90%;}
.paper-info > span{display: flex; flex-direction: column; gap: 10px;}
}

/* ========== 폼 레이아웃 ========== */
.kpha-form-root .kpha-form-body{max-width:1400px;margin:0 auto;padding:0 0 40px}
.kpha-form-root .hero{background:linear-gradient(180deg,var(--brand-weak),#fff 60%);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0 0 14px}
.kpha-form-root .kpha-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.kpha-form-root .kpha-logo .badge{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}

.kpha-form-root .card{border:1px solid var(--line);border-radius:var(--radius);padding:50px;background:#fff;margin:50px 0}
.kpha-form-root .section-title{margin:0 0 30px;font-size:var(--font-h2);display:flex;align-items:center;gap:15px; font-weight: 500; color: #000;}
.kpha-form-root .section-title:before{content:"";display:inline-block;width:19px;height:12px;background: url(../images/pointer_zeo2.png) no-repeat center;}

/* 2025-10-21: 입력 필드 간격 및 레이아웃 개선 */
.kpha-form-root .grid{display:grid;gap:var(--spacing-lg);grid-template-columns:1fr}

/* 2025-10-21: 박스 안에 박스 구조 제거, PC 가로/모바일 세로 레이아웃 */
.kpha-form-root .field{display:flex;flex-direction:column;gap:8px;}
.kpha-form-root .field >div{position: relative;}
@media (min-width:768px){.kpha-form-root .grid .field{flex-direction:row;align-items:center;gap:16px;}}

/* 2025-10-21: Material Icons 및 레이블 스타일 */
.kpha-form-root .lbl{display:flex;align-items:center;gap:8px;}
@media (min-width:768px){.kpha-form-root .grid .field .lbl{min-width:140px;flex-shrink:0;}}
.kpha-form-root .lbl .material-symbols-outlined{font-size:20px;color:var(--accent-tertiary,#294579);}

.kpha-form-root input[type="text"],
.kpha-form-root input[type="email"],
.kpha-form-root input[type="tel"],
.kpha-form-root textarea,
.kpha-form-root select{width:100%;padding:15px 12px;border:1px solid #ebebeb;border-radius:10px;font-size:var(--font-small);outline:0;background:#f4f4f6; position: relative;}
@media (min-width:768px){.kpha-form-root .grid .field input[type="text"],.kpha-form-root .grid .field input[type="email"],.kpha-form-root .grid .field input[type="tel"],.kpha-form-root .grid .field textarea,.kpha-form-root .grid .field select{flex:1;width:auto;}}

.kpha-form-root textarea{min-height:90px;resize:vertical}
.kpha-form-root .choices{display:flex;flex-wrap:wrap;gap:10px}
/* 2025-10-21: .chip 스타일은 components.css에서 관리 */

/* 2025-10-21: 테이블 외곽 좌우 테두리 제거 */
.kpha-form-root table.price{width:100%;border-collapse:collapse;border-left:none;border-right:none;border-top:2px solid #000;border-bottom:1px solid var(--line);}
/* 2025-10-21: 세로선 제거 */
.kpha-form-root table.price th,.kpha-form-root table.price td{border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:none;border-right:none;padding:10px 12px;text-align:center; font-weight: 400; color: #333;}
/* 2025-10-21: thead 하단 선으로 필드/값 구분 (맨 위만 2px, 나머지 1px) */
.kpha-form-root table.price thead th{background:#f8fafc;font-weight:700; color: #333;border-bottom:1px solid #000;}

/* 2025-10-21: .actions 및 버튼 스타일은 components.css에서 관리 */

/* 2025-10-21: 섹션 간격 4xl로 확대 */
.kpha-form-root .divider{height:1px;background:var(--line);margin:var(--spacing-4xl) 0}
.kpha-form-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.sub_info_form{display: flex; gap: 15px; font-size: var(--font-small); flex-direction: column; color: #333;}

/* ====== Toss Mock UI ====== */
.toss-mock-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 9999;
}
.toss-mock-overlay[aria-hidden="false"]{ display:block; }

.toss-mock-sheet{
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  border-radius: 20px;
  width: 100%;
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  max-width: 520px; margin: 0 auto;
  padding: 12px 16px 16px;
  animation: toss-slide-up .22s ease-out;
}

.toss-mock-handle{
  width: 44px; height: 4px; border-radius: 999px;
  background: #e5e8eb; margin: 6px auto 10px;
}
.toss-mock-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.toss-mock-brand{ display:flex; align-items:center; gap:8px; }

.toss-mock-brand img{max-width: 30px;}

.toss-mock-body{ display:flex; flex-direction:column; gap:14px; }

.toss-mock-amount{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:12px 14px; background:#f7f8fa; border-radius:12px; align-items: center
}

.toss-mock-paymethod .sub{ color:#6b7684; font-size:var(--font-small); margin:0 0 6px; }
.toss-mock-radio{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid #e5e8eb; border-radius:10px; cursor:pointer;
  margin-bottom:8px; color: #333;
}
.toss-mock-radio input{ accent-color:#0064ff; }

.toss-mock-check{
  display:flex; align-items:flex-start; gap:8px; font-size:var(--font-small);
  color:#4e5968;
}
.toss-mock-check input{ margin-top:2px; accent-color:#0064ff; }

.toss-mock-processing{
  display:flex; align-items:center; gap:10px; color:#4e5968; font-size:var(--font-small);
}
.toss-mock-processing .spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid #e5e8eb; border-top-color:#0064ff;
  animation: spin 1s linear infinite;
}

@keyframes spin{ to{ transform: rotate(360deg); } }

.toss-mock-success{
  display:flex; flex-direction:column; gap:10px;
  padding:12px; background:#f6fffb; border:1px solid #d3f5e5; border-radius:10px;
}
.toss-mock-success{font-size: var(--font-small);}
.toss-mock-success svg{ vertical-align:middle; }
.toss-mock-success-actions{ display:flex; gap:8px; }

.toss-mock-success-actions{font-size: var(--font-small);}

/* ====== Certificate ====== */
.kpha-cert{ margin:24px 0; }
.kpha-cert-card{
  max-width:720px; margin:0 auto; background:#fff;
  border:1px solid #e5e8eb; border-radius:16px; padding:20px;
  box-shadow: 0 6px 22px rgba(0,0,0,.04);
}
.kpha-cert-card .kv{ display:grid; grid-template-columns: 1fr 1fr; gap:20px 16px; margin:16px 0; }
.kpha-cert-card footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

@media (max-width:640px){
  .toss-mock-sheet{ border-radius: 16px 16px 0 0; }
  .kpha-cert-card .kv{ grid-template-columns: 1fr; }
  .paper-item { padding: 14px 14px 14px 68px; }
  .paper-item::before { width: 36px; height: 36px; left: 14px; font-size: .95rem; }
}

/* 2025-10-21: .kpha-form-root .card 스타일은 components.css에서 관리 */
@media all and (max-width: 1400px){
.table_zone {
    overflow-x: auto;
}
.table_zone table{
    min-width: 500px;
    border-collapse: collapse;
}
}

/* 2025-10-21: .kpha-form-root 스타일은 components.css에서 통합 관리 */
@media all and (max-width: 800px){
.subpage.subpage3 .sub_contents_txt{padding: 15px;}
.kpha-form-root .section-title:before{min-width: 19px;}
/* 2025-10-21: section-title은 항상 h2 크기 유지 */
.kpha-form-root .section-title{gap: 10px; margin-bottom: 15px;}
.kpha-form-root .field{padding: 10px 12px;}
.kpha-form-root input[type="text"], .kpha-form-root input[type="email"], .kpha-form-root input[type="tel"], .kpha-form-root textarea, .kpha-form-root select{font-size: var(--font-small); padding: 10px 12px;}
.footnote{line-height: 145%;}
.sub_info_form{font-size: var(--font-small); line-height: 145%;}
}

@media all and (max-width: 800px){
  .kpha-cert{margin: 20px 15px;}

.kpha-cert-card footer {
    flex-direction: column;
}

.toss-mock-sheet{
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  background: #fff;
  transform: translateY(0);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  max-width: 520px; margin: 0 auto;
  padding: 12px 16px 16px;
  animation: toss-slide-up .22s ease-out;
}
@keyframes toss-slide-up{
  from{ transform: translateY(12px); opacity:.9; }
  to{ transform: translateY(0); opacity:1; }
}
}

@media print{
  .kpha-form-root .actions{display:none!important}
  .kpha-form-root .kpha-form-body{padding-bottom:0}
  .kpha-form-root a[href]:after{content:""}
}