:root{
  --bg:#f7f4ee; --paper:#fffdf9; --ink:#2b2f2a; --muted:#7a7469; --line:#cfc6b8;
  --sage:#3e5a45; --rose:#b5604f; --sand:#a77c35; --lilac:#6b4f8f; --sky:#4f7699;
  --gap:18px; --drop:34px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);word-break:keep-all;
  font-family:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
  background-image:radial-gradient(circle at 8% 0%,#efe2d3 0,transparent 38%),radial-gradient(circle at 100% 20%,#dfe8dc 0,transparent 34%)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:52px 16px 80px}
.eyebrow{text-align:center;letter-spacing:.32em;font-size:12px;color:var(--muted);margin:0 0 10px}
h1{font-family:"Gowun Batang",serif;text-align:center;font-size:clamp(26px,4vw,40px);margin:0 0 8px}
.lead{text-align:center;color:var(--muted);margin:0 0 40px}

/* 대표 */
.root{display:flex;justify-content:center;position:relative;padding-bottom:var(--drop)}
.root::after{content:"";position:absolute;bottom:0;left:50%;width:2px;height:var(--drop);background:var(--line)}
.root-card{background:var(--sage);color:#fff;border-radius:999px;padding:12px 30px 12px 12px;display:flex;align-items:center;gap:16px;
  box-shadow:0 16px 36px -16px rgba(30,50,35,.6)}
.root-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.root-card b{font-family:"Gowun Batang",serif;font-size:22px;display:block}
.root-card span{opacity:.85;font-size:13px}

/* 갈래 */
.groups{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);padding-top:var(--drop)}
.group{position:relative}
.group::before{content:"";position:absolute;top:calc(-1 * var(--drop));left:calc(var(--gap) / -2);right:calc(var(--gap) / -2);height:2px;background:var(--line)}
.group:first-child::before{left:50%}
.group:last-child::before{right:50%}
.group::after{content:"";position:absolute;top:calc(-1 * var(--drop));left:50%;width:2px;height:var(--drop);background:var(--line)}
.head{position:relative;z-index:1;margin:0 0 16px;padding:12px 10px;border-radius:16px;color:#fff;text-align:center;background:var(--c);
  box-shadow:0 10px 22px -12px var(--c)}
.head b{display:block;font-size:16px}
.head small{display:block;font-size:11px;opacity:.85;margin-top:2px;word-break:break-all}
.items{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.items::before{content:"";position:absolute;left:6px;top:-16px;bottom:var(--last,60px);width:2px;background:var(--line)}
.items li{position:relative;margin-bottom:14px}
.items li::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:2px;background:var(--line)}
.card{display:block;background:var(--paper);border:1px solid #e9e0d3;border-radius:16px;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(40,30,20,.4);border-color:var(--c)}
.thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:#eee}
.thumb img,.thumb svg{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.thumb.icon{padding:12px 0}
.thumb.icon svg{border-radius:14px}
.card .txt{display:block;padding:10px 12px 12px}
.card b{display:block;font-size:15px;margin-bottom:2px}
.card small{color:var(--muted);font-size:12.5px;line-height:1.45;display:block}
footer{text-align:center;color:var(--muted);font-size:12px;margin-top:56px}

/* 태블릿: 3열, 가로 연결선 생략 */
@media (max-width:1100px) and (min-width:861px){
  .groups{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .group::before,.group::after{display:none}
}

/* 모바일: 세로 트리 */
@media (max-width:860px){
  .root{justify-content:flex-start;padding-bottom:28px}
  .root::after{left:47px}
  .groups{grid-template-columns:1fr;gap:28px;padding:0 0 0 69px}
  .group::before{top:22px;left:-22px;right:auto;width:22px}
  .group:first-child::before{left:-22px}
  .group:last-child::before{right:auto}
  .group::after{top:-28px;left:-22px;height:auto;bottom:-28px}
  .group:last-child::after{bottom:auto;height:51px}
  .head{text-align:left;padding:10px 16px}
  .card{display:flex;align-items:center}
  .thumb{width:92px;flex:none;aspect-ratio:1}
}