@charset "utf-8";
/* ==========================================================================
   연결점 · Referral Business Marketplace
   base.css — 디자인 토큰 / 리셋 / 타이포그래피 / 레이아웃
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  /* --- Brand ------------------------------------------------------------ */
  --cobalt:#2563FF;      --cobalt-700:#1B4AD1;  --cobalt-050:#EEF3FF;  --cobalt-100:#DCE6FF;
  --orange:#FF6A00;      --orange-700:#D95900;  --orange-050:#FFF2E8;
  --teal:#00C2B3;        --teal-700:#0A8F85;    --teal-050:#E6FAF8;
  --lilac:#A855F7;       --lilac-700:#8636D6;   --lilac-050:#F6EDFF;

  /* --- Ink & Surface ---------------------------------------------------- */
  --ink:#0D0D0F;         --navy:#0F172A;
  --gray-900:#171A21;    --gray-700:#3D444F;    --gray-600:#5A626F;
  --gray-500:#7A828F;    --gray-400:#A3AAB6;    --gray-300:#D2D7DF;
  --gray-200:#E4E8EE;    --gray-100:#F1F3F7;    --gray-050:#F7F8FA;
  --white:#FFFFFF;

  /* --- Semantic --------------------------------------------------------- */
  --ok:#0A8F85;          --ok-bg:#E6FAF8;
  --warn:#B7791F;        --warn-bg:#FEF6E0;
  --danger:#DC2626;      --danger-bg:#FDECEC;
  --info:#2563FF;        --info-bg:#EEF3FF;
  --neutral:#5A626F;     --neutral-bg:#F1F3F7;

  /* --- Type ------------------------------------------------------------- */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
         "Malgun Gothic",system-ui,sans-serif;
  --font-num:"Pretendard Variable",Pretendard,ui-monospace,"SF Mono",sans-serif;

  /* --- Space (8px grid) -------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:104px;

  /* --- Radius / Shadow --------------------------------------------------- */
  --r-sm:8px; --r:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --sh-2:0 2px 6px rgba(15,23,42,.06), 0 8px 20px -8px rgba(15,23,42,.10);
  --sh-3:0 4px 12px rgba(15,23,42,.07), 0 20px 44px -16px rgba(15,23,42,.16);
  --sh-cta:0 6px 18px -4px rgba(37,99,255,.38);

  /* --- Layout ------------------------------------------------------------ */
  --wrap:1240px; --wrap-narrow:920px; --header-h:72px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--white);color:var(--gray-900);
  font-family:var(--font);font-size:16px;line-height:1.65;
  font-weight:400;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  word-break:keep-all;overflow-wrap:break-word;
}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.28;letter-spacing:-.028em;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;cursor:pointer;padding:0}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--gray-200);margin:0}
/* display 값을 지정하는 클래스가 hidden 속성을 덮지 않도록 */
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--cobalt);outline-offset:2px;border-radius:4px}
::selection{background:var(--cobalt-100);color:var(--navy)}

/* ==========================================================================
   Typography scale
   ========================================================================== */
.t-display{font-size:clamp(34px,5.2vw,56px);line-height:1.16;font-weight:800;letter-spacing:-.038em}
.t-h1{font-size:clamp(28px,4vw,44px);line-height:1.22;font-weight:800;letter-spacing:-.034em}
.t-h2{font-size:clamp(24px,3.1vw,36px);line-height:1.26;font-weight:700;letter-spacing:-.03em}
.t-h3{font-size:clamp(19px,2.1vw,24px);line-height:1.34;font-weight:700}
.t-h4{font-size:17px;line-height:1.45;font-weight:700}
.t-lead{font-size:clamp(15px,1.4vw,18px);line-height:1.68;color:var(--gray-600);font-weight:400}
.t-body{font-size:15px;line-height:1.7;color:var(--gray-700)}
.t-sm{font-size:14px;line-height:1.6;color:var(--gray-600)}
.t-xs{font-size:13px;line-height:1.55;color:var(--gray-500)}
.t-num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;
}
.eyebrow--muted{color:var(--gray-500)}

/* 브랜드 시그니처: 오렌지 노드 점 */
.dot{color:var(--orange)}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:20px}
.section{padding-block:var(--s12)}
.section--tight{padding-block:var(--s11)}
.section--alt{background:var(--gray-050)}
.section--ink{background:var(--navy);color:#fff}
.section--ink h2,.section--ink h3{color:#fff}

.sec-head{max-width:760px;margin-bottom:var(--s8)}
.sec-head .t-lead{margin-top:var(--s3)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

.grid{display:grid;gap:var(--s5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.row{display:flex;align-items:center;gap:var(--s3)}
.row-wrap{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.mt-8{margin-top:var(--s8)}.mt-9{margin-top:var(--s9)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 스킵 링크 */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width:1024px){
  :root{--s12:80px;--s11:64px}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  :root{--s12:64px;--s11:56px;--s10:48px;--header-h:60px}
  body{font-size:15px}
  .wrap,.wrap-narrow{padding-inline:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .g-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head--row{align-items:flex-start;flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}