@charset "utf-8";
/* ==========================================================================
   Seetrol DESK — main.css
   모던 SaaS 리디자인 오버라이드 레이어
   --------------------------------------------------------------------------
   사용법: common/head.php 의 스타일시트 중 "가장 마지막"에 로드하세요.
       <link rel="stylesheet" href="/css/main.css">
   기존 style.css / responsive.css 는 수정하지 않습니다.
   되돌리려면 위 <link> 한 줄만 지우면 원상 복구됩니다.
   ========================================================================== */

/* Font Awesome 6.5.2 는 head.php 가 <link> 로 불러옵니다.
   @import 는 main.css 를 다 받은 뒤에야 요청이 시작돼 느립니다. */

/* ==========================================================================
   1. 디자인 토큰
   ========================================================================== */
:root {
  /* Brand — 기존 그린 계열을 유지하되 채도/명도를 정돈 */
  --st-brand-50:  #eefbf4;
  --st-brand-100: #d5f5e3;
  --st-brand-200: #abe9c9;
  --st-brand-300: #74d7a8;
  --st-brand-400: #3cbd84;
  --st-brand-500: #1aa06a;   /* primary */
  --st-brand-600: #0f8155;
  --st-brand-700: #0d6745;
  --st-brand-800: #0d5239;
  --st-brand-900: #0b4330;

  /* Ink / Neutral */
  --st-ink-900: #0b1a17;
  --st-ink-800: #16241f;
  --st-ink-700: #33413c;
  --st-ink-600: #4d5a55;
  --st-ink-500: #6b7772;
  --st-ink-400: #949e9a;
  --st-ink-300: #c3cac7;
  --st-ink-200: #e2e7e5;
  --st-ink-100: #f1f4f3;
  --st-ink-050: #f7faf9;
  --st-white:   #ffffff;

  /* Accent — CTA / 강조 포인트 */
  --st-accent:      #1573ff;
  --st-accent-dark: #0b56c9;

  /* Surface */
  --st-surface:      var(--st-white);
  --st-surface-soft: var(--st-ink-050);
  --st-surface-dark: #0d201b;
  --st-border:       rgba(13, 82, 57, .10);
  --st-border-soft:  rgba(13, 82, 57, .06);

  /* Radius */
  --st-r-sm: 8px;
  --st-r-md: 14px;
  --st-r-lg: 20px;
  --st-r-xl: 28px;
  --st-r-pill: 999px;

  /* Elevation — 컬러 그림자로 붕 뜨는 느낌 제거 */
  --st-shadow-xs: 0 1px 2px rgba(11, 67, 48, .06);
  --st-shadow-sm: 0 2px 8px rgba(11, 67, 48, .06), 0 1px 2px rgba(11, 67, 48, .04);
  --st-shadow-md: 0 8px 24px rgba(11, 67, 48, .08), 0 2px 6px rgba(11, 67, 48, .04);
  --st-shadow-lg: 0 20px 48px rgba(11, 67, 48, .12), 0 4px 12px rgba(11, 67, 48, .06);
  --st-shadow-xl: 0 32px 72px rgba(11, 67, 48, .16);

  /* Typography — 원본 템플릿 폰트를 그대로 사용합니다.
     global.css 의 --font-family-Noto 가 있으면 그 값을, 없으면 Noto Sans KR 로 폴백. */
  --st-font: var(--font-family-Noto, "Noto Sans KR"), sans-serif;

  /* Rhythm — 섹션 상하 여백 단일 스케일 (컴팩트) */
  --st-section-y: clamp(40px, 4.2vw, 66px);
  --st-gap: clamp(14px, 1.4vw, 20px);

  /* Motion */
  --st-ease: cubic-bezier(.22, .61, .36, 1);
  --st-dur: .28s;
}

/* ==========================================================================
   2. 베이스 / 타이포그래피
   ========================================================================== */
body,
.page-wrapper {
  /* font-family 는 지정하지 않습니다 — 템플릿(global.css)의 본문 폰트를 그대로 씁니다 */
  color: var(--st-ink-700);
  background: var(--st-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}

.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4,
.page-wrapper h5,
.page-wrapper h6 {
  /* font-family 미지정 — 슬라이더 Hahmlet, 섹션 NanumSquare 등 원본 폰트 유지 */
  /* color 도 지정하지 않습니다 — 어두운 배경 위 흰색 제목(video-two_heading 등)을
     덮어써 글자가 보이지 않는 문제가 있었습니다. 색은 개별 클래스에서만 지정합니다. */
  letter-spacing: -0.018em;
  line-height: 1.32;
  font-weight: 700;
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

.page-wrapper p,
.page-wrapper li {
  line-height: 1.62;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 한글 본문에서 양쪽정렬은 어절 간격이 벌어져 가독성을 해칩니다 */
.page-wrapper .justify,
.page-wrapper .text-justify {
  text-align: left !important;
}

.page-wrapper a {
  transition: color var(--st-dur) var(--st-ease),
              opacity var(--st-dur) var(--st-ease);
}

/* 카드 전체가 클릭 영역인 곳은 밑줄 제거 (본문 인라인 링크는 유지) */
.news-block-four a,
.testimonial-block_three a,
.agency-block_one a,
.feature-five a {
  text-decoration: none !important;
}

.page-wrapper img {
  max-width: 100%;
  height: auto;
}

/* 스크린리더 전용 텍스트 (표 caption 등) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 포커스 링 — 키보드 접근성 */
.page-wrapper a:focus-visible,
.page-wrapper button:focus-visible {
  outline: 2px solid var(--st-brand-500);
  outline-offset: 3px;
  border-radius: var(--st-r-sm);
}

/* 컨테이너 폭 정돈 */
.auto-container {
  max-width: 1240px;
  padding-left: 24px;
  padding-right: 24px;
}

/* 섹션 리듬 통일 — mt-140 / mb-150 / pb-100 같은 유틸의 들쭉날쭉함 제거 */
.page-wrapper > section {
  position: relative;
}

.counter-two,
.services-four,
.agency-one,
.finance-three,
.business-three {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   3. 섹션 타이틀 공통
   ========================================================================== */
.sec-title_title,
.sec-title-two_title,
.sec-title-five .sec-title_title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 10px !important;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  color: var(--st-brand-600) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  border: 1px solid var(--st-brand-100);
}

.sec-title_title::before,
.sec-title-two_title::before,
.sec-title-five .sec-title_title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-brand-500);
  flex: none;
}

.sec-title_heading,
.sec-title_heading.heading2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.28;
  color: var(--st-ink-900) !important;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.sec-title-three_text,
.sec-title-five_text {
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.62;
  color: var(--st-ink-600) !important;
  max-width: 66ch;
  margin-bottom: 0;
}

/* 타이틀 블록과 카드 그리드 사이 간격 */
.sec-title,
.sec-title-two,
.sec-title-five {
  margin-bottom: 0;
}

.sec-title-two.centered > .row,
.sec-title.centered + .row,
.agency-one .row.agency-pl,
.business-three > .auto-container > .row {
  margin-top: 26px;
}

.centered .sec-title-three_text,
.sec-title-two.centered .sec-title-three_text {
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}

/* 어두운 배경 위 타이틀 */
.business-three .sec-title_heading,
.business-three .sec-title_heading.dark-green {
  color: var(--st-white) !important;
}

.business-three .sec-title-three_text {
  color: rgba(255, 255, 255, .72) !important;
}

.business-three .sec-title_title,
.business-three .sec-title_title.light-green,
.business-three .sec-title_title.text-main {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18);
  color: var(--st-brand-200) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.business-three .sec-title_title::before {
  background: var(--st-brand-300);
}

/* ==========================================================================
   4. 히어로 슬라이더
   ========================================================================== */
.slider-four {
  position: relative;
  background: var(--st-surface-dark);
  overflow: hidden;              /* 켄번 확대 시 가로 스크롤 방지 */
}

.slider-four .slide {
  position: relative;
  min-height: clamp(400px, 56vh, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.slider-four_image-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 7s var(--st-ease);
}

.slider-four .active .slider-four_image-layer,
.slider-four .owl-item.active .slider-four_image-layer {
  transform: scale(1);          /* 느린 켄번 효과 */
}

/* 텍스트 대비 확보용 그라데이션 — 이미지 위 흰 글씨 가독성 */
.slider-four_image-layer.back-layer {
  transform: none;
  background: linear-gradient(
    100deg,
    rgba(8, 26, 21, .88) 0%,
    rgba(8, 26, 21, .70) 38%,
    rgba(8, 26, 21, .30) 68%,
    rgba(8, 26, 21, .12) 100%
  );
}

.slider-four .main-slide,
.slider-four .slider-four-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.slider-four_inner {
  max-width: 720px;
  padding: 24px 0;
}

/* 상단 이벤트/에이브라우 배지 */
.slider-four_title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 16px;
  border-radius: var(--st-r-pill);
  background: rgba(26, 160, 106, .18);
  border: 1px solid rgba(116, 215, 168, .38);
  color: var(--st-brand-200) !important;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.slider-four_title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--st-brand-300);
  box-shadow: 0 0 0 0 rgba(116, 215, 168, .7);
  animation: st-pulse 2.4s infinite;
  flex: none;
}

@keyframes st-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(116, 215, 168, .6); }
  70%  { box-shadow: 0 0 0 10px rgba(116, 215, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(116, 215, 168, 0); }
}

.slider-four_heading {
  font-size: clamp(30px, 4.4vw, 54px) !important;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--st-white) !important;
  margin-bottom: 14px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

.slider-four_text {
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .80) !important;
  max-width: 56ch;
  margin-bottom: 22px;
}

/* 히어로 하단 CTA (마크업 추가 시 자동 적용) */
.slider-four_inner .st-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   5. 버튼
   ========================================================================== */
.st-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--st-r-pill);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
  text-decoration: none;
}

.st-btn--primary {
  background: var(--st-brand-500);
  color: var(--st-white) !important;
  box-shadow: 0 6px 18px rgba(26, 160, 106, .28);
}

.st-btn--primary:hover {
  background: var(--st-brand-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26, 160, 106, .34);
}

.st-btn--ghost {
  background: rgba(255, 255, 255, .08);
  color: var(--st-white) !important;
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.st-btn--ghost:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}

.st-btn--outline {
  background: transparent;
  color: var(--st-brand-600) !important;
  border-color: var(--st-brand-200);
}

.st-btn--outline:hover {
  background: var(--st-brand-50);
  border-color: var(--st-brand-300);
}

/* ==========================================================================
   6. 카드 공통 (응대형/접속대기형 · 다운로드)
   ========================================================================== */
.news-block-four {
  margin-bottom: var(--st-gap);
}

.news-block-four .inner-box {
  height: 100%;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  overflow: hidden;
  box-shadow: var(--st-shadow-sm);
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
  display: flex;
  flex-direction: column;
}

.news-block-four .inner-box:hover {
  transform: translateY(-6px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-lg);
}

.news-block-four .inner-box .image {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--st-brand-50);
}

/* 기존 green-back / darkblue-back 배경을 부드러운 톤으로 교체 */
.news-block-four .inner-box .image.green-back {
  background: linear-gradient(160deg, var(--st-brand-50) 0%, var(--st-brand-100) 100%) !important;
}

.news-block-four .inner-box .image.darkblue-back {
  background: linear-gradient(160deg, #eef4ff 0%, #dfe9ff 100%) !important;
}

.news-block-four .inner-box .image img {
  width: 100%;
  display: block;
  transition: transform .5s var(--st-ease);
}

.news-block-four .inner-box:hover .image img {
  transform: scale(1.04);
}

.news-block-four .lower-content {
  padding: 16px 18px 18px;
  background: var(--st-surface);
  flex: 1;
}

.news-block-four .post-date {
  display: inline-block;
  font-size: 17px !important;
  font-weight: 700;
  color: var(--st-ink-900) !important;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.news-block-four .lower-content h5 {
  font-size: 14.5px;
  font-weight: 500 !important;
  line-height: 1.55;
  color: var(--st-ink-600) !important;
  margin: 0;
}

/* 다운로드 카드 — 어두운 섹션 내부 */
.business-three.down {
  background: var(--st-ink-900);
}

.business-three.down .sec-title_heading,
.business-three.down .sec-title_heading.dark-green {
  color: var(--st-white) !important;
}

.business-three.down .news-block-four .inner-box {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: none;
}

.business-three.down .news-block-four .inner-box:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(116, 215, 168, .38);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}

.business-three.down .news-block-four .lower-content {
  background: transparent;
  padding: 16px 16px 18px;
}

.business-three.down .news-block-four .lower-content h5 a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--st-white) !important;
}

.business-three.down .news-block-four .lower-content h5 a::after {
  content: "↓";
  font-size: 13px;
  opacity: .6;
  transition: transform var(--st-dur) var(--st-ease), opacity var(--st-dur) var(--st-ease);
}

.business-three.down .news-block-four .inner-box:hover h5 a::after {
  transform: translateY(2px);
  opacity: 1;
}

/* ==========================================================================
   7. 성능 지표 (스킬 바)
   ========================================================================== */
.default-skills.style-four {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

.default-skill-item {
  margin: 0;
}

.default-skill-title.skil-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.default-skill-title.skil-line span:first-child {
  font-size: 15px;
  font-weight: 600;
  color: var(--st-ink-700);
  letter-spacing: -0.015em;
}

.default-skill-title.skil-line span:last-child {
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 800;
  color: var(--st-brand-600);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.default-skill-bar,
.default-bar-inner {
  position: relative;
}

.default-skill-bar {
  height: 10px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-200);
  overflow: hidden;
}

.default-bar-inner {
  height: 100%;
}

.default-bar.progress-line {
  height: 100%;
  border-radius: var(--st-r-pill);
  background: linear-gradient(90deg, var(--st-brand-400) 0%, var(--st-brand-600) 100%);
  position: relative;
  overflow: hidden;
}

.default-bar.progress-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .38) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: st-shimmer 2.6s infinite;
}

@keyframes st-shimmer {
  100% { transform: translateX(100%); }
}

/* 성능 섹션 배경 */
.services-four {
  background: linear-gradient(180deg, var(--st-ink-050) 0%, var(--st-white) 100%) !important;
}

.services-four .finance-image_one img,
.services-four .finance-image_two img {
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-lg);
}

.services-four .finance-image_two {
  border-radius: var(--st-r-lg);
  overflow: hidden;
}

/* ==========================================================================
   8. 지원 OS 카드
   ========================================================================== */
.agency-one {
  background: var(--st-white);
}



.agency-block_one {
  margin-bottom: var(--st-gap);
}

.agency-block_one .wow {
  height: 100%;
}

.agency-block_one-content {
  /* 템플릿이 높이를 고정해 자식이 카드 밖으로 흘러넘치는 것을 방지 */
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* 카드 높이가 같아질 때 내용 세로 중앙 */
  gap: 12px;
  padding: 24px 18px 22px !important;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-xs);
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.agency-block_one-content:hover {
  transform: translateY(-6px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md);
}

/* 로고 영역 — 가로가 긴 이미지도 잘리지 않게 넉넉한 박스 + 원본 비율 유지 */
/* 이미지 로고 대신 Font Awesome 브랜드 아이콘 사용 */
.agency-block_one-image {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--st-ink-050);
  border: 1px solid var(--st-border);
  overflow: visible;
  margin: 0;
  padding: 0;
  transition: transform var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
}

.agency-block_one-image i,
.agency-block_one-image .fa-brands,
.agency-block_one-image .fab {
  font-size: 38px;
  line-height: 1;
  color: var(--st-ink-700);
  transition: transform var(--st-dur) var(--st-ease);
}

.agency-block_one-content:hover .agency-block_one-image {
  transform: translateY(-2px);
}

.agency-block_one-content:hover .agency-block_one-image i {
  transform: scale(1.08);
}

/* OS별 브랜드 컬러 */
.agency-block_one--win  .agency-block_one-image { background: #eaf4fd; border-color: #cfe6fa; }
.agency-block_one--win  .agency-block_one-image i { color: #0078d4; }

.agency-block_one--and  .agency-block_one-image { background: #ecfaf1; border-color: #cdf0dc; }
.agency-block_one--and  .agency-block_one-image i { color: #14a05f; }

.agency-block_one--mac  .agency-block_one-image { background: #f2f3f5; border-color: #e0e2e6; }
.agency-block_one--mac  .agency-block_one-image i { color: #2b2b2e; }

.agency-block_one--lin  .agency-block_one-image { background: #fdf4e6; border-color: #f7e3c2; }
.agency-block_one--lin  .agency-block_one-image i { color: #d68910; }

/* 지원 예정 카드 */
.agency-block_one--soon .agency-block_one-content {
  border-style: dashed;
  background: var(--st-ink-050);
}

.agency-block_one--soon .agency-block_one-image {
  opacity: .6;
}

.st-soon-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-200);
  color: var(--st-ink-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   기존 템플릿이 .agency-block_one-icon 에 그리는 커다란 초록 원을 제거합니다.
   (원 안에 텍스트가 들어가 대비가 나쁘고 카드가 불필요하게 길어집니다)
   -------------------------------------------------------------------------- */
.agency-block_one-lower_content,
.agency-block_one-icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: normal !important;
  text-align: center;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  transform: none !important;
  flex: none !important;
  overflow: visible !important;
}

.agency-block_one-lower_content::before,
.agency-block_one-lower_content::after,
.agency-block_one-icon::before,
.agency-block_one-icon::after {
  display: none !important;
  content: none !important;
}

.agency-block_one-content .agency-block_one-text,
.agency-block_one-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--st-ink-900) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.015em;
  text-align: center;
  white-space: nowrap;          /* 공간이 있으면 한 줄로 */
  word-break: keep-all;
}

/* 좁은 화면에서는 줄바꿈 대신 글자 크기를 줄여 한 줄 유지 */
@media (max-width: 767px) {
  .agency-block_one-text { font-size: 13.5px !important; }
}

@media (max-width: 400px) {
  .agency-block_one-text { font-size: 12.5px !important; }
}

/* 그래도 안 들어가는 아주 좁은 화면에서만 줄바꿈 허용 */
@media (max-width: 340px) {
  .agency-block_one-text { white-space: normal; }
}

/* ==========================================================================
   8-1. OS 카드 — 최우선 방어 규칙
   템플릿 CSS가 어떤 선택자를 쓰든 이기도록 특이도를 최대로 올립니다.
   (라벨이 카드 밖으로 나가거나 하단에 붙는 문제 방지)
   ========================================================================== */
.page-wrapper .agency-one .row .agency-block_one .agency-block_one-content {
  position: relative !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 28px 18px 26px !important;
  box-sizing: border-box !important;
}

.page-wrapper .agency-one .row .agency-block_one .agency-block_one-image {
  position: static !important;
  margin: 0 !important;
  flex: none !important;
}

.page-wrapper .agency-one .row .agency-block_one .agency-block_one-lower_content,
.page-wrapper .agency-one .row .agency-block_one .agency-block_one-icon {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  flex: none !important;
}

/* style.css 의 `.agency-block_one-text { top: 40px }` 무력화.
   global.css 가 p 에 position:relative 를 걸어두어 글자가 40px 아래로
   밀려나 카드 밖으로 나가는 원인이었습니다. 반응형(991/576/479px)에도
   각각 top: 25px / 30px / 5px 이 걸려 있어 함께 해제합니다. */
.page-wrapper .agency-one .row .agency-block_one .agency-block_one-text,
.page-wrapper .agency-one .row .agency-block_one .agency-block_one-text * {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

.page-wrapper .agency-one .row .agency-block_one .agency-block_one-text {
  font-weight: 700 !important;
  color: var(--st-ink-900) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;   /* style.css 의 line-height:25px 덮기 */
}

/* 배지는 다시 블록으로 (위 * 규칙이 static 으로 되돌린 뒤 재지정) */
.page-wrapper .agency-one .row .agency-block_one .st-soon-badge {
  display: inline-block !important;
  margin-top: 6px !important;
}

/* style.css 가 카드 위로 90px 끌어올리는 hover 효과 제거 */
.page-wrapper .agency-one .agency-block_one-inner:hover .agency-block_one-content,
.page-wrapper .agency-one .wow:hover .agency-block_one-content {
  transform: none !important;
}

/* 지원 예정 배지는 항상 아래 줄에 */
.agency-block_one-text .st-soon-badge {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   섹션 배지 옆으로 삐져나오는 템플릿 장식선(::after 등) 제거
   -------------------------------------------------------------------------- */
.sec-title_title::after,
.sec-title-two_title::after,
.sec-title-five .sec-title_title::after {
  display: none !important;
  content: none !important;
}

/* 템플릿이 배지에 넣은 좌우 여백/배경 장식을 무력화 */
.sec-title .sec-title_title,
.sec-title-two .sec-title-two_title,
.sec-title-five .sec-title_title,
.sec-title_title,
.sec-title-two_title {
  padding: 6px 14px !important;
  text-indent: 0 !important;
  background-image: none !important;
  min-width: 0 !important;
  width: auto !important;
}

.sec-title_title > span,
.sec-title-two_title > span,
.sec-title_title > i,
.sec-title-two_title > i {
  display: none !important;
}

/* ==========================================================================
   9. 기능 소개 + 영상
   ========================================================================== */
.finance-three {
  background: linear-gradient(180deg, var(--st-white) 0%, var(--st-ink-050) 100%) !important;
}

.finance-three_image {
  border-radius: var(--st-r-xl);
  overflow: hidden;
  box-shadow: var(--st-shadow-lg);
}

.finance-three_image img {
  display: block;
  width: 100%;
}

.finance-three .sec-title-five {
  margin-bottom: 20px;
}

.feature-five {
  margin-bottom: var(--st-gap);
}

.feature-five_inner {
  height: 100%;
  padding: 18px 16px 16px;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-xs);
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.feature-five_inner:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md);
}

.feature-five_icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 40px;
}

.feature-five_icon > img {
  width: 44px !important;
  height: 44px !important;
  padding: 10px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  box-sizing: border-box;
}

/* 재생 버튼 */
.feature-five_icon .video-box,
.feature-five_icon .video-image {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.feature-five_icon .video-two_play {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 0;                 /* FA 글리프 대신 CSS 삼각형 사용 */
  line-height: 0;
  box-shadow: 0 4px 14px rgba(26, 160, 106, .32);
  transition: transform var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
}

/* Font Awesome 로드 실패/버전 차이와 무관하게 항상 보이는 ▶ 아이콘 */
.feature-five_icon .video-two_play > span,
.feature-five_icon .video-two_play > i {
  display: none !important;
}

.feature-five_icon .video-two_play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;             /* 삼각형 시각 중심 보정 */
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--st-white);
}

.feature-five_icon a:hover .video-two_play {
  background: var(--st-brand-600);
  transform: scale(1.08);
}

.feature-five_heading {
  font-size: 16px !important;
  font-weight: 700;
  color: var(--st-ink-900) !important;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.feature-five_text,
.feature-five_text.mt40 {
  margin-top: 0 !important;
  font-size: 14px;
  line-height: 1.58;
  color: var(--st-ink-600) !important;
}

/* ==========================================================================
   10. 고객 후기
   ========================================================================== */
.business-three {
  position: relative;
  background-color: var(--st-ink-900);
  background-size: cover !important;
  background-position: center !important;
}

.business-three::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 26, 21, .90) 0%,
    rgba(9, 26, 21, .82) 50%,
    rgba(9, 26, 21, .92) 100%
  );
  pointer-events: none;
}

.business-three > .auto-container {
  position: relative;
  z-index: 2;
}

.business-three_pattern-layer {
  opacity: .28;
}

.testimonial-three_video-inner .video-image {
  border-radius: var(--st-r-xl);
  overflow: hidden;
}

.testimonial-block_three {
  margin-bottom: 14px;
}

.testimonial-block_three-inner {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: var(--st-r-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              transform var(--st-dur) var(--st-ease);
}

.testimonial-block_three-inner:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(116, 215, 168, .38);
  transform: translateY(-3px);
}

.testimonial-block_three-inner .quote-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 26px;
  color: rgba(116, 215, 168, .28) !important;
}

.testimonial-block_three-inner h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45;
  margin-bottom: 8px;
  padding-right: 40px;
}

/* 어두운 배경 위 링크 대비 확보 — 기존 text-blue 는 판독이 어려움 */
.testimonial-block_three-inner h4 a,
.testimonial-block_three-inner h4 a.text-blue {
  color: var(--st-white) !important;
  text-decoration: none;
}

.testimonial-block_three-inner h4 a:hover {
  color: var(--st-brand-200) !important;
}

.testimonial-block_three-text {
  font-size: 14px;
  line-height: 1.6;
}

.testimonial-block_three-text a,
.testimonial-block_three-text a.white {
  color: rgba(255, 255, 255, .70) !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* 후기 길이 편차 정리 */
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-block_three-inner:hover .testimonial-block_three-text a {
  color: rgba(255, 255, 255, .84) !important;
}

.testimonial-three_author-box.style-two {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.testimonial-three_author-box.style-two i {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--st-brand-200);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   11. Owl Carousel 컨트롤
   ========================================================================== */
.page-wrapper .owl-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.page-wrapper .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-300) !important;
  border: 0 !important;
  transition: width var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
}

.page-wrapper .owl-dots .owl-dot.active {
  width: 26px;
  background: var(--st-brand-500) !important;
}

.slider-four .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 5;
}

.slider-four .owl-dots .owl-dot {
  background: rgba(255, 255, 255, .35) !important;
}

.slider-four .owl-dots .owl-dot.active {
  background: var(--st-white) !important;
}

.business-three .owl-dots .owl-dot {
  background: rgba(255, 255, 255, .28) !important;
}

.business-three .owl-dots .owl-dot.active {
  background: var(--st-brand-300) !important;
}

.page-wrapper .owl-nav .owl-prev,
.page-wrapper .owl-nav .owl-next {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  color: var(--st-white) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--st-dur) var(--st-ease);
}

.page-wrapper .owl-nav .owl-prev:hover,
.page-wrapper .owl-nav .owl-next:hover {
  background: rgba(255, 255, 255, .24) !important;
}

/* ==========================================================================
   12. 헤더 / 푸터 (공통 include 대응)
   ========================================================================== */
.main-header .nav-outer .navigation > li > a,
.main-menu .navigation > li > a {
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--st-dur) var(--st-ease);
}

.main-header.fixed-header,
.main-header .sticky-header {
  box-shadow: 0 1px 0 var(--st-border), var(--st-shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.main-footer a {
  transition: color var(--st-dur) var(--st-ease), opacity var(--st-dur) var(--st-ease);
}

.main-footer a:hover {
  opacity: .8;
}

/* ---- 로그아웃 버튼 ----
   로그아웃은 상태를 바꾸는 요청이라 POST 로 보냅니다. 그래서 header.php 에서
   <a> 대신 <form><button> 을 씁니다. (GET 이면 외부 페이지의
   <img src=".../member/logout.php"> 한 줄로 강제 로그아웃이 가능했습니다)
   겉모습은 같은 드롭다운의 다른 링크와 똑같이 맞춥니다.
   기준: header.css 의 .main-header .language .dropdown-menu > li > a */
.main-header .language .dropdown-menu > li > form { margin: 0; padding: 0; }

.main-header .language .dropdown-menu > li > form > button {
  width: 100%;
  padding: 14px 20px;
  display: block;
  text-align: left;
  color: var(--black-color);
  font-size: var(--font-14);
  font-family: inherit;
  line-height: inherit;
  background-color: var(--white-color);
  border: 0;
  border-bottom: 1px solid var(--color-fiftyeight);
  cursor: pointer;
  transition: all 300ms ease;
}

.main-header .language .dropdown-menu > li:last-child > form > button {
  border-bottom: 0;
}

.main-header .language .dropdown-menu > li > form > button:hover {
  color: var(--white-color);
  background-color: var(--color-fourtyseven);
}

/* ==========================================================================
   15. 리뉴얼 푸터 (Scoped: .ft-redesign)
   --------------------------------------------------------------------------
   common/footer.php 의 .ft-redesign 전용 스타일입니다.
   기존 .main-footer 클래스를 쓰지 않으므로 템플릿 footer.css 와 충돌하지 않습니다.
   ========================================================================== */
.ft-redesign {
  --ft-bg:           #0b1a17;
  --ft-bg-soft:      rgba(255, 255, 255, .04);
  --ft-border:       rgba(255, 255, 255, .10);
  --ft-border-hover: rgba(116, 215, 168, .40);
  --ft-text:         rgba(255, 255, 255, .68);
  --ft-text-strong:  rgba(255, 255, 255, .92);
  --ft-muted:        rgba(255, 255, 255, .42);
  --ft-primary:      #1aa06a;
  --ft-primary-light:#74d7a8;

  position: relative;
  background: var(--ft-bg);
  color: var(--ft-text);
  font-family: var(--st-font);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  padding-top: clamp(44px, 5vw, 72px);
}

.ft-redesign a {
  color: inherit;
  text-decoration: none;
  transition: color var(--st-dur) var(--st-ease);
}

.ft-redesign a:hover {
  color: var(--ft-primary-light);
}

.ft-redesign ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ft-redesign p {
  margin: 0;
}

.ft-redesign :focus-visible {
  outline: 2px solid var(--ft-primary-light);
  outline-offset: 3px;
  border-radius: var(--st-r-sm);
}

/* ---- 그리드 ---- */
.ft-redesign .ft-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1.05fr;   /* 1열 사업자정보가 길어 폭을 조금 더 */
  gap: clamp(20px, 2.4vw, 34px);
  padding-bottom: clamp(26px, 3vw, 42px);
}

.ft-redesign .ft-col {
  min-width: 0;
}

/* ---- 로고 / 사업자 정보 ---- */
.ft-redesign .ft-logo {
  display: inline-block;
  margin-bottom: 18px;
}

.ft-redesign .ft-logo img {
  display: block;
  width: auto;
  height: 38px;
  max-width: 100%;
}

.ft-redesign .ft-info-list li {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ft-text);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 등록번호처럼 하이픈이 들어간 값이 중간에서 끊기지 않도록 */
.ft-redesign .ft-info-list li strong + * ,
.ft-redesign .ft-info-list .ft-nowrap {
  white-space: nowrap;
}

.ft-redesign .ft-info-list strong {
  font-weight: 600;
  color: var(--ft-muted);
  margin-right: 4px;
}

/* ---- 위젯 타이틀 ---- */
.ft-redesign .ft-widget-title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ft-text-strong);
}

.ft-redesign .ft-widget-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--ft-primary);
}

.ft-redesign .ft-mt-8  { margin-top: 8px; }
.ft-redesign .ft-mt-20 { margin-top: 26px; }

/* ---- 링크 목록 ---- */
.ft-redesign .ft-links li {
  font-size: 14px;
  line-height: 1.7;
}

.ft-redesign .ft-links > li > a {
  display: inline-block;
  color: var(--ft-text-strong);
  font-weight: 500;
}

.ft-redesign .ft-links .name-text {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ft-muted);
}

.ft-redesign .ft-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--st-r-pill);
  background: rgba(26, 160, 106, .18);
  border: 1px solid rgba(116, 215, 168, .32);
  color: var(--ft-primary-light);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 2px;
}

/* ---- CS 센터 ---- */
.ft-redesign .ft-cs-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
  font-size: 14px;
  line-height: 1.7;
}

.ft-redesign .ft-cs-list li:last-child {
  margin-bottom: 0;
}

.ft-redesign .ft-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: var(--st-r-sm);
  background: var(--ft-bg-soft);
  border: 1px solid var(--ft-border);
  color: var(--ft-primary-light);
  font-size: 12px;
}

.ft-redesign .ft-cs-phone a {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ft-text-strong);
  font-variant-numeric: tabular-nums;
}

.ft-redesign .ft-cs-list address {
  margin: 0;
  font-style: normal;
  line-height: 1.7;
  word-break: keep-all;
}

/* ---- 공정위 카드 ---- */
.ft-redesign .ft-ftc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: var(--st-r-md);
  background: var(--ft-bg-soft);
  border: 1px solid var(--ft-border);
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              transform var(--st-dur) var(--st-ease);
}

.ft-redesign .ft-ftc-card:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--ft-border-hover);
  transform: translateY(-2px);
  color: inherit;
}

.ft-redesign .ft-ftc-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ft-redesign .ft-ftc-img {
  flex: none;
  width: auto;
  height: 30px;
  border-radius: 4px;
  background: #fff;
  padding: 3px;
  box-sizing: content-box;
}

.ft-redesign .ft-ftc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ft-redesign .ft-ftc-info span {
  font-size: 11.5px;
  color: var(--ft-muted);
  line-height: 1.4;
}

.ft-redesign .ft-ftc-info strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ft-text-strong);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.ft-redesign .ft-ftc-arrow {
  flex: none;
  font-size: 11px;
  color: var(--ft-muted);
  transition: transform var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}

.ft-redesign .ft-ftc-card:hover .ft-ftc-arrow {
  color: var(--ft-primary-light);
  transform: translate(2px, -2px);
}

/* ---- 입금계좌 ---- */
.ft-redesign .ft-bank-card {
  padding: 14px 16px;
  border-radius: var(--st-r-md);
  background: var(--ft-bg-soft);
  border: 1px solid var(--ft-border);
}

.ft-redesign .ft-bank-card strong {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ft-text-strong);
  letter-spacing: -0.02em;
}

.ft-redesign .ft-bank-icon {
  margin-right: 6px;
  color: var(--ft-primary-light);
}

.ft-redesign .ft-bank-card p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ft-text);
  font-variant-numeric: tabular-nums;
}

/* ---- 하단 저작권 ---- */
.ft-redesign .ft-bottom {
  border-top: 1px solid var(--ft-border);
  padding: 16px 0;
}

.ft-redesign .ft-copyright {
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ft-muted);
}

.ft-redesign .ft-copyright a {
  color: var(--ft-text);
  font-weight: 600;
}

.ft-redesign .ft-copyright a:hover {
  color: var(--ft-primary-light);
}

/* ---- 반응형 ---- */
@media (max-width: 1199px) {
  .ft-redesign .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .ft-redesign { padding-top: 36px; }
  .ft-redesign .ft-grid { grid-template-columns: 1fr; gap: 28px; }
  .ft-redesign .ft-widget-title { margin-bottom: 13px; }
  .ft-redesign .ft-cs-phone a { font-size: 17px; }
}

/* ==========================================================================
   16. whyseetrol.php 전용 (Scoped: .page-why)
   --------------------------------------------------------------------------
   feature-block_two / service-block_two 등은 다른 페이지에서도 쓰이므로
   반드시 .page-why 스코프 안에서만 손댑니다.
   ========================================================================== */

/* ---- 섹션 리듬 통일 (index.php 와 동일 스케일) ---- */
.page-why .feature-two,
.page-why .success-one,
.page-why .business-two,
.page-why .finance-two,
.page-why .consult-one,
.page-why .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-why .services-two,
.page-why .finance-two {
  background: linear-gradient(180deg, var(--st-ink-050) 0%, var(--st-white) 100%) !important;
}

/* ---- 섹션 타이틀 — index 와 동일한 배지 + 헤딩 ---- */
.page-why .sec-title-five_title,
.page-why .sec-title-three_title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 12px !important;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-600) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.page-why .sec-title-five_title::before,
.page-why .sec-title-three_title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-brand-500);
  flex: none;
}

.page-why .sec-title-five_heading,
.page-why .sec-title-three_heading {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.28;
  color: var(--st-ink-900) !important;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.page-why .sec-title-three.centered .sec-title-three_text,
.page-why .sec-title.centered .sec-title-three_text {
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}

.page-why .sec-title,
.page-why .sec-title-two,
.page-why .sec-title-three,
.page-why .sec-title-five {
  margin-bottom: 0;
}

.page-why .sec-title-three.centered,
.page-why .sec-title.centered {
  margin-bottom: 32px;
  text-align: center;          /* 배지·제목까지 확실히 가운데 정렬 */
}

.page-why .sec-title-three.centered .sec-title-three_heading,
.page-why .sec-title.centered .sec-title_heading {
  text-align: center;
}

/* ---- 강점 4카드 ---- */
.page-why .feature-two_blocks-inner .row {
  align-items: stretch;
}

/* 템플릿의 지그재그 배치(짝수 카드 40px 내리기) 해제 */
.page-why .feature-two .feature-block_two:nth-child(2n + 0) {
  transform: none !important;
}

.page-why .feature-block_two {
  margin-bottom: var(--st-gap) !important;
  display: flex;
}

.page-why .feature-block_two-inner {
  width: 100%;
  padding: 20px 20px !important;
  border-radius: var(--st-r-lg) !important;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-xs) !important;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-why .feature-block_two-inner:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md) !important;
}

.page-why .feature-block_two-icon {
  width: 52px !important;
  height: 52px !important;
  display: grid;
  place-items: center;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  margin-bottom: 14px;
}

/* 인라인 height/width 가 제각각(50/60px)이라 통일 */
.page-why .feature-block_two-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block;
}

.page-why .feature-block_two-heading {
  font-size: 16px !important;
  font-weight: 700;
  color: var(--st-ink-900) !important;
  margin-top: 0 !important;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.page-why .feature-block_two-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--st-ink-600) !important;
  margin-top: 0 !important;
  text-align: left !important;
}

.page-why .feature-block_two-arrow {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto !important;
  height: auto !important;
  margin-top: 10px;
  opacity: 1 !important;
  border-radius: var(--st-r-pill);
  background: none !important;
  color: var(--st-brand-600) !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.4 !important;
}

.page-why .feature-block_two-arrow::after {
  content: "→";
  transition: transform var(--st-dur) var(--st-ease);
}

.page-why .feature-block_two-arrow:hover::after {
  transform: translateX(3px);
}

/* ---- 섹션 안 CTA 버튼 간격 ----
   .st-cta-row 는 여러 페이지가 함께 쓰는 클래스라, whyseetrol 안에서만
   위쪽 여백을 줍니다. (설명 문단에 버튼이 붙어 보이던 문제) */
.page-why .success-one .st-cta-row,
.page-why .consult-one .st-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 767px) {
  .page-why .success-one .st-cta-row,
  .page-why .consult-one .st-cta-row {
    margin-top: 22px;
  }
}

/* ---- 이미지 카드 공통 ---- */
.page-why .feature-two_skill-inner img,
.page-why .success-one_image img,
.page-why .video-box img,
.page-why .finance-two_image img {
  border-radius: var(--st-r-lg);
  max-width: 100%;
  height: auto;
}

.page-why .video-box .video-image,
.page-why .video-box {
  box-shadow: none;
}

/* ---- 사용 패턴 카운터 ---- */
.page-why .business-two_counter {
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 800;
  color: var(--st-brand-600) !important;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.page-why .business-two-branches {
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--st-ink-600) !important;
  margin-top: 4px !important;
}

.page-why .business-two_counter-column {
  margin-bottom: 20px !important;
}

.page-why .business-two_lower-text {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: var(--st-ink-600) !important;
  text-align: left !important;
  padding: 18px 20px !important;
  margin-top: 8px;
  border-top: 0 !important;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
}

/* ---- 가격 비교 ---- */
.page-why .dash {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--st-ink-400) !important;
  font-weight: 600;
  margin-right: 4px;
}

.page-why .counter-boxed .sub-title {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--st-ink-700) !important;
  line-height: 1.5;
}

.page-why .finance-two_since-box.small {
  border-radius: var(--st-r-lg) !important;
  border-width: 6px !important;
  box-shadow: var(--st-shadow-lg) !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  display: grid;
  place-content: center;
  text-align: center;
}

.page-why .finance-two_since-box.small span {
  font-size: 22px !important;
  font-weight: 800;
  margin-top: 4px;
}

/* ---- 주요 기능 25종 ---- */
.page-why .services-two .row {
  align-items: stretch;
}

.page-why .service-block_two {
  margin-bottom: var(--st-gap) !important;
  display: flex;
}

.page-why .service-block_two-inner {
  width: 100%;
  padding: 20px 20px !important;
  border-radius: var(--st-r-lg) !important;
  background: var(--st-surface) !important;
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-xs);
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-why .service-block_two-inner:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md);
}

.page-why .service-block_two-color {
  display: none !important;
}

/* 아이콘을 절대위치 → 흐름 안의 타일로 */
.page-why .service-block_two-upper {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-height: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 10px;
}

.page-why .service-block_two-icon-box {
  position: static !important;
  flex: none;
}

.page-why .service-block_two-icon-box::before {
  display: none !important;
}

.page-why .service-block_two-icon {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  border: 0 !important;
  border-radius: var(--st-r-md) !important;
  background: var(--st-brand-50) !important;
  color: var(--st-brand-600) !important;
  font-size: 24px !important;
  text-align: center;
  display: inline-block;
}

.page-why .service-block_two-heading {
  top: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--st-ink-900) !important;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.page-why .service-block_two-heading::before {
  display: none !important;
}

.page-why .service-block_two-text {
  margin-top: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--st-ink-600) !important;
  text-align: left !important;
}

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .page-why .feature-two_skill-column,
  .page-why .success-one_image-column,
  .page-why .finance-two_image-column { margin-bottom: 28px; }

  .page-why .success-one_content-inner { padding-top: 0 !important; }
}

@media (max-width: 767px) {
  .page-why .service-block_two-upper { gap: 12px; }
  .page-why .service-block_two-icon { width: 44px !important; height: 44px !important;
    line-height: 44px !important; font-size: 21px !important; }
  .page-why .service-block_two-inner,
  .page-why .feature-block_two-inner { padding: 20px 18px !important; }
}

/* ==========================================================================
   17. wepledge.php 고객리뷰 전용 (Scoped: .page-reviews)
   --------------------------------------------------------------------------
   후기 카드는 JS 없이 체크박스 토글로 접기/펼치기가 동작합니다.
   ========================================================================== */
.page-reviews .finance-three {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
}

.page-reviews .sec-title.centered {
  text-align: center;
  margin-bottom: 34px;
}

.page-reviews .rv-notice {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  color: var(--st-ink-500);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---- 리스트 폭: 본문 가독폭으로 제한 ---- */
.page-reviews .rv-list {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 후기 카드 ---- */
.page-reviews .rv-card {
  position: relative;
  margin-bottom: var(--st-gap);
  padding: 24px 26px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-xs);
  transition: border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}

.page-reviews .rv-card:hover {
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md);
}

.page-reviews .rv-quote {
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: var(--st-brand-100);
  pointer-events: none;
  user-select: none;
}

.page-reviews .rv-head {
  margin-bottom: 14px;
  padding-right: 56px;
}

.page-reviews .rv-title {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

.page-reviews .rv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--st-ink-500);
}

.page-reviews .rv-author {
  font-weight: 600;
  color: var(--st-brand-600);
}

.page-reviews .rv-meta .rv-date::before {
  content: "·";
  margin-right: 8px;
  color: var(--st-ink-300);
}

/* ---- 본문: 기본 접힘(8줄) + 하단 페이드 ---- */
.page-reviews .rv-body {
  position: relative;
  overflow: hidden;
  max-height: 13.6em;              /* line-height 1.7 × 8줄 */
  transition: max-height .45s var(--st-ease);
}

.page-reviews .rv-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
  word-break: keep-all;
  text-align: left;
}

.page-reviews .rv-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--st-surface) 88%);
  pointer-events: none;
  transition: opacity var(--st-dur) var(--st-ease);
}

.page-reviews .rv-toggle:checked ~ .rv-body {
  max-height: 400em;
}

.page-reviews .rv-toggle:checked ~ .rv-body .rv-fade {
  opacity: 0;
}

/* ---- 더 보기 토글 ---- */
.page-reviews .rv-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: var(--st-r-pill);
  border: 1px solid var(--st-brand-200);
  color: var(--st-brand-600);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-reviews .rv-more:hover {
  background: var(--st-brand-50);
  border-color: var(--st-brand-300);
}

.page-reviews .rv-more::after {
  content: "▾";
  font-size: 11px;
  transition: transform var(--st-dur) var(--st-ease);
}

.page-reviews .rv-more-close { display: none; }

.page-reviews .rv-toggle:checked ~ .rv-more .rv-more-open  { display: none; }
.page-reviews .rv-toggle:checked ~ .rv-more .rv-more-close { display: inline; }
.page-reviews .rv-toggle:checked ~ .rv-more::after { transform: rotate(180deg); }

/* ---- CTA ---- */
.page-reviews .rv-cta {
  text-align: center;
  margin-top: 40px;
}

/* ---- 반응형 ---- */
@media (max-width: 767px) {
  .page-reviews .rv-card { padding: 22px 20px 20px; }
  .page-reviews .rv-quote { font-size: 48px; right: 18px; top: 12px; }
  .page-reviews .rv-head { padding-right: 40px; }
  .page-reviews .rv-body { max-height: 15.3em; }   /* 모바일은 9줄 */
}

/* ==========================================================================
   18. howitworks.php 동작 원리 전용 (Scoped: .hiw-page)
   --------------------------------------------------------------------------
   기존에는 howitworks.php 안에 <style> 로 들어 있던 CSS 입니다.
   ① 페이지마다 CSS 가 흩어지지 않도록 main.css 로 통합
   ② 파란색(#0066ff) 계열 → 사이트 브랜드 그린으로 정렬
   ========================================================================== */
.hiw-page {
  /* 브랜드 토큰 재사용 — 색을 바꾸려면 :root 의 --st-brand-* 만 고치면 됩니다 */
  --hiw-primary:      var(--st-brand-500);
  --hiw-primary-dark: var(--st-brand-700);
  --hiw-primary-soft: var(--st-brand-50);
  --hiw-accent:       var(--st-accent);
  --hiw-warn:         #d9534f;
  --hiw-ink:          var(--st-ink-900);
  --hiw-body:         var(--st-ink-600);
  --hiw-muted:        var(--st-ink-500);
  --hiw-line:         var(--st-border);
  --hiw-radius:       var(--st-r-lg);
  --hiw-shadow:       var(--st-shadow-md);
  --hiw-shadow-sm:    var(--st-shadow-xs);
}

.hiw-page .hiw-section {
  position: relative;
  padding: var(--st-section-y) 0;
}

.hiw-page .hiw-section--tint {
  background: var(--st-ink-050);
}

/* ---- 섹션 헤더 ---- */
.hiw-page .hiw-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 32px;
}

.hiw-page .hiw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: var(--st-r-pill);
  background: var(--hiw-primary-soft);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-600);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}

.hiw-page .hiw-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hiw-primary);
  flex: none;
}

.hiw-page .hiw-head h2 {
  color: var(--hiw-ink);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  word-break: keep-all;
}

.hiw-page .hiw-head p {
  color: var(--hiw-body);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  word-break: keep-all;
}

/* 한글 본문에서 이탤릭은 가독성이 나빠 강조만 남깁니다 */
.hiw-page em {
  font-style: normal;
  font-weight: 700;
  color: var(--st-brand-700);
}

/* ---- 콜아웃 ---- */
.hiw-page .hiw-note {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--hiw-primary-soft);
  border: 1px solid var(--st-brand-100);
  border-left: 4px solid var(--hiw-primary);
  border-radius: var(--st-r-md);
  color: var(--hiw-body);
  font-size: 14.5px;
  line-height: 1.75;
  word-break: keep-all;
}

.hiw-page .hiw-note strong {
  color: var(--hiw-primary-dark);
}

/* ---- 2단 카드 ---- */
.hiw-page .hiw-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--st-gap);
}

.hiw-page .hiw-card {
  background: var(--st-surface);
  border: 1px solid var(--hiw-line);
  border-radius: var(--hiw-radius);
  box-shadow: var(--hiw-shadow-sm);
  overflow: hidden;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.hiw-page .hiw-card:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--hiw-shadow);
}

.hiw-page .hiw-card-head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hiw-line);
}

.hiw-page .hiw-card-head.is-warn {
  background: linear-gradient(135deg, #fdf3f2, var(--st-white));
}

.hiw-page .hiw-card-head.is-good {
  background: linear-gradient(135deg, var(--hiw-primary-soft), var(--st-white));
}

.hiw-page .hiw-card-head h3 {
  color: var(--hiw-ink);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.hiw-page .hiw-card-head span {
  color: var(--hiw-muted);
  font-size: 13px;
  font-weight: 600;
}

/* ---- 체크 리스트 ---- */
.hiw-page .hiw-list {
  list-style: none;
  margin: 0;
  padding: 20px 24px 24px;
}

.hiw-page .hiw-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--hiw-body);
  font-size: 14.5px;
  line-height: 1.7;
  text-align: left;          /* 한글 양쪽정렬 해제 */
  word-break: keep-all;
}

.hiw-page .hiw-list li:last-child {
  margin-bottom: 0;
}

/* FA5 Free 만 지정돼 있어 FA6 환경에서 깨질 수 있어 폴백을 넓혔습니다 */
.hiw-page .hiw-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--hiw-primary);
  font-size: 13px;
}

.hiw-page .hiw-list.is-warn li::before {
  content: "\f071";
  color: var(--hiw-warn);
}

.hiw-page .hiw-list li strong {
  color: var(--hiw-ink);
}

/* ---- 다이어그램 ---- */
.hiw-page .hiw-diagram {
  max-width: 980px;
  margin: 0 auto;
  background: var(--st-surface);
  border: 1px solid var(--hiw-line);
  border-radius: var(--hiw-radius);
  box-shadow: var(--hiw-shadow-sm);
  padding: 24px;
}

.hiw-page .hiw-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.hiw-page .hiw-diagram-cap {
  text-align: center;
  color: var(--hiw-muted);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.65;
  word-break: keep-all;
}

/* ---- 단계 카드 ---- */
.hiw-page .hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-gap);
}

.hiw-page .hiw-step {
  background: var(--st-surface);
  border: 1px solid var(--hiw-line);
  border-radius: var(--hiw-radius);
  box-shadow: var(--hiw-shadow-sm);
  padding: 22px 20px;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.hiw-page .hiw-step:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--hiw-shadow);
}

.hiw-page .hiw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--st-r-md);
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--st-brand-500), var(--st-brand-400));
  color: var(--st-white);
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 8px 18px rgba(26, 160, 106, .28);
}

.hiw-page .hiw-step h4 {
  color: var(--hiw-ink);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.hiw-page .hiw-step p {
  color: var(--hiw-body);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
  text-align: left;
  word-break: keep-all;
}

.hiw-page .hiw-step p:last-child {
  margin-bottom: 0;
}

.hiw-page .hiw-step strong {
  color: var(--hiw-ink);
}

.hiw-page .hiw-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: var(--st-r-pill);
  background: var(--hiw-primary-soft);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-600);
  font-size: 12px;
  font-weight: 700;
}

/* ---- 흐름 표 (모바일 가로 스크롤 래퍼 필요) ---- */
.hiw-page .hiw-table-wrap {
  max-width: 980px;
  margin: 28px auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--hiw-radius);
  border: 1px solid var(--hiw-line);
  box-shadow: var(--hiw-shadow-sm);
  background: var(--st-surface);
}

.hiw-page .hiw-flow {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--st-surface);
}

.hiw-page .hiw-flow th,
.hiw-page .hiw-flow td {
  border-bottom: 1px solid var(--hiw-line);
  padding: 14px 16px;
  vertical-align: top;
  text-align: left;
  line-height: 1.65;
  word-break: keep-all;
  color: var(--hiw-body);
}

.hiw-page .hiw-flow thead th {
  background: var(--st-ink-900);
  color: var(--st-white);
  font-weight: 700;
  white-space: nowrap;
}

.hiw-page .hiw-flow td:first-child {
  white-space: nowrap;
  font-weight: 700;
  color: var(--st-brand-600);
  width: 1%;
}

.hiw-page .hiw-flow tbody tr:nth-child(even) td {
  background: var(--st-ink-050);
}

.hiw-page .hiw-flow tr:last-child td {
  border-bottom: none;
}

/* ---- 장점 목록 ---- */
.hiw-page .hiw-adv {
  background: var(--st-surface);
  border: 1px solid var(--hiw-line);
  border-radius: var(--hiw-radius);
  box-shadow: var(--hiw-shadow-sm);
  padding: 26px 30px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.hiw-page .hiw-adv li {
  list-style: none;
  position: relative;
  padding-left: 28px;
  color: var(--hiw-body);
  font-size: 14.5px;
  line-height: 1.7;
  word-break: keep-all;
}

.hiw-page .hiw-adv li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--hiw-primary);
}

.hiw-page .hiw-adv li strong {
  color: var(--hiw-ink);
}

/* ---- 하단 CTA ---- */
.hiw-page .hiw-cta {
  margin-top: 40px;
  text-align: center;
}

.hiw-page .hiw-cta .st-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .hiw-page .hiw-grid2  { grid-template-columns: 1fr; }
  .hiw-page .hiw-steps  { grid-template-columns: 1fr; }
  .hiw-page .hiw-adv    { grid-template-columns: 1fr; padding: 24px; }
  .hiw-page .hiw-head   { margin-bottom: 30px; }
}

@media (max-width: 767px) {
  .hiw-page .hiw-note   { padding: 18px 18px; }
  .hiw-page .hiw-diagram{ padding: 16px; }
  .hiw-page .hiw-card-head { padding: 18px 20px 16px; }
  .hiw-page .hiw-list   { padding: 18px 20px 20px; }
}

/* ==========================================================================
   19. vpp82.php 엔진 소개 전용 (Scoped: .page-vpp)
   --------------------------------------------------------------------------
   progress-info / counter-four 는 다른 페이지에서도 쓰이므로
   반드시 .page-vpp 스코프 안에서만 손댑니다.
   ========================================================================== */
.page-vpp .feature-two,
.page-vpp .video-two,
.page-vpp .counter-four {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-vpp .sec-title.centered {
  text-align: center;
  margin-bottom: 34px;
}

.page-vpp .sec-title.centered .sec-title_text {
  max-width: 68ch;
  margin: 0 auto;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.7;
  color: var(--st-ink-600) !important;
  word-break: keep-all;
}

/* ---- 특징 3항목: 절대위치 아이콘 → 카드 + 타일 ---- */

/* ★ 소제목("압축 성능, 연결 성공률…")과 첫 카드 사이가 10px 밖에 없어
   붙어 보였습니다. 이 컬럼의 sec-title 은 아래 여백이 0 이었습니다.
   ※ 위쪽 가운데 정렬 타이틀(.sec-title.centered)에는 영향이 없도록
     .about-one_content-column 안으로 한정했습니다. */
.page-vpp .about-one_content-column .sec-title {
  margin-bottom: 30px !important;
}

.page-vpp .progress-info {
  margin-bottom: var(--st-gap) !important;
}

/* 카드 안쪽 위아래 여백도 조금 넉넉하게 (18px → 24px) */
.page-vpp .progress-info_inner {
  padding: 24px 22px !important;
  border: 1px solid var(--st-border) !important;
  border-left: 1px solid var(--st-border) !important;
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  box-shadow: var(--st-shadow-xs);
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-vpp .progress-info_inner:hover {
  transform: translateY(-3px);
  border-color: var(--st-brand-200) !important;
  box-shadow: var(--st-shadow-md);
}

.page-vpp .progress-info_title {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding-left: 0 !important;
  margin-bottom: 10px;
}

/* 아이콘은 Font Awesome 6 를 직접 씁니다.
   템플릿 flaticon_mycollection.css 는 [class^="flaticon-"] 선택자만 가진 경우가 있어
   class="progress-info_icon flaticon-shield" 처럼 뒤에 붙으면 매칭되지 않습니다. */
.page-vpp .progress-info_icon {
  position: static !important;
  flex: none;
  display: grid !important;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  line-height: 1 !important;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50) !important;
  color: var(--st-brand-600) !important;
  font-size: 19px !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

.page-vpp .progress-info_title h5 {
  margin: 0 !important;
  font-size: 16.5px !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--st-ink-900) !important;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.page-vpp .progress-info_text {
  margin-top: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: var(--st-ink-600) !important;
  text-align: left !important;
  word-break: keep-all;
}

/* 좌측 텍스트와 우측 이미지(01_l.png)를 "하단 기준"으로 정렬합니다.
   ※ 이전에는 align-items: center 라 두 컬럼의 세로 중앙이 맞았고,
     그래서 이미지 아래쪽이 설명 카드보다 위로 떠 보였습니다.
     flex-end 로 바꿔 두 컬럼의 바닥선을 맞춥니다. */
.page-vpp .feature-two > .auto-container > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.page-vpp .about-one_content-column,
.page-vpp .about-one_image-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.page-vpp .about-one_image-column {
  height: auto !important;
  align-items: center;
}

/* ★ 마지막 설명 카드의 아래 여백을 없애야 바닥선이 정확히 맞습니다.
   (.progress-info 에 margin-bottom: var(--st-gap) 이 걸려 있어,
    이것을 두면 이미지가 그만큼 위로 떠 보입니다) */
.page-vpp .about-one_content-column .row > .progress-info:last-child {
  margin-bottom: 0 !important;
}

.page-vpp .about-one_content-column .about-one_content-inner > .row {
  margin-bottom: 0;
}

.page-vpp .about-one_image-inner {
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-vpp .about-one_image {
  width: 100%;
}

.page-vpp .about-one_image img {
  border-radius: var(--st-r-lg);
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* 767px 이하에서는 두 컬럼이 세로로 쌓입니다. 하단 정렬은 의미가 없어지고
   이미지가 설명 카드에 붙어 버리므로 위쪽 여백을 줍니다. */
@media (max-width: 767px) {
  .page-vpp .feature-two > .auto-container > .row {
    align-items: stretch;
  }
  .page-vpp .about-one_image-column {
    margin-top: var(--st-gap);
  }
  .page-vpp .about-one_content-column .sec-title {
    margin-bottom: 22px !important;
  }
  .page-vpp .progress-info_inner {
    padding: 20px 18px !important;
  }
}

/* ---- 영상 섹션 ---- */
.page-vpp .video-two .inner-container {
  border-radius: var(--st-r-xl);
  overflow: hidden;
  box-shadow: var(--st-shadow-lg);
}

.page-vpp .video-two_image img {
  width: 100%;
  display: block;
}

.page-vpp .video-two_overlay-box::before {
  background: linear-gradient(180deg, rgba(8, 26, 21, .62) 0%, rgba(8, 26, 21, .82) 100%) !important;
  opacity: 1 !important;
}

.page-vpp .video-two_play1 {
  background-color: var(--st-brand-500) !important;
  box-shadow: 0 10px 26px rgba(26, 160, 106, .38);
  transition: transform var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
}

.page-vpp .video-two_play1:hover {
  background-color: var(--st-brand-600) !important;
  transform: scale(1.06);
}

.page-vpp .video-two_heading {
  color: var(--st-white) !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 20px !important;
}

.page-vpp .video-two_text {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  max-width: 62ch;
  margin: 12px auto 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  word-break: keep-all;
}

/* ---- 성능 지표 ----
   기존에는 어두운 배경이라 바로 아래 어두운 푸터와 경계가 사라졌습니다.
   밝은 배경 + 브랜드 컬러 수치로 바꿔 구분이 확실해집니다. ---- */
.page-vpp .counter-four {
  background-image: none !important;
  background-color: transparent !important;
  background: linear-gradient(180deg, var(--st-white) 0%, var(--st-ink-050) 100%) !important;
  position: relative;
  margin-top: 0 !important;
  border-bottom: 1px solid var(--st-border-soft);
}

.page-vpp .counter-four::before {
  display: none;
}

.page-vpp .counter-four > .auto-container {
  position: relative;
  z-index: 2;
}

.page-vpp .counter-four .inner-container {
  padding: 0 !important;
}

.page-vpp .counter-four_block {
  float: none !important;
  margin-bottom: var(--st-gap);
  display: flex;
}

.page-vpp .counter-four_block-inner {
  width: 100%;
  padding: 28px 24px;
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-xs);
  text-align: center;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-vpp .counter-four_block-inner:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md);
}

.page-vpp .counter-four .upper-box {
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 아이콘 타일 — 50px / 21px 에서 조금 키웠습니다 (60fps · 1024Mbps · 4K 위) */
.page-vpp .counter-four_icon {
  position: static !important;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  line-height: 1 !important;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  color: var(--st-brand-600) !important;
  font-size: 26px !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

/* 좁은 화면에서는 원래 크기에 가깝게 유지합니다 (3칸이 나란히 놓여 있어
   너무 커지면 숫자와 부딪힙니다) */
@media (max-width: 767px) {
  .page-vpp .counter-four_icon {
    width: 54px;
    height: 54px;
    font-size: 23px !important;
  }
}

.page-vpp .counter-four_counter,
.page-vpp .counter-four_counter.text-gray {
  font-size: clamp(30px, 3.6vw, 44px) !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--st-brand-600) !important;
  font-variant-numeric: tabular-nums;
}

.page-vpp .counter-four_text,
.page-vpp .counter-four_text.text-gray {
  margin-top: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--st-ink-600) !important;
}

/* ---- 하단 CTA ---- */
.page-vpp .vpp-cta {
  margin-top: 36px;
  text-align: center;
}

.page-vpp .vpp-cta .st-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .page-vpp .about-one_image-inner { margin-top: 28px !important; }
  .page-vpp .video-two_text { padding: 0 8px; }
}

@media (max-width: 575px) {
  .page-vpp .progress-info_inner { padding: 18px 18px !important; }
  .page-vpp .progress-info_icon { width: 38px !important; height: 38px !important;
    line-height: 38px !important; font-size: 17px !important; }
  .page-vpp .counter-four_block-inner { padding: 22px 16px; }
}

/* ==========================================================================
   20. history.php 연혁 전용 (Scoped: .sh-history)
   --------------------------------------------------------------------------
   Seetrol MY 사이트의 연혁 페이지와 같은 구조를 쓰되
   ① 파란색(#0066ff) → 사이트 브랜드 그린으로 정렬
   ② 페이지 안 <style> 대신 main.css 로 통합
   ========================================================================== */
.sh-history {
  --sh-primary:      var(--st-brand-500);
  --sh-primary-dark: var(--st-brand-700);
  --sh-ink:          var(--st-ink-900);
  --sh-body:         var(--st-ink-600);
  --sh-muted:        var(--st-ink-500);
  --sh-panel:        rgba(255, 255, 255, .94);
  --sh-radius:       var(--st-r-lg);
  --sh-radius-sm:    var(--st-r-md);
  --sh-shadow:       var(--st-shadow-md);
  --sh-shadow-sm:    var(--st-shadow-xs);
  --sh-gap:          var(--st-gap);
}

/* ---- 섹션 ---- */
.sh-history .sh-section {
  padding: var(--st-section-y) 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sh-history .sh-section.is-alt {
  position: relative;
}

.sh-history .sh-section.is-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 250, 249, .72), rgba(247, 250, 249, .88));
  pointer-events: none;
}

.sh-history .sh-section > .auto-container {
  position: relative;
  z-index: 1;
}

/* ---- 패널 ---- */
.sh-history .sh-panel {
  background: var(--sh-panel);
  border: 1px solid var(--st-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow);
  padding: 26px 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sh-history .sh-panel--center {
  text-align: center;
}

.sh-history .sh-panel--intro {
  margin-bottom: var(--sh-gap);
}

/* ---- 연도 배지 ---- */
.sh-history .sh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-600);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.4;
}

.sh-history .sh-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sh-primary);
  flex: none;
}

/* ---- 제목 / 본문 ---- */
.sh-history .sh-title {
  color: var(--sh-ink);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  word-break: keep-all;
}

.sh-history .sh-title--lg {
  font-size: clamp(24px, 2.8vw, 34px);
}

.sh-history .sh-lead {
  color: var(--sh-body);
  font-size: 14.5px;
  line-height: 1.78;
  text-align: left;          /* 한글 양쪽정렬 해제 */
  word-break: keep-all;
  margin: 0;
}

.sh-history .sh-panel--center .sh-lead {
  text-align: center;
  max-width: 70ch;
  margin: 0 auto;
}

/* ---- 서브 블록 ---- */
.sh-history .sh-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--st-border-soft);
}

.sh-history .sh-block-title {
  color: var(--sh-ink);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.sh-history .sh-block-text {
  color: var(--sh-body);
  font-size: 14.5px;
  line-height: 1.7;
  text-align: left;
  word-break: keep-all;
  margin: 0;
}

/* ---- 이미지 ---- */
.sh-history .sh-figure {
  margin: 0;
}

.sh-history .sh-figure img {
  width: 100%;
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-sm);
  display: block;
}

/* ---- 행 ---- */
.sh-history .sh-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.sh-history .sh-row--stretch {
  align-items: stretch;
  gap: 24px;
}

.sh-history .sh-col {
  flex: 1 1 380px;
  min-width: 280px;
}

/* KPI 4개가 한 줄에 들어가도록 min-width 를 낮춥니다
   (.sh-col 의 min-width:280px 때문에 4번째가 줄바꿈되던 문제) */
.sh-history .sh-col--kpi {
  flex: 1 1 220px;
  min-width: 200px;
}

/* ---- KPI ---- */
.sh-history .sh-kpi {
  height: 100%;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--sh-radius-sm);
  box-shadow: var(--sh-shadow-sm);
  padding: 26px 22px;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.sh-history .sh-kpi:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--sh-shadow);
}

/* flaticon 은 [class^="flaticon-"] 선택자 문제로 안 나오는 경우가 있어 FA6 사용 */
.sh-history .sh-kpi-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  color: var(--sh-primary);
  font-size: 20px;
}

.sh-history .sh-kpi-title {
  color: var(--sh-ink);
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  word-break: keep-all;
}

.sh-history .sh-kpi-text {
  color: var(--sh-muted);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
}

/* ---- 성능 지표 바 ---- */
.sh-history .sh-metric {
  margin-top: 18px;
}

.sh-history .sh-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.sh-history .sh-metric-label {
  color: var(--sh-ink);
  font-weight: 600;
  font-size: 14px;
}

.sh-history .sh-metric-value {
  color: var(--sh-primary);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.sh-history .sh-bar {
  height: 8px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-200);
  overflow: hidden;
}

.sh-history .sh-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--st-r-pill);
  background: linear-gradient(90deg, var(--st-brand-400), var(--st-brand-600));
}

/* ---- 하단 CTA ---- */
.sh-history .sh-cta {
  margin-top: 32px;
  text-align: center;
}

.sh-history .sh-cta .st-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .sh-history .sh-panel { padding: 24px; }
  .sh-history .sh-row   { gap: 26px; }
}

@media (max-width: 575px) {
  .sh-history .sh-panel { padding: 20px 18px; }
  .sh-history .sh-kpi   { padding: 20px 18px; }
}

/* ==========================================================================
   21. howinstall.php 설치방법 전용 (Scoped: .page-install)
   ========================================================================== */
.page-install .feature-two,
.page-install .team-two,
.page-install .business-three {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.page-install .sec-title.centered {
  text-align: center;
  margin-bottom: 32px;
}

/* ---- 상단: DESK vs CALL 역할 비교 ---- */
.page-install .inst-roles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.page-install .inst-role {
  padding: 22px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-sm);
  text-align: center;
}

.page-install .inst-role-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  color: var(--st-brand-600);
  font-size: 24px;
}

.page-install .inst-role-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.page-install .inst-role-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-600);
  font-size: 12.5px;
  font-weight: 700;
}

.page-install .inst-role-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--st-ink-600);
  word-break: keep-all;
  margin: 0;
}

.page-install .inst-arrow {
  display: grid;
  place-items: center;
  color: var(--st-brand-400);
  font-size: 22px;
}

.page-install .inst-note {
  max-width: 900px;
  margin: 22px auto 0;
  padding: 16px 20px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  color: var(--st-ink-600);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}

.page-install .inst-note strong {
  color: var(--st-ink-900);
}

/* ---- OS 설치 카드 ---- */
.page-install .inst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-gap);
  max-width: 940px;
  margin: 0 auto;
}

.page-install .inst-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 22px;
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-sm);
  text-align: center;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-install .inst-card:hover {
  transform: translateY(-4px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-lg);
}

.page-install .inst-card-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--st-ink-050);
  border: 1px solid var(--st-border);
  font-size: 32px;
  color: var(--st-ink-700);
}

.page-install .inst-card--win .inst-card-icon { background: #eaf4fd; border-color: #cfe6fa; color: #0078d4; }
.page-install .inst-card--and .inst-card-icon { background: #ecfaf1; border-color: #cdf0dc; color: #14a05f; }
.page-install .inst-card--ios .inst-card-icon,
.page-install .inst-card--mac .inst-card-icon { background: #f2f3f5; border-color: #e0e2e6; color: #2b2b2e; }

.page-install .inst-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-install .inst-card-sub {
  font-size: 13px;
  color: var(--st-ink-500);
  margin: -6px 0 0;
}

.page-install .inst-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 20px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-500);
  color: var(--st-white) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(26, 160, 106, .26);
  transition: background-color var(--st-dur) var(--st-ease),
              transform var(--st-dur) var(--st-ease);
}

.page-install .inst-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

.page-install .inst-play:hover {
  background: var(--st-brand-600);
  transform: translateY(-2px);
  color: var(--st-white) !important;
}

/* 준비중 카드 */
.page-install .inst-card--soon {
  border-style: dashed;
  background: var(--st-ink-050);
}

.page-install .inst-card--soon .inst-card-icon {
  opacity: .55;
}

.page-install .inst-soon {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 20px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-200);
  color: var(--st-ink-600);
  font-size: 14px;
  font-weight: 700;
}

/* 어두운 배경 섹션 위 타이틀 보정 */
.page-install .team-two,
.page-install .business-three {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

.page-install .team-two::before,
.page-install .business-three::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 250, 249, .92), rgba(247, 250, 249, .97));
}

.page-install .team-two > .auto-container,
.page-install .business-three > .auto-container {
  position: relative;
  z-index: 2;
}

.page-install .business-three .sec-title_heading,
.page-install .business-three .sec-title_heading.dark-green,
.page-install .team-two .sec-title_heading {
  color: var(--st-ink-900) !important;
}

.page-install .business-three .sec-title-three_text {
  color: var(--st-ink-600) !important;
}

.page-install .business-three .sec-title_title,
.page-install .team-two .sec-title_title {
  background: var(--st-brand-50);
  border-color: var(--st-brand-100);
  color: var(--st-brand-600) !important;
  backdrop-filter: none;
}

.page-install .business-three .sec-title_title::before,
.page-install .team-two .sec-title_title::before {
  background: var(--st-brand-500);
}

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .page-install .inst-roles {
    grid-template-columns: 1fr;
  }
  .page-install .inst-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 767px) {
  .page-install .inst-grid { grid-template-columns: 1fr; max-width: 420px; }
  .page-install .inst-card { padding: 24px 20px 22px; }
}

/* ==========================================================================
   22. process.php 이용절차 전용 (Scoped: .page-process)
   --------------------------------------------------------------------------
   2열 카드 나열 → 세로 타임라인. 순서가 있는 절차는 선으로 이어주는 편이
   훨씬 잘 읽힙니다.
   ========================================================================== */
.page-process .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-process .sec-title.centered {
  text-align: center;
  margin-bottom: 34px;
}

/* ---- 단계 묶음(phase) ---- */
.page-process .pr-phase {
  max-width: 820px;
  margin: 0 auto;
}

.page-process .pr-phase + .pr-phase {
  margin-top: 34px;
}

.page-process .pr-phase-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.page-process .pr-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-600);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.page-process .pr-phase-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-brand-500);
  flex: none;
}

.page-process .pr-phase-line {
  flex: 1;
  height: 1px;
  background: var(--st-border);
}

/* ---- 타임라인 ---- */
.page-process .pr-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 번호 배지를 잇는 세로선 */
.page-process .pr-step {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 16px;
}

.page-process .pr-step:last-child {
  padding-bottom: 0;
}

.page-process .pr-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(180deg, var(--st-brand-200), var(--st-ink-200));
}

.page-process .pr-step:last-child::before {
  display: none;
}

.page-process .pr-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px rgba(26, 160, 106, .26);
}

.page-process .pr-body {
  flex: 1;
  min-width: 0;
  padding: 16px 20px 18px;
  border-radius: var(--st-r-lg);
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-xs);
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease);
}

.page-process .pr-step:hover .pr-body {
  transform: translateY(-2px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-md);
}

.page-process .pr-label {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-brand-600);
}

.page-process .pr-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 단계 제목 옆 주체 배지 (상담원 / 고객) */
.page-process .pr-who {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-100);
  border: 1px solid var(--st-border);
  color: var(--st-ink-600);
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
  letter-spacing: 0;
}

.page-process .pr-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
  text-align: left;
  word-break: keep-all;
}

.page-process .pr-text a {
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

.page-process .pr-text a:hover {
  color: var(--st-brand-700);
  border-bottom-color: var(--st-brand-500);
}

/* 참고 문구 */
.page-process .pr-hint {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--st-r-sm);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--st-ink-500);
}

/* ---- 하단 CTA ---- */
.page-process .pr-cta {
  max-width: 820px;
  margin: 34px auto 0;
  text-align: center;
}

.page-process .pr-cta .st-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-process .pr-step { gap: 12px; }
  .page-process .pr-num { width: 38px; height: 38px; font-size: 14px; }
  .page-process .pr-step::before { left: 18px; top: 40px; }
  .page-process .pr-body { padding: 14px 16px 16px; }
  .page-process .pr-phase-head { gap: 10px; }
}

/* ==========================================================================
   23. download.php 다운로드 전용 (Scoped: .page-download)
   --------------------------------------------------------------------------
   항목이 9개뿐이라 카드 그리드는 오히려 복잡했습니다.
   "프로그램 / 문서" 두 묶음, 한 줄짜리 목록으로 단순화했습니다.
   ========================================================================== */
.page-download .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

/* 원본 템플릿의 장식 패턴 레이어는 목록 위로 떠서 클릭을 막을 수 있습니다 */
.page-download .feature-two_circle-layer {
  display: none !important;
}

.page-download .sec-title.centered {
  text-align: center;
  margin-bottom: 30px;
}

.page-download .dl-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 묶음 제목 (프로그램 / 문서) ---- */
.page-download .dl-head {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--st-border);
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.01em;
}

.page-download .dl-list + .dl-head {
  margin-top: 30px;
}

/* ---- 목록 ---- */
.page-download .dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-download .dl-list li {
  line-height: normal;
}

.page-download .dl-list li + li {
  border-top: 1px solid var(--st-border-soft);
}

/* ---- 한 줄 항목 (줄 전체가 링크) ---- */
.page-download .dl-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 12px;
  border-radius: var(--st-r-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--st-dur) var(--st-ease);
}

.page-download .dl-item:hover,
.page-download .dl-item:focus-visible {
  background: var(--st-ink-050);
  color: inherit;
  text-decoration: none;
}

/* 아이콘 — 종류별 색만 다르게 */
.page-download .dl-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--st-r-md);
  background: var(--dl-chip-bg, var(--st-brand-50));
  color: var(--dl-accent, var(--st-brand-600));
  font-size: 17px;
  line-height: 1;
}

.page-download .dl-item--win  { --dl-accent: #0f6cbd; --dl-chip-bg: #eaf3fc; }
.page-download .dl-item--and  { --dl-accent: #1f9d55; --dl-chip-bg: #e9f8ef; }
.page-download .dl-item--mac  { --dl-accent: #33413c; --dl-chip-bg: #eef1f0; }
.page-download .dl-item--util { --dl-accent: #6b7772; --dl-chip-bg: #f1f4f3; }
.page-download .dl-item--doc  { --dl-accent: #c0392b; --dl-chip-bg: #fdeeec; }
.page-download .dl-item--form { --dl-accent: #a15c07; --dl-chip-bg: #fdf3e3; }

.page-download .dl-main {
  display: block;
  min-width: 0;
}

.page-download .dl-name {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* 상담원용 / 고객용 구분 */
.page-download .dl-who {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-100);
  color: var(--st-ink-600);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 2px;
}

.page-download .dl-desc {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--st-ink-500);
  word-break: keep-all;
}

.page-download .dl-ext {
  padding: 3px 9px;
  border-radius: var(--st-r-sm);
  background: var(--dl-chip-bg, var(--st-brand-50));
  color: var(--dl-accent, var(--st-brand-600));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ---- 다운로드 표시 ---- */
.page-download .dl-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--st-r-pill);
  border: 1px solid var(--st-brand-200);
  background: var(--st-white);
  color: var(--st-brand-600);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-download .dl-item:hover .dl-go {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-download .dl-go i {
  font-size: 12px;
}

/* ---- 하단 안내 ---- */
.page-download .dl-foot-note {
  margin: 22px 0 0;
  padding: 12px 14px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
  text-align: left;
  word-break: keep-all;
}

.page-download .dl-foot-note a {
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

.page-download .dl-foot-note a:hover {
  color: var(--st-brand-700);
  border-bottom-color: var(--st-brand-500);
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-download .dl-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 13px 8px;
  }
  /* 좁은 화면에서는 다운로드 버튼을 아래 줄로 내립니다 */
  .page-download .dl-go {
    grid-column: 2 / -1;
    justify-self: start;
    padding: 6px 12px 6px 10px;
    font-size: 13px;
  }
  .page-download .dl-ext { align-self: start; margin-top: 2px; }
  .page-download .dl-ico { align-self: start; }
}

/* ==========================================================================
   24. notice.php 공지사항 전용 (Scoped: .page-notice)
   --------------------------------------------------------------------------
   본문을 전부 펼쳐 놓던 목록 → 제목만 보이는 아코디언.
   JS 없이 체크박스 + :checked 형제 선택자로 동작합니다.
   ========================================================================== */
.page-notice .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

/* 원본 템플릿의 장식 패턴 레이어는 목록 위로 떠서 클릭을 막을 수 있습니다 */
.page-notice .feature-two_circle-layer {
  display: none !important;
}

.page-notice .sec-title.centered {
  text-align: center;
  margin-bottom: 30px;
}

.page-notice .nt-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 목록 ---- */
.page-notice .nt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--st-ink-200);
}

.page-notice .nt-item {
  position: relative;
  border-bottom: 1px solid var(--st-border-soft);
  line-height: normal;
}

/* 체크박스는 화면에서 숨기되 키보드 포커스는 살려둡니다 */
.page-notice .nt-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- 제목 줄 ---- */
.page-notice .nt-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 15px 12px;
  cursor: pointer;
  border-radius: var(--st-r-md);
  transition: background-color var(--st-dur) var(--st-ease);
}

.page-notice .nt-head:hover {
  background: var(--st-ink-050);
}

/* 키보드로 이동했을 때 어디에 있는지 보이도록 */
.page-notice .nt-toggle:focus-visible + .nt-head {
  outline: 2px solid var(--st-brand-500);
  outline-offset: 2px;
}

.page-notice .nt-no {
  min-width: 34px;
  padding: 3px 8px;
  border-radius: var(--st-r-sm);
  background: var(--st-ink-100);
  color: var(--st-ink-500);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 상단 고정 공지 */
.page-notice .nt-no--top {
  background: var(--st-brand-500);
  color: var(--st-white);
  letter-spacing: -0.02em;
}

.page-notice .nt-item--top .nt-head {
  background: var(--st-brand-50);
}

.page-notice .nt-item--top .nt-head:hover {
  background: var(--st-brand-100);
}

.page-notice .nt-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.01em;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.page-notice .nt-date {
  font-size: 13px;
  color: var(--st-ink-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-notice .nt-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--st-ink-100);
  color: var(--st-ink-500);
  font-size: 11px;
  transition: transform var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-notice .nt-head:hover .nt-arrow {
  background: var(--st-brand-100);
  color: var(--st-brand-600);
}

.page-notice .nt-toggle:checked + .nt-head .nt-arrow {
  transform: rotate(180deg);
  background: var(--st-brand-500);
  color: var(--st-white);
}

.page-notice .nt-toggle:checked + .nt-head .nt-title {
  color: var(--st-brand-700);
}

/* ---- 본문 (펼침) ---- */
/* grid-template-rows 0fr → 1fr : 높이를 모르는 내용도 부드럽게 열립니다 */
.page-notice .nt-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--st-dur) var(--st-ease);
}

.page-notice .nt-toggle:checked ~ .nt-body {
  grid-template-rows: 1fr;
}

.page-notice .nt-body-inner {
  overflow: hidden;
}

.page-notice .nt-text {
  margin: 0 12px 6px;
  padding: 16px 18px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--st-ink-700);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.page-notice .nt-text a {
  color: var(--st-brand-600);
  font-weight: 700;
  border-bottom: 1px solid var(--st-brand-200);
}

.page-notice .nt-meta {
  margin: 0 12px 14px;
  padding-left: 2px;
  font-size: 12.5px;
  color: var(--st-ink-400);
}

/* ---- 공지 없음 ---- */
.page-notice .nt-empty {
  padding: 54px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  text-align: center;
}

.page-notice .nt-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--st-white);
  border: 1px solid var(--st-border);
  color: var(--st-brand-500);
  font-size: 21px;
}

.page-notice .nt-empty-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-800);
}

.page-notice .nt-empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--st-ink-500);
}

/* ---- 페이지네이션 ---- */
.page-notice .nt-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
}

.page-notice .nt-page {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-border);
  background: var(--st-white);
  color: var(--st-ink-600);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-notice .nt-page:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-700);
  text-decoration: none;
}

.page-notice .nt-page.is-active {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  cursor: default;
}

/* 첫/마지막 페이지에서는 화살표를 눌러도 반응하지 않도록 */
.page-notice .nt-page.is-disabled {
  color: var(--st-ink-300);
  background: var(--st-ink-050);
  cursor: default;
}

.page-notice .nt-page--nav {
  font-size: 12px;
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-notice .nt-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 13px 8px;
  }
  .page-notice .nt-no { align-self: start; margin-top: 1px; }
  .page-notice .nt-arrow { align-self: start; margin-top: 1px; }
  /* 날짜는 제목 아래로 내립니다 */
  .page-notice .nt-date {
    grid-column: 2 / 3;
    grid-row: 2;
    font-size: 12.5px;
  }
  .page-notice .nt-title { font-size: 15px; }
  .page-notice .nt-text { margin-left: 8px; margin-right: 8px; padding: 14px 15px; font-size: 14px; }
  .page-notice .nt-meta { margin-left: 8px; margin-right: 8px; }
  .page-notice .nt-page { min-width: 34px; height: 34px; padding: 0 8px; font-size: 13.5px; }
}

/* ==========================================================================
   25. updatehistoria.php 업데이트 이력 전용 (Scoped: .page-update)
   --------------------------------------------------------------------------
   목록 골격은 24번(.page-notice)을 그대로 씁니다.
   이 섹션에는 업데이트 이력에만 필요한 것만 담았습니다.
   ========================================================================== */

/* 최근 30일 이내 항목 표시 */
.page-update .nt-new {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: var(--st-r-pill);
  background: #fdeeec;
  color: #c0392b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  vertical-align: 2px;
}

/* 고정 항목 배지는 "공지" 대신 "주요" 라 글자가 하나 더 들어갑니다 */
.page-update .nt-no--top {
  min-width: 42px;
}

/* 릴리즈 노트는 줄 단위 나열이 많아 줄간격을 조금 넓힙니다 */
.page-update .nt-text {
  line-height: 1.8;
}

/* ==========================================================================
   26. login.php 로그인 전용 (Scoped: .page-login)
   --------------------------------------------------------------------------
   템플릿의 .default-form / .form-group / .theme-btn 을 쓰지 않고
   이 페이지 전용 클래스(.lg-*)로만 구성했습니다.
   원본 style.css 의 폼 스타일과 충돌하지 않습니다.
   ========================================================================== */
.page-login .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: var(--st-ink-050) !important;
}

/* ---- 카드 ---- */
.page-login .lg-card {
  max-width: 430px;
  margin: 0 auto;
  padding: 32px 30px 26px;
  border-radius: var(--st-r-xl);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-md);
}

.page-login .lg-head {
  margin-bottom: 22px;
  text-align: center;
}

.page-login .lg-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  color: var(--st-ink-900);
  letter-spacing: -0.03em;
}

.page-login .lg-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--st-ink-500);
  word-break: keep-all;
}

.page-login .lg-sub a {
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

.page-login .lg-sub a:hover {
  color: var(--st-brand-700);
  border-bottom-color: var(--st-brand-500);
}

/* ---- 입력 ---- */
.page-login .lg-field {
  margin-bottom: 14px;
}

.page-login .lg-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-700);
  letter-spacing: -0.01em;
}

.page-login .lg-input-wrap {
  position: relative;
}

.page-login .lg-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-ink-400);
  font-size: 14px;
  pointer-events: none;
  transition: color var(--st-dur) var(--st-ease);
}

/* 템플릿/브라우저 기본 입력 스타일을 확실히 덮어씁니다 */
.page-wrapper.page-login .lg-input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 44px 0 40px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 15px;
  line-height: 50px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}

.page-wrapper.page-login .lg-input::placeholder {
  color: var(--st-ink-400);
  font-size: 14px;
}

.page-wrapper.page-login .lg-input:focus {
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}

.page-login .lg-input:focus + .lg-input-icon,
.page-login .lg-input-wrap:focus-within .lg-input-icon {
  color: var(--st-brand-500);
}

.page-wrapper.page-login .lg-input.is-invalid {
  border-color: #d9534f;
  box-shadow: 0 0 0 3px rgba(217, 83, 79, .12);
}

/* ---- 비밀번호 보기 ---- */
.page-wrapper.page-login .lg-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-400);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-login .lg-eye:hover {
  background: var(--st-ink-100);
  color: var(--st-ink-700);
}

/* ---- 오류 안내 ---- */
.page-login .lg-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d9534f;
  text-align: left;
}

.page-login .lg-error:not(:empty) {
  margin-top: 6px;
}

.page-login .lg-error--captcha {
  text-align: center;
}

/* ---- 아이디 저장 / 찾기 ---- */
.page-login .lg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 16px;
}

.page-login .lg-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--st-ink-600);
  cursor: pointer;
  user-select: none;
}

.page-wrapper.page-login .lg-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--st-brand-500);
  cursor: pointer;
}

.page-login .lg-link-sm {
  font-size: 13.5px;
  color: var(--st-ink-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-login .lg-link-sm:hover {
  color: var(--st-brand-600);
  border-bottom-color: var(--st-brand-200);
}

/* ---- reCAPTCHA ---- */
/* 위젯 자체가 304px 고정이라 좁은 화면에서 카드 밖으로 나갑니다. 축소해서 맞춥니다 */
.page-login .lg-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}

/* ---- 제출 버튼 ---- */
.page-wrapper.page-login .lg-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 50px;
  margin-top: 14px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--st-r-md);
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(26, 160, 106, .24);
  transition: background-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              transform var(--st-dur) var(--st-ease);
}

.page-wrapper.page-login .lg-submit:hover {
  background: var(--st-brand-600);
  box-shadow: 0 10px 24px rgba(26, 160, 106, .3);
  transform: translateY(-1px);
}

.page-wrapper.page-login .lg-submit:disabled,
.page-wrapper.page-login .lg-submit.is-loading {
  background: var(--st-ink-300);
  box-shadow: none;
  transform: none;
  cursor: default;
}

.page-login .lg-submit i {
  font-size: 13px;
}

/* ---- 하단 ---- */
.page-login .lg-foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--st-border-soft);
  text-align: center;
  font-size: 13.5px;
  color: var(--st-ink-500);
}

.page-login .lg-foot a {
  margin-left: 8px;
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

.page-login .lg-foot a:hover {
  color: var(--st-brand-700);
  border-bottom-color: var(--st-brand-500);
}

/* ---- 반응형 ---- */
@media (max-width: 400px) {
  .page-login .lg-card { padding: 26px 18px 22px; }
  .page-login .lg-title { font-size: 23px; }
  /* reCAPTCHA 위젯(304px)이 좁은 화면에서 넘칠 때만 축소 */
  .page-login .lg-captcha .g-recaptcha {
    transform: scale(.88);
    transform-origin: center;
  }
}

/* ==========================================================================
   27. demoapply.php 무료체험 신청 전용 (Scoped: .page-demo)
   --------------------------------------------------------------------------
   템플릿의 .default-form / .form-group / .shadowbox / .theme-btn 을 쓰지 않고
   전용 클래스(.dm-*)로만 구성했습니다. 원본 폼 스타일과 충돌하지 않습니다.
   ========================================================================== */
.page-demo .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: var(--st-ink-050) !important;
}

.page-demo .sec-title.centered {
  text-align: center;
  margin-bottom: 22px;
}

.page-demo .dm-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* ---- 혜택 요약 ---- */
.page-demo .dm-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-demo .dm-perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--st-r-pill);
  background: var(--st-white);
  border: 1px solid var(--st-brand-100);
  color: var(--st-ink-700);
  font-size: 13.5px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.page-demo .dm-perks i {
  color: var(--st-brand-500);
  font-size: 13px;
}

/* ---- 경고 ---- */
.page-demo .dm-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-radius: var(--st-r-md);
  background: #fdf3e3;
  border: 1px solid #f0dcb5;
  font-size: 13.5px;
  line-height: 1.65;
  color: #8a5a08;
  word-break: keep-all;
}

.page-demo .dm-alert i {
  flex: none;
  margin-top: 3px;
}

/* ---- 카드 ---- */
.page-demo .dm-card {
  padding: 22px 24px 24px;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-xs);
}

.page-demo .dm-card + .dm-card {
  margin-top: 16px;
}

.page-demo .dm-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--st-border-soft);
}

.page-demo .dm-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

.page-demo .dm-card-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--st-ink-400);
  word-break: keep-all;
}

/* ---- 입력 그리드 ---- */
.page-demo .dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px 18px;
}

.page-demo .dm-field {
  min-width: 0;
}

.page-demo .dm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-700);
  letter-spacing: -0.01em;
}

.page-demo .dm-req {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  color: var(--st-brand-600);
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: 1px;
}

.page-demo .dm-input-wrap {
  position: relative;
}

/* 템플릿/브라우저 기본 입력 스타일을 확실히 덮어씁니다 */
.page-wrapper.page-demo .dm-input {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 14.5px;
  line-height: 46px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}

.page-wrapper.page-demo .dm-input::placeholder {
  color: var(--st-ink-400);
  font-size: 13.5px;
}

.page-wrapper.page-demo .dm-input:focus {
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}

/* 회원정보에서 가져온 읽기전용 칸 */
.page-wrapper.page-demo .dm-input.is-locked {
  background: var(--st-ink-050);
  color: var(--st-ink-600);
  border-color: var(--st-ink-200);
  cursor: default;
}

.page-wrapper.page-demo .dm-input.is-locked:focus {
  border-color: var(--st-ink-300);
  box-shadow: none;
}

.page-wrapper.page-demo .dm-input.is-invalid {
  border-color: #d9534f;
  box-shadow: 0 0 0 3px rgba(217, 83, 79, .12);
}

/* 비밀번호 칸은 오른쪽에 눈 아이콘 자리를 비웁니다 */
.page-wrapper.page-demo .dm-input-wrap .dm-input {
  padding-right: 44px;
}

.page-wrapper.page-demo .dm-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-400);
  font-size: 13.5px;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-demo .dm-eye:hover {
  background: var(--st-ink-100);
  color: var(--st-ink-700);
}

/* ---- 보조 문구 / 오류 ---- */
.page-demo .dm-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--st-ink-400);
  text-align: left;
  word-break: keep-all;
}

.page-demo .dm-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d9534f;
  text-align: left;
}

.page-demo .dm-error:not(:empty) {
  margin-top: 6px;
}

/* ---- 비밀번호 규칙 ---- */
.page-demo .dm-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.page-demo .dm-rules li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  line-height: normal;
  color: var(--st-ink-400);
  transition: color var(--st-dur) var(--st-ease);
}

.page-demo .dm-rules li i {
  font-size: 11px;
}

.page-demo .dm-rules li.is-ok {
  color: var(--st-brand-600);
  font-weight: 700;
}

/* ---- 유의사항 ---- */
.page-demo .dm-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--st-ink-600);
  word-break: keep-all;
}

.page-demo .dm-notice i {
  flex: none;
  margin-top: 3px;
  color: var(--st-brand-500);
}

.page-demo .dm-notice strong {
  color: var(--st-ink-900);
  font-weight: 700;
}

/* ---- 버튼 ---- */
.page-demo .dm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.page-wrapper.page-demo .dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 150px;
  height: 50px;
  padding: 0 26px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease),
              transform var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-demo .dm-btn--primary {
  background: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: 0 6px 18px rgba(26, 160, 106, .24);
}

.page-wrapper.page-demo .dm-btn--primary:hover {
  background: var(--st-brand-600);
  box-shadow: 0 10px 24px rgba(26, 160, 106, .3);
  transform: translateY(-1px);
}

.page-wrapper.page-demo .dm-btn--primary:disabled,
.page-wrapper.page-demo .dm-btn--primary.is-loading {
  background: var(--st-ink-300);
  box-shadow: none;
  transform: none;
  cursor: default;
}

.page-wrapper.page-demo .dm-btn--ghost {
  background: var(--st-white);
  border-color: var(--st-ink-200);
  color: var(--st-ink-600);
  min-width: 110px;
}

.page-wrapper.page-demo .dm-btn--ghost:hover {
  border-color: var(--st-ink-300);
  color: var(--st-ink-800);
}

.page-demo .dm-btn i {
  font-size: 13px;
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-demo .dm-card { padding: 18px 16px 20px; }
  .page-demo .dm-grid { grid-template-columns: 1fr; gap: 14px; }
  .page-demo .dm-actions { flex-direction: column-reverse; }
  .page-wrapper.page-demo .dm-btn { width: 100%; }
  .page-demo .dm-perks li { font-size: 12.5px; padding: 6px 12px; }
}

/* ==========================================================================
   28. desk_demo_success_page.php 신청 완료 전용 (Scoped: .page-done)
   ========================================================================== */
.page-done .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: var(--st-ink-050) !important;
}

.page-done .dn-card {
  max-width: 660px;
  margin: 0 auto;
  padding: 34px 30px 30px;
  border-radius: var(--st-r-xl);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow-md);
  text-align: center;
}

/* ---- 체크 아이콘 ---- */
.page-done .dn-check {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 26px;
  box-shadow: 0 0 0 8px var(--st-brand-50);
}

.page-done .dn-title {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  color: var(--st-ink-900);
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.page-done .dn-lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--st-ink-600);
  text-align: center;
}

.page-done .dn-lead strong {
  color: var(--st-brand-600);
  font-weight: 700;
}

/* ---- 이미지 ---- */
.page-done .dn-figure {
  margin: 0 0 22px;
}

.page-done .dn-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--st-r-lg);
}

/* ---- 진행 단계 ---- */
.page-done .dn-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: center;
}

.page-done .dn-steps li {
  position: relative;
  padding: 16px 10px 14px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  line-height: normal;
}

.page-done .dn-steps li.is-done {
  background: var(--st-brand-50);
  border-color: var(--st-brand-100);
}

.page-done .dn-steps li.is-now {
  background: var(--st-white);
  border-color: var(--st-brand-300);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .1);
}

.page-done .dn-step-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--st-white);
  border: 1px solid var(--st-border);
  color: var(--st-ink-400);
  font-size: 13px;
}

.page-done .dn-steps li.is-done .dn-step-icon {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-done .dn-steps li.is-now .dn-step-icon {
  background: var(--st-brand-50);
  border-color: var(--st-brand-200);
  color: var(--st-brand-600);
}

.page-done .dn-step-name {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink-800);
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.page-done .dn-step-text {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--st-ink-500);
  word-break: keep-all;
}

/* ---- 안내 ---- */
.page-done .dn-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 24px;
  padding: 12px 14px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--st-ink-600);
  text-align: left;
  word-break: keep-all;
}

.page-done .dn-note i {
  flex: none;
  margin-top: 3px;
  color: var(--st-brand-500);
}

.page-done .dn-note a {
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

/* ---- 다음 동선 ---- */
.page-done .dn-next {
  padding-top: 22px;
  border-top: 1px solid var(--st-border-soft);
}

.page-done .dn-next-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink-700);
  text-align: center;
  word-break: keep-all;
}

.page-done .dn-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.page-done .dn-next-item {
  display: block;
  padding: 16px 16px 14px;
  border-radius: var(--st-r-md);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition: transform var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}

.page-done .dn-next-item:hover {
  transform: translateY(-2px);
  border-color: var(--st-brand-200);
  box-shadow: var(--st-shadow-sm);
  color: inherit;
  text-decoration: none;
}

.page-done .dn-next-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: var(--st-r-sm);
  background: var(--st-brand-50);
  color: var(--st-brand-600);
  font-size: 15px;
}

.page-done .dn-next-name {
  display: block;
  margin-bottom: 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.01em;
}

.page-done .dn-next-desc {
  display: block;
  font-size: 13px;
  color: var(--st-ink-500);
}

.page-done .dn-actions {
  margin-top: 20px;
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-done .dn-card { padding: 26px 18px 24px; }
  /* 3단계를 가로로 두면 글자가 뭉개집니다 */
  .page-done .dn-steps { grid-template-columns: 1fr; }
  .page-done .dn-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    text-align: left;
  }
  .page-done .dn-step-icon { grid-row: 1 / 3; margin: 0; }
  .page-done .dn-next-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   29. desk_log.php 로그 조회 전용 (Scoped: .page-log)
   --------------------------------------------------------------------------
   8열 고정폭 표(합계 1,240px)라 좁은 화면에서는 볼 수 없었습니다.
   767px 이하에서는 행을 카드로 전환합니다(td 의 data-label 사용).
   ========================================================================== */
.page-log .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-log .sec-title.centered {
  text-align: center;
  margin-bottom: 24px;
}

/* ---- 상단 바 ---- */
.page-log .lo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.page-log .lo-count {
  margin: 0;
  font-size: 14px;
  color: var(--st-ink-600);
  text-align: left;
}

.page-log .lo-count strong {
  color: var(--st-ink-900);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.page-log .lo-count-sub {
  margin-left: 8px;
  padding-left: 9px;
  border-left: 1px solid var(--st-border);
  font-size: 13px;
  color: var(--st-ink-400);
}

.page-log .lo-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-wrapper.page-log .lo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-ink-200);
  background: var(--st-white);
  color: var(--st-ink-700);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-log .lo-btn:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-700);
  text-decoration: none;
}

.page-wrapper.page-log .lo-btn--danger:hover {
  border-color: #e6b3b1;
  background: #fdeeec;
  color: #b0332e;
}

.page-wrapper.page-log .lo-btn:disabled {
  border-color: var(--st-ink-200);
  background: var(--st-ink-050);
  color: var(--st-ink-300);
  cursor: default;
}

.page-log .lo-btn i {
  font-size: 13px;
}

/* ---- 표 ---- */
.page-log .lo-table-wrap {
  overflow-x: auto;
  border-radius: var(--st-r-lg);
  border: 1px solid var(--st-border);
  background: var(--st-white);
  box-shadow: var(--st-shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.page-log .lo-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-log .lo-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 12px;
  background: var(--st-ink-050);
  border-bottom: 1px solid var(--st-ink-200);
  color: var(--st-ink-600);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
}

.page-log .lo-table td {
  padding: 12px;
  border-bottom: 1px solid var(--st-border-soft);
  color: var(--st-ink-700);
  vertical-align: middle;
  line-height: 1.5;
}

.page-log .lo-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-log .lo-table tbody tr:hover td {
  background: var(--st-ink-050);
}

/* 열 폭 — 긴 값은 화면에서만 말줄임합니다 */
.page-log .lo-c-id   { width: 130px; font-weight: 700; color: var(--st-ink-900); white-space: nowrap; }
.page-log .lo-c-ev   { width: 90px; }
.page-log .lo-c-dt   { width: 140px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--st-ink-600); }
.page-log .lo-c-ip   { width: 130px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--st-ink-600); }
.page-log .lo-c-etc  { max-width: 200px; }
.page-log .lo-c-memo { max-width: 280px; }

.page-log td.lo-c-etc,
.page-log td.lo-c-memo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 이벤트 배지 */
.page-log .lo-ev {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-100);
  color: var(--st-brand-700);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 로그 없음 ---- */
.page-log .lo-empty {
  padding: 54px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  text-align: center;
}

.page-log .lo-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--st-white);
  border: 1px solid var(--st-border);
  color: var(--st-brand-500);
  font-size: 21px;
}

.page-log .lo-empty-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-800);
}

.page-log .lo-empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--st-ink-500);
}

/* ---- 페이지네이션 ---- */
.page-log .lo-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
}

.page-wrapper.page-log .lo-page {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-border);
  background: var(--st-white);
  color: var(--st-ink-600);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-log .lo-page:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-700);
  text-decoration: none;
}

.page-wrapper.page-log .lo-page.is-active {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  cursor: default;
}

.page-wrapper.page-log .lo-page.is-disabled {
  color: var(--st-ink-300);
  background: var(--st-ink-050);
  cursor: default;
}

.page-log .lo-page--nav { font-size: 11.5px; }

/* ==========================================================================
   좁은 화면 : 표 → 카드
   ========================================================================== */
@media (max-width: 767px) {
  .page-log .lo-table-wrap {
    overflow-x: visible;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }

  .page-log .lo-table {
    min-width: 0;
    display: block;
  }

  .page-log .lo-table thead {
    /* 화면에서는 숨기되 스크린리더에는 남깁니다 */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .page-log .lo-table tbody,
  .page-log .lo-table tr,
  .page-log .lo-table td {
    display: block;
    width: auto;
    max-width: none;
  }

  .page-log .lo-table tr {
    margin-bottom: 10px;
    padding: 6px 14px 10px;
    border-radius: var(--st-r-lg);
    background: var(--st-white);
    border: 1px solid var(--st-border);
    box-shadow: var(--st-shadow-xs);
  }

  .page-log .lo-table td {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--st-border-soft);
    font-size: 13.5px;
  }

  .page-log .lo-table tr td:last-child { border-bottom: 0; }
  .page-log .lo-table tbody tr:hover td { background: none; }

  /* data-label 을 항목 이름으로 씁니다 */
  .page-log .lo-table td::before {
    content: attr(data-label);
    color: var(--st-ink-400);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
  }

  /* 그리드 칸을 꽉 채우지 않도록 (이벤트 배지가 가로로 늘어나는 것 방지) */
  .page-log .lo-table td > * {
    justify-self: start;
  }

  /* 카드에서는 잘라내지 않고 전체를 보여줍니다 */
  .page-log td.lo-c-etc,
  .page-log td.lo-c-memo {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
  }

  .page-log .lo-c-dt,
  .page-log .lo-c-ip { white-space: normal; }

  .page-log .lo-bar { justify-content: flex-start; }
  .page-log .lo-tools { width: 100%; }
  .page-wrapper.page-log .lo-btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   30. shop_desk_list.php 구독내역 전용 (Scoped: .page-sub)
   --------------------------------------------------------------------------
   카드 안에 표를 넣어 항목 제목이 건마다 반복되던 구조 → 한 줄짜리 목록.
   767px 이하에서는 행을 카드로 전환합니다(td 의 data-label 사용).
   ========================================================================== */
.page-sub .testimonial-page {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-sub .sec-title.centered {
  text-align: center;
  margin-bottom: 24px;
}

/* ---- 상단 바 ---- */
.page-sub .sb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.page-sub .sb-count {
  margin: 0;
  font-size: 14px;
  color: var(--st-ink-700);
  text-align: left;
}

.page-sub .sb-count strong {
  color: var(--st-ink-900);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.page-sub .sb-count-sub {
  margin-left: 8px;
  padding-left: 9px;
  border-left: 1px solid var(--st-ink-200);
  font-size: 13px;
  color: var(--st-ink-600);
}

.page-wrapper.page-sub .sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-brand-500);
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-sub .sb-btn:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
  text-decoration: none;
}

.page-sub .sb-btn i { font-size: 12.5px; }

/* ---- 표 ---- */
.page-sub .sb-table-wrap {
  overflow-x: auto;
  border-radius: var(--st-r-lg);
  border: 1px solid var(--st-border);
  background: var(--st-white);
  box-shadow: var(--st-shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.page-sub .sb-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-sub .sb-table th {
  padding: 12px;
  background: var(--st-ink-100);
  border-bottom: 1px solid var(--st-ink-300);
  color: var(--st-ink-800);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.page-sub .sb-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--st-ink-200);
  color: var(--st-ink-800);
  vertical-align: middle;
  line-height: 1.5;
}

.page-sub .sb-table tbody tr:last-child td { border-bottom: 0; }
.page-sub .sb-table tbody tr:hover td { background: var(--st-ink-050); }

.page-sub .sb-c-no   { width: 190px; font-weight: 700; color: var(--st-ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-sub .sb-c-kind { width: 100px; white-space: nowrap; }
.page-sub .sb-c-num  { width: 82px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.page-sub .sb-c-date { width: 120px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--st-ink-700); }
.page-sub .sb-c-sum  { width: 120px; white-space: nowrap; text-align: right; font-weight: 700; color: var(--st-ink-900); font-variant-numeric: tabular-nums; }
.page-sub .sb-c-st   { width: 170px; }
.page-sub .sb-c-act  { width: 96px; text-align: right; white-space: nowrap; }

.page-sub th.sb-c-sum { text-align: right; }

.page-sub .sb-won {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--st-ink-600);
}

/* ---- 진행 상태 배지 ---- */
.page-sub .sb-st {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--st-r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.page-sub .sb-st--ok   { background: var(--st-brand-100); border: 1px solid var(--st-brand-300); color: var(--st-brand-800); }
.page-sub .sb-st--wait { background: #fbe6c4; border: 1px solid #dfb970; color: #7a4c04; }
.page-sub .sb-st--off  { background: var(--st-ink-200); border: 1px solid var(--st-ink-300); color: var(--st-ink-700); }

/* ---- 상세보기 ---- */
.page-wrapper.page-sub .sb-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--st-r-sm);
  border: 1px solid var(--st-ink-300);
  background: var(--st-white);
  color: var(--st-ink-800);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-sub .sb-view:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-700);
  text-decoration: none;
}

.page-sub .sb-view i { font-size: 9.5px; }

/* ---- 내역 없음 ---- */
.page-sub .sb-empty {
  padding: 54px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  border: 1px solid var(--st-border-soft);
  text-align: center;
}

.page-sub .sb-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--st-white);
  border: 1px solid var(--st-border);
  color: var(--st-brand-500);
  font-size: 21px;
}

.page-sub .sb-empty-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-800);
}

.page-sub .sb-empty-text {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--st-ink-600);
  word-break: keep-all;
}

/* ---- 페이지네이션 ---- */
.page-sub .sb-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
}

.page-wrapper.page-sub .sb-page {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-ink-300);
  background: var(--st-white);
  color: var(--st-ink-700);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-sub .sb-page:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-700);
  text-decoration: none;
}

.page-wrapper.page-sub .sb-page.is-active {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  cursor: default;
}

.page-wrapper.page-sub .sb-page.is-disabled {
  color: var(--st-ink-300);
  background: var(--st-ink-050);
  cursor: default;
}

.page-sub .sb-page--nav { font-size: 11.5px; }

/* ==========================================================================
   좁은 화면 : 표 → 카드
   ========================================================================== */
@media (max-width: 767px) {
  .page-sub .sb-table-wrap {
    overflow-x: visible;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }

  .page-sub .sb-table { min-width: 0; display: block; }

  .page-sub .sb-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .page-sub .sb-table tbody,
  .page-sub .sb-table tr,
  .page-sub .sb-table td {
    display: block;
    width: auto;
  }

  .page-sub .sb-table tr {
    margin-bottom: 10px;
    padding: 6px 14px 12px;
    border-radius: var(--st-r-lg);
    background: var(--st-white);
    border: 1px solid var(--st-border);
    box-shadow: var(--st-shadow-xs);
  }

  .page-sub .sb-table td {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--st-ink-200);
    font-size: 13.5px;
    text-align: left;
  }

  .page-sub .sb-table tr td:last-child { border-bottom: 0; }
  .page-sub .sb-table tbody tr:hover td { background: none; }

  .page-sub .sb-table td::before {
    content: attr(data-label);
    color: var(--st-ink-600);
    font-size: 12.5px;
    font-weight: 700;
  }

  /* 그리드 칸을 꽉 채우지 않도록 (배지·버튼이 늘어나는 것 방지) */
  .page-sub .sb-table td > * { justify-self: start; }

  /* 상세보기는 카드 아래 가로 전체 버튼으로 */
  .page-sub .sb-table td.sb-c-act {
    display: block;
    padding-top: 12px;
  }
  .page-sub .sb-table td.sb-c-act::before { content: none; }
  .page-wrapper.page-sub .sb-view {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 38px;
    font-size: 13.5px;
  }

  .page-sub .sb-c-sum { text-align: left; }
  .page-sub .sb-bar { justify-content: flex-start; }
  .page-wrapper.page-sub .sb-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   31. shop_desk_list_view.php 구독내역 상세 전용 (Scoped: .page-sub-view)
   --------------------------------------------------------------------------
   상태 배지(.sb-st)는 30번 섹션(.page-sub)의 것을 그대로 씁니다.
   그래서 이 페이지는 page-sub 와 page-sub-view 두 클래스를 함께 씁니다.
   ========================================================================== */
.page-sub-view .services-two {
  padding-top: var(--st-section-y) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-sub-view .sec-title.centered {
  text-align: center;
  margin-bottom: 24px;
}

.page-sub-view .sv-wrap {
  max-width: 640px;
  margin: 0 auto;
}

/* ---- 요약 ---- */
.page-sub-view .sv-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
}

.page-sub-view .sv-summary-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.page-sub-view .sv-summary-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-sub-view .sv-summary-no {
  font-size: 17px;
  font-weight: 800;
  color: var(--st-ink-900);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* ---- 카드 ---- */
.page-sub-view .sv-card {
  padding: 20px 22px 8px;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  box-shadow: var(--st-shadow-xs);
}

.page-sub-view .sv-card + .sv-card {
  margin-top: 14px;
}

.page-sub-view .sv-card-title {
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--st-ink-200);
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

/* ---- 항목 목록 ---- */
.page-sub-view .sv-list {
  margin: 0;
  padding: 0;
}

.page-sub-view .sv-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-border-soft);
}

.page-sub-view .sv-row:last-child {
  border-bottom: 0;
}

.page-sub-view .sv-row dt {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-600);
  letter-spacing: -0.01em;
}

.page-sub-view .sv-row dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--st-ink-800);
  word-break: break-all;
}

.page-sub-view .sv-row dd > * {
  justify-self: start;
}

/* 결제금액 강조 */
.page-sub-view .sv-row--strong dd {
  font-size: 19px;
  font-weight: 800;
  color: var(--st-ink-900);
  font-variant-numeric: tabular-nums;
}

.page-sub-view .sv-won {
  margin-left: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--st-ink-600);
}

/* ---- 안내 ---- */
.page-sub-view .sv-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--st-ink-700);
  text-align: left;
  word-break: keep-all;
}

.page-sub-view .sv-note i {
  flex: none;
  margin-top: 3px;
  color: var(--st-brand-500);
}

/* ---- 버튼 ---- */
.page-sub-view .sv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.page-wrapper.page-sub-view .sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-sub-view .sv-btn--ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-800);
}

.page-wrapper.page-sub-view .sv-btn--ghost:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
  text-decoration: none;
}

.page-wrapper.page-sub-view .sv-btn--primary {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-wrapper.page-sub-view .sv-btn--primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
  text-decoration: none;
}

.page-sub-view .sv-btn i { font-size: 12px; }

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-sub-view .sv-card { padding: 18px 16px 6px; }
  .page-sub-view .sv-summary { padding: 14px 16px; }
  .page-sub-view .sv-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }
  .page-sub-view .sv-actions { flex-direction: column-reverse; }
  .page-wrapper.page-sub-view .sv-btn { width: 100%; }
}

/* ==========================================================================
   32. desk_id_list.php DESK ID 목록 전용 (Scoped: .page-idlist)
   --------------------------------------------------------------------------
   ID 가 1개일 때와 100개일 때를 함께 고려했습니다.
   - 1개 : 상태 칩 하나만 보여 담백하게(검색창은 숨김)
   - 100개 : 행 높이를 낮춰 한 화면에 많이 들어오고, 검색·상태 필터로 좁힙니다
   ========================================================================== */
.page-idlist .services-two {
  /* 제목 위아래가 답답해 보여 이 페이지만 여백을 조금 더 줍니다 */
  padding-top: calc(var(--st-section-y) + 14px) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-idlist .sec-title.centered {
  text-align: center;
  margin-bottom: 40px;
}

/* 템플릿의 제목 아래 여백이 눌려 있는 경우를 대비 */
.page-idlist .sec-title.centered .sec-title_heading {
  margin-bottom: 0;
}

.page-idlist .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- 도구 막대 ---- */
.page-idlist .dk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 18px;
}

.page-idlist .dk-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.page-idlist .dk-search {
  position: relative;
}

.page-idlist .dk-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-ink-400);
  font-size: 13px;
  pointer-events: none;
}

.page-wrapper.page-idlist .dk-search input {
  width: 240px;
  height: 38px;
  margin: 0;
  padding: 0 14px 0 34px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 13.5px;
  line-height: 38px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.page-wrapper.page-idlist .dk-search input:focus {
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}

.page-idlist .dk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 상태별 개수를 칩 안에 함께 표시합니다.
   (개수 카드를 따로 크게 두면 필터와 같은 정보가 두 번 나옵니다) */
.page-wrapper.page-idlist .dk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 13px;
  border-radius: var(--st-r-pill);
  border: 1px solid var(--st-ink-300);
  background: var(--st-white);
  color: var(--st-ink-700);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-idlist .dk-chip-n {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-100);
  color: var(--st-ink-700);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-idlist .dk-chip:hover {
  border-color: var(--st-ink-400);
}

/* 상태별 색은 표의 배지와 같은 계열로 맞춥니다 */
.page-wrapper.page-idlist .dk-chip--live .dk-chip-n { background: var(--st-brand-100); color: var(--st-brand-800); }
.page-wrapper.page-idlist .dk-chip--demo .dk-chip-n { background: #fbe6c4; color: #7a4c04; }

/* 선택된 칩 */
.page-wrapper.page-idlist .dk-chip.is-on {
  background: var(--st-ink-900);
  border-color: var(--st-ink-900);
  color: var(--st-white);
}

.page-wrapper.page-idlist .dk-chip.is-on .dk-chip-n {
  background: rgba(255, 255, 255, .22);
  color: var(--st-white);
}

.page-idlist .dk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- 버튼 ---- */
.page-wrapper.page-idlist .dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-idlist .dk-btn--ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-800);
}

.page-wrapper.page-idlist .dk-btn--ghost:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
}

.page-wrapper.page-idlist .dk-btn--primary {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-wrapper.page-idlist .dk-btn--primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}

.page-idlist .dk-btn i { font-size: 12.5px; }

/* 선택 개수 */
.page-idlist .dk-sel:not(:empty) {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: var(--st-r-pill);
  background: rgba(255, 255, 255, .24);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---- 표 ---- */
.page-idlist .dk-table-wrap {
  overflow-x: auto;
  border-radius: var(--st-r-lg);
  border: 1px solid var(--st-ink-200);
  background: var(--st-white);
  box-shadow: var(--st-shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.page-idlist .dk-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.page-idlist .dk-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 12px;
  background: var(--st-ink-100);
  border-bottom: 1px solid var(--st-ink-300);
  color: var(--st-ink-800);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

/* 행 높이를 낮춰 100개도 한 화면에 많이 들어오게 합니다 */
.page-idlist .dk-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--st-ink-200);
  color: var(--st-ink-800);
  vertical-align: middle;
  line-height: 1.5;
  white-space: nowrap;
}

.page-idlist .dk-table tbody tr:last-child td { border-bottom: 0; }
.page-idlist .dk-table tbody tr:hover td { background: var(--st-ink-050); }

.page-idlist .dk-row.is-picked td { background: var(--st-brand-50); }
.page-idlist .dk-row.is-picked:hover td { background: var(--st-brand-100); }

/* 만료 / 무료체험 행은 살짝 눌러서 구독중 행이 눈에 먼저 들어오게 */
.page-idlist .dk-row--end td { color: var(--st-ink-500); }
.page-idlist .dk-row--end .dk-c-id { color: var(--st-ink-600); }

.page-idlist .dk-c-chk  { width: 44px; }
.page-idlist .dk-c-id   { width: 150px; font-weight: 700; color: var(--st-ink-900); }
.page-idlist .dk-c-name { width: 110px; }
.page-idlist .dk-c-num  { width: 100px; font-variant-numeric: tabular-nums; }
.page-idlist .dk-c-role { width: 68px; }
.page-idlist .dk-c-grp  { width: 68px; font-variant-numeric: tabular-nums; }
.page-idlist .dk-c-date { width: 150px; font-variant-numeric: tabular-nums; color: var(--st-ink-700); }
.page-idlist .dk-c-st   { width: 96px; }
.page-idlist .dk-c-act  { width: 82px; text-align: right; }

/* ---- 체크박스 ---- */
.page-idlist .dk-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.page-wrapper.page-idlist .dk-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--st-brand-500);
  cursor: pointer;
}

.page-idlist .dk-nochk {
  color: var(--st-ink-300);
  font-weight: 700;
}

/* ---- 상태 배지 ---- */
.page-idlist .dk-st {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--st-r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.page-idlist .dk-st--live { background: var(--st-brand-100); border: 1px solid var(--st-brand-300); color: var(--st-brand-800); }
.page-idlist .dk-st--end  { background: var(--st-ink-200);   border: 1px solid var(--st-ink-300);   color: var(--st-ink-700); }
.page-idlist .dk-st--demo { background: #fbe6c4;             border: 1px solid #dfb970;             color: #7a4c04; }

/* ---- D-day ---- */
.page-idlist .dk-dday {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--st-r-pill);
  background: #fbe6c4;
  color: #7a4c04;
  font-size: 11.5px;
  font-weight: 800;
}

.page-idlist .dk-dday.is-over {
  background: #f7dcda;
  color: #a32d27;
}

/* ---- 설정 링크 ---- */
.page-wrapper.page-idlist .dk-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--st-r-sm);
  border: 1px solid var(--st-ink-300);
  background: var(--st-white);
  color: var(--st-ink-800);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-idlist .dk-view:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
  text-decoration: none;
}

.page-idlist .dk-view i { font-size: 9.5px; }

/* ---- 검색 결과 없음 / 안내 ---- */
.page-idlist .dk-nores {
  margin: 16px 0 0;
  padding: 26px 16px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
  color: var(--st-ink-600);
  font-size: 14px;
  text-align: center;
}

.page-idlist .dk-help {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 20px 0 0;
  padding: 12px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--st-ink-700);
  text-align: left;
  word-break: keep-all;
}

.page-idlist .dk-help i {
  flex: none;
  margin-top: 3px;
  color: var(--st-brand-500);
}

/* ---- ID 없음 ---- */
.page-idlist .dk-empty {
  padding: 54px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
  text-align: center;
}

.page-idlist .dk-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  color: var(--st-brand-500);
  font-size: 21px;
}

.page-idlist .dk-empty-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-800);
}

.page-idlist .dk-empty-text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--st-ink-600);
  word-break: keep-all;
}

/* ==========================================================================
   좁은 화면 : 표 → 카드
   ========================================================================== */
@media (max-width: 767px) {
  .page-idlist .dk-table-wrap {
    overflow-x: visible;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }

  .page-idlist .dk-table { min-width: 0; display: block; }

  .page-idlist .dk-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .page-idlist .dk-table tbody,
  .page-idlist .dk-table tr,
  .page-idlist .dk-table td {
    display: block;
    width: auto;
  }

  .page-idlist .dk-table tr {
    position: relative;
    margin-bottom: 10px;
    padding: 8px 14px 12px 44px;
    border-radius: var(--st-r-lg);
    background: var(--st-white);
    border: 1px solid var(--st-ink-200);
    box-shadow: var(--st-shadow-xs);
  }

  .page-idlist .dk-table td {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--st-ink-200);
    font-size: 13.5px;
    white-space: normal;
  }

  .page-idlist .dk-table tr td:last-child { border-bottom: 0; }
  .page-idlist .dk-table tbody tr:hover td { background: none; }
  .page-idlist .dk-row.is-picked td { background: none; }
  .page-idlist .dk-row.is-picked { border-color: var(--st-brand-500); box-shadow: 0 0 0 2px rgba(26,160,106,.14); }

  .page-idlist .dk-table td::before {
    content: attr(data-label);
    color: var(--st-ink-600);
    font-size: 12.5px;
    font-weight: 700;
  }

  .page-idlist .dk-table td > * { justify-self: start; }

  /* 체크박스는 카드 왼쪽 위에 고정 */
  .page-idlist .dk-table td.dk-c-chk {
    position: absolute;
    left: 14px;
    top: 12px;
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .page-idlist .dk-table td.dk-c-chk::before { content: none; }

  /* 설정 버튼은 카드 아래 가로 전체 */
  .page-idlist .dk-table td.dk-c-act {
    display: block;
    padding-top: 10px;
  }
  .page-idlist .dk-table td.dk-c-act::before { content: none; }
  .page-wrapper.page-idlist .dk-view {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 36px;
    font-size: 13.5px;
  }

  .page-idlist .dk-bar { flex-direction: column; align-items: stretch; }
  .page-idlist .dk-tools { align-items: stretch; }
  .page-wrapper.page-idlist .dk-search input { width: 100%; }
  .page-idlist .dk-actions { width: 100%; }
  .page-wrapper.page-idlist .dk-btn { flex: 1; }
  .page-idlist .dk-filters { width: 100%; }
}

/* ==========================================================================
   33. desk_id_modify.php DESK ID 설정 전용 (Scoped: .page-deskmod)
   --------------------------------------------------------------------------
   템플릿의 .default-form / .form-group / .shadowbox / .theme-btn 을 쓰지 않고
   전용 클래스(.dm2-*)로만 구성했습니다. (.dm-* 는 demoapply 가 쓰고 있습니다)
   ========================================================================== */
.page-deskmod .services-two {
  padding-top: calc(var(--st-section-y) + 14px) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-deskmod .sec-title.centered {
  text-align: center;
  margin-bottom: 34px;
}

.page-deskmod .dm2-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 상단 요약 ---- */
.page-deskmod .dm2-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
}

.page-deskmod .dm2-head-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.page-deskmod .dm2-head-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-deskmod .dm2-head-id {
  font-size: 19px;
  font-weight: 800;
  color: var(--st-ink-900);
  letter-spacing: -0.01em;
  word-break: break-all;
}

.page-deskmod .dm2-head-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-deskmod .dm2-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--st-r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.page-deskmod .dm2-tag--live  { background: var(--st-brand-100); border: 1px solid var(--st-brand-300); color: var(--st-brand-800); }
.page-deskmod .dm2-tag--end   { background: var(--st-ink-200);   border: 1px solid var(--st-ink-300);   color: var(--st-ink-700); }
.page-deskmod .dm2-tag--demo  { background: #fbe6c4;             border: 1px solid #dfb970;             color: #7a4c04; }
.page-deskmod .dm2-tag--plain { background: var(--st-white);     border: 1px solid var(--st-ink-200);   color: var(--st-ink-600); font-variant-numeric: tabular-nums; }

/* ---- 카드 ---- */
.page-deskmod .dm2-card {
  padding: 20px 22px 22px;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  box-shadow: var(--st-shadow-xs);
}

.page-deskmod .dm2-card + .dm2-card {
  margin-top: 14px;
}

.page-deskmod .dm2-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--st-ink-200);
}

.page-deskmod .dm2-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

.page-deskmod .dm2-card-note {
  font-size: 12.5px;
  color: var(--st-ink-500);
  word-break: keep-all;
}

.page-deskmod .dm2-card-note strong {
  color: var(--st-ink-700);
  font-weight: 700;
}

.page-deskmod .dm2-desc {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--st-ink-600);
  text-align: left;
  word-break: keep-all;
}

/* ---- 입력 ---- */
.page-deskmod .dm2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px 18px;
}

/* 5개 항목이 4열로 잡히면 마지막 줄에 1개만 남아 어색합니다 → 3열 */
.page-deskmod .dm2-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

.page-deskmod .dm2-field { min-width: 0; }

.page-deskmod .dm2-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-700);
  letter-spacing: -0.01em;
}

.page-deskmod .dm2-req {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-100);
  color: var(--st-ink-600);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.page-deskmod .dm2-input-wrap { position: relative; }

/* 템플릿/브라우저 기본 입력 스타일을 확실히 덮어씁니다 */
.page-wrapper.page-deskmod .dm2-input {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 14.5px;
  line-height: 46px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}

.page-wrapper.page-deskmod select.dm2-input {
  line-height: normal;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234d5a55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

.page-wrapper.page-deskmod .dm2-input::placeholder {
  color: var(--st-ink-400);
  font-size: 13.5px;
}

.page-wrapper.page-deskmod .dm2-input:focus {
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}

/* 읽기 전용 칸은 배경으로 구분 */
.page-wrapper.page-deskmod .dm2-input.is-locked {
  background: var(--st-ink-050);
  color: var(--st-ink-600);
  cursor: default;
}

.page-wrapper.page-deskmod .dm2-input.is-locked:focus {
  border-color: var(--st-ink-300);
  box-shadow: none;
}

.page-wrapper.page-deskmod .dm2-input-wrap .dm2-input {
  padding-right: 46px;
}

/* ---- 눈 / 복사 버튼 ---- */
.page-wrapper.page-deskmod .dm2-eye,
.page-wrapper.page-deskmod .dm2-copy {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-500);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-deskmod .dm2-eye:hover,
.page-wrapper.page-deskmod .dm2-copy:hover {
  background: var(--st-ink-100);
  color: var(--st-ink-800);
}

.page-wrapper.page-deskmod .dm2-copy.is-done {
  background: var(--st-brand-100);
  color: var(--st-brand-700);
}

/* ---- 입력칸 + 저장 버튼을 한 줄에 놓을 때 ----
   회사명(별칭)처럼 그 자리에서 바로 저장하는 칸에 씁니다.
   입력칸은 폭을 고정(280px)해서 짧게 두고, 저장 버튼이 그 바로 오른쪽에
   붙게 합니다. 칸이 좁아지면 입력칸만 줄어듭니다. */
.page-deskmod .dm2-inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.page-wrapper.page-deskmod .dm2-inline .dm2-input {
  flex: 0 1 280px;
  width: 280px;
  min-width: 0;
}

.page-wrapper.page-deskmod .dm2-inline .dm2-btn {
  flex: none;
  padding: 0 16px;
  font-size: 13.5px;
}

/* ---- 보조 문구 ---- */
.page-deskmod .dm2-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--st-ink-500);
  text-align: left;
  word-break: keep-all;
}

/* ---- DESK No 변경 ---- */
.page-deskmod .dm2-change {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--st-ink-200);
}

.page-deskmod .dm2-change .dm2-field {
  flex: 1 1 240px;
}

.page-deskmod .dm2-change-btns {
  display: flex;
  gap: 8px;
}

.page-deskmod .dm2-warn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: var(--st-r-md);
  background: #fdf3e3;
  border: 1px solid #e8cd9a;
  font-size: 13.5px;
  line-height: 1.65;
  color: #7a4c04;
  text-align: left;
  word-break: keep-all;
}

.page-deskmod .dm2-warn i {
  flex: none;
  margin-top: 3px;
}

.page-deskmod .dm2-warn strong { font-weight: 800; }

/* ---- 버튼 ---- */
.page-wrapper.page-deskmod .dm2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-deskmod .dm2-btn--ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-800);
}

.page-wrapper.page-deskmod .dm2-btn--ghost:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
  text-decoration: none;
}

.page-wrapper.page-deskmod .dm2-btn--primary {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-wrapper.page-deskmod .dm2-btn--primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}

.page-wrapper.page-deskmod .dm2-btn--danger {
  background: var(--st-white);
  border-color: #e6b3b1;
  color: #b0332e;
}

.page-wrapper.page-deskmod .dm2-btn--danger:hover {
  background: #fdeeec;
  border-color: #d98d8a;
  color: #8e2723;
}

.page-wrapper.page-deskmod .dm2-btn:disabled,
.page-wrapper.page-deskmod .dm2-btn.is-loading {
  opacity: .55;
  cursor: default;
}

/* DESK No 옆 버튼은 조금 작게 */
.page-wrapper.page-deskmod .dm2-change-btns .dm2-btn {
  height: 46px;
  padding: 0 16px;
  font-size: 13.5px;
}

.page-deskmod .dm2-btn i { font-size: 12px; }

/* ---- 하단 버튼 줄 ---- */
.page-deskmod .dm2-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}

.page-deskmod .dm2-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- 상단 요약 보조 ---- */
.page-deskmod .dm2-head-person {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--st-r-pill);
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  color: var(--st-ink-700);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 3px;
}

.page-deskmod .dm2-head-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--st-ink-500);
}

/* ---- 용어 안내 ---- */
.page-deskmod .dm2-glossary {
  padding: 14px 18px 16px;
  margin-bottom: 16px;
  border-radius: var(--st-r-lg);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
}

.page-deskmod .dm2-glossary-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-brand-800);
  text-align: left;
}

.page-deskmod .dm2-glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-deskmod .dm2-glossary-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.55;
}

.page-deskmod .dm2-glossary-list b {
  flex: none;
  min-width: 62px;
  padding: 2px 8px;
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  border: 1px solid var(--st-brand-200);
  color: var(--st-brand-800);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.page-deskmod .dm2-glossary-list span {
  font-size: 13px;
  color: var(--st-ink-700);
  word-break: keep-all;
}

.page-deskmod .dm2-glossary-list em {
  font-style: normal;
  font-weight: 700;
  color: var(--st-ink-900);
}

/* ---- 카드 머리 (번호 + 설명) ---- */
.page-deskmod .dm2-step {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 12.5px;
  font-weight: 800;
  vertical-align: 2px;
}

.page-deskmod .dm2-card-desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--st-ink-600);
  text-align: left;
  word-break: keep-all;
}

.page-deskmod .dm2-card-desc strong { color: var(--st-ink-900); font-weight: 700; }

.page-deskmod .dm2-card-desc a,
.page-deskmod .dm2-no-desc a {
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

/* ---- 카드 하단 저장 버튼 ---- */
.page-deskmod .dm2-card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--st-ink-200);
}

/* ---- DESK No 강조 ----
   번호판을 왼쪽, 설명을 오른쪽에 두고 세로 폭을 줄였습니다.
   라벨과 숫자를 한 줄에 넣어 박스 자체가 낮아지므로,
   오른쪽 설명글과 가운데 정렬이 자연스럽게 맞습니다. */
.page-deskmod .dm2-no {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
}

/* 번호판 : 흰 바탕 + 얇은 테두리, 라벨과 숫자가 한 줄 */
.page-deskmod .dm2-no-left {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  border: 1px solid var(--st-brand-300);
}

.page-deskmod .dm2-no-label {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-brand-700);
}

.page-deskmod .dm2-no-value {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--st-ink-900);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.page-deskmod .dm2-no-value.is-empty {
  font-size: 15px;
  font-weight: 700;
  color: var(--st-ink-400);
  letter-spacing: -0.01em;
}

.page-deskmod .dm2-no-desc {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--st-ink-700);
  text-align: left;
  word-break: keep-all;
}

/* ---- 전체 너비 필드 ---- */
.page-deskmod .dm2-field--full {
  margin-top: 16px;
}

/* ---- 접기 (DESK No 변경) ---- */
/* DESK No 변경 : 접혀 있어도 눈에 띄도록 브랜드 색을 씁니다 */
.page-deskmod .dm2-fold {
  margin-top: 18px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-brand-300);
  overflow: hidden;
}

.page-deskmod .dm2-fold-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-deskmod .dm2-fold-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 16px;
  background: var(--st-brand-50);
  color: var(--st-brand-800);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-deskmod .dm2-fold-head:hover {
  background: var(--st-brand-100);
}

/* 연필 아이콘을 원형 배지로 : 클릭할 수 있는 자리라는 게 바로 보입니다 */
.page-deskmod .dm2-fold-head > i:first-child {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 11px;
}

.page-deskmod .dm2-fold-arrow {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--st-white);
  border: 1px solid var(--st-brand-200);
  font-size: 10px;
  color: var(--st-brand-700);
  transition: transform var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

/* 펼쳤을 때는 머리 부분을 진하게 채워 지금 열려 있다는 걸 분명히 합니다 */
.page-deskmod .dm2-fold-toggle:checked + .dm2-fold-head {
  background: var(--st-brand-500);
  color: var(--st-white);
}

.page-deskmod .dm2-fold-toggle:checked + .dm2-fold-head:hover {
  background: var(--st-brand-600);
}

.page-deskmod .dm2-fold-toggle:checked + .dm2-fold-head > i:first-child {
  background: var(--st-white);
  color: var(--st-brand-600);
}

.page-deskmod .dm2-fold-toggle:checked + .dm2-fold-head .dm2-fold-arrow {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .45);
  color: var(--st-white);
}

.page-deskmod .dm2-fold-toggle:checked + .dm2-fold-head .dm2-fold-arrow {
  transform: rotate(180deg);
}

.page-deskmod .dm2-fold-toggle:focus-visible + .dm2-fold-head {
  outline: 2px solid var(--st-brand-500);
  outline-offset: -2px;
}

.page-deskmod .dm2-fold-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--st-dur) var(--st-ease);
}

.page-deskmod .dm2-fold-toggle:checked ~ .dm2-fold-body {
  grid-template-rows: 1fr;
}

.page-deskmod .dm2-fold-inner { overflow: hidden; }

.page-deskmod .dm2-fold-inner > .dm2-warn { margin: 16px 16px 0; }
.page-deskmod .dm2-fold-inner > .dm2-change { margin: 14px 16px 16px; padding-top: 0; border-top: 0; }

/* ---- 구독 정보 ---- */
.page-deskmod .dm2-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.page-deskmod .dm2-info > div {
  padding: 14px 16px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
}

.page-deskmod .dm2-info dt {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-deskmod .dm2-info dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  font-variant-numeric: tabular-nums;
}

.page-deskmod .dm2-dday {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--st-r-pill);
  background: #fbe6c4;
  color: #7a4c04;
  font-size: 11.5px;
  font-weight: 800;
  vertical-align: 2px;
}

.page-deskmod .dm2-dday.is-over { background: #f7dcda; color: #a32d27; }

/* ---- 위험 구역 ---- */
.page-deskmod .dm2-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--st-r-lg);
  background: #fdf6f5;
  border: 1px solid #e6b3b1;
}

.page-deskmod .dm2-danger-text { flex: 1 1 300px; min-width: 0; }

.page-deskmod .dm2-danger-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: #8e2723;
}

.page-deskmod .dm2-danger-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #a3564f;
  text-align: left;
  word-break: keep-all;
}

.page-deskmod .dm2-danger-desc strong { font-weight: 800; color: #8e2723; }

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-deskmod .dm2-card { padding: 18px 16px 20px; }
  .page-deskmod .dm2-grid,
  .page-deskmod .dm2-grid--3 { grid-template-columns: 1fr; gap: 14px; }
  .page-deskmod .dm2-change-btns { width: 100%; }
  .page-wrapper.page-deskmod .dm2-change-btns .dm2-btn { flex: 1; }
  .page-deskmod .dm2-actions { flex-direction: column; align-items: stretch; }
  .page-wrapper.page-deskmod .dm2-actions > .dm2-btn { width: 100%; }
  .page-deskmod .dm2-card-foot { flex-direction: column-reverse; }
  .page-wrapper.page-deskmod .dm2-card-foot .dm2-btn { width: 100%; }
  .page-deskmod .dm2-glossary-list { grid-template-columns: 1fr; }
  .page-deskmod .dm2-no-value { font-size: 21px; }
  .page-deskmod .dm2-no-left { width: 100%; justify-content: center; }
  .page-deskmod .dm2-info { grid-template-columns: 1fr; }
  .page-wrapper.page-deskmod .dm2-danger .dm2-btn { width: 100%; }
}

/* ==========================================================================
   34. shop_desk_pay.php 구독 결제 전용 (Scoped: .page-pay)
   --------------------------------------------------------------------------
   템플릿의 .default-form / .form-group / .shadowbox / .regist_table 을 쓰지 않고
   전용 클래스(.pay-*)로만 구성했습니다.
   ========================================================================== */
.page-pay .services-two {
  padding-top: calc(var(--st-section-y) + 10px) !important;
  /* 하단 고정 바에 가리지 않도록 여백을 둡니다 */
  padding-bottom: calc(var(--st-section-y) + 84px) !important;
  background: none !important;
}

.page-pay .sec-title.centered {
  text-align: center;
  margin-bottom: 32px;
}

.page-pay .pay-wrap {
  max-width: 820px;
  margin: 0 auto;
}

/* ---- 카드 ---- */
.page-pay .pay-card {
  padding: 20px 22px 22px;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  box-shadow: var(--st-shadow-xs);
}

.page-pay .pay-card + .pay-card {
  margin-top: 14px;
}

.page-pay .pay-card-head {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--st-ink-200);
}

.page-pay .pay-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

.page-pay .pay-step {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 12.5px;
  font-weight: 800;
  vertical-align: 2px;
}

/* ---- 항목 목록 ---- */
.page-pay .pay-list {
  margin: 0;
  padding: 0;
}

.page-pay .pay-list > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--st-border-soft);
}

.page-pay .pay-list > div:last-child { border-bottom: 0; }

.page-pay .pay-list dt {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-pay .pay-list dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  word-break: keep-all;
}

.page-pay .pay-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--st-ink-500);
}

.page-pay .pay-list-select { padding: 8px 0; }

/* 금액 목록 */
.page-pay .pay-list--price dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.page-pay .pay-list--price > div:not(.pay-total-row) dd {
  font-weight: 500;
  color: var(--st-ink-700);
}

.page-pay .pay-total-row {
  margin-top: 4px;
  padding: 14px 14px !important;
  border-bottom: 0 !important;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200) !important;
}

.page-pay .pay-total-row dt {
  color: var(--st-brand-800);
  font-size: 14.5px;
}

.page-pay .pay-total-row dd {
  font-size: 22px;
  font-weight: 800;
  color: var(--st-brand-700);
}

/* ---- 선택지(라디오 카드) ---- */
.page-pay .pay-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.page-pay .pay-choice--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.page-pay .pay-choice--sm { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 14px; }

.page-pay .pay-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 13px 15px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-ink-300);
  background: var(--st-white);
  cursor: pointer;
  transition: border-color var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
}

.page-pay .pay-opt:hover { border-color: var(--st-brand-300); }

.page-wrapper.page-pay .pay-radio {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--st-brand-500);
  cursor: pointer;
}

.page-pay .pay-opt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-pay .pay-opt-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-900);
}

.page-pay .pay-opt-name i { color: var(--st-brand-600); font-size: 13px; }

.page-pay .pay-opt-desc {
  font-size: 12.5px;
  color: var(--st-ink-500);
  word-break: keep-all;
}

/* 선택된 항목 강조 */
.page-pay .pay-opt:has(.pay-radio:checked) {
  border-color: var(--st-brand-500);
  background: var(--st-brand-50);
  box-shadow: 0 0 0 2px rgba(26, 160, 106, .12);
}

/* ---- 하위 블록 ---- */
.page-pay .pay-sub-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--st-ink-200);
}

.page-pay .pay-sub-title {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-800);
}

/* ---- 입력 ---- */
.page-pay .pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 16px;
}

.page-pay .pay-grid--3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.page-pay .pay-grid--addr { grid-template-columns: 1fr; margin-top: 14px; }

.page-pay .pay-field { min-width: 0; }

.page-pay .pay-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-700);
}

.page-wrapper.page-pay .pay-input {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 14.5px;
  line-height: 46px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.page-wrapper.page-pay select.pay-input {
  line-height: normal;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234d5a55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

.page-wrapper.page-pay input[type="date"].pay-input { line-height: normal; }

.page-wrapper.page-pay .pay-input::placeholder {
  color: var(--st-ink-400);
  font-size: 13.5px;
}

.page-wrapper.page-pay .pay-input:focus {
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}

.page-wrapper.page-pay .pay-input.is-locked {
  background: var(--st-ink-050);
  color: var(--st-ink-600);
  cursor: default;
}

.page-pay .pay-zip {
  display: flex;
  gap: 8px;
}

.page-pay .pay-zip .pay-input { flex: 1 1 auto; }

/* ---- 안내 ---- */
.page-pay .pay-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 12px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--st-ink-700);
  text-align: left;
  word-break: keep-all;
}

.page-pay .pay-note i { flex: none; margin-top: 4px; color: var(--st-brand-500); }
.page-pay .pay-note strong { color: var(--st-ink-900); font-weight: 700; }
.page-pay .pay-em { color: #b0332e !important; }

/* ---- 약관 ---- */
.page-pay .pay-agreement {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-ink-200) !important;
  background: var(--st-ink-050);
}

.page-pay .pay-agree {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink-800);
  cursor: pointer;
}

.page-wrapper.page-pay .pay-agree input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--st-brand-500);
  cursor: pointer;
}

/* ---- 하단 고정 바 ---- */
.page-pay .pay-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 0;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--st-ink-200);
  box-shadow: 0 -6px 20px rgba(11, 67, 48, .07);
  backdrop-filter: blur(6px);
}

.page-pay .pay-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.page-pay .pay-bar-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-pay .pay-bar-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-pay .pay-bar-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--st-brand-700);
  font-variant-numeric: tabular-nums;
}

.page-pay .pay-bar-btns {
  display: flex;
  gap: 8px;
}

/* ---- 버튼 ---- */
.page-wrapper.page-pay .pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-pay .pay-btn--ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-800);
}

.page-wrapper.page-pay .pay-btn--ghost:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
}

.page-wrapper.page-pay .pay-btn--primary {
  min-width: 160px;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-wrapper.page-pay .pay-btn--primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
}

.page-wrapper.page-pay .pay-btn:disabled,
.page-wrapper.page-pay .pay-btn.is-loading {
  background: var(--st-ink-300);
  border-color: var(--st-ink-300);
  color: var(--st-white);
  cursor: default;
}

/* 우편번호 옆 버튼은 입력칸 높이에 맞춥니다 */
.page-wrapper.page-pay .pay-zip .pay-btn {
  flex: none;
  height: 46px;
  padding: 0 16px;
  font-size: 13.5px;
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-pay .pay-card { padding: 18px 16px 20px; }
  .page-pay .pay-list > div { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
  .page-pay .pay-grid,
  .page-pay .pay-grid--3 { grid-template-columns: 1fr; }
  .page-pay .pay-choice,
  .page-pay .pay-choice--3,
  .page-pay .pay-choice--sm { grid-template-columns: 1fr; }
  .page-pay .pay-total-row dd { font-size: 19px; }
  .page-pay .pay-bar-inner { flex-direction: column; align-items: stretch; }
  .page-pay .pay-bar-total { justify-content: space-between; }
  .page-pay .pay-bar-btns { width: 100%; }
  .page-wrapper.page-pay .pay-bar-btns .pay-btn { flex: 1; min-width: 0; padding: 0 12px; }
  .page-pay .services-two { padding-bottom: calc(var(--st-section-y) + 130px) !important; }
  .page-pay .pay-agreement { height: 180px; }
}

/* ==========================================================================
   35. result_pay_cash_view.php 구독 신청 완료 전용 (Scoped: .page-payok)
   --------------------------------------------------------------------------
   이 화면에서 고객이 해야 할 일은 "계좌로 입금" 하나뿐입니다.
   기존에는 표 안에 묻혀 있어 맨 위로 끌어올렸습니다.
   ========================================================================== */
.page-payok .services-two {
  padding-top: calc(var(--st-section-y) + 10px) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-payok .sec-title.centered {
  text-align: center;
  margin-bottom: 26px;
}

.page-payok .po-wrap {
  max-width: 720px;
  margin: 0 auto;
}

/* ---- 완료 안내 ---- */
.page-payok .po-head {
  text-align: center;
  margin-bottom: 20px;
}

.page-payok .po-check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 23px;
  box-shadow: 0 0 0 7px var(--st-brand-50);
}

.page-payok .po-head-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.page-payok .po-head-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--st-ink-600);
  text-align: center;
  word-break: keep-all;
}

/* ---- 입금 안내 (가장 중요한 영역) ---- */
.page-payok .po-deposit {
  padding: 20px 22px 18px;
  margin-bottom: 16px;
  border-radius: var(--st-r-lg);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-300);
}

.page-payok .po-deposit-row { margin-bottom: 14px; }

.page-payok .po-deposit-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--st-brand-700);
}

.page-payok .po-deposit-acc {
  display: flex;
  gap: 8px;
}

.page-wrapper.page-payok .po-deposit-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--st-brand-200);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 48px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.page-wrapper.page-payok .po-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--st-r-md);
  border: 1px solid var(--st-brand-500);
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-payok .po-copy:hover { background: var(--st-brand-600); }
.page-wrapper.page-payok .po-copy.is-done { background: var(--st-brand-700); border-color: var(--st-brand-700); }

.page-payok .po-deposit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--st-brand-200);
}

.page-payok .po-deposit-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--st-ink-900);
}

.page-payok .po-deposit-amount {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--st-brand-700);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.page-payok .po-deposit-amount em {
  margin-left: 2px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.page-payok .po-deposit-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: var(--st-r-md);
  background: #fdf3e3;
  border: 1px solid #e8cd9a;
  font-size: 13px;
  line-height: 1.6;
  color: #7a4c04;
  text-align: left;
  word-break: keep-all;
}

.page-payok .po-deposit-warn i { flex: none; margin-top: 3px; }
.page-payok .po-deposit-warn strong { font-weight: 800; }

/* ---- 카드 ---- */
.page-payok .po-card {
  padding: 18px 22px 20px;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  box-shadow: var(--st-shadow-xs);
}

.page-payok .po-card + .po-card { margin-top: 14px; }

.page-payok .po-card-title {
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--st-ink-200);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

.page-payok .po-list { margin: 0; padding: 0; }

.page-payok .po-list > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--st-border-soft);
}

.page-payok .po-list > div:last-child { border-bottom: 0; }

.page-payok .po-list dt {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-payok .po-list dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--st-ink-900);
  word-break: break-all;
}

.page-payok .po-mono { font-variant-numeric: tabular-nums; font-weight: 700; }
.page-payok .po-sub { font-size: 12.5px; color: var(--st-ink-500); font-weight: 500; }

.page-payok .po-row--strong dd {
  font-size: 19px;
  font-weight: 800;
  color: var(--st-brand-700);
  font-variant-numeric: tabular-nums;
}

.page-payok .po-won {
  margin-left: 2px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  color: var(--st-ink-600);
}

/* ---- 다음 할 일 ---- */
.page-payok .po-next {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--st-ink-200);
}

.page-payok .po-next-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink-700);
  text-align: center;
}

.page-payok .po-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.page-wrapper.page-payok .po-next-item {
  display: block;
  padding: 15px 16px 13px;
  border-radius: var(--st-r-md);
  background: var(--st-white);
  border: 1px solid var(--st-ink-200);
  color: inherit;
  text-decoration: none;
  transition: transform var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}

.page-wrapper.page-payok .po-next-item:hover {
  transform: translateY(-2px);
  border-color: var(--st-brand-300);
  box-shadow: var(--st-shadow-sm);
  color: inherit;
  text-decoration: none;
}

.page-payok .po-next-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 9px;
  border-radius: var(--st-r-sm);
  background: var(--st-brand-50);
  color: var(--st-brand-600);
  font-size: 14px;
}

.page-payok .po-next-name {
  display: block;
  margin-bottom: 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-900);
}

.page-payok .po-next-desc {
  display: block;
  font-size: 12.5px;
  color: var(--st-ink-500);
}

/* ---- 버튼 ---- */
.page-payok .po-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.page-wrapper.page-payok .po-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-payok .po-btn--ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-800);
}

.page-wrapper.page-payok .po-btn--ghost:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
  text-decoration: none;
}

.page-wrapper.page-payok .po-btn--primary {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-wrapper.page-payok .po-btn--primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
  text-decoration: none;
}

.page-payok .po-btn i { font-size: 11px; }

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-payok .po-deposit { padding: 18px 16px 16px; }
  .page-payok .po-card { padding: 16px 16px 18px; }
  .page-payok .po-list > div { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .page-payok .po-deposit-acc { flex-direction: column; }
  .page-wrapper.page-payok .po-copy { width: 100%; justify-content: center; }
  .page-payok .po-next-grid { grid-template-columns: 1fr; }
  .page-payok .po-actions { flex-direction: column-reverse; }
  .page-wrapper.page-payok .po-btn { width: 100%; }
}

/* ==========================================================================
   36. subscribe.php 구독 신청(상품) 전용 (Scoped: .page-buy)
   ========================================================================== */
.page-buy .services-two.subscribe {
  padding-top: calc(var(--st-section-y) + 10px) !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-buy .services-five.subscribe1 {
  padding-top: 0 !important;
  padding-bottom: var(--st-section-y) !important;
  background: none !important;
}

.page-buy .sec-title.centered {
  text-align: center;
  margin-bottom: 30px;
}

/* ---- 상단 : 제품 + 주문 ---- */
/* 이미지가 너무 커서 주문 영역이 밀렸습니다.
   이미지 칸을 줄이고 주문 칸을 넓혔습니다. */
.page-buy .buy-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
  gap: 22px;
  align-items: start;
}

/* ---- 제품 ---- */
.page-buy .buy-visual {
  /* 옆 주문 카드와 같은 높이가 되도록 늘립니다.
     (컨테이너는 align-items:start 이므로 이 항목만 stretch 로 지정) */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: var(--st-r-lg);
  /* 흰 바탕에 연한 회색 테두리라 배경(#f7f7f7)과 구분이 거의 안 됐습니다.
     연한 초록 그라데이션 + 진한 테두리로 또렷하게 만들었습니다. */
  background: linear-gradient(170deg, var(--st-brand-100) 0%, var(--st-brand-50) 42%, var(--st-white) 100%);
  border: 1px solid var(--st-brand-300);
  box-shadow: var(--st-shadow-sm);
}

.page-buy .buy-visual img {
  display: block;
  width: auto;
  max-width: 100%;
  /* 세로로 긴 목업 이미지라 높이를 묶어 둡니다 */
  max-height: 340px;
  height: auto;
  /* margin:auto → 남는 세로 공간을 위아래로 나눠 가운데 배치 */
  margin: auto;
  object-fit: contain;
  border-radius: var(--st-r-md);
}

.page-buy .buy-points {
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 9px 16px;
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--st-brand-200);
}

.page-buy .buy-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--st-ink-800);
  word-break: keep-all;
}

.page-buy .buy-points i {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 9.5px;
}

.page-buy .buy-points strong { color: var(--st-ink-900); font-weight: 700; }

/* ---- 주문 요약 ---- */
.page-buy .buy-order {
  position: sticky;
  top: 20px;
}

.page-buy .buy-order-inner {
  padding: 22px;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-ink-300);
  box-shadow: var(--st-shadow-md);
}

.page-buy .buy-fee {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--st-ink-200);
}

.page-buy .buy-fee-label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink-600);
}

.page-buy .buy-fee-value {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--st-brand-700);
  font-variant-numeric: tabular-nums;
}

.page-buy .buy-fee-note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--st-ink-600);
}

.page-buy .buy-fee-note s { color: var(--st-ink-400); }

.page-buy .buy-fee-note b {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--st-r-pill);
  background: #fbe6c4;
  color: #7a4c04;
  font-size: 13px;
  font-weight: 800;
}

.page-buy .buy-field { margin-bottom: 16px; }

.page-buy .buy-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-800);
}

.page-wrapper.page-buy .buy-input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 34px 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234d5a55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  box-shadow: none;
  color: var(--st-ink-900);
  font-size: 15.5px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.page-wrapper.page-buy .buy-input:focus {
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}

.page-buy .buy-hint {
  margin: 7px 0 0;
  font-size: 13.5px;
  color: var(--st-ink-600);
  text-align: left;
}

/* ---- 합계 ---- */
.page-buy .buy-sum {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--st-ink-200);
}

.page-buy .buy-sum > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}

.page-buy .buy-sum dt {
  margin: 0;
  font-size: 14.5px;
  color: var(--st-ink-700);
}

.page-buy .buy-sum dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  font-variant-numeric: tabular-nums;
}

.page-buy .buy-sum-total {
  margin-top: 6px;
  padding: 13px 14px !important;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
}

.page-buy .buy-sum-total dt { font-size: 15.5px; font-weight: 700; color: var(--st-brand-800); }
.page-buy .buy-sum-total dd { font-size: 24px; font-weight: 800; color: var(--st-brand-700); }

/* ---- 버튼 ---- */
.page-buy .buy-btns {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.page-wrapper.page-buy .buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--st-r-md);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-buy .buy-btn--ghost {
  flex: none;
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-700);
}

.page-wrapper.page-buy .buy-btn--ghost:hover {
  border-color: var(--st-ink-400);
  color: var(--st-ink-900);
}

.page-wrapper.page-buy .buy-btn--primary {
  flex: 1;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}

.page-wrapper.page-buy .buy-btn--primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
}

.page-buy .buy-btn i { font-size: 11px; }

.page-buy .buy-foot-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--st-ink-500);
  text-align: center;
  word-break: keep-all;
}

.page-buy .buy-foot-note a {
  color: var(--st-brand-600);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--st-brand-200);
}

/* ==========================================================================
   탭 (자바스크립트 없이 동작)
   ========================================================================== */
.page-buy .buy-tabs { margin-top: 30px; }

.page-buy .buy-tab-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-buy .buy-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: -1px;
}

.page-buy .buy-tab-nav label {
  margin: 0;
  padding: 12px 22px;
  border: 1px solid var(--st-ink-300);
  border-bottom-color: transparent;
  border-radius: var(--st-r-md) var(--st-r-md) 0 0;
  background: var(--st-ink-050);
  color: var(--st-ink-600);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}

.page-buy .buy-tab-nav label:hover { background: var(--st-ink-100); }

.page-buy .buy-tab-panels {
  padding: 24px 26px 26px;
  border-radius: 0 var(--st-r-lg) var(--st-r-lg) var(--st-r-lg);
  background: var(--st-white);
  border: 1px solid var(--st-ink-300);
  box-shadow: var(--st-shadow-sm);
}

.page-buy .buy-panel { display: none; }

/* 선택된 탭 */
#tabIntro:checked ~ .buy-tab-nav label[for="tabIntro"],
#tabFeat:checked ~ .buy-tab-nav label[for="tabFeat"] {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  border-bottom-color: var(--st-white);
  color: var(--st-brand-700);
}

#tabIntro:checked ~ .buy-tab-panels .buy-panel--intro,
#tabFeat:checked ~ .buy-tab-panels .buy-panel--feat { display: block; }

.page-buy .buy-tab-radio:focus-visible ~ .buy-tab-nav label {
  outline: 2px solid var(--st-brand-500);
  outline-offset: 2px;
}

.page-buy .buy-panel-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--st-ink-900);
  letter-spacing: -0.02em;
}

.page-buy .buy-panel-lead {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--st-ink-700);
  text-align: left;
  word-break: keep-all;
}

.page-buy .buy-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-buy .buy-panel-list li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--st-ink-700);
  word-break: keep-all;
}

.page-buy .buy-panel-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-brand-400);
}

/* ---- 자료 ---- */
.page-buy .buy-docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  border: 1px solid var(--st-ink-200);
}

.page-buy .buy-docs-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-700);
}

.page-wrapper.page-buy .buy-docs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--st-r-pill);
  background: var(--st-white);
  border: 1px solid var(--st-ink-300);
  color: var(--st-ink-800);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
}

.page-wrapper.page-buy .buy-docs a:hover {
  border-color: var(--st-brand-300);
  background: var(--st-brand-50);
  color: var(--st-brand-800);
}

.page-buy .buy-docs i { color: #c0392b; font-size: 13px; }

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .page-buy .buy-top { grid-template-columns: 1fr; }
  .page-buy .buy-order { position: static; }
}

@media (max-width: 991px) {
  /* 한 줄로 쌓일 때는 이미지를 더 낮춥니다 */
  .page-buy .buy-visual { align-self: auto; }
  .page-buy .buy-visual img { max-height: 270px; }
}

@media (max-width: 575px) {
  .page-buy .buy-visual { padding: 14px; }
  .page-buy .buy-visual img { max-height: 220px; }
  .page-buy .buy-order-inner { padding: 18px 16px; }
  .page-buy .buy-tab-panels { padding: 20px 16px 22px; }
  .page-buy .buy-tab-nav label { flex: 1; text-align: center; padding: 11px 12px; font-size: 13.5px; }
  .page-buy .buy-fee-value { font-size: 30px; }
}

/* ==========================================================================
   37. join_upd.php 회원정보 수정 전용 (Scoped: .page-mypage)
   --------------------------------------------------------------------------
   좌: 입력 폼 카드 / 우: 안내·계정관리 패널
   템플릿의 .default-form / .form-control 클래스에 의존하지 않도록
   입력 요소는 전부 .mm-input 으로 직접 그립니다.
   ========================================================================== */

.page-mypage .mm-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-mypage .mm-head {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}
.page-mypage .mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-300);
  color: var(--st-brand-700);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.page-mypage .mm-eyebrow i { font-size: 12px; }
.page-mypage .mm-head h2 {
  margin: 14px 0 8px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--st-ink-900);
}
.page-mypage .mm-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 레이아웃 ----
   ※ 오른쪽 안내 패널이 아래로 밀려 내려가지 않도록
      두 칸의 행/열 위치를 명시적으로 고정합니다.
      (템플릿의 다른 CSS가 align-items 를 건드려도 영향받지 않습니다) */
.page-mypage .mm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto;
  gap: 22px;
  align-items: start;
  align-content: start;
  max-width: 1060px;
  margin: 0 auto;
}
.page-mypage .mm-layout > .mm-card {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
.page-mypage .mm-layout > .mm-aside {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 96px;   /* 스크롤해도 안내 패널이 화면에 따라옵니다 */
}

/* grid 를 지원하지 않는 아주 오래된 브라우저용 폴백 */
@supports not (display: grid) {
  .page-mypage .mm-layout::after { content: ""; display: block; clear: both; }
  .page-mypage .mm-layout > .mm-aside { float: right; width: 320px; position: static; }
  .page-mypage .mm-layout > .mm-card { float: left; width: calc(100% - 342px); }
}

/* ---- 좌측 카드 ---- */
.page-mypage .mm-card {
  padding: 30px 30px 26px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-mypage .mm-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--st-ink-200);
  font-size: 17px;
  font-weight: 800;
  color: var(--st-ink-900);
  line-height: 1.4;
}
.page-mypage .mm-card-title i { color: var(--st-brand-500); font-size: 15px; }

/* ---- 아이디(변경 불가) ---- */
.page-mypage .mm-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--st-brand-200);
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
}
.page-mypage .mm-account-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 14px;
}
.page-mypage .mm-account-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-mypage .mm-account-txt em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--st-brand-700);
}
.page-mypage .mm-account-txt strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--st-ink-900);
  word-break: break-all;
}
.page-mypage .mm-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--st-r-pill);
  background: var(--st-white);
  border: 1px solid var(--st-ink-300);
  color: var(--st-ink-500);
  font-size: 11.5px;
  font-weight: 700;
}
.page-mypage .mm-lock i { font-size: 10px; }

/* ---- 입력 필드 ---- */
.page-mypage .mm-field { margin-bottom: 17px; }
.page-mypage .mm-field:last-child { margin-bottom: 0; }

.page-mypage .mm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-800);
  line-height: 1.4;
}
.page-mypage .mm-req { color: #d94a3d; font-weight: 800; }

.page-mypage .mm-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-ink-900);
  font-family: var(--st-font);
  font-size: 14.5px;
  line-height: 46px;
  transition: border-color var(--st-dur) var(--st-ease), box-shadow var(--st-dur) var(--st-ease);
}
.page-mypage .mm-input::placeholder { color: var(--st-ink-400); }
.page-mypage .mm-input:focus {
  outline: none;
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .16);
}

/* 휴대폰 입력 + 인증 버튼 */
.page-mypage .mm-inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.page-mypage .mm-inline .mm-input { flex: 1 1 auto; min-width: 0; }
.page-mypage .mm-verify-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--st-brand-500);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-brand-600);
  font-family: var(--st-font);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-mypage .mm-verify-btn:hover {
  background: var(--st-brand-500);
  color: var(--st-white);
}
.page-mypage .mm-verify-btn i { font-size: 13px; }

/* 인증 상태 배지 */
.page-mypage .mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--st-r-pill);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.page-mypage .mm-badge i { font-size: 10px; }
.page-mypage .mm-badge--done {
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-300);
  color: var(--st-brand-700);
}
.page-mypage .mm-badge--wait {
  background: #fdf3e3;
  border: 1px solid #f0c987;
  color: #a2621a;
}

.page-mypage .mm-help {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--st-ink-500);
}

/* ---- 본인 확인 섹션 ---- */
.page-mypage .mm-section {
  margin-top: 24px;
  padding: 20px 20px 18px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
}
.page-mypage .mm-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--st-ink-900);
  line-height: 1.4;
}
.page-mypage .mm-section-title i { color: var(--st-brand-500); font-size: 13px; }
.page-mypage .mm-section-desc {
  margin: 0 0 15px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--st-ink-600);
}

/* 비밀번호 보기 토글 */
.page-mypage .mm-pw-box { position: relative; }
.page-mypage .mm-pw-box .mm-input { padding-right: 46px; }
.page-mypage .mm-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-500);
  font-size: 14px;
  cursor: pointer;
}
.page-mypage .mm-eye:hover { background: var(--st-ink-100); color: var(--st-ink-800); }

/* ---- 버튼 ---- */
.page-mypage .mm-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--st-ink-200);
}
.page-wrapper.page-mypage .mm-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-mypage .mm-btn-primary {
  flex: 1.6 1 0;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-wrapper.page-mypage .mm-btn-primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}
.page-wrapper.page-mypage .mm-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-600);
}
.page-wrapper.page-mypage .mm-btn-ghost:hover {
  background: var(--st-ink-100);
  border-color: var(--st-ink-400);
  color: var(--st-ink-800);
}
.page-wrapper.page-mypage .mm-btn[disabled],
.page-wrapper.page-mypage .mm-btn.is-loading {
  opacity: .62;
  cursor: not-allowed;
}

/* ---- 우측 안내 패널 ---- */
.page-mypage .mm-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-mypage .mm-panel {
  padding: 20px 20px 18px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-xs);
}
.page-mypage .mm-panel h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--st-ink-900);
  line-height: 1.4;
}
.page-mypage .mm-panel h4 i { color: var(--st-brand-500); font-size: 13px; }

.page-mypage .mm-list { margin: 0; padding: 0; list-style: none; }
.page-mypage .mm-list li {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--st-ink-600);
}
.page-mypage .mm-list li i {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--st-brand-500);
}

.page-wrapper.page-mypage .mm-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 34px 12px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  color: var(--st-ink-700);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-mypage .mm-link:last-child { margin-bottom: 0; }
.page-wrapper.page-mypage .mm-link:hover {
  background: var(--st-brand-50);
  border-color: var(--st-brand-300);
  color: var(--st-brand-700);
}
.page-mypage .mm-link-arrow {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--st-ink-400);
}
.page-wrapper.page-mypage .mm-link--danger { color: #a33a2e; }
.page-wrapper.page-mypage .mm-link--danger:hover {
  background: #fdf1ef;
  border-color: #eeb6ad;
  color: #8f2f24;
}

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .page-mypage .mm-layout { grid-template-columns: 1fr; }
  /* 좁은 화면에서는 위/아래 한 줄씩으로 되돌립니다 */
  .page-mypage .mm-layout > .mm-card  { grid-column: 1; grid-row: 1; }
  .page-mypage .mm-layout > .mm-aside { grid-column: 1; grid-row: 2; position: static; }
  .page-mypage .mm-aside { flex-direction: row; flex-wrap: wrap; }
  .page-mypage .mm-panel { flex: 1 1 260px; }
}
@media (max-width: 575px) {
  .page-mypage .mm-card { padding: 22px 17px 20px; }
  .page-mypage .mm-account { flex-wrap: wrap; }
  .page-mypage .mm-lock { order: 3; }
  .page-mypage .mm-inline { flex-direction: column; }
  .page-mypage .mm-verify-btn { justify-content: center; }
  .page-mypage .mm-actions { flex-direction: column-reverse; }
  .page-wrapper.page-mypage .mm-btn { flex: 0 0 auto; width: 100%; }
  .page-mypage .mm-aside { flex-direction: column; }
}

/* ==========================================================================
   38. result-join-upd.php 회원정보 수정 완료 전용 (Scoped: .page-mmdone)
   ========================================================================== */

.page-mmdone .rj-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

.page-mmdone .rj-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-xl);
  background: var(--st-white);
  box-shadow: var(--st-shadow-md);
  text-align: center;
}

/* ---- 완료 표시 ---- */
/* .rj-hero 는 묶음용 컨테이너입니다(따로 꾸미지 않습니다) */
.page-mmdone .rj-hero { margin: 0; }
.page-mmdone .rj-figure {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
}
.page-mmdone .rj-figure img {
  display: block;
  width: 150px;
  height: auto;
}
.page-mmdone .rj-check {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--st-brand-500);
  border: 3px solid var(--st-white);
  color: var(--st-white);
  font-size: 17px;
  box-shadow: var(--st-shadow-sm);
}

.page-mmdone .rj-title {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--st-ink-900);
}
.page-mmdone .rj-sub {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 저장된 내용 ---- */
.page-mmdone .rj-list {
  margin: 0;
  padding: 4px 0;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-ink-050);
  text-align: left;
}
.page-mmdone .rj-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--st-ink-200);
}
.page-mmdone .rj-row:last-child { border-bottom: 0; }

.page-mmdone .rj-row dt {
  flex: 0 0 122px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-500);
}
.page-mmdone .rj-row dt i {
  width: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--st-brand-500);
}
.page-mmdone .rj-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-900);
  word-break: break-all;
}
.page-mmdone .rj-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--st-r-pill);
  background: var(--st-white);
  border: 1px solid var(--st-ink-300);
  color: var(--st-ink-500);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

.page-mmdone .rj-note {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
  color: var(--st-brand-800);
  font-size: 12.5px;
  line-height: 1.65;
  text-align: left;
}
.page-mmdone .rj-note i { margin-top: 3px; flex: 0 0 auto; color: var(--st-brand-500); }
.page-mmdone .rj-note span { flex: 1 1 auto; min-width: 0; }

/* 경고성 안내 (임시 비밀번호 발급 등) — 초록이 아니라 주의색으로 */
.page-mmdone .rj-note--warn {
  background: #fdf3e3;
  border-color: #f0c987;
  color: #8a5a1c;
}
.page-mmdone .rj-note--warn i { color: #d19a3f; }
.page-mmdone .rj-note--warn b { color: #7a4a12; font-weight: 800; }

/* 안내 바로 아래에 목록이 오면 붙어 보이므로 간격을 둡니다 */
.page-mmdone .rj-note + .rj-list { margin-top: 14px; }
.page-mmdone .rj-note b { font-weight: 800; }

/* ---- 결과 아이콘 배지 ----
   그림 없이 상태만 보여주는 화면(아이디 찾기 결과 등)에서 씁니다. */
.page-mmdone .rj-badge {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
}
.page-mmdone .rj-badge--ok {
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-300);
  color: var(--st-brand-600);
}
.page-mmdone .rj-badge--warn {
  background: #fdf3e3;
  border: 1px solid #f0c987;
  color: #a2621a;
}
.page-mmdone .rj-badge--bad {
  background: #fdeeec;
  border: 1px solid #eeb6ad;
  color: #c0392b;
}

/* ---- 중립 변형(.is-neutral) ----
   회원탈퇴 완료처럼 축하할 일이 아닌 화면에서는 초록 체크를 회색으로 */
.page-mmdone.is-neutral .rj-check {
  background: var(--st-ink-400);
}
.page-mmdone.is-neutral .rj-note {
  background: var(--st-ink-050);
  border-color: var(--st-ink-200);
  color: var(--st-ink-700);
}
.page-mmdone.is-neutral .rj-note i { color: var(--st-ink-500); }

/* ---- 연락처 한 줄 ---- */
.page-mmdone .rj-contact {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--st-ink-500);
}
.page-wrapper.page-mmdone .rj-contact a {
  color: var(--st-brand-600);
  font-weight: 800;
  text-decoration: none;
}
.page-wrapper.page-mmdone .rj-contact a:hover { text-decoration: underline; }

/* ---- 다음 동작 ---- */
.page-mmdone .rj-actions {
  display: flex;
  gap: 9px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--st-ink-200);
}
.page-wrapper.page-mmdone .rj-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 50px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-mmdone .rj-btn i { font-size: 13px; }
.page-wrapper.page-mmdone .rj-btn-primary {
  flex: 1.3 1 0;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-wrapper.page-mmdone .rj-btn-primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}
.page-wrapper.page-mmdone .rj-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-600);
}
.page-wrapper.page-mmdone .rj-btn-ghost:hover {
  background: var(--st-ink-100);
  border-color: var(--st-ink-400);
  color: var(--st-ink-800);
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-mmdone .rj-card { padding: 26px 18px 22px; border-radius: var(--st-r-lg); }
  .page-mmdone .rj-figure img { width: 118px; }
  .page-mmdone .rj-check { width: 38px; height: 38px; font-size: 15px; }
  .page-mmdone .rj-row { flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 15px; }
  .page-mmdone .rj-row dt { flex: 0 0 auto; }
  .page-mmdone .rj-actions { flex-direction: column; }
  .page-wrapper.page-mmdone .rj-btn { flex: 0 0 auto; width: 100%; }
}

/* ==========================================================================
   39. join_passwd_upd.php 비밀번호 변경 전용 (Scoped: .page-pwchg)
   ========================================================================== */

.page-pwchg .pw-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-pwchg .pw-head {
  max-width: 620px;
  margin: 0 auto 26px;
  text-align: center;
}
.page-pwchg .pw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-300);
  color: var(--st-brand-700);
  font-size: 12.5px;
  font-weight: 700;
}
.page-pwchg .pw-eyebrow i { font-size: 12px; }
.page-pwchg .pw-head h2 {
  margin: 14px 0 8px;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--st-ink-900);
}
.page-pwchg .pw-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 카드 ---- */
.page-pwchg .pw-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 30px 26px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}

/* ---- 필드 ---- */
.page-pwchg .pw-field { margin-bottom: 18px; }
.page-pwchg .pw-field:last-of-type { margin-bottom: 0; }

.page-pwchg .pw-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-800);
}
.page-pwchg .pw-req { color: #d94a3d; font-weight: 800; }

.page-pwchg .pw-box { position: relative; }
.page-pwchg .pw-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 46px 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-ink-900);
  font-family: var(--st-font);
  font-size: 14.5px;
  transition: border-color var(--st-dur) var(--st-ease), box-shadow var(--st-dur) var(--st-ease);
}
.page-pwchg .pw-input::placeholder { color: var(--st-ink-400); }
.page-pwchg .pw-input:focus {
  outline: none;
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .16);
}
.page-pwchg .pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-500);
  font-size: 14px;
  cursor: pointer;
}
.page-pwchg .pw-eye:hover { background: var(--st-ink-100); color: var(--st-ink-800); }

.page-pwchg .pw-err {
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.5;
}
.page-pwchg .pw-err:empty { display: none; }

/* ---- 구분선 ---- */
.page-pwchg .pw-divider {
  position: relative;
  margin: 24px 0 20px;
  text-align: center;
}
.page-pwchg .pw-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--st-ink-200);
}
.page-pwchg .pw-divider span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: var(--st-white);
  color: var(--st-ink-500);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ---- 규칙 체크리스트 ---- */
.page-pwchg .pw-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  padding: 11px 14px;
  list-style: none;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
}
.page-pwchg .pw-rules li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-ink-500);
  transition: color var(--st-dur) var(--st-ease);
}
.page-pwchg .pw-rules li i {
  font-size: 6px;
  color: var(--st-ink-300);
  transition: color var(--st-dur) var(--st-ease), font-size var(--st-dur) var(--st-ease);
}
.page-pwchg .pw-rules li.is-ok { color: var(--st-brand-700); }
.page-pwchg .pw-rules li.is-ok i { font-size: 12px; color: var(--st-brand-500); }

/* ---- 일치 안내 ---- */
.page-pwchg .pw-match {
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
.page-pwchg .pw-match:empty { display: none; }
.page-pwchg .pw-match.is-ok  { color: var(--st-brand-600); }
.page-pwchg .pw-match.is-bad { color: #c0392b; }

/* ---- 버튼 ---- */
.page-pwchg .pw-actions {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--st-ink-200);
}
.page-wrapper.page-pwchg .pw-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-pwchg .pw-btn-primary {
  flex: 1.7 1 0;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-wrapper.page-pwchg .pw-btn-primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}
.page-wrapper.page-pwchg .pw-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-600);
}
.page-wrapper.page-pwchg .pw-btn-ghost:hover {
  background: var(--st-ink-100);
  border-color: var(--st-ink-400);
  color: var(--st-ink-800);
}
.page-wrapper.page-pwchg .pw-btn[disabled],
.page-wrapper.page-pwchg .pw-btn.is-loading { opacity: .62; cursor: not-allowed; }

/* ---- 하단 안내 ---- */
.page-pwchg .pw-note {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
  color: var(--st-brand-800);
  font-size: 12.5px;
  line-height: 1.65;
}
.page-pwchg .pw-note i { margin-top: 3px; flex: 0 0 auto; color: var(--st-brand-500); }
.page-pwchg .pw-note span { flex: 1 1 auto; min-width: 0; }

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-pwchg .pw-card { padding: 22px 17px 20px; }
  .page-pwchg .pw-rules { gap: 5px 12px; }
  .page-pwchg .pw-actions { flex-direction: column-reverse; }
  .page-wrapper.page-pwchg .pw-btn { flex: 0 0 auto; width: 100%; }
}

/* ==========================================================================
   40. secede.php 회원탈퇴 전용 (Scoped: .page-secede)
   --------------------------------------------------------------------------
   되돌릴 수 없는 처리이므로 브랜드 그린 대신 경고색(적색)을 기준으로 씁니다.
   ========================================================================== */

.page-secede .sc-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-secede .sc-head {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}
.page-secede .sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px;
  border-radius: var(--st-r-pill);
  background: #fdeeec;
  border: 1px solid #eeb6ad;
  color: #a33a2e;
  font-size: 12.5px;
  font-weight: 700;
}
.page-secede .sc-eyebrow i { font-size: 12px; }
.page-secede .sc-head h2 {
  margin: 14px 0 8px;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--st-ink-900);
}
.page-secede .sc-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 카드 ---- */
.page-secede .sc-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}

/* ---- 안내 2칸 ---- */
.page-secede .sc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.page-secede .sc-item {
  padding: 20px 18px 18px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  text-align: center;
}
.page-secede .sc-item-img {
  height: 56px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-secede .sc-item-img img {
  max-width: 52px;
  max-height: 52px;
  width: auto;
  height: auto;
}
.page-secede .sc-item h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--st-ink-900);
}
.page-secede .sc-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 경고 블록 ---- */
.page-secede .sc-alert {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding: 18px 18px 16px;
  border: 1px solid #eeb6ad;
  border-left: 4px solid #c0392b;
  border-radius: var(--st-r-md);
  background: #fdf4f2;
}
.page-secede .sc-alert-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c0392b;
  color: var(--st-white);
  font-size: 14px;
}
.page-secede .sc-alert-body { flex: 1 1 auto; min-width: 0; }
.page-secede .sc-alert-body h4 {
  margin: 4px 0 9px;
  font-size: 14.5px;
  font-weight: 800;
  color: #8f2f24;
  line-height: 1.4;
}
.page-secede .sc-alert-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.75;
  color: #7a3b33;
}
.page-secede .sc-alert-body p:last-child { margin-bottom: 0; }
.page-secede .sc-alert-body strong { font-weight: 800; color: #8f2f24; }
.page-wrapper.page-secede .sc-alert-body a {
  color: #a33a2e;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-wrapper.page-secede .sc-alert-body a:hover { color: #7a251b; }

/* ---- 상세 항목 ---- */
.page-secede .sc-detail {
  margin-top: 16px;
  padding: 18px 18px 16px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-white);
}
.page-secede .sc-detail h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--st-ink-900);
  line-height: 1.4;
}
.page-secede .sc-detail h4 i { color: #c0392b; font-size: 13px; }
.page-secede .sc-detail ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-secede .sc-detail li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--st-ink-600);
}
.page-secede .sc-detail li i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 11px;
  color: #d0827a;
}

/* ---- 본인 확인 ---- */
.page-secede .sc-verify {
  margin-top: 16px;
  padding: 18px 18px 17px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
}
.page-secede .sc-verify h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--st-ink-900);
  line-height: 1.4;
}
.page-secede .sc-verify h4 i { color: var(--st-ink-500); font-size: 12.5px; }
.page-secede .sc-verify p {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--st-ink-600);
}

.page-secede .sc-pw-box { position: relative; max-width: 420px; }
.page-secede .sc-pw-box input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 46px 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-ink-900);
  font-family: var(--st-font);
  font-size: 14.5px;
  transition: border-color var(--st-dur) var(--st-ease), box-shadow var(--st-dur) var(--st-ease);
}
.page-secede .sc-pw-box input::placeholder { color: var(--st-ink-400); }
.page-secede .sc-pw-box input:focus {
  outline: none;
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}
.page-secede .sc-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-500);
  font-size: 14px;
  cursor: pointer;
}
.page-secede .sc-eye:hover { background: var(--st-ink-100); color: var(--st-ink-800); }

/* ---- 동의 ---- */
.page-secede .sc-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 15px 16px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease);
}
.page-secede .sc-agree:hover { border-color: var(--st-ink-400); }
.page-secede .sc-agree.is-on {
  border-color: #d0827a;
  background: #fdf4f2;
}
.page-secede .sc-agree input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #c0392b;
  cursor: pointer;
}
.page-secede .sc-agree span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--st-ink-700);
}
.page-secede .sc-agree.is-on span { color: #8f2f24; }

/* ---- 버튼 ---- */
.page-secede .sc-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.page-wrapper.page-secede .sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
/* 남는(취소) 쪽을 넓게 — 기본 선택지가 "돌아가기" 임을 형태로 드러냅니다 */
.page-wrapper.page-secede .sc-btn-keep {
  flex: 1.6 1 0;
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-700);
}
.page-wrapper.page-secede .sc-btn-keep:hover {
  background: var(--st-ink-100);
  border-color: var(--st-ink-400);
  color: var(--st-ink-900);
}
.page-wrapper.page-secede .sc-btn-danger {
  flex: 1 1 0;
  background: #c0392b;
  border-color: #c0392b;
  color: var(--st-white);
}
.page-wrapper.page-secede .sc-btn-danger:hover {
  background: #a02b1f;
  border-color: #a02b1f;
  color: var(--st-white);
}
.page-wrapper.page-secede .sc-btn-danger[disabled] {
  background: var(--st-ink-200);
  border-color: var(--st-ink-200);
  color: var(--st-ink-400);
  cursor: not-allowed;
}

.page-secede .sc-foot {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--st-ink-500);
}
.page-secede .sc-foot strong { color: var(--st-ink-700); font-weight: 800; }

/* ---- 반응형 ---- */
@media (max-width: 767px) {
  .page-secede .sc-grid { grid-template-columns: 1fr; }
  .page-secede .sc-detail ul { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .page-secede .sc-card { padding: 20px 16px 18px; }
  .page-secede .sc-alert { flex-direction: column; gap: 10px; padding: 16px 15px 14px; }
  .page-secede .sc-pw-box { max-width: none; }
  .page-secede .sc-actions { flex-direction: column; }
  .page-wrapper.page-secede .sc-btn { flex: 0 0 auto; width: 100%; }
  /* 위험한 버튼을 아래쪽으로 — 실수로 먼저 누르는 것을 줄입니다 */
  .page-wrapper.page-secede .sc-btn-keep { order: 1; }
  .page-wrapper.page-secede .sc-btn-danger { order: 2; }
}

/* ==========================================================================
   41. find_id.php 아이디·비밀번호 찾기 전용 (Scoped: .page-find)
   ========================================================================== */

.page-find .fd-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-find .fd-head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}
.page-find .fd-head h2 {
  margin: 0 0 8px;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--st-ink-900);
}
.page-find .fd-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 2단 카드 ---- */
.page-find .fd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}
.page-find .fd-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}

.page-find .fd-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.page-find .fd-card-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--st-r-md);
  background: var(--st-brand-100);
  color: var(--st-brand-600);
  font-size: 15px;
}
.page-find .fd-card-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--st-ink-900);
}
.page-find .fd-card-desc {
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--st-ink-200);
  font-size: 13px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 입력 ---- */
.page-find .fd-field { margin-bottom: 16px; }

.page-find .fd-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-800);
}

.page-find .fd-inputbox { position: relative; flex: 1 1 auto; min-width: 0; }
.page-find .fd-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-ink-900);
  font-family: var(--st-font);
  font-size: 14.5px;
  transition: border-color var(--st-dur) var(--st-ease), box-shadow var(--st-dur) var(--st-ease);
}
.page-find .fd-input::placeholder { color: var(--st-ink-400); }
.page-find .fd-input:focus {
  outline: none;
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .16);
}
.page-find .fd-inputbox > i {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--st-ink-300);
  pointer-events: none;
}
.page-find .fd-input:focus ~ i { color: var(--st-brand-400); }

/* 휴대폰 입력 + 인증번호 버튼 */
.page-find .fd-inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.page-find .fd-side-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--st-brand-500);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-brand-600);
  font-family: var(--st-font);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-find .fd-side-btn:hover { background: var(--st-brand-500); color: var(--st-white); }
.page-find .fd-side-btn[disabled] { opacity: .6; cursor: not-allowed; }
.page-find .fd-side-btn i { font-size: 12px; }

/* 인증 상태 배지 */
.page-find .fd-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--st-r-pill);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.page-find .fd-tag i { font-size: 10px; }
.page-find .fd-tag--done {
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-300);
  color: var(--st-brand-700);
}
.page-find .fd-tag--wait {
  background: #fdf3e3;
  border: 1px solid #f0c987;
  color: #a2621a;
}

/* ---- 버튼 ---- */
.page-wrapper.page-find .fd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin-top: 4px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-find .fd-btn i { font-size: 13px; }
.page-wrapper.page-find .fd-btn-outline {
  background: var(--st-white);
  border-color: var(--st-brand-500);
  color: var(--st-brand-600);
}
.page-wrapper.page-find .fd-btn-outline:hover {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
}
.page-wrapper.page-find .fd-btn-primary {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-wrapper.page-find .fd-btn-primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}
/* is-off : 아직 휴대폰 인증이 안 된 상태.
   누를 수는 있고(누르면 안내가 뜹니다) 시각적으로만 흐리게 둡니다.
   disabled 로 막으면 submit 이벤트가 발생하지 않아 안내를 띄울 수 없습니다. */
.page-wrapper.page-find .fd-btn.is-off {
  background: var(--st-ink-200);
  border-color: var(--st-ink-200);
  color: var(--st-ink-500);
  box-shadow: none;
}
.page-wrapper.page-find .fd-btn.is-off:hover {
  background: var(--st-ink-300);
  border-color: var(--st-ink-300);
  color: var(--st-ink-700);
}

/* ---- 카드 하단 안내 ---- */
.page-find .fd-note {
  display: flex;
  gap: 8px;
  margin: auto 0 0;      /* 카드 높이가 달라도 아래에 붙습니다 */
  padding: 12px 14px 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--st-ink-500);
}
.page-find .fd-note i { margin-top: 3px; flex: 0 0 auto; color: var(--st-ink-400); }
.page-find .fd-note span { flex: 1 1 auto; min-width: 0; }
.page-find .fd-note--warn { color: #8a5a1c; }
.page-find .fd-note--warn i { color: #d19a3f; }
.page-find .fd-note--warn strong { color: #7a4a12; font-weight: 800; }

/* ---- 하단 링크 ---- */
.page-find .fd-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.page-find .fd-links li { position: relative; padding: 0 18px; }
.page-find .fd-links li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: var(--st-ink-300);
}
.page-wrapper.page-find .fd-links a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-600);
  text-decoration: none;
}
.page-wrapper.page-find .fd-links a:hover { color: var(--st-brand-600); }
.page-wrapper.page-find .fd-links a.is-strong { color: var(--st-brand-600); }

.page-find .fd-footnote {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--st-ink-500);
}
.page-wrapper.page-find .fd-footnote a {
  color: var(--st-brand-600);
  font-weight: 800;
  text-decoration: none;
}
.page-wrapper.page-find .fd-footnote a:hover { text-decoration: underline; }

/* ---- 반응형 ---- */
@media (max-width: 767px) {
  .page-find .fd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .page-find .fd-card { padding: 20px 17px 18px; }
  .page-find .fd-inline { flex-direction: column; }
  .page-find .fd-side-btn { justify-content: center; }
  .page-find .fd-links li { padding: 0 12px; }
}

/* ==========================================================================
   42. register.php 회원가입 약관 동의 전용 (Scoped: .page-terms)
   ========================================================================== */

.page-terms .tm-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-terms .tm-head {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}
.page-terms .tm-head h2 {
  margin: 0 0 8px;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--st-ink-900);
}
.page-terms .tm-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}

/* ---- 두 약관 나란히 ---- */
.page-terms .tm-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
.page-terms .tm-block {
  padding: 22px 22px 18px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-terms .tm-block-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--st-ink-900);
}
.page-terms .tm-block-title i { color: var(--st-brand-500); font-size: 14px; }

/* ---- 약관 본문 상자 ---- */
.page-terms .tm-box {
  position: relative;
  height: 340px;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
  font-size: 13px;
  line-height: 1.8;
  color: var(--st-ink-700);
  overscroll-behavior: contain;
}
.page-terms .tm-box:focus {
  outline: none;
  border-color: var(--st-brand-400);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .12);
}
/* 끝까지 읽으면 테두리 색으로 표시 (강제하지는 않습니다) */
.page-terms .tm-box.is-read {
  border-color: var(--st-brand-300);
  background: var(--st-white);
}

.page-terms .tm-box h5 {
  margin: 16px 0 5px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--st-ink-900);
  line-height: 1.5;
}
.page-terms .tm-box h5:first-child { margin-top: 0; }
.page-terms .tm-box p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--st-ink-600);
  word-break: keep-all;
}
.page-terms .tm-empty {
  margin: 0;
  padding: 28px 0;
  text-align: center;
  color: var(--st-ink-500);
  font-weight: 700;
}
.page-terms .tm-effective {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--st-ink-200);
  font-weight: 700;
  color: var(--st-ink-700);
}

/* 스크롤바를 얇게 (지원하는 브라우저에서만) */
.page-terms .tm-box::-webkit-scrollbar { width: 8px; }
.page-terms .tm-box::-webkit-scrollbar-thumb {
  background: var(--st-ink-300);
  border-radius: 999px;
}
.page-terms .tm-box::-webkit-scrollbar-track { background: transparent; }

/* ---- 동의 체크 ---- */
.page-terms .tm-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease);
}
.page-terms .tm-agree:hover { border-color: var(--st-ink-400); }
.page-terms .tm-agree.is-on {
  border-color: var(--st-brand-400);
  background: var(--st-brand-50);
}
.page-terms .tm-agree input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--st-brand-500);
  cursor: pointer;
}
.page-terms .tm-agree span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--st-ink-700);
}
.page-terms .tm-agree b { font-weight: 800; color: var(--st-ink-900); }
.page-terms .tm-agree em {
  font-style: normal;
  font-weight: 800;
  color: #c0392b;
  font-size: 12px;
}
.page-terms .tm-agree.is-on span,
.page-terms .tm-agree.is-on b { color: var(--st-brand-800); }

/* ---- 하단 : 전체 동의 + 버튼 ---- */
.page-terms .tm-foot {
  max-width: 1060px;
  margin: 20px auto 0;
}
.page-terms .tm-agree--all {
  margin: 0 0 16px;
  padding: 16px 18px;
  border-width: 2px;
  border-radius: var(--st-r-lg);
}
.page-terms .tm-agree--all span { font-size: 14.5px; font-weight: 700; }

.page-terms .tm-actions {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}
.page-wrapper.page-terms .tm-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-terms .tm-btn-primary {
  flex: 1.6 1 0;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-wrapper.page-terms .tm-btn-primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}
/* is-off : 아직 동의하지 않은 상태.
   disabled 로 막지 않습니다. 그러면 눌러도 아무 일이 없어
   왜 안 되는지 알 수 없습니다. 흐리게만 보여주고 누르면 안내합니다. */
.page-wrapper.page-terms .tm-btn.is-off {
  background: var(--st-ink-200);
  border-color: var(--st-ink-200);
  color: var(--st-ink-500);
  box-shadow: none;
}
.page-wrapper.page-terms .tm-btn.is-off:hover {
  background: var(--st-ink-300);
  border-color: var(--st-ink-300);
  color: var(--st-ink-700);
}
.page-wrapper.page-terms .tm-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-600);
}
.page-wrapper.page-terms .tm-btn-ghost:hover {
  background: var(--st-ink-100);
  border-color: var(--st-ink-400);
  color: var(--st-ink-800);
}
.page-wrapper.page-terms .tm-btn[disabled] { opacity: .62; cursor: not-allowed; }

.page-terms .tm-note {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--st-ink-500);
}
.page-terms .tm-note i { margin-top: 3px; flex: 0 0 auto; color: var(--st-ink-400); }
.page-wrapper.page-terms .tm-note a {
  color: var(--st-brand-600);
  font-weight: 800;
  text-decoration: none;
}
.page-wrapper.page-terms .tm-note a:hover { text-decoration: underline; }

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .page-terms .tm-wrap { grid-template-columns: 1fr; }
  .page-terms .tm-box { height: 280px; }
}
@media (max-width: 575px) {
  .page-terms .tm-block { padding: 18px 15px 15px; }
  .page-terms .tm-box { height: 240px; padding: 14px 14px; }
  .page-terms .tm-actions { flex-direction: column-reverse; }
  .page-wrapper.page-terms .tm-btn { flex: 0 0 auto; width: 100%; }
}

/* ==========================================================================
   43. join.php 회원가입 정보 입력 전용 (Scoped: .page-join)
   ========================================================================== */

.page-join .jn-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-join .jn-head {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}
.page-join .jn-head h2 {
  margin: 0 0 8px;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--st-ink-900);
}
.page-join .jn-head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--st-ink-600);
}
.page-wrapper.page-join .jn-head a {
  color: var(--st-brand-600);
  font-weight: 800;
  text-decoration: none;
}
.page-wrapper.page-join .jn-head a:hover { text-decoration: underline; }

/* ---- 폼 / 카드 ---- */
.page-join .jn-form {
  max-width: 640px;
  margin: 0 auto;
}
.page-join .jn-card {
  padding: 26px 26px 22px;
  margin-bottom: 16px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-join .jn-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--st-ink-200);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--st-ink-900);
}
.page-join .jn-card-title i { color: var(--st-brand-500); font-size: 14px; }

/* ---- 필드 ---- */
.page-join .jn-field { margin-bottom: 18px; }
.page-join .jn-field:last-child { margin-bottom: 0; }

.page-join .jn-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.page-join .jn-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-800);
  line-height: 1.4;
}
.page-join .jn-req { color: #d94a3d; font-weight: 800; }

.page-join .jn-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--st-ink-300);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-ink-900);
  font-family: var(--st-font);
  font-size: 14.5px;
  transition: border-color var(--st-dur) var(--st-ease), box-shadow var(--st-dur) var(--st-ease);
}
.page-join .jn-input::placeholder { color: var(--st-ink-400); }
.page-join .jn-input:focus {
  outline: none;
  border-color: var(--st-brand-500);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .16);
}
/* 아이디 중복확인 결과를 입력칸 테두리로도 보여줍니다 */
.page-join .jn-input.is-ok  { border-color: var(--st-brand-400); background: var(--st-brand-50); }
.page-join .jn-input.is-bad { border-color: #e08a80; background: #fdf4f2; }

/* 입력칸 + 옆 버튼 */
.page-join .jn-inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.page-join .jn-inline .jn-input { flex: 1 1 auto; min-width: 0; }
.page-join .jn-side-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--st-brand-500);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  color: var(--st-brand-600);
  font-family: var(--st-font);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-join .jn-side-btn:hover { background: var(--st-brand-500); color: var(--st-white); }
.page-join .jn-side-btn[disabled] { opacity: .6; cursor: not-allowed; }
.page-join .jn-side-btn i { font-size: 12px; }

/* ---- 상태 배지 ---- */
.page-join .jn-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--st-r-pill);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.page-join .jn-tag i { font-size: 10px; }
.page-join .jn-tag--ok {
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-300);
  color: var(--st-brand-700);
}
.page-join .jn-tag--bad {
  background: #fdeeec;
  border: 1px solid #eeb6ad;
  color: #c0392b;
}
.page-join .jn-tag--wait {
  background: #fdf3e3;
  border: 1px solid #f0c987;
  color: #a2621a;
}

.page-join .jn-help {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--st-ink-500);
}

/* ---- 비밀번호 ---- */
.page-join .jn-pw-box { position: relative; }
.page-join .jn-pw-box .jn-input { padding-right: 46px; }
.page-join .jn-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--st-r-sm);
  background: transparent;
  color: var(--st-ink-500);
  font-size: 14px;
  cursor: pointer;
}
.page-join .jn-eye:hover { background: var(--st-ink-100); color: var(--st-ink-800); }

.page-join .jn-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  padding: 11px 14px;
  list-style: none;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
}
.page-join .jn-rules li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-ink-500);
  transition: color var(--st-dur) var(--st-ease);
}
.page-join .jn-rules li i {
  font-size: 6px;
  color: var(--st-ink-300);
  transition: color var(--st-dur) var(--st-ease), font-size var(--st-dur) var(--st-ease);
}
.page-join .jn-rules li.is-ok { color: var(--st-brand-700); }
.page-join .jn-rules li.is-ok i { font-size: 12px; color: var(--st-brand-500); }

.page-join .jn-match {
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
.page-join .jn-match:empty { display: none; }
.page-join .jn-match.is-ok  { color: var(--st-brand-600); }
.page-join .jn-match.is-bad { color: #c0392b; }

/* ---- 버튼 ---- */
.page-join .jn-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.page-wrapper.page-join .jn-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  font-family: var(--st-font);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.page-wrapper.page-join .jn-btn-primary {
  flex: 1.8 1 0;
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-wrapper.page-join .jn-btn-primary:hover {
  background: var(--st-brand-600);
  border-color: var(--st-brand-600);
  color: var(--st-white);
}
.page-wrapper.page-join .jn-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-ink-300);
  color: var(--st-ink-600);
}
.page-wrapper.page-join .jn-btn-ghost:hover {
  background: var(--st-ink-100);
  border-color: var(--st-ink-400);
  color: var(--st-ink-800);
}
.page-wrapper.page-join .jn-btn[disabled],
.page-wrapper.page-join .jn-btn.is-loading { opacity: .62; cursor: not-allowed; }

.page-join .jn-note {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: var(--st-r-md);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
  color: var(--st-brand-800);
  font-size: 12.5px;
  line-height: 1.7;
}
.page-join .jn-note i { margin-top: 3px; flex: 0 0 auto; color: var(--st-brand-500); }
.page-join .jn-note span { flex: 1 1 auto; min-width: 0; }
.page-wrapper.page-join .jn-note a {
  color: var(--st-brand-700);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 반응형 ---- */
@media (max-width: 575px) {
  .page-join .jn-card { padding: 20px 16px 18px; }
  .page-join .jn-grid2 { grid-template-columns: 1fr; }
  .page-join .jn-inline { flex-direction: column; }
  .page-join .jn-side-btn { justify-content: center; }
  .page-join .jn-actions { flex-direction: column-reverse; }
  .page-wrapper.page-join .jn-btn { flex: 0 0 auto; width: 100%; }
}

/* ==========================================================================
   44. qna_desk_list.php 나의 문의하기 목록 전용 (Scoped: .page-qnalist)

   ※ .page-qnalist 스코프를 반드시 유지해 주세요.
     이 안의 규칙은 모두 이 페이지에서만 적용됩니다. 다른 게시판
     목록(.list_board, table.gna)에는 영향을 주지 않습니다.
   ========================================================================== */

.page-qnalist .ql-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 상단 헤더 ---- */
.page-qnalist .ql-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-qnalist .ql-head-text { min-width: 0; }
.page-qnalist .ql-head h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-ink-900);
}
.page-qnalist .ql-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--st-ink-500);
}
.page-qnalist .ql-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-brand-700);
  vertical-align: 3px;
}

/* ---- 문의글 작성 버튼 ---- */
.page-qnalist .ql-write {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--st-shadow-sm);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.page-qnalist .ql-write:hover,
.page-qnalist .ql-write:focus-visible {
  background: var(--st-brand-600);
  color: var(--st-white);
  transform: translateY(-1px);
  box-shadow: var(--st-shadow-md);
}
.page-qnalist .ql-write i { font-size: 13px; }

/* ---- 목록 카드 ---- */
.page-qnalist .ql-card {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-sm);
  overflow: hidden;
}

/* ---- 검색 결과 안내 ---- */
.page-qnalist .ql-searchinfo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--st-border-soft);
  background: var(--st-brand-50);
  font-size: 14px;
  color: var(--st-ink-700);
}
.page-qnalist .ql-searchinfo i { color: var(--st-brand-600); }
.page-qnalist .ql-searchinfo b { color: var(--st-brand-700); }
.page-qnalist .ql-searchinfo a {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--st-r-pill);
  border: 1px solid var(--st-brand-300);
  background: var(--st-white);
  font-size: 13px;
  font-weight: 700;
  color: var(--st-brand-700);
  text-decoration: none;
}
.page-qnalist .ql-searchinfo a:hover { background: var(--st-brand-50); }

/* ---- 표 ---- */
.page-qnalist .ql-table-wrap { width: 100%; }
.page-qnalist table.ql-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}
.page-qnalist .ql-table thead th {
  padding: 15px 12px;
  border-bottom: 1px solid var(--st-border);
  background: var(--st-ink-050);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-600);
  text-align: center;
  white-space: nowrap;
}
.page-qnalist .ql-table tbody td {
  padding: 15px 12px;
  border-bottom: 1px solid var(--st-border-soft);
  font-size: 14.5px;
  color: var(--st-ink-700);
  text-align: center;
  vertical-align: middle;
}
.page-qnalist .ql-table tbody tr:last-child td { border-bottom: 0; }
.page-qnalist .ql-table tbody tr { transition: background .15s ease; }
.page-qnalist .ql-table tbody tr:hover { background: var(--st-ink-050); }

/* 열 너비 */
.page-qnalist .ql-col-no     { width: 82px; }
.page-qnalist .ql-col-writer { width: 140px; }
.page-qnalist .ql-col-date   { width: 130px; }

.page-qnalist .ql-no {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-400);
  font-variant-numeric: tabular-nums;
}
.page-qnalist .ql-date {
  font-size: 13.5px;
  color: var(--st-ink-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.page-qnalist .ql-writer {
  font-size: 14px;
  color: var(--st-ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 제목 칸 */
.page-qnalist .ql-cell-title {
  text-align: left !important;
  padding-left: 18px !important;
}
.page-qnalist .ql-title-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.page-qnalist .ql-indent {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--st-ink-300);
}
.page-qnalist .ql-indent i { font-size: 11px; }
.page-qnalist .ql-reply-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-100);
  border: 1px solid var(--st-border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}
.page-qnalist .ql-reply-mark.is-answer {
  background: var(--st-brand-50);
  border-color: var(--st-brand-200);
  color: var(--st-brand-700);
}
.page-qnalist .ql-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--st-ink-800);
  text-decoration: none;
}
.page-qnalist .ql-link:hover,
.page-qnalist .ql-link:focus-visible {
  color: var(--st-brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 내용 없음 ---- */
.page-qnalist .ql-empty td {
  padding: 64px 20px !important;
  text-align: center !important;
}
.page-qnalist .ql-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.page-qnalist .ql-empty-box i {
  font-size: 34px;
  color: var(--st-ink-300);
}
.page-qnalist .ql-empty-box strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-700);
}
.page-qnalist .ql-empty-box span {
  font-size: 14px;
  color: var(--st-ink-500);
}

/* ---- 페이지네이션 ---- */
.page-qnalist .ql-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 22px 16px;
  border-top: 1px solid var(--st-border-soft);
  background: var(--st-surface);
}
.page-qnalist .ql-pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  font-size: 14px;
  font-weight: 600;
  color: var(--st-ink-600);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  font-variant-numeric: tabular-nums;
}
.page-qnalist .ql-pg:hover,
.page-qnalist .ql-pg:focus-visible {
  background: var(--st-brand-50);
  border-color: var(--st-brand-300);
  color: var(--st-brand-700);
}
.page-qnalist .ql-pg.is-current {
  background: var(--st-brand-500);
  border-color: var(--st-brand-500);
  color: var(--st-white);
  cursor: default;
}
.page-qnalist .ql-pg.is-current:hover { background: var(--st-brand-500); color: var(--st-white); }
.page-qnalist .ql-pg.is-off {
  opacity: .4;
  pointer-events: none;
}
.page-qnalist .ql-pg i { font-size: 12px; }

/* ---- 검색 영역 ---- */
.page-qnalist .ql-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.page-qnalist .ql-select,
.page-qnalist .ql-input {
  height: 46px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  font-family: var(--st-font);
  font-size: 14.5px;
  color: var(--st-ink-800);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-qnalist .ql-select {
  width: 118px;
  padding: 0 34px 0 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7772' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 10px 7px;
}
.page-qnalist .ql-input {
  width: 260px;
  max-width: 100%;
  padding: 0 14px;
}
.page-qnalist .ql-select:focus,
.page-qnalist .ql-input:focus {
  outline: 0;
  border-color: var(--st-brand-400);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}
.page-qnalist .ql-input::placeholder { color: var(--st-ink-400); }

.page-qnalist .ql-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--st-r-sm);
  background: var(--st-ink-800);
  color: var(--st-white);
  font-family: var(--st-font);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}
.page-qnalist .ql-search-btn:hover { background: var(--st-ink-900); }
.page-qnalist .ql-search-btn i { font-size: 13px; }

/* ==========================================================================
   44-1. 태블릿 이하 — 표를 카드로 바꿉니다
   ========================================================================== */
@media (max-width: 767px) {
  .page-qnalist .ql-head {
    flex-direction: column;
    align-items: stretch;
  }
  .page-qnalist .ql-write { justify-content: center; }

  /* 표 머리글을 숨기고 각 행을 카드처럼 보여줍니다 */
  .page-qnalist .ql-table thead { display: none; }
  .page-qnalist .ql-table,
  .page-qnalist .ql-table tbody,
  .page-qnalist .ql-table tr,
  .page-qnalist .ql-table td { display: block; width: auto; }

  .page-qnalist .ql-table tbody tr {
    padding: 16px 18px;
    border-bottom: 1px solid var(--st-border-soft);
  }
  .page-qnalist .ql-table tbody tr:hover { background: transparent; }
  .page-qnalist .ql-table tbody td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  /* 제목을 맨 위로 */
  .page-qnalist .ql-cell-title {
    padding-left: 0 !important;
    order: -1;
    margin-bottom: 8px;
  }
  .page-qnalist .ql-title-inner { flex-wrap: wrap; }
  .page-qnalist .ql-link { white-space: normal; }

  /* 번호·작성자·작성일을 한 줄 메타로 */
  .page-qnalist .ql-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }
  .page-qnalist .ql-cell-title { flex: 1 1 100%; }
  .page-qnalist .ql-cell-no::before    { content: 'No.'; margin-right: 3px; }
  .page-qnalist .ql-cell-writer::before { content: '\f007'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; margin-right: 5px; color: var(--st-ink-300); }
  .page-qnalist .ql-cell-date::before   { content: '\f017'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; margin-right: 5px; color: var(--st-ink-300); }
  .page-qnalist .ql-cell-no,
  .page-qnalist .ql-cell-writer,
  .page-qnalist .ql-cell-date {
    font-size: 12.5px;
    color: var(--st-ink-500);
  }

  .page-qnalist .ql-empty td { padding: 48px 16px !important; text-align: center !important; }

  .page-qnalist .ql-search { flex-wrap: wrap; }
  .page-qnalist .ql-select { width: 104px; }
  .page-qnalist .ql-input  { flex: 1 1 140px; width: auto; }
  .page-qnalist .ql-search-btn { flex: 0 0 auto; }

  .page-qnalist .ql-pager { padding: 18px 12px; gap: 5px; }
  .page-qnalist .ql-pg { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13.5px; }
}

@media (max-width: 420px) {
  .page-qnalist .ql-search { flex-direction: column; align-items: stretch; }
  .page-qnalist .ql-select,
  .page-qnalist .ql-input,
  .page-qnalist .ql-search-btn { width: 100%; }
}

/* ==========================================================================
   45. qna_desk_view.php 문의 상세 전용 (Scoped: .page-qnaview)

   ※ .page-qnaview 스코프를 반드시 유지해 주세요.
   ========================================================================== */

.page-qnaview .qv-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

.page-qnaview .qv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-qnaview .qv-head h2 {
  margin: 0;
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-ink-900);
}
.page-qnaview .qv-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-pill);
  background: var(--st-white);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--st-ink-600);
  text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.page-qnaview .qv-back:hover {
  background: var(--st-brand-50);
  border-color: var(--st-brand-300);
  color: var(--st-brand-700);
}

/* ---- 본문 카드 ---- */
.page-qnaview .qv-card {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-sm);
  overflow: hidden;
}
.page-qnaview .qv-card.is-answer { border-color: var(--st-brand-200); }

.page-qnaview .qv-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--st-border-soft);
  background: var(--st-ink-050);
}
.page-qnaview .qv-card.is-answer .qv-card-head { background: var(--st-brand-50); }
.page-qnaview .qv-card-head-text { min-width: 0; flex: 1 1 auto; }

.page-qnaview .qv-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}
.page-qnaview .qv-badge--q {
  background: var(--st-ink-800);
  color: var(--st-white);
}
.page-qnaview .qv-badge--a {
  background: var(--st-brand-500);
  color: var(--st-white);
}

.page-qnaview .qv-title {
  margin: 2px 0 10px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--st-ink-900);
  word-break: break-word;
}
.page-qnaview .qv-meta {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-qnaview .qv-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--st-ink-500);
}
.page-qnaview .qv-meta li i { font-size: 12px; color: var(--st-ink-400); }
.page-qnaview .qv-meta-tag {
  padding: 2px 10px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-100);
  border: 1px solid var(--st-brand-200);
  font-size: 12px !important;
  font-weight: 700;
  color: var(--st-brand-700) !important;
}
.page-qnaview .qv-meta-tag i { color: var(--st-brand-600) !important; }

/* ---- 연락처 ---- */
.page-qnaview .qv-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--st-border-soft);
}
.page-qnaview .qv-info-row {
  padding: 16px 20px;
  border-right: 1px solid var(--st-border-soft);
  min-width: 0;
}
.page-qnaview .qv-info-row:last-child { border-right: 0; }
.page-qnaview .qv-info dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--st-ink-500);
}
.page-qnaview .qv-info dt i { font-size: 11px; color: var(--st-ink-400); }
.page-qnaview .qv-info dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--st-ink-800);
  word-break: break-all;
}
.page-qnaview .qv-none {
  font-size: 13.5px;
  color: var(--st-ink-400);
}

/* ---- 내용 ---- */
.page-qnaview .qv-content {
  padding: 28px 26px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--st-ink-700);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---- 첨부파일 ---- */
.page-qnaview .qv-file {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 26px 22px;
  border-top: 1px dashed var(--st-border);
}
.page-qnaview .qv-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-500);
}
.page-qnaview .qv-file-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 15px;
  border: 1px solid var(--st-brand-200);
  border-radius: var(--st-r-sm);
  background: var(--st-brand-50);
  font-size: 14px;
  font-weight: 600;
  color: var(--st-brand-700);
  text-decoration: none;
  transition: background .16s ease;
}
.page-qnaview .qv-file-link:hover { background: var(--st-brand-100); color: var(--st-brand-800); }
.page-qnaview .qv-file-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 버튼 ---- */
.page-qnaview .qv-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.page-qnaview .qv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--st-r-pill);
  font-family: var(--st-font);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.page-qnaview .qv-btn:hover { transform: translateY(-1px); }
.page-qnaview .qv-btn i { font-size: 13px; }
.page-qnaview .qv-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-border);
  color: var(--st-ink-600);
}
.page-qnaview .qv-btn-ghost:hover { background: var(--st-ink-100); color: var(--st-ink-800); }
.page-qnaview .qv-btn-line {
  background: var(--st-white);
  border-color: var(--st-brand-300);
  color: var(--st-brand-700);
}
.page-qnaview .qv-btn-line:hover { background: var(--st-brand-50); }
.page-qnaview .qv-btn-danger {
  background: #fff5f5;
  border-color: #f3c2c2;
  color: #b42318;
}
.page-qnaview .qv-btn-danger:hover { background: #ffecec; border-color: #e8a3a3; }
.page-qnaview .qv-btn:disabled { opacity: .6; cursor: default; transform: none; }

@media (max-width: 767px) {
  .page-qnaview .qv-head { flex-direction: column; align-items: stretch; }
  .page-qnaview .qv-back { justify-content: center; }
  .page-qnaview .qv-card-head { padding: 20px 18px; gap: 12px; }
  .page-qnaview .qv-badge { width: 38px; height: 38px; font-size: 16px; }
  .page-qnaview .qv-info { grid-template-columns: 1fr; }
  .page-qnaview .qv-info-row {
    border-right: 0;
    border-bottom: 1px solid var(--st-border-soft);
    padding: 13px 18px;
  }
  .page-qnaview .qv-info-row:last-child { border-bottom: 0; }
  .page-qnaview .qv-content { padding: 22px 18px; font-size: 15px; }
  .page-qnaview .qv-file { padding: 14px 18px 20px; }
  .page-qnaview .qv-actions { flex-direction: column-reverse; }
  .page-wrapper.page-qnaview .qv-btn { width: 100%; }
}

/* ==========================================================================
   46. qna_desk.php 문의 작성·수정 전용 (Scoped: .page-qnawrite)

   ※ .page-qnawrite 스코프를 반드시 유지해 주세요.
   ========================================================================== */

.page-qnawrite .qw-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

.page-qnawrite .qw-head {
  max-width: 780px;
  margin: 0 auto 22px;
  text-align: center;
}
.page-qnawrite .qw-head h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-ink-900);
}
.page-qnawrite .qw-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--st-ink-500);
}

.page-qnawrite .qw-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 860px;
  margin: 0 auto 16px;
  padding: 13px 16px;
  border: 1px solid #f5d98f;
  border-radius: var(--st-r-md);
  background: #fffaeb;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7a4f0b;
}
.page-qnawrite .qw-note i { margin-top: 2px; color: #c98a12; }
.page-qnawrite .qw-note span { flex: 1 1 auto; }

.page-qnawrite .qw-form {
  max-width: 860px;
  margin: 0 auto;
}

/* ---- 카드 ---- */
.page-qnawrite .qw-card {
  padding: 26px 26px 28px;
  margin-bottom: 18px;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-sm);
}
.page-qnawrite .qw-card:last-child { margin-bottom: 0; }
.page-qnawrite .qw-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--st-border-soft);
  font-size: 17px;
  font-weight: 700;
  color: var(--st-ink-900);
}
.page-qnawrite .qw-card-title i { font-size: 15px; color: var(--st-brand-500); }

/* ---- 회원 정보 ---- */
.page-qnawrite .qw-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
}
.page-qnawrite .qw-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--st-r-sm);
  background: var(--st-ink-050);
}
.page-qnawrite .qw-info dt {
  flex: 0 0 76px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink-500);
}
.page-qnawrite .qw-info dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14.5px;
  color: var(--st-ink-800);
  word-break: break-all;
}
.page-qnawrite .qw-none { font-size: 13.5px; color: var(--st-ink-400); }

/* ---- 입력 ---- */
.page-qnawrite .qw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.page-qnawrite .qw-field { margin-bottom: 20px; }
.page-qnawrite .qw-field:last-child { margin-bottom: 0; }
.page-qnawrite .qw-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink-700);
}
.page-qnawrite .qw-req { color: #d92d20; font-weight: 700; }

.page-qnawrite .qw-input,
.page-qnawrite .qw-textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  font-family: var(--st-font);
  font-size: 15px;
  color: var(--st-ink-900);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-qnawrite .qw-input { height: 50px; padding: 0 15px; }
.page-qnawrite .qw-textarea {
  padding: 14px 15px;
  line-height: 1.75;
  resize: vertical;
  min-height: 240px;
}
.page-qnawrite .qw-input:focus,
.page-qnawrite .qw-textarea:focus {
  outline: 0;
  border-color: var(--st-brand-400);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}
.page-qnawrite .qw-input::placeholder { color: var(--st-ink-400); }

.page-qnawrite .qw-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--st-ink-500);
}
.page-qnawrite .qw-hint i { margin-top: 2px; color: var(--st-brand-500); }

.page-qnawrite .qw-counter {
  margin: 7px 0 0;
  text-align: right;
  font-size: 12.5px;
  color: var(--st-ink-400);
  font-variant-numeric: tabular-nums;
}
.page-qnawrite .qw-counter.is-over { color: #d92d20; font-weight: 700; }

/* ---- 첨부파일 ---- */
.page-qnawrite .qw-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border: 1px dashed var(--st-ink-300);
  border-radius: var(--st-r-sm);
  background: var(--st-ink-050);
}
.page-qnawrite .qw-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  font-family: var(--st-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-700);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.page-qnawrite .qw-file-btn:hover { background: var(--st-brand-50); border-color: var(--st-brand-300); color: var(--st-brand-700); }
.page-qnawrite .qw-file-btn i { font-size: 12px; }
.page-qnawrite .qw-file-name {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--st-ink-400);
}
.page-qnawrite .qw-file-name.is-set { color: var(--st-brand-700); font-weight: 600; }
.page-qnawrite .qw-file-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--st-ink-200);
  color: var(--st-ink-600);
  cursor: pointer;
  transition: background .16s ease;
}
.page-qnawrite .qw-file-clear:hover { background: var(--st-ink-300); }

/* ---- 안내 ---- */
.page-qnawrite .qw-notice {
  margin: 22px 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-md);
  background: var(--st-ink-050);
}
.page-qnawrite .qw-notice h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--st-ink-800);
}
.page-qnawrite .qw-notice h4 i { font-size: 13px; color: var(--st-brand-500); }
.page-qnawrite .qw-notice ul { margin: 0; padding: 0; list-style: none; }
.page-qnawrite .qw-notice li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}
.page-qnawrite .qw-notice li:last-child { margin-bottom: 0; }
.page-qnawrite .qw-notice li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--st-ink-300);
}
.page-qnawrite .qw-notice strong { color: var(--st-ink-800); }

/* ---- 동의 ---- */
.page-qnawrite .qw-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 17px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-md);
  background: var(--st-white);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  color: var(--st-ink-700);
  transition: border-color .18s ease, background .18s ease;
}
.page-qnawrite .qw-agree:hover { border-color: var(--st-brand-300); }
.page-qnawrite .qw-agree.is-on {
  border-color: var(--st-brand-400);
  background: var(--st-brand-50);
}
.page-qnawrite .qw-agree input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--st-brand-500);
  cursor: pointer;
}
.page-qnawrite .qw-agree span { flex: 1 1 auto; }

/* ---- 버튼 ---- */
.page-qnawrite .qw-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.page-qnawrite .qw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--st-r-pill);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.page-qnawrite .qw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.page-qnawrite .qw-btn i { font-size: 13px; }
.page-qnawrite .qw-btn-primary {
  background: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-qnawrite .qw-btn-primary:hover:not(:disabled) {
  background: var(--st-brand-600);
  box-shadow: var(--st-shadow-md);
}
.page-qnawrite .qw-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-border);
  color: var(--st-ink-600);
}
.page-qnawrite .qw-btn-ghost:hover { background: var(--st-ink-100); color: var(--st-ink-800); }
.page-qnawrite .qw-btn:disabled { opacity: .5; cursor: not-allowed; }
.page-qnawrite .qw-btn.is-loading { opacity: .7; cursor: wait; }

@media (max-width: 767px) {
  .page-qnawrite .qw-card { padding: 20px 18px 22px; }
  .page-qnawrite .qw-info,
  .page-qnawrite .qw-grid { grid-template-columns: 1fr; }
  .page-qnawrite .qw-grid .qw-field { margin-bottom: 20px; }
  .page-qnawrite .qw-textarea { min-height: 200px; }
  .page-qnawrite .qw-actions { flex-direction: column-reverse; }
  .page-wrapper.page-qnawrite .qw-btn { width: 100%; }
}

/* ==========================================================================
   47. quot_request.php 견적서 직접 출력 전용 (Scoped: .page-quot)

   ※ .page-quot 스코프를 반드시 유지해 주세요.
     이 안의 규칙은 이 페이지에서만 적용됩니다. .estimate · .product-summary
     같은 템플릿 클래스에는 영향을 주지 않습니다.
   ========================================================================== */

.page-quot .qt-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

.page-quot .qt-head {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}
.page-quot .qt-head h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-ink-900);
}
.page-quot .qt-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--st-ink-500);
}

/* ---- 2단 배치 ---- */
.page-quot .qt-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- 왼쪽 : 제품 ---- */
.page-quot .qt-visual {
  position: sticky;
  top: 96px;
  padding: 26px 24px 28px;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-sm);
  text-align: center;
}
.page-quot .qt-visual img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 18px;
}
.page-quot .qt-visual h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--st-ink-900);
}
.page-quot .qt-visual p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--st-ink-500);
}
.page-quot .qt-visual-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.page-quot .qt-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--st-r-pill);
  background: var(--st-brand-50);
  border: 1px solid var(--st-brand-200);
  font-size: 12px;
  font-weight: 700;
  color: var(--st-brand-700);
}
.page-quot .qt-tag i { font-size: 10px; }

/* ---- 오른쪽 : 입력 ---- */
.page-quot .qt-card {
  padding: 26px 26px 28px;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-sm);
}
.page-quot .qt-card + .qt-card { margin-top: 18px; }
.page-quot .qt-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--st-border-soft);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--st-ink-900);
}
.page-quot .qt-card-title i { font-size: 14px; color: var(--st-brand-500); }

.page-quot .qt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.page-quot .qt-field { margin-bottom: 18px; }
.page-quot .qt-field:last-child { margin-bottom: 0; }
.page-quot .qt-field--full { grid-column: 1 / -1; }

.page-quot .qt-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-ink-700);
}
/* ※ 원본은 라벨마다 <object data="check.svg"> 를 넣어 요청이 9번 발생했습니다.
     같은 모양을 CSS 로 그립니다. */
.page-quot .qt-label::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--st-brand-500);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 6.3l-4.2 4.2a.9.9 0 01-1.3 0L4.3 8.6a.9.9 0 111.3-1.3l1.2 1.2 3.6-3.6a.9.9 0 111.3 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 6.3l-4.2 4.2a.9.9 0 01-1.3 0L4.3 8.6a.9.9 0 111.3-1.3l1.2 1.2 3.6-3.6a.9.9 0 111.3 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.page-quot .qt-req { color: #d92d20; }
.page-quot .qt-label-note {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--st-ink-400);
}

.page-quot .qt-input,
.page-quot .qt-select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--st-ink-200);
  border-radius: var(--st-r-sm);
  background: var(--st-white);
  font-family: var(--st-font);
  font-size: 15px;
  color: var(--st-ink-900);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-quot .qt-select {
  padding-right: 36px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7772' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
}
.page-quot .qt-input:focus,
.page-quot .qt-select:focus {
  outline: 0;
  border-color: var(--st-brand-400);
  box-shadow: 0 0 0 3px rgba(26, 160, 106, .14);
}
.page-quot .qt-input::placeholder { color: var(--st-ink-400); }
.page-quot .qt-input[readonly] {
  background: var(--st-ink-050);
  color: var(--st-ink-600);
  cursor: default;
}
.page-quot .qt-input.is-bad { border-color: #f0a9a2; }
.page-quot .qt-err {
  display: none;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #d92d20;
}
.page-quot .qt-err.is-on { display: block; }

/* ---- 금액 요약 ---- */
.page-quot .qt-sum {
  margin-top: 4px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-md);
  overflow: hidden;
  background: var(--st-white);
}
.page-quot .qt-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--st-border-soft);
  font-size: 14.5px;
}
.page-quot .qt-sum-row dt {
  margin: 0;
  color: var(--st-ink-600);
  font-weight: 600;
}
.page-quot .qt-sum-row dd {
  margin: 0;
  color: var(--st-ink-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-quot .qt-sum-row.is-discount dd { color: var(--st-brand-600); }
.page-quot .qt-sum-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 0;
  background: var(--st-brand-50);
}
.page-quot .qt-sum-total dt {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--st-brand-800);
}
.page-quot .qt-sum-total dd {
  margin: 0;
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-brand-700);
  font-variant-numeric: tabular-nums;
}
.page-quot .qt-sum-total small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--st-brand-600);
  text-align: right;
}

.page-quot .qt-save {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 15px;
  border-radius: var(--st-r-sm);
  background: #fffaeb;
  border: 1px solid #f5d98f;
  font-size: 13px;
  font-weight: 600;
  color: #7a4f0b;
}
.page-quot .qt-save i { color: #c98a12; }
.page-quot .qt-save.is-off { display: none; }

/* ---- 버튼 ---- */
.page-quot .qt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.page-quot .qt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--st-r-pill);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.page-quot .qt-btn:hover { transform: translateY(-1px); }
.page-quot .qt-btn i { font-size: 13px; }
.page-quot .qt-btn-primary {
  flex: 1 1 200px;
  background: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-quot .qt-btn-primary:hover { background: var(--st-brand-600); box-shadow: var(--st-shadow-md); }
.page-quot .qt-btn-ghost {
  flex: 0 0 auto;
  background: var(--st-white);
  border-color: var(--st-border);
  color: var(--st-ink-600);
}
.page-quot .qt-btn-ghost:hover { background: var(--st-ink-100); color: var(--st-ink-800); }
.page-quot .qt-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.page-quot .qt-foot {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--st-ink-500);
}
.page-quot .qt-foot a { color: var(--st-brand-700); }

.page-quot .qt-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 1080px;
  margin: 0 auto 16px;
  padding: 13px 16px;
  border: 1px solid #f5d98f;
  border-radius: var(--st-r-md);
  background: #fffaeb;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7a4f0b;
}
.page-quot .qt-note i { margin-top: 2px; color: #c98a12; }
.page-quot .qt-note span { flex: 1 1 auto; }

@media (max-width: 991px) {
  .page-quot .qt-layout { grid-template-columns: 1fr; }
  .page-quot .qt-visual { position: static; top: auto; }
  .page-quot .qt-visual img { max-width: 200px; }
}

@media (max-width: 767px) {
  .page-quot .qt-card { padding: 20px 18px 22px; }
  .page-quot .qt-grid { grid-template-columns: 1fr; }
  .page-quot .qt-actions { flex-direction: column-reverse; }
  .page-wrapper.page-quot .qt-btn { width: 100%; flex: 0 0 auto; }
  .page-quot .qt-sum-total { flex-direction: column; align-items: flex-start; gap: 4px; }
  .page-quot .qt-sum-total small { text-align: left; }
}

/* ==========================================================================
   48. shop_desk_quotation.php 견적서 출력 전용 (Scoped: .page-quotdoc)

   ※ .page-quotdoc 스코프를 반드시 유지해 주세요.
   ※ 이 섹션 맨 아래에 @media print 가 있습니다. 인쇄할 때 머리글·바닥글·
     버튼을 숨기고 견적서만 남깁니다. (원본은 window.print() 로 화면
     전체를 인쇄해 헤더와 푸터가 함께 나왔습니다)
   ========================================================================== */

.page-quotdoc .qd-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

.page-quotdoc .qd-head {
  max-width: 900px;
  margin: 0 auto 22px;
  text-align: center;
}
.page-quotdoc .qd-head h2 {
  margin: 0 0 8px;
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-ink-900);
}
.page-quotdoc .qd-head p {
  margin: 0;
  font-size: 14px;
  color: var(--st-ink-500);
}

.page-quotdoc .qd-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 13px 16px;
  border: 1px solid #f5d98f;
  border-radius: var(--st-r-md);
  background: #fffaeb;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7a4f0b;
}
.page-quotdoc .qd-note i { margin-top: 2px; color: #c98a12; }
.page-quotdoc .qd-note span { flex: 1 1 auto; }

/* ---- 문서 ---- */
.page-quotdoc .qd-sheet-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
}
.page-quotdoc .qd-sheet {
  min-width: 760px;
  padding: 34px 36px 28px;
  background: var(--st-white);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-md);
  box-shadow: var(--st-shadow-md);
  color: #1a1a1a;
}

.page-quotdoc .qd-doc-title {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 14px;
  text-indent: 14px;
  text-align: center;
  color: #111;
}
.page-quotdoc .qd-doc-no {
  margin: 0 0 22px;
  text-align: center;
  font-size: 12px;
  color: #777;
  letter-spacing: .02em;
}

/* ---- 수신 / 공급자 ---- */
.page-quotdoc .qd-parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 20px;
}
.page-quotdoc .qd-to {
  padding: 16px 18px;
  border: 1px solid #d8ddda;
  border-radius: 6px;
}
.page-quotdoc .qd-to dl { margin: 0; }
.page-quotdoc .qd-to-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
}
.page-quotdoc .qd-to dt {
  flex: 0 0 60px;
  margin: 0;
  font-weight: 700;
  color: #555;
  letter-spacing: .12em;
}
.page-quotdoc .qd-to dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #111;
  word-break: break-all;
}
.page-quotdoc .qd-to dd strong { font-weight: 700; }

.page-quotdoc .qd-from {
  padding: 14px 16px;
  border: 1px solid #d8ddda;
  border-radius: 6px;
  text-align: center;
}
.page-quotdoc .qd-from img {
  display: block;
  width: auto;
  max-width: 150px;
  height: auto;
  margin: 0 auto 8px;
}
.page-quotdoc .qd-from p {
  margin: 0 0 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #222;
}
.page-quotdoc .qd-from .qd-from-name { font-size: 15px; font-weight: 800; }
.page-quotdoc .qd-from .qd-from-sub { font-size: 12px; color: #666; }

/* ---- 합계 강조 ---- */
.page-quotdoc .qd-grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 2px solid #333;
  border-radius: 4px;
  background: #fafafa;
}
.page-quotdoc .qd-grand-label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #333;
}
.page-quotdoc .qd-grand-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #111;
  font-variant-numeric: tabular-nums;
}
.page-quotdoc .qd-grand-value small {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0;
}

/* ---- 품목 표 ---- */
.page-quotdoc table.qd-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.page-quotdoc .qd-items th,
.page-quotdoc .qd-items td {
  padding: 9px 10px;
  border: 1px solid #cfd6d3;
  text-align: center;
  vertical-align: middle;
  color: #222;
}
.page-quotdoc .qd-items thead th {
  background: #eef2f0;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
}
.page-quotdoc .qd-items .qd-left  { text-align: left; }
.page-quotdoc .qd-items .qd-right { text-align: right; font-variant-numeric: tabular-nums; }
.page-quotdoc .qd-items .qd-sum th,
.page-quotdoc .qd-items .qd-sum td { background: #f7f9f8; font-weight: 700; }
.page-quotdoc .qd-items .qd-sum-total th,
.page-quotdoc .qd-items .qd-sum-total td { background: #eef2f0; font-weight: 800; }
.page-quotdoc .qd-items .qd-event {
  font-size: 12px;
  font-weight: 700;
  color: #0f8155;
  white-space: nowrap;
}

/* ---- 제품 설명 ---- */
.page-quotdoc .qd-features {
  margin: 0 0 18px;
  padding: 15px 18px;
  border: 1px solid #d8ddda;
  border-radius: 6px;
  background: #fbfcfc;
}
.page-quotdoc .qd-features ul { margin: 0; padding: 0; list-style: none; }
.page-quotdoc .qd-features li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}
.page-quotdoc .qd-features li:last-child { margin-bottom: 0; }
.page-quotdoc .qd-features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border: 1px solid #6b7772;
}

/* ---- 조건 ---- */
.page-quotdoc table.qd-terms {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.page-quotdoc .qd-terms th,
.page-quotdoc .qd-terms td {
  padding: 9px 12px;
  border: 1px solid #cfd6d3;
  vertical-align: middle;
  color: #222;
}
.page-quotdoc .qd-terms th {
  width: 118px;
  background: #eef2f0;
  font-weight: 700;
  letter-spacing: .1em;
  color: #333;
  text-align: center;
  white-space: nowrap;
}

.page-quotdoc .qd-foot {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #d8ddda;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: #666;
}

/* ---- 버튼 ---- */
.page-quotdoc .qd-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.page-quotdoc .qd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--st-r-pill);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.page-quotdoc .qd-btn:hover { transform: translateY(-1px); }
.page-quotdoc .qd-btn i { font-size: 13px; }
.page-quotdoc .qd-btn-primary {
  background: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-quotdoc .qd-btn-primary:hover { background: var(--st-brand-600); color: var(--st-white); box-shadow: var(--st-shadow-md); }
.page-quotdoc .qd-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-border);
  color: var(--st-ink-600);
}
.page-quotdoc .qd-btn-ghost:hover { background: var(--st-ink-100); color: var(--st-ink-800); }

@media (max-width: 767px) {
  .page-quotdoc .qd-sheet { padding: 24px 20px 20px; }
  .page-quotdoc .qd-actions { flex-direction: column; }
  .page-wrapper.page-quotdoc .qd-btn { width: 100%; }
}

/* ==========================================================================
   48-1. 인쇄

   ★ 원본은 window.print() 로 화면 전체를 인쇄해 머리글·메뉴·푸터가
     함께 나왔습니다. 여기서는 견적서만 남깁니다.
   ========================================================================== */
@media print {
  .page-quotdoc .qd-no-print,
  .page-quotdoc .qd-head,
  .page-quotdoc .qd-note,
  .page-quotdoc .qd-actions { display: none !important; }

  /* 템플릿의 머리글·바닥글·부가 요소 숨김 */
  .page-quotdoc .main-header,
  .page-quotdoc .sticky-header,
  .page-quotdoc .mobile-menu,
  .page-quotdoc .nav-outer,
  .page-quotdoc .page-title,
  .page-quotdoc .breadcrumb-outer,
  .page-quotdoc .main-footer,
  .page-quotdoc .footer-bottom,
  .page-quotdoc .scroll-to-top,
  .page-quotdoc .preloader { display: none !important; }

  .page-quotdoc,
  .page-quotdoc .qd-page {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }
  .page-quotdoc .auto-container {
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
  }
  .page-quotdoc .qd-sheet-wrap {
    max-width: none;
    overflow: visible;
  }
  .page-quotdoc .qd-sheet {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .page-quotdoc .qd-items,
  .page-quotdoc .qd-terms { page-break-inside: avoid; }
  .page-quotdoc .qd-doc-title { font-size: 26px; }

  /* 배경색이 인쇄에서도 유지되도록 */
  .page-quotdoc .qd-items thead th,
  .page-quotdoc .qd-items .qd-sum th,
  .page-quotdoc .qd-items .qd-sum td,
  .page-quotdoc .qd-items .qd-sum-total th,
  .page-quotdoc .qd-items .qd-sum-total td,
  .page-quotdoc .qd-terms th,
  .page-quotdoc .qd-grand {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@page { margin: 14mm 12mm; }

/* ==========================================================================
   49. shop_desk_pay_completion.php 결제 완료 전용 (Scoped: .page-paydone)

   ※ .page-paydone 스코프를 반드시 유지해 주세요.
   ========================================================================== */

.page-paydone .pd-page {
  padding: var(--st-section-y) 0 calc(var(--st-section-y) + 8px);
  background: var(--st-ink-050);
}

/* ---- 완료 안내 ---- */
.page-paydone .pd-hero {
  max-width: 640px;
  margin: 0 auto 26px;
  text-align: center;
}
.page-paydone .pd-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--st-brand-500);
  color: var(--st-white);
  font-size: 26px;
  box-shadow: 0 0 0 8px var(--st-brand-50);
}
.page-paydone .pd-hero.is-pending .pd-check {
  background: #c98a12;
  box-shadow: 0 0 0 8px #fffaeb;
}

.page-paydone .pd-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-ink-900);
}
.page-paydone .pd-hero p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--st-ink-500);
}
.page-paydone .pd-hero strong { color: var(--st-ink-700); }

/* ---- 금액 강조 ---- */
.page-paydone .pd-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 880px;
  margin: 0 auto 20px;
  padding: 24px 22px;
  border: 1px solid var(--st-brand-200);
  border-radius: var(--st-r-lg);
  background: var(--st-brand-50);
  text-align: center;
}
.page-paydone .pd-amount-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--st-brand-700);
}
.page-paydone .pd-amount-value {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--st-brand-700);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.page-paydone .pd-amount-value small {
  margin-left: 4px;
  font-size: .45em;
  font-weight: 700;
}
.page-paydone .pd-amount-sub {
  font-size: 13px;
  color: var(--st-brand-600);
}

/* ---- 카드 2단 ---- */
.page-paydone .pd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
  align-items: start;
}
.page-paydone .pd-card {
  padding: 24px 24px 20px;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-sm);
}
.page-paydone .pd-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--st-border-soft);
  font-size: 16px;
  font-weight: 700;
  color: var(--st-ink-900);
}
.page-paydone .pd-card-title i { font-size: 14px; color: var(--st-brand-500); }

.page-paydone .pd-list { margin: 0; }
.page-paydone .pd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--st-border-soft);
}
.page-paydone .pd-row:last-child { border-bottom: 0; padding-bottom: 0; }
.page-paydone .pd-row dt {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--st-ink-500);
}
.page-paydone .pd-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14.5px;
  color: var(--st-ink-800);
  text-align: right;
  word-break: break-all;
}
.page-paydone .pd-row dd strong {
  font-weight: 800;
  color: var(--st-ink-900);
  font-variant-numeric: tabular-nums;
}
.page-paydone .pd-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.page-paydone .pd-note {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--st-r-pill);
  background: var(--st-ink-100);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--st-ink-600);
}

/* ---- 안내 ---- */
.page-paydone .pd-guide {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 880px;
  margin: 20px auto 0;
  padding: 15px 18px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-md);
  background: var(--st-surface);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--st-ink-600);
}
.page-paydone .pd-guide i { margin-top: 3px; color: var(--st-brand-500); }
.page-paydone .pd-guide span { flex: 1 1 auto; }
.page-paydone .pd-guide a { color: var(--st-brand-700); font-weight: 600; }

/* ---- 버튼 ---- */
.page-paydone .pd-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.page-paydone .pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--st-r-pill);
  font-family: var(--st-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.page-paydone .pd-btn:hover { transform: translateY(-1px); }
.page-paydone .pd-btn i { font-size: 13px; }
.page-paydone .pd-btn-primary {
  background: var(--st-brand-500);
  color: var(--st-white);
  box-shadow: var(--st-shadow-sm);
}
.page-paydone .pd-btn-primary:hover {
  background: var(--st-brand-600);
  color: var(--st-white);
  box-shadow: var(--st-shadow-md);
}
.page-paydone .pd-btn-ghost {
  background: var(--st-white);
  border-color: var(--st-border);
  color: var(--st-ink-600);
}
.page-paydone .pd-btn-ghost:hover { background: var(--st-ink-100); color: var(--st-ink-800); }

@media (max-width: 767px) {
  .page-paydone .pd-grid { grid-template-columns: 1fr; }
  .page-paydone .pd-card { padding: 20px 18px 18px; }
  .page-paydone .pd-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .page-paydone .pd-row dd { text-align: left; }
  .page-paydone .pd-actions { flex-direction: column-reverse; }
  .page-wrapper.page-paydone .pd-btn { width: 100%; }
}

/* ==========================================================================
   13. 반응형
   ========================================================================== */
@media (max-width: 1199px) {
  .auto-container { max-width: 992px; }

  .services-four .finance-image_two,
  .services-four .finance-image_two.left-50 {
    left: 0 !important;
    position: relative !important;
    margin-top: 20px;
  }
}

@media (max-width: 991px) {
  :root { --st-section-y: clamp(40px, 6vw, 60px); }

  .slider-four .slide { min-height: 400px; }

  .slider-four_inner { max-width: 100%; }

  .slider-four_text { max-width: 100%; }

  .finance-three_image-column { margin-bottom: 24px; }

  .testimonial-three_video-column { margin-bottom: 24px; }

  /* 반쪽 컬럼은 모바일에서 전체 폭으로 */
  .services-four .finance-one_content-column {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* OS 카드는 태블릿에서 2열 */
  .agency-one .agency-block_one {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .services-four .finance-one_content-column:last-child { margin-top: 28px; }
}

@media (max-width: 767px) {
  .auto-container { padding-left: 18px; padding-right: 18px; }

  .slider-four .slide { min-height: 360px; }

  .slider-four_image-layer.back-layer {
    background: linear-gradient(
      180deg,
      rgba(8, 26, 21, .72) 0%,
      rgba(8, 26, 21, .86) 100%
    );
  }

  .slider-four_heading { font-size: clamp(26px, 7vw, 34px) !important; }

  .slider-four .owl-dots { bottom: 22px; }

  /* 2열 카드는 1열로 */
  .counter-two .news-block-four,
  .finance-three .feature-five {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* 다운로드 3열은 유지하되 컴팩트하게 */
  .business-three.down .news-block-four {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .news-block-four .lower-content { padding: 16px; }

  .testimonial-block_three-inner { padding: 18px 16px 16px; }

  .testimonial-block_three-inner h4 { padding-right: 34px; font-size: 16px !important; }

  .testimonial-block_three-inner .quote-icon { font-size: 24px; top: 18px; right: 18px; }

  .default-skill-title.skil-line span:last-child { font-size: 20px; }

  /* 모바일에서 숨겨진 후기 이미지 컬럼 처리 유지 */
  .xs-none { display: none !important; }
}

@media (max-width: 480px) {
  .agency-block_one-content { padding: 20px 14px 18px; }
  .agency-block_one-image { width: 68px; height: 68px; }
  .agency-block_one-image i { font-size: 30px; }
  .feature-five_inner { padding: 18px 16px; }
}

/* ==========================================================================
   14. 접근성 — 모션 최소화 설정 존중
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-wrapper *,
  .page-wrapper *::before,
  .page-wrapper *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .slider-four_image-layer { transform: none !important; }
}

/* 인쇄 */
@media print {
  .slider-four,
  .business-three.down,
  .preloader { display: none !important; }
  .page-wrapper { color: #000; }
}