@charset "utf-8";

/* =========================== SNB */
#sh_snb {display:inline-block;position:relative;z-index:10;padding:0 40px;text-align:center;box-shadow:0px 2px 12px rgba(0,0,0,.1);background-color:#fff}
#sh_snb li {display:inline-block;position:relative;height:55px;padding:0 35px;font-size:17px;line-height:55px}
#sh_snb li:first-child:before {display:none}
#sh_snb li a {position:relative;font-weight:500}
#sh_snb li a.on{color:#6e62c3}
#cent{ margin:0 auto;}
/* =========================== PAGE */
#greeting{font-size:15px;font-weight:400;line-height:1.8;letter-spacing:-.2px;color:#777;font-family:'Noto Sans KR'}
#greeting .tit_area{padding:0 0 40px 5%;font-size:38px;font-weight:100;line-height:1.35;letter-spacing:-.5px;color:#222}
#greeting .tit_area p{font-weight:600}
#greeting .img{height:550px;background:url(/img/sub/greeting_img.webp) center no-repeat;background-size:cover}
#greeting .img2{margin:0 auto; max-width:450px; height:150px;background:url(/img/sub/products.webp) center no-repeat;background-size:cover}
#greeting .img3{margin:0 auto; max-width:1000px; width: 100%; height:auto; display: block}
#greeting .img4{margin:0 auto; width: 450px; max-width:450px; height:auto; display: block}
#greeting .cont{padding:40px 0 0 5%}
#greeting .cont .pl{white-space:pre-line}
#greeting .cont .sign{margin-top:30px;font-weight:500;color:#222}
#greeting .cont .sign span{margin-left:20px;font-size:17px}
@media(max-width:1024px){
#greeting{padding:20px;font-size:14px;line-height:1.6}
#greeting .tit_area{padding:0;font-size:28px;line-height:1.4;color:#222;word-break:keep-all}
#greeting .img{height:200px;margin:15px 0;margin-top: 15px;}
#greeting .cont{padding:0}
#greeting .cont .sign{margin-top:20px}
#greeting .cont .sign span{margin-left:0;font-size:15px}
}
@media(max-width:768px){
#greeting .cont .pl{white-space:normal}	
#greeting .img4{margin:0 auto; max-width:250px; height:auto; display: block}

.spec-table {

    font-size: 13px;
  }
}
@media(max-width:480px){
#greeting{padding:15px 12px}	
#greeting .tit_area{font-size:22px}
#greeting .img2{max-width:380px; height:130px; margin-top:15px;}
#sh_snb {padding: 0 25px;}
#sh_snb li {display:inline-block;position:relative;height:55px;padding:0 5px;font-size:15px;line-height:55px}
#sh_snb li:first-child:before {display:none}
#sh_snb li a {position:relative;font-weight:500}
#sh_snb li a.on{color:#6e62c3}
}

.compare-table {
    max-width:800px;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.compare-table th,
.compare-table td {
    border: 1px solid #ddd;
    padding: 12px;
}

.compare-table thead {
    background-color: #f5f5f5;
    font-weight: bold;
}

.spec-table {
    max-width:1000px;
    width: 100%;
    margin:0 auto;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  .spec-table th,
  .spec-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
  }
  
  .spec-table thead th {
    background-color: #434343;
    ;
    font-weight: 600;
  }
  
  .spec-table tbody td:first-child {
    font-weight: 500;
  }
  @media(max-width:480px){
    .spec-table {

        font-size: 13px;
      }
  }

 /* =========================
   EA공조 톤앤매너 Override
   - 딥블루/화이트/소프트 섀도우
   - 과한 그라데이션/보라톤 제거
   ========================= */

:root{
    --brand: #1f3c88;          /* 메인 딥블루 */
    --brand-2: #2b57c2;        /* 보조 블루 */
    --ink: #111827;            /* 본문 텍스트 */
    --muted: #6b7280;          /* 보조 텍스트 */
    --line: #e5e7eb;           /* 라인 */
    --bg: #ffffff;
    --soft: #f5f7fa;           /* 섹션/행 배경 */
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --radius: 14px;
  }
  
  /* 공통 타이포/기본 */
  body{
    color: var(--ink);
    font-family: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  }
  .section p{
    text-align: left;          /* 문서 가독성: justify보다 안전 */
    line-height: 1.75;
    color: #273044;
  }
  
  /* -------------------------
     표지
     ------------------------- */
  .cover{
    background: #0b1b3a; /* 히어로 딥블루 기반 */
    background-image:
      radial-gradient(1200px 600px at 70% 20%, rgba(43,87,194,0.35), transparent 60%),
      radial-gradient(900px 500px at 20% 80%, rgba(31,60,136,0.55), transparent 55%);
    color: #fff;
    min-height: 50PX;
    box-shadow: var(--shadow);
    padding: 15px 32px;
    display: block;
    margin: 0 auto;
    line-height: 20px;
    
  }
  
  .cover .icon{
    font-size: 55px;
    margin: 20px 0px 42px 0px;
    opacity: 0.95;
  }
  
  .cover h1{
    font-size: 25px;
    margin-bottom: 14px;
    text-shadow: 0 6px 18px rgba(0,0,0,0.25);
    letter-spacing: -0.5px;
  }
  
  .cover .subtitle{
    font-size: 18px;
    margin-bottom: 12px;
    opacity: 0.92;
    max-width: 620px;
    line-height: 1.55;
  }
  
  .cover .version,
  .cover .note{
    font-size: 13px;
    opacity: 0.8;
  }
  
  /* -------------------------
     목차
     ------------------------- */
  .toc{
    padding: 36px;
  }
  
  .toc h2{
    font-size: 20px;
    margin-bottom: 18px;
    color: var(--brand);
    border-bottom: 2px solid rgba(31,60,136,0.22);
    padding-bottom: 10px;
    letter-spacing: -0.2px;
  }
  
  .toc-item{
    padding: 12px 0;
    border-bottom: 1px dashed rgba(107,114,128,0.35);
    font-size: 15px;
    color: var(--ink);
  }
  
  /* -------------------------
     섹션 타이틀/서브타이틀
     ------------------------- */
  .section{
    padding: 26px 22px;
  }
  
  .section h2{
    font-size: 24px;
    color: var(--brand);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(31,60,136,0.22);
    letter-spacing: -0.2px;
  }
  
  .section h3{
    font-size: 17px;
    color: #1f2937;
    margin: 22px 0 12px 0;
    padding-left: 12px;
    border-left: 4px solid var(--brand);
    letter-spacing: -0.1px;
  }
  
  .section h4{
    font-size: 15px;
    color: #374151;
    margin: 14px 0 8px 0;
  }
  
  /* 리스트 */
  .section ul,
  .section ol{
    margin: 12px 0 12px 22px;
  }
  .section li{
    margin-bottom: 6px;
    color: #273044;
  }
  
  /* -------------------------
     스크린샷
     ------------------------- */
  .screenshot-container{
    text-align: center;
    margin: 24px 0;
  }
  
  .screenshot{
    max-width: 72%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  
  .screenshot-caption{
    margin-top: 10px;
    font-style: normal;
    color: var(--muted);
    font-size: 13px;
  }
  
  /* -------------------------
     정보 박스 (톤 통일)
     ------------------------- */
  .info-box{
    background: #eef4ff;
    line-height: 20px;
    border-left: 4px solid var(--brand-2);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
  }
  
  .info-box.warning{
    background: #fff7ed;
    border-left-color: #f59e0b;
  }
  .info-box.danger{
    background: #fff1f2;
    border-left-color: #ef4444;
  }
  .info-box.success{
    background: #ecfdf5;
    border-left-color: #10b981;
  }
  
  .info-box strong{
    margin-bottom: 6px;
    color: #111827;
  }
  
  /* -------------------------
     테이블 (사이트 톤)
     ------------------------- */
  table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
  }
  
  th, td{
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
  }
  
  thead th{
    background: var(--brand);
    color: #fff;
    font-weight: 600;
  }
  
  tbody tr:nth-child(even){
    background: var(--soft);
  }
  
  tbody tr:last-child td{
    border-bottom: none;
  }
  
  /* -------------------------
     단계별 가이드 (카드형)
     ------------------------- */
  .step{
    display: flex;
    align-items: flex-start;
    margin: 14px 0;
    padding: 14px 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  
  .step-number{
    background: var(--brand);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    margin-right: 12px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(31,60,136,0.18);
  }
  
  .step-content h4{
    margin-bottom: 6px;
    color: #111827;
  }
  
  @media(max-width:480px){
    th, td {
        padding: 8px 7px;
      }
      .section {
        padding: 7px 10px;
    }
    .toc {
        padding: 10px;
    }
  }