@charset "utf-8";


/* ============================================================
   common-ui.css — 재사용 UI 컴포넌트 (.ui-*) + 배경 유틸 (.bg-*) · 메인 전용
   common-style.css 의 토큰만 참조. 타이포는 .txt-wrap 스코프 위에서 쓰는 전제.
   ⚠️ 같은 레이아웃이 두 섹션 이상 반복되면 #secNN 에 복제하지 말고 여기로 승격할 것.
============================================================ */

/* 컴포넌트 토큰(--ui-radius-*, --ui-line*, --ui-shadow)은
   common-style.css 의 :root 에 선언되어 있음 — 여기서는 참조만 함 */


/* ── 1. 배경 색상 유틸 — 다크 배경엔 .w-color 등 텍스트 유틸 병행 ── */

.bg-m     { background-color: var(--main-color); }
.bg-pt    { background-color: var(--point-color); }
.bg-pt02  { background-color: var(--point-color02); }
.bg-pt03  { background-color: var(--point-color03); }
.bg-sb    { background-color: var(--sub-color01); }
.bg-sb02  { background-color: var(--sub-color02); }
.bg-sb03  { background-color: var(--sub-color03); }
.bg-sb04  { background-color: var(--sub-color04); }
.bg-sb05  { background-color: var(--sub-color05); }
.bg-w     { background-color: #fff; }
.bg-gray  { background-color: var(--white-color); }

/* 그라데이션 밴드 (CTA 강조 — 미드블루→틸) */
.bg-grad-band {
  background: linear-gradient(90deg, var(--sub-color05) 0%, var(--point-color) 100%);
}


/* ── 2. 라운드 박스 .ui-box — .line / .soft / .fill / .lg ── */

.ui-box {
  position     : relative;
  padding      : var(--one-gap-xl);
  border-radius: var(--ui-radius);
  background   : #fff;
  border       : 1px solid var(--ui-line);
  box-shadow   : var(--ui-shadow);
}
.ui-box.line { box-shadow: none; }
.ui-box.soft { background: var(--point-color03); border-color: var(--ui-line-pt); box-shadow: none; }
.ui-box.fill { background: var(--main-color); border-color: transparent; }
.ui-box.lg   { border-radius: var(--ui-radius-lg); }


/* ── 3. 버튼 .ui-btn — .line / .navy / .pill / .arrow / .sm .lg / 래퍼 .ui-btn-group ── */

.ui-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--one-gap-sm);
  padding        : 0 40px;
  min-height     : 60px;
  border-radius  : var(--ui-radius-s);
  background     : var(--point-color);
  color          : #fff;
  font-size      : var(--one-p-tit);
  font-weight    : 600;
  line-height    : 1.2;   /* 버튼 전용 예외값 */
  letter-spacing : -0.02em;
  text-align     : center;
  white-space    : nowrap;
  cursor         : pointer;
  transition     : filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ui-btn:hover { filter: brightness(1.06); }

.ui-btn.navy { background: var(--main-color); color: #fff; }
.ui-btn.line {
  background   : transparent;
  color        : var(--point-color);
  border       : 1px solid var(--point-color);
}
.ui-btn.line:hover { background: var(--point-color); color: #fff; filter: none; }

.ui-btn.pill { border-radius: var(--ui-radius-pill); }
.ui-btn.sm   { min-height: 48px; padding: 0 var(--one-gap-lg); font-size: var(--one-body); }
.ui-btn.lg   { min-height: 72px; padding: 0 var(--one-space-s); font-size: var(--one-hd3); }

/* 화살표 */
.ui-btn.arrow::after {
  content   : "→";
  font-weight: 400;
  transition: transform 0.2s ease;
}
.ui-btn.arrow:hover::after { transform: translateX(4px); }

.ui-btn-group {
  display  : flex;
  flex-wrap: wrap;
  gap      : var(--one-gap-r);
}


/* ── 4. 태그/라벨 .ui-tag — .deep / .navy / .line ── */

.ui-tag {
  display       : inline-block;
  padding       : 0.35em 1.2em;
  border-radius : var(--ui-radius-pill);
  background    : var(--point-color);
  color         : #fff;
  font-size     : var(--one-caption);
  font-weight   : 600;
  line-height   : 1.5;   /* 라벨 전용 예외값 */
  letter-spacing: -0.02em;
  white-space   : nowrap;
}
.ui-tag.deep { background: var(--point-color02); }
.ui-tag.navy { background: var(--main-color); }
.ui-tag.line {
  background: transparent;
  color     : var(--point-color);
  border    : 1px solid var(--point-color);
}


/* ── 5. 넘버 뱃지 .ui-num — .square / .lg ── */

.ui-num {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  background     : var(--point-color);
  color          : #fff;
  font-size      : var(--one-body);
  font-weight    : 700;
  line-height    : 1;
}
.ui-num.square { border-radius: var(--ui-radius-s); width: auto; padding: 0 var(--one-gap-r); height: 40px; }
.ui-num.lg     { width: 56px; height: 56px; font-size: var(--one-p-tit); }
.ui-num.lg.square { width: auto; }


/* ── 6. 피처 행 .ui-feature (좌 텍스트 / 우 이미지) — .rev 로 반전 ── */

.ui-feature {
  display    : flex;
  align-items: center;
  gap        : var(--one-space-s);
}
.ui-feature.rev { flex-direction: row-reverse; }
.ui-feature__txt { flex: 1 1 0; min-width: 0; }
.ui-feature__img { flex: 1 1 0; min-width: 0; }
.ui-feature + .ui-feature { margin-top: var(--one-space-r); }


/* ── 7. 카드 그리드 .ui-cards — 열 수는 --ui-cols (기본 3) ── */

.ui-cards {
  --ui-cols: 3;
  display              : grid;
  grid-template-columns: repeat(var(--ui-cols), 1fr);
  gap                  : var(--one-gap-lg);
}
.ui-cards.col-2 { --ui-cols: 2; }
.ui-cards.col-4 { --ui-cols: 4; }

.ui-card {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  text-align    : center;
  gap           : var(--one-gap-r);
  padding       : var(--one-gap-xl) var(--one-gap-lg);
  border-radius : var(--ui-radius);
  background    : #fff;
  border        : 1px solid var(--ui-line);
}
.ui-card.soft { background: var(--point-color03); border-color: var(--ui-line-pt); }

.ui-card__ico {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 96px;
  height         : 96px;
  border-radius  : 50%;
  background     : var(--sub-color01);
  overflow       : hidden;
}
.ui-card__ico img { width: 60%; height: auto; }
.ui-card__tit { font-size: var(--one-p-tit); font-weight: 600; color: var(--point-color02); }
.ui-card__txt { font-size: var(--one-caption); color: var(--one-txt-color); }


/* ── 8. 넘버 스텝 .ui-steps (기본 2열) ── */

.ui-steps {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : var(--one-gap-lg) var(--one-space-s);
}
.ui-steps.col-1 { grid-template-columns: 1fr; }
.ui-steps.col-3 { grid-template-columns: repeat(3, 1fr); }

.ui-steps__item {
  display    : flex;
  align-items: flex-start;
  gap        : var(--one-gap-r);
}
.ui-steps__item > .ui-num { width: 32px; height: 32px; font-size: var(--one-caption); }
.ui-steps__item p { flex: 1 1 0; min-width: 0; padding-top: 0.2em; }


/* ── 9. 비교 표 .ui-table — .hl(강조 셀) / .row-head(첫 열을 세로 헤더로) ── */

.ui-table {
  width          : 100%;
  border-collapse: separate;
  border-spacing : 0;
  border-radius  : var(--ui-radius);
  overflow       : hidden;
  border         : 1px solid var(--ui-line);
  font-size      : var(--one-body);
  color          : var(--one-txt-color);
}
.ui-table th,
.ui-table td {
  padding    : var(--one-gap-r) var(--one-gap-lg);
  border-bottom: 1px solid var(--ui-line);
  border-right : 1px solid var(--ui-line);
  text-align   : center;
  vertical-align: middle;
  word-break   : keep-all;
}
.ui-table tr:last-child th,
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table th:last-child,
.ui-table td:last-child { border-right: 0; }

.ui-table thead th {
  background : var(--point-color02);
  color      : #fff;
  font-weight: 600;
}
/* 첫 열 세로 헤더 강조 */
.ui-table.row-head tbody th:first-child,
.ui-table.row-head th[scope="row"] {
  background : var(--point-color);
  color      : #fff;
  font-weight: 600;
}
.ui-table tbody tr:nth-child(even) td { background: var(--sub-color02); }
.ui-table .hl { color: var(--point-color); font-weight: 700; }


/* ── 10. FAQ 아코디언 — .ui-faq-q 클릭 시 JS 가 부모 .ui-faq-item 에 .is-open 토글 ── */

.ui-faq { display: flex; flex-direction: column; gap: var(--one-gap-r); }

.ui-faq-item {
  border-radius: var(--ui-radius);
  background   : var(--main-color);
  overflow     : hidden;
}
.ui-faq-q {
  position   : relative;
  display    : flex;
  align-items: center;
  gap        : var(--one-gap-r);
  padding    : var(--one-gap-lg) var(--one-space-s);
  color      : #fff;
  font-size  : var(--one-p-tit);
  font-weight: 600;
  cursor     : pointer;
  list-style : none;
}
.ui-faq-q::after {
  content   : "+";
  margin-left: auto;
  font-weight: 400;
  transition : transform 0.3s ease;
}
.ui-faq-item.is-open .ui-faq-q::after { transform: rotate(45deg); }

.ui-faq-a {
  max-height: 0;
  overflow  : hidden;
  color     : rgba(255, 255, 255, 0.85);
  font-size : var(--one-body);
  line-height: var(--one-lh-r);
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding   : 0 var(--one-space-s);
}
.ui-faq-item.is-open .ui-faq-a {
  max-height: 600px;   /* 전개 여유값 — 콘텐츠 길이 초과 시 개별 상향 */
  padding   : 0 var(--one-space-s) var(--one-gap-lg);
}


/* ── 11. 증례 갤러리 .ui-case (다크 프레임) — __head / __grid(2열) / __item ── */

.ui-case {
  padding      : var(--one-space-r);
  border-radius: var(--ui-radius-lg);
  background   : var(--main-color);
  color        : var(--white-color);
}
.ui-case__head {
  display    : flex;
  align-items: center;
  gap        : var(--one-gap-r);
  margin-bottom: var(--one-gap-xl);
}
.ui-case__grid {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : var(--one-gap-lg);
}
.ui-case__grid.col-3 { grid-template-columns: repeat(3, 1fr); }
.ui-case__item {
  background   : rgba(255, 255, 255, 0.06);
  border-radius: var(--ui-radius-s);
  overflow     : hidden;
}
.ui-case__item figcaption {
  display   : block;
  padding   : var(--one-gap-r);
  font-size : var(--one-caption);
  text-align: center;
}


/* ── 12. Point 강조 바 .ui-point-bar ── */

.ui-point-bar {
  display     : flex;
  align-items : center;
  gap         : var(--one-gap-r);
  padding     : var(--one-gap-lg) var(--one-space-s);
  border-radius: var(--ui-radius);
  background   : var(--sub-color02);
  border-left  : 4px solid var(--point-color);
  font-size    : var(--one-body);
}
.ui-point-bar strong { color: var(--point-color02); }


/* ── 13. 캡션 딜리미터 .ui-cap-line (.sec-hd 안에서 사용) ── */

.ui-cap-line { display: inline-flex; align-items: center; gap: var(--one-gap-r); color: var(--point-color); }
.ui-cap-line::before,
.ui-cap-line::after {
  content   : "";
  width     : 28px;   /* 장식 라인 길이 — 변수화 제외 */
  height    : 1px;
  background: currentColor;
}


/* ── 14. 섹션 타이틀 바 .ui-sectit (좌 제목 / 우 브랜드 + 하단 라인) ── */

.ui-sectit {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  gap            : var(--one-gap-lg);
  padding-bottom : var(--one-gap-lg);
  border-bottom  : 1px solid rgba(9, 50, 78, 0.3);   /* main-color 30% */
  color          : var(--main-color);
}
.ui-sectit__tit   { font-size: var(--one-hd3);   font-weight: 400; letter-spacing: -0.02em; }
.ui-sectit__brand { font-size: var(--one-p-tit); font-weight: 600; letter-spacing: 0.12em; }


/* ── 15. 헤드 캡션 .ui-headcap (좌우 라인 + 중앙 문구)
   ⚠️ 문구는 반드시 <span> 으로 감쌀 것 — flex item 이 1개여야 줄바꿈이 정상 동작한다 ── */

.ui-headcap {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--one-space-s);
}
.ui-headcap > span { min-width: 0; }
.ui-headcap::before,
.ui-headcap::after {
  content   : "";
  flex-shrink: 0;
  width     : clamp(60px, 9vw, 160px);   /* 장식 라인 길이 — 변수화 제외 */
  height    : 1px;
  background: var(--sub-color03);
}


/* ── 16. 타이틀 걸침 박스 .ui-titbox (section04 미백추천 / section07 틀니장점)
   타이틀 pill 은 시안 통이미지(<img>) 그대로. 섹션 스코프엔 밴드 배경만 남긴다 ── */

.ui-titbox {
  position     : relative;
  max-width    : 900px;
  margin       : 0 auto;
  padding      : var(--one-space-s);
  border       : 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--ui-radius-lg);
}

/* 타이틀 — 박스 상단 라인에 걸침 */
.ui-titbox__tit {
  position   : absolute;
  left       : 50%;
  top        : 0;
  width      : 60%;
  max-width  : 746px;
  margin-left: -3%;               /* 이미지 좌측 장식(엄지·별) 만큼 광학 보정 */
  transform  : translate(-50%, -74%);
  line-height: 0;
}
.ui-titbox__tit img { display: block; width: 100%; }

.ui-titbox__list { max-width: 680px; margin: 0 auto; }
.ui-titbox__list li {
   display: flex;
   align-items: center;
   gap: var(--one-gap-lg);
   padding: var(--one-gap-sm) 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
   color: #fff;

}
.ui-titbox__list li:last-child { border-bottom: 0; }
.ui-titbox__list em {
   flex-shrink: 0;
   font-size: var(--one-hd2);
   font-weight: 300;
   font-style: normal;
   color: rgba(255, 255, 255, 0.85);

}
.ui-titbox__list span { position: relative; padding-left: var(--one-gap-lg); font-weight: 600;  font-size: var(--one-p-tit);}
.ui-titbox__list span::before {
  position: absolute;
   content: "";
   left: 0;
   top: 0.65em;
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
   background: #fff;
}


/* ── 반응형: 태블릿 ── */

@media all and (max-width: 1024px) {
  .ui-btn    { min-height: 54px; padding: 0 var(--one-gap-xl); }
  .ui-btn.sm { min-height: 44px; }
  .ui-btn.lg { min-height: 62px; }

  .ui-headcap { gap: var(--one-gap-xl); }

  /* 박스가 좁아지는 만큼 타이틀 비중 확대 */
  .ui-titbox__tit { width: 70%; }

  .ui-feature { gap: var(--one-gap-xl); }
  .ui-feature + .ui-feature { margin-top: var(--one-space-s); }

  .ui-cards.col-4 { --ui-cols: 3; }

  .ui-case { padding: var(--one-space-s); }
}


/* ── 반응형: 모바일 ── */

@media all and (max-width: 639px) {
  .ui-box { padding: var(--one-gap-lg); }

  /* 타이틀 걸침 박스 — 타이틀 풀폭(중앙), 좌우 패딩 축소 */
  .ui-titbox { padding: var(--one-space-s) var(--one-gap-lg) var(--one-gap-lg); }
  .ui-titbox__tit { width: 94%; margin-left: -3%; }
  .ui-titbox__list li { gap: var(--one-gap-r); padding: var(--one-gap-r) 0; }
  .ui-titbox__list em { font-size: var(--one-p-tit); }
  .ui-titbox__list span::before { top: 50%; transform: rotate(45deg) translate(-50%, 0); }

  .ui-btn      { width: 100%; min-height: 48px; padding: 0 var(--one-gap-lg); }   /* 모바일 풀폭 */
  .ui-btn.sm   { width: auto; min-height: 40px; }
  .ui-btn.lg   { min-height: 54px; }
  .ui-btn-group { flex-direction: column; }

  /* POINT 행 세로 전환 (이미지 → 텍스트 순서) */
  .ui-feature,
  .ui-feature.rev { flex-direction: column; align-items: stretch; gap: var(--one-gap-lg); }

  /* 카드·스텝 그리드 축소 */
  .ui-cards,
  .ui-cards.col-2,
  .ui-cards.col-4 { --ui-cols: 2; }
  .ui-cards.stack { --ui-cols: 1; }

  .ui-steps,
  .ui-steps.col-3 { grid-template-columns: 1fr; gap: var(--one-gap-r); }

  .ui-card__ico { width: 72px; height: 72px; }
/* ── 14. 섹션 타이틀 바 .ui-sectit (좌 제목 / 우 브랜드 + 하단 라인) ── */

.ui-sectit__brand {
    font-size: var(--one-body);
    padding: 0 0 0.5vw;
}

  /* 표 가로 스크롤 (레이아웃 깨짐 방지) */
  .ui-table { display: block; }
  .ui-table thead,
  .ui-table tbody { display: table; width: 100%; }

  .ui-case { padding: var(--one-gap-xl); border-radius: var(--ui-radius); }
  .ui-case__grid,
  .ui-case__grid.col-3 { grid-template-columns: 1fr; }

  .ui-headcap { gap: var(--one-gap-lg); }
  .ui-headcap::before,
  .ui-headcap::after { width: 24px; }

  .ui-faq-q { padding: var(--one-gap-r) var(--one-gap-lg); }
  .ui-faq-a { padding-left: var(--one-gap-lg); padding-right: var(--one-gap-lg); }
  .ui-faq-item.is-open .ui-faq-a { padding: 0 var(--one-gap-lg) var(--one-gap-lg); }
}