@charset "utf-8";
/* ============================================================
   자산 10 — 「목디스크」를 다스리는 한약의 효능 (6가지)
   접두어: nkh-
   원본: 자산 1@4x-8.png (13197x15683, 4배)
   기준: 모바일 우선 1열 → 640px 이상 2열
   폰트: Paperlogy 4Regular / 8ExtraBold
   ※ 가로 폭은 이 자산이 정하지 않는다. 감싸는 쪽에서 --nkh-max 로 지정.
   ------------------------------------------------------------
   구조 메모
     원본은 육각형 6칸이 파우치를 둘러싼 벌집 배치다.
     벌집을 그대로 옮기면 폰(360px)에서 0.11배로 줄어 본문이 4px 이 된다.
     따라서 자산 03(dw6) 과 동일하게 "육각 배지 + 옆 글" 목록형으로 바꿨다.
     색·문구·아이콘은 원본 그대로 유지한다.
   ============================================================ */

@font-face{
  font-family:"Paperlogy";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/Paperlogy-4Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Paperlogy";font-style:normal;font-weight:800;font-display:swap;
  src:url("assets/fonts/Paperlogy-8ExtraBold.woff2") format("woff2");
}

/* ============================================================
   재사용 부품 — 자산 08 타이틀 띠 (hty). 클래스명 그대로 유지한다.
   common.css 추출 시 이 블록만 지우면 된다.
   ============================================================ */
.hty{
  --hty-bg:#40210F;
  --hty-color:#F5ECDD;
  --hty-accent:#D8AC72;
  --hty-size:clamp(17px,5cqw,52px);
  --hty-pad-y:.40em;
  --hty-pad-x:1em;

  container-type:inline-size;
  display:block;
  width:100%;
  max-width:var(--hty-max,none);
  margin:0 auto;
  box-sizing:border-box;
  padding:var(--hty-pad-y) var(--hty-pad-x);
  background:var(--hty-bg);

  font-family:"Paperlogy","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-weight:800;
  font-size:var(--hty-size);
  line-height:1.3;
  letter-spacing:-.015em;
  text-align:center;
  color:var(--hty-color);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.hty b{color:var(--hty-accent);font-weight:inherit;}
.hty--round{border-radius:999px;}
@supports not (container-type:inline-size){
  .hty{--hty-size:clamp(17px,4vw,52px);}
}

/* ============================================================
   자산 10 본체
   ============================================================ */
.nkh{
  /* ---- 색 (원본 실측) ---- */
  --c-bg:transparent;      /* 바깥 배경 제거(캡틴 지시). 원래값 #4C6971 짙은 청회색 */
  --c-card:#FFFFFF;        /* 카드 */
  --c-line:#ECE7E0;        /* 구분선 · 카드 테두리 */
  --c-title:#1A1A1A;       /* 제목 */
  --c-text:#727171;        /* 본문 */
  --c-gold:#B0763F;        /* 브랜드 골드 (육각 테두리 계열) */
  --c-eyebrow:#A9805A;     /* 영문 라벨 */
  --c-badge-1:#F6E5CB;     /* 육각 배지 밝은쪽 */
  --c-badge-2:#E3C69C;     /* 육각 배지 어두운쪽 */
  /* ---- 굵기 ---- */
  --w-title:800;
  --w-body:400;            /* 원본은 Medium(500). Paperlogy-5Medium 확보 시 500 으로 교체 */
  /* ---- 치수 ---- */
  --pad:clamp(18px,4.4cqw,44px);
  --gap-row:clamp(20px,4.6cqw,38px);
  --badge:clamp(44px,11.6cqw,78px);

  container-type:inline-size;
  max-width:var(--nkh-max,1500px);
  margin-inline:auto;
  box-sizing:border-box;
  font-family:"Paperlogy","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  color:var(--c-title);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  line-height:1.5;
}
.nkh *,.nkh *::before,.nkh *::after{box-sizing:border-box;}

/* ---------- 바깥 액자 (짙은 청회색) ---------- */
.nkh__frame{
  background:var(--c-bg);
  border-radius:clamp(18px,4.4cqw,28px);
  padding:clamp(10px,2.6cqw,16px);
}
.nkh__bar{
  margin:0 0 clamp(10px,2.6cqw,16px);
  border-radius:clamp(6px,1.6cqw,10px);
}

/* ---------- 카드 ---------- */
.nkh__card{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:clamp(12px,3cqw,20px);
  padding:var(--pad);
}

/* ---------- 헤더 ---------- */
.nkh-head{
  display:flex;align-items:center;
  gap:clamp(14px,3.6cqw,40px);
  padding-block:clamp(4px,1.4cqw,10px) clamp(16px,4cqw,24px);
}
.nkh-head__img{
  flex:0 0 auto;
  width:clamp(102px,28cqw,300px);
  height:auto;display:block;
}
.nkh-head__txt{min-width:0;}
.nkh-eyebrow{
  margin:0 0 .35em;
  font-weight:var(--w-title);
  font-size:clamp(17px,4.8cqw,38px);   /* 6가지 주안점(lead)과 동일 크기·반응형값 (캡틴 지시) */
  letter-spacing:-.015em;
  white-space:nowrap;
  color:var(--c-eyebrow);
}
.nkh-lead{
  margin:0;
  font-weight:var(--w-title);
  font-size:clamp(17px,4.8cqw,44px);
  letter-spacing:-.015em;
  line-height:1.3;
}
.nkh-lead b{color:var(--c-gold);font-weight:inherit;}
.nkh-head__txt::after{
  content:"";display:block;
  width:clamp(30px,8cqw,44px);height:3px;margin-top:clamp(9px,2.4cqw,13px);
  background:linear-gradient(90deg,var(--c-gold),#E3C69C);
  border-radius:2px;
}

/* ---------- 목록 ---------- */
.nkh-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--c-line);
  padding-top:clamp(18px,4.4cqw,26px);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-row);
}
.nkh-item{
  display:grid;
  grid-template-columns:var(--badge) 1fr;
  column-gap:clamp(12px,3.2cqw,18px);
  align-items:start;
}

/* 육각 배지 + 아이콘 */
.nkh-badge{
  position:relative;
  width:var(--badge);height:calc(var(--badge) * 1.1547);
  margin-top:.1em;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--c-badge-1),var(--c-badge-2));
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.nkh-badge::before{
  content:"";position:absolute;inset:1.8px;
  background:#FFFDFA;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.nkh-badge svg{
  position:relative;
  width:62%;height:auto;
  color:#1A1A1A;
  display:block;
}
.nkh-badge--wide svg{width:74%;}

.nkh-item__t{
  margin:0 0 .18em;
  font-weight:var(--w-title);
  font-size:clamp(15.5px,4.2cqw,28px);
  letter-spacing:-.01em;
  line-height:1.35;
  text-align:left;
}
.nkh-item__t small{
  font-size:.72em;font-weight:inherit;color:var(--c-text);letter-spacing:0;
}
.nkh-item__d{
  margin:0;
  font-weight:var(--w-body);
  font-size:clamp(13px,3.5cqw,21px);
  line-height:1.6;
  color:var(--c-text);
  text-align:left;
}

/* ---------- 아주 좁은 폭(320px 급): 헤더 세로 쌓기 ---------- */
@container (max-width:342px){
  .nkh-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .nkh-head__img{width:112px;}
  .nkh-eyebrow{white-space:normal;letter-spacing:.12em;}
}

/* ---------- 넓은 폭: 2열 ---------- */
@container (min-width:640px){
  .nkh-list{grid-template-columns:1fr 1fr;column-gap:clamp(24px,4cqw,40px);}
}
@supports not (container-type:inline-size){
  .nkh{max-width:1500px;}
  @media (min-width:700px){ .nkh-list{grid-template-columns:1fr 1fr;column-gap:32px;} }
  @media (max-width:374px){
    .nkh-head{flex-direction:column;align-items:flex-start;gap:12px;}
    .nkh-head__img{width:112px;}
    .nkh-eyebrow{white-space:normal;letter-spacing:.12em;}
  }
}