/* ============================================================
   클라이브 사이트 공용 스타일 (KRDS 기반)
   7개 페이지가 공유한다 — 토큰·리셋·버튼·헤더·푸터·브레드크럼·콘텐츠 레이아웃.
   페이지 고유 섹션 스타일은 각 페이지의 <style> 에 둔다.
   ============================================================ */

/* --- Pretendard GOV (SIL OFL 1.1) 로컬 self-host — weight 400·700 --- */
@font-face{font-family:'Pretendard GOV';font-weight:400;font-style:normal;font-display:swap;src:local('Pretendard GOV Regular'),url('fonts/PretendardGOV-Regular.woff2') format('woff2');}
@font-face{font-family:'Pretendard GOV';font-weight:700;font-style:normal;font-display:swap;src:local('Pretendard GOV Bold'),url('fonts/PretendardGOV-Bold.woff2') format('woff2');}

/* --- KRDS design tokens (resolved semantic aliases — light mode) --- */
:root{
  --krds-font-family:"Pretendard GOV",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;

  --color-surface-white:#ffffff;
  --color-surface-gray-subtler:#f4f5f6;
  --color-surface-gray-subtle:#e6e8ea;
  --color-surface-primary-subtler:#ecf2fe;
  --color-surface-primary-subtle:#d8e5fd;
  --color-border-gray-light:#cdd1d5;
  --color-border-gray:#e6e8ea;
  --color-border-gray-darker:#464c53;

  --color-text-bolder:#131416;
  --color-text-basic:#1e2124;
  --color-text-subtle:#464c53;
  --color-text-muted:#6d7580;
  --color-text-primary:#0b50d0;
  --color-text-inverse:#ffffff;
  --color-icon-gray:#33363d;
  --color-icon-gray-light:#464c53;
  --color-input-border:#58616a;
  --color-input-surface:#ffffff;

  --color-brand:#256ef4;          /* primary-50 / element-primary */
  --color-element-primary:#256ef4;
  --color-brand-hover:#0b50d0;    /* primary-60 */
  --color-brand-pressed:#083891;  /* primary-70 */
  --color-brand-navy:#063a74;     /* secondary-70 */
  --color-brand-navy-ink:#062647;
  --color-point:#d63d4a;          /* point-50 — 강조/필수 */

  --color-btn-secondary-fill:#ecf2fe;
  --color-btn-secondary-hover:#d8e5fd;
  --color-btn-secondary-border:#256ef4;
  --color-btn-tertiary-border:#58616a;
  --color-btn-tertiary-hover:#f4f5f6;
  --color-btn-tertiary-pressed:#e6e8ea;

  --radius-s:8px;
  --radius-m:12px;
  --wrap:1200px;
}

/* --- Reset + base --- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--color-surface-white);
  color:var(--color-text-basic);
  font-family:var(--krds-font-family);
  line-height:1.6;
  text-wrap:pretty;
}
img{max-width:100%;display:block;}
a{color:var(--color-brand);text-decoration:none;}
a:hover{color:var(--color-brand-pressed);}
h1,h2,h3,h4,p{margin:0;}
ul{margin:0;padding:0;}
figure,figcaption,blockquote{margin:0;}   /* figure 는 UA 기본 좌우 여백 40px 이 있어 그리드 칸을 못 채운다 */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{font-size:15px;font-weight:700;line-height:1;color:var(--color-brand);letter-spacing:.02em;}

/* Skip link (KRDS 접근성) */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-brand);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;font-size:15px;}
.skip:focus{left:0;color:#fff;}

/* 맨 위로 — 문서 바닥 근처에서만 나타나는 원형 버튼.
   마크업은 site.js 가 만든다(JS 가 없으면 버튼 자체가 생기지 않는다). */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:40;
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:var(--color-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(6,58,116,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--color-brand-hover);}
.to-top:active{background:var(--color-brand-pressed);}
.to-top:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .to-top{transition:none;} }
@media (max-width:640px){ .to-top{right:16px;bottom:16px;width:46px;height:46px;} }

/* 이미지 자리표시자 — 운영 이미지가 들어갈 곳 */
.ph{
  background:var(--color-surface-gray-subtle);
  border:1px dashed #b1b8be;
  display:flex;align-items:center;justify-content:center;
  font:400 14px/1.4 var(--krds-font-family);
  color:var(--color-text-muted);text-align:center;
}

/* ============================================================
   Buttons (KRDS action/Button)  size: 기본 large(56) · md(48) · xl(64)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:56px;padding:0 20px;border-radius:var(--radius-s);
  font-family:var(--krds-font-family);font-size:19px;font-weight:700;line-height:1.5;
  white-space:nowrap;cursor:pointer;border:none;
  transition:background 120ms ease,box-shadow 120ms ease;
}
.btn--sm{height:40px;padding:0 12px;font-size:15px;}
.btn--md{height:48px;padding:0 16px;font-size:17px;}
.btn--xl{height:64px;padding:0 24px;}
.btn--primary{background:var(--color-brand);color:var(--color-text-inverse);}
.btn--primary:hover{background:var(--color-brand-hover);color:#fff;}
.btn--primary:active{background:var(--color-brand-pressed);}
.btn--secondary{background:var(--color-btn-secondary-fill);color:var(--color-text-primary);box-shadow:inset 0 0 0 1px var(--color-btn-secondary-border);}
.btn--secondary:hover{background:var(--color-btn-secondary-hover);color:var(--color-text-primary);}
.btn--tertiary{background:transparent;color:var(--color-text-basic);box-shadow:inset 0 0 0 1px var(--color-btn-tertiary-border);}
.btn--tertiary:hover{background:var(--color-btn-tertiary-hover);color:var(--color-text-basic);}
.btn--tertiary:active{background:var(--color-btn-tertiary-pressed);}

/* ============================================================
   Tabs (KRDS navigation/Tab) — 하단 밑줄형
   ============================================================ */
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--color-border-gray-light);}
.tabs button,.tabs > a{
  padding:12px 20px;font-family:var(--krds-font-family);font-size:17px;font-weight:500;line-height:1.4;
  color:var(--color-text-subtle);background:transparent;border:0;cursor:pointer;
  box-shadow:none;transition:color 120ms ease,box-shadow 120ms ease;
}
.tabs button:hover,.tabs > a:hover{color:var(--color-text-basic);}
.tabs button.is-active,.tabs > a.is-active{font-weight:700;color:var(--color-text-basic);box-shadow:inset 0 -3px 0 var(--color-element-primary);}
.tabs > a{text-decoration:none;}

/* 스크린리더 전용 텍스트 — left:0 이 없으면 정적 위치(표 안쪽 등)에 남아 문서 가로 폭을 늘린다 */
.sr-only{position:absolute;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============================================================
   Table (KRDS layout/Table) — 상단 2px 다크 룰
   ============================================================ */
.krds-table{width:100%;border-collapse:collapse;border-top:2px solid var(--color-border-gray-darker);}
.krds-table th,.krds-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--color-border-gray);font-size:15px;}
.krds-table th{font-weight:700;color:var(--color-text-basic);background:var(--color-surface-gray-subtler);white-space:nowrap;vertical-align:top;}
.krds-table td{color:var(--color-text-subtle);line-height:1.6;}

/* Badge (KRDS selection/Badge) */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.6;}
.badge--notice{background:var(--color-surface-primary-subtler);color:var(--color-text-primary);}
.badge--press{background:#fdeaec;color:var(--color-point);}
.badge--news{background:var(--color-surface-gray-subtle);color:var(--color-text-subtle);}

/* ============================================================
   Header (KRDS identity/Header)
   ============================================================ */
.site-header{
  width:100%;background:var(--color-surface-white);
  border-bottom:1px solid var(--color-border-gray-light);
  position:sticky;top:0;z-index:50;
}
.header-main{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}
.brand{display:inline-flex;align-items:center;gap:14px;flex-shrink:0;}
.brand img{height:28px;width:auto;}
.brand .divider{width:1px;height:22px;background:#c5cbd2;}
.brand .name{display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
/* 브랜드명은 어떤 폭에서도 줄바꿈 금지 — '클라이/브' 로 쪼개지지 않게 한다 */
.brand .name strong{font-size:19px;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--color-brand-navy-ink);white-space:nowrap;}
.brand .name span{font-size:10px;font-weight:400;line-height:1;letter-spacing:.14em;color:var(--color-text-muted);white-space:nowrap;}
.gnb{display:flex;gap:4px;height:100%;flex-shrink:0;}
.gnb a{
  display:inline-flex;align-items:center;padding:0 20px;height:100%;white-space:nowrap;
  font-size:19px;font-weight:700;color:var(--color-text-basic);
  border-bottom:3px solid transparent;transition:color 120ms ease,border-color 120ms ease;
}
.gnb a:hover{color:var(--color-brand);border-bottom-color:var(--color-brand);}
.gnb a.is-active{color:var(--color-brand);border-bottom-color:var(--color-brand);}
.nav-toggle{display:none;}

/* ============================================================
   Breadcrumb (KRDS navigation/Breadcrumb)
   ============================================================ */
/* 좌우 패딩은 감싸는 .page / .wrap 이 맡는다 — 여기서 padding 축약형을 쓰면 그 값을 덮어써 정렬이 어긋난다 */
.breadcrumb-bar{padding-top:24px;padding-bottom:2px;}
/* ol 은 리셋 대상이 아니라 UA 기본 들여쓰기(padding-inline-start:40px)가 남는다 — 본문 열과 맞추려면 지워야 한다 */
.breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb a{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:1.5;color:var(--color-text-subtle);}
.breadcrumb svg{display:block;flex-shrink:0;}
.breadcrumb a:hover{color:var(--color-text-basic);}
.breadcrumb [aria-current="page"]{font-size:15px;font-weight:700;color:var(--color-text-basic);}
.breadcrumb .chev{color:var(--color-border-gray-light);flex-shrink:0;}
.breadcrumb .home{color:var(--color-icon-gray);}

/* ============================================================
   콘텐츠 페이지 레이아웃 (상단 하위 탭 + 본문 단일 열)
   ============================================================ */
.page{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.content-single{padding:8px 0 80px;}
.content-single > .tabs{margin-bottom:32px;}
.content-main{min-width:0;}
.page-title{font-size:40px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--color-text-basic);}
.page-lead{font-size:19px;color:var(--color-text-subtle);margin-top:14px;}

/* ============================================================
   섹션 헬퍼 (여러 페이지 공용)
   ============================================================ */
.section{padding:72px 24px;}
.section--gray{background:#f8f9fa;}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:36px;}
.section-head h2{font-size:32px;font-weight:700;line-height:1.3;color:var(--color-text-basic);}

/* ============================================================
   Footer (KRDS identity/Footer)
   ============================================================ */
.site-footer{
  width:100%;background:var(--color-surface-gray-subtler);
  border-top:1px solid var(--color-border-gray-light);
}
.footer-links{display:flex;gap:64px;flex-wrap:wrap;padding:40px 24px;max-width:var(--wrap);margin:0 auto;}
.footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-col p{font-size:15px;font-weight:700;color:var(--color-text-bolder);}
.footer-col a{font-size:15px;color:var(--color-text-subtle);}
.footer-col a:hover{color:var(--color-text-basic);}
.footer-base{border-top:1px solid var(--color-border-gray-light);}
.footer-base-inner{
  max-width:var(--wrap);margin:0 auto;padding:24px;
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
}
.footer-brand{font-size:21px;font-weight:700;color:var(--color-text-basic);letter-spacing:-.02em;}
.footer-info{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--color-text-subtle);line-height:1.6;}

/* ============================================================
   Responsive (공용 요소)
   ============================================================ */
@media (max-width:960px){
  .section{padding:56px 24px;}
  .page-title{font-size:32px;}
}
@media (max-width:880px){
  .header-main{position:relative;flex-wrap:wrap;height:auto;padding:12px 0;}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--color-border-gray-light);
    border-radius:8px;background:#fff;cursor:pointer;
  }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:"";display:block;width:20px;height:2px;background:var(--color-text-basic);position:relative;
  }
  .nav-toggle span::before{position:absolute;top:-6px;}
  .nav-toggle span::after{position:absolute;top:6px;}
  .gnb{
    display:none;order:3;width:100%;flex-direction:column;height:auto;gap:0;
    border-top:1px solid var(--color-border-gray-light);margin-top:12px;
  }
  .gnb.open{display:flex;}
  .gnb a{height:52px;padding:0 4px;border-bottom:1px solid var(--color-border-gray-light);width:100%;}
  .gnb a:hover,.gnb a.is-active{border-bottom-color:var(--color-border-gray-light);}
}
@media (max-width:640px){
  .section-head h2{font-size:26px;}
}

/* ============================================================
   카카오맵 지도 퍼가기(roughmap) — 오시는 길 / 문의하기
   퍼가기 코드에 mapWidth 를 넘기지 않고 여기서 100% 폭으로 처리한다.
   높이는 각 페이지 스타일에서 .wrap_map 으로 지정한다.
   하단 컨트롤바(카카오맵 링크·저작권 표기)는 그대로 노출한다.
   ============================================================ */
.root_daum_roughmap{width:100%!important;border-radius:var(--radius-m);overflow:hidden;}
.root_daum_roughmap .wrap_map{width:100%!important;}