/* ==========================================================================
   FINSCAN24 V1 — 대문(랜딩) 스타일
   기업행정24행정사사무소 · 무료진단 신청 진입 화면
   ========================================================================== */

:root{
  --navy:#17365d; --navy2:#0f2746; --navy3:#102b57; --gold:#b08d3c; --gold2:#d4ae59;
  --bg:#f3f6fa; --line:#dbe2ea; --text:#172033; --muted:#687386;
  --good:#1f7a4d; --shadow:0 10px 34px rgba(15,39,70,.10);
}
*{box-sizing:border-box}
/* ★ sticky 내비게이션 높이만큼 앵커 이동 여백을 준다.
   없으면 #services 등으로 이동했을 때 제목이 내비게이션 뒤로 숨는다. */
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;font-family:"Noto Sans KR","Malgun Gothic",Arial,sans-serif;
  background:#fff;color:var(--text);-webkit-text-size-adjust:100%;
  /* ★★★ 한국어 어절(단어) 보존 — 사이트 **전역** 적용 (2026-10-24 재수정) ★★★
     지난 라운드에는 .hero-lead / .panel-foot / .steps li p **3곳에만** 넣었다.
     그래서 버튼·제목·목록·안내문에서는 여전히 「가능성→가/능성」,
     「환급→환/급」, 「공지사항→공지사/항」, 「전액→전/액」, 「외국인→외국/인」,
     「바로가기→바/로가기」 처럼 **음절 중간에서 끊겼다**(사용자 캡처 8장).
     word-break 는 **상속되는 속성**이므로 body 에 한 번만 지정하면
     모든 자손에 적용된다. 개별 규칙을 다시 흩어 놓지 말 것.
     overflow-wrap:break-word 는 안전장치다 — 컨테이너보다 긴 토큰
     (긴 영문·URL 등)이 있을 때만 그 토큰을 쪼개 넘침을 막는다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{line-height:1.28;letter-spacing:-.4px}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* ---------- 상단 유틸바 ---------- */
.utilbar{background:var(--navy2);color:#c9d6e6;font-size:12.5px}
/* ★ height:44px 고정 → min-height 로 변경.
   고정 높이면 폭이 좁아져 글자가 2줄로 접힐 때 **아래가 잘린다**
   (320px 실측: 필요 48px / 상자 44px → 4px 잘림).
   ★ 링크에 white-space:nowrap + flex:none.
   없으면 344~414px 에서 「회원가입」이 두 줄로 쪼개졌다(높이 33px). */
.utilbar-in{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.util-brand{color:#fff;font-weight:800;font-size:13px;letter-spacing:.3px;
  white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.util-brand i{color:var(--gold2);margin-right:6px}
.util-links{display:flex;align-items:center;gap:18px;flex:none}
.util-links a{display:inline-flex;align-items:center;gap:6px;opacity:.88;transition:.18s;
  white-space:nowrap;flex:none}
.util-links a:hover{opacity:1;color:#fff}
.util-login{margin-left:6px}
.util-join{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;opacity:1!important;font-weight:700;flex:none}
.util-join:hover{background:rgba(255,255,255,.24)}
/* ★ 2026-10-30 신규 (대표님 지시) — 「로그인만 있고 로그아웃이 없어」
   로그인 링크와 **같은 모양·같은 줄**에 나란히 둔다.
   button 으로 만들되 생김새는 링크와 동일하게 맞춘다(누르는 기능만 다를 뿐). */
.util-logout{
  display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font:inherit;font-size:inherit;font-weight:700;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:6px 14px;color:#fff;cursor:pointer;transition:.18s;
}
.util-logout:hover{background:rgba(255,255,255,.26)}
/* 로그인 상태일 때 로그인 링크는 살짝 죽인다(로그아웃이 주 동작이므로) */
.util-login-on{opacity:.62!important}

/* ★★★ 2026-10-30 정정 (대표님 재지시) ★★★
   「로그인 옆에 로그아웃이 같이 있어야지, 회원이 홈으로 와서 로그아웃 할 수 있으니.
     회원계정·관리자계정에도 있지만 **홈피에도** 있게 해달라고 한거야」
   → 버튼은 **항상 보인다. 숨기지 않는다.** (index.html 에 hidden 속성 없음)
     회원이 홈페이지에 돌아와서 직접 로그아웃할 수 있어야 하기 때문.
   → 로그인 상태일 때는 금색 테두리로 「지금 눌러도 된다」는 것만 살짝 알린다. */
.util-logout.is-on{
  background:rgba(212,174,89,.22);
  border-color:rgba(212,174,89,.75);
  color:#fff;
}

/* ── 하단 안내 토스트 (window.alert 대체) ──
   ★ 경고창(alert)은 화면 전체를 막고 브라우저마다 생김새가 달라
     「사이트가 고장난 것 같다」는 인상을 준다. 조용한 안내로 대신한다. */
.util-toast{
  position:fixed;left:50%;bottom:26px;z-index:9999;
  transform:translate(-50%,14px);
  max-width:min(92vw,460px);
  background:#0f2746;color:#eaf1f9;
  border:1px solid rgba(212,174,89,.6);border-left:3px solid var(--gold2);
  border-radius:9px;padding:12px 18px;
  font-size:12.5px;font-weight:700;line-height:1.55;
  box-shadow:0 14px 34px rgba(6,18,36,.4);
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;
  word-break:keep-all;overflow-wrap:break-word;
}
.util-toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){
  .util-toast{left:12px;right:12px;bottom:16px;transform:translate(0,14px);max-width:none;text-align:center}
  .util-toast.on{transform:translate(0,0)}
}

/* ---------- 특허 출원 띠 (내비게이션 바로 아래 · 첫 화면 최상단) ----------
   ★ 2026-10-30 2차 수정 (대표님 「특허 어디있어?」)
     처음엔 「무료진단」 버튼 아래 카드(.patent-card)였는데,
     실측 PC 1280×800 에서 top=942px / 폰 390×844 에서 top=1068px →
     **첫 화면(스크롤 0) 밖**이라 아무도 못 봤다.
     → 스크롤 없이 무조건 보이는 내비게이션 직하단 띠로 옮긴다.
   ★ 조용하게 : 네이비 배경 + 금색 포인트, 높이 약 38px(폰 2줄 허용).
   ★ 위치는 sticky 내비게이션(z-index:60)보다 아래 → 가려지지 않는다. */
.patent-strip{
  background:linear-gradient(90deg,#0f2746 0%,#17365d 55%,#1d4472 100%);
  border-bottom:1px solid rgba(212,174,89,.42);
  color:#dfe8f3;font-size:12.5px;
}
.patent-strip-in{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  min-height:38px;padding-top:7px;padding-bottom:7px;
}
.patent-strip .ps-badge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:rgba(212,174,89,.16);border:1px solid rgba(212,174,89,.5);
  color:#f0ddaa;border-radius:999px;padding:3px 10px;
  font-size:11.5px;font-weight:900;letter-spacing:.2px;white-space:nowrap;
}
.patent-strip .ps-badge i{font-size:11px;color:var(--gold2)}
.patent-strip .ps-no{
  flex:none;font-weight:900;color:#fff;font-size:12.5px;white-space:nowrap;
}
.patent-strip .ps-t{
  flex:1 1 260px;min-width:0;color:#b9cade;font-size:12px;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;
}
.patent-strip .ps-d{
  flex:none;color:#8fa4bd;font-size:11.5px;font-weight:700;white-space:nowrap;
}
@media (max-width:700px){
  .patent-strip-in{gap:7px;padding-top:8px;padding-bottom:8px}
  .patent-strip .ps-t{flex:1 1 100%;font-size:11px;line-height:1.55}
  .patent-strip .ps-d{margin-left:auto}
}

/* ---------- 내비게이션 ---------- */
.navbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:0 2px 12px rgba(15,39,70,.05)}
.navbar-in{display:flex;align-items:center;gap:26px;height:80px}
.logo{display:flex;flex-direction:column;flex:0 1 auto;min-width:0;overflow:hidden}
/* ★ padding 1px: `.logo` 가 overflow:hidden 이므로 글자 잉크 상·하단이
   상자 경계에 딱 붙으면(실측 0.6px 초과) 서브픽셀 단위로 잘릴 수 있다. */
.logo-mark{font-size:23px;font-weight:900;color:var(--navy);letter-spacing:-.5px;line-height:1.32;white-space:nowrap;padding:1px 0}
.logo-mark span{color:var(--gold)}
/* ★ 로고 부제는 줄어들 수 있게 한다.
   예전에는 .logo{flex:none} + nowrap 이라 좁은 화면에서 줄지 못하고
   메뉴를 밀어내 **가로 스크롤(390px에서 120px)** 이 생겼다. */
.logo-tag{font-size:10.5px;color:var(--muted);letter-spacing:.4px;margin-top:4px;font-weight:600;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-tag em{font-style:normal;color:#93a1b3}
/* ★ mainnav 도 min-width:0 이어야 flex:1 이 실제로 줄어든다.
   기본값(min-width:auto)은 min-content 아래로 줄어들지 않아 넘침이 발생한다.
   메뉴 폭 736px(간격22/14.5px)은 데스크톱 여유분 678px를 넘으므로 간격·글자를 조금 줄인다. */
.mainnav{display:flex;align-items:center;gap:14px;margin-left:8px;flex:1 1 0%;min-width:0;font-size:13.5px;font-weight:700;color:#344054}
.mainnav a{position:relative;padding:6px 0;transition:.18s;white-space:nowrap}
.mainnav a:hover{color:var(--navy)}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .22s}
.mainnav a:hover::after{right:0}
.mainnav .home-ico{color:var(--navy);font-size:16px}
.mainnav .home-ico::after{display:none}
.nav-right{display:flex;align-items:center;gap:12px;flex:none}
.ico-btn{border:0;background:#f2f5f9;color:var(--navy);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:15px;transition:.18s}
.ico-btn:hover{background:#e5ecf5}
.btn-gold{
  background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;border:0;border-radius:8px;
  padding:12px 20px;font-weight:800;font-size:14px;font-family:inherit;white-space:nowrap;
  box-shadow:0 6px 16px rgba(176,141,60,.3);transition:.18s;display:inline-block;
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(176,141,60,.4)}
.menu-toggle{display:none;border:0;background:#f2f5f9;color:var(--navy);width:42px;height:42px;border-radius:8px;font-size:17px;cursor:pointer;flex:none}

/* ★ 모바일 전용 짧은 버튼 라벨 — 좁은 화면에서 「회원가입 후 무료진단」(약 150px)이
   로고를 덮고 가로 넘침을 만들었다(320px 실측 13px 넘침 · 로고 28px 삐져나옴).
   좁은 폭에서는 「무료진단」만 보여 폭을 약 55px 줄인다. */
.btn-gold .bg-full{display:inline}
.btn-gold .bg-short{display:none}

/* ---------- 히어로 ---------- */
.hero{background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%);padding:44px 0 54px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:start}

/* 히어로 사진 → 3D 소개 영상 (1920x680 · 2.82:1 · 무음 루프)
   영상 비율이 2.82:1 이고 칼럼 폭이 649px 이라 높이 230px 가 정확히 일치한다
   (649 / 2.8235 = 229.9px) → 원래 레이아웃 높이를 그대로 유지한다.
   · 캡션·버튼·다른 섹션 위치가 변하지 않는다
   · 세로 잘림 0% · 가로 잘림 0.1%

   ★ 2026-11-04 (대표님 「가로하고 배포까지 해」 지시) — 로딩 중 사진을 **뺐다**
     문제 : 영상 자리 뒤에 hero-city.jpg(밝은 파랑 하늘 + 유리빌딩, 526KB)를
            깔아 두었더니, 영상이 준비되기 전에 **밝은 사진이 먼저 튀어나왔다.**
            영상은 어두운 네이비 + 금색이라, 밝은 파랑 → 어두운 남색으로 급격히 바뀌어
            「다른 그림이 나왔다가 영상으로 바뀐다」고 보였다.
     고침 : 평소에는 **영상과 같은 톤의 어두운 네이비(#050b14)** 만 보여준다.
            사진은 **영상이 실패했을 때만**(.no-video) 나온다.
     효과 : 톤이 이어져 「그냥 영상이 시작되는 것」처럼 보인다.
            + 사진 526KB 를 받지 않으므로 그만큼 빨라진다.
     ※ 이전 README 에는 「네이비가 보인다」고 적혀 있었으나 실제 코드는 사진이었다.
       문서와 코드가 달랐던 것을 이번에 코드 쪽으로 맞췄다. */
.hero-photo{
  position:relative;height:230px;border-radius:14px;overflow:hidden;margin-bottom:24px;
  background-color:#050b14;
  box-shadow:var(--shadow);
}
/* 영상이 실패했을 때만 사진을 깐다 (빈 검은 박스가 되지 않게) */
.hero-photo.no-video{
  background-image:url("../images/hero-city.jpg");
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
/* 예전에는 이 자리에 진한 네이비 그라데이션(불투명도 최대 .9)이 덮여 있었다.
   영상이 이미 짙은 네이비·금색 톤이라 그대로 두면 영상이 보이지 않는다.
   → 아주 옅은 비네트만 남긴다. */
.hero-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,rgba(8,20,38,.28) 0%,rgba(8,20,38,0) 42%,rgba(8,20,38,.30) 100%);
}
.photo-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 44px rgba(4,12,26,.5)}

/* ---------- 히어로 영상 ---------- */
.hero-video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;
}
/* ★ 2026-11-04 (「가」 지시) — 이 규칙은 이제 안전장치다.
   평소에는 사진을 깔지 않으므로 지울 배경그림이 없다. 그래도 남겨 두는 이유:
   영상이 실패했다가(.no-video) 나중에 정상 재생되면(canplay)
   사진이 영상 위에 남지 않도록 확실히 지운다. */
.hero-photo.is-ready{background-image:none}

/* 일시정지/재생 버튼 — 영상 위 왼쪽 아래, 마우스 올리면 또렷해진다 */
.hero-vbtn{
  position:absolute;right:10px;bottom:10px;z-index:4;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,38,.55);color:#e9d7a8;font-size:12px;
  border:1px solid rgba(232,199,116,.38);
  opacity:.72;transition:opacity .18s,background .18s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.hero-vbtn:hover,.hero-vbtn:focus-visible{opacity:1;background:rgba(8,20,38,.82);outline:2px solid rgba(232,199,116,.55);outline-offset:2px}

/* ★ 2026-11-04 (대표님 「B로 진행」 지시) — 소리 켜기 버튼
   일시정지 버튼과 겹치지 않도록 **그 왼쪽**에 나란히 둔다.
   일시정지 right:10px · 폭 34px · 간격 6px  →  소리 right:50px */
.hero-vbtn-sound{right:50px}

/* 소리가 켜져 있을 때 — 금색으로 채워 「지금 소리가 나고 있다」를 한눈에 알린다.
   (검은 버튼과 확실히 구분되어야 방문자가 소리가 켜진 걸 안다) */
.hero-vbtn-sound.is-on{
  background:rgba(232,199,116,.94);color:#08233f;
  border-color:rgba(255,236,190,.98);opacity:1;
}
.hero-vbtn-sound.is-on:hover,
.hero-vbtn-sound.is-on:focus-visible{
  background:rgba(255,224,150,1);color:#08233f;
  outline:2px solid rgba(255,255,255,.7);outline-offset:2px;
}

/* 모션 최소화를 요청한 사용자: 영상은 정지 이미지처럼 두고 버튼은 숨긴다 */
@media (prefers-reduced-motion:reduce){
  .hero-vbtn{display:none}
}

.kicker{
  display:inline-flex;align-items:center;gap:8px;background:#eef3f9;color:var(--navy);
  border:1px solid #d8e3ef;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:800;letter-spacing:.2px;
}
.kicker i{color:var(--gold)}
.hero-copy h1{font-size:38px;margin:18px 0 16px;color:var(--navy3);font-weight:900}
.hero-copy h1 b{color:var(--navy)}
.hero-copy h1 .hl{color:var(--gold)}
.hero-lead{font-size:15.5px;line-height:1.85;color:#4b5a6e;margin:0 0 26px;word-break:keep-all;overflow-wrap:break-word}
/* ★ <br class="pc"> 는 데스크톱에서만 줄을 바꿔야 한다.
   규칙이 없으면 모바일에서도 강제 개행되어 문단이 어색하게 끊겼다. */
@media(max-width:700px){ br.pc{display:none} }

.stat-row{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0;margin:0 0 28px}
.stat-row li{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:9px;padding:13px 10px;text-align:center}
.stat-row li:nth-child(2){border-top-color:var(--gold)}
.stat-row b{display:block;font-size:19px;font-weight:900;color:var(--navy)}
.stat-row b span{color:var(--gold);font-size:14px}
.stat-row em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45;font-weight:600}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-hero{
  display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#1d4472,var(--navy2));
  color:#fff;padding:16px 28px;border-radius:9px;font-weight:900;font-size:16px;
  box-shadow:0 12px 28px rgba(15,39,70,.32);transition:.2s;
}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,39,70,.4)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #cfd8e3;color:var(--navy);
  padding:15px 22px;border-radius:9px;font-weight:800;font-size:14.5px;transition:.18s;
}
.btn-ghost:hover{background:#f4f8fc;border-color:#9db8dc}
.btn-ghost-dark{width:100%;justify-content:center;background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-ghost-dark:hover{background:#1d4472;border-color:#1d4472;color:#fff}
.hero-note{font-size:12.5px;color:var(--muted);margin:16px 0 0;
  display:flex;align-items:flex-start;gap:7px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word}
.hero-note i{color:var(--good);flex:none;margin-top:4px}
/* ★ display:flex 는 **자식 하나하나를 flex 항목**으로 만든다.
   <i>·<b>·나머지 텍스트가 각각 항목이 되어
   「회원가입 → … 무료진단」 | 「순서로 진행됩니다. 회원 전/용 …」 처럼
   **두 개의 좁은 열로 갈라졌다**(사용자 스크린샷 3번).
   → 문장 전체를 span 하나로 묶어 한 덩어리로 흐르게 한다. */
.hero-note > span{flex:1 1 auto;min-width:0}
.hero-note b{color:var(--navy);font-weight:800}

/* ---------- 히어로 우측 진단 패널 ---------- */
.hero-panel{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:0 18px 46px rgba(15,39,70,.13);border-top:5px solid var(--navy);
}
.panel-head h2{font-size:20px;margin:0 0 10px;color:var(--navy3);font-weight:900;line-height:1.4}
.panel-head p{margin:0;font-size:13px;color:var(--muted);line-height:1.65}
.panel-head{padding-bottom:18px;border-bottom:1px dashed var(--line);margin-bottom:18px}

.panel-score{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding-bottom:16px;border-bottom:1px dashed var(--line);margin-bottom:16px}
.gauge{position:relative;width:150px}
.gauge svg{width:100%;height:auto;display:block}
.g-track{fill:none;stroke:#e6ecf3;stroke-width:15;stroke-linecap:round}
.g-fill{fill:none;stroke:url(#g);stroke:var(--navy);stroke-width:15;stroke-linecap:round;stroke-dasharray:258;stroke-dashoffset:57}
.gauge-val{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.gauge-val b{font-size:30px;font-weight:900;color:var(--navy);line-height:1}
.gauge-val span{font-size:12px;color:var(--muted);font-weight:700;margin-left:2px}
.chip-grade{display:inline-flex;align-items:center;gap:7px;background:#fff8e8;border:1px solid #ead9a6;color:#6c4c05;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800;margin-bottom:10px}
.chip-grade i{color:var(--gold)}
.score-legend{list-style:none;margin:0;padding:0;font-size:12.5px;color:#4b5a6e;line-height:2}
.score-legend b{color:var(--navy)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.d-navy{background:var(--navy)}.d-good{background:var(--good)}.d-gold{background:var(--gold)}

.panel-block{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.panel-block h3{font-size:13px;margin:0 0 12px;color:var(--navy);font-weight:800;display:flex;justify-content:space-between;align-items:baseline}
.panel-block h3 span{font-size:10.5px;color:#98a2b3;font-weight:700}
.catbars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.catbars li{display:grid;grid-template-columns:56px 1fr 30px;gap:9px;align-items:center;font-size:12px}
.cb-name{color:#4b5a6e;font-weight:700}
.cb-track{height:9px;background:#eef1f5;border-radius:99px;overflow:hidden}
.cb-track i{display:block;height:100%;background:linear-gradient(90deg,var(--navy),#3a6fa8);border-radius:99px}
.catbars b{color:var(--navy);font-size:12.5px;text-align:right}

.mini-chart{display:flex;gap:14px;align-items:flex-end;height:96px;padding:0 4px}
.mc-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.mc-col b{font-size:11.5px;color:var(--navy);font-weight:800;margin-bottom:5px}
.mc-bar{width:58%;background:linear-gradient(180deg,#315f94,var(--navy));border-radius:5px 5px 0 0;min-height:6px;display:block}
.mc-bar.mc-hi{background:linear-gradient(180deg,var(--gold2),var(--gold))}
.mc-col em{font-style:normal;font-size:10.5px;color:var(--muted);margin-top:6px;font-weight:700}

.panel-cta{
  display:flex;align-items:center;justify-content:center;gap:11px;margin-top:4px;
  background:linear-gradient(135deg,#1d4472,var(--navy2));color:#fff;padding:16px 20px;border-radius:10px;
  font-weight:900;font-size:15.5px;box-shadow:0 12px 26px rgba(15,39,70,.3);
  border:2px dashed #e2c073;transition:.2s;
}
.panel-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,39,70,.4)}
.panel-cta i{color:var(--gold2)}
/* ★ panel-foot: 「위 수치는 화면 예시이며, 입력한 실제 재무자료로 / 다시 계산됩니다.」
   word-break 기본값이면 「다」/「시」처럼 단어 중간에서 끊긴다(사용자 스크린샷 2번).
   keep-all + 아래 여백을 주어 카드 하단에 붙지 않게 한다. */
.panel-foot{
  font-size:11.5px;color:#98a2b3;margin:13px 0 0;text-align:center;line-height:1.65;
  word-break:keep-all;overflow-wrap:break-word;
  display:flex;align-items:flex-start;justify-content:center;gap:6px;
}
.panel-foot i{flex:none;margin-top:3px;color:#b6c0cd}
.panel-foot > span{flex:0 1 auto;min-width:0}

/* ---------- 화면 흐름 안내 (업로드 구성 이미지) ---------- */
.flowmap{padding:70px 0;background:#fff;border-top:1px solid var(--line)}
.flowmap-figure{
  background:#0f2746;border-radius:16px;padding:14px;overflow:hidden;
  box-shadow:0 20px 48px rgba(15,39,70,.26);
}
.flowmap-figure img{
  width:100%;height:auto;border-radius:8px;display:block;
  /* 로드 전에도 영역이 확보되어 레이아웃이 흔들리지 않도록 배경을 지정 */
  background:#fff;aspect-ratio:1400 / 1120;
}
.figure-cap{
  margin:12px 4px 2px;font-size:12.5px;line-height:1.7;color:#c9d9ec;
  display:flex;gap:8px;align-items:flex-start;
}
.figure-cap i{color:var(--gold2);margin-top:3px;flex:none}
.flowmap-steps{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
}
.flowmap-steps li{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.flowmap-steps li:not(.fm-arrow){display:flex;gap:16px;align-items:flex-start}
.flowmap-steps .fm-arrow{background:none;border:0;padding:0;color:var(--gold);font-size:26px;text-align:center}
.fm-n{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:18px;font-weight:900;
}
.fm-n-gold{background:var(--gold)}
.flowmap-steps h3{margin:0 0 9px;font-size:16.5px;color:var(--navy3);font-weight:800}
.flowmap-steps p{margin:0 0 13px;font-size:13px;color:var(--muted);line-height:1.7}
.fm-link{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--navy);
  border:1px solid #cfd8e3;border-radius:8px;padding:9px 14px;transition:.18s;
}
.fm-link:hover{background:#eef3f9;border-color:#9db8dc}
.fm-link-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;border-color:transparent}
.fm-link-gold:hover{background:linear-gradient(135deg,#e0bb69,#9c7c31);color:#fff}

/* ---------- 공통 섹션 헤더 ---------- */
.sec-head{text-align:center;max-width:820px;margin:0 auto 40px}
.sec-head h2{font-size:30px;margin:16px 0 12px;color:var(--navy3);font-weight:900}
.sec-head p{font-size:14.5px;color:var(--muted);line-height:1.8;margin:0}

/* ---------- 서비스 타일 ---------- */
.services{padding:70px 0;background:#fff}
.tile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tile{
  position:relative;border-radius:14px;padding:26px 22px;color:#fff;min-height:230px;
  display:flex;flex-direction:column;transition:.22s;overflow:hidden;
}
.tile::after{
  content:"";position:absolute;right:-40px;bottom:-46px;width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.09);transition:.3s;
}
.tile:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,39,70,.24)}
.tile:hover::after{transform:scale(1.25)}
.t1{background:linear-gradient(140deg,#1d4472,var(--navy2))}
.t2{background:linear-gradient(140deg,#2a5580,#1b3d63)}
.t3{background:linear-gradient(140deg,#1c6b73,#124a52)}
.t4{background:linear-gradient(140deg,#22694a,#14442f)}
.t5{background:linear-gradient(140deg,#a9762c,#7a5219)}
.tile-ico{
  width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;
  border:1px solid rgba(255,255,255,.24);position:relative;z-index:2;
}
.tile h3{margin:0 0 11px;font-size:17.5px;font-weight:900;position:relative;z-index:2}
.tile p{margin:0;font-size:12.5px;line-height:1.7;opacity:.92;position:relative;z-index:2;flex:1}
.tile-go{
  position:relative;z-index:2;font-size:12.5px;font-weight:800;margin-top:16px;
  display:inline-flex;align-items:center;gap:7px;opacity:.95;
}
.tile:hover .tile-go i{transform:translateX(4px)}
.tile-go i{transition:.22s}

/* ---------- 행정사 업무 영역 ---------- */
.admin{padding:70px 0;background:linear-gradient(180deg,#f6f9fc,#fff)}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.acard{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:12px;
  padding:24px 22px;display:flex;flex-direction:column;transition:.22s;
}
.acard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-top-color:var(--gold)}
.acard-ico{
  width:48px;height:48px;border-radius:12px;background:#eef3f9;color:var(--navy);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:14px;transition:.22s;
}
.acard:hover .acard-ico{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;border-color:transparent}
.acard h3{margin:0 0 12px;font-size:16.5px;font-weight:900;color:var(--navy3)}
.acard ul{list-style:none;margin:0 0 16px;padding:0;flex:1}
.acard li{position:relative;padding:5px 0 5px 15px;font-size:12.5px;color:#42506a;line-height:1.6}
.acard li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.acard li em{font-style:normal;color:var(--muted);font-size:11.5px}
.acard-go{font-size:12.5px;font-weight:800;color:var(--navy);display:inline-flex;align-items:center;gap:7px;transition:.18s}
.acard-go:hover{color:var(--gold)}
.acard-go i{transition:.22s}
.acard:hover .acard-go i{transform:translateX(4px)}
.admin-note{margin:26px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.admin-note i{color:var(--navy);margin-right:5px}

/* ---------- 진행 절차 ---------- */
.flow{padding:70px 0;background:linear-gradient(180deg,#f6f9fc,#eef3f9)}
/* ★ repeat(7,1fr) 이면 8개 항목 중 8번째가 둘째 줄에 혼자 남는다.
   4열 × 2줄로 바꿔 8단계가 4+4 로 정확히 나뉘게 한다. */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.steps li{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:12px;
  padding:22px 16px;position:relative;transition:.2s;
}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-top-color:var(--gold)}
/* ★★★ 근본 원인 수정 (2026-10-24) ★★★
   이전에는 이 자리에 **자손(descendant) 선택자**를 썼기 때문에
   <p> 안의 <b> 까지 전부 잡혔다.
     「KSIC 11차 업종코드」·「표준재무제표 파일 자동입력」 같은 본문 굵은 글자가
     32×32 남색 원이 되어 회색 본문 위에 겹쳐 보였다(사용자 스크린샷의 검은 덩어리).
     실측: <p> 밖으로 세로 +74.3px 초과, 글자 겹침 16.2px.
   수정: 숫자 배지만 직접 자식 선택자(>)로 잡고,
        <p> 안의 <b> 는 인라인 굵은 글자로 되돌린다. */
.steps li > b{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:14px;font-weight:900;margin-bottom:13px;
}
.steps li p b{
  display:inline;width:auto;height:auto;border-radius:0;background:none;
  color:var(--navy);font-size:inherit;font-weight:800;margin:0;
}
.steps li h3{margin:0 0 9px;font-size:14.5px;color:var(--navy);font-weight:800}
/* ★ 한국어는 단어 중간에서 끊기면 「기/업」처럼 읽기 나빠진다.
   keep-all 로 어절 단위 줄바꿈을 강제한다. */
.steps li p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.65;word-break:keep-all;overflow-wrap:break-word}
.flow-cta{
  margin-top:40px;background:linear-gradient(135deg,var(--navy3),#1d5b93);border-radius:16px;
  padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  box-shadow:0 18px 42px rgba(15,39,70,.26);
}
.flow-cta h3{margin:0 0 9px;font-size:21px;color:#fff;font-weight:900}
.flow-cta p{margin:0;font-size:13.5px;color:#d3e2f3;line-height:1.7}
.flow-cta .btn-hero{background:#fff;color:var(--navy);box-shadow:0 10px 26px rgba(0,0,0,.22);flex:none}
.flow-cta .btn-hero:hover{background:#f4f8fc}

/* ---------- 신뢰 카드 ---------- */
.trust{padding:66px 0;background:#fff}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trust-card{background:#fafcfe;border:1px solid var(--line);border-radius:14px;padding:28px 24px;transition:.2s}
.trust-card:hover{background:#fff;box-shadow:var(--shadow);transform:translateY(-3px)}
.tc-ico{
  width:50px;height:50px;border-radius:12px;background:#eef3f9;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;
}
.trust-card h3{margin:0 0 11px;font-size:16.5px;color:var(--navy3);font-weight:800}
.trust-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.75}

/* ---------- 공지/자료/고객센터 ---------- */
.info{padding:66px 0;background:#f6f9fc;border-top:1px solid var(--line)}
.info-grid{display:grid;grid-template-columns:1.15fr 1.15fr 1fr;gap:22px}
.info-col{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.info-col h3{margin:0 0 16px;font-size:15.5px;color:var(--navy);font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:10px}
.info-col h3 i{color:var(--gold);margin-right:8px}
.info-col h3 a{font-size:11.5px;color:var(--muted);font-weight:700;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.info-col h3 a:hover{background:#f2f6fb;color:var(--navy)}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{border-bottom:1px solid #eef2f7}
.info-list li:last-child{border-bottom:0}
.info-list a{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:13px;color:#3c4a5c;transition:.16s}
.info-list a:hover{color:var(--navy);font-weight:700}
.info-list em{font-style:normal;font-size:11.5px;color:#98a2b3;flex:none;font-weight:600}
.contact-list{list-style:none;margin:0 0 18px;padding:0}
.contact-list li{display:flex;gap:12px;padding:10px 0;font-size:13px;border-bottom:1px solid #eef2f7}
.contact-list li:last-child{border-bottom:0}
.contact-list b{flex:none;width:66px;color:var(--navy);font-weight:800}
.contact-list span{color:#4b5a6e;line-height:1.6}
.info-list .must{display:inline-block;background:#fff4df;color:#a56a00;border-radius:999px;
  padding:1px 7px;font-size:10px;font-weight:900;margin-right:4px;vertical-align:1px}
.info-list .empty a{color:var(--muted)}

/* ---------- 상단 배너 (마감임박 자동 / 관리자 켜기·끄기) ---------- */
.site-banner{font-size:13px;font-weight:700}
.site-banner.tone-gold{background:linear-gradient(90deg,#fdf3dd,#fbebc9);color:#6c4c05;border-bottom:1px solid #ead9a6}
.site-banner.tone-red{background:linear-gradient(90deg,#fdeceb,#fbdcd9);color:#96201a;border-bottom:1px solid #f0c4c0}
.site-banner.tone-navy{background:linear-gradient(90deg,var(--navy),#1d4472);color:#fff;border-bottom:1px solid var(--navy)}
.sb-in{display:flex;align-items:center;gap:10px;min-height:46px;flex-wrap:wrap}
.sb-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  animation:sbpulse 1.6s ease-in-out infinite}
@keyframes sbpulse{0%,100%{opacity:.35}50%{opacity:1}}
.sb-msg{flex:1;min-width:180px;line-height:1.5;padding:6px 0}
.sb-go{flex:none;background:rgba(0,0,0,.08);border-radius:999px;padding:6px 14px;
  font-size:12px;font-weight:900;transition:.18s}
.site-banner.tone-navy .sb-go{background:rgba(255,255,255,.16);color:#fff}
.sb-go:hover{background:rgba(0,0,0,.16)}
.sb-x{flex:none;border:0;background:transparent;color:inherit;opacity:.55;cursor:pointer;
  font-size:14px;padding:6px 8px;font:inherit;line-height:1}
.sb-x:hover{opacity:1}

/* ---------- 대문 교육 안내 ---------- */
.edu-hall{padding:70px 0;background:linear-gradient(180deg,#fff,#f6f9fc)}
.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ehall{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:12px;
  padding:22px 20px;display:flex;flex-direction:column;transition:.22s}
.ehall:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-top-color:var(--gold)}
.ehall-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.etag{display:inline-block;border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:900}
.etag.ok{background:#e8f6ee;color:#1d7a45}
.etag.off{background:#eef1f5;color:#667085}
.edday{background:#fff4df;color:#a56a00;border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:900}
.esess{font-size:11px;color:var(--muted);font-weight:700}
.ehall h3{margin:0 0 12px;font-size:16.5px;font-weight:900;color:var(--navy3);line-height:1.42}
.ehall-meta{list-style:none;margin:0 0 14px;padding:0;flex:1}
.ehall-meta li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:#42506a;
  line-height:1.65;padding:3px 0}
.ehall-meta i{font-style:normal;flex:none;width:15px;text-align:center;font-size:11.5px}
.ehall-meta .free{color:var(--good)}
.ehall-meta .small{color:var(--muted);font-size:11px}
.ehall-benefit{background:#f4f9fe;border-left:3px solid var(--gold);border-radius:6px;
  padding:9px 11px;font-size:11.5px;line-height:1.65;color:#28405c;margin:0 0 14px}
.ehall-act{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.ebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid #cfd8e3;background:#fff;color:var(--navy);border-radius:7px;
  padding:10px 13px;font-size:12px;font-weight:800;transition:.18s;flex:1;min-width:0}
.ebtn:hover{background:#f4f8fc;border-color:#9db8dc}
.ebtn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.ebtn.primary:hover{background:#1d4472;border-color:#1d4472}
.ebtn.disabled{background:#eef1f5;color:#98a2b3;border-color:#e3e8ee;cursor:not-allowed;flex:none}
.ehall.empty{border-top-color:#cfd8e3;grid-column:1/-1;text-align:center;align-items:center;padding:36px 20px}
.ehall.empty h3{margin-bottom:8px;color:var(--navy)}
.ehall.empty p{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.7}
.ehall.empty .ehall-act{justify-content:center;margin-top:0}
.ehall.empty .ebtn{flex:none;min-width:170px}
.edu-note{margin:24px 0 0;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.75}
.edu-note i{color:var(--navy);margin-right:5px}
.edu-note a{color:var(--navy);font-weight:800;border-bottom:1px solid #b8c9dc}
.edu-note a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- 푸터 ---------- */
.foot{background:var(--navy2);color:#c3d1e2;padding:52px 0 30px}
.foot-in{display:grid;grid-template-columns:.9fr 2fr;gap:44px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .logo-mark{color:#fff;font-size:25px}
.foot-brand .logo-mark span{color:var(--gold2)}
.foot-brand p{font-size:12.5px;line-height:1.8;margin:14px 0 0;opacity:.8}
.foot-links{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.foot-links b{display:block;color:#fff;font-size:13.5px;margin-bottom:14px;font-weight:800}
.foot-links a{display:block;font-size:12.5px;padding:6px 0;opacity:.78;transition:.16s}
.foot-links a:hover{opacity:1;color:var(--gold2)}
.foot-legal{padding-top:26px}
.foot-legal p{font-size:11.5px;line-height:1.8;opacity:.72;margin:0 0 12px}
.foot-legal .copy{opacity:.6}

/* ★ 저작권 · 무단복제 금지 고지 (A안) */
.foot-copyright{margin:20px 0 18px;padding:15px 17px;border:1px solid rgba(212,174,89,.34);border-left:3px solid var(--gold2);border-radius:8px;background:rgba(176,141,60,.09)}
.foot-copyright>b{display:block;color:var(--gold2);font-size:12.5px;font-weight:800;margin-bottom:8px;letter-spacing:.1px}
.foot-copyright p{font-size:11.5px;line-height:1.85;opacity:.82;margin:0 0 9px;color:#c3d1e2}
.foot-copyright p:last-child{margin-bottom:0}
.foot-copyright strong,.foot-copyright b{color:#fff}
.foot-copyright .foot-copy-ok{opacity:.9;padding-top:8px;border-top:1px dashed rgba(255,255,255,.14);color:#b9d8c6}
.foot-law{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 13px;font-size:11.5px}
.foot-law a{color:#c3d1e2;opacity:.8;font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:.16s}
.foot-law a:hover{opacity:1;color:var(--gold2);border-bottom-color:var(--gold2)}
.foot-law span{opacity:.32}
@media(max-width:640px){
  .foot-copyright{padding:13px 14px}
  .foot-copyright>b{font-size:12px}
  .foot-copyright p{font-size:11px;line-height:1.8}
}

/* ---------- 반응형 ---------- */
@media(max-width:1150px){
  .tile-grid{grid-template-columns:repeat(3,1fr)}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .info-grid{grid-template-columns:1fr 1fr}
  .info-col:last-child{grid-column:1/-1}
}
/* ★ 1280px 이하: 전체 메뉴 → 햄버거로 전환
   데스크톱 전체 메뉴(로고 277 + 메뉴 620 + 버튼 232 + 간격 52 = 1181px)는
   컨테이너 1240px 에서는 들어가지만, 그 아래부터는 메뉴가 버튼 위로 겹칩니다.
   억지로 줄여 대신 **햄버거 메뉴**로 바꾸는 것이 안전합니다(표준 방식). */
@media(max-width:1280px){
  .mainnav{display:none}
  .menu-toggle{display:block;margin-left:auto}
  .navbar-in{gap:14px;height:70px;position:relative}
  .mainnav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(15,39,70,.14);padding:8px 20px 18px;
  }
  .mainnav.open a{padding:13px 0;border-bottom:1px solid #eef2f7;font-size:15px}
  .mainnav.open .home-ico{display:none}
}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-panel{max-width:620px}
  .flowmap-steps{grid-template-columns:1fr;gap:12px}
  .flowmap-steps .fm-arrow{transform:rotate(90deg);padding:6px 0}
}
/* ★ 900px 이하에서 카드 4열은 너무 좁다.
   768px 실측: 카드 본문 폭 141px → 「15개 지표·5대 영역·1」 뒤에
   **15px 짜투리 줄**이 생겨 「100점」이 토막났다.
   2열로 바꾸면 본문 326px 로 충분하다. */
@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .admin-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:30px}
  .foot-links{grid-template-columns:1fr 1fr}
  .sec-head h2{font-size:24px}
  .flow-cta{padding:26px 22px}
  .flow-cta h3{font-size:18px}
}
@media(max-width:700px){
  .tile-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .util-links a:not(.util-login):not(.util-join){display:none}
  /* ★ 모바일 내비 넘침(390px 120px) 해결 — 긴 부제가 로고를 277px로 부풀리고 있었다 */
  .logo-tag{display:none}
  .navbar-in{gap:10px;height:64px}
  .hero{padding:28px 0 40px}
  .hero-photo{height:170px}
  .hero-copy h1{font-size:27px}
  .hero-lead{font-size:14px}
  .panel-score{grid-template-columns:1fr;justify-items:center;text-align:center}
  .score-legend{text-align:left}
  .hero-cta .btn-hero,.hero-cta .btn-ghost{width:100%;justify-content:center}
  .services,.admin,.flow,.trust,.info{padding:48px 0}
  .admin-grid{grid-template-columns:1fr}
  .foot-links{grid-template-columns:1fr}
  /* ★ 320px 가로넘침(+13px)의 진짜 원인.
     `.flow-cta .btn-hero{flex:none}`(340행) 은 **줄어들지 않는** 고정 폭이라
     「회원가입 후 무료진단 사이트로」(290.8px)가 280px 칸을 넘어 밀려 나갔다.
     → 모바일에서는 폭을 채우고 가운데 정렬한다. */
  .flow-cta{flex-direction:column;align-items:stretch;gap:18px;padding:26px 20px}
  .flow-cta .btn-hero{flex:1 1 auto;width:100%;justify-content:center;padding:14px 16px;font-size:15px}
  .flow-cta .btn-hero i{flex:none}
  /* ★ 유틸바: 로그인·회원가입만 남으므로 간격·글자를 줄여 한 줄에 넣는다.
     (344px 실측에서 「회원가입」이 두 줄로 접혔고, 320px 에서는 3줄로 잘렸다) */
  .utilbar-in{gap:10px}
  .util-brand{font-size:12px}
  .util-links{gap:10px}
  .util-links a{font-size:11.5px}
  .util-login{margin-left:0}
  .util-join{padding:5px 10px}
}
@media(max-width:560px){
  /* ★ 2열이면 카드 본문 폭이 약 100px 밖에 안 된다.
     「신호등(파랑/노랑/빨강)」 같은 어절이 들어갈 자리가 없어
     한 글자만 다음 줄로 떨어지고 단어가 끊겼다(사용자 스크린샷).
     → 1열로 바꾸고 **배지를 왼쪽, 제목·설명을 오른쪽**에 두는 가로 카드로 만든다.
       (기존 마크업 <b><h3><p> 를 그대로 쓰므로 HTML 수정 불필요) */
  .steps{grid-template-columns:1fr;gap:10px}
  .steps li{
    display:grid;grid-template-columns:28px 1fr;column-gap:11px;row-gap:3px;
    align-items:start;padding:14px 16px;
  }
  .steps li > b{grid-column:1;grid-row:1 / span 2;width:28px;height:28px;font-size:13px;margin:0}
  .steps li h3{grid-column:2;grid-row:1;margin:0;font-size:14px}
  .steps li p{grid-column:2;grid-row:2;font-size:12px;line-height:1.6}
}
@media(max-width:480px){
  .tile-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .hero-copy h1{font-size:23px}
  .btn-gold{padding:10px 12px;font-size:12.5px}
  .nav-right{gap:8px}
  .nav-right .ico-btn{display:none}
  .logo-mark{font-size:20px}
  .navbar-in{gap:8px}
}
/* ★ 420px 이하: 골드 버튼을 「무료진단」으로 줄인다.
   320px 실측 — 긴 라벨(약 160px)이 로고 자리를 잡아먹어
   로고 글자가 상자보다 28px 커져 **골드 버튼 밑으로 삐져나왔다.**
   짧은 라벨로 약 55px 를 확보하면 로고(108.8px)가 온전히 들어간다. */
@media(max-width:420px){
  .btn-gold .bg-full{display:none}
  .btn-gold .bg-short{display:inline}
  .util-brand{font-size:11.5px;letter-spacing:0}
  .utilbar-in{gap:8px}
  .util-links{gap:8px}
}