/* =========================
   0) 변수
========================= */
:root{
    --brand-orange:#FF5D1A;
    --brand-orange-2:#ff7a1a;
    --muted:#7a7a7a;
    --tile-bg:#f7f9fb;
    --line:#e9ecef;
}

/* =========================
   1) 리셋/기본
========================= */
*{ box-sizing:border-box; }
body{
    margin:0; color:#222;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
h1,h2,h3{ margin:0; }

.wrap{ max-width:1400px; margin:0 auto; padding:0 20px; }
.subtitle{ color:var(--brand-orange); font-weight:800; margin-top:4px; }
.lead{ position:relative; z-index:1; margin-top:16px; line-height:1.7; font-size:20px; font-weight: 500; }
.muted{  font-size:16px; font-weight: 600;}

/* 공통 카드(기본형) */
.card{
    border:0;
    border-radius:14px;
    padding:18px;
    background:#fff;
}

/* =========================
   2) 그리드 헬퍼
========================= */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* 아이콘 기본 */
.icon{ width:64px; height:64px; object-fit:contain; }

/* 반응형 공통 */
@media (max-width:900px){
    .grid-3{ grid-template-columns:1fr; }
    .grid-4{ grid-template-columns:1fr 1fr; }
}

/* =========================
   3) HERO (좌측 버블 고정)
========================= */
.hero{ position:relative; margin:8px 0 24px; }
.hero{ padding: clamp(16px,3vw,28px) clamp(16px,4vw,40px) clamp(20px,5vw,48px) clamp(24px,6vw,100px); }
.hero > *{ position:relative; z-index:2; }
.hero h1{ z-index:3; font-size:40px; line-height:1.2; color:var(--brand-orange); font-weight:800; }
.hero .subtitle{ z-index:1; font-size:24px; }

.hero::before{
    content:""; position:absolute; top:0; bottom:0; left:0;
    width: clamp(260px,34vw,520px);
    background:url("/industry/img/guide/titleBubble-a7f507390389ebabe11980eaddf6dbe4.png") no-repeat left center / contain;
    transform: translateX(6%); /* ← 위치 미세조정: -값=더 왼쪽, +값=오른쪽 */
    z-index:1; pointer-events:none;
}

/* =========================
   4) 섹션 헤더(숫자 위줄, 제목 아래줄)
========================= */
#sec-04 .badge-step, #sec-05 .badge-step, #sec-06 .badge-step, #sec-07 .badge-step{ display:none !important; }

.sec-head.stack{
    display:block !important; /* 기존 flex 무력화 */
    margin:8px 0 14px;
    white-space:normal;
}
.sec-head.stack .sec-no{
    display:block; font-size:40px; font-weight:900; color:var(--brand-orange);
    line-height:.9; letter-spacing:-0.5px; margin:0;
}
.sec-head.stack h3{
    display:block; margin:6px 0 0; font-size:26px; font-weight:800; color:var(--brand-orange);
}
@media (max-width:768px){
    .sec-head.stack .sec-no{ font-size:32px; }
    .sec-head.stack h3{ font-size:16px; }
}

/* 섹션 간격 */
main .wrap > section,
main.wrap > section,
#codeGuide > section{ margin-top:10rem; }
body > main > section.hero{ margin-top:5rem; }

/* =========================
   5) 01~03 섹션: 왼쪽 타일 + 오른쪽 3카드
========================= */
.row-icons{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 왼쪽 1 + 카드 3 */
    gap:28px; align-items:stretch;
}
.left-head{
    background:var(--tile-bg); border-radius:18px; padding:24px;
    display:flex; flex-direction:column; min-height:140px;
    box-shadow:0 0 0 1px var(--line) inset;
    aspect-ratio:1/1;
}
.left-head .no{ font-weight:900; font-size:40px; color:var(--brand-orange); line-height:1; margin-bottom:8px; }
.left-head .title{ font-size:26px; font-weight:800; color:var(--brand-orange); word-break:keep-all; }

/* 오른쪽 카드(문단 크기/굵기만 커스텀) */
.row-icons .card{ text-align:center; align-items: center; }
.row-icons .card .icon{ width:110px; height:110px; }
.row-icons .card h4{ margin:10px 0 6px; font-size:22px; font-weight:800; }
.row-icons .card p{
    width:100%; margin:0; color:#444; font-size:18px; line-height:1.55; word-break:keep-all; font-weight:600;
}

@media (max-width:1024px){
    .row-icons{ grid-template-columns:1fr 1fr; }
    .left-head{ grid-column:1 / -1; } /* 상단 가로 전체 */
}
@media (max-width:640px){
    .row-icons{ grid-template-columns:1fr; }
}

/* =========================
   6) 비교표(가로 전치)
========================= */
.tbl{ width:100%; border-collapse:collapse; border-spacing:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.tbl th,.tbl td{ border-top:1px solid var(--line); border-right:1px solid var(--line); padding:12px 14px; font-size:16px; }
.tbl th:last-child,.tbl td:last-child{ border-right:none; }
.tbl thead th{ background:#fff7f2; font-weight:800; text-align:left; }

.tbl-compare{ border:1px solid #e9ecef; border-radius:16px; overflow:hidden; }
.tbl-compare th,.tbl-compare td{ padding:14px 16px; border-top:1px solid #e9ecef; border-right:1px solid #e9ecef; text-align:center; }
.tbl-compare thead th{ background:#f3f4f6; font-weight:800; text-align:center; white-space:nowrap; }
.tbl-compare tr th:last-child,.tbl-compare tr td:last-child{ border-right:none; }
.tbl-compare tbody .row-head{ background:#fff7f2; color:var(--brand-orange); font-weight:800; text-align:left; white-space:nowrap; }

/* =========================
   7) 05. 체크카드 (이미지+오렌지 라인)
========================= */
#sec-05 .check-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; margin-top:18px; }
.check-card{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.check-card .thumb{ width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border-bottom:6px solid var(--brand-orange); }
.check-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.check-card .title{ margin-top:16px; margin-bottom:8px; color:var(--brand-orange); font-weight:800; font-size:20px; letter-spacing:-.2px; }
.check-card .desc{ margin:0 auto 12px; font-size:18px; line-height:1.55; color:#222; word-break:keep-all; }
.check-card .divider{ width:100%; height:2px; background-color:#FF5D1A; background-image:none; margin-top:6px; }

@media (max-width:1400px){ #sec-05 .check-cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){  #sec-05 .check-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  #sec-05 .check-cards{ grid-template-columns:1fr; } }

/* =========================
   8) 06. 플로우 카드(정사각 + 중앙정렬 + 그림자)
========================= */
.flow{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); overflow:visible; }
.flow .card{
    width:70%; aspect-ratio:1/1; padding:26px; margin:0 auto;
    display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:12px;
    background:#fff; border:1px solid #EBEEF2;
    box-shadow: 0 14px 36px rgba(17,24,39,.10), 0 3px 10px rgba(17,24,39,.06);
    border-radius:28px;
}
.flow .card .icon{ width:110px; height:auto; display:block; }
.flow h5{ margin:12px 0 0; font-size:14px; }

@media (max-width:900px){ .flow{ grid-template-columns:1fr; } }

/* =========================
   9) 07. How-to + 점선 구분자
========================= */
.howto{ display:flex; align-items:flex-start; gap:18px; }
.howto .card{ position:relative; text-align:center; padding:18px; max-width:66%; align-items: center}
.howto .card .icon{ width:110px; height:auto; display:block; }
.howto p{ margin:6px 0 0; font-size:16px; color:#444; width: 60%; font-weight: 600;}

/* 카드 사이 점선 (반응형이면 이미지/그리드 방식으로 교체 가능) */
.howto .card:not(:last-child)::after{
    content:""; display:block; position:absolute; top:40%; left:71%; transform:translateY(-50%);
    width:208px; max-width:66%; height:10px;
    background: radial-gradient(circle,#cfd5db 3px,transparent 3px) center / 18px 8px repeat-x;
    z-index:1;
}

/* 기타 */
.pill{ display:inline-block; padding:6px 12px; border:1px solid #ffd7bf; background:#fff3e9; color:var(--brand-orange); border-radius:999px; font-weight:800; font-size:12px; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:38px 0; }
.note{ font-size:13px; color:#555; }

/* 여백/패딩 미세조정 */
#sec-04, #sec-05, #sec-06, #sec-07{ padding-left:24px; }
#sec-01 .card, #sec-02 .card, #sec-03 .card, #sec-07 .card{ border:0; }