@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');/* regular-400, medium-500, semibold-600, bold-700 */ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{--primary:#cc2559;--e-font:"Poppins", sans-serif;--k-font:'Pretendard';--hd-fixed-h:75px;--radius:20px}
*{-webkit-text-size-adjust:none}
body{background:#fff;font-size:0.81em;font-family:'pretendard';color:#111;word-break:keep-all}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:'pretendard'}
figure{margin:0}
#sh_wrapper{position:relative;width:100%;z-index:0}
#sh_wrapper *{word-break:keep-all}

/* HEADER */
#sh_hd{position:fixed;z-index:99;top:0;width:100%;background-color:rgba(48, 48, 48, 0.04)}
#sh_hd::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;backdrop-filter:blur(5px)}
#sh_hd.fixed{background-color:rgba(255,255,255,0.1)}
#sh_hd.sub{position:absolute}
#sh_hd.sub::before{display:none}

/* MAIN 공통 */
.btn--primary{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;line-height:1.5;border-radius:100px;background-color:#fff;color:var(--primary);transition:background-color 0.2s, color 0.2s !important;cursor:pointer}
.btn--primary:hover{background-color:var(--primary);color:#fff}
.btn--primary.orange{background-color:var(--primary);color:#fff}
.btn--primary.orange:hover{background-color:#fff;color:var(--primary)}
#sh_container #sh_sub_wrap{position:relative}
#sh_container .group-title{text-align:center}
#sh_container .group-title h2{font-size:56px;font-weight:800}
#sh_container em{color:var(--primary);font-style:normal}

#sh_content{overflow:hidden;position:relative;z-index:10;width:100%;max-width:1200px;min-height:550px;padding:70px 0;margin:0 auto;background:#fff}

/* FOOTER */
#sh_ft{position:relative;padding:94px 0 60px; border-top:1px solid #111}
#sh_ft .inner{max-width:1140px;margin:0 auto}
#sh_ft h2.logo{padding-bottom:30px;font-family:var(--e-font);font-size:24px;font-weight:700;color:#111}
#sh_ft address{padding-bottom:40px;font-size:16px;font-weight:500;font-style:normal;line-height:1.75;color:#888}
#sh_ft .bottom{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:12px}
#sh_ft .bottom small{font-size:16px;color:#888}
#sh_ft .bottom small .lordicon-license{font-size:12px;color:rgba(0,0,0,0.2);margin-left:5px}
#sh_ft .bottom .sns-list{display:flex;gap:8px}
#sh_ft .bottom .sns-list a.link-sns{display:flex;align-items:center;justify-content:center;width:56px;aspect-ratio:1;background-color:#111;border-radius:100px}
#sh_ft .bottom .sns-list a.link-sns i{font-size:23px;color:#fff}
#sh_ft .link{display:flex;gap:12px}
#sh_ft .link a{font-size:15px}

/* 탑버튼 */
#toTop{opacity:0;visibility:hidden;cursor:pointer;position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:75px;aspect-ratio:1;border-radius:20px;border:1px solid #e1e1e1;margin-right:-50px;border:1px solid #ddd;background:#fff;box-shadow:0 0 16px rgba(0,0,0,0.1);transition:all .2s}
#toTop .ic-top{width:21px;height:17px;background-image:url('/img/to-top.png');background-repeat:no-repeat;background-size:cover;transition:background-image 0.2s}
#toTop:hover .ic-top{background-image:url('/img/to-top-hover.png')}
#toTop span{font-size:13px;font-weight:700;color:#111}
#toTop.on{opacity:1;visibility:visible;margin-right:0}

/* 반응형 사이트맵 공통 */
#sh_site_map{position:relative;width:100%;font-family:'notokr-regular'}
#sh_site_map:after{display:block;content:"";visibility:hidden;clear:both}
#sh_site_map > div{width:31%;float:left;margin:0 1%}
#sh_site_map > div:nth-of-type(3n){margin-right:0}
#sh_site_map .sh_site_map_title{padding:10px 15px;border-bottom:2px solid #333;font-size:17px;font-weight:700;text-align:center;color:#222;font-family:var(--k-font)}
#sh_site_map ul{padding:0 15px 15px}
#sh_site_map .sh_site_map_box{min-height:205px;padding:17px 20px;border:1px solid #e1e1e1;border-top:none;font-size:14px;color:#333;line-height:40px}
#sh_site_map .sh_site_map_box li{border-bottom:1px dotted #ccc}
#sh_site_map .sh_site_map_box li:last-child{border:none}

/* 반응형 하단 버튼 공통 */
#fix_tel{opacity:0;display:none;position:fixed;right:15px;bottom:165px;z-index:50;width:65px;height:65px;margin-right:-10px;border-radius:50%;font-size:30px;text-align:center;line-height:65px;color:#fff;background-color:var(--primary);box-shadow:5px 5px 5px rgba(0,0,0,.2);-webkit-transition:all .2s;transition:all .2s}
#fix_tel.active{opacity:1;margin-right:0}
#sh_ft_btns{display:none;padding:15px}
#sh_ft_btns .btns{overflow:hidden}
#sh_ft_btns .row2 a{width:50%}
#sh_ft_btns a{float:left;display:block;width:100%;height:55px;font-size:16px;font-weight:700;line-height:55px;color:#fff;text-align:center;background-color:var(--primary);font-family:var(--k-font)}
#sh_ft_btns a.tel{font-size:18px;font-weight:700;letter-spacing:0;font-family:'Poppins'}
#sh_ft_btns a i{padding-right:5px;font-size:18px}
#sh_ft_btns a.kakao{font-weight:normal;color:#402325;background-color:#ffe500}

/* 반응형 [s] */
@media (max-width:1500px){
.btn--primary{font-size:17px}
#sh_container .group-title h2{font-size:48px !important}
#sh_container .group-title p.desc{font-size:20px !important}
#sh_ft{padding:64px 0 34px}
#sh_ft h2.logo{padding-bottom:16px}
#sh_ft address{padding-bottom:24px;font-size:15px}
#sh_ft .bottom small{font-size:15px}
#sh_ft .link a{font-size:14px}
}
@media (max-width:1200px){
#sh_ft{padding:64px 20px 34px}
#toTop{right:15px;bottom:15px}
}
@media (max-width:1024px){
:root{--radius:15px}
.btn--primary{font-size:16px}
#sh_container .group-title h2{font-size:40px !important}
#sh_container .group-title p.desc{font-size:18px !important}
#sh_ft{padding:34px 20px}
#sh_ft .inner{display:flex;flex-direction:column;align-items:center;text-align:center}
#sh_ft h2.logo{padding-bottom:8px;font-size:22px}
#sh_ft address{padding-bottom:15px;font-size:14px}
#sh_ft .bottom{flex-direction:column-reverse;align-items:center;gap:15px;padding-bottom:10px}
#sh_ft .bottom .sns-list{gap:12px}
#sh_ft .bottom .sns-list a.link-sns{width:50px}
#sh_ft .bottom .sns-list a.link-sns i{font-size:20px}
}
@media (max-width:768px){
:root{--radius:10px}
/* 반응형 스타일 필수 [s] */
#sh_login, #sh_agree, #sh_register,#sh_mb_confirm, #sh_result{padding:15px;margin:15px auto;border:none}
#sh_login input[type=submit], #sh_agree .btn_wrap input[type=submit], #sh_register .btn_wrap input[type=submit],#sh_find_info input[type=submit], #sh_mb_confirm input[type=submit]{-webkit-appearance:none;appearance:none}
#sh_login .bnr .txt p a{color:#0054a6}
#sh_pw_confirm{width:100%;padding:30px 20px;border:none}
#sh_agree .inner{padding:15px}
#sh_agree .cont{padding:10px}
#sh_site_map{padding:30px 20px}
#sh_site_map > div{width:100%;margin:0}
#sh_site_map .sh_site_map_box{min-height:auto}
/* 반응형 스타일 필수 [e] */
#sh_container .group-title h2{font-size:32px !important}
#sh_container .group-title p.desc{font-size:16px !important}
.btn--primary{font-size:15px}
#sh_ft address{padding-bottom:13px;font-size:13px}
#sh_ft .bottom{gap:13px}
}
@media (max-width:480px){
#sh_hd{background-color:transparent}
#sh_hd.sub::before{display:none}
#sh_hd.sub{position:relative}
#fix_tel{display:block}
#sh_ft_btns{display:block}
#sh_container .group-title h2{font-size:28px !important}
#sh_container .group-title p.desc{font-size:15px !important}
.btn--primary{font-size:15px}
#sh_ft{padding-top:15px}
#toTop{right:15px;bottom:90px;width:65px;border-radius:100px}
#toTop span{font-size:12px}
#toTop .ic-top{width:17px;height:14px}
}
/* 반응형 [e] */







.sub_wrap {margin:100px auto 0; max-width:1140px; width:98%}
.top_tab{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin: 0 0 18px;
  padding: 10px 0;
}
.top_tab .tab_item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration:none;
  color:#222;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  transition: .15s ease;
}
.top_tab .tab_item:hover{
  border-color:#cc2559;
  color:#cc2559;
}
.top_tab .tab_item.active{
  background:#cc2559;
  border-color:#cc2559;
  color:#fff;
}
@media (max-width: 480px){
  .top_tab{ gap:8px; }
  .top_tab .tab_item{ flex:1; padding:0 10px; font-size:14px; }
}




.pkg-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.pkg-wrap{
  max-width:1140px;
  margin:0 auto 100px;
  /*display:grid;*/
  grid-template-columns: 1fr 360px;
  gap: clamp(16px, 2.6vw, 28px);
  align-items:start;
}

/* table container */
.pkg-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:auto; /* 모바일 가로 스크롤 */
  background:#fff;
}

/* table */
.pkg-table{
  width:100%;
  min-width: 760px; /* 모바일에서 가로 스크롤 */
  border-collapse: collapse;
  table-layout: fixed;
}

.pkg-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 10px;
  font-size: 15px;
  font-weight: 900;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.18);
}
.pkg-table thead th:last-child{ border-right:0; }

/* 서브 헤더 (회색) */
.pkg-table thead tr.subhead th{
  background:#e5e7eb;
  color:#111827;
  border-right: 1px solid #d1d5db;
  font-weight: 900;
}
.pkg-table thead tr.subhead th:last-child{ border-right:0; }

/* body */
.pkg-table tbody th,
.pkg-table tbody td{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding: 14px 10px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align:center;
  vertical-align: middle;
  background:#fff;
}
.pkg-table tbody td:last-child,
.pkg-table tbody th:last-child{ border-right:0; }

.pkg-table tbody th{
  background:#fafafa;
  font-weight: 900;
}

/* 회색 구분 행 */
.row-gray th,
.row-gray td{
  background:#e5e7eb !important;
  font-weight: 900;
}
.row-gray2{
  background:#fafafa !important;
}

/* notes */
.pkg-notes{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#374151;
  font-size: 14px;
  line-height: 1.65;
}
.pkg-notes li{ margin: 6px 0; }

/* right images */
.pkg-device{
  margin:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:end;
}
.pkg-device img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  background:#fff;
}
.pkg-cap{
  margin: 10px 0 0;
  text-align:center;
  color:#111827;
  font-weight: 900;
}

.pkg-right {display:none}
/* responsive */
@media (max-width: 980px){
  .pkg-wrap{ grid-template-columns: 1fr 320px; }
}
@media (max-width: 820px){
  .pkg-wrap{ grid-template-columns: 1fr; }
  .pkg-right{ order: 2; }
}
@media (max-width: 520px){
  .pkg-device{ gap: 8px; }
  .pkg-notes{ font-size: 13.5px; }
}



.price-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.price-wrap{
  max-width:1140px;
  margin:0 auto 100px;
  /*display:grid;*/
  grid-template-columns: 1fr 360px;
  gap: clamp(16px, 2.6vw, 28px);
  align-items:start;
}

/* header */
.price-title{
  margin:0 0 6px;
  font-size: clamp(20px, 2.2vw, 18px);
  font-weight: 900;
  letter-spacing:-.02em;
}
.price-desc{
  margin:0 0 14px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
}

/* table container (모바일 스크롤 대비) */
.price-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:auto;
  background:#fff;
}

/* table */
.price-table{
  width: 100%;
  min-width: 760px; /* 모바일에서 가로 스크롤 */
  border-collapse: collapse;
  table-layout: fixed;
}
.price-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 10px;
  font-size: 14.5px;
  font-weight: 900;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.18);
}
.price-table thead th:last-child{ border-right:0; }

.price-table tbody th,
.price-table tbody td{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding: 12px 10px;
  font-size: 14px;
  line-height: 1.55;
  text-align:center;
  vertical-align: middle;
  background:#fff;
}
.price-table tbody td:last-child,
.price-table tbody th:last-child{ border-right:0; }

.price-table tbody th{
  background:#fafafa;
  font-weight: 900;
}

/* Local Unit 세로 텍스트 느낌 */
.vcat{
  width: 84px;
  background:#fff;
  font-weight: 900;
}
.vcat span{
  display:block;
  line-height: 1.1;
  letter-spacing:.02em;
}

/* number */
.num{
  font-weight: 950;
  color:#111827;
}

/* notes */
.price-notes{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#374151;
  font-size: 13.5px;
  line-height: 1.65;
}
.price-notes li{ margin: 6px 0; }

/* right images */
.price-device{
  margin:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:end;
}
.price-device img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  background:#fff;
}
.price-cap{
  margin: 10px 0 0;
  text-align:center;
  color:#111827;
  font-weight: 900;
}
.price-right {display:none}

/* responsive */
@media (max-width: 980px){
  .price-wrap{ grid-template-columns: 1fr 320px; }
}
@media (max-width: 820px){
  .price-wrap{ grid-template-columns: 1fr; }
  .price-right{ order: 2; }
}
@media (max-width: 520px){
  .price-device{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .price-desc{ font-size: 13.5px; }
}


.biz-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  padding: clamp(22px, 4vw, 54px) 16px;
  background:#fff;
  color:var(--ink);
}
.biz-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* heading */
.biz-head{ margin-bottom: 14px; }
.biz-kicker{
  margin:0 0 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:-.02em;
}
.biz-sub{
  margin:0;
  font-size: 16px;
  color:#111827;
}

/* layout */
.biz-grid{
  /*display:grid;*/
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items:start;
}

/* table box */
.biz-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

/* table */
.biz-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.biz-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 900;
}
.biz-table thead .col-a{ width: 160px; }

.biz-table tbody th,
.biz-table tbody td{
  border-top:1px solid var(--line);
  padding: 14px 12px;
  vertical-align: middle;
  font-size: 14.5px;
  line-height: 1.6;
}
.biz-table tbody th{
  background:#fafafa;
  font-weight: 900;
  color:#111827;
}

/* 가격 영역(세부사항 안에서 3열) */
.biz-price td{ padding: 12px; }
.biz-pricegrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.biz-priceitem{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  background:#fff;
  text-align:center;
}
.biz-priceitem .area{
  margin:0 0 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}
.biz-priceitem .won{
  margin:0;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing:-.01em;
}

/* notes */
.biz-notes{
  margin: 0;
  padding: 14px 16px 16px 22px;
  border-top:1px solid var(--line);
  background:#fff;
  color:#111827;
}
.biz-notes li{
  margin: 6px 0;
  color:#374151;
  font-size: 13.5px;
  line-height: 1.6;
}

/* device */
.biz-devicecard{
  margin:0;
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  display:none
}
.biz-devicecard img{
  width:100%;
  height:auto;
  display:block;
}
.biz-devicecard figcaption{
  padding: 10px 12px;
  text-align:center;
  font-weight: 900;
  color:#111827;
  border-top:1px solid var(--line);
  background:#fafafa;
}

/* responsive */
@media (max-width: 980px){
  .biz-grid{ grid-template-columns: 1fr 300px; }
  .biz-table thead .col-a{ width: 140px; }
}
@media (max-width: 820px){
  .biz-grid{ grid-template-columns: 1fr; }
  .biz-device{ order: 2; }
  .biz-tablebox{ order: 1; }
}
@media (max-width: 520px){
  .biz-pricegrid{ grid-template-columns: 1fr; }
  .biz-table thead .col-a{ width: 120px; }
}


.brand-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  padding: clamp(24px, 4vw, 56px) 16px;
  background:#fff;
  color:var(--ink);
  margin:0 0 100px 0
}
.brand-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* header */
.brand-head{ margin-bottom: 14px; }
.brand-title{
  margin:0 0 6px;
  font-size: 18px;
  font-weight: 900;
}
.brand-desc{
  margin:0;
  font-size: 14.5px;
  line-height: 1.7;
  color:#111827;
}

/* layout */
.brand-grid{
  /*display:grid;*/
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items:start;
}

/* table box */
.brand-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

/* table */
.brand-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.brand-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 10px;
  font-size: 14.5px;
  font-weight: 900;
}
.brand-table tbody th,
.brand-table tbody td{
  border-top:1px solid var(--line);
  padding: 14px 10px;
  font-size: 14px;
  line-height: 1.6;
  text-align:center;
}
.brand-table tbody th{
  background:#fafafa;
  font-weight: 900;
  color:#111827;
}

/* notes */
.brand-notes{
  margin:0;
  padding: 14px 16px 16px 22px;
  border-top:1px solid var(--line);
}
.brand-notes li{
  margin: 6px 0;
  font-size: 13.5px;
  color:#374151;
}

/* device */
.brand-devicecard{
  margin:0;
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  display:none;
}
.brand-devicecard img{
  width:100%;
  height:auto;
  display:block;
}
.brand-devicecard figcaption{
  padding: 10px 12px;
  text-align:center;
  font-weight: 900;
  background:#fafafa;
  border-top:1px solid var(--line);
}

/* responsive */
@media (max-width: 980px){
  .brand-grid{ grid-template-columns: 1fr 300px; }
}
@media (max-width: 820px){
  .brand-grid{ grid-template-columns: 1fr; }
}


.spec-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}
.spec-wrap{
  max-width:1140px;
  margin:0 auto 100px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 2.6vw, 28px);
  align-items:start;
}

/* left */
.spec-figure{
  margin:0;
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.spec-figure img{
  width:100%;
  height:auto;
  display:block;
}

.spec-notes{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#374151;
  font-size: 14px;
  line-height: 1.65;
}
.spec-notes li{ margin: 6px 0; }

/* right table */
.spec-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

.spec-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.spec-table th,
.spec-table td{
  border-top:1px solid var(--line);
  padding: 14px 12px;
  font-size: 14.5px;
  line-height: 1.6;
  vertical-align: top;
}
.spec-table tr:first-child th,
.spec-table tr:first-child td{
  border-top:0;
}

.spec-table th{
  width: 170px;
  background:#fafafa;
  font-weight: 900;
  color:#111827;
}

.spec-table td{
  color:#111827;
}

.spec-table small{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
}

/* responsive */
@media (max-width: 900px){
  .spec-wrap{ grid-template-columns: 1fr; }
  .spec-table th{ width: 150px; }
}
@media (max-width: 520px){
  .spec-notes{ font-size: 13.5px; }
  .spec-table th, .spec-table td{ font-size: 14px; }
}


.ex-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --head:#3f3f3f;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.ex-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* grid */
.ex-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 이미지처럼 칸 나눔 느낌 */
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

/* card */
.ex-card{
  border-right: 1px solid var(--line);
  background:#fff;
}
.ex-card:last-child{ border-right:0; }

/* header */
.ex-head{
  margin:0;
  padding: 14px 14px;
  text-align:center;
  font-size: 15.5px;
  font-weight: 900;
  color:#fff;
  background: var(--head);
}

/* thumbs */
.ex-thumbgrid{
  padding: 18px 14px;
  display:grid;
  grid-template-columns: repeat(1fr, 1fr);
  gap: 14px;
  align-items:center;
  justify-items:center;
}
.ex-thumb{
  margin:0;
  width: 100%;
  border-radius: 10px;
  overflow:hidden;
  background:#f3f4f6;
  border: 1px solid var(--line);
}
.ex-thumb img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* note area */
.ex-note{
  border-top: 1px solid var(--line);
  background:#f3f4f6;
  padding: 18px 18px 20px;
  min-height: 100%; /* 이미지처럼 하단 높이 맞춤 */
}
.ex-note ul{
  margin:0;
  padding-left: 18px;
  color:#111827;
  font-size: 14px;
  line-height: 1.75;
}
.ex-note li{
  margin: 6px 0;
}

/* responsive */
@media (max-width: 980px){
  .ex-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .ex-card:nth-child(2){
    border-right: 0;
  }
  .ex-card:nth-child(3){
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px){
  .ex-grid{
    grid-template-columns: 1fr;
  }
  .ex-card{
    border-right:0;
    border-top: 1px solid var(--line);
  }
  .ex-card:first-child{
    border-top:0;
  }
  .ex-thumbgrid{
    grid-template-columns: repeat(1fr, 1fr);
    gap: 10px;
    padding: 14px 12px;
  }
  .ex-note{
    min-height: unset;
  }
  .ex-note ul{
    font-size: 13.5px;
  }
}

/* =========================
   심의규정 표 섹션 (1140px 기준)
   - 1140px 이상: 가로 스크롤바 없음(내용 전체 보이게)
   - 1140px 미만: 필요 시 가로 스크롤
========================= */

.rule-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --head:#3f3f3f; /* 헤더 진회색 */
  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.rule-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* ✅ 1140 이상에서는 스크롤이 안 보이게 */
.rule-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow: hidden; /* 데스크탑: 스크롤바 방지 */
  background:#fff;
}

/* ✅ 기본은 컨테이너 폭에 맞춰서 1140에서 다 보이게 */
.rule-table{
  width:100%;
  min-width: 0;          /* 핵심: 데스크탑에서 스크롤 원인 제거 */
  border-collapse: collapse;
  table-layout: fixed;
}

/* header */
.rule-table thead th{
  background: var(--head);
  color:#fff;
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 900;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.18);
}
.rule-table thead th:last-child{ border-right:0; }

/* body */
.rule-table tbody th,
.rule-table tbody td{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding: 16px 14px;
  font-size: 14px;
  line-height: 1.65;
  vertical-align: top;
  background:#fff;
}

/* 마지막 컬럼 라인 제거 */
.rule-table tbody td:last-child,
.rule-table tbody th:last-child{ border-right:0; }

/* 구분 컬럼 */
.rule-table tbody th{
  background:#fafafa;
  font-weight: 900;
  text-align:center;
}

/* ✅ 1140에서 가장 보기 좋은 컬럼 비율 */
.rule-table .col-a{ width: 160px; }
.rule-table .col-b{ width: 440px; }
.rule-table .col-c{ width: auto; }

/* 리스트 스타일 */
.rule-ul{
  margin:0;
  padding-left: 18px;
}
.rule-ul li{ margin: 6px 0; }

.rule-ol{
  margin:0;
  padding-left: 18px;
}
.rule-ol li{ margin: 6px 0; }

/* ✅ 한글 가독성/줄바꿈 최적화 */
.rule-table td{
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* =========================
   Responsive
   - 1140px 미만부터 스크롤 허용 + 최소폭 부여
========================= */
@media (max-width: 1140px){
  .rule-tablebox{
    overflow:auto;        /* 필요 시에만 가로 스크롤 */
  }
  .rule-table{
    min-width: 980px;     /* 표 최소폭(원하면 920~1100 조절) */
  }
}

/* 모바일 폰트/패딩 미세 조정 */
@media (max-width: 520px){
  .rule-table thead th{
    font-size: 14px;
    padding: 11px 10px;
  }
  .rule-table tbody th,
  .rule-table tbody td{
    font-size: 13.5px;
    padding: 14px 12px;
  }
}

.h100 {height:100px}