@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* =====================================================
   1. 변수
   ===================================================== */
:root {
  --c-primary: #3b5bfd;
  --c-primary-dark: #2a49e8;
  --c-primary-light: #e0e5fe;
  --c-dark: #232a3a;
  --c-sub: #6b7280;
  --c-mute: #9aa0ab;
  --c-line: #e3e5e9;
  --c-danger: #fb4b4b;
  --c-bg: #f1f2f4;
  --c-white: #ffffff;

  /* font-size (10px = 1rem) */
  --fs-14: 1.4rem;
  --fs-16: 1.6rem;
  --fs-18: 1.8rem;
  --fs-20: 2rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-28: 2.8rem;
  --fs-34: 3.4rem;
  --fs-36: 3.6rem;
  --fs-48: 4.8rem;
  --fs-56: 5.6rem;
  --fs-66: 6.6rem;
  --fs-90: 9rem;
}

/* =====================================================
   2. 뼈대 — 모든 페이지 공통
   ===================================================== */
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--c-dark);
  background: var(--c-bg);
}

#wrap {
  position: relative;
  min-height: 100vh;
  background: var(--c-bg);
}

.section { padding: 2rem 0 8rem; }

/* 화면 전체를 채우고 세로 가운데 정렬 */
.section-full {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 좌 : 카피 / 우 : 콘텐츠 2단 구성 */
.layout-split {
  display: grid;
  grid-template-columns: 1fr 62rem;
  gap: 8rem;
  align-items: center;
}

.sec-eyebrow {
  color: var(--c-mute);
  font-size: var(--fs-24);
}

.sec-title {
  margin-top: 1.6rem;
  font-size: var(--fs-56);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.02em;
  /* 등급 문구처럼 <br> 없이 들어오는 글이 '필요/가 있어요' 처럼 어절 중간에서
     잘리지 않게 한다 (긴 단어는 그래도 넘기지 않도록 대비) */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* =====================================================
   3. 공통 컴포넌트
   ===================================================== */
.badge {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: .6rem;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.2;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 2.1rem 3rem;
  border-radius: 1rem;
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .2s ease;
}
.btn-primary {
  background: var(--c-primary);
  color: var(--c-white);
}
.btn-primary:hover { background: var(--c-primary-dark); }

/* 입력이 아직 유효하지 않을 때 */
.btn:disabled,
.btn[disabled] {
  background: var(--c-line);
  color: var(--c-mute);
  cursor: default;
}

/* 연한 파랑 — 두 갈래 중 소극적인 쪽에 쓴다 */
.btn-soft {
  background: var(--c-primary-light);
  color: var(--c-primary);
}
.btn-soft:hover { background: #d2d9fd; }

.btn-block { width: 100%; }

/* 느린 요청 알림 (common/loading.js)
   누른 뒤 0.4초가 지나도 응답이 없으면 글자 옆에 스피너가 붙는다.
   크기는 버튼 글자에 맞춰 em 으로 잡고, 색은 글자색(currentColor)을 따른다. */
[data-loading][aria-busy="true"] { pointer-events: none; }
.is-loading::after {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-left: .8rem;
  border: .2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: iroohuSpin .7s linear infinite;
}
@keyframes iroohuSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .is-loading::after { animation-duration: 2s; }
}

.card {
  display: block;
  background: var(--c-white);
  border-radius: 2.4rem;
}

/* 카드 전체가 링크일 때 */
a.card {
  transition: transform .25s ease, box-shadow .25s ease;
}
a.card:hover {
  transform: translateY(-.4rem);
  box-shadow: 0 1.2rem 3rem rgba(35, 42, 58, .08);
}

/* 목록 오른쪽 화살표 — home / improve 공용 */
.chevron {
  flex: 0 0 auto;
  width:3rem;
  height:3rem;
  color: #0D1C2D80;
}

/* 화면 좌상단 돌아가기 — 문서 흐름에서 빼서 .section-full 높이에 영향을 주지 않게 한다 */
.page-back {
  position: absolute;
  top: 6.4rem;
  left: 0;
  right: 0;
  z-index: 2;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: var(--fs-34);
  font-weight: 700;
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.back-link svg {
  display: block;
  width:3.5rem;
  height:3.5rem;
}

/* 안내 문구 박스 */
.notice {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem 2rem;
  border-radius: 1.2rem;
  background: var(--c-line);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.5;
}
.notice img {
  flex: 0 0 auto;
  width: 3rem;
}

/* 입력 필드 */
.field-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.field {
  cursor: text;          /* 카드 어디를 눌러도 입력으로 이어진다 */
  padding: 1.8rem 2rem 1.6rem;
  border-radius: 1.2rem;
  background: var(--c-white);
}

.field-label {
  display: block;
  color: var(--c-mute);
  font-size: var(--fs-18);
}

.field-row {
  display: flex;
  align-items: flex-end;
  gap: 1.6rem;
  margin-top: .4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--c-line);
}
.field-row input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--c-dark);
  font-size: var(--fs-36);
  font-weight: 700;
  line-height: 1.2;
}
.field-row input::placeholder { color: var(--c-line); }

.field-unit {
  flex: 0 0 auto;
  font-size: var(--fs-28);
  font-weight: 700;
  line-height: 1.35;
}

.field-help {
  margin-top: 1.2rem;
  color: var(--c-mute);
  font-size: var(--fs-18);
}

/* 유효성 오류 — 시안에 없는 상태라 색은 여기서만 쓴다 */
.field-error {
  margin-top: 1.2rem;
  color: #e0483c;
  font-size: var(--fs-16);
}
.field.is-error .field-row { border-bottom-color: #e0483c; }
/* 스크립트가 오류줄·도움말을 번갈아 감춘다 (test.php) */
.field-error[hidden], .field-help[hidden] { display: none; }

/* =====================================================
   4. 헤더 — 공통 (common/header.php)
   ===================================================== */
.app-header { padding: 4rem 0 0; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.app-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.app-logo img { width:20rem; }

/* 로고를 뺀 나머지 폭의 가운데에 놓인다 */
.header-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 6.6rem;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  color: var(--c-mute);
  font-size: var(--fs-28);
  font-weight: 700;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--c-dark); }
.nav-link.is-on { color: var(--c-primary); }

.nav-ico {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
}
.nav-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 아이콘은 활성(파랑) 이미지 한 장만 두고 filter 로 비활성/호버를 만든다.
     이 기본값이 빠지면 비활성 탭도 파랗게 나온다.
     grayscale(1) opacity(.26) = 원래 off 이미지가 배경 위에 찍히던 색 */
  filter: grayscale(1) brightness(1) opacity(.26);
  transition: filter .25s ease;
}
/* 세 상태의 함수 목록(grayscale/brightness/opacity)을 똑같이 맞춰야 값이 보간된다.
   drop-shadow 처럼 다른 함수를 섞으면 트랜지션 없이 튄다 */
.nav-link:hover .nav-ico img {
  filter: grayscale(1) brightness(.2) opacity(.92);
}
.nav-link.is-on .nav-ico img,
.nav-link.is-on:hover .nav-ico img {
  filter: grayscale(0) brightness(1) opacity(1);   /* 활성은 원본 파랑 그대로 */
}
/* 활성 탭 밑줄 — 헤더 아래쪽으로 떨어뜨려 놓는다 */
.nav-link.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.6rem;
  height: .3rem;
  border-radius: .2rem;
  background: var(--c-primary);
}

/* =====================================================
   5. 온보딩 카피·점수 카드 (login.php · result.php 공용)
   ===================================================== */
.section-hero .sec-title { margin-top: 2.4rem; }

.hero-desc {
  margin-top: 2.4rem;
  color: var(--c-sub);
  font-size: var(--fs-20);
  line-height: 1.6;
}

.hero-text .btn {
  max-width: 40rem;
  margin-top: 4rem;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 점수 카드 */
.score-card {
  padding: 4rem 3.2rem 4rem;
  text-align: center;
}

.card-title {
  display: block;
  font-size: var(--fs-28);
  font-weight: 700;
}

/* 반원 게이지 */
.gauge {
  position: relative;
  margin-top: 1.6rem;
}
.gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  /* 100점(과 0점)에서 노브가 뷰박스(0 0 280 154) 아래 끝에 딱 걸려
     링 밑면과 드롭섀도가 잘린다. 뷰박스를 키우면 비율이 바뀌어
     게이지 높이·점수 위치가 전부 틀어지므로 넘치도록 둔다. */
  overflow: visible;
}
.gauge-track,
.gauge-bar {
  fill: none;
  stroke-width: 26;
  stroke-linecap: round;
}
.gauge-track { stroke: #e9eaee; }
.gauge-bar { stroke: url(#gaugeGrad); }
/* 쉐도우는 SVG 필터로 준다 — SVG 도형엔 box-shadow 가 먹지 않고,
   CSS drop-shadow() 는 길이가 뷰박스 사용자단위로 해석돼 게이지 크기마다 달라진다.
   필터 정의는 각 페이지 SVG 의 <defs> 안에 있다 */
.gauge-knob-ring {
  fill: var(--c-white);
  filter: url(#knobShadow);
}
.gauge-knob-dot {
  fill: var(--c-primary);
  filter: url(#knobInner);
}

/* 반원 안쪽에 점수를 겹쳐 놓는다 */
.gauge-value {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  line-height: 1;
}
.gauge-value em {
  font-size: var(--fs-90);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -.03em;
}
.gauge-value span {
  margin-left: .4rem;
  font-size: var(--fs-66);
  font-weight: 700;
  color: var(--c-sub);
}

/* 게이지 반원이 비워둔 아래쪽 공간으로 끌어올린다 */
.score-grade {
  display: block;
  margin-top: -4rem;
  color: var(--c-primary);
  font-size: var(--fs-36);
  font-weight: 800;
}

.score-desc {
  word-break: keep-all;
  margin-top: .8rem;
  color: var(--c-sub);
  font-size: var(--fs-20);
}

/* 안내 카드 */
.info-card {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  padding: 3rem;
  border-radius: 2rem;
}
.info-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.info-ico img { width: 5rem; }

.info-text {
  font-size: var(--fs-22);
  font-weight: 700;
}

/* =====================================================
   6. 진단 (test.php)
   ===================================================== */
/* 3문항인 1단계가 가장 길다 — 한 화면에 들어가도록 여백을 잡았다 */
.section-step { padding: 4.8rem 0 4rem; }

/* 수정 모드에서는 진행바를 숨기는데, 그만큼(약 113px) 화면이 위로 올라붙는다.
   일반 단계 화면과 같은 위치에 오도록 위 여백으로 메운다. */
.section-step-edit { padding-top: 17.3rem; }

.step-progress {
  width: 100%;
  max-width: 77rem;
  margin: 0 auto 8rem;
  text-align: center;
}
.step-count {
  color: var(--c-dark);
  font-size: var(--fs-16);
  font-weight: 600;
}
.step-count em { color: var(--c-primary); font-size: var(--fs-18);}

.step-bars {
  display: flex;
  gap: .8rem;
  margin-top: 1.4rem;
}
.step-bars span {
  flex: 1 1 0;
  height: .7rem;
  border-radius: .4rem;
  background: var(--c-line);
}
.step-bars span.is-on { background: var(--c-primary); }

/* 좌측 카피는 문항 수와 무관하게 늘 같은 높이에서 시작한다
   (가운데 정렬하면 칸이 3개인 1단계만 아래로 내려간다) */
.step-form { row-gap: 0; }
.step-form .step-text  { grid-column: 1; grid-row: 1; align-self: start; margin-top: 3rem; }
.step-form .field-list { grid-column: 2; grid-row: 1; }
.step-form .step-foot  { grid-column: 2; grid-row: 2; margin-top: 3.2rem; }
.step-foot .btn { margin-top: 2.4rem; }

/* =====================================================
   7. 결과 (result.php)
   ===================================================== */
/* 카드가 많아 .section 기본 여백(8rem)이면 1080 모니터에서 세로 스크롤이 생긴다.
   box-sizing 이 border-box 라 min-height:100vh 안에 패딩이 포함된다 */
.section-result { padding: 4rem 0; }

.result-cards {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* 결과 카드에는 점수 아래 설명 문구가 없어 여백을 줄인다 */
.result-cards .score-card { padding-bottom: 2.6rem; }

/* 결과가 한 번에 드러나 보이도록 진입 시 페이드인.
   마스크가 걷히는 순간(body.is-ready — load 또는 3초)부터 시작해 중간부터 보이는 일이 없다 */
@keyframes iroohuFadeUp {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: none; }
}
/* is-ready 전에는 감춰 둔다 — 안 그러면 잠깐 보였다가 사라진 뒤 다시 떠오르는 깜빡임이 생긴다.
   스크립트가 꺼진 경우는 reset_head.php 의 <noscript> 가 다시 보이게 한다 */
.section-result .result-text,
.section-result .result-cards { opacity: 0; }
body.is-ready .section-result .result-text,
body.is-ready .section-result .result-cards { opacity: 1; }
body.is-ready .section-result .result-text  { animation: iroohuFadeUp .5s ease-out both; }
body.is-ready .section-result .result-cards { animation: iroohuFadeUp .5s .12s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  body.is-ready .section-result .result-text,
  body.is-ready .section-result .result-cards { animation: none; }
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.stat-card {
  padding: 2rem 2.8rem;
  border-radius: 1.6rem;
}
.stat-label {
  color: var(--c-mute);
  font-size: var(--fs-18);
}
.stat-value {
  display: block;
  margin-top: 1.2rem;
  font-size: var(--fs-28);
  font-weight: 700;
}

.save-card {
  padding: 2.2rem 2.8rem;
  border-radius: 1.6rem;
}
.save-q {
  color: var(--c-primary);
  font-size: var(--fs-16);
  font-weight: 600;
}
.save-desc {
  margin-top: .6rem;
  font-size: var(--fs-18);
  font-weight: 600;
}

.result-cards .btn { margin-top: .8rem; }

/* =====================================================
   8. 홈 (home.php)
   ===================================================== */
.section-home { padding: 3rem 0 4.8rem; }

/* align-items 를 두지 않아 기본 stretch — 좌우 칼럼 높이가 같아진다 */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 47rem;
  gap: 2rem;
}

.home-side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* 칼럼에 남는 높이는 아래쪽 콘텐츠 카드가 흡수한다 */
.home-side .link-card { flex: 1 1 auto; }

/* --- 점수 카드 --- */
.home-score {
  padding: 3.2rem;
  text-align: center;
}
.home-score .gauge {
  max-width: 50rem;
  margin: 0 auto;
}
/* 게이지를 크게 쓰는 화면이라 선을 얇게 잡는다 */
.gauge-thin .gauge-track,
.gauge-thin .gauge-bar { stroke-width: 21; }

/* 반원이 비워둔 아래쪽 공간으로 끌어올린다 */
.home-score .score-grade { margin-top: -5.2rem; }

.score-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2.4rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--c-line);
  text-align: left;
}
.score-stats > div { padding: 0 3.2rem; }
.score-stats > div + div { border-left: 1px solid var(--c-line); }

.home-score .btn { margin-top: 6.8rem; }

/* --- 체크인 카드 --- */
.checkin-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.8rem;
  border-radius: 2rem;
}
.checkin-ico {
  flex: 0 0 auto;
  width: 7.2rem;
}
.checkin-ico img { width: 100%; }

.checkin-body {
  flex: 1 1 auto;
  min-width: 0;
}
.checkin-eyebrow {
  display: block;
  color: var(--c-primary);
  font-size: var(--fs-18);
  font-weight: 700;
}
.checkin-title {
  display: block;
  margin-top: .4rem;
  word-break: keep-all;
  font-size: var(--fs-28);
  font-weight: 700;
  letter-spacing: -.02em;
}
.checkin-desc {
  display: block;
  margin-top: .4rem;
  color: var(--c-mute);
  font-size: var(--fs-18);
}

/* --- 콘텐츠 목록 카드 --- */
.link-card {
  padding: 2.8rem;
  border-radius: 2rem;
}

.link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.card-title-sm {
  font-size: var(--fs-28);
  font-weight: 800;
  letter-spacing: -.02em;
}
.sec-more {
  flex: 0 0 auto;
  color: var(--c-primary);
  font-size: var(--fs-18);
  font-weight: 700;
}

.link-list { margin-top: 2rem; }

.link-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 0;
}
.link-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1.4rem;
  background: #f2f4fb;
  overflow: hidden;
}
.link-ico img { width: 5rem; }

.link-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.link-row:hover .link-text { color: var(--c-primary); }

.checkin-card .chevron {
  width: 3rem;
  height: 3rem;
}

/* =====================================================
   9. 줄이기 방법 선택 (improve.php)
   ===================================================== */
.section-method { padding: 4rem 0; }

/* 좌측 카피는 카드 묶음보다 위에서 시작한다 (시안 기준).
   카드 폭은 공용 .layout-split(62rem)보다 조금 좁다 */
.method-split {
  grid-template-columns: 1fr 60rem;
  align-items: start;
}
.method-text { margin-top: 8rem; }
.method-text .sec-title { margin-top: 0; }

/* 설명 줄 수가 달라도 카드 높이는 같게 — 그리드의 1fr 행은 가장 큰 행에 맞춰진다 */
.method-list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2.8rem;
}

.method-card {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding: 2.4rem;
  border-radius: 2rem;
}

.method-ico {
  flex: 0 0 auto;
  width: 8rem;
}
.method-ico img {
  display: block;
  width: 100%;
}

.method-body {
  flex: 1 1 auto;
  min-width: 0;
}
.method-title {
  display: block;
  font-size: var(--fs-34);
  font-weight: 700;
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.method-desc {
  display: block;
  margin-top: .8rem;
  color: var(--c-sub);
  font-size: var(--fs-20);
  line-height: 1.5;
}

.method-card .chevron {
  width: 4rem;
  height: 4rem;
}
.method-card:hover .method-title { color: var(--c-primary); }

/* =====================================================
   10. 콘텐츠 목록 (content.php)
   ===================================================== */
/* 카드 4장이 한 화면보다 길어서 .section-full 을 쓰지 않는다 */
.section-content { padding: 4.4rem 0 3.6rem; }

.content-split {
  grid-template-columns: 1fr 60rem;
  align-items: start;
}
/* 좌측 제목은 카드 묶음의 30% 지점에 중심이 오도록 (시안 비율) */
.content-text { margin-top: 15rem; }
.content-text .sec-title { margin-top: 0; }

.content-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.content-card {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  /* 오른쪽은 좁게 — 4번째 카드 제목이 두 줄 안에 들어가야 한다 */
  padding: 1.8rem 1.6rem 1.8rem 2.4rem;
  border-radius: 2rem;
}

/* 아이콘 PNG 에 연한 타일 배경과 라운드가 이미 들어 있다 */
.content-ico {
  flex: 0 0 auto;
  width: 8.4rem;
}
.content-ico img {
  display: block;
  width: 100%;
}

.content-body {
  flex: 1 1 auto;
  min-width: 0;
}
.content-title {
  display: block;
  font-size: var(--fs-28);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.content-from {
  display: block;
  margin-top: .6rem;
  color: var(--c-mute);
  font-size: var(--fs-20);
}

.content-card:hover .content-title { color: var(--c-primary); }

/* =====================================================
   11. 콘텐츠 상세 (content-view.php)
   ===================================================== */
.section-article { padding: 4rem 0; }

.article-split {
  grid-template-columns: 1fr 60rem;
  /* '국민연금 가입기간으로' 가 한 줄에 들어가야 해서 좌측을 넓게 잡는다 */
  gap: 5rem;
  align-items: start;
}
.article-text { margin-top: 7rem; }

.article-card { padding: 3.2rem;   border: 1px solid #6778BB40;
  box-shadow: 0 0 10px #6778BB40;}

.article-body p {
  color: var(--c-dark);
  font-size: var(--fs-22);
  line-height: 1.75;
}
.article-body p + p { margin-top: 2.4rem; }

.article-source {
  margin-top: 2.4rem;
  color: var(--c-sub);
  font-size: var(--fs-22);
}

/* 외부 원문으로 나간다는 표시 (기능정의서 8.) */
.article-outlink {
  margin-top: 1.2rem;
  color: var(--c-mute);
  font-size: var(--fs-16);
  text-align: center;
}

/* 본문 카드 안이라 공용 .btn 보다 작게 */
.article-card .btn {
  margin-top: 2.4rem;
  padding: 2rem 2.4rem;
  font-size: var(--fs-22);
}

/* =====================================================
   12. 더보기 (more.php)
   ===================================================== */
.section-more { padding: 5.6rem 0 4rem; }

.set-group + .set-group { margin-top: 2.4rem; }

.set-label {
  margin-bottom: 1.6rem;
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 카드에 좌우 여백을 주면 행 사이 구분선이 시안처럼 안쪽으로 들어온다 */
.set-card {
  padding: 0 2.4rem;
  border-radius: 1.6rem;
}

.set-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 5.2rem;
}
.set-row + .set-row { border-top: 1px solid var(--c-line); }

.set-key {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-20);
  transition: color .2s ease;
  font-weight: 500;
}
.set-val {
  flex: 0 0 auto;
  color: var(--c-sub);
  font-size: var(--fs-20);
}


/* 회원탈퇴 — 확인 모달의 빨강과 같은 값을 쓴다 */
.set-link.is-danger .set-key { color: var(--c-danger); }


/* =====================================================
   13. 개인정보처리방침 (privacy.php)
   ===================================================== */
/* 내용이 길어 한 화면에 맞추지 않는다 — 스크롤을 전제로 한다 */
.section-privacy { padding: 16rem 0 8rem; }

.privacy-title {
  font-size: var(--fs-56);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.privacy-lead {
  margin-top: .8rem;
  color: var(--c-sub);
  font-size: 2.5rem;
  line-height: 1.4;
}

.privacy-meta {
  margin-top: .8rem;
  padding-left: 2.4rem;
  color: var(--c-sub);
  font-size: var(--fs-24);
  line-height: 1.7;
}
.privacy-meta li { list-style: disc; }

.privacy-card {
  margin-top: 3.2rem;
  padding: 2rem;
}

.privacy-sec + .privacy-sec { margin-top: 1.4rem; }

.privacy-sec-title {
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 본문은 한 줄 = 한 문단, 줄 사이를 띄우지 않는다 */
.privacy-sec p {
  margin-top: .4rem;
  color: var(--c-dark);
  font-size: var(--fs-16);
  line-height: 2.2rem;
}
.privacy-sec p + p { margin-top: 0; }

/* 항목 안쪽 들여쓴 불릿 — 위 .privacy-meta 와 같은 모양이되 본문 글자에 맞춘다 */
.privacy-sec-list {
  margin-top: 0;
  padding-left: 2rem;
  color: var(--c-dark);
  font-size: var(--fs-14);
  line-height: 2.2rem;
}
.privacy-sec-list + p { margin-top: 0; }
.privacy-sec a { text-decoration: underline; }

/* 장 제목 (terms.php 제1장 총칙 등) — 조항 제목보다 한 단계 크다 */
.privacy-chapter {
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: -.02em;
}
.privacy-sec + .privacy-chapter { margin-top: 1.6rem; }
.privacy-chapter + .privacy-sec { margin-top: 1.6rem; }

/* 이용약관 (terms.php) PC — 개인정보처리방침보다 글자가 크고 여유 있다.
   1024px 이하는 아래 모바일 규칙을 그대로 따른다 */
@media (min-width: 1025px) {
  .section-terms .privacy-card {
    margin-top: 4rem;
    padding: 2rem;
  }
  .section-terms .privacy-sec + .privacy-sec { margin-top: 1.6rem; }
  .section-terms .privacy-sec-title { font-size: var(--fs-20); }
  .section-terms .privacy-sec p {
    margin-top: .6rem;
    font-size: var(--fs-16);
    line-height: 1.7;
  }
  .section-terms .privacy-sec p + p,
  .section-terms .privacy-sec-list + p { margin-top: 0; }
  .section-terms .privacy-sec-list {
    padding-left: 2.4rem;
    font-size: var(--fs-16);
    line-height: 1.7;
  }
  /* 제목 없는 시행일 문구 — 한 줄 띄운다 */
  .section-terms .privacy-sec + .privacy-sec-note { margin-top: 2.4rem; }
  .section-terms .privacy-sec-note p { margin-top: 0; }
}

/* =====================================================
   14. 확인 모달 (more.php)
   ===================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }

.modal-dim {
  position: absolute;
  inset: 0;
  background: rgba(35, 42, 58, .62);
}

.modal-box {
  position: relative;
  width: 36rem;
  max-width: calc(100% - 4rem);
  padding: 1.8rem;
  border-radius: 1.6rem;
  background: var(--c-white);
}

.modal-title {
  display: block;
  font-size: var(--fs-20);
  font-weight: 700;
  letter-spacing: -.02em;
}
.modal-desc {
  margin-top: 1rem;
  color: var(--c-sub);
  font-size: 1.5rem;
  line-height: 1.55;
}

.modal-btns {
  display: flex;
  gap: 1rem;
  margin-top: 1.4rem;
}

/* 공용 .btn 보다 작고, 두 개가 폭을 반씩 나눠 갖는다 */
.mbtn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem 1rem;
  border: 0;
  border-radius: 1rem;
  font-family: inherit;
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease;
}

.mbtn-cancel {
  background: var(--c-primary-light);
  color: var(--c-primary);
}
.mbtn-cancel:hover { background: #d2d9fd; }

.mbtn-primary {
  background: var(--c-primary);
  color: var(--c-white);
}
.mbtn-primary:hover { background: var(--c-primary-dark); }

.mbtn-danger {
  background: var(--c-danger);
  color: var(--c-white);
}
.mbtn-danger:hover { background: #e33b3b; }

/* 위험한 동작을 묻는 모달에서는 취소를 파랑이 아닌 중립 회색으로 둔다 */
.modal.is-danger .mbtn-cancel {
  background: #f1f2f4;
  color: var(--c-dark);
}
.modal.is-danger .mbtn-cancel:hover { background: #e6e8eb; }

/* 버튼이 하나뿐인 안내 모달 (login.php 가입 제한) — 확인만 눌러 닫는다 */
.modal-notice .modal-box { padding: 1.5rem 2rem; }
.modal-notice .modal-desc { margin-top: 1.2rem; }
.modal-notice .modal-btns { margin-top: 2rem; }

/* =====================================================
   15. 월간 체크인 (checkin.php)
   ===================================================== */
.section-checkin { padding: 4rem 0; }

/* 질문 화면만 위를 크게 비워 좌상단 '돌아가기' 와 카드가 붙지 않게 한다.
   .section-full 이 남은 높이 안에서 가운데 정렬하므로 스크롤은 생기지 않는다 */
.section-checkin-ask { padding: 12rem 0 3.2rem; }

/* --- 1단계 : 모았는지 묻기 --- */
.chk-ask {
  padding: 4rem 3.2rem 3.2rem;
  text-align: center;
  border: 1px solid #6778BB40;
  box-shadow: 0 0 10px #6778BB40;
  border-radius: 1rem;
}
.chk-eyebrow {
  display: block;
  color: var(--c-primary);
  font-size: var(--fs-20);
  font-weight: 700;
}
.chk-ask-title {
  margin-top: 1.2rem;
  font-size: var(--fs-48);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.chk-ask-desc {
  margin-top: 1.6rem;
  color: var(--c-mute);
  font-size: var(--fs-24);
}

/* img4.png 은 잉크가 가로 70% 뿐이라 그만큼 크게 잡는다 (시안 저금통 206px) */
.chk-img {
  display: block;
  width: 25rem;
  margin: 3rem auto 0;
}
.chk-img img { display: block; width: 100%; }

/* 버튼 두 개는 카드 폭 전체가 아니라 가운데 묶음으로 둔다 */
/* 저금통 PNG 아래쪽 투명 여백(약 35px)이 이미 간격 역할을 해서 위 여백은 거의 두지 않는다 */
.chk-actions {
  display: flex;
  gap: 1.6rem;
  max-width: 82rem;
  margin: .4rem auto 0;
}
.chk-actions .btn { flex: 1 1 0; }

/* --- 2·3단계 좌측 카피 --- */
.chk-split {
  grid-template-columns: 1fr 60rem;
  align-items: start;
}
.chk-text { margin-top: 8rem; }
/* 저축액 입력 단계는 우측이 짧아 카피가 낮아 보인다 — 칼럼 상단에 맞춘다 */
.chk-split-form .chk-text { margin-top: 3rem; }
.chk-text .chk-eyebrow { font-size: var(--fs-24); }
.chk-text .sec-title { margin-top: 1.2rem; }

.chk-lead {
  word-break: keep-all;
  margin-top: 1.6rem;
  color: var(--c-mute);
  font-size: var(--fs-24);
}

.chk-submit { margin-top: 2.4rem; }

/* --- 3단계 : 현재 설정 카드 --- */
.chk-set { padding: 3.2rem;
  border: 1px solid #6778BB40;
  box-shadow: 0 0 10px #6778BB40; }

.chk-set-title {
  display: block;
  font-size: var(--fs-28);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* 값을 그 자리에서 고칠 수 있어서 입력 필드로 둔다 */
.edit-list {
  margin-top: 2.4rem;
  padding: 0 2rem;
  border: 1px solid #F2F4F7;
  border-radius: 1.2rem;
}
.edit-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 6.2rem;
}
.edit-row + .edit-row { border-top: 1px solid #F2F4F7; }

.edit-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-20);
}
.edit-input {
  flex: 0 0 auto;
  width: 10rem;
  border-bottom: 1px solid var(--c-line);
}
.edit-input input {
  width: 100%;
  padding-bottom: .4rem;
  border: 0;
  background: none;
  outline: none;
  color: var(--c-dark);
  font-family: inherit;
  font-size: var(--fs-22);
  font-weight: 700;
  text-align: right;
}
.edit-unit {
  flex: 0 0 auto;
  width: 4rem;
  white-space: nowrap;      /* '만원' 이 두 줄로 쪼개지지 않게 */
  color: var(--c-sub);
  font-size: var(--fs-20);
}

.chk-set .notice {
  margin-top: 2.4rem;
  word-break: keep-all;    /* '체크/인부터' 처럼 어절 중간에서 끊기지 않게 */
  font-weight: 600;        /* 문장이 길어 700 보다 한 단계 낮춘다 (시안) */
}
.chk-set .notice img { width: 3rem; }
.chk-set .btn { margin-top: 2.4rem; }

/* =====================================================
   16. 로그인 (login.php)
   ===================================================== */
.section-login { padding: 4rem 0; }

/* 설명 둘째 줄(480px)이 한 줄에 들어가도록 좌측을 넓게 잡는다 */
.login-split {
  grid-template-columns: 1fr 60rem;
  gap: 6rem;
}

.login-desc {
  margin-top: 2rem;
  color: var(--c-mute);
  font-size: var(--fs-24);
  line-height: 1.6;
}

.login-card { padding: 4rem 3.2rem 5.6rem; border: 1px solid #6778BB40;box-shadow: 0 0 10px #6778BB40;}

/* 일러스트 PNG 는 좌우에 투명 여백이 11% 씩 있어서
   카드 패딩을 상쇄해 폭을 꽉 채운다 */
.login-visual {
  display: block;
  margin: 0 -3.2rem 8rem;
}
.login-visual img {
  display: block;
  width: 100%;
}

.sns-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.sns-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 7rem;
  border-radius: 1.2rem;
  font-size: var(--fs-28);
  font-weight: 700;
  line-height: 1.2;
  transition: filter .2s ease;
}
.sns-btn:hover { filter: brightness(.95); }

/* 아이콘은 왼쪽에 고정하고 글자는 버튼 가운데에 둔다 */
.sns-btn img {
  position: absolute;
  top: 50%;
  left: 3.4rem;
  transform: translateY(-50%);
}

/* 로그인 오류 안내 */
.login-error {
  margin-top: 2rem;
  text-align: center;
  font-size: var(--fs-18);
}

.sns-kakao {
  background: #fee500;
  color: #191600;
}
.sns-kakao img { width: 3.8rem; }

.sns-naver {
  background: #03c75a;
  color: var(--c-white);
}
.sns-naver img { width: 2.8rem; }

/* =====================================================
   16-2. 첫화면 (login.php) — 온보딩 히어로 + 로그인을 한 화면에
   .section-hero 의 카피·점수 카드를 그대로 쓰고, CTA 자리에
   소셜 버튼(비로그인) 또는 '은퇴 점수 보기'(진단 전 회원)가 들어간다.
   ===================================================== */
/* 갈 곳이 없어 탭을 뺀 로고 전용 헤더 ($header_nav = false) */
.app-header.no-nav .app-logo { cursor: default; }

.section-entry .hero-visual { gap: 4rem; }

/* 등급 글자를 뺀 자리가 비어 보이지 않게 점수와 설명을 반원 안쪽으로 내린다
   (.gauge-value 는 절대배치라 top 으로, 설명은 .score-grade 가 맡던 음수 마진으로) */
.section-entry .gauge-value { top: 77%; }
.section-entry .score-desc { margin-top: 1.6rem; }

/* PC 는 카피가 오른쪽 기둥(점수 카드 + 버튼) 기준 세로 가운데라 낮게 앉는다.
   가운데 정렬은 그대로 두고 relative 로만 끌어올린다 — 레이아웃 높이엔 영향이 없다.
   모바일은 .hero-text 가 display:contents 라 어차피 먹지 않지만 범위를 분명히 해 둔다 */
@media (min-width: 1025px) {
  .section-entry .hero-text {
    position: relative;
    top: -5rem;
  }
}

/* =====================================================
   16-1. 공통 푸터 (common/footer.php)
   ===================================================== */
/* 푸터까지 한 화면에 담고, 본문은 남은 높이 안에서 가운데 정렬한다 */
#wrap.has-footer,
#wrap.has-ads {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#wrap.has-footer > main,
#wrap.has-ads > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
#wrap.has-footer > main > .section-full,
#wrap.has-ads > main > .section-full {
  flex: 1 1 auto;
  min-height: 0;
}

/* 구분선은 화면 좌우 끝에서 1.6rem 안쪽까지, 글자는 컨테이너 기준 */
.footer-inner {
  margin: 0 1.6rem;
  padding: 2rem 0 3.2rem;
  border-top: 1px solid #d9dce1;
}

.footer-links {
  display: flex;
  align-items: center;
  color: var(--c-sub);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.footer-links li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1rem;
  margin: 0 1.4rem;
  background: var(--c-mute);
  vertical-align: middle;
}
.footer-links a:hover { color: var(--c-dark); }

.footer-info {
  margin-top: 1.2rem;
  color: var(--c-sub);
  font-size: var(--fs-16);
  line-height: 1.9;
  word-break: keep-all;
}
.footer-info span + span:not(.footer-addr)::before {
  content: "|";
  margin: 0 .5rem;
}
.footer-addr { display: block; }

/* 모바일 전용 요소 — 좁은 화면에서만 켠다 (18번 섹션) */
.field-open,
.sheet,
.br-m,
.only-m,
.app-back { display: none; }

/* PC 는 본문+출처를 감싸는 래퍼가 없는 것처럼 동작한다 */
.article-panel { display: contents; }

/* =====================================================
   16-2. 애드센스 광고 (common/ads.php)
   ===================================================== */
/* PC 는 컨테이너 폭(최대 1160px)을 따른다 — 애드센스 고정 크기 광고는 가로 1200px 까지만 나온다.
   높이는 <ins> 에 미리 잡아 광고가 늦게 떠도 화면이 밀리지 않게 한다. */
.ad-slot {
  flex: 0 0 auto;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.ad-slot .adsbygoogle {
  display: block;
  width: 100%;
}
.ad-slot .ad-h50 { height: 50px; }
.ad-slot .ad-h100 { height: 100px; }

/* 페이지 최상단 광고 — 화면 끝에 붙지 않게 띄운다.
   여백을 <ins> 에 줘야 광고가 안 채워져 숨겨질 때 여백도 같이 사라진다. */
main > .ad-slot:first-child .adsbygoogle { margin-top: 2.4rem; }

/* 컨테이너 안에 들어간 슬롯은 컨테이너 여백을 그대로 쓴다 */
.container > .ad-slot {
  max-width: none;
  padding: 0;
}

/* 진단 진행바 바로 밑 (test.php) — 진행바 아래 여백 8rem 을 광고 위아래 4rem 씩으로 나눈다.
   위쪽 음수 여백은 진행바 여백과 겹쳐(상쇄) 4rem 이 되고,
   광고가 안 채워져 숨겨지면 원래 8rem 간격으로 돌아간다. */
.ad-step .adsbygoogle { margin: -4rem 0 4rem; }

/* 모바일 전용 슬롯 — PC 에선 숨겨 ads_render() 가 걷어낸다 */
.ad-only-m { display: none; }

/* 돌아가기가 떠 있으면(absolute) 최상단 광고와 겹친다 — 광고가 있는 화면은 흐름 안에 둬서
   광고가 돌아가기 밑으로 오게 한다 (improve.php) */
#wrap.has-ads > .page-back {
  position: static;
  padding: 6.4rem 0 0;
}

/* =====================================================
   17. 좁은 화면 대응 (모바일 전용 작업 전 임시 방어)
   ===================================================== */
@media (max-width: 1200px) {
  .layout-split {
    grid-template-columns: 1fr 52rem;
    gap: 5rem;
  }
}

@media (max-width: 1024px) {
  .section-full {
    min-height: 0;
    padding: 8rem 0;
  }
  .layout-split {
    grid-template-columns: 1fr;
    gap: 5rem;
    justify-items: center;
    text-align: center;
  }
  .hero-visual,
  .hero-text,
  .step-text,
  .step-form,
  .result-text,
  .result-cards { width: 100%; max-width: 52rem; margin: 0 auto;}

  .stat-row { grid-template-columns: 1fr; }
  .stat-card,
  .save-card { text-align: left; }

  .step-form .step-text,
  .step-form .field-list,
  .step-form .step-foot { grid-column: 1; grid-row: auto; }

  /* 돌아가기는 흐름 안으로 되돌린다 (카드와 겹침 방지) */
  .page-back {
    position: static;
    padding: 3.2rem 0 0;
  }
  .method-split { align-items: stretch; }
  .method-text { margin-top: 0; }
  .method-text,
  .method-list { width: 100%; max-width: 52rem; }
  .method-card { text-align: left; }

  .content-split { align-items: stretch; }
  .content-text { margin-top: 0; }
  .content-text,
  .content-list { width: 100%; max-width: 52rem; }
  .content-card { text-align: left; }

  .article-split { align-items: stretch; }
  .article-text { margin-top: 0; }
  .article-text,
  .article-card { width: 100%; max-width: 52rem; }
  .article-body,
  .article-source { text-align: left; }

  .set-group { text-align: left; }
  .set-card { padding: 0 2rem; }

  .chk-split { align-items: stretch; }
  .chk-text { margin-top: 0; }
  .chk-text,
  .chk-split > form,
  .chk-set { width: 100%; max-width: 52rem; }
  .chk-actions { max-width: none; }

  .login-text,
  .login-card { width: 100%; max-width: 52rem; }
  .sns-btn { padding: 2.4rem 6rem; }
  .edit-row,
  .field-label { text-align: left; }

  .section-privacy { padding: 10rem 0 6rem; }
  .privacy-lead,
  .privacy-meta,
  .privacy-card { text-align: left; }
  .privacy-card { padding: 2.4rem 2rem; }

  .field-row { text-align: left; }
  .step-progress { margin-bottom: 6rem; }

  /* 헤더 : 로고 아래로 내비를 내린다 */
  .app-header { padding: 3.2rem 0 0; }
  .header-inner {
    flex-direction: column;
    gap: 2.4rem;
  }
  .header-nav { gap: 4rem; }

  .section-home { padding: 6rem 0 8rem; }
  .home-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .home-score,
  .home-side { width: 100%; max-width: 52rem; }
  .score-stats { grid-template-columns: 1fr; }
  .score-stats > div { padding: 0; }
  .score-stats > div + div {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
}

/* =====================================================
   18. 모바일 (393px 시안 기준) — 태블릿(1024px 이하)도 모바일과 같은 화면을 쓴다
   ===================================================== */
@media (max-width: 1024px) {
  .container { padding: 0 1.6rem; }

  /* --- 애드센스 광고 --------------------------------------
     모바일은 여백 없이 화면 가로를 꽉 채운다. PC 전용 슬롯은 숨기고
     ads_render() 가 숨은 슬롯을 걷어내 광고 요청도 하지 않는다. */
  .ad-slot {
    max-width: none;
    padding: 0;
  }
  .ad-only-pc { display: none; }
  /* PC 와 높이가 다른 슬롯 — 가로 긴 배너는 90px 이상만 있어 PC 는 키우고 모바일은 320×50 을 받는다 */
  .ad-slot .ad-m-h50 { height: 50px; }
  main > .ad-slot:first-child .adsbygoogle { margin-top: 1.6rem; }
  /* 모바일 진행바 아래 여백은 1.8rem — 광고 아래에도 같은 간격을 둔다 */
  .ad-step .adsbygoogle { margin: 0 0 1.8rem; }
  .ad-only-m { display: block; }
  #wrap.has-ads > .page-back { padding-top: 2.5rem; }   /* 위 PC 규칙이 모바일 값(2.5rem)을 덮지 않게 */
  /* 체크인 결과 (checkin.php?step=done) — 안내 박스와 확인 버튼 사이.
     버튼이 margin-top:auto 라 짧은 화면에서 붙으므로 최소 간격을 광고 아래에 둔다 */
  .ad-chk .adsbygoogle { margin-bottom: 2.4rem; }
  /* 컨테이너 안에 있어도 컨테이너 좌우 여백(1.6rem)을 넘어 화면 끝까지 채운다 */
  .ad-slot.ad-bleed {
    width: auto;
    margin: 0 -1.6rem;
  }

  /* --- 로그인 (login.php) --------------------------------
     시안은 카드가 없다. 배경 위에 카피 → 일러스트 → 버튼이
     왼쪽 정렬로 그대로 쌓이고, 일러스트만 화면 폭을 꽉 채운다. */
  .section-login {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5.8rem 0 4rem;
  }
  .login-split {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: stretch;
    text-align: left;
  }
  .login-text,
  .login-card { width: 100%; max-width: none; }

  .sec-eyebrow { font-size: 1.6rem; }
  .login-text .sec-title {
    margin-top: .5rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }
  .login-desc {
    margin-top: .4rem;
    font-size: 1.6rem;
    line-height: 1.6;
  }

  /* 카드 껍데기를 걷어낸다 */
  .login-card {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* 일러스트는 좌우 패딩을 상쇄해 화면 끝까지 */
  .login-visual { margin: 1.6rem -1.6rem 5.2rem; }

  .sns-list { gap: 1.6rem; }
  .sns-btn {
    padding: 0;
    height: 5.6rem;
    font-size: 1.8rem;
    border-radius: 1.2rem;
  }
  .sns-btn img { left: 1.6rem; }
  .sns-kakao img { width: 2.4rem; }
  .sns-naver img { width: 2rem; }
  .login-error { margin-top: 1.6rem; text-align: left; font-size: 1.4rem; }

  /* 로그인 버튼 바로 아래에 푸터 구분선이 온다 */
  #wrap.has-footer .section-login { padding-bottom: 1.6rem; }

  /* --- 공통 푸터 (common/footer.php) ----------------------
     구분선이 컨테이너 폭과 같다. 링크는 가운데, 사업자 정보는 한 줄씩 */
  .app-footer .container { padding: 0; }
  .footer-inner { padding: 2rem 0 2.4rem; }
  .footer-links {
    justify-content: center;
    font-size: 1.5rem;
  }
  .footer-links li + li::before { height: 1.2rem; margin: 0 1.6rem; }
  .footer-info {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 1.7;
  }
  .footer-info span { display: block; }
  .footer-info span + span:not(.footer-addr)::before { content: none; }

  /* --- 온보딩 카피·점수 카드 (login.php) -----------------
     시안은 CTA 가 카드 아래 화면 끝으로 내려간다. 버튼은 마크업상
     .hero-text 안에 있으므로 .hero-text 를 display:contents 로 풀어
     뱃지·제목·설명·버튼을 섹션의 플렉스 아이템으로 만든 뒤 순서를 준다. */
  .section-hero {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem 0 4rem;
  }
  .section-hero .layout-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* .layout-split 기본값 center 는 세로 플렉스에선 가로 가운데정렬이 된다 */
    align-items: stretch;
    text-align: left;
  }
  .hero-text { display: contents; }
  .hero-visual {
    order: 1;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .hero-text .btn {
    order: 2;
    width: 100%;
    max-width: none;
    height: 4.9rem;
    margin-top: 4.6rem;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  .badge {
    align-self: flex-start;   /* 플렉스 아이템이라 안 주면 가로로 늘어난다 */
    padding: .6rem .8rem;
    font-size: 1.4rem;
  }
  .section-hero .sec-title {
    margin-top: .8rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }
  .hero-desc {
    margin-top: .5rem;
    font-size: 1.6rem;
  }

  .score-card,
  .info-card { border-radius: 1.6rem; }

  /* 게이지가 카드 폭을 거의 다 쓰므로 좌우 패딩이 얇다 */
  .score-card { padding: 3.1rem 1.2rem 2.4rem; }
  .card-title { font-size: 2.4rem; }
  .gauge { margin-top: .6rem; }
  .gauge-value em { font-size: 5.2rem; }
  .gauge-value span { font-size: 3.8rem; }
  .score-grade {
    margin-top: -3.3rem;
    font-size: 2.4rem;
  }
  .score-desc {
    margin-top: 0;
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .info-card {
    gap: 1.2rem;
    padding: 1.6rem;
  }
  .info-ico img { width: 4rem; }
  .info-text { font-size: 1.6rem; }

  /* --- 진단 (test.php) -----------------------------------
     값은 카드를 눌러 바텀시트에서 고친다. 원본 input 은 감추지만
     display:none 이어도 폼과 함께 전송되므로 값은 그대로 살아 있다. */
  .section-step { padding: 3.4rem 0 2rem; }
  .section-step-edit { padding-top: 5.4rem; }

  .step-progress {
    max-width: none;
    margin: 0 0 1.8rem;
    padding: 0 1.6rem;
  }
  .step-count { font-size: 1.7rem; }
  .step-bars { gap: .8rem; margin-top: 1rem; }
  .step-bars span { height: 1rem; border-radius: .5rem; }

  .step-form {
    /* .layout-split 의 gap 5rem 이 뒤에서 덮어써 행 간격이 벌어진다 */
    row-gap: 0;
    justify-items: stretch;
    text-align: left;
  }
  .step-form .step-text { margin: 0 0 1.6rem; }
  .step-form .step-text,
  .step-form .field-list,
  .step-form .step-foot { width: 100%; max-width: none; }

  .step-text .sec-eyebrow { font-size: 1.6rem; }
  .step-text .sec-title {
    margin-top: .5rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }

  .field-list { gap: 1.6rem; }
  .field {
    cursor: pointer;
    padding: 1.5rem 1.6rem 2.1rem;
    border-radius: 1.6rem;
  }
  .field-label { font-size: 1.4rem; }
  .field-row {
    margin-top: 1.2rem;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .field-row input,
  .field-unit { display: none; }

  .field-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
  }
  .field-view {
    color: var(--c-dark);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .field-view i { font-style: normal; }
  .field-view-empty {
    color: var(--c-mute);
    font-size: 1.8rem;
    font-weight: 400;
  }
  .field-chev {
    flex: 0 0 auto;
    width: 1.9rem;
    height: auto;
    fill: none;
    stroke: #8d99a8;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .field-help { margin-top: 1.4rem; font-size: 1.5rem; line-height: 1.3; }
  .field-error { margin-top: 1.2rem; font-size: 1.4rem; }

  .notice {
    gap: 1.2rem;
    padding: 2rem 1.6rem;
    font-size: 1.6rem;
  }
  .notice img { width: 2.4rem; }
  .step-foot .btn {
    height: 4.9rem;
    margin-top: 3.4rem;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  /* --- 입력 바텀시트 -------------------------------------- */
  .sheet {
    display: block;
    position: fixed;
    z-index: 100;
    inset: 0;
  }
  .sheet[hidden] { display: none; }

  .sheet-dim {
    position: absolute;
    inset: 0;
    background: rgba(13, 28, 45, .6);
    animation: sheetFade .2s ease-out both;
  }
  .sheet-panel {
    position: absolute;
    right: 1.6rem;
    /* --sheet-kb : iOS 키보드에 가려진 높이 (common/sheet.php 가 넣는다) */
    bottom: calc(1.6rem + var(--sheet-kb, 0px));
    left: 1.6rem;
    transition: bottom .2s ease-out;
    padding: .8rem 1.6rem 1.6rem;
    border-radius: 2.4rem;
    background: var(--c-white);
    animation: sheetUp .28s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sheetUp {
    from { opacity: 0; transform: translateY(2.4rem); }
    to   { opacity: 1; transform: none; }
  }

  .sheet-grab {
    display: block;
    width: 8rem;
    height: .5rem;
    margin: 0 auto;
    border-radius: .3rem;
    background: #ecedee;
  }
  .sheet-title {
    display: block;
    margin-top: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
  }
  .sheet-row {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    margin-top: 2.55rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--c-line);
  }
  .sheet-row input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    color: var(--c-dark);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .sheet-row input::placeholder { color: var(--c-mute); }
  .sheet-unit {
    flex: 0 0 auto;
    color: var(--c-mute);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .sheet-error {
    margin-top: 1.2rem;
    color: #e0483c;
    font-size: 1.4rem;
  }
  .sheet-error[hidden] { display: none; }
  .sheet .btn {
    height: 4.9rem;
    margin-top: 2.6rem;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }
  body.is-sheet-open { overflow: hidden; }

  /* --- 결과 (result.php) --------------------------------- */
  .section-result {
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5rem 0 4rem;
  }
  .section-result .layout-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    text-align: left;
  }
  .result-text,
  .result-cards { width: 100%; max-width: none; }
  .result-text { margin-bottom: 1.6rem; }
  .result-text .sec-title {
    margin-top: .5rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }

  .result-cards { gap: 1.65rem; }
  /* PC 규칙(.result-cards .score-card)이 더 구체적이라 여기서 다시 잡는다 */
  .result-cards .score-card { padding-bottom: 2.2rem; }

  .stat-row {
    grid-template-columns: 1fr 1fr;   /* 1024 에서 1열로 바꾼 것을 되돌린다 */
    gap: .85rem;
  }
  .stat-card,
  .save-card { border-radius: 1.6rem; }
  .stat-card { padding: 1.5rem 1.6rem 1.4rem; }
  .stat-label { font-size: 1.4rem; }
  .stat-value { margin-top: 1rem; font-size: 2.2rem; }

  .save-card { padding: 1.5rem 1.6rem 1.6rem; }
  .save-q { font-size: 1.2rem; }
  .save-desc {
    margin-top: 0;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .br-m { display: inline; }

  .result-cards .btn {
    height: 4.9rem;
    margin-top: 2rem;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  /* --- 헤더 : 로고는 위, 탭은 화면 아래 고정 ----------------
     마크업은 그대로 두고 .header-nav 만 화면 아래로 내린다. */
  .app-header { padding: 2rem 0 0; }
  .header-inner { flex-direction: row; gap: 0; }
  .app-logo img { width: 10.9rem; }

  .header-nav {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 0;
    padding: 1.7rem 0 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: var(--c-white);
  }
  /* 선 대신 흰 안개 — 탭바 위로 흰색이 서서히 사라지며 배경과 이어진다.
     transparent 대신 rgba(255,255,255,0) 을 쓰는 건 일부 브라우저가
     transparent 를 '투명한 검정' 으로 보간해 회색 띠가 생기기 때문. */
  .header-nav::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 2.8rem;
    background: linear-gradient(to top, var(--c-white), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .nav-link {
    flex: 1 1 0;
    flex-direction: column;
    gap: .35rem;
    padding: 0;
    font-size: 1.2rem;
  }
  .nav-ico { width: 2.4rem; height: 2.4rem; }
  .nav-link.is-on::after { content: none; }   /* 밑줄은 PC 전용 */

  /* 고정 탭바에 콘텐츠가 가리지 않게 — 탭바가 있는(헤더를 include 한) 화면만 */
  .app-header ~ main { padding-bottom: 7.3rem; }

  .chevron { width: 2.5rem; height: 2.5rem; }

  /* --- 홈 (home.php) ------------------------------------- */
  .section-home { padding: 2rem 0 6rem; }
  .home-grid {
    grid-template-columns: 1fr;
    gap: 1.7rem;
    justify-items: stretch;
  }
  .home-score,
  .home-side { width: 100%; max-width: none; }
  .home-side { gap: 3.2rem; }

  .only-m { display: block; }

  .home-score {
    padding: 3.1rem 1.6rem 1.6rem;
    border-radius: 1.6rem;
  }
  .home-score .card-title { font-size: 2.4rem; }
  /* 게이지만 카드 패딩 밖으로 살짝 나가 시안 폭(320)을 맞춘다 */
  .home-score .gauge {
    max-width: none;
    margin: .3rem -.72rem 0;
  }
  .home-score .score-grade { margin-top: -3.4rem; }

  .score-stats {
    grid-template-columns: 1fr 1fr;
    margin: 2.4rem -.8rem 0;
    padding-top: 1.55rem;
  }
  .score-stats > div { padding: 0 .8rem; }
  .score-stats > div + div {         /* 1024 에서 가로선으로 바꾼 것을 되돌린다 */
    margin-top: 0;
    padding-top: 0;
    padding-left: 1rem;
    border-top: 0;
    border-left: 1px solid var(--c-line);
  }
  .home-score .btn {
    height: 5.2rem;
    margin-top: 1.25rem;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  .checkin-card {
    gap: .8rem;
    padding: 1.6rem;
    border-radius: 1.6rem;
  }
  .checkin-ico { width: 4rem; }
  /* 세 줄이 붙어 있어야 시안 높이(93)가 나온다 — 줄간격만으로 띄운다 */
  .checkin-eyebrow { font-size: 1.2rem; }
  .checkin-title { margin-top: 0; font-size: 1.7rem; }
  .checkin-desc { margin-top: 0; font-size: 1.2rem; }

  /* 시안은 제목·전체보기가 카드 밖 배경 위에 있고, 목록만 흰 카드다 */
  .link-card {
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .card-title-sm { font-size: 2rem; }
  .sec-more { font-size: 1.6rem; }
  .link-list {
    margin-top: 1.5rem;
    padding: 0 1.6rem;
    border-radius: 1.6rem;
    background: var(--c-white);
  }
  .link-row { gap: .8rem; padding: 1.6rem 0; }
  .link-row + .link-row { border-top: 1px solid #f2f4f7; }
  .link-ico {
    width: 4rem;
    height: 4rem;
    border-radius: 1.2rem;
  }
  .link-ico img { width: 4rem; }
  .link-text { font-size: 1.6rem; }

  /* --- 돌아가기 : 시안은 화살표만 ------------------------- */
  .page-back { padding: 2.5rem 0 0; }
  /* inline-flex 인 채로 두면 34px 글꼴의 줄상자가 남아 아래가 34px 벌어진다 */
  .page-back .container { line-height: 0; }
  .back-link {
    display: flex;
    width: 2.5rem;
    font-size: 0;
  }
  .back-link span { display: none; }
  .back-link svg { width: 2.5rem; height: 2.5rem; }

  /* --- 줄이기 방법 선택 (improve.php) ---------------------- */
  .section-method {
    align-items: flex-start;
    min-height: 0;
    padding: 4.3rem 0 6rem;
  }
  .method-split {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: stretch;
    text-align: left;
  }
  .method-text { margin: 0; }
  .method-text,
  .method-list { width: 100%; max-width: none; }
  .method-text .sec-title {
    margin-top: 0;
    font-size: 3.2rem;
    line-height: 1.4;
  }

  /* 시안은 설명 줄 수만큼 카드 높이가 다르다 — PC 의 높이 맞춤을 끈다 */
  .method-list {
    grid-auto-rows: auto;
    gap: 1.65rem;
  }
  .method-card {
    gap: 1.2rem;
    padding: 1.55rem 1.6rem .7rem;
    border-radius: 1.6rem;
    text-align: left;
  }
  .method-card:hover .method-title { color: var(--c-dark); }
  .method-ico { width: 4rem; }
  .method-title { font-size: 2.5rem; }
  .method-desc {
    margin-top: 0;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .method-card .chevron { width: 2.5rem; height: 2.5rem; }

  /* --- 월 체크인 (checkin.php) ---------------------------- */
  /* 1단계 : 시안은 카드 없이 배경 위에 얹히고, 버튼은 화면 아래로 내려간다 */
  /* 아래 .section-checkin 규칙보다 구체적이어야 패딩이 안 덮인다 */
  .section-checkin.section-checkin-ask {
    align-items: stretch;
    padding: 4rem 0;
  }
  .section-checkin-ask .container { display: flex; }
  .chk-ask {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }
  .chk-eyebrow { font-size: 1.6rem; }
  .chk-ask-title {
    margin-top: .5rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }
  .chk-ask-desc { margin-top: .5rem; font-size: 1.6rem; }
  /* 저금통 — 폭을 줄이려면 이 width 만 만지면 된다 (32rem = 잉크 약 224px) */
  .chk-img {
    width: 32rem;
    /* 위아래 auto — 카피와 버튼 사이 남는 높이에 균등하게 놓인다.
       짧은 화면에선 남는 높이가 0 이라 auto 가 안 먹는다 → 최소 간격은 padding 으로 */
    margin: auto;
    padding: 1.8rem 0 2.4rem;
  }
  .chk-actions {
    gap: .85rem;
    max-width: none;
    margin: auto 0 0;          /* 남는 높이를 밀어내 버튼을 아래에 붙인다 */
  }
  .chk-actions .btn {
    height: 4.9rem;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  /* 2·3단계 */
  .section-checkin {
    align-items: stretch;
    padding: 5rem 0 6rem;
  }
  .chk-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    text-align: left;
  }
  .chk-text,
  .chk-split > form,
  .chk-set { width: 100%; max-width: none; }

  .chk-text { margin: 0 0 4.8rem; }
  .chk-split-form .chk-text { margin: 0 0 1.6rem; }
  .chk-text .chk-eyebrow,
  .chk-text .sec-eyebrow { font-size: 1.6rem; }
  .chk-text .sec-title {
    margin-top: .5rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }
  .chk-lead { margin-top: .5rem; font-size: 1.6rem; }

  .chk-split > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;      /* 브라우저 기본 form margin(1em) 제거 */
  }
  .chk-submit,
  .chk-set .btn {
    height: 4.9rem;
    margin-top: auto;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  /* 3단계 : '현재 설정'은 카드 밖 배경 위, 목록만 흰 카드 */
  .chk-set {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .chk-set-title { font-size: 2rem; }
  .edit-list {
    margin: 1.6rem 0 0;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 1.6rem;
    background: var(--c-white);
  }
  .edit-row {
    gap: 1rem;
    min-height: 0;
    padding: 1.7rem 0;
  }
  .edit-label { font-size: 1.7rem; }
  /* 값은 시트에서 고친다 — 원본 input 은 감춰도 폼과 함께 전송된다 */
  .edit-input,
  .edit-unit { display: none; }
  .field-open-row { width: auto; gap: 1rem; }
  .field-open-row .field-view { font-size: 1.7rem; }
  .field-chev-row {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 2.4;
  }
  /* 아래 확인 버튼이 margin-top:auto 라 짧은 화면에서 붙는다 —
     최소 간격은 이 박스의 margin-bottom 으로 확보한다 */
  .chk-set .notice {
    gap: .8rem;
    margin: 1.15rem 0 2.4rem;
    padding: 1.6rem;
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .chk-set .notice img { width: 3rem; }

  /* --- 화면 채우기 ----------------------------------------
     돌아가기가 흐름 안에 있으면 .section-full 에 100dvh 를 그대로 주면
     그만큼 넘친다. 높이를 빼는 대신 #wrap 을 세로 플렉스로 만들어
     본문이 남은 높이를 정확히 채우게 한다. */
  #wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #wrap > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  #wrap > main > .section-full {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* --- 헤더의 돌아가기 (content.php) ----------------------- */
  .app-header.has-back { padding: 2.5rem 0 0; }
  .app-header.has-back .app-logo { display: none; }
  .app-back {
    display: flex;
    flex: 0 0 auto;
    width: 2.5rem;
    color: var(--c-dark);
  }
  .app-back svg { display: block; width: 2.5rem; height: 2.5rem; }

  /* --- 콘텐츠 목록 (content.php) --------------------------- */
  .section-content { padding: 4.2rem 0 6rem; }
  .content-split {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: stretch;
    text-align: left;
  }
  .content-text { margin: 0; }
  .content-text,
  .content-list { width: 100%; max-width: none; }
  .content-text .sec-title { font-size: 3rem; line-height: 1.4; }

  .content-list { gap: 1.65rem; }
  .content-card {
    gap: 1.2rem;
    padding: 1.7rem 1.6rem .9rem;
    border-radius: 1.6rem;
    text-align: left;
  }
  .content-ico { width: 4rem; }
  .content-title {
    word-break: keep-all; 
    font-size: 2.4rem;
    line-height: 1.4;
  }
  .content-from { margin-top: 0; font-size: 1.5rem; }
  .content-card .chevron { width: 2.5rem; height: 2.5rem; }

  /* --- 콘텐츠 상세 (content-view.php) ---------------------- */
  .section-article {
    align-items: stretch;
    padding: 4.2rem 0 6rem;
  }
  .article-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    text-align: left;
  }
  .article-text,
  .article-card { width: 100%; max-width: none; }
  .article-text { margin: 0 0 1.6rem; }
  .article-text .sec-title {
    margin-top: .5rem;
    font-size: 3.2rem;
    line-height: 1.4;
  }

  /* 시안은 버튼이 카드 밖 화면 아래에 있다 — 카드 껍데기를 래퍼로 옮긴다 */
  .article-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .article-panel {
    display: block;
    /* 버튼은 margin-top:auto 로 화면 아래에 붙는데, 본문이 길거나 주소창 때문에
       뷰포트가 짧으면 남는 높이가 0 이 된다. 최소 간격은 여기서 보장한다 */
    margin-bottom: 2.4rem;
    padding: 1.6rem 1.6rem 1.7rem;
    border-radius: 1.6rem;
    background: var(--c-white);
  }
  .article-body p { font-size: 1.6rem; line-height: 1.6; }
  .article-body p + p { margin-top: 0; }
  .article-source {
    margin-top: 2.1rem;
    padding-top: 1.9rem;
    border-top: 1px solid #f2f4f7;
    font-size: 1.6rem;
  }
  .article-card .btn {
    height: 4.9rem;
    margin-top: auto;
    padding: 0;
    border-radius: 1.2rem;
    font-size: 1.8rem;
  }

  /* --- 헤더의 화면 이름 (more.php) ------------------------- */
  .app-header.has-title .app-logo { display: none; }
  .app-title {
    flex: 1 1 auto;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
  }

  /* --- 더보기 (more.php) ---------------------------------- */
  .section-more { padding: 3.2rem 0 6rem; }
  .set-group + .set-group { margin-top: 1.7rem; }
  .set-label {
    margin-bottom: .7rem;
    font-size: 2rem;
  }
  .set-card { padding: 0 1.6rem; }
  .set-row {
    gap: 1.2rem;
    min-height: 5.85rem;
  }
  .set-row + .set-row { border-top: 1px solid #f2f4f7; }
  .set-key,
  .set-val { font-size: 1.6rem; }

  /* --- 개인정보처리방침 (privacy.php) ---------------------- */
  .section-privacy { padding: 4.3rem 0 6rem; }
  .privacy-title {
    font-size: 3.2rem;
    line-height: 1.4;
  }
  .privacy-lead {
    margin-top: .3rem;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  /* PC 용 줄바꿈이 모바일에선 짧은 줄을 만든다 — 흐르게 둔다 */
  .privacy-lead br { display: none; }
  .privacy-meta {
    margin-top: .2rem;
    padding-left: 2.4rem;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .privacy-card {
    margin-top: 1.7rem;
    padding: 2rem;
    border-radius: 1.6rem;
  }
  .privacy-sec + .privacy-sec { margin-top: 2.1rem; }
  .privacy-sec-title { font-size: 2rem; }
  .privacy-chapter { font-size: 2.4rem; }
  .privacy-sec + .privacy-chapter { margin-top: 3.2rem; }
  .privacy-chapter + .privacy-sec { margin-top: 1.6rem; }
  .privacy-sec p {
    margin-top: .7rem;
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .privacy-sec p + p,
  .privacy-sec-list + p { margin-top: 0; }

  /* --- 첫화면 (login.php) --------------------------------
     시안은 로고 → 카피 → 점수 카드 → 로그인 버튼 → 푸터가
     한 화면에 다 들어간다. .section-hero 의 100vh 를 풀어
     #wrap.has-footer 의 플렉스가 높이를 나눠 갖게 한다. */
  .app-header.no-nav { padding: 1.6rem 0 0; }
  .app-header.no-nav ~ main { padding-bottom: 0; }   /* 고정 탭바가 없다 */

  .section-entry {
    min-height: 0;
    padding: 1.6rem 0;
  }
  .section-entry .hero-visual {
    margin-top: 2rem;
    gap: 2.4rem;
  }
  .section-entry .score-desc { margin-top: 1.6rem; }
  /* 로그인 버튼 바로 아래에 푸터 구분선이 온다 */
  #wrap.has-footer .section-entry { padding-bottom: 1.6rem; }
}