/* 한약재 관리(herbal-care.html) 전용 — 2026-10-08 병원 오더 · 시안 3장.
   바탕 꾸밈은 청정 한약재와 같은 herbal-quality.css(.hq-*) 를 함께 읽고, 이 파일은 이 페이지에만 있는 부품(.hc-*)입니다. */

/* 핵심 카드 — 아이콘을 연한 청록 원 안에 */
.hc-ico-c{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--hq-mint)}
.hc-ico-c .hq-ico{width:30px;height:30px}
.hc-ico-c.is-lg{width:88px;height:88px}
.hc-ico-c.is-lg .hq-ico{width:38px;height:38px}
.hc-keys .hq-key-head{align-items:center;gap:20px}
.hc-keys .hq-key h2{font-size:1.45rem}

/* 머리글 */
.hc-bar{display:block;width:40px;height:3px;background:var(--hq-teal);margin:0 auto 22px}
.hc-label{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--hq-teal) !important;font-weight:700;font-size:var(--fs-xs) !important;margin:0 0 .9rem !important}
.hc-label::before,.hc-label::after{content:"";width:32px;height:1px;background:currentColor;opacity:.6}

/* 8단계 개요 */
.hc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hc-step{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 22px 22px;border:1px solid var(--hq-line);border-radius:8px;background:var(--hq-card);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.hc-step:hover,.hc-step:focus-visible{border-color:var(--hq-teal);box-shadow:0 6px 20px rgba(14,42,71,.08)}
.hc-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--hq-mint);color:var(--hq-teal);font-weight:700}
.hc-step svg{position:absolute;top:22px;right:22px;width:44px;height:44px;fill:none;stroke:var(--hq-navy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hc-step h3{font-size:var(--fs-md);font-weight:800;margin:20px 0 8px}
.hc-step p{margin:0 0 18px;color:var(--hq-ink-2);font-size:var(--fs-sm);line-height:1.6}
.hc-go{margin-top:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--hq-line);color:var(--hq-navy)}
.hc-step:hover .hc-go{border-color:var(--hq-teal);background:var(--hq-mint)}

/* 1~4단계 — 글 왼쪽 · 사진 오른쪽(왼쪽 끝을 흐리게) */
.hc-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hc-dcard{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:310px;border:1px solid var(--hq-line);border-radius:8px;overflow:hidden;background:var(--hq-card)}
.hc-dcard>img{grid-column:2;grid-row:1;width:100%;height:100% !important;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hc-dtx{grid-column:1 / 3;grid-row:1;position:relative;z-index:1;padding:30px 0 28px 28px;max-width:62%}
.hc-dn{display:flex;align-items:center;gap:12px;margin:0;color:var(--hq-teal);font-size:1.5rem;font-family:Georgia,serif}
.hc-dn::after{content:"";width:28px;height:1px;background:currentColor}
.hc-dtx h3{font-size:1.45rem;font-weight:800;margin:14px 0 10px}
.hc-dtx>p:not(.hc-dn):not(.hc-chip){margin:0;color:var(--hq-ink-2);line-height:1.7;font-size:var(--fs-sm)}
.hc-chip{display:inline-flex;flex-wrap:wrap;gap:4px 12px;margin:22px 0 0;padding:12px 18px;border-radius:6px;background:var(--hq-mint);color:var(--hq-ink);font-size:var(--fs-xs)}
.hc-chip b{color:var(--hq-teal);font-weight:700}

/* 관리 원칙 */
.hc-principle-sec{padding-top:0}
.hc-principle{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:48px 40px;border-radius:10px;background:var(--hq-mint)}
.hc-pr-tx h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1.4;margin:0}
.hc-pr-tx em{font-style:normal;color:var(--hq-teal)}
.hc-pr-tx p{margin:1rem 0 0;color:var(--hq-ink-2);line-height:1.7}
.hc-pr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.hc-pr-list li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px}
.hc-pr-list li+li{border-left:1px solid var(--hq-mint-2)}
.hc-pr-list .hc-ico-c{background:var(--hq-mint-2)}
.hc-pr-list h3{font-size:var(--fs-sm);font-weight:800;margin:16px 0 8px}
.hc-pr-list p{margin:0;color:var(--hq-ink-2);font-size:var(--fs-xs);line-height:1.6}

/* 청정 한약재 연결 띠 */
.hc-banner{position:relative;display:flex;align-items:center;min-height:250px;margin-top:32px;border-radius:10px;overflow:hidden;background:#F5F1EA;text-decoration:none}
.hc-banner>img{position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover;object-position:right center}
.hc-banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(247,243,236,.97) 0%,rgba(247,243,236,.85) 35%,rgba(247,243,236,0) 62%)}
.hc-banner-tx{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:36px 40px}
.hc-banner-tx .hq-rule{margin-bottom:22px}
.hc-banner strong{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;line-height:1.4;color:#0E2A47}
.hc-banner-btn{margin-top:24px;background:#16525A;color:#fff;min-height:52px}
.hc-banner:hover .hc-banner-btn{background:#0E2A47}

/* 5~8단계 — 사진 위 · 글 아래, 사진 4:3 */
.hc-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hc-pcard{border:1px solid var(--hq-line);border-radius:8px;overflow:hidden;background:var(--hq-card)}
.hc-pcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hc-ptx{padding:22px 26px 26px}
.hc-ptx h3{display:flex;align-items:baseline;gap:14px;font-size:1.35rem;font-weight:800;margin:0 0 10px}
.hc-ptx h3 span{color:var(--hq-teal);font-family:Georgia,serif;font-style:italic;font-size:1.6rem;font-weight:400}
.hc-ptx>p{margin:0;color:var(--hq-ink-2);line-height:1.7}
.hc-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hc-tags li{padding:5px 14px;border-radius:999px;background:var(--hq-mint);color:var(--hq-teal);font-size:var(--fs-xs);font-weight:600}

/* 자주 묻는 질문 — 칸마다 흰 상자 */
.hc-faq{max-width:1080px;margin-inline:auto;display:grid;gap:12px}
.hc-faq .hq-faq-item{border:1px solid var(--hq-line);border-radius:6px;background:var(--hq-card);margin:0}
.hc-faq .hq-faq-item:has(button[aria-expanded="true"]){border-bottom-color:var(--hq-line);margin:0}
.hc-faq button{justify-content:flex-start}
.hc-faq button::after{margin-left:auto;content:"⌄";font-size:var(--fs-md)}
.hc-faq button[aria-expanded="true"]::after{content:"⌃"}
.hc-q{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#3E7A99;color:#fff;font-size:var(--fs-xs);font-weight:700}
.hc-faq .hq-faq-a{padding:0}
.hc-faq .hq-faq-a p{border-radius:0 0 6px 6px;padding:18px 30px;background:#F1F3F4}
html[data-theme="dark"] .hc-faq .hq-faq-a p{background:var(--hq-mint)}

/* 상담 띠 — 가운데 정렬, 단추 셋 같은 폭 */
.hc-cta{text-align:center;background:#0E2A47}
.hc-cta .hq-label{justify-content:center;max-width:none}
.hc-cta .hq-label::before{content:"";width:60px;height:1px;background:currentColor;opacity:.35}
.hc-cta .hq-label::after{flex:none;width:60px}
.hc-cta .hq-cta-btns{justify-content:center}
.hc-cta .hq-cbtn{min-width:240px;border-radius:6px}
.hc-cta .hq-cbtn.is-naver{background:#03C75A}
.hc-cta .hq-cbtn.is-naver:hover{background:#02B350}

/* 태블릿 */
@media (max-width:1024px){
  .hc-steps{grid-template-columns:repeat(2,1fr)}
  .hc-detail,.hc-grid2{grid-template-columns:1fr}
  .hc-principle{grid-template-columns:1fr;padding:40px 28px}
}
/* 휴대폰 */
@media (max-width:768px){
  .hc-steps{gap:12px}
  .hc-step{padding:18px 16px}
  .hc-step svg{width:34px;height:34px;top:18px;right:16px}
  .hc-n{width:40px;height:40px}
  .hc-step h3{font-size:var(--fs-sm)}
  .hc-dcard{display:flex;flex-direction:column-reverse;min-height:0}
  .hc-dcard>img{height:auto !important;aspect-ratio:4/3;-webkit-mask-image:none;mask-image:none}
  .hc-dtx{max-width:none;padding:22px 20px 24px}
  .hc-pr-list{grid-template-columns:1fr;gap:24px}
  .hc-pr-list li+li{border-left:0;border-top:1px solid var(--hq-mint-2);padding-top:24px}
  .hc-banner{flex-direction:column;align-items:stretch;min-height:0}
  .hc-banner>img{position:relative;height:200px !important;order:2}
  .hc-banner::before{display:none}
  .hc-banner-tx{padding:28px 22px}
  .hc-banner-btn{width:100%}
  .hc-ptx{padding:20px}
  .hc-faq button{padding:16px 14px;gap:12px}
  .hc-faq .hq-faq-a p{padding:16px 18px}
  .hc-cta .hq-cbtn{min-width:0}
}
@media (max-width:420px){ .hc-steps{grid-template-columns:1fr} }

/* 첫 화면 — 보약 처방처럼 큰 제목 '한약재 관리' + 핵심 문구(2026-10-09) */
.hc-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0;color:#1F7A80;font-weight:700;font-size:var(--fs-xs)}
.hc-eyebrow::after{content:"";width:24px;height:1.5px;background:currentColor}
.hq .hc-title{margin:.3rem 0 0;font-size:clamp(3rem,6.6vw,5.2rem);font-weight:900;line-height:1.1;letter-spacing:-.04em;color:#0E2A47}
.hc-key{margin:1.1rem 0 0;font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:800;color:#0E2A47;letter-spacing:-.02em}
.hc-key em{font-style:normal;color:#1F7A80}