/* ===== content: 서브 페이지에서만 로드 ===== */

/* ===== 랜딩페이지 50만원 ===== */
.land-mini {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 4rem;margin-top: 3rem;padding: 4.4rem 5rem;border-radius: var(--radius);background: linear-gradient(135deg, var(--color-primary), var(--color-primary-3));color: #fff;overflow: hidden;}
.land-mini::after {content: "";position: absolute;right: -6rem;top: -8rem;width: 28rem;height: 28rem;border-radius: 50%;background: rgba(var(--accent-rgb), .25);}
.land-mini > * {position: relative;z-index: 1;}
.land-mini h3 {font-size: 3.7rem;font-weight: 900;}
.land-mini p {margin-top: .8rem;font-size: 1.9rem;opacity: .9;}
.land-mini .lm-price {white-space: nowrap;font-size: 2.2rem;font-weight: 700;}
.land-mini .lm-price strong {font-size: 6.2rem;font-weight: 900;letter-spacing: -.2rem;color: var(--color-accent);}

/* ===== 랜딩 반응형 ===== */
@media (max-width: 1024px) {
  .land-mini {flex-direction: column;align-items: flex-start;gap: 2.4rem;}
}
@media (max-width: 768px) {
  .land-mini {padding: 3.2rem 2.4rem;}
  .land-mini h3 {font-size: 3.1rem;}
}

/* ===== 전체 배경: 오로라 + 격자 ===== */
.sub-sec.alt {background: rgba(255, 255, 255, .72);backdrop-filter: blur(1.2rem);}

/* ===== 카드: 마우스 따라오는 빛 ===== */
.info-card, .tl-body {position: relative;}
.info-card::after, .tl-body::after {content: "";position: absolute;inset: 0;border-radius: inherit;background: radial-gradient(32rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--primary-rgb), .1), transparent 60%);opacity: 0;transition: opacity .3s;pointer-events: none;}
.info-card:hover::after, .tl-body:hover::after {opacity: 1;}
.info-card:hover {transform: none;translate: 0 -.8rem;}

/* ===== 서브 히어로 보강 ===== */
.sub-hero {background: linear-gradient(135deg, var(--color-soft), var(--tint-warm));}
.sub-hero::before {animation: drift 8s ease-in-out infinite alternate;}
.sub-hero::after {animation: drift 6s ease-in-out infinite alternate-reverse;}

/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .sub-hero::before, .sub-hero::after {animation: none !important;}
}

/* ===== 서브 히어로 ===== */
.sub-hero {position: relative;padding: calc(var(--header-h) + 7rem) 0 6rem;background: linear-gradient(135deg, var(--color-soft), var(--tint-warm));overflow: hidden;}
.sub-hero::before {content: "";position: absolute;right: -10rem;top: -10rem;width: 44rem;height: 44rem;border-radius: 50%;background: var(--tint-1);}
.sub-hero::after {content: "";position: absolute;right: 20rem;bottom: -9rem;width: 22rem;height: 22rem;border-radius: 50%;background: rgba(var(--accent-rgb), .55);}
.sub-hero .inner {position: relative;z-index: 1;}
.crumb {display: flex;flex-wrap: wrap;gap: .8rem;margin-bottom: 2.4rem;font-size: 1.6rem;color: var(--color-muted);}
.crumb li + li::before {content: "/";margin-right: .8rem;opacity: .5;}
.crumb a:hover {color: var(--color-primary);text-decoration: underline;}
.sub-title {font-size: 6.6rem;font-weight: 600;line-height: 1.3;letter-spacing: -.25rem;}
.sub-desc {margin-top: 2.4rem;max-width: 76rem;font-size: 2.4rem;color: var(--color-muted);}

/* ===== 하위 메뉴 탭 ===== */
.sub-tabs {position: sticky;top: var(--header-h);z-index: 50;background: var(--color-bg);border-bottom: .1rem solid var(--color-line);overflow-x: auto;scrollbar-width: none;}
.sub-tabs::-webkit-scrollbar {display: none;}
.sub-tabs ul {display: flex;gap: 1rem;max-width: var(--container-width);padding: 1.6rem var(--page-gutter);margin-inline: auto;white-space: nowrap;}
.sub-tabs a {display: block;padding: 1rem 2.4rem;border-radius: 10rem;border: .2rem solid var(--color-line);font-size: 1.8rem;font-weight: 700;transition: background .3s, color .3s, border-color .3s;}
.sub-tabs a:hover {border-color: var(--color-primary);color: var(--color-primary);}
.sub-tabs a.is-on {background: var(--color-ink);border-color: var(--color-ink);color: #fff;}

/* ===== 본문 공통 ===== */
.sub-sec {padding: 10rem 0;}
.sub-sec.alt {background: rgba(255, 255, 255, .72);backdrop-filter: blur(1.2rem);}
.lead {max-width: 90rem;font-size: 3.7rem;font-weight: 600;line-height: 1.5;letter-spacing: -.1rem;}
.lead em {color: var(--color-primary);}
.lead-sub {margin-top: 2.4rem;max-width: 76rem;font-size: 2.2rem;color: var(--color-muted);}
.card-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.4rem;}
.card-grid.c2 {grid-template-columns: repeat(2, 1fr);}
.card-grid.c4 {grid-template-columns: repeat(4, 1fr);}
.info-card {padding: 3.6rem 3.2rem;border-radius: var(--radius);background: var(--color-white);border: .1rem solid var(--color-line);transition: transform .4s var(--ease), box-shadow .4s;}
.alt .info-card {background: var(--color-bg);}
.info-card:hover {transform: translateY(-.8rem);box-shadow: var(--shadow);}
.info-card .no {display: block;margin-bottom: 2rem;font-size: 1.6rem;font-weight: 800;letter-spacing: .15rem;color: var(--color-primary);}
.info-card h3 {margin-bottom: 1.4rem;font-size: 2.6rem;font-weight: 800;line-height: 1.35;}
.info-card p {font-size: 1.8rem;color: var(--color-muted);}
.callout {display: flex;align-items: center;justify-content: space-between;gap: 3rem;padding: 4rem 4.4rem;border-radius: var(--radius);background: var(--color-accent);}
.callout h3 {font-size: 3.1rem;font-weight: 800;}
.callout p {margin-top: .8rem;font-size: 1.9rem;}

/* ===== 타임라인 ===== */
.tl {position: relative;max-width: 100rem;}
.tl::before {content: "";position: absolute;left: 3.2rem;top: 2rem;bottom: 2rem;width: .2rem;background: var(--color-line);}
.tl-item {position: relative;display: flex;gap: 3.6rem;padding-bottom: 4rem;}
.tl-item:last-child {padding-bottom: 0;}
.tl-no {position: relative;z-index: 1;flex: none;display: flex;align-items: center;justify-content: center;width: 6.4rem;height: 6.4rem;border-radius: 50%;background: var(--color-primary);color: #fff;font-size: 2.2rem;font-weight: 800;}
.tl-body {flex: 1;padding: 3rem 3.6rem;border-radius: var(--radius);background: var(--color-white);border: .1rem solid var(--color-line);}
.tl-body h3 {font-size: 2.9rem;font-weight: 800;margin-bottom: 1rem;}
.tl-body p {font-size: 1.9rem;color: var(--color-muted);}
.tl-body .tag {display: inline-block;margin-top: 1.6rem;padding: .6rem 1.4rem;border-radius: 10rem;background: var(--color-soft);color: var(--color-primary);font-size: 1.5rem;font-weight: 700;}

/* ===== 비교표 ===== */
.cmp-wrap {overflow-x: auto;border-radius: var(--radius);border: .1rem solid var(--color-line);background: var(--color-white);}
.cmp {width: 100%;min-width: 80rem;border-collapse: collapse;font-size: 1.9rem;}
.cmp caption {position: absolute;width: .1rem;height: .1rem;overflow: hidden;clip: rect(0, 0, 0, 0);}
.cmp th, .cmp td {padding: 2.2rem 2.4rem;text-align: center;border-bottom: .1rem solid var(--color-line);}
.cmp thead th {background: var(--color-ink);color: #fff;font-size: 2.0rem;font-weight: 800;}
.cmp thead th.best {background: var(--color-primary);}
.cmp tbody th {text-align: left;font-weight: 700;background: var(--table-th);}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td {border-bottom: 0;}
.cmp td.best {background: var(--color-soft);font-weight: 700;}
.cmp .pend {color: var(--color-muted);font-size: 1.6rem;}

/* ===== 자료 필요 표시 ===== */
.pending {display: inline-block;padding: .4rem 1.2rem;border-radius: 10rem;background: #fff3c4;font-size: 1.5rem;font-weight: 700;}

/* ===== 문서(방침) ===== */
.doc {max-width: 96rem;}
.doc .draft {margin-bottom: 4rem;padding: 2rem 2.4rem;border-radius: 1.4rem;background: #fff3c4;font-size: 1.8rem;}
.doc h2 {margin: 5rem 0 1.6rem;font-size: 3.1rem;font-weight: 800;}
.doc h2:first-of-type {margin-top: 0;}
.doc p, .doc li {font-size: 1.9rem;color: #33353f;}
.doc ol {list-style: decimal;padding-left: 2.4rem;}
.doc ol li + li, .doc ul.dot li + li {margin-top: .8rem;}
.doc ul.dot {list-style: disc;padding-left: 2.4rem;}

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
  .sub-title {font-size: 5.5rem;}
  .card-grid.c4 {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 1024px) {
  .card-grid {grid-template-columns: repeat(2, 1fr);}
  .callout {flex-direction: column;align-items: flex-start;}
}
@media (max-width: 768px) {
  .sub-hero {padding: calc(var(--header-h) + 4rem) 0 4rem;}
  .sub-title {font-size: 4.4rem;letter-spacing: -.15rem;}
  .sub-desc {font-size: 2.0rem;}
  .sub-tabs ul {padding-inline: 2rem;}
  .sub-sec {padding: 6rem 0;}
  .lead {font-size: 2.6rem;}
  .lead-sub {font-size: 1.9rem;}
  .card-grid, .card-grid.c2, .card-grid.c4 {grid-template-columns: 1fr;}
  .callout {padding: 3rem 2.4rem;}
  .tl::before {left: 2.4rem;}
  .tl-item {gap: 1.6rem;}
  .tl-no {width: 4.8rem;height: 4.8rem;font-size: 1.8rem;}
  .tl-body {padding: 2.4rem 2rem;}
  .tl-body h3 {font-size: 2.4rem;}
  .doc h2 {font-size: 2.6rem;}
}
@media (prefers-reduced-motion: reduce) {
  .info-card, .sub-tabs a {transition: none;}
}

/* ===== 게시판 등 테마 페이지가 아닌 서브 화면 (sub.php) ===== */
.sub-board {padding-block: 6rem 10rem;}
.sub-board > * {max-width: 100%;}

/* 기존 password.skin.php (#pw_confirm) 전용. PHP/HTML 수정 불필요. */
body #pw_confirm.mbskin {
  position: relative;
  width: calc(100% - 40px);
  max-width: 480px;
  min-width: 0;
  margin: clamp(40px, 12vh, 120px) auto 48px;
  padding: 40px;
  border: 1px solid #dfe6f3;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 56px rgba(30, 60, 110, .08);
  color: #182338;
  font-family: var(--font-base, "Pretendard", "Malgun Gothic", sans-serif);
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  letter-spacing: -.3px;
}
body #pw_confirm *,
body #pw_confirm::before {box-sizing: border-box;}
body #pw_confirm.mbskin::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 26px;
  border: 1px solid #e2eaff;
  border-radius: 18px;
  background: #f0f5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231553ff' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='7' y='14' width='18' height='14' rx='4'/%3E%3Cpath d='M11 14V9a5 5 0 0 1 10 0v5M16 20v3'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
}
body #pw_confirm h1 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #182338;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1px;
}
body #pw_confirm > p {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #68768d;
  font-size: 14px;
  line-height: 1.85;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}
body #pw_confirm > p strong {
  display: block;
  margin: 0 0 7px;
  color: #34435d;
  font-size: 15px;
  font-weight: 600;
}
body #pw_confirm form {margin: 30px 0 0;padding: 0;}
body #pw_confirm fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
body #pw_confirm .sound_only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
body #pw_confirm input[type="password"] {
  display: block;
  width: 100%;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0 17px;
  border: 1px solid #d5dfef;
  border-radius: 12px;
  background: #fff;
  color: #182338;
  font: inherit;
  font-size: 16px;
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s;
}
body #pw_confirm input[type="password"]::placeholder {color: #94a0b4;opacity: 1;}
body #pw_confirm input[type="password"]:focus {
  outline: 0;
  border-color: #1553ff;
  box-shadow: 0 0 0 4px rgba(21, 83, 255, .09);
}
body #pw_confirm input[type="submit"] {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid #1553ff;
  border-radius: 12px;
  background: #1553ff;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
body #pw_confirm input[type="submit"]:hover {
  border-color: #1044d5;
  background: #1044d5;
  box-shadow: 0 6px 18px rgba(21, 83, 255, .16);
}
body #pw_confirm input[type="submit"]:active {background: #0d37af;}
body #pw_confirm input[type="submit"]:focus-visible {outline: 2px solid #1553ff;outline-offset: 4px;}
@media (max-width: 520px) {
  body #pw_confirm.mbskin {width: calc(100% - 32px);margin: 32px auto;padding: 30px 24px;border-radius: 20px;}
  body #pw_confirm h1 {font-size: 27px;}
  body #pw_confirm.mbskin::before {margin-bottom: 22px;}
}
@media (prefers-reduced-motion: reduce) {
  body #pw_confirm input[type="password"],body #pw_confirm input[type="submit"] {transition: none;}
}