/* Plab 소개 사이트 — 공용 스타일
 *
 * 페이지가 늘면 색·글자·여백 토큰이 페이지마다 한 벌씩 생긴다. 넷일 때는 인라인이
 * 단순했지만 일곱이면 반대가 되므로 공용 부분만 이 파일로 뺐다(2026-09-08).
 *
 * ⚠️ 여기 있는 것: 토큰 · 리셋 · 컨테이너 · 헤더 · 푸터 · 버튼 · 섹션 머리 · 폼 ·
 *    인트로 · 우측 점 목차. 페이지 전용(히어로 · 붙잡기 · 각 섹션)은 각 HTML 안에 둔다.
 * ⚠️ 이 파일이 먼저 로드되고 페이지 인라인이 나중에 온다. 특정성이 같으면 인라인이
 *    이긴다 - 공용을 페이지가 덮는 구조다.
 * ⚠️ check.py 는 페이지 안의 <style> 블록을 잘라 검사한다. index·pricing·privacy 를
 *    이 파일로 옮길 때는 검사에 이음새를 넣어야 한다(읽을 때 link 를 style 로 치환).
 */

  :root{
    --navy:#082140;
    --action:#004D70;
    --action-hover:#007C8C;
    --info:#00ACBD;
    --tint:#E6F4F6;
    --tint-border:#BFEAEF;
    --sprout:#82D77B;
    --ink:#0F172A;
    --text:#475569;
    --muted:#64748B;
    --line:#E2E8F0;
    --bg:#ffffff;
    --bg-soft:#F8FAFC;
    --radius-pill:999px;
    --radius-xs:2px;
    --radius-lg:24px;
    --radius:14px;
    --radius-sm:10px;
    --space-3xs:4px;
    --space-2xs:8px;
    --space-xs:16px;
    --space-sm:24px;
    --space-md:32px;
    --space-lg:48px;
    --space-xl:64px;
    --space-2xl:80px;
    --shadow:0 6px 24px rgba(8,33,64,.08);
    --shadow-sm:0 2px 8px rgba(8,33,64,.06);
    --container:1120px;
    --header-h:68px;
    --danger:#B91C1C;
    --fs-2xs:11px;
    --fs-xs:13px;
    --fs-base:16px;
    --fs-lg:20px;
    --fs-xl:25px;
    --fs-2xl:32px;
    --fs-3xl:42px;
    --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","맑은 고딕",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
  body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.65;font-size:var(--fs-base);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word}
  h1,h2,h3,h4,p{margin:0}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  /* width:100% 가 없으면 안 된다. 1200px+ 에서 .hero 가 display:grid 인데,
     auto 마진을 가진 그리드 아이템은 stretch 되지 않아 트랙이 콘텐츠 max-content 로 쪼그라든다.
     그 결과 히어로 719 / 금액 869 / 문의 768px 로 섹션마다 좌우 여백이 달랐다(실측).
     히어로도 예외 없이 이 규칙을 받는다. 렌더로만 보이는 버그라 check.py 가 지킨다. */
  .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--space-sm)}
  .section{padding:var(--space-xl) 0}
  .section--soft{background:var(--bg-soft)}
  .section__head{max-width:760px;margin:0 auto var(--space-lg);text-align:center}
  .section__title{font-size:clamp(var(--fs-xl),3.2vw,34px);font-weight:800;color:var(--ink);line-height:1.3}
  .section__title .hl{color:var(--action)}
  .section__lead{margin-top:var(--space-xs);font-size:var(--fs-base);color:var(--muted)}

  /* ---- buttons ---- */
  .btn{display:inline-flex;align-items:center;gap:var(--space-2xs);font-weight:700;font-size:var(--fs-base);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
  .btn--primary{background:var(--action);color:#fff}
  .btn--primary:hover{background:var(--action-hover)}
  .btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
  .btn--outline-light:hover{border-color:#fff}

  /* ---- header ---- */
  .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);transition:box-shadow .2s ease,background-color .2s ease}
  .site-header.is-scrolled{background:rgba(255,255,255,.98);box-shadow:var(--shadow-sm)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
  .brand{display:flex;align-items:center;min-height:44px;gap:var(--space-2xs);font-weight:800;color:var(--navy);font-size:var(--fs-lg)}
  .brand__logo{display:block}
  .nav__links{display:flex;align-items:center;gap:var(--space-md)}
  .nav__links a{position:relative;font-size:var(--fs-base);font-weight:600;color:var(--text);transition:color .18s ease}
  .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:var(--radius-xs);background:var(--action);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
  .nav__links a:hover{color:var(--action)}
  .nav__links a.is-active{color:var(--action)}
  .nav__links a.is-active::after{transform:scaleX(1)}
  .nav__cta{display:flex;align-items:center;gap:var(--space-2xs)}
  .nav__toggle{display:none;min-width:44px;background:none;border:0;padding:var(--space-2xs);cursor:pointer;color:var(--navy)}

  /* ---- pricing ---- */
  /* 표 색의 역할. 이 사이트에서 틸은 "누를 수 있음/긍정"이다 -- .btn--primary, 활성 탭,
     .pstep__dot, .pchip--out, 활성 표시, focus outline, .pyes("포함"). 표 머리글에 틸을 채우면 (a) 누를 수
     없는 띠에 CTA 색이 깔려 거짓 어포던스가 되고 (b) 한 카드 안에서 틸 머리글(열 이름 =
     가구)이 남색 합계(독자가 찾는 답)와 같은 무게로 경쟁한다.
     그래서 머리글은 조용한 면(--bg-soft / --ink 14.64:1), 강조는 표당 하나(합계 --navy /
     흰 글자 16.13:1)만 둔다. 원본 견적서는 머리글이 밝은 초록이었고 흰 글자가 2.88:1 로
     애초에 기준 미달이었다. 그 방식에서 멀어지는 결정이며, 틸은 .pyes 와 CTA 에 남긴다. */
  /* minmax(0,1fr): 그냥 1fr 이면 트랙 최소폭이 min-content 라, 안의 표가 좁은 화면에서
     줄지 못하고 페이지 전체를 가로로 밀어낸다(390px 에서 문서폭 423px 이 됐다). */
  /* 수량 x 단가는 열이 아니라 항목명 아래 보조행이다. 4열 금액표는 360px 카드(264px)에
     최소폭 324px 로 안 들어가고, 억지로 줄이면 "Platf/orm" 처럼 라벨이 썰린다. */
  /* 5열 15행 스펙표. 좁은 화면에서 본문이 아니라 표만 가로로 스크롤한다. */
  /* 기능 이름은 행 헤더(th)지만 본문처럼 보여야 한다. 모듈 th 만 헤더 톤을 입는다. */

  /* ---- contact form ---- */
  .cform{max-width:720px;margin:0 auto;display:grid;gap:var(--space-xs)}
  .cform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}
  /* grid/flex 로 두면 라벨 안의 <span>(선택) 이 별도 트랙이 되어 줄이 하나 늘고 입력칸이 어긋난다 */
  .field{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink)}
  .field .opt{color:var(--muted);font-weight:600}
  .field .input{margin-top:var(--space-2xs)}
  /* vertical-align:top -- 기본 baseline 정렬이 textarea 아래에 6px 를 남겨서 필드 안내
     여백이 다른 필드(4px)와 어긋난다. */
  textarea.input{min-height:96px;resize:vertical;vertical-align:top}
  .cform__error{font-size:var(--fs-xs);font-weight:700;color:var(--danger)}
  .cform__error.is-ok{color:var(--action)}
  .cform__error:empty{display:none}
  /* 필드별 안내. 네이티브 풍선을 끈 대가로 이쪽이 유일한 안내 경로다. */
  .field__err{display:block;margin-top:var(--space-3xs);font-size:var(--fs-xs);font-weight:700;color:var(--danger)}
  .field__err:empty{display:none}
  /* 동의 안내는 label 안이 아니라 .cform 그리드의 직접 자식이라 gap(--space-xs)이 한 번
     더 붙는다. 다른 필드 안내와 같은 --space-3xs 로 맞춘다. */
  .cform>.field__err{margin-top:calc(var(--space-3xs) - var(--space-xs))}
  .cform .btn{justify-self:center}
  /* 발송 완료 알림창. <dialog> 를 쓰면 backdrop·Esc 닫기·포커스 트랩·배경 inert 를
     브라우저가 처리한다. 미지원 브라우저는 인라인 초록 문구로 떨어진다. */
  /* max-width 만 두면 320px 화면에서 좌우 여백 없이 화면 끝에 닿는다(실측). */
  .okdlg{width:calc(100% - var(--space-sm) * 2);max-width:360px;padding:var(--space-sm);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}
  .okdlg::backdrop{background:rgba(8,33,64,.45)}
  .okdlg p{margin:0 0 var(--space-sm);font-size:var(--fs-base);line-height:1.6}
  .okdlg .btn{width:100%;justify-content:center}

  /* ---- footer ---- */
  .site-footer{background:var(--navy);color:#aeb9c9;padding:var(--space-lg) 0 var(--space-md);font-size:var(--fs-xs)}
  .footer__top{padding-bottom:var(--space-sm);border-bottom:1px solid rgba(255,255,255,.1)}
  .footer__brand{color:#fff;font-weight:800;font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-2xs)}
  .footer__legal p{margin-bottom:var(--space-3xs);line-height:1.7}
  .footer__legal a{color:#cdd6e2;text-decoration:underline}
  .footer__tm{margin-top:var(--space-2xs);max-width:720px;font-size:var(--fs-xs);line-height:1.7;color:#7e8ca1}
  .footer__en{margin-top:var(--space-xs);max-width:720px;font-size:var(--fs-xs);line-height:1.7;color:#7e8ca1}
  .footer__bottom{padding-top:var(--space-xs);display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);flex-wrap:wrap;color:#7e8ca1}
  .footer__links{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
  .footer__bottom a{display:inline-flex;align-items:center;min-height:44px;color:#cdd6e2;font-weight:600;transition:color .18s ease}
  .footer__bottom a:hover{color:#fff}


  /* ===== 인트로 (화면 관통 줄 + 매듭 가운데로 줌인) =====
     발동은 「페이지 로드」와 「좌측 상단 로고 클릭」 두 경우다. 세션당 1회 제한은
     일부러 걸지 않았다(2026-09-07 조영식 지시). 나중에 붙일 자리만 남겨둔다.
     #shim 은 네이비 받침이다. 구멍이 열린 직후 구멍 안이 흰색이면 흰 고리와
     흰 구멍이 붙어 매듭이 「속 찬 동그라미」로 보인다. 받침을 걷으며 페이지가 뜬다. */
  #intro{position:fixed;inset:0;z-index:9999;background:var(--navy);overflow:hidden}
  #intro svg{position:absolute;inset:0;width:100%;height:100%}
  #intro.gone{visibility:hidden;pointer-events:none}
  #shim{position:fixed;inset:0;z-index:9998;background:var(--navy);display:none}
  #shim.on{display:block}
  /* 푸터의 파트너 표시. 자랑이 아니라 안심 재료라 회사 이름 바로 아래 작게 둔다. */
  .footer__partner{font-size:var(--fs-xs);color:var(--info);font-weight:700;
    margin-top:var(--space-3xs)}
  /* ---- 큰 화면에서 콘텐츠가 가운데로 몰리는 것 (2026-09-04) ----
     컨테이너가 1120px 한 값이라 화면이 커져도 안 늘었다 - 2560px 에서 화면의 56%가
     좌우 여백이었고, 헤더는 로고와 문의 버튼이 가운데 띠처럼 보였다.
     화면에 따라 넓히되 1600px 에서 멈춘다. 그보다 넓히면 카드 안 글줄이 길어져
     읽기 나빠지고, 울트라와이드(3440px)에서는 목을 돌려야 읽는다. */
  
  @media (min-width:1440px){:root{--container:1280px}}

  
  @media (min-width:1920px){:root{--container:1440px}}

  
  @media (min-width:2400px){:root{--container:1600px}}


  /* ---- 우측 점 목차 ----
     구간 고정으로 페이지가 길어져서(문서 10,000px+) 스크롤만으로는 지점을 찾을 수 없다.
     네비를 둘로 줄인 대신 이 목차가 이동을 맡는다.
     한때 반투명 흰 캡슐을 깔았다. 어두운 면 위에서도 점이 보이게 하려던 것인데
     화면에서 덩어리처럼 튀어서 걷어냈다(2026-09-01). 대신 어두운 면에 올라가면
     점 색을 흰색으로 뒤집는다(아래 data-dark).
     히어로에서도 접지 않는다 - 첫 화면부터 어디로 갈 수 있는지 보여야 한다. */
  .dots{position:fixed;right:var(--space-sm);top:50%;transform:translateY(-50%);z-index:40;
    display:flex;flex-direction:column;gap:var(--space-3xs);
    opacity:1;transition:opacity .3s ease}
  /* 첫 화면에서는 접는다 - 그 자리를 제품 화면이 쓴다(오른쪽으로 33px 넘어온다).
     JS 가 스크롤 위치를 보고 data-hide 를 붙인다. */
  .dots[data-hide="true"]{opacity:0;pointer-events:none}
  .dots a{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2xs);
    min-width:44px;min-height:44px;text-decoration:none;border-radius:var(--radius-pill)}
  .dots i{display:block;width:9px;height:9px;flex:none;border-radius:var(--radius-pill);
    background:transparent;border:2px solid #9aa8b8;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
  .dots a[aria-current="true"] i{background:var(--action);border-color:var(--action);transform:scale(1.35)}
  /* 캡슐을 걷어내면서 어두운 면 위에서 점이 사라졌다. 활성 점(--action)이 남색 배경과
     1.76:1 이라 아예 안 보인다(비활성 테두리는 6.7:1 이라 괜찮다).
     어두운 구간(히어로 · 푸터)에 들어가면 점을 흰색으로 뒤집는다 - 남색 위 14:1. */
  .dots[data-dark="true"] i{border-color:rgba(255,255,255,.62)}
  .dots[data-dark="true"] a[aria-current="true"] i{background:#fff;border-color:#fff}
  .dots a:hover i{border-color:var(--action)}
  .dots a:focus-visible{outline:2px solid var(--action);outline-offset:2px}
  .dots span{position:absolute;right:100%;margin-right:var(--space-2xs);white-space:nowrap;
    font-size:var(--fs-2xs);font-weight:700;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3xs) var(--space-2xs);
    opacity:0;pointer-events:none;transition:opacity .18s ease;box-shadow:var(--shadow-sm)}
  .dots a{position:relative}
  .dots a:hover span,.dots a:focus-visible span{opacity:1}

  /* ---- responsive ---- */
  
  @media (max-width:960px){
    .dots{display:none}}

  
  @media (max-width:720px){
    .section{padding:var(--space-xl) 0}
    .nav__links{display:none}
    .nav__toggle{display:block}
    .nav[data-open="true"] .nav__links{display:flex;position:absolute;left:0;right:0;top:var(--header-h);flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:var(--space-2xs) 0}
    .nav[data-open="true"] .nav__links a{padding:var(--space-xs) var(--space-sm);width:100%}
    .nav__links a::after{display:none}
    .cform__row{grid-template-columns:1fr}}

  
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#intro,#shim{display:none!important}.btn{transition:none}}

  /* ===== 스켈레톤 기본 (2026-09-08 base 로 옮김) =====
     아직 없는 제품 화면 자리다. 여러 페이지가 쓰므로 기본 모양만 공용으로 두고,
     페이지별 배치(.pssk 등)는 각 HTML 안에 남긴다. */
  .sk{display:block;border-radius:var(--radius-xs);background:var(--line)}
  .sk--ico{width:20px;height:20px;flex:none}
  .sk--st{margin-left:auto;width:32px;height:14px;flex:none;
    border-radius:var(--radius-pill)}

  /* ===== 하위 페이지 공통 (2026-09-09) =====
     지원·부가서비스 같은 안쪽 페이지가 함께 쓰는 두 덩어리다.
     .shero  작은 첫 화면 - 홈의 55% 히어로와 달리 정체를 세우는 자리가 아니라 낮다
     .close  페이지를 닫는 남색 자리 - 문의로 데려간다 */
  /* 작은 히어로. 홈의 첫 화면(55%)보다 훨씬 낮다 - 여기는 정체를 세우는 자리가 아니다. */
  .shero{background:var(--navy);color:#fff;position:relative;overflow:hidden;
    padding:var(--space-2xl) 0}
  .shero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(760px 420px at 78% 0%,rgba(0,172,189,.14),transparent 62%)}
  .shero .container{position:relative;z-index:1}
  .shero h1{font-size:clamp(var(--fs-xl),4vw,var(--fs-2xl));font-weight:300;
    line-height:1.32;letter-spacing:-.02em;max-width:520px}
  .shero h1 .hl{color:var(--info)}
  .shero__sub{margin-top:var(--space-xs);font-size:var(--fs-base);line-height:1.7;
    color:#c6cfdb;max-width:520px}

  /* 닫는 자리 */
  .close{background:var(--navy);color:#fff;padding:var(--space-2xl) 0;text-align:center}
  .close h2{font-size:clamp(var(--fs-lg),3vw,var(--fs-xl));font-weight:300;
    line-height:1.36;letter-spacing:-.015em;color:#fff}
  .close h2 .hl{color:var(--info)}
  .close p{margin-top:var(--space-xs);font-size:var(--fs-base);line-height:1.7;
    color:#c6cfdb}
  .close__actions{margin-top:var(--space-sm);display:flex;gap:var(--space-2xs);
    justify-content:center;flex-wrap:wrap}