/* 펜션클리닉 — Apple 스타일 하위 페이지 덧씌우기
   style.css(기존 구조) → apple.css(공통 상단바·푸터·문의창) → 이 파일 순서로 불러옵니다. */

/* 기존 테마 변수를 애플 톤으로 바꿉니다 */
.sub body{
  --navy:#1d1d1f; --navy-deep:#000; --navy-ink:#1d1d1f;
  --green:#08812f; --green-dark:#066b27; --green-tint:#eafaf0;
  --paper:#fff; --paper-line:#e5e5ea; --ink:#1d1d1f; --muted:#6e6e73; --muted-on-navy:#a1a1a6;
  --serif:var(--font); --sans:var(--font); --mono:var(--font);
  font-family:var(--font); font-size:17px; line-height:1.5; letter-spacing:-.01em; word-spacing:normal; color:var(--ink); background:#fff;
}
/* 인쇄용 진단 리포트는 기존 디자인(네이비·Paperlogy) 그대로 */
#dgReport{
  --navy:#002146; --navy-deep:#03182f; --navy-ink:#0c2645; --green:#0b9539; --green-dark:#087a2e; --green-tint:#e3f5e7;
  --paper:#f7f5ef; --paper-line:#ded9c9; --ink:#16233a; --muted:#5c6b82; --muted-on-navy:#9fb0c7;
  --serif:'Paperlogy','Apple SD Gothic Neo','Malgun Gothic',sans-serif; --sans:var(--serif); --mono:var(--serif);
  letter-spacing:normal;
}
.sub .wrap{max-width:none;padding:0}
.sub h1,.sub h2,.sub h3{font-family:var(--font)}

/* ---------- page hero ---------- */
.sub .page-hero{background:#000;color:#f5f5f7;padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.sub .page-hero.has-photo{background-size:cover;background-position:center;padding-block:clamp(90px,12vw,160px) clamp(70px,9vw,120px)}
.sub .page-hero.has-photo::before{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.85) 100%)}
.sub .breadcrumb{justify-content:center;font-size:13px;color:#a1a1a6;display:flex;gap:8px;margin-bottom:22px}
.sub .breadcrumb a{color:#a1a1a6}
.sub .breadcrumb a:hover{color:#fff}
.sub .page-hero .hero-tag{display:inline-block;font-size:14px;font-weight:600;color:#d2d2d7;padding:7px 16px;border:1px solid rgba(255,255,255,.22);border-radius:980px;
  background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:0;font-family:var(--font);margin:0}
.sub .page-hero .hero-tag::before{content:none}
.sub .page-hero h1{font-size:clamp(44px,8vw,96px);font-weight:800;letter-spacing:-.045em;line-height:1.05;margin:22px 0 22px;color:#fff;
  background:linear-gradient(180deg,#fff 30%,#c7c7cc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub .page-hero-desc{font-size:clamp(17px,2.1vw,22px);color:#d2d2d7;max-width:640px;margin:0 auto;line-height:1.55;font-weight:500}

/* ---------- sections ---------- */
.sub .section{padding:clamp(40px,5vw,64px) 0}
.sub .section.paper{background:#fff}
.sub .section.tint{background:var(--bg-alt)}
.sub .eyebrow{display:block;text-align:center;font-family:var(--font);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--accent);text-transform:none;margin-bottom:12px}
.sub .eyebrow::before{content:none}
.sub .section-title{text-align:center;font-size:clamp(32px,5vw,54px);line-height:1.12;font-weight:700;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;margin:0 auto}
.sub .section-sub{text-align:center;font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:720px;margin:18px auto clamp(28px,3.5vw,44px);font-weight:500;text-wrap:balance}
.sub .reveal{transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.sub .reveal.in{transform:none}

/* ---------- department detail ---------- */
.sub .detail-grid{display:grid;grid-template-columns:1fr;gap:20px;background:none;border:0;border-radius:0;overflow:visible;margin-top:clamp(24px,3vw,36px)}
.sub .detail-block{background:var(--bg-alt);border-radius:var(--radius-lg);padding:clamp(30px,4.4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(28px,5vw,64px);align-items:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sub .detail-block:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.07)}
.sub .detail-num{grid-column:1;font-family:var(--font);font-size:clamp(48px,6vw,72px);font-weight:800;letter-spacing:-.05em;line-height:1;margin:0 0 6px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sub .detail-block h3{grid-column:1;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.035em;color:var(--ink);margin:0;line-height:1.2}
.sub .detail-block>p{grid-column:1;font-size:17px;color:var(--muted);line-height:1.65;margin:0;max-width:none}
.sub .detail-points{grid-column:2;grid-row:1 / span 3;align-self:center;max-width:none;background:#fff;border-radius:var(--radius-md);padding:8px 24px}
.sub .detail-points li{font-size:16px;color:var(--ink-2);padding:16px 0 16px 30px;border-top:1px solid var(--line);line-height:1.5}
.sub .detail-points li:first-child{border-top:0}
.sub .detail-points li::before{content:"";left:4px;top:1.35em;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---------- contact block (all sub pages) ---------- */
.sub .cta-section{background:#000;color:#f5f5f7;text-align:center;padding:clamp(48px,6vw,80px) 0}
.sub .cta-section h2{font-size:clamp(34px,6vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1.1;text-wrap:balance;margin:0 0 18px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sub .cta-section p{color:#a1a1a6;font-size:clamp(17px,2vw,21px);font-weight:500}
.sub .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:none;border:0;text-align:left}
.sub .contact-item{background:var(--card-dark);border-radius:var(--radius-md);padding:26px 22px;text-align:left;transition:background .3s,transform .4s var(--ease)}
.sub .contact-item:hover{background:#2c2c2e;transform:translateY(-4px)}
.sub .contact-item .c-label{background:none;padding:0;border-radius:0;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent-on-dark);margin-bottom:10px}
.sub .contact-item .c-val{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.35;color:#f5f5f7}

/* ---------- buttons from style.css ---------- */
.sub .btn-cta{font-family:var(--font);border-radius:980px;min-height:44px;font-weight:600;letter-spacing:-.01em;background:var(--accent);border-color:var(--accent);color:#fff}
.sub .btn-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.sub .btn-cta.line{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.sub .btn-cta.line:hover{background:var(--accent);color:#fff}

/* ---------- calculator ---------- */
.sub .calc-grid{gap:20px}
.sub .calc-card{border:0;border-radius:var(--radius-lg);background:var(--bg-alt);box-shadow:none}
.sub .calc-head{background:none;border-bottom:1px solid var(--line);padding:20px 28px}
.sub .calc-head .ch-title{font-family:var(--font);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sub .calc-head .ch-id{font-family:var(--font);font-size:13px;font-weight:600;color:var(--accent);opacity:1}
.sub .calc-field label{color:var(--ink);font-size:15px;font-weight:600}
.sub .calc-field label span{font-family:var(--font);font-weight:700;color:var(--accent)}
.sub .calc-field input[type=number]{font-family:var(--font);font-size:17px;font-weight:600;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 40px 13px 14px}
.sub .calc-field input[type=number]:focus{border-color:#2f6fe0;box-shadow:0 0 0 4px rgba(47,111,224,.15)}
.sub .calc-field input[type=range]{accent-color:var(--accent);height:24px}
.sub .calc-result{background:#000;border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.18)}
.sub .calc-result::before{background:radial-gradient(circle at 100% 0,rgba(47,208,107,.28),transparent 60%)}
.sub .calc-tag{font-family:var(--font);font-weight:600;background:rgba(255,255,255,.1);color:#d2d2d7}
.sub .calc-big{font-family:var(--font);font-weight:800;letter-spacing:-.045em;font-size:clamp(38px,5vw,56px)}
.sub .calc-big small{font-family:var(--font)}
.sub .calc-yr b{color:#ff8a80}
.sub .calc-split{border-top-color:rgba(255,255,255,.12)}
.sub .calc-mini{background:#1d1d1f;border-radius:14px}
.sub .calc-mini .v{font-family:var(--font);font-weight:800;letter-spacing:-.03em}
.sub .calc-mini .v.g{color:var(--accent-on-dark)}
.sub .calc-note{text-align:center;font-size:13px}
.sub .calc-lead{border-radius:var(--radius-lg);background:linear-gradient(160deg,#eafaf0,#f5f5f7 60%);padding:clamp(30px,4vw,48px)}
.sub .calc-lead h3{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1.25}
.sub .calc-lead h3 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sub .calc-lead li{font-size:16px;border-top-color:var(--line);padding-left:28px}
.sub .calc-lead li::before{content:"";left:3px;top:1.15em;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.sub #calcLeadForm input[type=text],.sub #calcLeadForm input[type=tel]{font-family:var(--font);font-size:16px;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.sub #calcLeadForm input:focus{outline:none;border-color:#2f6fe0;box-shadow:0 0 0 4px rgba(47,111,224,.15)}
.sub #calcSendBtn{font-family:var(--font);border-radius:14px;min-height:52px;font-size:17px;font-weight:700;background:var(--accent);border:0}
.sub #calcSendBtn:hover{background:var(--accent-hover)}
.sub .calc-ok{border-radius:14px}

/* ---------- diagnosis (screen only; #dgReport untouched) ---------- */
.sub .dg-grid{gap:24px}
.sub .dg-card{border:0;border-radius:var(--radius-lg);background:var(--bg-alt);box-shadow:none}
.sub .dg-head{background:none;border-bottom:1px solid var(--line);padding:20px 28px}
.sub .dg-head .ch-title{font-size:17px;font-weight:700;color:var(--ink)}
.sub .dg-head .ch-id{font-family:var(--font);font-size:13px;color:var(--accent)}
.sub .dg-info{padding:24px 28px 6px}
.sub .dg-field label{font-size:13px;color:var(--muted)}
.sub .dg-field input,.sub .dg-comp input,.sub .dg-item select{font-family:var(--font);font-size:16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.sub .dg-comp input{font-size:14px;padding:8px 6px;border-radius:10px}
.sub .dg-field input:focus,.sub .dg-comp input:focus,.sub .dg-item select:focus{border-color:#2f6fe0;box-shadow:0 0 0 4px rgba(47,111,224,.15)}
.sub .dg-hint{padding:10px 28px 24px;font-size:13px}
.sub .dg-body{padding:4px 28px 14px}
.sub .dg-item{border-top-color:var(--line)}
.sub .dg-q{font-size:16px}
.sub .dg-tog button{font-family:var(--font);border-radius:980px;border-color:var(--line);padding:8px 16px;font-weight:600}
.sub .dg-tog button:hover{border-color:var(--ink);color:var(--ink)}
.sub .dg-tog button.on.y{background:var(--accent);border-color:var(--accent)}
.sub .dg-tog button.on.n{background:#d70015;border-color:#d70015}
.sub .dg-comp th,.sub .dg-comp td{border-bottom-color:var(--line)}
.sub .dg-side{top:88px}
.sub .dg-score{background:#000;border-radius:var(--radius-lg);padding:32px 28px}
.sub .dg-score::before{width:220px;height:220px;background:radial-gradient(circle at top right,rgba(47,208,107,.3),transparent 70%)}
.sub .dg-score .lbl{font-family:var(--font);font-weight:600;letter-spacing:0;font-size:14px;color:#a1a1a6}
.sub .dg-score .num{font-family:var(--font);font-weight:800;font-size:72px;letter-spacing:-.05em}
.sub .dg-grade{font-family:var(--font);color:#f5f5f7;background:rgba(255,255,255,.12)}
.sub .dg-bars .r{color:#d2d2d7;font-size:13px}
.sub .dg-bars .r span:last-child{font-family:var(--font)}
.sub .dg-bars .t{background:#2c2c2e;height:8px}
.sub .dg-bars .t i{background:var(--grad)}
.sub .dg-rx{border:0;border-radius:var(--radius-md);background:var(--bg-alt);box-shadow:none;padding:24px}
.sub .dg-rx h3{font-size:17px;color:var(--ink)}
.sub .dg-rx ol{font-size:15px}
.sub .dg-btn{font-family:var(--font);border-radius:14px;min-height:50px;font-size:16px;font-weight:700}
.sub .dg-btn.primary{background:var(--accent);border-color:var(--accent)}
.sub .dg-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.sub .dg-btn.ghost{border:1.5px solid var(--accent);color:var(--accent)}
.sub .dg-btn.ghost:hover{background:#eafaf0}
.sub .dg-link{font-family:var(--font)}

/* ---------- legal pages ---------- */
.sub .legal{max-width:820px;margin:0 auto}
.sub .legal .legal-meta{font-family:var(--font);font-size:14px;color:var(--muted);background:var(--bg-alt);border-radius:14px;padding:14px 18px}
.sub .legal h2{font-family:var(--font);font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:56px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.sub .legal p,.sub .legal li{font-size:16px;line-height:1.8;color:var(--ink-2)}
.sub .legal a{color:var(--accent)}
.sub .legal table{border-radius:14px;overflow:hidden;border-collapse:separate;border-spacing:0;border:1px solid var(--line);font-size:15px}
.sub .legal th,.sub .legal td{border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:12px 14px}
.sub .legal tr>*:last-child{border-right:0}
.sub .legal tbody tr:last-child>*{border-bottom:0}
.sub .legal th{background:var(--bg-alt);color:var(--ink)}
.sub .legal-optout{border-radius:var(--radius-md);background:var(--bg-alt);border:0}

/* ---------- old style.css leftovers on shared parts ---------- */
.sub footer{border-top:0;text-align:left}
.sub .fab-btn{font-family:var(--font);box-shadow:none;border:0}
.sub .fab{flex-direction:row;align-items:center}
.sub .fab-tel{background:transparent;color:var(--ink)}
.sub .fab-tel:hover{background:rgba(0,0,0,.06)}
.sub .modal-card{font-family:var(--font)}

@media (max-width:1000px){
  .sub .contact-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .sub .detail-block{grid-template-columns:1fr}
  .sub .detail-points{grid-column:1;grid-row:auto;margin-top:10px}
  .sub .dg-side{position:static}
}
@media (max-width:560px){
  .sub .wrap{width:calc(100% - 32px)}
  .sub .detail-points{padding:4px 18px}
}
@media (max-width:380px){
  .sub .contact-grid{grid-template-columns:1fr}
}

/* ---------- 배경 통일: 연한 그레이, 카드는 흰색 (사진 배경 첫 화면은 그대로) ---------- */
.sub body{background:var(--bg-alt)}
.sub .section,.sub .section.paper,.sub .section.tint,.sub .cta-section{background:var(--bg-alt);color:var(--ink)}
.sub .page-hero:not(.has-photo){background:var(--bg-alt);color:var(--ink)}
.sub .page-hero:not(.has-photo) h1{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.sub .page-hero:not(.has-photo) .page-hero-desc{color:var(--muted)}
.sub .page-hero:not(.has-photo) .breadcrumb,.sub .page-hero:not(.has-photo) .breadcrumb a{color:var(--muted)}
.sub .page-hero:not(.has-photo) .breadcrumb a:hover{color:var(--ink)}
.sub .page-hero:not(.has-photo) .hero-tag{color:var(--ink-2);border-color:var(--line);background:#fff}
.sub .detail-block{background:#fff}
.sub .detail-points{background:var(--bg-alt)}
.sub .cta-section p{color:var(--muted)}
.sub .contact-item{background:#fff}
.sub .contact-item:hover{background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.08)}
.sub .contact-item .c-label{color:var(--accent)}
.sub .contact-item .c-val{color:var(--ink)}
.sub .calc-card,.sub .dg-card,.sub .dg-rx{background:#fff}
.sub .calc-lead{background:linear-gradient(160deg,#e3f7ea,#fff 60%)}
.sub .legal .legal-meta,.sub .legal-optout{background:#fff}

/* 화면 사이 간격 축소: 연락처 안내문 아래 여백(HTML에 56px로 적혀 있음) */
.sub .cta-section p.reveal{margin-bottom:36px!important}

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

/* 진단 종합 점수 색: 0~50 빨강 · 51~80 노랑 · 81~100 초록 */
.sub #dgTotal{transition:none}
.sub #dgTotal.lv-low{color:#ff453a}
.sub #dgTotal.lv-mid{color:#ffcc00}
.sub #dgTotal.lv-high{color:#30d158}