/* Figma "KONECT_Home_1920_v2 (전체 서비스형)" 실측값.
   여기가 원시 수치가 사는 유일한 파일이다. style.css 는 var() 만 쓴다. */

:root {
  /* --- 색: 텍스트 / 면 / 보더 ------------------------------------------- */
  --c-text:            #171717;
  --c-text-sub:        #595959;
  --c-text-icon:       #58585a;
  --c-text-anchor:     #79797b;
  --c-heading-accent:  #062850;
  --c-primary:         #0f64c9;
  --c-white:           #ffffff;

  --c-border:          #ebebeb;
  --c-border-strong:   #dbdbdb;
  --c-surface:         #f9f9f9;   /* footer, 리스트 짝수 열, 배지 */
  --c-dot-active:      #f1f7ff;   /* 배너 활성 dot */

  /* 외부링크 hover (Figma 55:587) */
  --c-link-hover-bg:   #f3f7fc;
  --c-link-hover-text: #0f64c9;
  --c-link-hover-icon: #5793d9;

  /* --- 색: 서비스 카드 5종 ---------------------------------------------- */
  /* --card-N     기본 배경 (solid)
     --notch-N    우하단 노치 원 (SVG 에 박혀있음 — 참고용)
     --card-N-top hover 그라디언트 상단색 (하단색 = --card-N) */
  --card-1: #f38507;  --notch-1: #613503;  --card-1-top: #d4587f;
  --card-2: #0f64c9;  --notch-2: #062850;  --card-2-top: #7476da;
  --card-3: #10378a;  --notch-3: #061637;  --card-3-top: #5a89ed;
  --card-4: #178ca0;  --notch-4: #093840;  --card-4-top: #6aa7ed;
  --card-5: #6c62cb;  --notch-5: #2b2751;  --card-5-top: rgb(146 72 235 / 0.79);

  /* --- 타이포 ----------------------------------------------------------- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Malgun Gothic", "맑은 고딕", sans-serif;

  --t-hero:        600 40px/60px var(--font);
  --t-hero-sub:    400 20px/30px var(--font);   /* 롤링 문구의 보조 줄 */
  --t-h2:          600 28px/34px var(--font);
  --t-card-title:  700 24px/28.8px var(--font);
  /* 카드 제목의 괄호 부분 — 시안에서 굵기·크기가 다르다 (Pretendard Light) */
  --t-card-paren:  300 20px/24px var(--font);
  --t-panel-head:  600 20px/24px var(--font);
  --t-nav:         500 20px/24px var(--font);
  --t-tab:         600 16px/22px var(--font);
  --t-link:        400 16px/30px var(--font);   /* 본문 기본 */
  --t-ext:         400 16px/19px var(--font);   /* 외부링크 버튼 (2026-08-28 시안 수정) */
  --t-card-desc:   400 18px/21.6px var(--font);
  --t-badge:       400 14px/22px var(--font);
  --t-family:      500 16px/19px var(--font);   /* 패밀리사이트 셀렉트 */
  --t-small:       400 14px/17px var(--font);
  --t-small-bold:  600 14px/17px var(--font);
  --t-copyright:   400 13px/16px var(--font);

  --ls-card-desc: -0.54px;

  /* --- 레이아웃 --------------------------------------------------------- */
  --container: 1440px;
  --gutter: 40px;              /* 1920 기준 좌우 240 = (1920-1440)/2 */
  --gutter-mobile: 20px;

  --r-sm: 8px;
  --r-md: 16px;
  --r-pill: 999px;
  --r-card: 16px;              /* 2026-08-27 시안 수정: 우하단 80 -> 전체 16 균등 */

  --header-h: 80px;
  --hero-bg-h: 600px;
  --card-h: 400px;
  --card-icon: 160px;
  --card-icon-hover: 200px;
  --card-icon-hover-x: -20px;  /* hover 시 아이콘이 카드 왼쪽으로 20px 삐져나온다 */
  --card-dim: 0.5;             /* hover 중인 카드 외 나머지 카드 투명도 */
  --notch: 80px;
  --banner-h: 200px;
  --tab-w: 260px;
  --tab-h: 44px;
  --panel-h: 460px;
  --row-h: 35px;               /* 외부링크 버튼 = pad 8 + 19 + pad 8 (시안 수정 전 38) */
  --badge-h: 22px;             /* 탭 배지 — 시안 stroke 가 INSIDE 라 테두리 포함 22 */

  /* hover 시 flex-grow 비율. 400 + 236*4 + 24*4 = 1440 (Figma 실측) */
  --grow-hover: 400;
  --grow-shrunk: 236;

  --shadow-banner: 0 2px 8px rgb(0 0 0 / 0.15);

  /* 배경 원 (Figma v2_bg Ellipse 10/11 — blendMode COLOR_BURN, opacity 0.6) */
  --orb-opacity: 0.6;
  --orb-1-size: 436px;  --orb-1-x: 1513px;  --orb-1-y: -123px;
  --orb-2-size: 643px;  --orb-2-x: -101px;  --orb-2-y: -122px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.35s;
  --reveal-dur: 0.7s;          /* 섹션 등장 */
}