@charset "utf-8";
@import './base.css';

#policy-wrap {
  max-width: 1920px;
  margin: 0 auto;
}

/* 목차 */
.policy-navigation {
  columns: 2;
  column-gap: clamp(var(--modi-spacing-l), 4vw, 280px);
  box-sizing: border-box;
  margin: var(--modi-spacing-xxxl) auto var(--modi-spacing-xxxl);
  padding: 40px clamp(40px, 11.7vw, 140px);
  border: 1px solid var(--modi-color-stroke-primary);
  border-radius: var(--modi-radius-xl);
  list-style: none;
}
.policy-navigation > li {
  break-inside: avoid;
  margin: 0;
}
.policy-navigation a {
  display: inline-block;
  padding: var(--modi-spacing-m) 0;
  font-size: var(--modi-typography-title-m-bold-size);
  font-weight: var(--modi-font-weight-bold);
  line-height: var(--modi-typography-title-m-bold-line-height);
  color: var(--modi-color-text-primary);
}
.policy-navigation a:hover,
.policy-navigation a:focus {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .policy-navigation {
    columns: 1;
  }
}

/* 주요 개인정보처리 표시(라벨링) */
.policy-label-info {
  margin: var(--modi-spacing-xxxl) auto var(--modi-spacing-xxxl);
  border-bottom: 1px solid var(--modi-color-stroke-primary);
}
.policy-label-heading {
  margin: 0;
  padding: var(--modi-spacing-m) 0;
  font-size: var(--modi-typography-title-m-bold-size);
  text-align: center;
  color: var(--modi-color-text-primary);
  background-color: var(--modi-color-background-secondary);
  border-top: 1px solid var(--modi-color-stroke-primary);
  border-bottom: 1px solid var(--modi-color-stroke-primary);
}
.policy-label-info > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--modi-spacing-xxxl);
  list-style: none;
  margin: 0;
  padding: var(--modi-spacing-xxxl);
}
.policy-label-info .policy-label-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--modi-spacing-s);
  width: calc((100% - var(--modi-spacing-xxxl) * 2) / 3);
  margin-bottom: 0;
  text-align: center;
  color: var(--modi-color-text-tertiary);
  font-size: var(--modi-typography-reading-m-size);
}
.policy-label-info .policy-label-item > strong {
  display: block;
  padding: var(--modi-spacing-s) 0;
  font-size: var(--modi-typography-body-m-size);
  color: var(--modi-color-text-primary);
}
.policy-label-info .policy-label-item > img {
  display: block;
  width: clamp(56px, 17.5vw, 160px);
  height: clamp(56px, 17.5vw, 160px);
}
@media (max-width: 640px) {
  .policy-label-info .policy-label-item {
    width: 100%;
  }
  .policy-label-info .policy-label-item > img {
    width: 56px;
    height: 56px;
  }
}

.label-box {
  display: flex;
  align-items: center;
  column-gap: var(--modi-spacing-m);
  padding-top: var(--modi-spacing-xxxl);
}
.label-box > .ic-label {
  display: inline-block;
  width: 56px;
  height: 56px;
}

/* 링크 버튼 */
.policy-link-text {
  color: var(--modi-color-text-primary);
  text-decoration: underline;
}
.policy-link-btn {
  display: flex;
  width: fit-content;
  box-sizing: border-box;
  padding: var(--modi-spacing-m);
  margin-top: var(--modi-spacing-m);
  margin-bottom: var(--modi-spacing-xxxl);
  justify-content: center;
  align-items: center;
  gap: var(--modi-spacing-xxs);
  border-radius: var(--modi-radius-m);
  border: 1px solid var(--modi-color-stroke-primary);
  background: var(--modi-color-background-primary);
  color: var(--modi-color-text-primary);
}
p + .policy-link-btn,
ul + .policy-link-btn,
ol + .policy-link-btn {
  margin-top: -28px;
}
i.ic-16-arrow-right-big {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: top;
  background: url(https://t1.kakaocdn.net/kakaomobility/policy_web/templates/privacy-new/ic_16_arrow_right_big.svg)
    no-repeat 0 0 / auto;
  width: 24px;
  height: 24px;
}