/* ============================================================
   Oral Anatomy — 디자인 시스템
   색 체계는 해부학 조직 색 코드를 그대로 사이트 색으로 씁니다.
   (뼈=bone, 신경=nerve, 동맥=artery, 정맥=vein, 근육=muscle)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  /* 지면 */
  --paper:   #E9EBEE;   /* 석고(dental stone) 톤의 차가운 회백 */
  --paper-2: #F3F5F7;
  --card:    #FFFFFF;
  --ink:     #11161C;
  --ink-2:   #59626F;
  --ink-3:   #8B94A1;
  --rule:    #D3D9E0;
  --rule-2:  #E7EAEE;

  /* 조직 색 코드 = 카테고리 색 */
  --bone:    #C79A5B;
  --nerve:   #D9A81B;
  --artery:  #BE3346;
  --vein:    #3A6BA8;
  --muscle:  #98404F;

  /* 타입 */
  --display: 'Hahmlet', 'Nanum Myeongjo', serif;
  --body:    'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Consolas', monospace;

  /* 리듬 */
  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* 도판 용지의 아주 옅은 격자 */
  background-image:
    linear-gradient(rgba(17,22,28,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,22,28,.028) 1px, transparent 1px);
  background-size: 88px 88px;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
img, svg { max-width:100%; display:block; }

:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
section { padding-block: clamp(40px, 6vw, 68px); }

/* ── 공통 조판 요소 ───────────────────────────── */

.eyebrow {
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

.sec-head {
  display:flex; align-items:baseline; gap:18px;
  padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid var(--ink);
}
.sec-head h2 {
  font-family:var(--display); font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.2;
}
.sec-head .n { margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.08em; }

.btn {
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  border:1px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper-2); cursor:pointer; transition:.18s ease;
}
.btn:hover { background:transparent; color:var(--ink); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--paper-2); }
.btn.sm { padding:7px 13px; font-size:12px; }
.btn[disabled] { opacity:.4; cursor:not-allowed; }

/* ── 헤더 ─────────────────────────────────────── */

.site-head {
  position:sticky; top:0; z-index:50;
  background:rgba(233,235,238,.86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head .in { display:flex; align-items:center; gap:26px; height:60px; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.brand { display:flex; align-items:baseline; gap:9px; }
.brand b { font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.02em; }
.brand span { font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }
.nav { display:flex; gap:22px; margin-left:auto; }
.nav a { font-size:13px; color:var(--ink-2); transition:.15s; padding:4px 0; border-bottom:1px solid transparent; }
.nav a:hover { color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:720px){ .nav { display:none; } }

/* 언어 전환 */
.lang { display:flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden; margin-left:auto; }
.nav + .lang { margin-left:0; }
.lang button {
  padding:5px 10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  background:transparent; border:0; color:var(--ink-3); cursor:pointer; transition:.15s;
}
.lang button + button { border-left:1px solid var(--rule); }
.lang button:hover { color:var(--ink); }
.lang button[aria-pressed="true"] { background:var(--ink); color:var(--paper-2); }

/* ── 히어로 ───────────────────────────────────── */

.hero { padding-block: clamp(54px, 10vw, 112px) clamp(46px, 7vw, 78px); }
.hero .eyebrow { margin-bottom:24px; }

.hl {
  font-family:var(--display); font-weight:500; letter-spacing:-.035em;
  font-size:clamp(2.8rem, 9vw, 6rem); line-height:1; color:var(--ink);
}
.hl-sub {
  font-family:var(--display); font-weight:400; font-size:clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing:-.02em; color:var(--ink-2); margin-top:10px;
}

/* 조직 색 코드 — 히어로 아래 색 띠 하나가 사이트 색 체계를 그대로 설명합니다 */
.key { display:flex; gap:2px; max-width:600px; margin-top:38px; }
.key-seg {
  flex:1; padding-top:9px; border-top:3px solid var(--tc);
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
  animation: keydraw .5s ease both var(--d, 0s);
  transform-origin:left;
}
@keyframes keydraw { from { opacity:0; transform:scaleX(.4);} to { opacity:1; transform:none;} }
html[lang="ko"] .key-seg { font-size:11px; letter-spacing:.02em; }
@media (max-width:520px){ .key-seg { font-size:9px; letter-spacing:.04em; } }

.hero .lede { max-width:52ch; margin-top:34px; font-size:16px; color:var(--ink-2); }
.hero .cta { display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; }
.hero .meta {
  display:flex; flex-wrap:wrap; gap:0 34px; margin-top:52px; padding-top:16px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3);
}
.hero .meta b { color:var(--ink); font-weight:600; }

/* ── 카테고리 ─────────────────────────────────── */

.cats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:900px){ .cats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cats { grid-template-columns:1fr; } }

.cat {
  background:var(--card); padding:24px 20px 22px; position:relative;
  display:block; transition:.2s ease; cursor:pointer; text-align:left; border:0; width:100%; font-family:inherit;
}
.cat::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--tc); }
.cat:hover { background:var(--paper-2); }
.cat .en { font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; color:var(--ink-3); text-transform:uppercase; }
.cat .ko { font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; margin:9px 0 7px; }
.cat p  { font-size:12.5px; line-height:1.6; color:var(--ink-2); }
.cat .cnt { font-family:var(--mono); font-size:10.5px; color:var(--tc); margin-top:13px; letter-spacing:.06em; }

/* 영어 모드에서는 보조 줄이 한글이라 자간을 좁힙니다 */
html[lang="en"] .cat .en, html[lang="en"] .plate .en { letter-spacing:.01em; }

/* ── 색인(카드) ────────────────────────────────── */

.index-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:6px 12px; border:1px solid var(--rule); border-radius:2px;
  background:transparent; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.chip:hover { border-color:var(--ink-3); color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper-2); }
.search {
  margin-left:auto; min-width:210px; flex:0 1 260px;
  padding:8px 12px; font-family:var(--body); font-size:13px;
  border:1px solid var(--rule); border-radius:2px; background:var(--card); color:var(--ink); outline:none;
}
.search:focus { border-color:var(--ink); }
@media (max-width:620px){ .search { margin-left:0; flex:1 1 100%; } }

.plates { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px; }

.plate {
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--rule); border-radius:2px;
  padding:20px 20px 18px; min-height:214px; transition:.2s ease;
}
.plate::before { content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:3px; background:var(--tc); }
.plate:hover { transform:translateY(-2px); border-color:var(--ink-3); box-shadow:0 10px 26px -18px rgba(17,22,28,.5); }
.plate.soon { opacity:.62; background:var(--paper-2); }

.plate .top { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.plate .no {
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--ink);
  position:relative; transition:padding-right .2s ease;
}
.plate .no::after {   /* 호버 시 뻗는 지시선 */
  content:''; position:absolute; right:-2px; top:50%; width:0; height:1px; background:var(--tc);
  transition:width .25s ease;
}
.plate:hover .no { padding-right:26px; }
.plate:hover .no::after { width:22px; }

.badge {
  margin-left:auto; font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.08em; padding:3px 8px; border-radius:2px;
  border:1px solid var(--rule); color:var(--ink-3); background:transparent;
}

.plate h3 { font-family:var(--display); font-size:19px; font-weight:600; line-height:1.34; letter-spacing:-.02em; }
.plate .en { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em; margin-top:5px; }
.plate p  { font-size:12.5px; line-height:1.65; color:var(--ink-2); margin-top:11px; }
.plate .foot {
  margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-3);
}
.plate .foot .open { margin-left:auto; color:var(--ink); font-weight:600; }
.plate .stretch { position:absolute; inset:0; }

.empty { grid-column:1/-1; padding:60px 0; text-align:center; color:var(--ink-3); font-family:var(--mono); font-size:12px; letter-spacing:.08em; }

/* ── 광고 ─────────────────────────────────────── */

.ad { position:relative; background:var(--card); border:1px solid var(--rule); border-radius:2px; }
.ad[hidden] { display:none; }
.ad-tag {
  position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); background:var(--paper-2); padding:2px 7px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.ad-body { display:flex; align-items:center; justify-content:center; padding:14px; min-height:70px; overflow:hidden; }
.ad-body img { max-width:100%; height:auto; }

.ad-wide { margin-bottom:24px; }
.ad-wide .ad-body { min-height:96px; }
.ad-card .ad-body { min-height:190px; padding:18px; }

/* ── 푸터 ─────────────────────────────────────── */

.site-foot { margin-top:clamp(50px,8vw,90px); border-top:1px solid var(--ink); }
.site-foot .in {
  max-width:var(--maxw); margin:0 auto; padding:32px var(--gut) 60px;
  display:flex; flex-wrap:wrap; gap:20px 40px; align-items:flex-start;
}
.site-foot .cr { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); }
.site-foot nav { display:flex; gap:20px; margin-left:auto; font-size:12.5px; color:var(--ink-2); }
.site-foot nav a:hover { color:var(--ink); }