@charset "utf-8";
/* ============================================================
   자산 09 — 목디스크 : 증상 발생의 주요 원인
   접두어: nkc-
   구조: 머리띠 + 4행 (색 블록 + 꼬리 + 설명)
   폰트: Paperlogy 4Regular / 8ExtraBold
   ※ 가로 폭은 이 자산이 정하지 않는다. 감싸는 쪽에서 --nkc-max 로 지정.
   ============================================================ */

@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");}

.nkc{
  /* ---- 색 (원본 실측 + 그라데이션) ---- */
  --c-head:#40210F;
  --c-text:#898989;
  --c-line:#EFECE8;
  /* 4단계 블록: 밝은쪽 → 어두운쪽 */
  --b1-a:#E8DACC; --b1-b:#CDB49E;
  --b2-a:#D0AF92; --b2-b:#AC8460;
  --b3-a:#8D5533; --b3-b:#5F3319;
  --b4-a:#55301A; --b4-b:#33180A;
  /* ---- 치수 ---- */
  --blk:clamp(58px,13.2cqw,152px);

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

/* ---------- 머리띠 ---------- */
.nkc-head{
  margin:0 0 clamp(9px,2.4cqw,26px);
  background:linear-gradient(160deg,#5A331B 0%,var(--c-head) 62%);
  color:#fff;
  text-align:center;
  font-weight:800;
  font-size:clamp(16px,4.6cqw,45px);
  letter-spacing:-.01em;
  line-height:1.3;
  padding:clamp(12px,3.2cqw,30px) 14px;
  border-radius:clamp(9px,2.4cqw,22px);
}

/* ---------- 목록 ---------- */
.nkc-list{list-style:none;margin:0;padding:0;}
.nkc-item{
  display:grid;
  grid-template-columns:var(--blk) 1fr;
  align-items:center;
  column-gap:clamp(22px,6.4cqw,70px);
}
.nkc-item + .nkc-item{margin-top:clamp(7px,2.2cqw,26px);}

/* 색 블록 + 꼬리 */
.nkc-ico{
  position:relative;
  width:var(--blk);
  aspect-ratio:152 / 210;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--a) 0%,var(--b) 100%);
}
.nkc-ico::after{                     /* 오른쪽 삼각 꼬리 */
  content:"";position:absolute;
  left:100%;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-top:calc(var(--blk) * .115) solid transparent;
  border-bottom:calc(var(--blk) * .115) solid transparent;
  border-left:calc(var(--blk) * .16) solid var(--b);
}
.nkc-ico svg{width:74%;height:auto;color:#fff;display:block;}

.nkc-item:nth-child(1) .nkc-ico{--a:var(--b1-a);--b:var(--b1-b);}
.nkc-item:nth-child(2) .nkc-ico{--a:var(--b2-a);--b:var(--b2-b);}
.nkc-item:nth-child(3) .nkc-ico{--a:var(--b3-a);--b:var(--b3-b);}
.nkc-item:nth-child(4) .nkc-ico{--a:var(--b4-a);--b:var(--b4-b);}

/* 설명 */
.nkc-txt{
  align-self:stretch;
  display:flex;align-items:center;
  margin:0;
  padding:clamp(10px,2.6cqw,26px) 0;
  font-weight:400;
  font-size:clamp(15px,4.3cqw,36px);
  line-height:1.45;
  color:var(--c-text);
  text-align:left;
}
.nkc-item + .nkc-item .nkc-txt{border-top:1px solid var(--c-line);}

@supports not (container-type:inline-size){
  .nkc{--blk:clamp(58px,13vw,152px);}
}