/* 보약 처방(herbal-tonic.html) · 보약 유형 자가 체크(herbal-tonic-check.html) 전용 — 2026-10-08 병원 오더 · 전체 시안.
   두 페이지만 읽습니다. 헤더 · 푸터 꾸밈은 style.css 그대로입니다. 시안 색: 파랑 · 짙은 남색 · 연한 하늘색. */
.tn{
  --tn-blue:#1F55D6; --tn-navy:#0B1E4A; --tn-soft:#F1F6FE; --tn-ic:#E6EFFD;
  --tn-card:#fff; --tn-line:#D9E5F7; --tn-ink:#1A2533; --tn-ink-2:#5A6676;
  color:var(--tn-ink);background:#fff;
}
html[data-theme="dark"] .tn{
  --tn-blue:#7EA6FF; --tn-navy:#E3EBFA; --tn-soft:#111A28; --tn-ic:#1B2A42;
  --tn-card:#162033; --tn-line:rgba(160,190,240,.18); --tn-ink:#E8ECF1; --tn-ink-2:#AAB4C0;
  background:var(--bg);
}
.tn img{display:block;max-width:100%;height:auto}
.tn h1,.tn h2,.tn h3{color:var(--tn-navy);letter-spacing:-.02em;word-break:keep-all}
.tn p{word-break:keep-all}
:where(.tn ul,.tn ol){list-style:none;margin:0;padding:0}  /* :where — 아래 카드 묶음의 margin-top 을 지우지 않게(2026-10-09) */
.tn-blue{color:var(--tn-blue)}
.tn-sec{padding:80px 0}
.tn-soft{background:var(--tn-soft)}

/* 공통 머리글 */
.tn-label{display:inline-flex;align-items:center;gap:14px;margin:0 0 14px;color:var(--tn-blue);font-weight:700;font-size:var(--fs-sm)}
.tn-label::after{content:"";width:40px;height:1.5px;background:currentColor}
.tn-h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;line-height:1.3;margin:0}
.tn-h2.is-sm{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.tn-lead{margin:1rem 0 0;color:var(--tn-ink-2);font-size:var(--fs-md);line-height:1.7;max-width:640px}

/* 카드 · 아이콘 */
.tn-card{background:var(--tn-card);border:1px solid var(--tn-line);border-radius:10px}
.tn-row{display:flex;align-items:center;gap:18px}
.tn-ic{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--tn-ic)}
.tn-ic svg{width:30px;height:30px;fill:none;stroke:var(--tn-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tn-ic.is-xs{width:40px;height:40px}.tn-ic.is-xs svg{width:20px;height:20px}
.tn-ic.is-lg{width:88px;height:88px}.tn-ic.is-lg svg{width:40px;height:40px}
.tn-ic.is-xl{width:112px;height:112px}.tn-ic.is-xl svg{width:48px;height:48px}

/* SECTION 1 · 첫 화면 — 사진은 오른쪽 위, 왼쪽은 밝게 */
.tn-hero{position:relative;overflow:hidden;background:#F5F9FF;padding:calc(var(--nav-h) + 48px) 0 80px}  /* 2026-10-09 확인 항목 3개를 빼고 사진을 첫 화면 높이에 맞춤 */
html[data-theme="dark"] .tn-hero{background:#F5F9FF;color:#1A2533}
.tn-hero-bg{position:absolute;top:var(--nav-h);right:0;bottom:0;width:60%}
.tn-hero-bg img{width:100%;height:100% !important;object-fit:cover;object-position:75% center}
.tn-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F5F9FF 0%,rgba(245,249,255,.55) 22%,rgba(245,249,255,0) 45%)}
.tn-hero-in{position:relative}
.tn-hero .crumb{margin-bottom:26px}
html[data-theme="dark"] .tn-hero .crumb,html[data-theme="dark"] .tn-hero .crumb a{color:#4A5563}
.tn-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0;color:#1F55D6;font-weight:700;font-size:var(--fs-xs)}
.tn-eyebrow::after{content:"";width:24px;height:1.5px;background:currentColor}
.tn .tn-title{margin:.3rem 0 0;font-size:clamp(3rem,7.4vw,6rem);font-weight:900;line-height:1.1;letter-spacing:-.04em;color:#0B1E4A;white-space:nowrap}
.tn-title .tn-blue{color:#1F55D6}
.tn-hero-key{margin:1.2rem 0 0;font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:800;color:#0B1E4A;letter-spacing:-.02em}
.tn-hero-lead{margin:.5rem 0 0;font-size:var(--fs-md);color:#5A6676}
.tn-check3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.tn-check3 .tn-card{padding:22px 24px}
.tn-check3 h2{font-size:var(--fs-md);font-weight:800;margin:0}
.tn-check3 p,.tn-types p,.tn-exam p{margin:.35rem 0 0;color:var(--tn-ink-2);font-size:var(--fs-sm);line-height:1.55}

/* SECTION 3 · 4 */
.tn-dir{padding:44px 0 52px;border-top:8px solid #fff}  /* 첫 화면과 색이 비슷해 흰 띠로 나눔(2026-10-08) */
html[data-theme="dark"] .tn-dir{border-top-color:var(--bg)}
.tn-dir .tn-h2{margin-bottom:22px}
.tn-types{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tn-types .tn-card{padding:18px 20px}
.tn-row.is-sm .tn-ic{width:52px;height:52px}
.tn-row.is-sm .tn-ic svg{width:26px;height:26px}
.tn-types h3{font-size:var(--fs-md);font-weight:800;margin:0}
.tn-exam{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:14px;padding:18px 24px}
.tn-exam h2{font-size:var(--fs-md);font-weight:800;margin:0;color:var(--tn-blue)}
.tn-mini-flow{display:flex;align-items:flex-start;gap:28px}
.tn-mini-flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--tn-navy);white-space:nowrap}
.tn-mini-flow li+li::before{content:"→";position:absolute;left:-22px;top:9px;color:var(--tn-blue)}

/* SECTION 5 · 2×2 */
.tn-balance{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.tn-balance .tn-card{display:flex;flex-direction:column;padding:30px 28px 26px}
.tn-balance .tn-row{gap:28px;align-items:flex-start;flex:1}
.tn-balance h3{font-size:1.6rem;font-weight:800;margin:.3rem 0 .4rem}
.tn-balance .tn-row p{margin:0;color:var(--tn-ink-2);font-size:var(--fs-md);line-height:1.55}
.tn-keys{margin:22px 0 0;padding:14px 20px;border-radius:999px;background:var(--tn-ic);color:var(--tn-navy);font-weight:600;font-size:var(--fs-sm);text-align:center}

/* SECTION 6 */
.tn-flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px;text-align:center}
.tn-flow3 li{position:relative;display:flex;flex-direction:column;align-items:center}
.tn-flow3 li+li::before{content:"→";position:absolute;left:-20px;top:42px;transform:translateX(-50%);color:var(--tn-blue);font-size:1.6rem}
.tn-flow3 .tn-ic{background:var(--tn-card)}
.tn-flow3 h3{font-size:var(--fs-md);font-weight:800;margin:18px 0 8px}
.tn-flow3 p{margin:0;color:var(--tn-ink-2);line-height:1.6}
.tn-quiz-cta{display:flex;align-items:center;gap:28px;margin-top:44px;padding:22px 28px}
.tn-quiz-cta>p{flex:1;margin:0;padding-left:28px;border-left:1px solid var(--tn-line);font-size:var(--fs-lg);font-weight:800;color:var(--tn-navy);line-height:1.45}
.tn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:58px;padding:0 2rem;border-radius:8px;background:var(--tn-blue);color:#fff;font-weight:700;font-size:var(--fs-md);text-decoration:none;white-space:nowrap}
.tn-btn:hover{background:#1846B4;color:#fff}

/* SECTION 7 */
.tn-steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px}
.tn-steps4 .tn-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px}
.tn-steps4 .tn-card+.tn-card::before{content:"→";position:absolute;left:-17px;top:50%;transform:translate(-50%,-50%);color:var(--tn-blue)}
.tn-steps4 b{margin-top:14px;color:var(--tn-blue);font-size:var(--fs-sm)}
.tn-steps4 h3{font-size:var(--fs-md);font-weight:800;margin:4px 0 8px}
.tn-steps4 p{margin:0;color:var(--tn-ink-2);line-height:1.6;font-size:var(--fs-sm)}

/* SECTION 8 */
.tn-before{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.tn-before .tn-card{padding:26px 26px 28px}
.tn-before h3{font-size:var(--fs-md);font-weight:800;margin:20px 0 8px}
.tn-before p{margin:0;color:var(--tn-ink-2);line-height:1.6}

/* SECTION 9 · 자주 묻는 질문 */
.tn-faq{display:grid;gap:12px;margin-top:28px}
.tn-faq-item{border:1px solid var(--tn-line);border-radius:10px;background:var(--tn-card)}
.tn-faq-item h3{margin:0;font-size:var(--fs-md)}
.tn-faq button{display:flex;align-items:center;gap:20px;width:100%;padding:18px 24px;background:none;border:0;font:inherit;font-weight:700;color:var(--tn-navy);text-align:left;cursor:pointer}
.tn-faq button::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--tn-navy);border-bottom:2px solid var(--tn-navy);transform:rotate(45deg) translateY(-3px)}
.tn-faq button[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-3px)}
.tn-faq button:focus-visible{outline:2px solid var(--tn-blue);outline-offset:-2px;border-radius:10px}
.tn-q{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tn-ic);color:var(--tn-blue);font-weight:800}
.tn-faq button[aria-expanded="true"] .tn-q{background:var(--tn-blue);color:#fff}
.tn-faq-a{padding:0 24px 18px 78px}
.tn-faq-a p{margin:0;padding:12px 16px;border-radius:6px;background:var(--tn-soft);color:var(--tn-ink-2);line-height:1.7}

/* SECTION 10 · 상담 띠 — 사진 오른쪽, 왼쪽은 남색 */
.tn-cta{position:relative;overflow:hidden;background:#123A86;color:#fff;padding:72px 0}
.tn-cta-bg{position:absolute;inset:0}
.tn-cta-bg img{width:100%;height:100% !important;object-fit:cover;object-position:right center}
.tn-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,46,112,.97) 0%,rgba(14,46,112,.9) 40%,rgba(14,46,112,.2) 75%,rgba(14,46,112,0) 100%)}
.tn-cta-in{position:relative}
.tn-label.is-light{color:#fff}
.tn .tn-cta h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;line-height:1.3;margin:0}
.tn-cta h2 span{color:#9CC0FF}
.tn-cta-lead{margin:1rem 0 0;color:rgba(255,255,255,.88);font-size:var(--fs-md)}
.tn-cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.tn-cbtn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:60px;min-width:220px;padding:0 1.8rem;border-radius:8px;font-weight:700;font-size:var(--fs-md);text-decoration:none;white-space:nowrap;border:2px solid #fff;transition:background .2s}
.tn-cbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.tn-cbtn.is-naver{background:#fff;color:#03A94D;border-color:#03C75A}
.tn-cbtn.is-tel{background:#fff;color:#1F55D6}
.tn-cbtn.is-online{background:#1F55D6;color:#fff;border-color:rgba(255,255,255,.7)}
.tn-cbtn:hover{filter:brightness(.96)}

/* SECTION 11 · 관련 페이지 */
.tn-related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.tn-rel{display:grid;grid-template-columns:1fr auto;align-items:center;height:100%;padding:14px 14px 20px;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.tn-rel:hover,.tn-rel:focus-visible{border-color:var(--tn-blue);box-shadow:0 6px 20px rgba(11,30,74,.08)}
.tn-rel img{grid-column:1 / 3;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-bottom:18px}
.tn-rel-tx{display:flex;flex-direction:column;gap:4px;padding-left:6px}
.tn-rel-tx b{font-size:var(--fs-lg);color:var(--tn-navy)}
.tn-rel-tx small{color:var(--tn-ink-2);font-size:var(--fs-sm)}
.tn-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tn-ic);color:var(--tn-blue);margin-right:4px}

/* 자가 체크 페이지 */
.tn-check-page .tn-hero{padding-bottom:48px}
.tn-check-page .tn .tn-title,.tn-check-page .tn-title{font-size:clamp(2.2rem,5vw,3.6rem)}
.tn-check-note{margin:20px 0 0;color:#5A6676;font-size:var(--fs-sm)}
.tn-check-back{margin-top:28px;text-align:center}

/* 태블릿 */
@media (max-width:1024px){
  .tn-sec{padding:64px 0}
  .tn-types,.tn-steps4{grid-template-columns:repeat(2,1fr)}
  .tn-steps4 .tn-card:nth-child(odd)::before{display:none}
  .tn-check3,.tn-before{grid-template-columns:1fr}
  .tn-exam{flex-direction:column;align-items:flex-start}
  .tn-related{grid-template-columns:repeat(2,1fr)}
}
/* 휴대폰 */
@media (max-width:768px){
  .tn .wrap{width:calc(100% - 40px)}
  .tn-sec{padding:52px 0}
  .tn-hero{padding-top:calc(var(--nav-h) + 12px)}
  .tn-hero-bg{position:relative;width:auto;height:220px;margin:-4px -20px 0;order:2}
  .tn-hero{display:flex;flex-direction:column}
  .tn-hero-in{order:1}
  .tn-hero-bg{order:2;margin:24px 0 0;top:auto;bottom:auto}
  .tn-hero{padding-bottom:0}
  .tn-hero-bg::after{background:linear-gradient(0deg,#F5F9FF 0%,rgba(245,249,255,0) 25%)}
  .tn .tn-title{white-space:normal}
  .tn-check3{margin-top:28px}
  .tn-types,.tn-balance,.tn-flow3,.tn-steps4,.tn-related{grid-template-columns:1fr}
  .tn-mini-flow{flex-wrap:wrap;gap:16px 26px}
  .tn-balance .tn-card{padding:24px 20px}
  .tn-balance .tn-row{gap:18px}
  .tn-balance .tn-ic.is-lg{width:64px;height:64px}
  .tn-balance h3{font-size:1.35rem}
  .tn-balance .tn-row p{font-size:var(--fs-sm)}
  .tn-keys{border-radius:14px;font-size:var(--fs-sm)}
  .tn-flow3{gap:44px}
  .tn-flow3 li+li::before{left:50%;top:-34px;transform:translateX(-50%) rotate(90deg)}
  .tn-quiz-cta{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px}
  .tn-quiz-cta>p{padding-left:0;border-left:0;font-size:var(--fs-md)}
  .tn-btn{width:100%}
  .tn-steps4{gap:30px}
  .tn-steps4 .tn-card::before{display:none}
  .tn-steps4 .tn-card+.tn-card::before{display:block;left:50%;top:-16px;transform:translate(-50%,-50%) rotate(90deg)}
  .tn-faq button{padding:16px 16px;gap:14px}
  .tn-faq-a{padding:0 16px 16px}
  .tn-cta{padding:56px 0}
  .tn-cta-bg::after{background:rgba(14,46,112,.9)}
  .tn-cta-btns{flex-direction:column}
  .tn-cbtn{width:100%;min-width:0}
}