/**
 * sub.css - 서브 페이지 공통
 * (페이지별: introduce, information, laser, community)
 */

/* ============================================
   SUB 공통 - 레이아웃, 탭
   ============================================ */
.sub_content,
.sub-content {
  padding-top: 65px;
  background: #fbf8f2;
}

.con_inner,
.con-inner {
  padding: 105px 0 0;
}

/* 서브 상단 탭: 전체 폭 보더 + 본문과 동일한 inner 폭 */
.sub-nav-tabs-wrap {
  width: 100%;
  border-top: 1px solid #95867e;
  border-bottom: 1px solid #95867e;
  background: #fbf8f2;
  box-sizing: border-box;
}

.sub-nav-tabs-wrap .inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.sub-nav-tabs-wrap {
  --sub-tab-cell-w: 220px;
}

.sub-ul-tab {
  height: 55px;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-ul-tab--clinic,
.sub-ul-tab--treatment,
.sub-ul-tab--ar-signature {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.sub-ul-tab li {
  background: #fbf8f2;
}

.sub-ul-tab--clinic > li,
.sub-ul-tab--treatment > li,
.sub-ul-tab--ar-signature > li {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* 2탭(커뮤니티): 고정 폭 블록 가운데 */
.sub-ul-tab--community {
  flex: 0 1 auto;
  width: calc(var(--sub-tab-cell-w) * 2);
  max-width: 100%;
}

.sub-ul-tab--community > li {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--sub-tab-cell-w);
}

/* 1탭(아르스토리 · 시술안내 단일): 동일 너비 */
.sub-ul-tab--story,
.sub-ul-tab--price-only {
  flex: 0 1 auto;
  width: var(--sub-tab-cell-w);
  max-width: 100%;
}

.sub-ul-tab--story > li,
.sub-ul-tab--price-only > li {
  flex: 0 0 100%;
  width: 100%;
}

.sub-ul-tab--clinic li a,
.sub-ul-tab--treatment li a,
.sub-ul-tab--ar-signature li a {
  font-size: clamp(13px, 1.35vw, 16px);
  padding: 0 8px;
}



.sub-ul-tab--story li a,
.sub-ul-tab--price-only li a {
  width: 100%;
  padding: 0 12px;
  white-space: nowrap;
}

.sub-ul-tab li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border-right: 1px solid #95867e;
  padding: 0 12px;
  font-weight: 400;
  color: #786454;
  background: #fbf8f2;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sub-ul-tab li:first-child a {
  border-left: 1px solid #95867e;
}

.sub-ul-tab li a:hover {
  color: #5c4d42;
  background: #f3ece4;
}

.sub-ul-tab li a.on {
  background: var(--color-primary, #710014);
  color: #fff;
  font-weight: 500;
}

.sub-ul-tab li a.on:hover {
  background: var(--color-primary, #710014);
  color: #fff;
}

/* ============================================
   서브 헤더
   ============================================ */
.sub-page .main-header {
  animation: none;
  width: 100%;
  top:0;
  left: 0;
  border-radius: 0;
  margin: 0;
  border-bottom: 1px solid #95867e;
  background: #fbf8f2;
  height: 65px;
  opacity: 1;
  padding: 0.3rem 0 0;
  transform: translateY(0%);
}

/* ============================================
   서브 탑 배경
   ============================================ */
.sub-bg-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.sub-top-view-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.sub-bg-01 {
  background: url("../assets/img/sub01_bg.png") 50% 50% / cover no-repeat;
}

.sub-bg-02 {
  background: url("../assets/img/sub02_bg.png") 50% 50% / cover no-repeat;
}

.sub-bg-04 { background: url("../assets/img/sub04_bg.png") 50% 50% / cover no-repeat; }
.sub-bg-05 { background: url("../assets/img/sub05_bg.png") 50% 50% / cover no-repeat; }

.sub-top-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.sub-top-text div {
  overflow: hidden;
  position: relative;
}

.sub-top-text h1 {
  font-size: 22px;
  padding-bottom: 5px;
}

.sub-top-text p {
  font-size: 35px;
  font-weight: 500;
  letter-spacing: 2px;
}

/* ============================================
   서브 콘텐츠 헤더
   ============================================ */
.sub-cont-header {
  text-align: center;
}

.sub-cont-header h2 {
  font-size: 35px;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 10px;
}

.sub-cont-header p {
  font-size: 17px;
  color: #888;
}

@media (max-width: 1200px) {
  .sub-nav-tabs-wrap .inner {
    padding: 0 40px;
  }
}

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 768px) {
  .sub_content,
  .sub-content {
    padding-top: 45px;
  }

  .sub-page .main-header {
    height: 45px;
  }

  /* 탭: 가로 스크롤 대신 전체 폭 2열 그리드 */
  .sub-nav-tabs-wrap .inner {
    padding: 0;
    max-width: none;
    width: 100%;
    display: block;
  }

  .sub-ul-tab {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 0;
    margin: 0;
    padding: 0;
    background: #fbf8f2;
    box-sizing: border-box;
  }

  .sub-ul-tab > li {
    min-width: 0;
    margin: 0;
    background: #fbf8f2;
    border-bottom: 1px solid #95867e;
    box-sizing: border-box;
  }

  .sub-ul-tab > li:nth-child(odd) {
    border-right: 1px solid #95867e;
  }

  .sub-ul-tab > li:nth-last-child(1) {
    border-bottom: none;
  }

  .sub-ul-tab > li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }

  /* 1탭(아르스토리·시술안내): 가로 정중앙 */
  .sub-ul-tab--story,
  .sub-ul-tab--price-only {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  .sub-ul-tab--story > li,
  .sub-ul-tab--price-only > li {
    flex: 0 0 auto;
    width: min(220px, 50%);
    max-width: 50%;
    border-right: none;
  }

  /* PC용 flex·고정폭 무력화 */
  .sub-ul-tab--clinic,
  .sub-ul-tab--treatment,
  .sub-ul-tab--ar-signature,
  .sub-ul-tab--community,
  .sub-ul-tab--story,
  .sub-ul-tab--price-only {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .sub-ul-tab--clinic > li,
  .sub-ul-tab--treatment > li,
  .sub-ul-tab--ar-signature > li,
  .sub-ul-tab--community > li {
    flex: none;
    width: auto;
    max-width: none;
  }

  .sub-ul-tab li a {
    width: 100%;
    min-height: 48px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    border: none;
    padding: 10px 8px;
    color: #786454;
    background: #fbf8f2;
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.35;
    word-break: keep-all;
  }

  /* PC 전용 :first-child 왼쪽선 — 모바일 그리드는 ul/li 테두리로 처리 */
  .sub-ul-tab li:first-child a {
    border-left: none;
  }

  .sub-ul-tab li a.on {
    background: var(--color-primary, #710014);
    color: #fff;
    font-weight: 500;
  }
  .sub-ul-tab li a.on:hover {
    background: var(--color-primary, #710014);
    color: #fff;
  }
  .sub-cont-header h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }
  .sub-cont-header p {
    font-size: 14px;
  }

  .con_inner,
  .con-inner {
    padding: 48px 16px 0;
    box-sizing: border-box;
  }

  .sub-bg-wrap {
    width: 100%;
    height: 192px;
    overflow: hidden;
  }
  .sub-top-text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .sub-top-text h1 {
    font-size: 18px;
  }
  .sub-top-text p {
    font-size: 20px;
    letter-spacing: 0.05em;
  }
}