/* 청정 한약재(herbal-quality.html) 전용 — 2026-10-08 병원 오더 · 시안 3장.
   이 파일은 herbal-quality.html 만 읽습니다. 헤더 · 푸터 꾸밈은 style.css 그대로입니다. */
.hq{
  --hq-navy:#0E2A47; --hq-teal:#1F7A80; --hq-teal-2:#2A9A9A;
  --hq-mint:#E8F3F2; --hq-mint-2:#D5EAE8; --hq-cream:#FAF8F3;
  --hq-card:#FFFFFF; --hq-ink:#1A2533; --hq-ink-2:#4A5563; --hq-line:#E3E8EC;
  color:var(--hq-ink);background:#fff;
}
html[data-theme="dark"] .hq{
  --hq-navy:#CFE3F5; --hq-teal:#5CC4C4; --hq-teal-2:#5CC4C4;
  --hq-mint:#14232A; --hq-mint-2:#1E3540; --hq-cream:#141A20;
  --hq-card:#1A222B; --hq-ink:#E8ECF1; --hq-ink-2:#AAB4C0; --hq-line:rgba(232,236,241,.12);
  background:var(--bg);
}
.hq .hq-hero{padding:0}
.hq h2,.hq h3{color:var(--hq-navy);letter-spacing:-.02em;word-break:keep-all}
.hq p{word-break:keep-all}
.hq img{display:block;max-width:100%;height:auto}
.hq-sec{padding:88px 0}
.hq-cream{background:var(--hq-cream)}
.hq-mint{background:var(--hq-mint)}

/* 공통 머리글 · 단추 */
.hq-head{margin-bottom:40px}
.hq-head h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;line-height:1.3;margin:0}
.hq-head p{margin:.8rem 0 0;color:var(--hq-ink-2);font-size:var(--fs-sm)}
.hq-head.is-center{text-align:center;max-width:860px;margin-inline:auto;margin-bottom:44px}
.hq-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hq-eyebrow{color:var(--hq-teal) !important;font-weight:700;font-size:var(--fs-xs) !important;margin:0 0 1.1rem !important;position:relative;padding-bottom:14px}
.hq-eyebrow::after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:2px;margin-left:-14px;background:var(--hq-teal)}
.hq-label{display:flex;align-items:center;gap:16px;font-weight:700;color:var(--hq-navy);margin:0 0 20px}
.hq-label::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.hq-label.is-light{color:#fff;max-width:260px}

.hq-btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:56px;padding:0 1.8rem;border-radius:999px;font-weight:700;font-size:var(--fs-sm);text-decoration:none;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.hq-btn-main{background:var(--hq-navy);color:#fff;border:1.5px solid var(--hq-navy)}
.hq-btn-main:hover{background:#163a60;color:#fff}
html[data-theme="dark"] .hq-btn-main{color:#0E1A26}
.hq-btn-sub{background:rgba(255,255,255,.85);color:var(--hq-navy);border:1.5px solid var(--hq-navy)}
.hq-btn-sub:hover{background:var(--hq-mint)}
html[data-theme="dark"] .hq-btn-sub{background:transparent}
.hq-btn-sm{min-height:46px;font-size:var(--fs-xs);padding:0 1.4rem;flex:none}
.hq-arrow{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--hq-line);color:var(--hq-navy);font-size:var(--fs-2xs);transition:border-color .2s,background .2s}

/* SECTION 1 · 첫 화면 — PC 는 그림을 오른쪽 기준 배경으로, 왼쪽은 밝게 흐려 글을 얹습니다 */
.hq-hero{position:relative;min-height:calc(var(--nav-h) + 600px);display:flex;align-items:center;overflow:hidden;background:#F7F3EC}
.hq-hero-bg{position:absolute;inset:0}
.hq-hero-bg img{width:100%;height:100% !important;object-fit:cover;object-position:right center}
.hq-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,247,241,.96) 0%,rgba(250,247,241,.85) 30%,rgba(250,247,241,0) 58%)}
.hq-hero-in{position:relative;padding:calc(var(--nav-h) + 40px) 0 64px}
.hq-hero .crumb{margin-bottom:36px}
.hq-hero-title{font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:800;line-height:1.25;letter-spacing:-.03em;color:#0E2A47;margin:0}
.hq-hero-title em{font-style:normal;color:#1F7A80}
.hq-hero-lead{margin:1.4rem 0 0;font-size:var(--fs-md);line-height:1.7;color:#3D4855}
.hq-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}
.hq-hero .hq-btn-main{background:#0E2A47;border-color:#0E2A47;color:#fff}
.hq-hero .hq-btn-sub{color:#0E2A47;border-color:#1F7A80;background:rgba(255,255,255,.85)}
html[data-theme="dark"] .hq-hero .crumb,html[data-theme="dark"] .hq-hero .crumb a{color:#4A5563}

/* SECTION 2 · 세 카드 */
.hq-keys{padding-top:40px}
.hq-key-grid,.hq-std-grid,.hq-crit-list,.hq-proc,.hq-rel-grid,.hq-steps{list-style:none;margin:0;padding:0}
.hq-key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hq-key{display:flex;flex-direction:column;height:100%;padding:24px 10px 10px;border:1px solid var(--hq-line);border-radius:6px;background:var(--hq-card);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.hq-key:hover,.hq-key:focus-visible{border-color:var(--hq-teal);box-shadow:0 6px 20px rgba(14,42,71,.08)}
.hq-key:hover .hq-arrow,.hq-rel:hover .hq-arrow{border-color:var(--hq-teal);background:var(--hq-mint)}
.hq-key-head{display:flex;align-items:flex-start;gap:14px;padding:0 14px 20px}
.hq-key-head>div{flex:1}
.hq-key h2{font-size:var(--fs-lg);font-weight:800;margin:0}
.hq-key p{margin:.35rem 0 0;color:var(--hq-ink-2);font-size:var(--fs-sm)}
.hq-ico{flex:none;width:38px;height:38px;fill:none;stroke:var(--hq-navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hq-key img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;margin-top:auto}

/* SECTION 3 · 기준 네 칸 */
.hq-std-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hq-std{padding:32px 26px;border:1px solid var(--hq-line);border-radius:6px;background:var(--hq-card);text-align:center}
.hq-badge{display:inline-grid;place-items:center;min-width:84px;height:84px;padding:0 10px;border-radius:50%;background:var(--hq-mint);color:var(--hq-teal);font-weight:800;font-size:var(--fs-sm);border:1.5px solid var(--hq-mint-2)}
.hq-std h3{font-size:var(--fs-md);font-weight:800;margin:1.2rem 0 .8rem}
.hq-std p{margin:0;color:var(--hq-ink-2);line-height:1.75;font-size:var(--fs-sm)}

/* SECTION 4 · 상세 네 줄 */
.hq-crit-list{display:grid;gap:20px;max-width:1080px;margin-inline:auto}
.hq-crit{display:flex;align-items:center;gap:48px;padding:24px 40px;border:1px solid var(--hq-line);border-radius:8px;background:var(--hq-card)}
.hq-crit-ico{flex:none;display:grid;place-items:center;width:144px;height:144px;border-radius:50%;background:var(--hq-mint)}
.hq-crit-ico svg{width:74px;height:74px;fill:none;stroke:var(--hq-navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hq-crit-tx{flex:1;min-width:0}
.hq-crit h3{font-size:1.35rem;font-weight:800;margin:0 0 .6rem}
.hq-no{color:var(--hq-teal);margin-right:.6rem}
.hq-crit-tx>p{margin:0;color:var(--hq-ink-2);line-height:1.7;font-size:var(--fs-sm)}
.hq-crit-tx>p.hq-check{margin-top:16px;padding-top:16px;border-top:1px solid var(--hq-line);display:flex;flex-wrap:wrap;gap:4px 0;color:var(--hq-ink)}
.hq-check b{color:var(--hq-teal);font-weight:700;padding-right:18px;margin-right:18px;border-right:1px solid var(--hq-line)}

/* SECTION 5 · 인증마크만으로 판단하지 않습니다 */
.hq-sel{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hq-rule{display:block;width:44px;height:2px;background:var(--hq-teal);margin-bottom:28px}
.hq-sel h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;line-height:1.3;margin:0}
.hq-sel-tx>p{margin:1.3rem 0 0;font-size:var(--fs-md);line-height:1.75;color:var(--hq-ink-2)}
.hq-steps{display:flex;align-items:flex-start;gap:12px;margin-top:36px}
.hq-steps li{position:relative;flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:700;color:var(--hq-navy);text-align:center;font-size:var(--fs-sm)}
.hq-steps li+li::before{content:"→";position:absolute;left:-14px;top:48px;transform:translateX(-50%);color:var(--hq-teal);font-weight:400}
.hq-step-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:112px;height:112px;border-radius:50%;background:var(--hq-card);border:1px solid var(--hq-mint-2)}
.hq-step-c b{color:var(--hq-teal);font-size:var(--fs-xs)}
.hq-step-c svg{width:36px;height:36px;fill:none;stroke:var(--hq-navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hq-sel-fig{margin:0}
.hq-sel-fig img{width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:16px}

/* SECTION 6 · 관리 과정 네 단계 */
.hq-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.hq-proc-card{position:relative;padding:20px 12px 22px;border:1px solid var(--hq-line);border-radius:6px;background:var(--hq-card)}
.hq-proc-card+.hq-proc-card::before{content:"›";position:absolute;left:-15px;top:50%;transform:translate(-50%,-50%);color:var(--hq-navy);font-size:1.6rem;line-height:1}
.hq-proc-card h3{display:flex;align-items:center;gap:12px;font-size:var(--fs-md);font-weight:800;margin:0 0 14px;padding:0 6px}
.hq-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--hq-teal);color:#fff;font-size:var(--fs-2xs);font-weight:700}
.hq-proc-card img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:3px}
.hq-proc-card p{margin:14px 0 0;padding:0 6px;color:var(--hq-ink-2);line-height:1.7;font-size:var(--fs-sm)}
.hq-note{margin:20px 0 0;color:var(--hq-ink-2);font-size:var(--fs-xs)}

/* SECTION 7 · 자주 묻는 질문 */
.hq-faq-sec{padding:64px 0}
.hq-faq-item{border-bottom:1px solid rgba(14,42,71,.25)}
.hq-faq-item h3{margin:0;font-size:var(--fs-md)}
.hq-faq button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 22px;background:none;border:0;font:inherit;font-weight:700;color:var(--hq-navy);text-align:left;cursor:pointer}
.hq-faq button::after{content:"+";flex:none;font-size:1.5rem;font-weight:400;line-height:1}
.hq-faq button[aria-expanded="true"]::after{content:"−"}
.hq-faq button:focus-visible{outline:2px solid var(--hq-teal);outline-offset:-2px}
.hq-faq-item:has(button[aria-expanded="true"]){background:var(--hq-card);border-radius:6px;border-bottom-color:transparent;margin-bottom:8px}
.hq-faq-a{padding:0 16px 18px}
.hq-faq-a p{margin:0;padding:16px 20px;background:var(--hq-mint);border-radius:4px;color:var(--hq-ink);line-height:1.7;font-size:var(--fs-sm)}

/* SECTION 8 · 상담 띠 */
.hq-cta{padding:56px 0 60px;background:linear-gradient(110deg,#0E2A47 0%,#123A55 55%,#1C5F68 100%);color:#fff}
.hq .hq-cta h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;margin:0;line-height:1.3}
.hq-cta-lead{margin:.8rem 0 0;color:rgba(255,255,255,.85);font-size:var(--fs-md)}
.hq-cta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}
.hq-cbtn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:58px;padding:0 2rem;border-radius:999px;font-weight:700;font-size:var(--fs-sm);text-decoration:none;color:#fff;white-space:nowrap;transition:background .2s}
.hq-cbtn.is-naver{background:#2A9A9A}
.hq-cbtn.is-naver:hover{background:#238585;color:#fff}
.hq-cbtn.is-tel{border:1.5px solid #fff}
.hq-cbtn.is-tel:hover{background:rgba(255,255,255,.1);color:#fff}
.hq-cbtn.is-text{padding:0 .4rem;text-decoration:underline;text-underline-offset:5px}
.hq-cbtn.is-text:hover{color:#BFE6E6}

/* SECTION 9 · 관련 페이지 */
.hq-related{padding:48px 0 72px}
.hq-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hq-rel{display:block;height:100%;border:1px solid var(--hq-line);border-radius:6px;overflow:hidden;background:var(--hq-card);color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.hq-rel:hover,.hq-rel:focus-visible{border-color:var(--hq-teal);box-shadow:0 6px 20px rgba(14,42,71,.08)}
.hq-rel img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hq-rel-tx{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:18px 22px 20px}
.hq-rel-tx h3{grid-column:1;font-size:var(--fs-md);font-weight:800;margin:0}
.hq-rel-tx p{grid-column:1;margin:.3rem 0 0;color:var(--hq-ink-2);font-size:var(--fs-xs)}
.hq-rel-tx .hq-arrow{grid-column:2;grid-row:1 / span 2}

/* 태블릿 */
@media (max-width:1024px){
  .hq-sec{padding:72px 0}
  .hq-std-grid{grid-template-columns:repeat(2,1fr)}
  .hq-proc{grid-template-columns:repeat(2,1fr)}
  .hq-proc-card:nth-child(odd)::before{display:none}
  .hq-sel{gap:36px}
  .hq-crit{gap:32px;padding:24px 28px}
  .hq-crit-ico{width:112px;height:112px}
  .hq-crit-ico svg{width:58px;height:58px}
  .hq-key-head{padding:0 6px 16px;gap:10px}
}
@media (max-width:860px){
  .hq-key-grid,.hq-rel-grid{grid-template-columns:1fr}
  .hq-sel{grid-template-columns:1fr}
  .hq-head-row{flex-direction:column;align-items:flex-start}
}
/* 휴대폰 — 첫 화면은 글 위 · 그림 아래로 쌓습니다 */
@media (max-width:768px){
  .hq .wrap{width:calc(100% - 40px)}
  .hq-sec{padding:56px 0}
  .hq-br{display:none}
  .hq-hero{display:flex;flex-direction:column-reverse;min-height:0;background:#FAF7F1}
  .hq-hero-bg{position:relative;height:310px}
  .hq-hero-bg img{object-position:72% center}
  .hq-hero-bg::after{display:none}
  .hq-hero-in{padding:calc(var(--nav-h) + 24px) 0 32px}
  .hq-hero .crumb{margin-bottom:22px}
  .hq-hero-lead{font-size:var(--fs-sm)}
  .hq-hero-btns{flex-direction:column}
  .hq-hero-btns .hq-btn{width:100%}
  .hq-keys{padding-top:32px}
  .hq-std-grid,.hq-proc{grid-template-columns:1fr}
  .hq-proc{gap:36px}
  .hq-proc-card::before{display:none}
  .hq-proc-card+.hq-proc-card::before{display:block;content:"›";left:50%;top:-19px;transform:translate(-50%,-50%) rotate(90deg)}
  .hq-proc-card img{aspect-ratio:4/3}
  .hq-crit{flex-direction:column;align-items:flex-start;gap:18px;padding:24px 22px}
  .hq-crit-ico{width:88px;height:88px}
  .hq-crit-ico svg{width:46px;height:46px}
  .hq-check b{padding-right:12px;margin-right:12px}
  .hq-steps{gap:8px}
  .hq-steps li{font-size:var(--fs-xs)}
  .hq-step-c{width:88px;height:88px}
  .hq-step-c svg{width:28px;height:28px}
  .hq-steps li+li::before{top:36px;left:-8px}
  .hq-sel-fig img{aspect-ratio:4/3.4}
  .hq-faq button{padding:18px 14px}
  .hq-faq-a{padding:0 10px 14px}
  .hq-cta-btns{flex-direction:column;align-items:stretch}
  .hq-cbtn{width:100%}
}