@charset "utf-8";
/* MakeSite 테마
   팔레트 방향: 쿨 뉴트럴(슬레이트) 지면 + 버밀리언 액센트.
   흔한 SaaS/AI 톤(곤색 배경 · 블루→바이올렛 그라디언트 · 유리 블러)을 쓰지 않는다.

   2026-08-25 전환 — 이전 판은 웜 뉴트럴(베이지)이었다. 종이 느낌은 좋았지만
   넓은 면적에서 갈색으로 읽혀 인쇄물 인상이 났다. 보안·성능 진단을 파는 화면에서는
   설계도 쪽이 맞다. 중성 회색으로 옮기면서 대비를 흑백에서 벌고, 액센트는 그대로 뒀다 —
   버밀리언은 이 사이트의 유일한 색 신호이고, 쿨 뉴트럴 위에서 더 세게 튄다.
   색은 전부 아래 토큰이다. 되돌리거나 다시 바꿀 때 이 블록만 고치면 된다.

   그누보드 default.css 다음에 로드되어 필요한 부분만 덮어쓴다. */

:root{
  /* 지면 · 잉크 */
  --paper:#FFFFFF; --paper2:#FFFFFF; --tint:#F1F4F7; --tint2:#DCE3EA;
  /* 교대 섹션 배경. 이 변수가 없어서 #svc·#plans 가 본문과 같은 색으로 나왔다. */
  --bg2:#F7F9FB;
  /* 먹은 깊게, 선은 옅게. 대비를 흑백에서 벌고 액센트는 아껴 쓴다 —
     주황을 넓게 깔수록 싸 보인다. */
  --ink:#080B0E; --ink2:#39424C; --ink3:#69737E;
  --line:#E4E9EE; --line2:#C3CCD5; --hair:#DCE2E8;
  /* 액센트 */
  --accent:#D9401F; --accent-d:#B32F13; --accent-soft:rgba(217,64,31,.10);
  /* 보조색 3종. 액센트를 대신하지 않고 배지·도식에서만 쓴다.
     `--mustard` 였던 것을 `--steel` 로 고쳤다(2026-08-29) — 이름은 머스터드인데
     값이 RGB(32,100,140) 스틸 블루였다. 그 탓에 **진단 결과의 "주의" 배지가
     파랗게** 떴다. 파랑은 관용적으로 정보이지 주의가 아니다. 값은 그대로 두고
     이름만 사실에 맞췄다 — 영역 색(성능)과 부분/외부 배지에서는 파랑이 맞다. */
  --steel:#20648C; --forest:#0B5952; --rose:#A32717;
  /* 같은 보조색의 밝은 판. 먹색 섹션 위에서 #20648C 는 2.5:1 로 읽히지 않는다. */
  --steel-lt:#6BA6CE;
  /* ── 판정 상태 6종 ────────────────────────────────────────
     진단 상품의 화면은 판정으로 가득 찬다. 색이 늘지만 **전부 의미를 진다** —
     장식이 아니므로 "액센트를 아껴 쓴다"와 충돌하지 않는다.

     `NA` 와 `ERROR` 를 **다른 색으로** 둔다. 0032 가 코드에서 뗀 구분인데
     화면에서 같은 회색으로 다시 붙어 있었다. 고객이 할 일이 다르다 —
     NA 는 "귀사에는 해당하지 않습니다", ERROR 는 "재검사가 필요합니다".

     대비는 흰 지면 기준 전부 4.5:1 이상이다(배지 글씨가 10.5px 라 3:1 로는 모자란다).
     `cc63f5c` 에서 먹색 섹션 위 1.91:1 사고가 한 번 났다 — 어두운 판을 따로 둔다. */
  --st-pass:#0B5952;   --st-pass-bg:rgba(11,89,82,.07);   --st-pass-ln:#9EC6C1;
  --st-warn:#9A6208;   --st-warn-bg:rgba(154,98,8,.09);   --st-warn-ln:#D8BE8A;
  --st-fail:#B32F13;   --st-fail-bg:rgba(217,64,31,.10);  --st-fail-ln:#E9B2A2;
  --st-na:#69737E;     --st-na-bg:rgba(105,115,126,.07);  --st-na-ln:#C3CCD5;
  --st-err:#5B4C86;    --st-err-bg:rgba(91,76,134,.08);   --st-err-ln:#B5ABD2;
  --st-crit:#8E1D1D;
  /* 먹색 섹션(.sec-dk) 위 판. 밝은 지면 값을 그대로 얹으면 안 보인다. */
  --st-pass-dk:#84D3C8; --st-pass-bg-dk:rgba(132,211,200,.09); --st-pass-ln-dk:#2F5B55;
  --st-warn-dk:#E0A93A; --st-warn-bg-dk:rgba(224,169,58,.10);  --st-warn-ln-dk:#5A4620;
  --st-fail-dk:#F09274; --st-fail-bg-dk:rgba(240,146,116,.10); --st-fail-ln-dk:#6B3527;
  --st-na-dk:#7F8A95;   --st-na-bg-dk:rgba(127,138,149,.10);   --st-na-ln-dk:#333C45;
  --st-err-dk:#A99BD6;  --st-err-bg-dk:rgba(169,155,214,.10);  --st-err-ln-dk:#3B3358;

  /* 어두운 섹션 — 네이비가 아니라 중성 먹색 */
  --dk:#0A0D10; --dk2:#111519; --dk-line:#262E36;
  --dk-fg:#EDF1F5; --dk-fg2:#B2BCC6; --dk-fg3:#7F8A95;
  --g:linear-gradient(100deg,#D9401F,#E07A45);
  --sh1:none;
  --sh2:0 2px 0 var(--line2);
  /* 표면이 여럿 겹치는 자리(결과 카드 · 이슈 카드 · 가격표)에만 쓴다.
     본문의 평평함은 설계도 톤을 노린 결정이라 그대로 둔다 — 여기만 층을 준다. */
  --sh-card:0 1px 2px rgba(8,11,14,.05),0 8px 24px -12px rgba(8,11,14,.12);
  --r:6px; --rl:8px; --r-card:12px;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --e:cubic-bezier(.19,1,.22,1);
  --hd-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
  letter-spacing:-.012em;
  /* 한국어 줄바꿈. 기본값(normal)은 어절 한가운데를 끊어서 '필요합니 / 다' 같은
     외톨이 글자를 만든다. keep-all 이 어절을 지키고, break-word 가 URL·토큰처럼
     끊을 데 없는 긴 문자열에서 넘침을 막는다 — 둘을 같이 써야 안전하다. */
  word-break:keep-all; overflow-wrap:break-word;
  /* overflow-x:hidden 은 스크롤 컨테이너를 만들어 position:sticky 를 깨뜨린다.
     clip 은 같은 효과를 내면서 sticky 를 살린다(상세 페이지 고정 목차). */
  overflow-x:clip}
a{color:inherit;text-decoration:none}
/* 순정 default.css 가 body 말고도 **네 자리**에 'Malgun Gothic' 을 박아 둔다 —
   body · h1~h6 · input,button · textarea,select. 위 body 규칙이 늦게 로드돼 첫 자리만
   덮였고, 나머지 셋은 그대로 살아 있었다. 자체 호스팅한 폰트가 본문에만 닿고
   **제목과 입력칸 전부가 맑은 고딕으로 그려지고 있었다**(2026-08-25 브라우저 실측).
   바이트 검사 · 헤더 검사 · 판정기는 전부 통과하는 종류의 어긋남이라 눈으로만 잡힌다.
   button 은 이미 inherit 이었다. 나머지를 같은 방식으로 맞춘다. */
h1,h2,h3,h4,h5,h6{font-family:inherit}
input,button,textarea,select{font-family:inherit}
img{max-width:100%;height:auto}
::selection{background:var(--accent);color:#fff}
.ms-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.gt{color:var(--accent)}
/* 관리 화면 CSS(ops/assets/ops.css)는 공개 페이지에 실리지 않는다.
   상품 상세부터 이 클래스가 붙어 있었지만 정의가 없어 아무 일도 하지 않았다. */
.ops-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* 본문 안에서 눌리는 링크. 밑줄을 지우지 않는다 — 문장 속 링크는 색만으로 구분되지 않는다. */
.ulink{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .25s var(--e)}
.ulink:hover{color:var(--accent-d);text-decoration-thickness:2px}
.sec-dk .ulink{color:var(--steel-lt)}
.sound_only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 스크롤 진행 바 ── */
#ms-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:var(--g);
  transition:width .1s linear}

/* ── 버튼 ── */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  font-weight:600;font-size:15.5px;padding:13px 23px;border-radius:var(--r);position:relative;
  transition:transform .4s var(--e),box-shadow .4s var(--e),background .3s;white-space:nowrap}
.b.p{background:var(--accent);color:#fff}
.b.p:hover{transform:translateY(-2px);background:var(--accent-d)}
.b.o{background:var(--paper2);color:var(--ink);border:1px solid var(--line2)}
.b.o:hover{transform:translateY(-2px);border-color:var(--ink)}
.b.lg2{padding:16px 30px;font-size:16.5px}
.b.w{background:transparent;color:var(--dk-fg);border:1px solid var(--dk-line)}
.b.w:hover{background:rgba(255,255,255,.07);border-color:var(--dk-fg3)}

/* ── 헤더 ── */
#ms-hd{position:fixed;inset:2px 0 auto;z-index:200;transition:.4s var(--e);
  border-bottom:1px solid transparent}
/* 블러를 쓰지 않으므로 반투명이면 본문이 그대로 비친다. 불투명하게 둔다. */
#ms-hd.on{background:var(--paper);border-bottom-color:var(--line)}
.hin{max-width:1180px;margin:0 auto;padding:0 28px;height:var(--hd-h);display:flex;align-items:center;gap:20px}
/* 로고. 헤더 높이 72px 안에서 크게 잡는다 — 메뉴를 17px 로 키우면서
   상대적으로 로고가 작아 보였다. 마크와 글자를 같은 비율로 올린다.
   MAKE 와 SITE 사이가 벌어져 있던 것은 `gap` 때문이었다 — .lg 가 flex 라
   두 글자 덩어리가 각각 플렉스 아이템이 돼서 마크와 같은 간격이 들어갔다.
   `.wd` 로 한 덩어리로 묶어 간격이 마크와 글자 사이에만 남게 한다. */
.lg{display:flex;align-items:center;gap:12px;font-weight:800;font-size:27px;letter-spacing:-.05em}
.lg .wd{display:inline;white-space:nowrap}
.lg .mk{width:36px;height:36px;background:var(--accent);position:relative;flex:none;
  border-radius:6px;transition:transform .5s var(--e)}
.lg .mk::after{content:"";position:absolute;inset:9px;border:3px solid var(--paper);
  border-right-color:transparent;border-bottom-color:transparent;transform:rotate(45deg)}
.lg:hover .mk{transform:rotate(-90deg)}
.lg span.tx{color:var(--accent)}
#ms-hd nav{display:flex;gap:2px;margin-left:auto}
#ms-hd nav .nvi{position:relative}
/* 1차 메뉴 글자. 15px 는 이 폭에서 너무 얌전했다 —
   1180px 래퍼에 1차 6개 + 로고 + CTA 2개를 얹고도 자리가 남는다(실측). */
#ms-hd nav .nvi > a{display:block;padding:10px 14px;font-size:17px;font-weight:650;
  letter-spacing:-.02em;color:var(--ink2)}
#ms-hd nav .nvi > a span{position:relative;display:inline-block}
#ms-hd nav .nvi > a span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e)}
#ms-hd nav .nvi:hover > a,#ms-hd nav .nvi:focus-within > a{color:var(--ink)}
#ms-hd nav .nvi:hover > a span::after,
#ms-hd nav .nvi:focus-within > a span::after{transform:scaleX(1);transform-origin:left}

/* ── 2차 메뉴 패널 ─────────────────────────────────────────────
   메가메뉴처럼 화면을 덮지 않는다. 1차 항목 아래 필요한 폭만 열리고,
   여는 것도 CSS 가 한다(:hover / :focus-within) — 열림 상태를 JS 가 들고 있지 않으면
   스크립트가 죽어도 메뉴는 계속 열린다.
   위에서 아래로 '그어지듯' 나타난다(clip-path). 페이드만 쓰면 어디서 나왔는지 안 보인다. */
.nvp{position:absolute;top:100%;left:-8px;z-index:210;padding-top:11px;max-width:min(760px,92vw);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--e),transform .34s var(--e),visibility 0s .34s}
#ms-hd nav .nvi:hover .nvp,
#ms-hd nav .nvi:focus-within .nvp{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#ms-hd nav .nvi.esc .nvp{opacity:0;visibility:hidden}
/* 오른쪽 끝 항목은 패널을 오른쪽으로 붙인다 — 왼쪽 정렬로 두면 뷰포트를 넘어
   가로 스크롤이 생긴다(1440px 에서 안내 패널이 25px 넘쳤다). */
#ms-hd nav .nvi:nth-last-child(-n+2) .nvp{left:auto;right:-8px}
.nvp-in{display:grid;grid-template-columns:repeat(var(--nvc,1),minmax(208px,1fr));
  gap:0 26px;background:var(--paper);border:1px solid var(--line);
  border-top:2px solid var(--accent);padding:22px 24px 18px;
  box-shadow:0 18px 44px -22px rgba(8,11,14,.28)}
.nvp .nvc + .nvc{border-left:1px solid var(--line);padding-left:26px;margin-left:0}
.nvp .nvt{margin:0 0 11px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.nvp ul{list-style:none;margin:0;padding:0}
.nvp li + li{border-top:1px solid var(--line)}
.nvp li a{display:block;padding:9px 0;color:var(--ink2);
  transition:padding-left .35s var(--e),color .25s var(--e)}
.nvp li a:hover{padding-left:8px;color:var(--accent)}
.nvp li a b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.022em;line-height:1.4}
.nvp li a i{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink3);
  line-height:1.5;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:270px}
.nvp .nvm{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.nvp .nvm span{transition:transform .35s var(--e)}
.nvp .nvm:hover span{transform:translateX(4px)}
/* 좁아지면 3열 패널(제작 · 개발)이 오른쪽으로 넘친다 — 1081px 에서 73px 넘쳤다.
   글자를 키우면서 더 커진 자리다. 열 수를 줄여 패널 폭 자체를 접는다;
   위치를 뒤집는 방식은 이번엔 왼쪽으로 넘치는 문제로 옮겨갈 뿐이다. */
@media (max-width:1300px){
  .nvp-in{grid-template-columns:repeat(2,minmax(190px,1fr))}
  .nvp .nvc:nth-child(2n+1){border-left:0;padding-left:0}
  .nvp .nvc:nth-child(n+3){margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  .nvp{transition:opacity .01s,visibility 0s}
  .nvp li a:hover{padding-left:0}
}
.hd-cta{display:flex;gap:8px}
.hd-cta .b{font-size:16px;padding:12px 20px}
.hd-tog{display:none;margin-left:auto;width:42px;height:42px;border-radius:var(--r);border:1px solid var(--line2);
  background:var(--paper2);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hd-tog i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--e)}
.hd-tog[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd-tog[aria-expanded="true"] i:nth-child(2){opacity:0}
.hd-tog[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.ms-drawer{display:none;position:fixed;inset:var(--hd-h) 0 0;z-index:190;background:var(--paper);
  padding:22px 28px 40px;overflow-y:auto}
.ms-drawer.open{display:block;animation:drwr .4s var(--e)}
@keyframes drwr{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ms-drawer a{display:block;padding:15px 4px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}
.ms-drawer .b{width:100%;margin-top:14px;border-bottom:none}
/* 드로어 2차 — 1차를 눌러 편다. 열자마자 전부 펼치면 스크롤이 길어져 아무것도 못 찾는다. */
.ms-drawer .dwg{border-bottom:1px solid var(--line)}
.ms-drawer .dwt{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 4px;font-size:17px;font-weight:600;background:none;border:0;color:inherit;
  cursor:pointer;text-align:left}
.ms-drawer .dwt i{width:11px;height:11px;flex:none;position:relative;transition:transform .35s var(--e)}
.ms-drawer .dwt i::before,.ms-drawer .dwt i::after{content:"";position:absolute;background:var(--ink3)}
.ms-drawer .dwt i::before{left:0;right:0;top:5px;height:1.5px}
.ms-drawer .dwt i::after{top:0;bottom:0;left:5px;width:1.5px;transition:transform .35s var(--e)}
.ms-drawer .dwt[aria-expanded="true"] i::after{transform:scaleY(0)}
.ms-drawer .dwp{padding:2px 0 12px 12px;border-left:1px solid var(--line);margin-left:4px}
.ms-drawer .dwp a{padding:11px 0;font-size:15px;font-weight:550;color:var(--ink2);border-bottom:0}
.ms-drawer .dwp a:hover{color:var(--accent)}
.ms-drawer .dwp .dwall{font-weight:700;color:var(--accent)}

/* ── 본문 골격 ── */
#ms-main{padding-top:var(--hd-h);min-height:60vh}
.ms-sec{padding:120px 0;position:relative}

/* ── 섹션 세로 헤어라인 ────────────────────────────────────────
   본문 폭 양 끝에 1px 세로선을 세운다. 도면·에디토리얼 지면의 어휘이고,
   요즘 생성물이 즐겨 쓰는 카드 그림자·유리 블러와 정반대 방향이다.
   좁은 화면에서는 여백을 잡아먹기만 하므로 끈다. */
@media (min-width:1024px){
  .ms-sec > .ms-wrap{position:relative}
  .ms-sec > .ms-wrap::before,.ms-sec > .ms-wrap::after{
    content:"";position:absolute;top:-120px;bottom:-120px;width:1px;
    background:var(--hair);pointer-events:none;
    /* 섹션이 들어오면 위에서 아래로 자란다. 이미 그려져 있는 선보다
       그어지는 선이 지면을 만드는 과정을 보여준다. */
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform 1.15s var(--e)}
  .ms-sec.go > .ms-wrap::before,.ms-sec.go > .ms-wrap::after{transform:scaleY(1)}
  .ms-sec.go > .ms-wrap::after{transition-delay:.12s}
  .ms-sec > .ms-wrap::before{left:0}
  .ms-sec > .ms-wrap::after{right:0}
  .sec-dk > .ms-wrap::before,.sec-dk > .ms-wrap::after{background:var(--dk-line)}
}
@media (prefers-reduced-motion:reduce){
  .ms-sec > .ms-wrap::before,.ms-sec > .ms-wrap::after{transform:none;transition:none}
}

/* ── 라인 프레임 드로잉 ────────────────────────────────────────
   네 변이 순서대로 그려져 사각형을 완성한다. 페이드로 나타나는 테두리와
   달리 "그려지는" 과정이 보여서 손으로 그은 도면처럼 읽힌다.
   테두리 자체를 애니메이션하므로 요소에는 border 를 주지 않는다. */
/* 변 이름은 한 글자를 피한다 — .b 는 이 테마의 버튼 클래스라
   .fl.b 로 쓰면 버튼 레이아웃(inline-flex·padding)을 물려받아 두꺼운 막대가 된다. */
.frame{position:relative}
.frame > .fl{position:absolute;display:block;background:var(--line2);
  pointer-events:none;z-index:2;text-decoration:none}
.frame > .fl-t{top:0;left:0;height:1px;width:0}
.frame > .fl-r{top:0;right:0;width:1px;height:0}
.frame > .fl-b{bottom:0;right:0;height:1px;width:0}
.frame > .fl-l{bottom:0;left:0;width:1px;height:0}
.frame.in > .fl-t{animation:frW .55s var(--e) both}
.frame.in > .fl-r{animation:frH .45s var(--e) .5s both}
.frame.in > .fl-b{animation:frW .55s var(--e) .9s both}
.frame.in > .fl-l{animation:frH .45s var(--e) 1.4s both}
@keyframes frW{to{width:100%}}
@keyframes frH{to{height:100%}}
@media (prefers-reduced-motion:reduce){
  .frame > .fl-t,.frame > .fl-b{width:100%;animation:none}
  .frame > .fl-r,.frame > .fl-l{height:100%;animation:none}
}

/* ── 섹션 인덱스 번호 ──────────────────────────────────────────
   목차가 있는 인쇄물처럼 섹션마다 번호를 붙인다. 위치를 알려주는 장치다. */
.kick .no{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--ink3);padding-right:2px}
.sec-dk .kick .no{color:var(--dk-fg3)}
.ms-sec h2{font-size:clamp(26px,3.4vw,36px);line-height:1.28;letter-spacing:-.04em;margin:0 0 16px;font-weight:800}
.ms-sec .lead{color:var(--ink2);font-size:17.5px;margin:0 0 36px;max-width:740px}
.kick{font-family:var(--mono);font-size:13px;letter-spacing:.15em;color:var(--accent-d);
  text-transform:uppercase;margin:0 0 14px;font-weight:700;display:flex;align-items:center;gap:10px}
.kick::before{content:"";width:26px;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e) .1s}
.rv.in .kick::before,.kick.in::before{transform:scaleX(1)}

/* 게시판·회원 등 그누보드 화면 */
.ms-page{max-width:1180px;margin:0 auto;padding:34px 28px 88px}
.ms-page #container{background:var(--paper2);border:1px solid var(--line);border-radius:var(--rl);
  padding:40px;float:none;width:auto}
.ms-page #container_title{font-size:25px;font-weight:800;letter-spacing:-.03em;margin:0 0 22px}
.ms-page #aside{display:none}
.ms-page:after{content:"";display:block;clear:both}

/* ── 푸터 ── */
#ms-ft{background:var(--dk);color:var(--dk-fg2);padding:66px 0 30px;font-size:15px}
/* 브랜드·카피를 위로, 메뉴를 그 아래 4열로. 세로 위계가 생겨 훑기가 쉬워진다. */
#ms-ft .ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
  flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--dk-line)}
/* #ms-ft a 규칙(display:block · padding:6px 0 · width:fit-content)이 버튼까지 먹어
   좌우 패딩이 사라진다. 버튼은 링크가 아니므로 되돌린다. */
#ms-ft .ftop > .b{flex:0 0 auto;align-self:center;white-space:nowrap;
  display:inline-flex;width:auto;padding:14px 26px;font-size:15.5px}
#ms-ft .ftop > .b.p{color:#fff}
#ms-ft .ftop > .b.p:hover{color:#fff;transform:translateY(-2px)}
#ms-ft .fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 26px}
#ms-ft h3{color:var(--dk-fg);font-size:13px;letter-spacing:.11em;margin:0 0 15px;font-weight:700;
  font-family:var(--mono);text-transform:uppercase}
#ms-ft a{display:block;padding:6px 0;font-weight:500;color:var(--dk-fg2);transition:.25s var(--e);position:relative;width:fit-content}
#ms-ft a:hover{color:var(--dk-fg);transform:translateX(3px)}
#ms-ft .fbrand .lg{color:var(--dk-fg);margin-bottom:18px;font-size:30px}
#ms-ft .fbrand .lg .mk::after{border-color:var(--dk) transparent transparent var(--dk)}
#ms-ft .fbrand p{margin:0;line-height:1.8;color:var(--dk-fg2);max-width:520px;font-size:15.5px}
/* 사업자 정보 — 한 줄씩 블록으로 쌓는다. <br> 로 잇던 초판은 줄 간격을 못 잡았다. */
#ms-ft .fbiz{margin-top:46px;padding-top:24px;border-top:1px solid var(--dk-line);
  color:var(--dk-fg3);font-size:13.5px;line-height:1.85}
#ms-ft .fbiz .fline{display:block}
#ms-ft .fbiz a{display:inline;padding:0;color:var(--dk-fg2)}
#ms-ft .fbiz a:hover{color:var(--dk-fg);transform:none;text-decoration:underline}
#ms-ft .fbottom{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px 24px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--dk-line);
  font-size:13.5px;color:var(--dk-fg3)}
/* 범위 고지 — 저작권과 한 줄에 붙여 두면 둘 다 안 읽힌다. */
#ms-ft .fnote{margin:8px 0 0;font-size:12.5px;color:var(--dk-fg3);line-height:1.7}
#ms-ft .flegal{display:flex;align-items:baseline;gap:20px;flex:none}
#ms-ft .flegal a{display:inline;padding:0;font-weight:600;color:var(--dk-fg2)}
#ms-ft .flegal a:hover{color:var(--dk-fg);transform:none;text-decoration:underline}
/* 구석의 갱신일. 법적 고지 옆에 가장 작고 흐리게 — 읽히되 무게를 갖지 않는다. */
#ms-ft .flegal .fmod{font-size:11.5px;color:var(--dk-fg3);letter-spacing:.02em;font-family:var(--mono)}
#top_btn{position:fixed;right:20px;bottom:20px;z-index:150;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line2);background:var(--paper2);color:var(--ink2);cursor:pointer;
  opacity:0;pointer-events:none;transition:.4s var(--e)}
#top_btn.on{opacity:1;pointer-events:auto}

/* ═══════════ 모션 ═══════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)}
/* 스크립트가 돌지 않으면 등장 애니메이션이 아니라 '본문 없음'이 된다. 원문은 HTML 에
   그대로 있으므로 크롤러는 영향이 없지만 사람 눈에는 빈 페이지다. */
.no-js .rv,.no-js .seq{opacity:1 !important;transform:none !important}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.30s}.d6{transition-delay:.36s}

/* 헤드라인 단어별 등장 */
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:top}
.wsplit .w i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform .9s var(--e)}
.wsplit.in .w i{transform:none}

/* 점검 항목 띠 — 움직이지 않는다.
   무한 마퀴는 흔한 템플릿 신호라 쓰지 않는다. 대신 조판으로 밀도를 만든다. */
.strip{border-block:1px solid var(--line);background:var(--tint);padding:20px 0}
.strip .in-w{display:flex;flex-wrap:wrap;gap:8px 0;align-items:baseline}
.strip b{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-d);margin-right:20px;white-space:nowrap}
.strip span{font-size:14.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.strip span::after{content:"/";color:var(--line2);margin:0 11px;font-weight:400}
.strip span:last-child::after{content:""}

/* ── 순차 등장 — 인더월드 방식.
   transition-delay 를 쌓지 않고 **한 애니메이션 안에서 % 구간을 나눈다.**
   구간이 명시적이라 순서가 코드에 그대로 보이고, 요소마다 delay 를 세지 않아도 된다. ── */
.seq{opacity:0}
.seq.go{animation:seqUp 1.6s var(--e) forwards}
.seq.go.s2{animation-name:seqUp2}
.seq.go.s3{animation-name:seqUp3}
@keyframes seqUp {0%{opacity:0;transform:translateY(-24px)} 34%,100%{opacity:1;transform:none}}
@keyframes seqUp2{0%,30%{opacity:0;transform:translateY(-24px)} 64%,100%{opacity:1;transform:none}}
@keyframes seqUp3{0%,58%{opacity:0;transform:translateY(-18px)} 92%,100%{opacity:1;transform:none}}

/* 밑선이 왼쪽에서 들어온다 */
.uline{position:relative;overflow:hidden;display:inline-block}
.uline::after{content:"";position:absolute;left:-100%;bottom:0;width:100%;height:2px;background:var(--accent)}
.uline.go::after{animation:lineIn 1.6s var(--e) forwards}
@keyframes lineIn{0%,58%{left:-100%} 100%{left:0}}

/* 회전 원형 배지 — 이 사이트의 시그니처. 가운데는 고정, 링만 돈다. */
.circ{position:relative;width:132px;height:132px;margin:0 auto;display:block}
.circ svg{width:100%;height:100%;animation:circRot 16s linear infinite}
.circ svg text{font-family:var(--mono);font-size:11.2px;letter-spacing:.26em;
  fill:var(--ink2);text-transform:uppercase;font-weight:600}
.circ .mid{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper2);
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
.circ:hover .mid{background:var(--accent);border-color:var(--accent);color:#fff}
@keyframes circRot{to{transform:rotate(-360deg)}}
.sec-dk .circ svg text{fill:var(--dk-fg2)}
.sec-dk .circ .mid{background:var(--dk);border-color:var(--dk-fg2);color:var(--dk-fg)}

/* 스크롤 유도 */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:1px;height:52px;background:var(--line2);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-14px;width:1px;height:14px;
  background:var(--accent);animation:cue 2.2s var(--e) infinite}
@keyframes cue{0%{top:-14px}100%{top:52px}}


/* ══════ 참고 적용 — jbrix.co.kr ══════ */

/* 1) 포커스 디밍 — 그룹에 마우스가 들어오면 나머지가 물러나고 하나만 남는다.
      jbrix 의 거대 메뉴가 쓰는 기법. 카드가 많을수록 효과가 크다. */
.dim:hover > *{opacity:.42;transition:opacity .45s var(--e)}
.dim > *{transition:opacity .45s var(--e),transform .5s var(--e),border-color .4s}
.dim:hover > *:hover{opacity:1}

/* 2) 제목 밑선이 왼쪽에서 그려진다(width 0→100%). 슬라이드보다 담백하다. */
.drawline{position:relative;padding-bottom:14px}
.drawline::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
.drawline.go::after{animation:drawW 1.1s var(--e) .15s forwards}
@keyframes drawW{to{width:88px}}

/* 3) 진입 안착 — scale(1.04)→1 한 번. 무한 Ken Burns 가 아니라 1회로 끝난다. */
.settle{animation:settle 1.4s var(--e) both}
@keyframes settle{0%{transform:scale(1.04);opacity:0}100%{transform:scale(1);opacity:1}}

/* 4) 드로어 메뉴 — 항목이 왼쪽에서 순차로. nth-child 로 delay 를 준다. */
.ms-drawer.open a{animation:slideL .55s cubic-bezier(.25,.46,.45,.94) both}
.ms-drawer.open a:nth-child(1){animation-delay:.04s}
.ms-drawer.open a:nth-child(2){animation-delay:.09s}
.ms-drawer.open a:nth-child(3){animation-delay:.14s}
.ms-drawer.open a:nth-child(4){animation-delay:.19s}
.ms-drawer.open a:nth-child(5){animation-delay:.24s}
.ms-drawer.open a:nth-child(6){animation-delay:.29s}
.ms-drawer.open a:nth-child(n+7){animation-delay:.34s}
@keyframes slideL{0%{transform:translateX(-40px);opacity:0}100%{transform:none;opacity:1}}
.ms-drawer:hover a{color:var(--ink3)}
.ms-drawer a:hover{color:var(--ink)}

/* 5) 우측 세로 라벨 — 회전한 텍스트를 측면에 고정. TOP 버튼을 이걸로 대신한다. */
#top_btn{position:fixed;right:0;bottom:96px;z-index:150;width:auto;height:auto;border:none;
  border-radius:0;background:transparent;color:var(--ink2);cursor:pointer;padding:0 18px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.28em;
  writing-mode:vertical-rl;text-orientation:mixed;
  opacity:0;pointer-events:none;transition:.45s var(--e)}
#top_btn.on{opacity:1;pointer-events:auto}
#top_btn:hover{color:var(--accent)}
#top_btn::before{content:"";position:absolute;left:50%;top:-56px;width:1px;height:44px;background:var(--line2)}

/* 6) 비정형 CTA — 직사각형이 아닌 다각형. 흔한 pill 버튼과 다른 인상을 만든다. */
.b.poly{clip-path:polygon(6% 0,100% 4%,95% 100%,0 93%);border-radius:0;padding:20px 42px;
  font-size:17px;transition:clip-path .5s var(--e),background .35s}
.b.poly:hover{clip-path:polygon(0 3%,94% 0,100% 96%,5% 100%);transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.seq{opacity:1;transform:none}
  .wsplit .w i{transform:none}
  .circ svg,.scroll-cue::after{animation:none}
  .settle,.ms-drawer.open a{animation:none}
  .drawline::after{width:88px}
  .dim:hover > *{opacity:1}
  .uline::after{left:0}
}

/* ═══════════ 메인 페이지 ═══════════ */

/* 히어로 */
#hero{position:relative;padding:100px 0 76px;overflow:hidden}
#hero::before{content:"";position:absolute;inset:-40% -20% auto;height:720px;pointer-events:none;
  background:radial-gradient(620px 320px at 18% 0,rgba(217,64,31,.055),transparent 66%),
             radial-gradient(520px 300px at 82% 14%,rgba(32,100,140,.055),transparent 64%)}
#hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:radial-gradient(var(--line2) .6px,transparent .6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
  mask-image:linear-gradient(180deg,#000,transparent 62%)}
#hero .in-w{position:relative}
#hero .hgrid{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:58px;align-items:start}
#hero .hmain{min-width:0}
/* 2단일 때 왼쪽 칼럼은 700px 안팎이다. 62px 그대로 두면 제목이 세 줄로 넘친다. */
@media (min-width:1024px){#hero .hgrid h1,#hero .hgrid .hh{font-size:clamp(38px,3.6vw,50px)}}

/* 비용 비교 패널 — 숫자는 ops_setting(site.cost_*) 에서 온다. 코드에 박지 않는다. */
.costcard{background:var(--paper2);border-radius:0;padding:26px 26px 22px;margin-top:6px}
.costcard > .fl{background:var(--ink)}
.costcard .ct{margin:0 0 18px;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;color:var(--ink3);display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px}
.costcard .ct span{letter-spacing:0;font-family:var(--sans);font-size:12.5px;font-weight:500}
.costcard .row{padding:16px 0;border-bottom:1px dashed var(--line)}
.costcard .row > b{display:block;font-size:14.5px;font-weight:700;color:var(--ink2);margin-bottom:4px}
.costcard .row em{display:block;font-style:normal;font-size:31px;font-weight:800;
  letter-spacing:-.045em;line-height:1.15;color:var(--ink)}
.costcard .row em i{font-style:normal;font-size:16px;font-weight:700;margin-left:3px;color:var(--ink2)}
/* 클래스명 주의 — .b 는 이 테마의 버튼 클래스다. 행에 붙이면 버튼 레이아웃을
   그대로 물려받아 가로로 눕는다(실제로 그랬다). .hire/.ours 로 쓴다. */
.costcard .row.ours em{color:var(--accent)}
.costcard .row ul{list-style:none;margin:9px 0 0;padding:0}
.costcard .row li{font-size:13px;font-weight:500;color:var(--ink3);line-height:1.85;
  display:flex;justify-content:space-between;gap:12px}
.costcard .row li s{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--ink2)}
.costcard .save{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:16px 0 4px}
.costcard .save span{font-size:18px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.costcard .save span b{color:var(--accent);font-weight:800}
.costcard .save s{text-decoration:none;font-family:var(--mono);font-size:13px;font-weight:600;
  color:#fff;background:var(--accent);padding:3px 9px;border-radius:999px}
.costcard .fn{margin:10px 0 0;font-size:11.5px;font-weight:500;line-height:1.7;color:var(--ink3)}

@media (max-width:1023px){
  #hero .hgrid{grid-template-columns:1fr;gap:38px}
  .costcard{max-width:440px}
}
/* 좁은 폭에서는 제목 한 줄이 마스크 안에서 또 줄바꿈된다. 그러면 translateY(112%)
   가 실제 줄 높이와 어긋나 글자가 잘린 채 올라온다. 마스크를 풀고 페이드만 남긴다. */
@media (max-width:719px){
  .hero-rot.rdy .hslide h1 .m,.hero-rot.rdy .hslide .hh .m{overflow:visible;padding-bottom:0;margin-bottom:0}
  .hero-rot.rdy .hslide h1 .m > i,.hero-rot.rdy .hslide .hh .m > i{transform:none;opacity:0;transition:opacity .45s ease}
  .hero-rot.rdy .hslide.on h1 .m > i,.hero-rot.rdy .hslide.on .hh .m > i{opacity:1}
  .hero-rot.rdy .hslide.out h1 .m > i,.hero-rot.rdy .hslide.out .hh .m > i{opacity:0;transition-duration:.24s}
  .costcard{max-width:none}
  .costcard .row em{font-size:27px}
  /* 자간이 넓어 배지가 어절 중간에서 끊긴다("웹 업무 / 대행") */
  .badge{font-size:11.5px;letter-spacing:.05em;padding:7px 12px;flex-wrap:wrap;row-gap:2px}
  .badge b{white-space:nowrap}
}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;padding:8px 15px;border-radius:999px;background:var(--paper2);
  border:1px solid var(--line2);color:var(--ink2);margin-bottom:24px}
.badge b{color:var(--accent);font-weight:600}
.badge::before{content:"";width:6px;height:6px;background:var(--accent)}
#hero h1,#hero .hh{font-size:clamp(33px,5.6vw,62px);line-height:1.12;letter-spacing:-.05em;margin:0 0 24px;font-weight:800}
#hero .sub{font-size:18px;color:var(--ink2);max-width:640px;margin:0 0 34px}
#hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
#hero .foot{font-size:14.5px;font-weight:500;color:var(--ink3)}

/* ── 히어로 로테이터 ────────────────────────────────────────────
   두 개의 메시지(대행 / 진단)를 같은 그리드 셀에 겹쳐 두고 교대로 보인다.
   높이는 둘 중 큰 쪽으로 고정되므로 전환할 때 아래 요소가 튀지 않는다.
   JS 가 .rdy 를 붙이기 전까지는 첫 슬라이드만 정적으로 보인다 —
   스크립트가 죽어도 히어로가 빈 채로 남지 않게 하기 위해서다. */
.hero-rot{display:grid}
.hero-rot > .hslide{grid-area:1/1}
.hero-rot.rdy0 > .hslide + .hslide{display:none}
.hero-rot.rdy > .hslide + .hslide{display:block}
.hero-rot.rdy > .hslide{visibility:hidden}
.hero-rot.rdy > .hslide.on,.hero-rot.rdy > .hslide.out{visibility:visible}

/* 줄 마스크 — 각 줄이 제 마스크 안에서 밀려 올라온다 */
#hero .hslide h1 .m,#hero .hslide .hh .m{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
#hero .hslide h1 .m > i,#hero .hslide .hh .m > i{display:block;font-style:normal;will-change:transform}
.hero-rot.rdy .hslide h1 .m > i{transform:translateY(112%);
  transition:transform .8s cubic-bezier(.16,.86,.3,1)}
.hero-rot.rdy .hslide.on h1 .m > i{transform:translateY(0)}
.hero-rot.rdy .hslide.on h1 .m:nth-child(2) > i{transition-delay:.08s}
.hero-rot.rdy .hslide.out h1 .m > i{transform:translateY(-112%);transition-duration:.46s;transition-delay:0s}
.hero-rot.rdy .hslide.out h1 .m:nth-child(1) > i{transition-delay:.05s}

/* 배지·본문은 마스크 대신 짧은 페이드 */
.hero-rot.rdy .hslide .fd{opacity:0;transform:translateY(15px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,.86,.3,1)}
.hero-rot.rdy .hslide.on .fd{opacity:1;transform:none}
.hero-rot.rdy .hslide.on .badge.fd{transition-delay:.1s}
.hero-rot.rdy .hslide.on .sub.fd{transition-delay:.2s}
.hero-rot.rdy .hslide.out .fd{opacity:0;transform:translateY(-9px);
  transition-duration:.26s;transition-delay:0s}

/* 인디케이터 — 얇은 가로줄 두 개. 활성만 길어지고 진해진다.
   채워지는 막대는 시선을 계속 끌어서 본문을 읽는 데 방해가 됐다. */
.rot-nav{display:flex;gap:14px;align-items:center;margin:0 0 28px}
.rot-nav button{appearance:none;background:none;border:0;padding:12px 0;cursor:pointer;display:block}
.rot-nav button s{display:block;width:34px;height:1px;background:var(--line2);text-decoration:none;
  transition:width .55s cubic-bezier(.16,.86,.3,1),background-color .4s ease}
.rot-nav button.on s{width:72px;background:var(--ink)}
.rot-nav button em{display:none}
.rot-nav button:hover s{background:var(--ink3)}
.rot-nav button:focus-visible s{outline:2px solid var(--accent);outline-offset:5px}

@media (prefers-reduced-motion:reduce){
  .hero-rot.rdy .hslide h1 .m > i,.hero-rot.rdy .hslide .hh .m > i,.hero-rot.rdy .hslide .fd{transition:none}
}
@media (max-width:640px){
  .rot-nav button.on s{width:56px}
}

/* 무료 스캔 박스 */
.scanbox{margin-top:46px;background:var(--dk);border-radius:var(--rl);padding:26px;position:relative;overflow:hidden}
.scanbox::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--g)}
.scanbox .sh{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.13em;color:var(--dk-fg2);margin-bottom:16px;text-transform:uppercase}
.scanbox .sh .dot{width:7px;height:7px;background:var(--accent)}
.scanrow{display:flex;gap:10px}
.scanrow input{flex:1;min-width:0;background:var(--dk2);border:1px solid var(--dk-line);color:var(--dk-fg);
  border-radius:var(--r);padding:15px 17px;font-family:var(--mono);font-size:15px;outline:none;
  transition:border-color .3s}
.scanrow input::placeholder{color:var(--dk-fg3)}
.scanrow input:focus{border-color:var(--accent)}
.scanbox .note{margin:15px 0 0;font-size:14.5px;line-height:1.7;color:var(--dk-fg2)}

/* 카드 */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* 카드 수가 4의 배수가 아닐 때 마지막 줄이 왼쪽에 붙어 어색해지는 것을 막는다. */
.grid4.flow{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--paper2);border:1px solid var(--line);border-radius:var(--rl);padding:30px 28px;
  position:relative;overflow:hidden;transition:transform .5s var(--e),border-color .4s}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.card:hover{transform:translateY(-3px);border-color:var(--ink)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:0 0 9px;font-size:19px;font-weight:700;letter-spacing:-.025em}
.card p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.7}
.card ul{margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:var(--ink2)}
.card ul li{padding:5px 0 5px 20px;position:relative}
.card ul li::before{content:"—";position:absolute;left:0;color:var(--ink3);font-size:11px}
.card.hl{border-color:var(--accent)}
.card.hl::before{transform:scaleX(1)}
.card .tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  padding:5px 10px;border-radius:5px;background:var(--tint);color:var(--accent-d);margin-bottom:12px;
  text-transform:uppercase;font-weight:700}
.card .pz{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card .pz b{font-size:22px;letter-spacing:-.035em}
.card .pz s{color:var(--ink3);font-size:13.5px;font-weight:500;text-decoration:none;font-family:var(--mono)}
/* 정가 · 기간을 한 칸에 묶는다(C-0011). .pz 의 space-between 을 유지하려고 감쌌다. */
.card .pz .pzr{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.card .pz .lp{color:var(--ink3);font-size:13.5px;font-weight:500;font-family:var(--mono);opacity:.72}
.x li::before{content:"✕";color:var(--rose);font-size:11px;left:2px}
.o2 li::before{content:"✓";color:var(--forest);font-size:11px;left:2px}

/* 기준 */
/* ── 준비 안내(/prepare) ──────────────────────────────────────
   왼쪽에 분류, 오른쪽에 항목. 항목마다 헤어라인으로만 나눈다.
   체크박스나 상자를 두면 "채워야 하는 서류"처럼 읽혀 부담을 준다. */
.prep{display:grid;grid-template-columns:290px minmax(0,1fr);gap:52px;
  padding:44px 0;border-top:1px solid var(--line)}
.prep:first-of-type{border-top:0;padding-top:8px}
.prep .ph{position:sticky;top:110px;align-self:start}
.prep .ph .n{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
.prep .ph h2{margin:0 0 8px;font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.25}
.prep .ph p{margin:0;font-size:14px;font-weight:500;color:var(--ink3);line-height:1.65}
.prep dl{margin:0}
.prep dl > div{padding:17px 0;border-bottom:1px solid var(--line)}
.prep dl > div:first-child{padding-top:0}
.prep dt{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.prep dd{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink2);font-weight:500}
.prep .pnote2{margin:20px 0 0;font-size:14px;line-height:1.75;font-weight:500;
  color:var(--ink2);padding-left:15px;border-left:2px solid var(--accent)}
@media (max-width:900px){
  .prep{grid-template-columns:1fr;gap:24px;padding:34px 0}
  .prep .ph{position:static}
}

/* ── 요금 · 전체 상품(/pricing) ───────────────────────────────
   가격표는 표(table)로 짜기 쉽고, 그러면 격자가 생겨 이 사이트에서만 튄다.
   행 하나가 링크 하나인 헤어라인 목록으로 간다 — 상세 페이지의
   '같은 분류의 다른 상품'(.svc-sibs)과 같은 어휘의 밝은 바탕 판이다. */

/* 값을 매기는 세 가지 기준 */
.prc-rule{padding:0;background:var(--bg2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prc-rule dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.prc-rule dl > div{padding:30px 30px 32px;border-left:1px solid var(--line)}
.prc-rule dl > div:first-child{padding-left:0;border-left:0}
.prc-rule dt{font-size:16.5px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;
  padding-left:13px;border-left:2px solid var(--accent);line-height:1.3}
.prc-rule dd{margin:0;font-size:14.5px;line-height:1.72;font-weight:500;color:var(--ink2)}

/* 분류 바로가기 */
.prc-jump{display:flex;flex-wrap:wrap;gap:0 26px;margin:0 0 14px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.prc-jump a{display:inline-flex;align-items:flex-start;gap:5px;padding:7px 0;
  font-size:15px;font-weight:600;color:var(--ink3);transition:color .3s var(--e)}
.prc-jump a:hover{color:var(--accent)}
.prc-jump a i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  color:var(--ink3);transform:translateY(1px)}
.prc-jump a:hover i{color:var(--accent)}

.prc-sec{padding-top:76px}
.prc-grp{padding-top:52px}
.prc-grp:first-of-type{border-top:0;padding-top:34px}

/* 상품 행 */
.prc-rows{border-top:1px solid var(--line)}
.prc-rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:10px 28px;padding:19px 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--e),color .3s var(--e)}
.prc-rows a:hover{padding-left:14px;color:var(--accent)}
.prc-rows .nm{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;min-width:0}
.prc-rows .nm b{font-size:18px;font-weight:700;letter-spacing:-.03em}
.prc-rows .nm span{font-size:14px;font-weight:500;color:var(--ink3);line-height:1.6}
.prc-rows .tg{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);border:1px solid var(--line2);padding:2px 7px;flex:none}
.prc-rows .pz2{display:flex;align-items:baseline;gap:11px;white-space:nowrap;flex-wrap:wrap}
.prc-rows .pz2 b{font-size:17px;font-weight:700;letter-spacing:-.03em}
.prc-rows .pz2 s{text-decoration:none;font-size:12.5px;font-weight:500;color:var(--ink3)}
/* 정가 슬롯(C-0011). 기간과 나란히 서되 기간을 밀어내지 않는다.
   취소선은 여기서도 그리지 않는다 — 종전거래가격 근거가 확인되기 전까지는 할인 표기를 만들지 않는다. */
.prc-rows .pz2 .lp{font-size:12.5px;font-weight:500;color:var(--ink3);opacity:.72}

/* 공통 조건 — 왼쪽 항목명, 오른쪽 설명. 상자를 두지 않는다. */
.prc-terms{padding-top:0}
.prc-terms dl{margin:34px 0 0;border-top:1px solid var(--line)}
.prc-terms dl > div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px 40px;
  padding:20px 0;border-bottom:1px solid var(--line)}
.prc-terms dt{font-size:15.5px;font-weight:700;letter-spacing:-.025em}
.prc-terms dd{margin:0;font-size:15px;line-height:1.75;font-weight:500;color:var(--ink2)}

@media (max-width:900px){
  .prc-rule dl{grid-template-columns:1fr}
  .prc-rule dl > div{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .prc-rule dl > div:first-child{border-top:0}
  .prc-sec{padding-top:52px}
  .prc-grp{padding-top:34px}
  .prc-grp:first-of-type{padding-top:22px}
  .prc-terms dl > div{grid-template-columns:1fr;gap:4px;padding:17px 0}
}
@media (max-width:640px){
  .prc-rows a{grid-template-columns:1fr;gap:7px}
  .prc-rows a:hover{padding-left:0}
  .prc-jump{gap:0 18px}
}

/* ── 진행 절차 ────────────────────────────────────────────────
   여섯 단계를 가로 레일 하나로 꿰고, 섹션에 들어오면 레일이 왼쪽에서
   오른쪽으로 그어지며 각 단계의 마커가 차례로 찍힌다.
   단계마다 카드를 만들면 또 카드 그리드가 된다. 선 하나로 충분하다. */
.proc{position:relative;margin-top:58px}
.proc .rail{position:absolute;top:34px;left:0;right:0;height:1px;background:var(--line2);
  transform:scaleX(0);transform-origin:left;transition:transform 1.7s var(--e) .1s}
.proc.in .rail{transform:scaleX(1)}
.proc ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);column-gap:26px}
.proc li{position:relative;padding-top:52px}
.proc li .n{position:absolute;top:0;left:0;font-family:var(--mono);font-size:12.5px;
  font-weight:700;letter-spacing:.1em;color:var(--ink3)}
.proc li .tk{position:absolute;top:30px;left:0;width:9px;height:9px;background:var(--paper);
  border:1px solid var(--ink);transform:rotate(45deg) scale(0);
  transition:transform .5s var(--e)}
.proc.in li .tk{transform:rotate(45deg) scale(1)}
.proc li:nth-child(1) .tk{transition-delay:.25s}
.proc li:nth-child(2) .tk{transition-delay:.5s}
.proc li:nth-child(3) .tk{transition-delay:.75s}
.proc li:nth-child(4) .tk{transition-delay:1s}
.proc li:nth-child(5) .tk{transition-delay:1.25s}
.proc li:nth-child(6) .tk{transition-delay:1.5s}
.proc li:last-child .tk{background:var(--accent);border-color:var(--accent)}
.proc li h3{margin:0 0 8px;font-size:16.5px;font-weight:700;letter-spacing:-.025em;line-height:1.4}
.proc li p{margin:0;font-size:14px;line-height:1.72;color:var(--ink2);font-weight:500}
.proc .pnote{margin:34px 0 0;font-size:14px;font-weight:500;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){
  .proc .rail{transform:none;transition:none}
  .proc li .tk{transform:rotate(45deg);transition:none}
}
@media (max-width:1023px){
  .proc ol{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .proc .rail{display:none}
  .proc li{padding-top:46px}
  .proc li .tk{top:26px}
}
@media (max-width:560px){.proc ol{grid-template-columns:1fr}}

/* 조항 목록 — 상자 대신 얇은 선. 여섯 개의 둥근 카드가 나란히 놓이는 배치는
   지금 가장 흔한 생성물 화면이다. 계약 조항은 상자에 담긴 광고가 아니라
   문서의 조(條)로 읽혀야 한다. 위쪽 헤어라인이 항목마다 순서대로 그어진다. */
.stdgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:44px;row-gap:0}
.std{position:relative;padding:26px 0 30px;background:none;border:0;border-radius:0}
.std::before{content:"";position:absolute;top:0;left:0;height:1px;width:100%;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .85s var(--e)}
.std.in::before{transform:scaleX(1)}
.std::after{content:"";position:absolute;top:0;left:0;height:1px;width:34px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e) .5s}
.std.in::after{transform:scaleX(1)}
.std b{display:block;font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-.025em}
.std p{margin:0;font-size:15px;line-height:1.78;color:var(--ink2)}
@media (max-width:900px){.stdgrid{grid-template-columns:1fr;column-gap:0}}

/* 어두운 섹션 */
.sec-dk{background:var(--dk);color:var(--dk-fg)}
.sec-dk h2{color:var(--dk-fg)}
.sec-dk .lead{color:var(--dk-fg2)}
.sec-dk .kick{color:var(--steel-lt)}
.sec-dk .kick::before{background:var(--steel-lt)}
.sec-dk .card{background:var(--dk2);border-color:var(--dk-line);color:var(--dk-fg)}
.sec-dk .card:hover{border-color:var(--dk-fg3);box-shadow:none}
.sec-dk .card p,.sec-dk .card ul{color:var(--dk-fg2)}
.sec-dk .card ul li::before{color:var(--dk-fg3)}
.sec-dk .card .pz{border-top-color:var(--dk-line)}
.sec-dk .card .tag{background:rgba(217,64,31,.16);color:#F0876A}
.sec-dk .card.hl{border-color:var(--accent)}

/* 고지 */
.notice{margin-top:26px;background:var(--tint);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  padding:19px 23px;font-size:15px;line-height:1.75;color:var(--ink2)}
.notice b{color:var(--ink)}
.sec-dk .notice{background:rgba(255,255,255,.04);color:var(--dk-fg2)}
.sec-dk .notice b{color:var(--dk-fg)}

/* 반응형 */
@media (max-width:1080px){
  #ms-hd nav,.hd-cta{display:none}
  .hd-tog{display:flex}
  #ms-ft .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
  #ms-ft .ftop{flex-direction:column;gap:22px}
}
@media (max-width:900px){ .grid3,.grid4,.stdgrid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){
  body{font-size:15px}
  .lg{font-size:23px;gap:10px}
  .lg .mk{width:31px;height:31px}
  .lg .mk::after{inset:8px;border-width:2.5px}
  .ms-wrap,.hin,.ms-page{padding-left:18px;padding-right:18px}
  .ms-sec{padding:62px 0}
  .grid3,.grid4,.stdgrid{grid-template-columns:1fr}
  .scanrow{flex-direction:column}
  #hero{padding:64px 0 56px}
  .ms-page #container{padding:20px;border-radius:14px}
  #ms-ft .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ms-ft .fbottom{flex-direction:column;gap:12px;align-items:flex-start}
}
/* 좁은 화면에서 두 열은 '요금 · 전체 상품' 같은 항목이 줄바꿈된다. */
@media (max-width:420px){
  #ms-ft .fgrid{grid-template-columns:1fr;gap:24px}
}

/* ══════ 상품 상세 (/service/{code}) ══════ */
.svc-head{padding:80px 0 58px;border-bottom:1px solid var(--line);position:relative}
.svc-head::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(var(--line2) .6px,transparent .6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.svc-head > *{position:relative}
.svc-head .kick a{color:inherit}
.svc-head .kick a:hover{color:var(--accent)}
.svc-head h1{font-size:clamp(31px,4.8vw,52px);line-height:1.16;letter-spacing:-.048em;
  margin:0 0 18px;font-weight:800}
.svc-head .lead{font-size:18.5px;color:var(--ink2);max-width:720px;margin:0 0 36px}
.svc-meta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 40px;margin-bottom:34px;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
.pricebox{display:flex;align-items:baseline;gap:11px}
.pricebox b{font-size:40px;letter-spacing:-.05em;line-height:1}
.pricebox s{font-family:var(--mono);font-size:14px;color:var(--ink3);text-decoration:line-through}
.pricebox span{font-size:13.5px;color:var(--ink3);font-weight:500}
.metabit{display:flex;flex-direction:column;gap:4px}
.metabit i{font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);font-weight:700}
.metabit b{font-size:17px;font-weight:700}
.svc-head .cta{display:flex;gap:12px;flex-wrap:wrap}

/* 본문 — 좌측 고정 목차 + 우측 스크롤 */
.svc-body{padding:84px 0 96px}
.svc-grid{display:grid;grid-template-columns:236px 1fr;gap:0 64px;align-items:start}
.svc-toc{position:sticky;top:104px}
.svc-toc .tt{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.svc-toc ol{list-style:none;margin:0 0 26px;padding:0;position:relative;border-left:1px solid transparent}
.svc-toc ol::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:1px;
  background:var(--line);transform:scaleY(0);transform-origin:50% 0;
  animation:frH2 1.1s var(--e) .3s forwards}
@keyframes frH2{to{transform:scaleY(1)}}
.svc-toc li a{display:flex;gap:10px;padding:9px 0 9px 15px;margin-left:-1px;
  border-left:2px solid transparent;font-size:14.5px;font-weight:600;color:var(--ink3);
  transition:.28s var(--e)}
.svc-toc li a:hover{color:var(--ink);border-left-color:var(--accent)}
.svc-toc li a i{font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:700;
  color:var(--accent);padding-top:2px;flex:none}
.svc-toc .tocbtn{width:100%}

.doc{max-width:780px}
.doc h3{display:flex;align-items:baseline;gap:14px;font-size:25px;font-weight:800;
  letter-spacing:-.035em;margin:60px 0 18px;padding-top:26px;border-top:2px solid var(--ink);
  scroll-margin-top:104px}
.doc h3:first-child{margin-top:0}
.doc h3 i{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--accent)}
.doc h4{font-size:17.5px;font-weight:700;margin:32px 0 12px;color:var(--ink)}
.doc p{margin:0 0 15px;color:var(--ink2);font-size:16.5px;line-height:1.88}
.doc ul.dl{margin:0 0 20px;padding:0;list-style:none}
.doc ul.dl li{position:relative;padding:11px 0 11px 26px;font-size:16px;color:var(--ink2);
  border-bottom:1px solid var(--line)}
.doc ul.dl li::before{content:"";position:absolute;left:2px;top:1.2em;width:10px;height:1.5px;background:var(--accent)}
.doc blockquote{margin:0 0 22px;padding:4px 0 4px 22px;background:none;
  border-left:3px solid var(--accent);font-size:16.5px;line-height:1.8;color:var(--ink);font-weight:500}

/* 절차 스텝 */
.doc ol.steps{list-style:none;counter-reset:st;margin:0 0 24px;padding:0}
.doc ol.steps li{counter-increment:st;position:relative;padding:0 0 24px 52px}
.doc ol.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink);border-radius:50%;font-family:var(--mono);font-size:12.5px;
  font-weight:700;background:var(--paper)}
.doc ol.steps li::after{content:"";position:absolute;left:16px;top:36px;bottom:0;width:1px;background:var(--line2)}
.doc ol.steps li:last-child::after{display:none}
.doc ol.steps li b{display:block;font-size:17px;font-weight:700;margin-bottom:5px}
.doc ol.steps li span{display:block;font-size:15.5px;color:var(--ink2);line-height:1.75}

/* 지표 */
.doc .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0 34px;background:none;border:0;margin:6px 0 28px}
.doc .metrics .m{position:relative;background:none;padding:20px 0 4px}
.doc .metrics .m::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.doc .metrics .m::after{content:"";position:absolute;top:0;left:0;width:28px;height:1px;background:var(--accent)}
.doc .metrics .m b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.1;
  color:var(--accent-d)}
.doc .metrics .m span{display:block;margin-top:7px;font-size:13.5px;font-weight:600;color:var(--ink3)}

/* 표 */
.doc .tw{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line)}
.doc table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.doc thead th{background:var(--tint);text-align:left;padding:13px 16px;font-weight:700;
  font-size:13.5px;letter-spacing:.02em;border-bottom:1px solid var(--line2);white-space:nowrap}
.doc tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
.doc tbody tr:last-child td{border-bottom:none}
.doc tbody tr:hover td{background:var(--tint)}

/* FAQ */
.doc .faq{margin:0 0 24px;border-top:1px solid var(--line)}
.doc .faq details{border-bottom:1px solid var(--line)}
.doc .faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-size:16.5px;font-weight:700;color:var(--ink);transition:color .25s}
.doc .faq summary::-webkit-details-marker{display:none}
.doc .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e)}
.doc .faq details[open] summary{color:var(--accent)}
.doc .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--accent)}
.doc .faq details p{padding:0 0 20px;margin:0;font-size:16px}

/* 앞뒤 상품 */
/* 같은 분류의 다른 상품 — 카드 그리드 대신 목록.
   본문 어디에도 상자가 없는데 마지막에만 카드를 늘어놓으면 그 화면만 튄다. */
.svc-sibs{margin-top:34px;border-top:1px solid var(--dk-line)}
.svc-sibs a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:12px 28px;padding:22px 0;border-bottom:1px solid var(--dk-line);
  transition:padding-left .4s var(--e),color .3s var(--e)}
.svc-sibs a:hover{padding-left:14px;color:#fff}
.svc-sibs .nm{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.svc-sibs .nm b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.svc-sibs .nm span{font-size:14.5px;font-weight:500;color:var(--dk-fg3)}
.svc-sibs .tg{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);border:1px solid var(--dk-line);padding:3px 8px}
.svc-sibs .pz2{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.svc-sibs .pz2 b{font-size:17px;font-weight:700;letter-spacing:-.03em}
.svc-sibs .pz2 s{text-decoration:none;font-size:13px;font-weight:500;color:var(--dk-fg3)}
@media (max-width:640px){
  .svc-sibs a{grid-template-columns:1fr;gap:8px}
  .svc-sibs a:hover{padding-left:0}
}

.svc-near{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint)}
.svc-near .ms-wrap{display:flex;justify-content:space-between;gap:20px}
.svc-near a{display:block;padding:26px 0;max-width:46%;transition:.3s var(--e)}
.svc-near a.nx{text-align:right}
.svc-near a i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.svc-near a b{font-size:18px;font-weight:700;letter-spacing:-.025em}
.svc-near a:hover{color:var(--accent)}
.svc-near a.pv:hover{transform:translateX(-4px)}
.svc-near a.nx:hover{transform:translateX(4px)}

.svc-foot .lead{max-width:620px}
a.card{display:block;color:inherit}

@media (max-width:960px){
  .svc-grid{grid-template-columns:1fr;gap:0}
  .svc-toc{position:static;margin-bottom:44px;padding-bottom:34px;border-bottom:1px solid var(--line)}
  .svc-toc ol{margin-bottom:18px}
  .svc-toc .tocbtn{width:auto}
}
@media (max-width:600px){
  .svc-head{padding:54px 0 42px}
  .svc-body{padding:52px 0 66px}
  .pricebox b{font-size:31px}
  .doc h3{font-size:21px;margin-top:44px}
  .doc ol.steps li{padding-left:44px}
  .svc-near a{max-width:48%;padding:20px 0}
  .svc-near a b{font-size:15px}
}

/* ══════ 신청 · 이력 조회 (/apply · /track) ══════ */
.ap-sec{padding:76px 0 110px}
.ap-wrap{max-width:760px}
.ap-sec h1{font-size:clamp(28px,4.2vw,44px);line-height:1.2;letter-spacing:-.045em;margin:0 0 16px;font-weight:800}
.ap-sec .lead{font-size:17.5px;color:var(--ink2);margin:0 0 38px}
.ap-err{background:rgba(217,64,31,.09);border-left:3px solid var(--accent);padding:15px 20px;
  margin:0 0 26px;font-size:15.5px;font-weight:600;color:var(--accent-d)}

.ap-form label{display:block;margin:0 0 22px;font-size:14.5px;font-weight:700;color:var(--ink)}
.ap-form label em{font-style:normal;color:var(--accent);margin-left:2px}
.ap-form .opt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--ink3);border:1px solid var(--line2);padding:1px 6px;border-radius:4px;margin-left:5px}
.ap-form input[type=text],.ap-form input[type=email],.ap-form input[type=tel],
.ap-form input[type=url],.ap-form select,.ap-form textarea{
  display:block;width:100%;margin-top:8px;padding:14px 16px;font:inherit;font-size:16px;font-weight:400;
  color:var(--ink);background:var(--paper2);border:1px solid var(--line2);border-radius:var(--r);
  transition:border-color .3s var(--e)}
.ap-form input:focus,.ap-form select:focus,.ap-form textarea:focus{
  outline:none;border-color:var(--accent)}
.ap-form textarea{resize:vertical;line-height:1.75}
.ap-form small{display:block;margin-top:7px;font-size:13.5px;font-weight:400;color:var(--ink3);line-height:1.65}
.ap-form .fr2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.ap-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ap-consent{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;margin:8px 0 26px}
.ap-consent .ck{display:block;position:relative;padding-left:30px;margin:0 0 18px;
  font-size:15px;font-weight:500;color:var(--ink2);cursor:pointer}
.ap-consent .ck:last-child{margin-bottom:0}
.ap-consent .ck b{color:var(--ink);font-weight:700}
.ap-consent .ck input{position:absolute;left:0;top:.32em;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.ap-consent .ck small{margin-top:6px;padding-left:0}

.ap-note{background:var(--tint);border-left:3px solid var(--ink3);padding:18px 22px;
  font-size:14.5px;line-height:1.75;color:var(--ink2);margin-bottom:30px}
.ap-note b{color:var(--ink)}
.ap-submit{display:flex;align-items:center;gap:22px;margin:0}
.ap-submit a{font-size:15px;font-weight:600;color:var(--ink3)}
.ap-submit a:hover{color:var(--accent)}

/* 접수 완료 */
.ap-done{border:1px solid var(--line2);border-left:3px solid var(--accent);padding:30px 32px;background:var(--paper2)}
.ap-done .no{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.ap-done .no i{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ap-done .no b{font-family:var(--mono);font-size:28px;letter-spacing:-.02em}
.ap-done p{margin:0 0 12px;font-size:16px;color:var(--ink2);line-height:1.8}
.ap-done .tracklink a{color:var(--accent);font-weight:700;border-bottom:1.5px solid var(--accent)}
.ap-done .warn{font-size:13.5px;color:var(--ink3);margin:16px 0 0}

/* 진행 단계 */
.tr-steps{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-wrap:wrap;gap:0}
.tr-steps li{position:relative;flex:1 1 0;min-width:96px;padding:0 6px;text-align:center}
.tr-steps li::before{content:"";position:absolute;left:0;right:0;top:15px;height:1.5px;background:var(--line2)}
.tr-steps li:first-child::before{left:50%}
.tr-steps li:last-child::before{right:50%}
.tr-steps li i{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin:0 auto 10px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--line2);font-style:normal;font-family:var(--mono);
  font-size:13px;font-weight:700;color:var(--ink3)}
.tr-steps li span{display:block;font-size:13px;font-weight:600;color:var(--ink3);line-height:1.4}
.tr-steps li.done i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tr-steps li.done span{color:var(--ink2)}
.tr-steps li.now i{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 5px var(--accent-soft)}
.tr-steps li.now span{color:var(--ink);font-weight:700}

.tr-meta{margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.tr-meta > div{display:flex;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.tr-meta dt{flex:0 0 110px;margin:0;font-size:14px;font-weight:700;color:var(--ink3)}
.tr-meta dd{margin:0;font-size:15.5px;color:var(--ink);word-break:break-all}

@media (max-width:600px){
  .ap-sec{padding:52px 0 76px}
  .ap-form .fr2{grid-template-columns:1fr}
  .ap-done{padding:22px 20px}
  .ap-done .no b{font-size:22px}
  .tr-steps li{min-width:72px}
  .tr-steps li span{font-size:11.5px}
  .tr-meta > div{flex-direction:column;gap:5px}
}

/* ══════ 법정 문서 (/privacy · /terms) ══════ */
.lg-head{padding:74px 0 46px}
.lg-head h1{font-size:clamp(28px,4vw,42px)}
.lg-meta{display:flex;gap:36px;flex-wrap:wrap;margin-top:26px}
.lg-meta span{display:flex;flex-direction:column;gap:4px}
.lg-meta i{font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.lg-meta b{font-size:16.5px;font-weight:700}
.svc-toc .b.o.tocbtn{margin-bottom:8px}
.ap-consent .ck .pv-link{display:inline;margin-left:8px;font-size:13.5px;font-weight:600;
  color:var(--accent);border-bottom:1px solid currentColor}

/* 참고 자료 묶음 */
.ap-ref{border:1px solid var(--line2);border-left:3px solid var(--accent);padding:24px 26px 8px;
  margin:0 0 26px;background:var(--paper2)}
/* 그누보드 default.css 가 legend 를 스크린리더용으로 접어 둔다(height:1px).
   여기서는 실제로 보여야 하므로 되돌린다. */
.ap-ref legend{position:static;width:auto;height:auto;overflow:visible;clip:auto;
  padding:0 10px;margin-left:-10px;font-size:15.5px;font-weight:800;color:var(--ink);
  line-height:1.4;text-indent:0;visibility:visible}
.ap-ref legend .opt{margin-left:8px;font-weight:600}
.ap-ref .hint{margin:0 0 20px;font-size:14.5px;line-height:1.7;color:var(--ink2)}
.ap-ref.folded{padding-bottom:24px;background:var(--tint);border-left-color:var(--line2)}
.ap-ref.folded legend{cursor:pointer;color:var(--ink3)}
.ap-ref.folded legend::after{content:" ▾";color:var(--accent)}
.ap-ref.folded .hint,.ap-ref.folded label{display:none}

/* 문서 상품 공통 작업 범위 — 상품 본문과 시각적으로 구분 */
.doc-scope{margin-top:60px;padding-top:34px;border-top:3px double var(--line2)}
.doc-scope h3:first-child{margin-top:0}
.doc-scope h3 i{color:var(--ink3)}

/* ── 회사(/about) ─────────────────────────────────────────────
   연혁·조직도·팀 사진이 없다. 대신 '하는 것 / 하지 않는 것'을 두 열로 마주 세운다.
   이 대비가 이 페이지의 전부이므로 다른 장치를 얹지 않는다. */
.ab-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0 72px;align-items:start}
.ab-cols h2{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.24;letter-spacing:-.04em;font-weight:800}
.ab-body p{margin:0 0 20px;font-size:17px;line-height:1.85;color:var(--ink2)}
.ab-body p:last-child{margin-bottom:0}
.ab-body b{color:var(--ink)}

/* 하는 것 / 하지 않는 것 */
.abl{margin-top:44px;border-top:1px solid var(--dk-line)}
.abl-hd,.abl-row{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,1fr);gap:0 34px}
.abl-hd{padding:0 0 12px;border-bottom:1px solid var(--dk-line)}
.abl-hd b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dk-fg3)}
.abl-hd b:last-child{color:var(--accent)}
.abl-row{padding:24px 0;border-bottom:1px solid var(--dk-line)}
.abl-row .k{font-size:16px;font-weight:700;letter-spacing:-.025em;color:var(--dk-fg)}
.abl-row p{margin:0;font-size:14.5px;line-height:1.78;font-weight:500;color:var(--dk-fg2)}
.abl-row p b{color:var(--dk-fg);font-weight:700}
/* 왼쪽 열은 담담하게, 오른쪽 열만 액센트 선으로 세운다 — 경계가 이 페이지의 주장이다. */
.abl-row .dont{padding-left:16px;border-left:2px solid var(--accent)}
.abl-row .dont b{color:#fff}

/* 일하는 방식 */
.abw{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.abw li{display:grid;grid-template-columns:56px 220px minmax(0,1fr);gap:6px 26px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--e)}
.abw li:hover{padding-left:12px}
.abw li i{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.08em;color:var(--accent)}
.abw li b{font-size:17px;font-weight:700;letter-spacing:-.03em}
.abw li span{font-size:14.5px;line-height:1.75;font-weight:500;color:var(--ink2)}

/* 사업자 정보 */
.ab-biz{padding-top:0;background:var(--bg2);border-top:1px solid var(--line)}
.ab-biz h2{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.035em}
.ab-biz dl{margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 48px;border-top:1px solid var(--line)}
.ab-biz dl > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.ab-biz dt{font-size:14px;font-weight:600;color:var(--ink3)}
.ab-biz dd{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}

@media (max-width:900px){
  .ab-cols{grid-template-columns:1fr;gap:26px}
  .abl-hd{display:none}
  .abl-row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .abw li{grid-template-columns:44px minmax(0,1fr);gap:4px 16px}
  .abw li span{grid-column:2}
  .abw li:hover{padding-left:0}
  .ab-biz dl{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ab-biz dl > div{grid-template-columns:110px minmax(0,1fr);gap:10px}
}

/* ── 진단 허브(/diagnostics) ───────────────────────────────────
   /prepare 의 2열 골격(.prep)을 그대로 쓴다. 영역별 카드 그리드를 또 만들면
   메인 · 요금표 · 여기까지 세 개의 다른 목록 어휘가 한 사이트에 생긴다. */
.dh-items{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:0 26px}
.dh-items li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;
  font-weight:550;color:var(--ink2)}
.dh-items li::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;
  background:var(--accent);vertical-align:middle;transform:translateY(-1px)}
.dh-foot{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:20px}
.dh-foot .pz2{display:flex;align-items:baseline;gap:11px}
.dh-foot .pz2 b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.dh-foot .pz2 b.soon{font-size:15px;color:var(--ink3)}
.dh-foot .pz2 s{text-decoration:none;font-size:13px;font-weight:500;color:var(--ink3)}
.dh-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.1em;color:var(--accent)}
.dh-go span{transition:transform .35s var(--e)}
.dh-go:hover span{transform:translateX(5px)}

/* ── 보안 진단(/diagnostics/security) ──────────────────────────
   이 페이지는 표가 주인공이다. 표를 상자로 감싸지 않고 헤어라인으로만 나눈다.
   좁은 화면에서는 가로 스크롤 대신 행을 접어 세로로 쌓는다 —
   가로 스크롤 표는 모바일에서 절반이 안 읽힌다. */
/* 범례는 네 등급이다. .prc-rule 의 3열을 물려받으면 마지막 하나가 혼자 떨어진다. */
.ds-legend dl{grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-legend dl > div{padding:26px 22px 26px}
.ds-legend dt{display:flex;align-items:baseline;gap:9px}
.ds-legend dt b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}
.ds-legend-note{margin:16px 0 26px;font-size:13px;font-weight:500;color:var(--ink3)}

.dsb{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;padding:3px 8px;white-space:nowrap;border:1px solid transparent}
.dsb-l2,.dsb-obs{color:var(--forest);border-color:#9EC6C1;background:rgba(11,89,82,.07)}
.dsb-part,.dsb-ext{color:var(--steel);border-color:#A6C4D8;background:rgba(32,100,140,.08)}
.dsb-l3,.dsb-del{color:var(--accent-d);border-color:#E9B2A2;background:var(--accent-soft)}
.dsb-out{color:var(--ink3);border-color:var(--line2);background:var(--tint)}
.sec-dk .dsb-l2,.sec-dk .dsb-obs{color:#84D3C8;border-color:#2F5B55;background:rgba(132,211,200,.09)}
.sec-dk .dsb-part,.sec-dk .dsb-ext{color:var(--steel-lt);border-color:#2C4757;background:rgba(107,166,206,.10)}
.sec-dk .dsb-l3,.sec-dk .dsb-del{color:#F09274;border-color:#6B3527;background:rgba(240,146,116,.10)}
.sec-dk .dsb-out{color:var(--dk-fg3);border-color:var(--dk-line);background:rgba(255,255,255,.04)}

.ds-tbl{margin-top:34px;border-top:1px solid var(--ink)}
.ds-hd,.ds-row{display:grid;grid-template-columns:46px minmax(0,1fr) 92px 116px;gap:0 20px;align-items:baseline}
.ds-hd{padding:12px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3)}
.ds-row{padding:14px 0;border-bottom:1px solid var(--line)}
.ds-row .no{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}
.ds-row .nm b{font-size:15.5px;font-weight:650;letter-spacing:-.025em}
.ds-row .nm em{display:block;font-style:normal;font-size:12.5px;font-weight:500;
  color:var(--ink3);margin-top:3px;line-height:1.55}
.ds-row .rk{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em}
.r-critical{color:var(--accent-d)}
.r-high{color:var(--ink);font-weight:700}
.r-medium{color:var(--ink2);font-weight:600}
.r-low{color:var(--ink3);font-weight:500}
/* 판정 불가 · 범위 밖은 한 톤 물린다. 표에서 눈이 먼저 갈 곳은 판정되는 쪽이다. */
.ds-row.g-out{opacity:.72}

.ds-hdr .ds-hd,.ds-hdr .ds-row{grid-template-columns:230px 148px minmax(0,1fr) 88px}
.ds-hdr .ds-row .nm b{font-size:13px;letter-spacing:0;word-break:break-all}
.ds-hdr .nm2{font-size:13.5px;font-weight:500;color:var(--ink2)}
.ds-hdr .vl{font-size:12.5px;font-weight:500;color:var(--ink2);word-break:break-word}

/* OWASP */
.ds-ow{margin-top:34px;border-top:1px solid var(--dk-line)}
.ds-ow-row{display:grid;grid-template-columns:52px 220px 128px minmax(0,1fr);gap:8px 22px;
  align-items:baseline;padding:17px 0;border-bottom:1px solid var(--dk-line)}
.ds-ow-row .c{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--accent)}
.ds-ow-row .t b{font-size:15.5px;font-weight:650;letter-spacing:-.025em;color:var(--dk-fg)}
.ds-ow-row .t em{display:block;font-style:normal;font-size:11.5px;font-weight:500;
  color:var(--dk-fg3);margin-top:3px;line-height:1.45}
.ds-ow-row .d{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--dk-fg3)}
.ds-ow-row .w{font-size:14px;line-height:1.7;font-weight:500;color:var(--dk-fg2)}
.ds-ow-row .w .dsb{margin-left:9px}

/* L2 / L3 */
.ds-l3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:38px}
.ds-l3 > div{padding-left:18px;border-left:2px solid var(--line2)}
.ds-l3 > div:last-child{border-left-color:var(--accent)}
.ds-l3 .t{margin:0 0 10px;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--ink3)}
.ds-l3 > div:last-child .t{color:var(--accent)}
.ds-l3 p{margin:0;font-size:15px;line-height:1.8;font-weight:500;color:var(--ink2)}

/* FAQ */
/* 문답 목록. 진단 상세에서 시작했지만 메인 · 요금 · 회사가 같이 쓴다 —
   FAQPage 스키마를 붙인 절은 전부 이 모양이다. */
/* 문의 폼(/apply) 아래 붙는 FAQ. 폼과 문답이 맞닿으면 폼의 마지막 줄처럼 읽혀서
   여백을 더 준다. 문답 자체는 진단 페이지의 .ds-faq 를 그대로 물려 쓴다 —
   같은 물건에 두 가지 모양을 만들면 페이지마다 다른 사이트처럼 보인다. */
.ap-faq{margin-top:56px;padding-top:8px}

.ds-faq{margin:34px 0 0;border-top:1px solid var(--line)}
.ds-faq > div{padding:22px 0;border-bottom:1px solid var(--line)}
.ds-faq dt{font-size:17px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.ds-faq dt::before{content:"Q.";font-family:var(--mono);font-size:13px;color:var(--accent);margin-right:9px}
/* 질문을 h3 로 올렸다(2026-08-27). dl 의 의미는 그대로 두고 **문서 구조만** 바로잡은
   것이다 — 답변 엔진은 문서를 헤딩으로 쪼개는데, dt 는 헤딩이 아니라서 FAQ 여덟 개가
   구조상 안 보였다. 우리가 파는 AEO 항목이 정확히 그걸 본다.
   display:inline 이라 "Q." 접두(::before 는 dt 에 남아 있다)와 한 줄로 붙는다. */
.ds-faq dt h3{display:inline;font:inherit;letter-spacing:inherit;margin:0}
.ds-faq dd{margin:0;font-size:15px;line-height:1.82;font-weight:500;color:var(--ink2)}

/* 먹색 섹션 위의 문답 — **답변이 읽히지 않고 있었다.**
   `.ds-faq` 는 밝은 지면에서 태어난 블록이라 답변에 `--ink2`(#39424C)를 박아 두었는데,
   `/check/{code}` 25장은 FAQ 를 `.sec-dk`(#0A0D10) 위에 얹는다. 먹 위의 먹이라
   측정값이 **1.91:1** 이었다(WCAG 본문 기준 4.5:1). 질문은 상속색이라 밝고 답만 사라져,
   화면이 "질문만 있고 답이 없는 것"처럼 보인다.
   같은 페이지 전체를 훑어 4.5:1 미만은 이 답변 넷뿐이었다.
   경계선도 같은 방향으로 틀렸다 — `--line`(#E4E9EE)이 먹 위에서 흰 줄이 된다. */
.sec-dk .ds-faq{border-top-color:var(--dk-line)}
.sec-dk .ds-faq > div{border-bottom-color:var(--dk-line)}
.sec-dk .ds-faq dd{color:var(--dk-fg2)}

@media (max-width:1080px){ .ds-legend dl{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .ds-legend dl{grid-template-columns:1fr}
  .ds-hd{display:none}
  .ds-row{grid-template-columns:38px minmax(0,1fr) auto;gap:6px 14px;padding:16px 0}
  .ds-row .rk{grid-column:3;grid-row:1}
  .ds-row .gr{grid-column:2 / -1;justify-self:start;margin-top:4px}
  .ds-hdr .ds-row{grid-template-columns:minmax(0,1fr) auto}
  .ds-hdr .ds-row .nm{grid-column:1}
  .ds-hdr .ds-row .rk{grid-column:2;grid-row:1;justify-self:end}
  .ds-hdr .ds-row .nm2,.ds-hdr .ds-row .vl{grid-column:1 / -1}
  .ds-ow-row{grid-template-columns:46px minmax(0,1fr);gap:6px 16px}
  .ds-ow-row .d{grid-column:2}
  .ds-ow-row .w{grid-column:1 / -1}
  .ds-l3{grid-template-columns:1fr;gap:26px}
  .dh-foot{margin-top:16px}
}

/* ── 진단 영역 페이지(/diagnostics/seo · /performance) ────────
   보안 진단 페이지가 만든 것(.ds-tbl · .ds-ow · .ds-l3 · .ds-faq · .dsb)을 그대로
   물려 쓴다. 영역마다 새 어휘를 만들면 같은 사이트가 페이지마다 다르게 보인다.
   여기서 새로 잡는 것은 셋뿐이다 — 표 안의 링크, 4단계 블록, 2열로 좁힌 행. */

/* 항목 표의 이름은 /check/{code} 로 가는 링크다. 링크라는 게 보여야 통로가 된다 —
   호버로만 뜨면 스캔 결과의 상위 3건과 달리 눌러 볼 생각을 안 한다. */
.dg-tbl .ds-row .nm a{display:inline-block;border-bottom:1px solid var(--line2);
  transition:border-color .3s var(--e),color .3s var(--e)}
.dg-tbl .ds-row .nm a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.dg-tbl .ds-row .nm em{opacity:.85}

/* 유료 범위 표. 이름 · 설명 2열이라 보안 페이지의 4열 그리드를 다시 잡는다. */
.dg-paid .ds-ow-row{grid-template-columns:250px minmax(0,1fr)}

/* `.ds-ow` 는 보안 페이지에서 **어두운 절 전용**으로 태어났다(--dk-* 색). 성능 페이지는
   같은 표를 밝은 절에 두므로 색을 여기서 되돌린다 — 안 하면 흰 바탕에 흰 글자가 된다.
   원본 규칙은 건드리지 않는다. 보안 페이지가 그 색으로 이미 서 있다. */
.ms-sec:not(.sec-dk) .ds-ow{border-top-color:var(--ink)}
.ms-sec:not(.sec-dk) .ds-ow-row{border-bottom-color:var(--line)}
.ms-sec:not(.sec-dk) .ds-ow-row .t b{color:var(--ink)}
.ms-sec:not(.sec-dk) .ds-ow-row .t em,
.ms-sec:not(.sec-dk) .ds-ow-row .d{color:var(--ink3)}
.ms-sec:not(.sec-dk) .ds-ow-row .w{color:var(--ink2)}

/* 네 단계 — 크롤 · 색인 · 순위 · 클릭. 카드가 아니라 왼쪽 획으로 세운다.
   이 사이트에 상자가 없다(.ds-l3 · .rs-code 와 같은 규칙). */
.dg-stage{margin-top:38px;border-top:1px solid var(--line)}
.dg-st{padding:26px 0 26px 20px;border-bottom:1px solid var(--line);border-left:2px solid var(--line2)}
.dg-st:hover{border-left-color:var(--accent)}
.dg-st .h{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;margin:0 0 14px}
.dg-st .h .n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}
.dg-st .h b{font-size:21px;font-weight:700;letter-spacing:-.035em}
.dg-st .h em{font-style:normal;font-size:14.5px;font-weight:500;color:var(--ink3)}
.dg-st .s,.dg-st .d{margin:0;font-size:15px;line-height:1.82;font-weight:500;color:var(--ink2)}
.dg-st .s{margin-bottom:9px;color:var(--ink3)}
/* 라벨이 국문이다. 영문 킥커의 .14em 자간을 그대로 쓰면 글자가 흩어져 읽힌다
   (.rs-item 라벨에서 같은 판단을 했다). */
.dg-st .lb{display:inline-block;min-width:104px;font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.02em;color:var(--ink3)}
.dg-st .d .lb{color:var(--accent)}

/* CWV 표는 지표 · 기준값 · 원인 3열이다. 보안 페이지의 '2021 대비' 칼럼이 없다. */
.pf-cwv .ds-ow-row{grid-template-columns:64px 260px minmax(0,1fr)}

@media (max-width:900px){
  .dg-paid .ds-ow-row,.pf-cwv .ds-ow-row{grid-template-columns:minmax(0,1fr)}
  .pf-cwv .ds-ow-row .c{grid-column:1}
  .dg-st{padding:22px 0 22px 16px}
  .dg-st .h b{font-size:19px}
  .dg-st .lb{display:block;min-width:0;margin-bottom:2px}
}

/* ── 항목 색인(/check) ─────────────────────────────────────────
   무료 스캔 결과의 자물쇠가 도착하는 곳이다. 24개(→130개) 문단이 한 화면에
   쌓이므로, 표가 아니라 **읽히는 목록**으로 짠다. 배지와 심각도 눈금은
   /diagnostics/security 와 같은 것을 쓴다(.rk · .r-critical…) — 같은 사이트에서
   같은 항목이 페이지마다 다른 등급으로 보이면 그날로 신뢰가 끝난다. */
.ck-legend dt{display:flex;align-items:baseline;gap:9px}
.ck-legend dt a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--line2)}
.ck-legend dt a:hover{border-bottom-color:var(--accent)}
.ck-legend dt b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}

/* 목차 — 24개 칩. 원고가 있는 항목은 제 페이지로, 없는 항목은 이 문서의 앵커로 간다
   (`check_index.php` 의 $href). 두 종류가 같은 모양인 것은 의도다 — 방문자에게는
   둘 다 "그 항목으로 가는 링크"이고, 승격 여부는 우리 사정이다. */
.ck-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ck-chip{display:inline-block;padding:7px 13px;font-size:13.5px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink2);text-decoration:none;
  border:1px solid var(--line);background:var(--paper);transition:.2s var(--e)}
.ck-chip:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
/* 영역을 색이 아니라 왼쪽 획으로 구분한다. 칩 24개를 세 가지 배경으로 칠하면
   목차가 본문보다 시끄러워진다. */
.ck-chip{border-left-width:3px}
.ck-chip.a-sec{border-left-color:var(--accent)}
.ck-chip.a-seo{border-left-color:var(--forest)}
.ck-chip.a-perf{border-left-color:var(--steel)}

/* ── 제작 사례(/portfolio) 필터 자리 ────────────────────────────
   사례가 0건이라 **누를 수 없는 칩**이다. 링크로 그리면 눌렀을 때 아무 일도
   일어나지 않고, 그 자체가 깨진 화면으로 읽힌다. a 가 아니라 span 이고
   hover 도 주지 않는다 — 사례가 올라오는 날 a 로 바꾸고 .ck-chip 의 hover 를 물려 쓴다. */
.pf-sub{margin:34px 0 14px;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--dk-fg2)}
.pf-sub:first-of-type{margin-top:30px}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{display:inline-block;padding:7px 13px;font-size:13.5px;font-weight:600;
  letter-spacing:-.02em;color:var(--dk-fg3);border:1px solid var(--dk-line);
  border-left-width:3px;border-left-color:var(--dk-fg3);background:transparent;cursor:default}
.pf-note{margin:28px 0 0;font-size:14.5px;line-height:1.75;color:var(--dk-fg2)}
/* 밝은 절에서도 쓴다(사례가 아직 없는 이유 절의 끝문장). */
.ms-sec:not(.sec-dk) .pf-note{color:var(--ink2)}
.ms-sec:not(.sec-dk) .pf-sub{color:var(--ink)}
.ms-sec:not(.sec-dk) .pf-chip{color:var(--ink2);border-color:var(--line);border-left-color:var(--ink3)}
@media(max-width:640px){.pf-chip{font-size:13px;padding:6px 11px}}

.ck-sec .ck-cnt{font-family:var(--mono);font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--ink3);margin-left:10px;vertical-align:middle}
.sec-dk .ck-cnt{color:var(--dk-fg3)}

.ck-list{margin-top:36px;border-top:1px solid var(--ink)}
.sec-dk .ck-list{border-top-color:var(--dk-fg3)}
.ck-item{position:relative;padding:24px 0 26px;border-bottom:1px solid var(--line)}
.sec-dk .ck-item{border-bottom-color:var(--dk-line)}
.ck-hd{display:grid;grid-template-columns:46px minmax(0,1fr) 60px;gap:0 20px;align-items:baseline}
.ck-hd .no{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}
.sec-dk .ck-hd .no{color:var(--dk-fg3)}
.ck-hd h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.035em}
.sec-dk .ck-hd h3{color:var(--dk-fg)}
.ck-hd .rk{justify-self:end}
/* 어두운 절에서는 심각도 색이 죽는다. 네 단계를 밝은 쪽 값으로 다시 잡는다. */
.sec-dk .ck-hd .r-critical{color:#F09274}
.sec-dk .ck-hd .r-high{color:var(--dk-fg)}
.sec-dk .ck-hd .r-medium{color:var(--dk-fg2)}
.sec-dk .ck-hd .r-low{color:var(--dk-fg3)}
.ck-item > p{margin:12px 0 0 66px;font-size:15.5px;line-height:1.85;
  font-weight:500;color:var(--ink2);max-width:74ch}
.sec-dk .ck-item > p{color:var(--dk-fg2)}
/* 슬러그는 장식이 아니라 주소다 — 개별 페이지로 승격되면 이게 그대로 URL 이 된다.
   지금부터 눈에 보이게 둬야 링크를 걸어 두시는 분이 생긴다. */
.ck-slug{display:inline-block;margin:10px 0 0 66px;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;color:var(--ink3);text-decoration:none;opacity:.55;transition:.2s var(--e)}
.ck-item:hover .ck-slug{opacity:1;color:var(--accent)}
.sec-dk .ck-slug{color:var(--dk-fg3)}
.ck-more{margin:26px 0 0;font-size:15px;font-weight:600}

.ck-line .notice + .notice{margin-top:16px}

/* 개별 페이지로 승격된 항목은 제목이 링크다. 색인 안에서 유일하게 페이지를
   떠나는 링크라, 밑줄을 빼는 대신 호버에서 강조색으로 바꾼다. */
.ck-hd h3 a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--line2)}
.ck-hd h3 a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.sec-dk .ck-hd h3 a{border-bottom-color:var(--dk-fg3)}
.sec-dk .ck-hd h3 a:hover{color:#F09274;border-bottom-color:#F09274}
/* 슬러그 자리에 들어가는 이동 링크. 항상 보인다 — 호버로만 뜨면 이게 통로라는 걸
   마우스를 올린 사람만 알게 된다. */
.ck-slug.go{opacity:1;color:var(--accent);letter-spacing:0}
.sec-dk .ck-slug.go{color:#F09274}

@media (max-width:900px){
  .ck-hd{grid-template-columns:34px minmax(0,1fr) auto;gap:4px 12px}
  .ck-hd h3{font-size:17.5px}
  .ck-hd .rk{grid-column:3;grid-row:1}
  .ck-item > p,.ck-slug{margin-left:46px}
  .ck-chip{font-size:13px;padding:6px 11px}
}

/* ── 항목 설명 개별 페이지(/check/{code}) ──────────────────────
   색인이 목록이라면 여기는 글이다. 24장이 같은 틀을 쓰므로 **틀이 눈에 띄면
   24번 눈에 띈다** — 그래서 상자·아이콘을 더하지 않고 이미 있는 것(.rs-code ·
   .ds-faq · .ck-chip · .rk)을 그대로 물려 쓴다. 새로 만든 것은 배지 줄과
   확인 단계 목록 둘뿐이다. */
.cd-head .kick .sep{margin:0 7px;opacity:.5}
.cd-badges{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:22px 0 0}
.cd-b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 9px;border:1px solid var(--line2);color:var(--ink3)}
/* 심각도 배지. `.r-critical` 등은 색만 정의돼 있고 자간·크기는 `.ds-row .rk` ·
   `.sc-item .rk` 안에만 있다 — 여기서 다시 잡지 않으면 심각도만 본문 크기로 튄다.
   눈금은 /diagnostics/security · 스캔 결과와 같은 네 단계다. */
.cd-badges .rk{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 9px;border:1px solid currentColor}
/* 영역은 칩과 같은 왼쪽 획으로 표시한다 — 색인의 .ck-chip 과 같은 규칙이라
   같은 항목이 두 화면에서 같은 색을 갖는다. */
.cd-b.a-sec{border-left:3px solid var(--accent)}
.cd-b.a-seo{border-left:3px solid var(--forest)}
.cd-b.a-perf{border-left:3px solid var(--steel)}
.cd-slug{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:0}

/* 한 줄 정의 — 이 페이지에서 가장 인용될 문단이다. 본문보다 한 단계 크게 둔다. */
.cd-def{max-width:840px;margin:30px 0 0;padding-left:18px;border-left:2px solid var(--accent);
  font-size:18px;line-height:1.9;font-weight:500;color:var(--ink2)}
.cd-def-sec{padding-bottom:0}

.cd-para{max-width:840px;margin-top:30px}
.cd-para p{margin:0 0 18px;font-size:16px;line-height:1.92;font-weight:500;color:var(--ink2)}
.cd-para p:last-child{margin-bottom:0}
.sec-dk .cd-para p{color:var(--dk-fg2)}

/* 확인 단계. 번호를 왼쪽에 세우면 "순서대로 하면 된다"가 글보다 먼저 읽힌다. */
.cd-steps{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--ink)}
.cd-steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 20px;
  padding:24px 0;border-bottom:1px solid var(--line)}
.cd-steps .n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}
.cd-steps .c b{display:block;font-size:17px;font-weight:700;letter-spacing:-.03em}
.cd-steps .c p{margin:9px 0 0;font-size:15.5px;line-height:1.85;font-weight:500;color:var(--ink2)}
.cd-steps .rs-code{margin-top:14px}

/* 조치. 단계가 아니라 선택지라서 번호를 붙이지 않는다 —
   서버 구성마다 적용할 자리가 달라 위에서부터 순서대로 하는 것이 아니다.
   확인법 절과 나란히 밝은 절이 둘 이어지므로 여기만 바탕을 한 톤 깐다. */
.cd-fix-sec{background:var(--tint)}
.cd-fix{margin-top:34px;border-top:1px solid var(--ink)}
.cd-fix-i{padding:24px 0;border-bottom:1px solid var(--line)}
.cd-fix-i b{display:block;font-size:17px;font-weight:700;letter-spacing:-.03em}
.cd-fix-i p{margin:9px 0 0;font-size:15.5px;line-height:1.85;font-weight:500;color:var(--ink2)}
.cd-fix-i .rs-code{margin-top:14px}
.cd-note{margin-top:26px}
.cd-line .notice{margin-top:0}
.cd-rel-sec .ck-toc{margin-top:26px}

/* 어두운 절에 코드가 들어오는 경우(위험 시나리오의 로그 예시 등). */
.sec-dk .rs-code{background:rgba(255,255,255,.05);border-left-color:var(--dk-fg3);color:var(--dk-fg2)}

@media (max-width:900px){
  .cd-badges{gap:7px}
  .cd-slug{margin-left:0;width:100%}
  .cd-def{font-size:16.5px;padding-left:14px}
  .cd-steps li{grid-template-columns:34px minmax(0,1fr);gap:0 12px}
  .cd-steps .c b,.cd-fix-i b{font-size:16px}
}

/* ── 무료 스캔(/scan · /scan/r/{token}) ────────────────────────
   화면이 셋이지만 셋 다 같은 히어로 골격(.svc-head) 위에 얹는다. 대기 화면에서
   결과 화면으로 바뀔 때 레이아웃이 통째로 튀지 않게 하려는 것이다 — 스캐너를
   보고 있는 30초 동안 화면이 두 번 재조립되면 뭔가 잘못된 것처럼 보인다. */
.sc-form{display:flex;gap:10px;margin:30px 0 0;max-width:620px}
.sc-form input[type=text]{flex:1;min-width:0;padding:15px 18px;font-size:16px;font-weight:600;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;
  font-family:inherit;letter-spacing:-.01em}
.sc-form input[type=text]:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.sc-form input[type=text]::placeholder{color:var(--ink3);font-weight:500}
.sc-form button{flex:0 0 auto;white-space:nowrap}
/* 허니팟과 화면 밖 라벨. .ap-form 안에만 있던 규칙이라 여기서 다시 잡는다 —
   상속되지 않는 것을 상속되는 줄 알고 두면 봇 칸이 화면에 그대로 뜬다. */
.sc-form .hp,.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sc-note{margin:14px 0 0;font-size:13.5px;font-weight:500;color:var(--ink3);line-height:1.75}
.sc-soon{margin-top:28px}

/* 무료 / 유료 대비. 두 칸을 나란히 두는 것 자체가 설명이다. */
.sc-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:36px}
.sc-cmp > div{padding-left:18px;border-left:2px solid var(--line2)}
.sc-cmp > div:last-child{border-left-color:var(--accent)}
.sc-cmp .t{margin:0 0 12px;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--ink3)}
.sc-cmp > div:last-child .t{color:var(--accent)}
.sc-cmp ul{margin:0;padding:0;list-style:none}
.sc-cmp li{position:relative;padding:7px 0 7px 20px;font-size:15px;line-height:1.7;
  font-weight:500;color:var(--ink2)}
.sc-cmp .lock li::before{content:"🔒";font-size:10px;position:absolute;left:0;top:10px}

/* 대기 화면 — 단계 표시. 스피너 하나보다 "지금 어디쯤인지"가 낫다. */
.sc-steps{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.sc-steps li{position:relative;flex:1 1 0;min-width:120px;padding:0 0 0 0;
  font-size:13px;font-weight:600;color:var(--ink3);letter-spacing:-.01em}
.sc-steps li span{display:block;padding:12px 0 0}
.sc-steps li::before{content:"";display:block;height:3px;background:var(--line);
  margin-right:3px;transition:background .5s var(--e)}
.sc-steps li.on{color:var(--ink)}
.sc-steps li.on::before{background:var(--accent)}

/* 진행 막대. 92% 로 수렴하고 100% 에 닿지 않는다 — 다 찬 막대 앞에서 기다리게 하면
   그 뒤로 이 화면의 어떤 표시도 안 믿는다(scan_result.php 의 draw()). */
.sc-prog{margin:30px 0 4px;height:3px;background:var(--line);overflow:hidden}
.sc-prog i{display:block;height:100%;width:6%;background:var(--accent);
  transition:width .35s var(--e)}
/* 막대 바로 아래 붙는 단계 표시. 기본 34px 은 막대가 없을 때의 값이다. */
.sc-prog + .sc-steps{margin-top:12px}
/* 경과 초. 진행률은 추정이지만 이 숫자는 관찰이다 — 멈춘 화면과 구별하는 것이 이 값이다. */
.sc-el{margin:14px 0 0;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){
  .sc-prog i{transition:none}
}

/* 결과 — 종합 등급 하나와 영역 셋. 종합을 크게 두는 이유는 그게 공유될 숫자라서다. */
.sc-grade{display:grid;grid-template-columns:1.1fr repeat(3,minmax(0,1fr));gap:0;
  margin-top:34px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.sc-grade > div{padding:24px 22px 26px;border-left:1px solid var(--line)}
.sc-grade > div:first-child{border-left:0;padding-left:0}
.sc-grade i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.sc-grade b{display:block;margin:8px 0 4px;font-size:44px;font-weight:800;
  letter-spacing:-.05em;line-height:1}
.sc-grade .tot b{font-size:64px}
.sc-grade span{display:block;font-size:13px;font-weight:500;color:var(--ink3);line-height:1.6}
.sc-grade .g-a,.sc-grade .g-b{color:var(--st-pass)}
/* C 는 "주의" 수준이다. 파랑으로 그리면 등급이 정보처럼 읽힌다. */
.sc-grade .g-c{color:var(--st-warn)}
.sc-grade .g-d,.sc-grade .g-f{color:var(--st-fail)}

/* 상위 3건 — 누를 수 있는 줄이다. 링크라는 게 보여야 통로가 된다. */
.sc-top{margin-top:30px;border-top:1px solid var(--ink)}
.sc-item{display:grid;grid-template-columns:46px minmax(0,1fr) 92px;gap:0 20px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.2s var(--e)}
.sc-item:hover{padding-left:8px;background:var(--tint)}
.sc-item .no{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink3)}
.sc-item .nm{font-size:17px;font-weight:650;letter-spacing:-.03em}
.sc-item:hover .nm{color:var(--accent-d)}
.sc-item .rk{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  justify-self:end}

/* 잠금 블록. 벽이 아니라 통로로 보여야 해서 회색으로 죽이지 않는다. */
/* ── 점수 시계열 차트 ────────────────────────────────────────
   서버가 그린 인라인 SVG 다. 색과 굵기는 여기서 준다 — 마크업에 인라인 스타일을
   박으면 다크 섹션이나 인쇄에서 손댈 수가 없다.

   **강조(emphasis) 한 계열**이다. 총점만 액센트로 긋는다. 영역별 3색은 쓰지 않는다 —
   브랜드 보조색을 팔레트 검증기에 넣으면 정상 시력에서도 ΔE 9.8 로 기준(15) 미달이다.

   격자선을 두지 않는다. 등급 밴드가 이미 가로 기준을 준다. */
.sc-chart{display:block;width:100%;height:auto;max-width:660px;margin:0 auto}
.sc-chart .ax{stroke:var(--line2);stroke-width:1}
.sc-chart .ln{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
/* 겹치는 점이 서로 먹지 않도록 지면색 링을 두른다(테두리가 아니라 간격이다) */
.sc-chart .dt{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.sc-chart .dt.on{fill:var(--accent-d)}
.sc-chart .bd{font-family:var(--mono);font-size:10px;font-weight:700;fill:var(--ink3)}
.sc-chart .xl{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--ink3)}
.sc-chart .vl{font-family:var(--mono);font-size:15px;font-weight:700;fill:var(--accent-d)}

/* ── 점수 이력(/scan/h/{token}) ────────────────────────────────
   결과 화면(.sc-res)과 같은 골격 위에 얹는다. 두 화면을 오갈 때 히어로가
   재조립되지 않게 하려는 것이다.

   방향은 **색만으로 말하지 않는다.** 개선/악화라는 낱말과 +/− 부호가 항상 같이 간다 —
   적록색각에서 forest ↔ accent-d 가 갈라진다는 보장이 없고, 색이 유일한 단서면
   그 사람에게는 이 화면이 통째로 침묵한다. */
.sc-hist-link{margin:20px 0 0;font-size:15.5px;font-weight:500;color:var(--ink2);line-height:1.8}
.sc-hist-link b{color:var(--ink);font-weight:700}

.d-up{color:var(--forest)}
.d-dn{color:var(--accent-d)}
.d-mut{color:var(--ink3);font-weight:500}

/* 이력 화면은 칸이 셋이다(현재 · 직전 대비 · 실패). 네 칸짜리 격자를 그대로 쓰면
   오른쪽 한 칸이 비어 표가 잘린 것처럼 보인다. */
.sc-grade.n3{grid-template-columns:1.1fr repeat(2,minmax(0,1fr))}
/* 첫 검사에는 "직전 대비"가 없다. 빈 칸을 남기면 표가 잘린 것처럼 보이므로 둘로 나눈다. */
.sc-grade.n2{grid-template-columns:1.1fr minmax(0,1fr)}

/* 차트는 위아래 선으로만 가둔다. 카드로 감싸면 본문에서 떨어져 나와
   "삽화"로 읽히는데, 이 그림은 삽화가 아니라 이 화면의 본문이다. */
.sc-chart-box{max-width:760px;padding:22px 0 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* 회귀 알림 — 이 화면의 정점. 잠금 블록(.sc-lock)과 **다르게** 보여야 한다.
   저쪽은 "더 있습니다"이고 이쪽은 "지금 무너졌습니다"다. 테두리를 두르지 않고
   왼쪽 굵은 선 하나로 둔다 — 상자에 갇히면 공지처럼 읽혀 넘어간다. */
.sc-reg{padding:28px 0 28px 26px;border-left:3px solid var(--accent);background:var(--tint)}
.sc-reg .t{margin:0 0 12px;font-size:21px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.sc-reg .t b{color:var(--accent-d)}
.sc-reg p{margin:0 0 12px;padding-right:26px;font-size:15.5px;line-height:1.85;
  font-weight:500;color:var(--ink2)}
.sc-reg p:last-of-type{margin-bottom:0}
.sc-reg b{color:var(--ink)}
.sc-reg .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* 차트를 못 보는 사람에게도 이 화면은 완결이어야 한다. 표가 그 완결이다 —
   `.doc` 안에만 있던 표 규칙은 상속되지 않으므로 여기서 다시 잡는다. */
.sc-hist{overflow-x:auto;margin-top:26px;border:1px solid var(--line)}
.sc-hist table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.sc-hist thead th{background:var(--tint);text-align:left;padding:12px 16px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ink3);border-bottom:1px solid var(--line2);white-space:nowrap}
.sc-hist tbody td{padding:13px 16px;border-bottom:1px solid var(--line);
  color:var(--ink2);font-weight:500;vertical-align:top}
.sc-hist tbody tr:last-child td{border-bottom:none}
/* 표는 최신이 맨 위다 — 이력을 볼 때 궁금한 것은 마지막 줄이 아니라 지금이다.
   배경으로 강조하지 않는다. 그 자리는 "내 검사" 줄이 쓴다. */
.sc-hist tbody tr:first-child td{color:var(--ink)}
.sc-hist td b{font-weight:750;color:var(--ink)}
.sc-hist td span{display:inline-block;font-weight:700;font-size:13.5px;margin-right:8px}
.sc-hist td em{display:block;margin-top:3px;font-style:normal;font-size:13px;
  line-height:1.65;color:var(--ink3)}
/* 심각도 개수는 이름이 아니다. 모노로 빼서 낱말과 섞이지 않게 한다. */
.sc-hist td em.w{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
/* 이력은 호스트로 묶으므로 남이 돌린 검사가 같은 표에 섞인다.
   **어느 줄이 내 것인지**가 이 화면의 유일한 모호함이었다. 그 줄만 표시한다. */
.sc-hist tr.me td{background:var(--tint);color:var(--ink)}
.sc-hist td i{display:inline-block;margin-left:8px;font-style:normal;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  color:var(--accent);vertical-align:1px}

@media (max-width:900px){
  .sc-grade.n3,.sc-grade.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-reg{padding:22px 0 22px 18px}
  .sc-reg p{padding-right:18px}
}

.sc-lock{margin-top:34px;padding:28px 30px;border:1.5px solid var(--ink);background:var(--tint)}
.sc-lock .t{margin:0 0 10px;font-size:19px;font-weight:750;letter-spacing:-.035em}
.sc-lock .t .ic{margin-right:6px}
.sc-lock p{margin:0;font-size:15px;line-height:1.8;font-weight:500;color:var(--ink2)}
.sc-lock .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
/* 잠긴 실패의 심각도 분포. 이름은 안 나가고 **무게만** 나간다 —
   `그 외 8건` 은 미룰 수 있지만 `Critical 2` 는 모르는 채로 둘 수 없다.
   제목 줄 안에 들어가되 제목보다 작게 둔다. 이건 근거이지 헤드라인이 아니다.
   색은 `/diagnostics/security` 와 같은 `.r-critical…` 을 그대로 쓴다 —
   같은 사이트에서 심각도가 화면마다 다른 색이면 그 자체가 결함이다. */
.sc-lock .t .sev{display:inline-flex;gap:10px;flex-wrap:wrap;margin-left:12px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  vertical-align:middle}
.sc-lock .t .sev b{font-weight:700}
@media (max-width:600px){
  .sc-lock .t .sev{display:flex;margin:8px 0 0}
}

/* 경고 블록. 잠금(.sc-lock)과 **위계가 다르다** — 저쪽은 "상품을 사면 열립니다"이고
   이쪽은 "지금 깨진 건 아닙니다"다. 같은 굵기로 그리면 실패 1건이 경고 5건에 묻힌다.
   그래서 테두리를 얇고 흐리게, 배경은 깔지 않는다. 심각도 배지는 잠금과 같은 규칙을
   그대로 쓴다 — 한 화면에서 같은 등급이 다르게 보이면 그 자체가 결함이다. */
.sc-warn{margin-top:24px;padding:22px 24px;border:1px solid var(--line)}
.sc-warn .t{margin:0 0 8px;font-size:17px;font-weight:750;letter-spacing:-.035em}
.sc-warn .t .ic{margin-right:6px}
.sc-warn p{margin:0;font-size:15px;line-height:1.8;font-weight:500;color:var(--ink2)}
.sc-warn .t .sev{display:inline-flex;gap:10px;flex-wrap:wrap;margin-left:12px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  vertical-align:middle}
.sc-warn .t .sev b{font-weight:700}
@media (max-width:600px){
  .sc-warn .t .sev{display:flex;margin:8px 0 0}
  .sc-warn{padding:18px 16px}
}

/* 권장 서비스. 잠금 블록과 **다르게** 보여야 한다 — 저쪽은 "더 있습니다",
   이쪽은 "이걸 먼저 보십시오"다. 테두리를 얇게 두고 배경을 깔지 않아
   결과 목록의 연장으로 읽히게 한다. 요금표와 같은 .prc-rows 를 재사용하므로
   카드 스타일을 새로 만들지 않는다. */
.sc-advice{margin-top:34px;padding:26px 0 0;border-top:1.5px solid var(--ink)}
.sc-advice .t{margin:0 0 8px;font-size:19px;font-weight:750;letter-spacing:-.035em}
.sc-advice .d{margin:0 0 18px;font-size:15px;line-height:1.8;font-weight:500;color:var(--ink2)}
.sc-advice .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

@media (max-width:900px){
  .sc-form{flex-direction:column}
  .sc-cmp{grid-template-columns:1fr;gap:26px}
  .sc-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-grade > div{padding:20px 16px 22px}
  .sc-grade > div:nth-child(-n+2){border-top:0}
  .sc-grade > div:nth-child(odd){border-left:0;padding-left:0}
  .sc-grade .tot b{font-size:52px}
  .sc-item{grid-template-columns:34px minmax(0,1fr) auto;gap:4px 12px}
  .sc-lock{padding:22px 20px}
}

/* ── 리포트 샘플(/report-sample) ───────────────────────────────
   이 페이지는 '문서처럼 보이는 것'이 요점이다. 다만 리포트를 흉내 낸 가짜 PDF 뷰어를
   만들지는 않는다 — 진짜 문서가 아닌데 진짜처럼 보이게 하면 그게 곧 이 페이지가
   경계하는 일이 된다. 내용의 구조만 그대로 옮긴다. */

/* 표본 고지 — 스크롤해야 나오면 고지가 아니다. 히어로 바로 아래 띠로 둔다. */
.rs-disc{padding:26px 0;background:var(--tint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rs-disc p{margin:0;max-width:860px;font-size:14.5px;line-height:1.85;font-weight:500;
  color:var(--ink2);padding-left:16px;border-left:2px solid var(--accent)}
.rs-disc b{color:var(--ink)}
.rs-foot{margin:26px 0 0;font-size:12.5px;font-weight:500;color:var(--dk-fg3)}

.rs-sec .lead{max-width:760px}

/* 항목 한 건 */
.rs-card{margin-top:38px;border-top:2px solid var(--ink)}
.rs-card-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--line)}
.rs-card-hd .id{font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.rs-card-hd b{font-size:21px;font-weight:800;letter-spacing:-.035em}
.rs-card-hd .meta{font-size:11.5px;font-weight:500;color:var(--ink3);margin-left:auto}
.rs-f{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 32px;
  padding:20px 0;border-bottom:1px solid var(--line)}
/* 라벨 뒤에 오는 것이 셋 이상이면 자동 배치가 다시 1열로 접힌다 —
   조치의 설명 문단이 라벨 칸에 끼어 들어갔다(실측). 라벨만 1열, 나머지는 전부 2열. */
.rs-f > *:not(.t){grid-column:2}
/* 라벨이 국문이다. 영문 킥커의 .14em 자간을 그대로 쓰면 글자가 흩어져 읽힌다. */
.rs-f .t{margin:0;grid-column:1;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.02em;color:var(--ink3)}
.rs-f p:not(.t){margin:0;font-size:15.5px;line-height:1.82;font-weight:500;color:var(--ink2)}
.rs-f p.n{margin-top:12px;font-size:14px;color:var(--ink3)}
.rs-f b{color:var(--ink)}
.rs-md p:not(.t) b{font-size:19px;letter-spacing:-.03em}

/* 코드 — 상자 대신 왼쪽 선. 이 사이트에 상자가 없다. */
.rs-code{margin:0;padding:14px 0 14px 16px;border-left:2px solid var(--line2);
  background:var(--bg2);font-family:var(--mono);font-size:12.5px;line-height:1.75;
  color:var(--ink2);overflow-x:auto;white-space:pre}
code{font-family:var(--mono);font-size:.92em;padding:1px 5px;background:var(--tint);
  color:var(--ink);border-radius:3px}
.sec-dk code{background:rgba(255,255,255,.07);color:var(--dk-fg)}

/* 판정 배지 */
.rs-v{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;padding:3px 8px;border:1px solid transparent;white-space:nowrap}
.v-high{color:var(--st-fail);border-color:var(--st-fail-ln);background:var(--st-fail-bg)}
.v-warn{color:var(--st-warn);border-color:var(--st-warn-ln);background:var(--st-warn-bg)}
.v-ok{color:var(--st-pass);border-color:var(--st-pass-ln);background:var(--st-pass-bg)}
/* 판정 불가 둘. **같은 회색으로 그리지 않는다** — 0032 가 코드에서 뗀 구분이다.
   NA 는 재검사해도 같고, ERROR 는 재검사하면 달라질 수 있다. */
.v-na{color:var(--st-na);border-color:var(--st-na-ln);background:var(--st-na-bg)}
.v-err{color:var(--st-err);border-color:var(--st-err-ln);background:var(--st-err-bg)}
.sec-dk .v-high{color:var(--st-fail-dk);border-color:var(--st-fail-ln-dk);background:var(--st-fail-bg-dk)}
.sec-dk .v-warn{color:var(--st-warn-dk);border-color:var(--st-warn-ln-dk);background:var(--st-warn-bg-dk)}
.sec-dk .v-ok{color:var(--st-pass-dk);border-color:var(--st-pass-ln-dk);background:var(--st-pass-bg-dk)}
.sec-dk .v-na{color:var(--st-na-dk);border-color:var(--st-na-ln-dk);background:var(--st-na-bg-dk)}
.sec-dk .v-err{color:var(--st-err-dk);border-color:var(--st-err-ln-dk);background:var(--st-err-bg-dk)}

/* 발췌 표 */
.rs-tbl{margin-top:34px;border-top:1px solid var(--dk-line)}
.rs-hd,.rs-row{display:grid;grid-template-columns:62px 190px 62px minmax(0,1fr) 62px;
  gap:8px 20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--dk-line)}
.rs-hd{padding:11px 0;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dk-fg3)}
.rs-row .id{font-size:12px;font-weight:700;color:var(--accent)}
.rs-row .nm b{font-size:14.5px;font-weight:650;letter-spacing:-.02em;color:var(--dk-fg)}
.rs-row .nm .cond{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.08em;color:var(--dk-fg3);margin-top:4px}
.rs-row .bd{font-size:13.5px;line-height:1.72;font-weight:500;color:var(--dk-fg2)}
.rs-row .bd b{color:var(--dk-fg)}
.rs-row .md{font-size:12.5px;font-weight:700;color:var(--dk-fg);text-align:right}

/* 목차 */
.rs-toc{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.rs-toc li{display:grid;grid-template-columns:50px 200px minmax(0,1fr);gap:6px 24px;
  align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--e)}
.rs-toc li:hover{padding-left:12px}
.rs-toc li i{font-style:normal;font-size:12px;font-weight:700;color:var(--accent)}
.rs-toc li b{font-size:16.5px;font-weight:700;letter-spacing:-.03em}
.rs-toc li span{font-size:14.5px;line-height:1.72;font-weight:500;color:var(--ink2)}
.rs-toc li span b{font-size:inherit;color:var(--ink)}

/* 들어가지 않는 것 */
.rs-not{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
.rs-not .t{margin:0 0 6px;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rs-not dl{margin:20px 0 0}
.rs-not dl > div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 36px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.rs-not dt{font-size:15.5px;font-weight:700;letter-spacing:-.025em}
.rs-not dd{margin:0;font-size:14.5px;line-height:1.75;font-weight:500;color:var(--ink2)}

@media (max-width:900px){
  .rs-card-hd .meta{margin-left:0;width:100%}
  .rs-f{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .rs-f > *:not(.t),.rs-f .t{grid-column:1}
  .rs-hd{display:none}
  .rs-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:17px 0}
  .rs-row .id{grid-column:1}
  .rs-row .vd{grid-column:2;grid-row:1;justify-self:end}
  .rs-row .nm,.rs-row .bd{grid-column:1 / -1}
  .rs-row .md{grid-column:1 / -1;text-align:left;color:var(--dk-fg3)}
  .rs-row .md::before{content:"공수 ";letter-spacing:.06em}
  .rs-toc li{grid-template-columns:44px minmax(0,1fr);gap:4px 16px}
  .rs-toc li span{grid-column:2}
  .rs-toc li:hover{padding-left:0}
  .rs-not dl > div{grid-template-columns:1fr;gap:4px}
}

/* ── 신청 폼 정비(P-Q) ────────────────────────────────────────
   오류는 폼 위 한 줄이 아니라 **그 입력 옆**에 붙는다. 긴 폼에서
   위쪽 한 줄만 있으면 어디가 틀렸는지 찾느라 다시 훑어야 한다. */
.fe{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--accent-d);
  padding-left:11px;border-left:2px solid var(--accent)}
.ap-form .has-err > input,.ap-form .has-err > select,.ap-form .has-err > textarea{
  border-color:var(--accent)}
.ap-consent.has-err{border-color:var(--accent)}

/* 전체 동의 — 개별 항목과 한 칸 띄우고 굵게. 법적 동의가 아니라 편의 스위치다. */
.ap-consent .ck.all{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ap-consent .ck.all b{font-weight:700}

/* 동의 항목 상세 — 목적 · 항목 · 보유 · 거부 시 제한 */
.ap-consent .ck small i{font-style:normal;font-weight:700;color:var(--ink3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;margin-right:3px}
.ap-consent .ck.req em{display:inline}

/* ── 상단 요약 · 목차 (2026-08-27) ─────────────────────────────
   답변 엔진은 문서 앞부분을 먼저 읽는다. 결론이 뒤에 있는 문서는 인용 후보에서
   빠지고, 헤딩에 id 가 없으면 문서 전체만 가리킬 수 있다. 둘 다 그 대응이다.
   기존 토큰만 쓴다 — 새 색을 만들지 않는다. */
.ms-tldr{margin:34px 0;padding:22px 26px;border:1px solid var(--line);
  border-left:3px solid var(--accent);background:var(--bg2);border-radius:4px}
/* 자간을 주지 않는다 — 라틴 소문자 기준의 .06em 을 한글에 걸면 "핵 심 정 리" 로 벌어진다.
   uppercase 도 한글에는 아무 효과가 없어서 뺐다. */
.ms-tldr-t{margin:0 0 12px;font-size:12.5px;font-weight:700;color:var(--accent)}
/* 순정 default.css 가 ul 의 불릿을 지운다. 여기서는 되살린다 —
   불릿이 없으면 다섯 줄이 한 덩어리 문단으로 읽힌다. */
.ms-tldr ul{margin:0;padding-left:20px;list-style:disc}
.ms-tldr li{font-size:15.5px;line-height:1.78;font-weight:500;color:var(--ink2);margin-bottom:7px}
.ms-tldr li:last-child{margin-bottom:0}
.ms-tldr li strong,.ms-tldr li b{color:var(--ink);font-weight:700}

.ms-toc{margin:0 0 40px;padding:20px 24px;border:1px solid var(--line);border-radius:4px}
.ms-toc-t{margin:0 0 11px;font-size:12.5px;font-weight:700;color:var(--ink3)}
.ms-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;counter-reset:toc}
.ms-toc li{counter-increment:toc;font-size:15px;font-weight:600}
.ms-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;color:var(--accent);margin-right:7px}
.ms-toc a{color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}
.ms-toc a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* 앵커로 뛰었을 때 헤딩이 고정 헤더 밑에 숨지 않게. */
.ms-sec h2[id],.ms-sec h3[id]{scroll-margin-top:96px}

/* 어두운 섹션 안에서도 읽히게 — 위 두 블록은 밝은 자리에만 쓰지만
   sec-dk 안에 들어갈 경우를 대비해 둔다. */
.sec-dk .ms-tldr{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.sec-dk .ms-tldr li{color:rgba(255,255,255,.78)}
.sec-dk .ms-toc{border-color:rgba(255,255,255,.14)}
.sec-dk .ms-toc a{color:rgba(255,255,255,.78)}

/* 참고자료 절. 인용만 있고 출처가 없으면 검증할 수 없는 문서가 된다. */
.ms-refs{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ms-refs li{padding:15px 0;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.ms-refs a{font-size:15.5px;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.ms-refs a:hover{color:var(--accent);text-decoration-color:var(--accent)}
/* 외부 링크임을 글자로 알린다 — 아이콘 폰트를 새로 들이지 않는다. */
.ms-refs a::after{content:"↗";font-size:11px;margin-left:5px;color:var(--ink3);vertical-align:2px}
.ms-refs span{font-size:14.5px;color:var(--ink3);font-weight:500}