/* ============================================================
   CSI 공개 상세페이지 공통 디자인 시스템 (R1.5)

   운영 중인 R1.4 Homepage(index.html)의 디자인 언어를 정본으로 삼아
   나머지 공개 상세페이지의 Header / Footer / 관련경로 / 상담모달을 통일한다.

   설계 결정 — 왜 r15- 접두사인가:
   상세페이지 13개는 각자 다른 인라인 CSS를 갖고 있고 .wrap .btn .hd .f 같은
   흔한 이름을 이미 쓴다. 공통 클래스를 그 이름으로 넣으면 페이지마다
   예측 불가능하게 충돌한다. 그래서 새로 넣는 공통 요소만 r15- 로 접두하고
   토큰도 --r15-* 로 두어 각 페이지의 :root 와 섞이지 않게 한다.
   index.html 은 이미 정본이므로 이 파일을 쓰지 않는다(중복 적용 금지).

   모달(.tpl-*)만 접두하지 않는다. 상세페이지 어디에도 tpl- 클래스가 없어
   충돌이 불가능하고, index 와 같은 마크업·같은 동작을 그대로 재사용해야
   "상담 문의는 어디서 눌러도 같은 모달" 이라는 계약이 지켜지기 때문이다.
   ============================================================ */

.r15-header,
.r15-footer,
.r15-related,
.tpl-overlay {
  --r15-nv-0: #080d1a;
  --r15-nv-1: #0b1224;
  --r15-nv-2: #0e1730;
  --r15-nv-3: #131e3d;
  --r15-cobalt: #3b62f6;
  --r15-cobalt-2: #2947d8;
  --r15-cobalt-ink: #8fa8ff;
  --r15-ice: #f6f8fd;
  --r15-ice-2: #ffffff;
  --r15-on-dark-0: #ffffff;
  --r15-on-dark-1: #c8d4ea;
  --r15-on-dark-2: #9aabc8;
  --r15-on-light-0: #0b1224;
  --r15-on-light-1: #35415c;
  --r15-on-light-2: #4d5a76;
  --r15-hair: rgba(143, 168, 255, 0.16);
  --r15-hair-2: rgba(143, 168, 255, 0.26);
  --r15-hair-light: rgba(11, 18, 36, 0.10);
  --r15-maxw: 1240px;
  --r15-gut: clamp(20px, 4vw, 40px);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  box-sizing: border-box;
}

.r15-header *,
.r15-footer *,
.r15-related *,
.tpl-overlay * { box-sizing: border-box; }

.r15-wrap {
  width: 100%;
  max-width: var(--r15-maxw);
  margin: 0 auto;
  padding-left: var(--r15-gut);
  padding-right: var(--r15-gut);
}

/* ---------- skip link ---------- */
.r15-skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border-radius: 10px;
  background: var(--r15-ice); color: #0b1224;
  font-size: 15.5px; font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.r15-skip:focus { transform: none; }

/* ---------- 01. HEADER ---------- */
.r15-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 13, 26, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--r15-hair);
  color: var(--r15-on-dark-1);
}
.r15-nav-inner { display: flex; align-items: center; gap: 20px; height: 72px; }

/* 워드마크: 텍스트만. 심벌·아이콘 마크 없음 */
.r15-wordmark {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--r15-on-dark-0); text-decoration: none;
}
.r15-wordmark .sep { color: var(--r15-cobalt-ink); font-weight: 600; }
.r15-wordmark .sub { color: var(--r15-cobalt-ink); font-weight: 600; font-size: 17px; }
/* Header 의 워드마크는 홈으로 가는 링크다. 글자 높이만으로는 34~36px 이라
   터치 최소 44px 을 못 채운다. 링크 박스만 키우고 글자 크기는 그대로 둔다. */
.r15-header .r15-wordmark { min-height: 44px; align-items: center; }

.r15-nav-links { display: none; gap: 28px; margin-left: auto; }
.r15-nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--r15-on-dark-1); font-size: 16px; font-weight: 600; text-decoration: none;
}
.r15-nav-links a:hover { color: var(--r15-on-dark-0); }

.r15-nav-side { display: none; gap: 10px; align-items: center; }

.r15-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700; font-family: inherit;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
}
.r15-btn-primary { background: var(--r15-cobalt); color: #ffffff; }
.r15-btn-primary:hover { background: var(--r15-cobalt-2); }
.r15-btn-ghost { background: transparent; color: var(--r15-on-dark-0); border-color: var(--r15-hair-2); }
.r15-btn-ghost:hover { background: rgba(143, 168, 255, 0.10); }

.r15-toggle {
  margin-left: auto; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--r15-hair-2); border-radius: 10px;
  background: transparent; color: var(--r15-on-dark-0); cursor: pointer;
}
.r15-toggle:hover { background: rgba(143, 168, 255, 0.10); }
.r15-toggle span {
  display: block; width: 20px; height: 2px; background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.r15-drawer { display: none; border-top: 1px solid var(--r15-hair); background: var(--r15-nv-1); }
.r15-drawer[data-open="true"] { display: block; }
.r15-drawer .r15-wrap { padding-top: 10px; padding-bottom: 18px; }
.r15-drawer a {
  display: flex; align-items: center; min-height: 52px;
  color: var(--r15-on-dark-1); font-size: 17px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--r15-hair);
}
.r15-drawer a:last-of-type { border-bottom: 0; }
.r15-drawer .r15-drawer-cta { display: grid; gap: 10px; margin-top: 14px; }
.r15-drawer .r15-drawer-cta .r15-btn { width: 100%; }

@media (min-width: 981px) {
  .r15-toggle { display: none; }
  .r15-nav-links { display: flex; }
  .r15-nav-side { display: flex; }
  .r15-drawer { display: none !important; }
}

/* ---------- 다음으로 연결되는 경로 ---------- */
.r15-related {
  background: var(--r15-nv-1);
  border-top: 1px solid var(--r15-hair);
  padding: clamp(44px, 5.5vw, 72px) 0;
  color: var(--r15-on-dark-1);
}
.r15-related-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--r15-cobalt-ink);
}
.r15-related-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--r15-cobalt-ink);
}
.r15-related h2 {
  margin: 14px 0 0; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.28;
  font-weight: 800; color: var(--r15-on-dark-0); word-break: keep-all;
}
.r15-related-lead {
  margin: 12px 0 0; max-width: 680px; font-size: 17px; line-height: 1.7;
  color: var(--r15-on-dark-2); word-break: keep-all;
}
.r15-related-grid {
  display: grid; gap: 16px; margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.r15-related-card {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 44px; padding: 22px 22px 20px; border-radius: 16px;
  background: var(--r15-nv-2); border: 1px solid var(--r15-hair);
  color: var(--r15-on-dark-1); text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s;
}
.r15-related-card:hover {
  background: var(--r15-nv-3); border-color: var(--r15-hair-2); transform: translateY(-2px);
}
.r15-related-card .cat {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--r15-cobalt-ink);
}
.r15-related-card .name {
  font-size: 19px; font-weight: 800; color: var(--r15-on-dark-0); word-break: keep-all;
}
.r15-related-card .why {
  font-size: 15.5px; line-height: 1.65; color: var(--r15-on-dark-2); word-break: keep-all;
}
.r15-related-card .go {
  margin-top: auto; padding-top: 8px;
  font-size: 15.5px; font-weight: 700; color: var(--r15-cobalt-ink);
}

/* ---------- 08. FOOTER ---------- */
.r15-footer {
  background: #060a14; border-top: 1px solid var(--r15-hair);
  padding: clamp(48px, 6vw, 76px) 0 30px; color: var(--r15-on-dark-2);
}
.r15-footer-grid { display: grid; gap: clamp(30px, 4vw, 44px); }
.r15-footer-note {
  margin-top: 18px; max-width: 340px; color: var(--r15-on-dark-2);
  font-size: 16.5px; line-height: 1.7; word-break: keep-all;
}
.r15-footer-cols { display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r15-footer-col-title {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r15-on-dark-0);
}
.r15-footer-col a,
.r15-footer-col button.r15-as-link {
  display: flex; align-items: center; min-height: 44px;
  color: var(--r15-on-dark-2); font-size: 16.5px; text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.r15-footer-col a:hover,
.r15-footer-col button.r15-as-link:hover { color: var(--r15-on-dark-0); }
.r15-footer-mail { font-size: 16px; overflow-wrap: anywhere; }
/* 이메일이 한 줄에 들어가도록 CONTACT 열은 모바일에서 전체 폭을 쓴다 */
.r15-footer-cols > .r15-footer-col:last-child { grid-column: 1 / -1; }

.r15-footer-legal {
  margin-top: clamp(28px, 3.5vw, 40px); padding-top: 20px;
  border-top: 1px solid var(--r15-hair);
  font-size: 15px; line-height: 1.75; color: var(--r15-on-dark-2); word-break: keep-all;
}
.r15-footer-legal p { margin: 0 0 6px; }
.r15-footer-legal p:last-child { margin-bottom: 0; }

.r15-footer-bottom {
  margin-top: clamp(34px, 4vw, 48px); padding-top: 22px;
  border-top: 1px solid var(--r15-hair);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  font-size: 15px; color: var(--r15-on-dark-2);
}
.r15-footer-bottom .r15-footer-disclaimer { max-width: 620px; word-break: keep-all; }
.r15-footer-bottom a {
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--r15-on-dark-2); text-decoration: none;
}
.r15-footer-bottom a:hover { color: var(--r15-on-dark-0); }

@media (min-width: 981px) {
  .r15-footer-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); }
  .r15-footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .r15-footer-cols > .r15-footer-col:last-child { grid-column: auto; }
}

/* ---------- 문의 양식 모달 (index 와 동일한 마크업·동작) ---------- */
.tpl-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 10, 20, 0.62);
}
.tpl-overlay[hidden] { display: none; }
.tpl-modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: var(--r15-ice-2); color: var(--r15-on-light-1);
  border: 1px solid var(--r15-hair-light); border-radius: 18px;
  padding: clamp(22px, 3vw, 30px);
  box-shadow: 0 30px 70px -20px rgba(6, 10, 20, 0.55);
}
.tpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tpl-head .eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r15-cobalt-2);
}
.tpl-head .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--r15-cobalt-2); }
.tpl-head h3 { margin: 10px 0 0; font-size: clamp(21px, 3vw, 25px); color: var(--r15-on-light-0); }
.tpl-x {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px;
  background: transparent; border: 1px solid var(--r15-hair-light);
  color: var(--r15-on-light-1); font-size: 17px; cursor: pointer;
}
.tpl-x:hover { background: #eef2fb; color: var(--r15-on-light-0); }
.tpl-desc { margin-top: 14px; color: var(--r15-on-light-1); font-size: 16.5px; line-height: 1.7; }
.tpl-desc strong { color: var(--r15-cobalt-2); font-weight: 700; overflow-wrap: anywhere; }
.tpl-body {
  margin-top: 16px; padding: 18px; border-radius: 12px;
  background: #eef2fb; border: 1px solid var(--r15-hair-light);
  color: var(--r15-on-light-0); font-family: inherit; font-size: 16px; line-height: 1.9;
  white-space: pre-wrap; word-break: keep-all;
}
.tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tpl-actions .r15-btn { flex: 1 1 auto; }
/* .r15-btn-ghost 는 다크용(흰 글자)이라 밝은 모달 안에서는 묻힌다.
   모달 안으로만 한정해 밝은 배경용 색을 준다. 기본 18.65:1 / hover 6.52:1. */
.tpl-modal .r15-btn-ghost { color: var(--r15-on-light-0); border-color: rgba(11, 18, 36, 0.22); }
.tpl-modal .r15-btn-ghost:hover { color: var(--r15-cobalt-2); border-color: rgba(41, 71, 216, 0.45); }
.tpl-modal .r15-btn-ghost:focus-visible { outline-color: var(--r15-cobalt-2); }
.tpl-note { margin-top: 12px; color: var(--r15-on-light-2); font-size: 15.5px; }
.tpl-note.is-done { color: #067a54; }

.r15-header :focus-visible,
.r15-footer :focus-visible,
.r15-related :focus-visible,
.tpl-overlay :focus-visible {
  outline: 2px solid var(--r15-cobalt-ink); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .r15-related-card { transition: none; }
  .r15-related-card:hover { transform: none; }
}