/* ============================================================
   아이디스 Safe Care  cs.css
   2026-09-16  1차 리뉴얼

   이 파일은 혼자 살지 않습니다. common.css 위에 얹힙니다.

       <link href="/css/common.css">   <- 단추, 입력칸, 표, 쪽수, 아이콘, 색, 글자
       <link href="/css/style.css">
       <link href="/css/responsive.css">
       <link href="/css/cs.css">       <- 이 파일. Safe Care 가 더 쓰는 것만

   그래서 여기에는 .btn, .badge, .ipt_*, .list_table, .pagination 같은
   공용 부품을 다시 쓰지 않습니다. 파트너 화면과 같은 물건을 그대로 씁니다.
   고치실 일이 있으면 common.css 쪽이 원본입니다.

   이름을 전부 cs_ 로 시작하게 지었습니다. 공용 이름과 절대 안 겹칩니다.
   common.css 가 header, aside, main 태그를 이미 쓰고 있어서
   여기서는 그 태그를 쓰지 않고 div 에 이름을 답니다.

   색과 크기는 전부 common.css 값입니다. 새로 만든 색은 없습니다.
       주 색   #0099B0     연한 주 색  #E3F4F7
       글자    #14171C     흐린 글자   #6B7787 / #848E9D
       선      #E3E6EA     연한 선     #E7E9EC / #F3F4F6
       판      #F9F9FA
   ============================================================ */


/* ============================================================
   글꼴

   @font-face 는 여기 없습니다. /fonts/pretendard/pretendard.css 로 옮겼습니다.
   조각난 Pretendard 92벌이라 덩치가 커서 따로 두고 1년 캐시를 걸었습니다.

   머리말에서 common.css 보다 "뒤에" 부릅니다. 순서가 전부입니다.
   ============================================================ */


/* ============================================================
   0. 화면이 흔들리지 않게

   여기가 "메뉴 누를 때마다 춤춘다" 의 원인이었습니다. 두 가지가 겹쳐 있었습니다.

   하나. 글이 짧은 화면은 세로 스크롤바가 없고 긴 화면은 있습니다.
        그 막대 폭(약 15px)만큼 화면이 좁아졌다 넓어져서 가운데 정렬이 통째로 밀립니다.
        항상 자리를 비워두면 안 흔들립니다.

   둘. 글이 짧으면 바닥글이 화면 가운데쯤에 떠 있습니다.
       body 를 세로 flex 로 세우고 바닥글에 margin-top:auto 를 주면
       내용이 짧아도 바닥글이 맨 아래에 붙습니다.
   ============================================================ */
/* 막대를 항상 그려 자리를 고정합니다.
   scrollbar-gutter 를 같이 쓰면 브라우저에 따라 자리가 두 번 잡혀 오히려 더 밀립니다.

   2026-09-16 넓은 화면에서만 걸도록 바꿨습니다.
   휴대폰은 막대가 화면 위에 떠서 자리를 안 먹으니 고정할 것이 없고,
   오히려 이 한 줄 때문에 내용이 짧은 화면도 늘 스크롤되는 것처럼 굴었습니다. */
@media screen and (min-width:769px){
  html{overflow-y:scroll;}
}

body{
  display:flex;flex-direction:column;

  /* 100vh 는 아이폰 사파리에서 주소창과 아래 막대까지 포함한 높이입니다.
     그래서 내용이 짧아도 화면보다 길어져 늘 스크롤이 생깁니다.
     100dvh 는 지금 실제로 보이는 높이라 그럴 일이 없습니다.
     dvh 를 모르는 옛 브라우저는 윗줄 100vh 를 씁니다. */
  min-height:100vh;
  min-height:100dvh;

  /* 글꼴을 밖에서 안 받아옵니다.
     common.css 는 Pretendard 를 쓰라고 적어놓고 정작 어디서도 안 불러옵니다.
     그 상태에서 누군가 Pretendard 를 불러오게 해두면
     화면이 먼저 한 벌로 그려졌다가 글꼴이 도착하는 순간 통째로 다시 짜입니다.
     글자가 커졌다 작아지는 것처럼 보이는 까닭이 그것입니다.

     그래서 내려받는 글꼴을 아예 쓰지 않습니다.
     PC 에 Pretendard 가 깔려 있으면 그것을 쓰고, 없으면 맑은 고딕으로 갑니다.
     어느 쪽이든 받아오는 시간이 없으니 바뀌는 순간도 없습니다. */
  font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',
              'Malgun Gothic','맑은 고딕',system-ui,sans-serif;
}
.cs_foot{margin-top:auto;}

/* 한글은 단어 단위로 끊어야 읽힙니다.
   keep-all 이 없으면 "확인했습니 / 다" 처럼 낱말 가운데가 잘립니다.
   대신 아주 긴 영문이나 주소는 갈 데가 없으니 break-word 로 풀어줍니다. */
body{ word-break:keep-all; overflow-wrap:break-word; }


/* ============================================================
   1. 머리말
   ============================================================ */

/* 머리말은 위에 붙어 따라옵니다. 띠 두 줄을 한 덩어리로 묶어 고정합니다 */
.cs_top{position:sticky;top:0;z-index:60;background:#FFF;}

/* CI 파일 안에 위쪽 여백이 있어서 옆 글자가 떠 보입니다.
   9px 내리면 슬로건 줄과 눈높이가 맞습니다.
   CI 를 바꾸시면 이 값 하나만 다시 잡으면 모든 화면이 따라옵니다. */
:root{--ci-nudge:9px;}

.cs_util{border-bottom:1px solid #F3F4F6;background:#FFF;}
.cs_util .in{
  max-width:1200px;margin:0 auto;padding:0 24px;height:36px;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  font-size:12px;color:#6B7787;
}
.cs_util a:hover{color:#0099B0;}
.cs_util .sep{color:#E3E6EA;}
.cs_util .who{display:inline-flex;align-items:center;gap:6px;}

.cs_head{background:#FFF;border-bottom:1px solid #E7E9EC;}
.cs_head .in{
  max-width:1200px;margin:0 auto;padding:0 24px;height:72px;
  display:flex;align-items:center;gap:36px;
}

/* 로고와 서비스 이름. CI 가 주인이고 이름은 부제입니다 */
.cs_logo{display:flex;align-items:center;}

/* 로고 자리를 미리 잡아둡니다.
   width 를 안 주면 SVG 가 도착하기 전까지 폭이 0 이었다가 갑자기 넓어집니다.
   화면을 옮길 때마다 그 순간 옆 글자가 튑니다.
   object-fit 을 써서 비율이 조금 달라도 찌그러지지 않고 칸 안에 들어갑니다.
   재보니 이 CI 는 높이 30 일 때 폭이 약 111 입니다. */
.cs_logo img{
  display:block;height:30px;width:111px;
  object-fit:contain;object-position:left center;
}
.cs_logo .mark{font-size:24px;font-weight:700;color:#14171C;letter-spacing:-1px;line-height:1;}
.cs_logo .sub{
  display:flex;align-items:center;margin-left:14px;padding-left:14px;
  border-left:1px solid #E3E6EA;
  font-size:15px;font-weight:600;color:#485363;letter-spacing:-0.3px;line-height:16px;
  transform:translateY(var(--ci-nudge));
}

.cs_nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.cs_nav a{
  padding:9px 14px;border-radius:8px;
  font-size:14px;font-weight:500;color:#485363;white-space:nowrap;
}
.cs_nav a:hover{background:#F3F4F6;}

/* 지금 보고 있는 메뉴.
   여기에 font-weight 를 주면 안 됩니다.
   글자가 굵어지면 그 항목만 넓어져서 메뉴 줄 전체가 옆으로 밀립니다.
   화면을 옮길 때마다 굵어지는 자리가 바뀌니 메뉴가 춤을 춥니다.
   색과 바탕만으로도 충분히 구분됩니다. */
.cs_nav a.on{color:#0099B0;background:#E3F4F7;}

/* 아이디스 직원에게만 보이는 관리.
   세로선을 테두리로 주면 마우스 올렸을 때 모서리가 죽어서 가짜 요소로 세웁니다 */
.cs_nav a.adm{position:relative;margin-left:15px;color:#0099B0;}
.cs_nav a.adm::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:#E3E6EA;
}
.cs_nav a.adm:hover{background:#E3F4F7;}

/* 메뉴 단추.
   막대 셋이 X 로 접히는 모양입니다. 두께 1px, 가운데 막대만 66% 로 짧습니다.
   닫힐 때도 같은 시간으로 되돌아옵니다.

   움직임 곡선 cubic-bezier(.475,.425,0,.995) 는 끝에서 천천히 멎습니다.
   숫자를 바꾸면 느낌이 달라지니 손대지 마세요. */
.cs_nav_foot{display:none;}

.cs_burger{
  display:none;margin-left:auto;
  box-sizing:content-box;
  width:20px;padding:14px 0 14px 12px;
  flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
  background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cs_burger span{
  display:block;width:20px;height:1px;background:#14171C;
  transition:transform .6s cubic-bezier(.475,.425,0,.995),
             opacity .6s cubic-bezier(.475,.425,0,.995);
}
.cs_burger span:nth-child(2){width:66%;}

/* 위아래 막대가 가운데로 모이면서 45도로 돌아 X 가 됩니다.
   7px 은 막대 사이 간격(6px)에 막대 두께(1px)를 더한 값입니다.
   가운데 막대는 그 자리에서 사라집니다. */
.cs_burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg) scale(.8);}
.cs_burger.on span:nth-child(2){opacity:0;}
.cs_burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg) scale(.8);}


/* ============================================================
   2. 본문 틀
   ============================================================ */
/* width:100% 가 없으면 안 됩니다. 이게 "화면이 옹졸하다" 의 진짜 원인이었습니다.

   body 를 세로 flex 로 세워 뒀는데(바닥글을 바닥에 붙이려고),
   flex 안에서 margin:0 auto 를 주면 가로로 늘어나는 것을 그만두고
   내용 폭에 딱 맞게 쪼그라듭니다. max-width:1200px 은 있으나 마나였고,
   표가 538px 이면 본문도 538px 이 되어 큰 화면 한가운데 좁은 띠만 섰습니다.

   width:100% 를 같이 줘야 늘어난 다음 1200 에서 멈춥니다. */
.cs_wrap{max-width:960px;width:100%;margin:0 auto;padding:0 24px 80px;}

/* 2026-09-16 폭을 하나로 통일했습니다.
   화면마다 960 과 1200 이 섞여 있어서 메뉴를 옮길 때마다 제목 시작점이 좌우로 뛰었습니다.
   narrow 와 mid 는 이제 같은 값입니다. 쓰고 있는 화면이 많아 이름만 남겨 둡니다.
   나중에 한가할 때 화면에서 지우시면 됩니다. */
.cs_wrap.narrow,
.cs_wrap.mid{max-width:960px;}

/* 2026-09-16 넓혔습니다.
   narrow 520 -> 680, mid 720 -> 960.
   큰 화면에서 가운데 한 줄만 좁게 서 있으니 화면이 옹졸해 보였습니다. */

.cs_title{padding:48px 0 32px;}
.cs_title h2{font-size:28px;line-height:1.3;}
.cs_title p{margin-top:10px;color:#6B7787;font-size:14px;line-height:1.7;}
.cs_title a{color:#0099B0;font-weight:600;}

.cs_foot{border-top:1px solid #F3F4F6;background:#F9F9FA;}
.cs_foot .in{
  max-width:1200px;margin:0 auto;padding:26px 24px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:#848E9D;
}


/* ============================================================
   3. 찾기 줄
   ============================================================ */
.cs_find{
  display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;
  padding:16px;margin-bottom:24px;
  background:#F9F9FA;border-radius:12px;
}
.cs_find .grow{flex:1;min-width:220px;}
.cs_find .ipt_input input,
.cs_find .ipt_input select{background-color:#FFF;}

.cs_chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.cs_chips a{
  padding:7px 14px;border-radius:20px;font-size:13px;font-weight:500;
  color:#485363;background:#F3F4F6;white-space:nowrap;
}
.cs_chips a:hover{background:#E7E9EC;}
.cs_chips a.on{color:#FFF;background:#39424E;}

.cs_count{margin-bottom:12px;font-size:13px;color:#6B7787;}
.cs_count strong{color:#0099B0;}


/* ============================================================
   4. 목록
   ============================================================ */
.cs_list{border-top:1px solid #39424E;}
.cs_list > li{border-bottom:1px solid #E3E6EA;}
.cs_list > li > a{display:flex;align-items:center;gap:14px;padding:18px 8px;}
.cs_list > li > a:hover{background:#F9F9FA;}
.cs_list .t{flex:1;min-width:0;}
.cs_list .t h6{
  font-size:15px;font-weight:600;color:#14171C;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cs_list .t .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:7px;font-size:12px;color:#848E9D;
}
.cs_list .t .meta .models{color:#0099B0;}

/* 자료 설명. 두 줄까지만 보이고 넘치면 잘립니다 */
.cs_list .t .desc{
  margin-top:6px;font-size:13px;line-height:1.7;color:#6B7787;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:2;line-clamp:2;
}

/* 첫 화면과 내 정보에서 쓰는 줄 목록 */
.cs_menu{border-top:1px solid #E3E6EA;}
.cs_menu li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:20px 4px;border-bottom:1px solid #F3F4F6;
}
.cs_menu .t{font-size:16px;font-weight:600;color:#14171C;}
.cs_menu .s{font-size:13px;color:#848E9D;white-space:nowrap;}
.cs_menu a.t:hover{color:#0099B0;}
.cs_menu .s.go{color:#0099B0;font-weight:600;}


/* ============================================================
   5. 자주 묻는 질문
   ============================================================ */
.cs_faq{border-top:1px solid #39424E;}
.cs_faq > li{border-bottom:1px solid #E3E6EA;}
.cs_faq .q{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:18px 8px;text-align:left;border:none;background:none;
}
.cs_faq .q:hover{background:#F9F9FA;}
.cs_faq .q h6{flex:1;font-size:15px;font-weight:500;color:#14171C;}
.cs_faq .q .arr{
  width:20px;height:20px;flex:0 0 20px;
  background:url('/images/icon/arrow/arrow_down_black.svg') center/16px no-repeat;
}
.cs_faq .open .q .arr{transform:rotate(180deg);}
.cs_faq .a{padding:4px 8px 24px;color:#485363;font-size:14px;line-height:1.85;}


/* ============================================================
   6. 로그인 / 가입 / 인증
   ============================================================ */
.cs_sign{max-width:440px;width:100%;margin:0 auto;padding:72px 0 100px;}
.cs_sign.wide{max-width:600px;}

/* 로그인 전 화면은 머리말도 바닥글도 없이 가운데 한 장만 놓습니다.
   머리말에서 body 에 cs_bare 를 답니다. 바닥글은 자리만 차지하니 감춥니다. */
body.cs_bare{justify-content:center;padding:32px 16px;position:relative;overflow-x:hidden;}

/* 89번. 흐르는 빛을 그리는 동안에는 바탕을 그 빛의 바탕색으로 두고, 밑의 빛 덩어리는 처음부터 감춥니다.
   아이폰 사파리가 위아래 막대 색을 빛 덩어리(청록, 파랑)에서 집어 가지 않게 하려는 것입니다.
   html 에 cs_gl 을 다는 것은 머리말, 떼는 것은 cs_flow.js (그리지 못하게 됐을 때) 입니다. */
html.cs_gl,
html.cs_gl body.cs_bare{background-color:#F8FAFB;}
html.cs_gl .cs_aura{display:none;}
body.cs_bare .cs_foot{display:none;}
body.cs_bare .cs_sign{width:100%;padding:0;}


/* ------------------------------------------------------------
   로그인 화면의 움직임

   뒤에서 빛 덩어리 셋이 아주 느리게 흐르고,
   그 위에 반투명 유리판이 놓이고,
   판 안의 것들이 차례로 떠오릅니다.

   느린 것이 핵심입니다. 한 바퀴에 26초에서 38초 걸립니다.
   보고 있으면 움직이는 줄 모르다가, 눈을 뗐다 보면 달라져 있는 정도입니다.
   빠르면 그때부터 장식이 됩니다.

   색은 우리 청록 하나에 아주 옅은 파랑을 섞었을 뿐입니다.
   투명도가 0.22 를 넘어가면 글자가 읽히기 시작하니 올리지 마세요.
   ------------------------------------------------------------ */

.cs_aura{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.cs_aura i{position:absolute;display:block;border-radius:50%;filter:blur(70px);}
.cs_aura i:nth-child(1){
  width:520px;height:520px;top:-160px;left:-140px;
  background:rgba(0,153,176,.22);
  animation:cs_drift1 26s ease-in-out infinite;
}
.cs_aura i:nth-child(2){
  width:460px;height:460px;bottom:-180px;right:-120px;
  background:rgba(72,145,255,.16);
  animation:cs_drift2 32s ease-in-out infinite;
}
.cs_aura i:nth-child(3){
  width:380px;height:380px;top:40%;right:18%;
  background:rgba(0,153,176,.12);
  animation:cs_drift3 38s ease-in-out infinite;
}
@keyframes cs_drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(90px,70px) scale(1.12);}}
@keyframes cs_drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-80px,-60px) scale(1.08);}}
@keyframes cs_drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,80px) scale(.9);}}

/* 유리판 */
body.cs_bare .cs_sign{
  position:relative;z-index:1;
  padding:40px 34px 34px;border-radius:20px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 18px 50px rgba(20,23,28,.08),0 2px 8px rgba(20,23,28,.04);
}
body.cs_bare .cs_sign .ipt_input input,
body.cs_bare .cs_sign .ipt_input select,
body.cs_bare .cs_sign textarea{
  background-color:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.9);
}

/* 유리 흐림을 모르는 브라우저에서는 그냥 흰 판으로 둡니다.
   반투명인 채로 두면 뒤 색이 비쳐 글자가 흐려집니다. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.cs_bare .cs_sign{background:#FFF;}
  body.cs_bare .cs_sign .ipt_input input{background-color:#FFF;}
}

/* 판 안의 것들이 차례로 떠오릅니다.
   form 은 그 자체가 아니라 안에 든 것들이 하나씩 올라옵니다. */
body.cs_bare .cs_sign > *:not(form),
body.cs_bare .cs_sign form > *{opacity:0;transform:translateY(14px);}
body.cs_bare.ready .cs_sign > *:not(form),
body.cs_bare.ready .cs_sign form > *{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.475,.425,0,.995);
}
body.cs_bare.ready .cs_sign > *:nth-child(1){transition-delay:.06s;}
body.cs_bare.ready .cs_sign > *:nth-child(2){transition-delay:.13s;}
body.cs_bare.ready .cs_sign > *:nth-child(3){transition-delay:.19s;}
body.cs_bare.ready .cs_sign > *:nth-child(5){transition-delay:.42s;}
body.cs_bare.ready .cs_sign > *:nth-child(6){transition-delay:.48s;}
body.cs_bare.ready .cs_sign > *:nth-child(n+7){transition-delay:.54s;}
/* form 의 첫 아이는 csrf 숨은 칸이라 눈에 안 보입니다. 둘째부터 셉니다 */
body.cs_bare.ready .cs_sign form > *:nth-child(2){transition-delay:.26s;}
body.cs_bare.ready .cs_sign form > *:nth-child(3){transition-delay:.31s;}
body.cs_bare.ready .cs_sign form > *:nth-child(4){transition-delay:.36s;}
body.cs_bare.ready .cs_sign form > *:nth-child(n+5){transition-delay:.40s;}

/* 움직임을 줄이도록 설정한 분에게는 아무것도 움직이지 않습니다.
   멀미나 어지럼을 겪는 분들이 켜두는 설정입니다. */
@media (prefers-reduced-motion:reduce){
  .cs_aura i{animation:none !important;}
  body.cs_bare .cs_sign > *:not(form),
  body.cs_bare .cs_sign form > *{opacity:1 !important;transform:none !important;transition:none !important;}
}
.cs_sign .tel{
  margin-top:40px;text-align:center;
  font-size:12px;color:#848E9D;
}
.cs_sign .tel a{color:#6B7787;}
.cs_sign .cs_logo{justify-content:center;margin-bottom:36px;}
.cs_sign h3{text-align:center;margin-bottom:8px;}
.cs_sign .lead{text-align:center;color:#6B7787;margin-bottom:32px;font-size:14px;line-height:1.7;}
.cs_sign .go{margin-top:24px;}
.cs_sign .foot{
  display:flex;justify-content:center;gap:16px;margin-top:24px;
  font-size:13px;color:#6B7787;
}
.cs_sign .foot a:hover{color:#0099B0;}
.cs_sign .foot .sep{color:#E3E6EA;}
.cs_sign .hint{margin-top:22px;text-align:center;font-size:12px;color:#848E9D;line-height:1.8;}

/* 인증번호 여섯 자리 */
.cs_code input{
  text-align:center;font-size:24px;font-weight:700;letter-spacing:10px;
  font-variant-numeric:tabular-nums;
}

/* 링크처럼 보이는 단추 */
.cs_linkbtn{
  border:none;background:none;padding:0;
  font-size:13px;color:#6B7787;text-decoration:underline;text-underline-offset:3px;
}
.cs_linkbtn:hover{color:#0099B0;}


/* ============================================================
   7. 안내 판
   ============================================================ */
.cs_empty{
  padding:72px 20px;text-align:center;color:#848E9D;
  background:#F9F9FA;border-radius:12px;
}
.cs_empty .ico{margin:0 auto 14px;}
.cs_empty p{margin:0;font-size:14px;}
.cs_empty .btn_wrap{justify-content:center;margin-top:20px;}

.cs_note{
  padding:16px 18px;border-radius:8px;background:#F9F9FA;
  font-size:13px;line-height:1.8;color:#485363;
}
.cs_note a{color:#0099B0;font-weight:600;}

/* 접수 전 확인 사항. 본문은 CS_SETTING 에 들어 있습니다.
   네 항목이 세로로 길게 늘어져서 한 화면에 안 들어왔습니다.
   넓은 화면에서는 두 칸으로 세우고, 줄 간격과 여백을 줄였습니다. */
.cs_steps{counter-reset:st;margin-top:32px;}

/* 숫자와 제목의 눈높이 맞추기.
   숫자를 따로 띄워 놓고 top 을 몇 px 밀어서 맞추면 절대 안 맞습니다.
   글자 크기가 다르면 기준선도 다른데, 그 차이는 글꼴마다 달라서 눈대중으로 못 잡습니다.

   제목을 가로 flex 로 세우고 align-items:baseline 을 줍니다.
   그러면 숫자와 글자가 같은 기준선 위에 앉습니다. 브라우저가 계산해 줍니다. */
.cs_steps h4{
  counter-increment:st;
  display:flex;align-items:baseline;gap:14px;
  margin:0 0 6px;font-size:16px;font-weight:700;color:#14171C;
}
.cs_steps h4::before{
  content:counter(st);
  flex:0 0 26px;
  font-size:19px;font-weight:700;color:#0099B0;
  font-variant-numeric:tabular-nums;
}
.cs_steps p{
  margin:0 0 20px;padding:0 0 20px 40px;font-size:14px;color:#485363;line-height:1.7;
  border-bottom:1px solid #F3F4F6;
}
.cs_steps p:last-of-type{border-bottom:none;margin-bottom:0;}

@media screen and (min-width:900px){
  .cs_steps{columns:2;column-gap:48px;}

  /* 제목과 본문이 두 칸에 갈라져 앉으면 읽을 수가 없습니다.
     h4 뒤에서 칸이 나뉘지 않게 붙여 둡니다. */
  .cs_steps h4{break-inside:avoid;break-after:avoid;}
  .cs_steps p{break-inside:avoid;}

  /* 두 칸일 때는 가로선을 뺍니다.
     칸마다 항목 수와 높이가 달라서, 선을 어떻게 그어도 한쪽에만 남습니다.
     왼쪽엔 둘, 오른쪽엔 하나가 되어 균형이 깨져 보였습니다.
     여백은 어느 쪽이든 같은 크기라 기울지 않습니다.
     순서는 1234 숫자가 이미 잡아 줍니다. */
  .cs_steps p{border-bottom:none;margin-bottom:28px;padding-bottom:0;}
  .cs_steps p:last-of-type{margin-bottom:0;}
}

/* "확인했습니다" 는 아래로 밀려나면 안 보입니다.
   화면 바닥에 붙여 두면 어디까지 읽었든 늘 눈에 있습니다. */
.cs_agree{
  position:sticky;bottom:0;z-index:20;
  margin-top:28px;padding:14px 0 18px;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#FFF 22%);
}


/* ============================================================
   8. 단종 확인서 찾기
   ============================================================ */
.cs_verdict{text-align:center;padding:8px 0 4px;}
.cs_verdict .model{font-size:13px;color:#6B7787;margin-bottom:6px;}
.cs_verdict .word{font-size:26px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;}
.cs_verdict.stop .word{color:#14171C;}
.cs_verdict.live .word{color:#0099B0;}
.cs_verdict .desc{font-size:14px;color:#6B7787;line-height:1.75;}


/* ============================================================
   9. 좁은 칸에서 줄이 접히는 것 막기
      뱃지는 모서리가 20px 이라 두 줄이 되면 알약이 덩어리가 됩니다
   ============================================================ */
.badge{white-space:nowrap;}
.list_table th,.list_table td{word-break:keep-all;}
.list_table .c_state{min-width:100px;}
.list_table .c_no{min-width:130px;}
.list_table .c_date{min-width:96px;}
.list_table .c_act{min-width:92px;white-space:nowrap;}


/* 넓은 화면에서는 평범한 표입니다. 넘치면 그때만 옆으로 밉니다 */
.cs_scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cs_scroll table{width:100%;}
.cs_scroll .ti small{display:block;margin-top:5px;color:#848E9D;font-size:12px;font-weight:400;}
.cs_scroll .ti{text-align:left !important;}


/* ============================================================
   9-2. 개인정보처리방침 칸

   여기 두 가지가 잘못 쓰이고 있었습니다.

   하나. common.css 의 .dot_list 는 "카탈로그 · 2026-09-16" 처럼
        짧은 것을 한 줄에 늘어놓는 부품입니다. display:flex 라
        긴 문장 셋을 넣으면 옆으로 나란히 눌려서 글이 뭉개집니다.
        여기서는 세로로 세우는 목록을 따로 씁니다.

   둘. .ipt_chk span 은 네모 칸 그 자체입니다. common.css 가
       width 20px, 높이 20px, 테두리를 줍니다. 그래서 라벨 안에
       span 을 하나 더 쓰면 그것도 네모 칸이 되어 버립니다.
       "(필수)" 가 작은 상자에 갇혀 두 줄로 접힌 이유입니다.
       span 말고 em 을 씁니다.
   ============================================================ */
.cs_terms{margin-top:12px;}
.cs_terms li{
  position:relative;padding-left:12px;margin-top:8px;
  font-size:13px;line-height:1.75;color:#6B7787;
}
.cs_terms li:first-child{margin-top:0;}
.cs_terms li::before{
  content:'';position:absolute;left:0;top:10px;
  width:3px;height:3px;border-radius:50%;background:#848E9D;
}
.cs_terms li b{display:inline-block;min-width:66px;color:#485363;font-weight:600;}

.ipt_chk em{font-style:normal;color:#0099B0;}


/* ============================================================
   9-3. 화면 옮길 때 위에 차는 띠

   메뉴에서 항목을 누르면 메뉴판이 먼저 닫히고 그 다음에 넘어갑니다.
   닫히는 0.34초 동안 아무 일도 안 일어나면 멈춘 것처럼 보입니다.
   그 자리를 이 띠가 채웁니다.

   새 화면이 그려지면 이 띠는 옛 화면과 함께 사라집니다.
   따로 지울 필요가 없습니다.
   ============================================================ */
.cs_load{
  position:fixed;top:0;left:0;z-index:95;
  width:0;height:2px;background:#0099B0;opacity:0;
  transition:width .45s cubic-bezier(.22,.9,.3,1),opacity .2s ease;
  pointer-events:none;
}
.cs_load.on{opacity:1;}


/* ============================================================
   9-4. 사진 첨부 칸

   브라우저가 기본으로 그려주는 파일 단추는 나라와 브라우저마다 모양이 다르고
   글자도 영어로 나옵니다. 그래서 그 단추를 숨기고 우리 것을 얹습니다.
   실제로 눌리는 것은 여전히 숨은 input 입니다.
   ============================================================ */
.cs_file{position:relative;}
.cs_file input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.cs_file_pick{
  margin:0;padding:22px 16px;text-align:center;
  border:1px dashed #CBD2DA;border-radius:10px;background:#F9F9FA;
  font-size:13px;color:#6B7787;
  transition:border-color .2s ease,background .2s ease;
}
.cs_file:hover .cs_file_pick{border-color:#0099B0;background:#F3FBFC;}
.cs_file_list{margin:10px 0 0;padding:0;list-style:none;}
.cs_file_list li{
  padding:9px 12px;margin-top:6px;border-radius:8px;background:#F3F4F6;
  font-size:12px;color:#485363;word-break:break-all;
}


/* ============================================================
   10. 여백 이음매
       ipt_box 끼리는 common.css 가 16px 을 줍니다.
       표나 체크 다음에 오는 것은 그 규칙이 안 걸려서 여기서 채웁니다
   ============================================================ */
.drop_box_body > .view_table + .ipt_box,
.drop_box_body > table + .ipt_box{margin-top:24px;}
.drop_box_body > .ipt_box + .ipt_chk{margin-top:16px;}
.drop_box_body > .ipt_chk + .ipt_chk{margin-top:12px;}
.drop_box_body > .ipt_chk + .btn_wrap,
.drop_box_body > .ipt_box + .btn_wrap{margin-top:28px;}
.drop_box_title{gap:10px;}
.cs_wrap .paging{margin-top:28px;}


/* ============================================================
   11. 모바일
   ============================================================ */
@media screen and (max-width:768px){
  .cs_util .in{padding:0 16px;}
  .cs_head .in{height:60px;padding:0 16px;gap:12px;}
  .cs_logo img{height:26px;width:96px;}
  .cs_logo .sub{font-size:13px;margin-left:10px;padding-left:10px;}
  .cs_burger{display:flex;}

  /* ----------------------------------------------------------
     메뉴판. 오른쪽에서 화면을 다 덮으며 들어옵니다.

     같은 순간에 머리말 안쪽(로고와 위 줄)은 왼쪽으로 빠집니다.
     들어오는 것과 나가는 것이 한 몸처럼 움직여서 X 하나만 남습니다.
     닫을 때는 그대로 거꾸로 갑니다.

     쌓는 순서에서 한 번 걸려 넘어졌습니다. 적어 둡니다.

     메뉴판(nav)은 머리말(cs_top) "안에" 들어 있습니다.
     넓은 화면에서 가로 메뉴로 쓰려면 거기 있어야 합니다.

     그런데 자리를 잡은(position 을 준) 것은 그냥 놓인 것보다 위에 그려집니다.
     메뉴판은 fixed 이고 X 단추는 그냥 놓인 것이라, 메뉴판이 X 를 덮었습니다.
     눌러도 안 먹었습니다. 직접 눌러보는 시험에서 걸렸습니다.

     X 단추에도 자리와 숫자를 줘서 메뉴판 위로 올렸습니다.

       cs_burger   z-index 70   <- X. 늘 맨 위
       cs_nav      z-index 55   <- 화면을 다 덮되 X 아래로

     메뉴판이 머리말까지 덮습니다. 어차피 로고와 위 줄은 왼쪽으로 빠지고,
     메뉴판도 흰 바탕이라 이어져 보입니다. 위 104px 을 비워 둬서
     항목이 X 자리와 겹치지 않습니다.
     ---------------------------------------------------------- */

  /* 메뉴에서 화면을 옮길 때는 닫는 속도를 조금 올립니다.
     X 로 닫을 때의 0.55초는 여유롭지만, 넘어가려고 누른 사람에게는 깁니다. */
  body.nav_go .cs_nav,
  body.nav_go .cs_util .in,
  body.nav_go .cs_logo{transition-duration:.34s;}

  /* X 단추를 메뉴판 위로 올립니다. 이게 없으면 눌러도 안 닫힙니다 */
  .cs_burger{position:relative;z-index:70;}

  /* 머리말 안쪽이 왼쪽으로 빠집니다 */
  .cs_util .in,
  .cs_logo{
    transition:transform .55s cubic-bezier(.475,.425,0,.995),
               opacity .35s ease;
  }
  body.nav_on .cs_util .in,
  body.nav_on .cs_logo{
    transform:translateX(-110%);
    opacity:0;
  }

  /* 메뉴가 열린 동안 뒤쪽 내용은 움직이지 않게 잠급니다 */
  body.nav_on{overflow:hidden;}

  .cs_nav{
    display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:104px 20px 40px;
    background:#FFF;overflow-y:auto;-webkit-overflow-scrolling:touch;

    transform:translateX(100%);visibility:hidden;
    transition:transform .55s cubic-bezier(.475,.425,0,.995),
               visibility .55s;
  }
  .cs_nav.open{transform:none;visibility:visible;}

  /* 항목이 차례로 따라 들어옵니다.
     한꺼번에 나타나면 판만 움직이고 속은 죽은 것처럼 보입니다. */
  .cs_nav > a,
  .cs_nav_foot{
    opacity:0;transform:translateX(28px);
    transition:opacity .4s ease,transform .4s cubic-bezier(.475,.425,0,.995);
  }
  .cs_nav.open > a,
  .cs_nav.open .cs_nav_foot{opacity:1;transform:none;}
  .cs_nav.open > a:nth-child(1){transition-delay:.16s;}
  .cs_nav.open > a:nth-child(2){transition-delay:.21s;}
  .cs_nav.open > a:nth-child(3){transition-delay:.26s;}
  .cs_nav.open > a:nth-child(4){transition-delay:.31s;}
  .cs_nav.open > a:nth-child(5){transition-delay:.36s;}
  .cs_nav.open > a:nth-child(6){transition-delay:.41s;}
  .cs_nav.open > a:nth-child(7){transition-delay:.46s;}
  .cs_nav.open .cs_nav_foot{transition-delay:.5s;}

  .cs_nav a{
    padding:16px 4px;border-radius:0;border-bottom:1px solid #F3F4F6;
    font-size:17px;font-weight:500;color:#14171C;
  }
  .cs_nav a.on{background:none;color:#0099B0;}
  .cs_nav a.adm{margin-left:0;color:#0099B0;}
  .cs_nav a.adm::before{display:none;}

  /* 이름과 로그아웃. 위 줄이 가려지니 여기에 한 번 더 둡니다 */
  .cs_nav_foot{display:block;margin-top:auto;padding-top:28px;}
  .cs_nav_foot a{
    display:flex;align-items:center;gap:8px;
    padding:13px 4px;border-bottom:1px solid #F3F4F6;
    font-size:14px;font-weight:400;color:#6B7787;
  }
  .cs_nav_foot a:last-child{border-bottom:none;}

  .cs_wrap{padding:0 16px 60px;}
  .cs_title{padding:32px 0 24px;}
  .cs_title h2{font-size:22px;}
  .cs_find{padding:12px;}
  .cs_find .grow{min-width:100%;}
  .cs_find .btn{flex:1;justify-content:center;}
  .cs_sign{padding:48px 0 72px;}
  /* 좁은 화면에서는 유리판 안쪽 여백을 줄입니다.
     34px 을 그대로 두면 390px 화면에서 글 들어갈 자리가 290px 밖에 안 남습니다. */
  body.cs_bare .cs_sign{padding:32px 22px 26px;border-radius:18px;}
  body.cs_bare{padding:24px 14px;}
  .cs_foot .in{padding:20px 16px;}
  .cs_empty{padding:52px 16px;}

  /* 아이폰 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대해 버립니다.
     되돌아오지도 않아서 그 뒤로 계속 커진 채로 씁니다. 16px 이면 확대를 안 합니다. */
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="password"],input[type="number"],input[type="search"],
  select,textarea{font-size:16px;}
  .cs_code input{font-size:26px;}

  /* 표를 옆으로 미는 대신 한 줄씩 카드로 세웁니다.
     머리글은 감추고 각 칸이 자기 이름을 왼쪽에 답니다.
     그 이름은 화면에 있는 th 를 그대로 옮겨 적은 data-th 값입니다. */
  .cs_scroll{overflow-x:visible;}
  .cs_scroll table,
  .cs_scroll tbody,
  .cs_scroll tr,
  .cs_scroll td{display:block;width:auto;}
  .cs_scroll thead{display:none;}
  .cs_scroll tbody tr{
    border:1px solid #E3E6EA;border-radius:12px;
    padding:6px 14px;margin-bottom:10px;background:#FFF;
  }
  .cs_scroll tbody td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    padding:11px 0;border:0;border-bottom:1px solid #F3F4F6;
    text-align:right;
  }
  .cs_scroll tbody tr td:last-child{border-bottom:0;}
  .cs_scroll tbody td::before{
    content:attr(data-th);
    flex:0 0 auto;text-align:left;
    font-size:12px;font-weight:500;color:#848E9D;white-space:nowrap;
  }
  .cs_scroll tbody td:empty{display:none;}
  .cs_scroll .ti{text-align:right !important;}
  /* 칸 안에서 이름과 내용이 한 줄로 서니, 작은 글씨는 다음 줄로 내려 보냅니다 */
  .cs_scroll tbody td{flex-wrap:wrap;}
  .cs_scroll .ti small{flex:0 0 100%;margin-top:4px;}
  .cs_scroll tbody td.c_no,
  .cs_scroll tbody td.c_state,
  .cs_scroll tbody td.c_date,
  .cs_scroll tbody td.c_act{min-width:0;}
  .cs_scroll tbody td .btn{flex:0 0 auto;}
}



/* ============================================================
   10. 움직임
   2026-09-17

   여는 것도 닫는 것도 딱 끊어졌습니다. 빠른 것과 시원한 것은 다릅니다.
   여기서 한군데 모아 둡니다. 시간과 곡선을 손보시려면 이 칸만 보시면 됩니다.

   곡선은 cubic-bezier(.22,.61,.36,1) 하나로 통일했습니다.
   처음에 쑥 나가고 끝에서 천천히 서는 곡선입니다. 손이 놓는 느낌에 가깝습니다.
   ============================================================ */

@keyframes cs_in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* 화면이 열릴 때 살짝 떠오릅니다. 페이지가 바뀌는 곳은 이것만으로 부드러워집니다 */
.cs_wrap{ animation:cs_in .45s cubic-bezier(.22,.61,.36,1) both; }

/* 분류를 눌러 목록을 다시 그릴 때.
   줄마다 조금씩 늦게 나오게 해서 위에서 아래로 흐르게 합니다.
   열 줄까지만 늦추고 그 뒤로는 같이 나옵니다. 스무 줄을 기다리면 답답해집니다 */
.cs_faq.cs_soft > li,
.cs_list.cs_soft > li{ animation:cs_in .38s cubic-bezier(.22,.61,.36,1) both; }

.cs_soft > li:nth-child(1){ animation-delay:0s; }
.cs_soft > li:nth-child(2){ animation-delay:.03s; }
.cs_soft > li:nth-child(3){ animation-delay:.06s; }
.cs_soft > li:nth-child(4){ animation-delay:.09s; }
.cs_soft > li:nth-child(5){ animation-delay:.12s; }
.cs_soft > li:nth-child(6){ animation-delay:.15s; }
.cs_soft > li:nth-child(7){ animation-delay:.18s; }
.cs_soft > li:nth-child(8){ animation-delay:.21s; }
.cs_soft > li:nth-child(9){ animation-delay:.24s; }
.cs_soft > li:nth-child(n+10){ animation-delay:.27s; }

/* 자주 묻는 질문 펼치기.
   전에는 hidden 을 붙였다 뗐다 했습니다. 그건 켜고 끄는 것이라 중간이 없습니다.
   높이를 0에서 1로 늘리는 방식으로 바꿉니다. 글이 몇 줄이든 알아서 맞습니다.
   안쪽 .in 이 넘치는 부분을 잘라 줘야 늘어나는 동안 글이 삐져나오지 않습니다 */
.cs_faq .a{
  display:grid; grid-template-rows:0fr;
  opacity:0; padding:0 8px;
  color:#485363; font-size:14px; line-height:1.85;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1),
             padding .42s cubic-bezier(.22,.61,.36,1),
             opacity .26s ease;
}
.cs_faq .a > .in{ overflow:hidden; min-height:0; }
.cs_faq li.open .a{ grid-template-rows:1fr; opacity:1; padding:4px 8px 24px; }

.cs_faq .q{ transition:background .25s ease; }
.cs_faq .q .arr{ transition:transform .42s cubic-bezier(.22,.61,.36,1); }

/* 누르는 것들. 색이 튀지 않고 넘어가게 합니다 */
.cs_chips a{ transition:background .25s ease, color .25s ease; }
.cs_list > li > a{ transition:background .25s ease; }
.btn{ transition:background .2s ease, border-color .2s ease, color .2s ease; }

/* 움직임을 줄여 달라고 해 두신 분께는 다 끕니다.
   어지럼을 느끼시는 분이 계십니다. 운영체제 설정을 브라우저가 그대로 알려 줍니다 */
@media (prefers-reduced-motion: reduce){
  .cs_wrap,
  .cs_faq.cs_soft > li,
  .cs_list.cs_soft > li{ animation:none !important; }
  .cs_faq .a,
  .cs_faq .q .arr{ transition:none !important; }
}


/* ============================================================
   12. 찾은 결과 (2026-09-23 ISC 68번)

   자주 묻는 질문과 기술자료를 두 묶음으로 나눠 보여 줍니다.
   묶음 안은 원래 부품(.cs_faq, .cs_list)을 그대로 씁니다.
   부품이 윗선(#39424E)을 스스로 긋기 때문에, 묶음 제목에는 선을 긋지 않습니다.
   ============================================================ */
.cs_sr_num{color:#0099B0;}
.cs_sr_sec{margin-top:40px;}
.cs_sr_h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.cs_sr_h h3{font-size:16px;font-weight:700;color:#14171C;}
.cs_sr_h h3 span{margin-left:4px;color:#0099B0;}
.cs_sr_h a{font-size:13px;color:#6B7787;}
.cs_sr_h a:hover{color:#0099B0;}

/* 찾은 낱말. 형광펜처럼 굵게 칠하지 않고 옅게 깔기만 합니다 */
.cs_faq .q h6 mark,
.cs_list mark{background:#E3F4F7;color:inherit;border-radius:3px;padding:0 1px;}

.cs_sr_help{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:48px;padding:20px 22px;border-radius:12px;background:#F9F9FA;
}
.cs_sr_help p{margin:0;font-size:14px;line-height:1.7;color:#485363;}
.cs_sr_help p a{color:#0099B0;font-weight:600;}


/* ============================================================
   13. 첫 화면 (2026-09-23 ISC 69번)

   위 절반은 찾기가 주인공이고, 아래는 가는 선으로 나눈 목록 셋입니다.
   카드와 색 칠한 칸을 쓰지 않습니다. 목록이 서너 줄뿐이어도 비어 보이지 않습니다.

   위쪽 바탕은 움직이지 않습니다.
   위에서 청록이, 오른쪽 아래에서 아주 옅은 파랑이 번지는 것뿐입니다.
   ============================================================ */
.cs_home_hero{
  position:relative;border-bottom:1px solid #E7E9EC;
  background:
    radial-gradient(900px 320px at 50% -40px, rgba(0,153,176,.11), rgba(0,153,176,0) 70%),
    radial-gradient(640px 260px at 88% 110%, rgba(72,145,255,.06), rgba(72,145,255,0) 70%),
    linear-gradient(180deg,#F8FAFB 0%,#F1F4F6 100%);
}
.cs_home_hero .in{max-width:960px;margin:0 auto;padding:72px 24px 60px;text-align:center;}
.cs_home_hero h2{font-size:32px;line-height:1.3;font-weight:700;color:#14171C;letter-spacing:-0.4px;}
.cs_home_hero .lead{margin-top:12px;font-size:15px;line-height:1.7;color:#6B7787;}

.cs_home_q{
  max-width:640px;margin:32px auto 0;
  display:flex;align-items:center;height:60px;padding:0 8px 0 22px;border-radius:12px;
  background:rgba(255,255,255,.9);border:1px solid #FFF;
  box-shadow:0 14px 40px rgba(20,23,28,.08),0 2px 6px rgba(20,23,28,.04);
  transition:box-shadow .25s ease,border-color .25s ease;
}
.cs_home_q:focus-within{border-color:#0099B0;box-shadow:0 0 0 4px rgba(0,153,176,.12),0 14px 40px rgba(20,23,28,.08);}
.cs_home_q .ico{flex:0 0 auto;margin-right:12px;}
.cs_home_q input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font:inherit;font-size:16px;color:#14171C;}
.cs_home_q input::placeholder{color:#9BA5B4;}
.cs_home_q button{
  flex:0 0 auto;height:44px;padding:0 22px;border:0;border-radius:8px;
  background:#0099B0;color:#FFF;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .25s ease;
}
.cs_home_q button:hover{background:#008498;}

.cs_home_go{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px;}
.cs_home_go a{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;
  font-size:14px;font-weight:500;color:#39424E;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);
  transition:background .25s ease,color .25s ease;
}
.cs_home_go a:hover{background:#FFF;color:#0099B0;}
.cs_home_go a .ext{font-size:12px;color:#9BA5B4;}

.cs_home{max-width:960px;width:100%;margin:0 auto;padding:48px 24px 88px;}
.cs_home_sec + .cs_home_sec{margin-top:48px;}
.cs_home_h{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #39424E;}
.cs_home_h h3{font-size:16px;font-weight:700;color:#14171C;}
.cs_home_h a{font-size:13px;color:#6B7787;}
.cs_home_h a:hover{color:#0099B0;}

.cs_home_req > li{border-bottom:1px solid #E3E6EA;}
.cs_home_req > li > a{display:flex;align-items:center;gap:20px;padding:16px 4px;transition:background .25s ease;}
.cs_home_req > li > a:hover{background:#F9F9FA;}
.cs_home_req .no{flex:0 0 120px;font-size:13px;color:#848E9D;font-variant-numeric:tabular-nums;}
.cs_home_req .ti{flex:1;min-width:0;font-size:15px;font-weight:600;color:#14171C;}
.cs_home_req .ti small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:#6B7787;}
.cs_home_req .dt{flex:0 0 56px;font-size:13px;color:#848E9D;text-align:right;font-variant-numeric:tabular-nums;}
.cs_home_req .st{flex:0 0 72px;text-align:right;}

.cs_home_blank{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 4px;border-bottom:1px solid #E3E6EA;}
.cs_home_blank p{font-size:15px;font-weight:600;color:#14171C;}
.cs_home_blank p small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:#6B7787;}

.cs_home_two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;}
.cs_home_list > li{border-bottom:1px solid #E3E6EA;}
.cs_home_list a{display:flex;align-items:center;gap:12px;padding:14px 4px;font-size:14px;color:#39424E;transition:color .2s ease;}
.cs_home_list a:hover{color:#0099B0;}
.cs_home_list a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cs_home_list a em{flex:0 0 auto;font-style:normal;font-size:12px;color:#9BA5B4;font-variant-numeric:tabular-nums;}
.cs_home_list a em.tag{color:#0099B0;}
.cs_home_list a .q{flex:0 0 auto;font-weight:700;color:#0099B0;}
.cs_home_none{padding:20px 4px;font-size:14px;color:#848E9D;border-bottom:1px solid #E3E6EA;}

@media (max-width:768px){
  .cs_home_hero .in{padding:48px 20px 40px;}
  .cs_home_hero h2{font-size:24px;}
  .cs_home_hero .lead{font-size:14px;}
  .cs_home_q{height:54px;padding-left:16px;}
  .cs_home_q button{padding:0 16px;}
  .cs_home{padding:36px 20px 72px;}
  .cs_home_two{grid-template-columns:minmax(0,1fr);gap:40px;}
  .cs_home_req > li > a{flex-wrap:wrap;gap:4px 12px;}
  .cs_home_req .no{flex:1 1 auto;order:1;}
  .cs_home_req .st{flex:0 0 auto;order:2;}
  .cs_home_req .ti{flex:1 1 100%;order:3;}
  .cs_home_req .dt{display:none;}
  .cs_home_blank{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   14. A/S 접수 폼 (2026-09-23 ISC 71번)
   모델명 주의 문구와 설치 시기 단추.
   단추는 라디오를 숨기고 옆 span 을 칠합니다. 키보드로도 고를 수 있습니다.
   ============================================================ */
.cs_caution{margin-top:8px;font-size:13px;font-weight:600;line-height:1.6;color:#39424E;}

.cs_seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.cs_seg label{position:relative;display:block;margin:0;cursor:pointer;}
.cs_seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.cs_seg span{
  display:flex;align-items:center;justify-content:center;height:46px;padding:0 6px;
  border:1px solid #E3E6EA;border-radius:8px;background:#FFF;
  font-size:14px;font-weight:500;color:#485363;text-align:center;white-space:nowrap;
  transition:border-color .2s ease,background .25s ease,color .25s ease;
}
.cs_seg label:hover span{border-color:#C9CED6;}
.cs_seg input:checked + span{border-color:#0099B0;background:#E3F4F7;color:#0099B0;font-weight:600;}
.cs_seg input:focus-visible + span{outline:2px solid #0099B0;outline-offset:2px;}
.cs_seg_more{margin-top:10px;}
.cs_seg_more[hidden]{display:none;}

@media (max-width:640px){
  .cs_seg{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ============================================================
   15. 현장 주소 찾기 (2026-09-23 ISC 72번, 73번)
   주소 칸은 누르면 찾기 창이 뜹니다. 직접 적지 못하게 막아 두었지만 막힌 칸처럼 회색으로 칠하지 않습니다.
   ============================================================ */
.cs_addr{display:flex;gap:8px;}
.cs_addr .ipt_input{flex:1;min-width:0;}
.cs_addr .btn{flex:0 0 auto;height:46px;padding:0 18px;white-space:nowrap;}
.cs_addr .ipt_input input:read-only{background-color:#FFF;border-color:#E3E6EA;cursor:pointer;}
.cs_addr_own{margin-top:8px;}
.cs_addr_own[hidden]{display:none;}

/* ============================================================
   16. 주소 찾기 창 (2026-09-23 ISC 73번)
   PC 는 가운데 창, 휴대폰은 화면을 꽉 채웁니다.
   ============================================================ */
.cs_addr_modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;}
.cs_addr_modal[hidden]{display:none;}
.cs_addr_dim{position:absolute;inset:0;background:rgba(20,23,28,.45);animation:cs_addr_fade .25s ease;}
.cs_addr_sheet{
  position:relative;display:flex;flex-direction:column;width:520px;max-width:100%;height:640px;max-height:100%;
  border-radius:12px;background:#FFF;overflow:hidden;box-shadow:0 20px 50px rgba(20,23,28,.25);
  animation:cs_addr_up .42s cubic-bezier(.22,.61,.36,1);
}
.cs_addr_head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid #E3E6EA;}
.cs_addr_head b{font-size:16px;font-weight:700;color:#14171C;}
.cs_addr_close{
  flex:0 0 auto;height:32px;padding:0 12px;border:1px solid #E3E6EA;border-radius:8px;background:#FFF;
  font:inherit;font-size:13px;color:#485363;cursor:pointer;
}
.cs_addr_close:hover{border-color:#C9CED6;color:#14171C;}
.cs_addr_box{flex:1;min-height:0;}
.cs_addr_foot{padding:12px 20px;border-top:1px solid #E3E6EA;background:#F9F9FA;text-align:center;}
.cs_addr_foot button{padding:4px 0;border:0;background:none;font:inherit;font-size:13px;color:#6B7787;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.cs_addr_foot button:hover{color:#14171C;}
body.cs_addr_lock{overflow:hidden;}

@keyframes cs_addr_fade{from{opacity:0;}to{opacity:1;}}
@keyframes cs_addr_up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

@media (max-width:640px){
  .cs_addr_modal{padding:0;}
  .cs_addr_sheet{width:100%;height:100%;border-radius:0;box-shadow:none;}
}
@media (prefers-reduced-motion:reduce){
  .cs_addr_dim,.cs_addr_sheet{animation:none;}
}

/* ============================================================
   17. 내 접수 한 건 보기 (2026-09-23 ISC 74번)
   나의 접수 현황 줄 누르기, 접수 내용 화면
   ============================================================ */
.cs_rowlink{cursor:pointer;}
.cs_rowlink:hover td{background:#F9F9FA;}
.cs_rowlink .c_no a{color:inherit;text-decoration:none;}

.cs_back{display:inline-flex;align-items:center;gap:6px;margin-top:36px;font-size:13px;color:#6B7787;text-decoration:none;}
.cs_back:hover{color:#14171C;}
.cs_back_arr{display:inline-block;width:16px;height:16px;background:url(/images/icon/arrow/arrow_left_black.svg) no-repeat center/contain;opacity:.7;}
.cs_req_title{padding-top:12px;}
.cs_req_title h2 small{margin-left:10px;font-size:15px;font-weight:500;color:#848E9D;font-variant-numeric:tabular-nums;}

.cs_req_state{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:12px;background:#F9F9FA;}
.cs_req_state p{font-size:14px;color:#485363;line-height:1.6;}
.cs_req_state small{margin-left:8px;font-size:12px;color:#848E9D;}

.cs_req_sec{margin-top:36px;}
.cs_req_sec h6{padding-bottom:10px;border-bottom:1px solid #39424E;}
.cs_req_dl{display:grid;grid-template-columns:120px minmax(0,1fr);margin:0;}
.cs_req_dl dt,
.cs_req_dl dd{padding:13px 4px;border-bottom:1px solid #E3E6EA;font-size:14px;line-height:1.7;}
.cs_req_dl dt{color:#848E9D;}
.cs_req_dl dd{margin:0;color:#14171C;word-break:break-word;}
.cs_req_dl dd small{color:#848E9D;font-size:13px;}

.cs_req_files_head{padding:13px 4px 0;font-size:14px;color:#485363;}
.cs_req_files{margin:8px 0 0;padding:0;list-style:none;}
.cs_req_files li{display:flex;align-items:center;gap:8px;padding:8px 4px;font-size:13px;color:#6B7787;word-break:break-all;}

.cs_req_meta{margin-top:28px;font-size:12px;color:#848E9D;}
.cs_req_help{margin-top:8px;font-size:13px;color:#6B7787;line-height:1.7;}
.cs_req_help a{color:#0099B0;font-weight:600;text-decoration:none;}

@media (max-width:640px){
  .cs_back{margin-top:24px;}
  .cs_req_dl{grid-template-columns:92px minmax(0,1fr);}
  .cs_req_state{align-items:flex-start;}
}

/* ============================================================
   18. 접수 내용 고치기 (2026-09-23 ISC 76번)
   ============================================================ */
.cs_req_edit{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:20px;}
.cs_req_edit p{font-size:13px;color:#6B7787;}

/* ============================================================
   19. 단종 확인 모델명 목록 (2026-09-23 ISC 86번)
   모델명 칸 바로 아래에 뜹니다. 칸과 같은 폭, 모서리 8px.
   목록이 길면 안에서만 굴러가고 화면은 밀지 않습니다.
   ============================================================ */
.eol_find .eol_suggest{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  overflow:hidden;border:1px solid #E3E6EA;border-radius:8px;
  background:#FFF;
  box-shadow:0 10px 30px rgba(20,23,28,.10);
}
.eol_find .eol_suggest[hidden]{display:none;}
.eol_find .eol_suggest ul{max-height:312px;margin:0;padding:6px;overflow-y:auto;list-style:none;}
.eol_find .eol_suggest li{
  padding:11px 12px;border-radius:6px;cursor:pointer;
  font-size:16px;line-height:1.4;color:#39424E;font-variant-numeric:tabular-nums;
  transition:background-color .2s ease;
}
.eol_find .eol_suggest li b{font-weight:700;color:#0099B0;}
.eol_find .eol_suggest li:hover{background:#F3F4F6;}
.eol_find .eol_suggest li.on{background:#E3F4F7;color:#14171C;}
.eol_find .eol_suggest p{padding:10px 18px 12px;border-top:1px solid #F3F4F6;font-size:12px;line-height:1.6;color:#848E9D;}
@media (prefers-reduced-motion:reduce){
  .eol_find .eol_suggest li{transition:none;}
}

/* ============================================================
   20. 목록과 칩, 상태 표시 다듬기 (2026-09-23 ISC 90번)
   나의 접수 현황, 나의 발급 내역을 첫 화면 "최근 접수" 와 같은 목록으로 그립니다 (.cs_home_req.full).
   칩과 상태 표시의 알약 모양을 관리 화면처럼 모서리만 살짝 둥글게 바꿉니다.
   ============================================================ */
.cs_home_req.full{border-top:1px solid #39424E;}
.cs_home_req.doc .no{flex-basis:200px;font-size:13px;color:#0099B0;}
.cs_home_req.doc .st{flex:0 0 24px;display:flex;justify-content:flex-end;}

/* 제목 줄 오른쪽 단추 (새로 접수하기) */
.cs_title.has_act{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;}
.cs_title.has_act > .btn{flex:0 0 auto;}

/* 칩: 관리 화면과 같은 높이 34px, 모서리 8px */
.cs_chips a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;}

/* 상태 표시: 모서리 6px, 높이 24px */
.badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;line-height:1;}

@media (max-width:768px){
  /* 휴대폰에서도 날짜를 남깁니다. 첫 줄에 번호, 날짜, 상태, 둘째 줄에 상호 */
  .cs_home_req.full .no{flex:0 1 auto;order:1;}
  .cs_home_req.full .dt{display:block;flex:1 1 auto;order:2;text-align:left;}
  .cs_home_req.full .st{flex:0 0 auto;order:3;}
  .cs_home_req.full .ti{order:4;}
  .cs_home_req.doc .no{flex-basis:auto;}
  .cs_title.has_act{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   21. 찾기 칸, 칸 묶음 제목, 색 줄이기 (2026-09-23 ISC 91번)
   ============================================================ */

/* 찾기 칸: 회색 판에 칸과 단추를 늘어놓던 것을 첫 화면 찾기 칸처럼 흰 칸 한 줄로.
   찾기 단추는 칸 안 오른쪽, 지우기는 찾는 말이 있을 때만 그 앞에 글자로. 휴대폰에서도 한 줄입니다. */
.cs_find{
  flex-wrap:nowrap;align-items:center;gap:4px;height:56px;padding:0 6px 0 0;
  background:#FFF;border:1px solid #E3E6EA;border-radius:12px;
  transition:border-color .2s ease,box-shadow .25s ease;
}
.cs_find:focus-within{border-color:#0099B0;box-shadow:0 0 0 4px rgba(0,153,176,.12);}
.cs_find .grow{flex:1 1 auto;min-width:0;margin:0;}
.cs_find .ipt_input input{height:54px;border:0 !important;background-color:transparent !important;box-shadow:none !important;font-size:16px;}
.cs_find .btn{flex:0 0 auto;height:44px;padding:0 18px;border-radius:8px;white-space:nowrap;}
.cs_find .btn.light{padding:0 10px;background:none;border:0;color:#848E9D;font-weight:500;}
.cs_find .btn.light:hover{color:#14171C;}
/* 공용 .btn 의 display 가 hidden 을 덮어써서 지우기 단추가 늘 보이던 것을 막습니다 */
.cs_find [hidden]{display:none !important;}

/* 칸 묶음 제목. 접수 내용 보기(.cs_req_sec h6)와 같은 모양 */
.cs_sec_h{margin:40px 0 18px;padding-bottom:10px;border-bottom:1px solid #39424E;font-size:15px;font-weight:700;color:#14171C;}
form > .cs_sec_h:first-of-type,
.cs_block > .cs_sec_h{margin-top:0;}
.cs_block + .cs_block{margin-top:48px;}

/* 모델명 주의 문구: 옅은 글씨, ※ 만 청록 */
.cs_caution{font-weight:400;color:#6B7787;}
.cs_caution b{color:#0099B0;font-weight:700;}

/* 옅은 청록 표시(확인중, 분류, 영상). 공용 .blue 는 옅은 파랑(#E9F2FF)이라 우리 색으로 맞춥니다 */
.badge.blue{background-color:#E3F4F7;border-color:#E3F4F7;color:#0099B0;}

@media (max-width:768px){
  .cs_find{padding:0 5px 0 0;}
  .cs_find .grow{min-width:0;}
  .cs_find .btn{flex:0 0 auto;height:42px;padding:0 14px;}
  .cs_find .btn.light{padding:0 8px;}
}