/* 보약 유형 자가 체크 해보기(herbal-tonic-check.html) 전용 — 2026-10-08 병원 오더 · 시안.
   문항 · 계산 꾸밈의 바탕은 style.css '보약 자가진단' 절(.tonic-*)이고, 이 파일은 .tc 안에서만 덮어씁니다. */
.tc{--tc-navy:#0B1E4A;--tc-blue:#1F55D6;--tc-beige:#F7F2EA;--tc-card:#F3F6FB}
html[data-theme="dark"] .tc{--tc-card:#162033}

/* 첫 화면 — 베이지 바탕, 사진 오른쪽 */
.tc-hero{position:relative;overflow:hidden;background:var(--tc-beige);min-height:calc(var(--nav-h) + 400px);display:flex;align-items:center}
.tc-hero-bg{position:absolute;inset:0 0 0 auto;width:68%}
.tc-hero-bg img{width:100%;height:100% !important;object-fit:cover;object-position:70% center}
.tc-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F7F2EA 0%,rgba(247,242,234,.75) 22%,rgba(247,242,234,0) 55%)}
.tc-hero-in{position:relative;padding:calc(var(--nav-h) + 28px) 0 64px}
.tc-hero .crumb{margin-bottom:34px}
html[data-theme="dark"] .tc-hero .crumb,html[data-theme="dark"] .tc-hero .crumb a{color:#4A5563}
.tc .tc-title{margin:0;font-size:clamp(2.4rem,5vw,4rem);font-weight:900;line-height:1.2;letter-spacing:-.035em;color:var(--tc-navy)}
.tc-lead{margin:1.4rem 0 0;font-size:var(--fs-md);line-height:1.7;color:#3D4855}

/* 자가 체크 — 네 카드 2×2, 카드마다 옅은 한자 */
.tc-quiz-sec{padding:56px 0 64px}
.tc .tonic-quiz{margin-top:0;padding:0;border:0;background:none}
.tc .tonic-quiz-head::before{content:"";display:block;width:88px;height:88px;margin:0 auto 16px;border-radius:50%;
  background:#E6EFFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%230B1E4A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6H8v22h10'/%3E%3Cpath d='M21 6h3v10'/%3E%3Cpath d='M11 4h10v4H11Z'/%3E%3Cpath d='M12 14h8M12 19h5'/%3E%3Cpath d='m19 25 3 3 6-7' stroke='%231F55D6'/%3E%3C/svg%3E") center/42px no-repeat}
.tc .tonic-quiz-head h3{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800;color:var(--tc-navy)}
.tc .tonic-quiz-head p{font-size:var(--fs-md)}
.tc .tonic-quiz-grid{gap:20px}
.tc .tonic-q{position:relative;overflow:hidden;padding:28px 28px 22px;border-radius:12px;background:var(--tc-card);border:1px solid #E1E8F3}
.tc .tonic-q::after{position:absolute;top:22px;right:26px;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  font-family:"Noto Serif KR","Batang",serif;font-size:3rem;line-height:1;pointer-events:none;opacity:.55}
.tc .tonic-q:nth-child(1)::after{content:"氣";background:#DCE8F7;color:#7FA3CF}
.tc .tonic-q:nth-child(2)::after{content:"陽";background:#F7E6D6;color:#D9A37A}
.tc .tonic-q:nth-child(3)::after{content:"血";background:#F7DCDC;color:#D99393}
.tc .tonic-q:nth-child(4)::after{content:"陰";background:#DCE8F7;color:#7FA3CF}
.tc .tonic-q legend{font-size:var(--fs-lg);font-weight:800;color:var(--tc-navy);position:relative;z-index:1;padding-right:96px}
.tc .tonic-q-n{background:var(--tc-blue);color:#fff;font-size:var(--fs-2xs);padding:.25rem .6rem}
.tc .tonic-q-sub{position:relative;z-index:1;font-size:var(--fs-sm);margin-bottom:14px;padding-right:96px}
.tc .tonic-q label{position:relative;z-index:1;font-size:var(--fs-sm);padding:10px 8px}
.tc .tonic-q input{width:1.3rem;height:1.3rem}
.tc .tonic-quiz-calc{max-width:420px;min-height:62px;border-radius:8px;background:var(--tc-blue);border-color:var(--tc-blue);color:#fff;font-size:var(--fs-md)}
.tc .tonic-quiz-calc:hover{background:#1846B4;border-color:#1846B4;color:#fff}
.tc-disclaimer{margin:20px 0 0;text-align:center;color:#5A6676;font-size:var(--fs-xs);word-break:keep-all}

/* 아래 맞춤 보약 처방 띠 */
.tc-band{position:relative;overflow:hidden;background:var(--tc-beige);padding:64px 0 56px}
.tc-band-bg{position:absolute;inset:0 0 0 auto;width:62%}
.tc-band-bg img{width:100%;height:100% !important;object-fit:cover;object-position:right center}
.tc-band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F7F2EA 0%,rgba(247,242,234,.7) 25%,rgba(247,242,234,0) 55%)}
.tc-band-in{position:relative}
.tc-band-t{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.45;color:#2A3442;letter-spacing:-.02em}
.tc-band-t strong{color:var(--tc-navy);font-weight:900;font-size:1.2em}
.tc-band-list{list-style:none;margin:30px 0 0;padding:16px 8px;display:inline-flex;border-radius:14px;background:rgba(255,255,255,.88)}
.tc-band-list li{display:flex;align-items:center;gap:14px;padding:4px 26px;color:#2A3442;font-size:var(--fs-sm);line-height:1.5}
.tc-band-list li+li{border-left:1px solid #E1E3E8}
.tc-band-list svg{flex:none;width:38px;height:38px;fill:none;stroke:var(--tc-navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tc-band-btn{display:flex;width:max-content;align-items:center;gap:.7rem;margin-top:24px;min-height:54px;padding:0 1.8rem;border-radius:8px;background:var(--tc-navy);color:#fff;font-weight:700;text-decoration:none}
.tc-band-btn:hover{background:#163a7a;color:#fff}

@media (max-width:1024px){
  .tc-band-list{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px}
  .tc-band-list li{padding:0}
  .tc-band-list li+li{border-left:0}
}
@media (max-width:768px){
  .tc .wrap{width:calc(100% - 40px)}
  .tc-hero{flex-direction:column;align-items:stretch;min-height:0}
  .tc-hero-in{padding:calc(var(--nav-h) + 16px) 0 24px}
  .tc-hero .crumb{margin-bottom:20px}
  .tc-hero-bg{position:relative;width:auto;height:240px;order:2}
  .tc-hero-bg::after{background:linear-gradient(180deg,#F7F2EA 0%,rgba(247,242,234,0) 30%)}
  .tc-lead{font-size:var(--fs-sm)}
  .tc-quiz-sec{padding:44px 0 48px}
  .tc .tonic-q{padding:22px 18px 16px}
  .tc .tonic-q::after{width:64px;height:64px;font-size:2.2rem;top:16px;right:16px}
  .tc .tonic-q legend,.tc .tonic-q-sub{padding-right:70px}
  .tc-band{display:flex;flex-direction:column;padding:0}
  .tc-band-in{padding:40px 0 32px}
  .tc-band-bg{position:relative;width:auto;height:220px;order:2}
  .tc-band-bg::after{background:linear-gradient(180deg,#F7F2EA 0%,rgba(247,242,234,0) 30%)}
  .tc-band-btn{width:100%;justify-content:center}
}