/* 제제 동물사전 (dict.php) — 2026-10-11
   앞머리 dc- 만 씁니다.
   ★ 색은 박지 않고 style.css 의 var(--…) 만 씁니다 (style.css 머리말의 약속).
     띠는 --accent(명함보라), 건강·돌봄 안내는 --info(안전 안내 파랑). */

.dc{padding-bottom:40px}

/* ── 목록 머리: 보라 띠 ── */
.dc-band{position:relative; overflow:hidden; margin:28px 0 22px; padding:40px 36px 32px; border-radius:20px;
  background:var(--accent); color:var(--accent-ink)}
.dc-band::before{content:""; position:absolute; right:-40px; top:-40px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0) 70%); pointer-events:none}
.dc-kicker{margin:0 0 8px; font-size:12px; letter-spacing:.14em; color:var(--p-3); font-weight:600}
.dc-band h1{margin:0 0 10px; font-size:34px; line-height:1.25; color:var(--accent-ink)}
.dc-lead{margin:0 0 22px; font-size:15.5px; line-height:1.8; color:var(--p-2); max-width:34em; word-break:keep-all}
.dc-find{display:flex; align-items:center; gap:10px; max-width:460px; background:var(--card); border-radius:999px; padding:0 18px}
.dc-find i{font-size:19px; color:var(--accent)}
.dc-find input{flex:1; min-width:0; border:0; background:transparent; padding:13px 0; font:inherit; font-size:16px; color:var(--ink); outline:none}
.dc-find:focus-within{box-shadow:0 0 0 3px var(--p-3)}
.dc-count{margin:14px 0 0; font-size:13px; color:var(--p-2)}
.dc-count b{color:var(--accent-ink); font-weight:700}

.dc-admin{margin:0 0 16px; padding:10px 14px; border:1px dashed var(--p-3); border-radius:10px; background:var(--p-1); font-size:13.5px}
.dc-admin a{color:var(--accent-strong); font-weight:700; text-decoration:underline}

/* ── 카테고리 칩 ── */
.dc-cats{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.dc-cats a{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; font-size:14px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none}
.dc-cats a span{font-size:12px; color:var(--muted)}
.dc-cats a:hover{border-color:var(--accent)}
.dc-cats a.on{background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-ink)}
.dc-cats a.on span{color:var(--p-2)}
.dc-catabout{margin:0 0 18px; color:var(--muted); font-size:14.5px}

/* ── 초성 목차 ── */
.dc-index{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 8px; padding:10px 0; border-bottom:1px solid var(--line)}
.dc-index a{min-width:34px; text-align:center; padding:5px 8px; border-radius:8px; font-weight:700; font-size:14px;
  color:var(--accent); text-decoration:none}
.dc-index a:hover{background:var(--p-1)}

/* ── 묶음 · 카드 ── */
.dc-group{margin-top:26px; scroll-margin-top:80px}
.dc-group[hidden]{display:none}
.dc-group h2{margin:0 0 12px; font-size:20px; color:var(--accent-strong)}
.dc-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px}
.dc-card{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); color:var(--ink); text-decoration:none; transition:border-color .15s, transform .15s}
.dc-card[hidden]{display:none}
.dc-card:hover{border-color:var(--accent); transform:translateY(-1px)}
.dc-card img{flex:0 0 64px; width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--p-1)}
.dc-ct{display:flex; flex-direction:column; gap:4px; min-width:0}
.dc-ct b{font-size:17px; line-height:1.35}
.dc-co{font-size:13.5px; line-height:1.6; color:var(--muted); word-break:keep-all}
.dc-cc{display:flex; flex-wrap:wrap; gap:4px; margin-top:2px}
.dc-cc i{font-style:normal; font-size:11.5px; padding:1px 8px; border-radius:999px; background:var(--p-1); color:var(--accent)}
.dc-hint{font-size:.62em; font-weight:500; color:var(--muted); margin-left:2px}
.dc-empty{color:var(--muted); padding:24px 0}
.dc-empty[hidden]{display:none}

/* ── 낱말 한 장 ── */
.dc-leaf{max-width:760px; margin:0 auto; padding-top:24px}
.dc-crumb{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); margin-bottom:14px}
.dc-crumb a{color:var(--accent); text-decoration:none}
.dc-crumb a:hover{text-decoration:underline}
.dc-draft{margin:0 0 14px; padding:10px 14px; border-radius:10px; background:var(--p-1); border:1px dashed var(--p-3); font-size:13.5px; color:var(--accent-strong)}
.dc-head h1{margin:0 0 10px; font-size:38px; line-height:1.2; color:var(--ink); word-break:keep-all}
.dc-tags{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.dc-tag{font-size:13px; padding:3px 12px; border-radius:999px; background:var(--p-1); color:var(--accent); text-decoration:none; border:1px solid var(--p-2)}
.dc-tag:hover{border-color:var(--accent)}
.dc-tools{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.dc-copy, .dc-edit{display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:13px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; text-decoration:none}
.dc-copy:hover, .dc-edit:hover{color:var(--accent-strong); border-color:var(--accent)}
.dc-one{margin:0 0 24px; padding:4px 0 4px 16px; border-left:4px solid var(--accent); font-size:19px; line-height:1.65; font-weight:600; color:var(--accent-strong); word-break:keep-all}
/* 사진 — 세 장까지 (1장: 크게 · 2장: 나란히 · 3장: 큰 것 하나 + 작은 것 둘). 넘치면 셋째 칸에 +N */
.dc-gal{display:grid; gap:6px; margin:0; border-radius:14px; overflow:hidden}
.dc-gal-2{grid-template-columns:1fr 1fr; aspect-ratio:2/1}
.dc-gal-3{grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:3/2}
.dc-gal-3 .dc-gi:first-child{grid-row:1 / 3}
.dc-gi{position:relative; display:block; min-height:0; background:var(--p-0); cursor:zoom-in; overflow:hidden}
.dc-gi img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s}
.dc-gi:hover img{transform:scale(1.02)}
.dc-gal-1 .dc-gi img{height:auto; max-height:520px; object-fit:contain}
.dc-more{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(34,26,51,.55); color:var(--accent-ink); font-size:26px; font-weight:700}
.dc-credits{display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 28px; font-size:12px; line-height:1.5; color:var(--muted)}
.dc-credits a{color:inherit; text-decoration:none}
.dc-credits a:hover{text-decoration:underline}
.dc-credits b{font-weight:700; color:var(--accent)}

/* 크게 보기 — 사진을 보는 자리라 어둡게 둡니다 (style.css 의 크게 보기와 같은 까닭).
   ★ 이름은 dc-lb — 사이트의 .lbx 와 겹치지 않게 */
.dc-lb{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(20,18,14,.94); padding:56px 64px 24px}
.dc-lb[hidden]{display:none}
.dc-lb img{max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; border-radius:6px; user-select:none}
.dc-lb .dc-lbcap{margin-top:12px; max-width:760px; text-align:center; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.75)}
.dc-lb .dc-lbcap a{color:inherit; text-decoration:underline}
.dc-lb .dc-lbn{display:block; margin-bottom:2px; color:rgba(255,255,255,.55)}
.dc-lb button{position:absolute; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(255,255,255,.22); color:#fff;
  width:56px; height:56px; font-size:30px; line-height:1; cursor:pointer; font-family:inherit; box-shadow:0 2px 10px rgba(0,0,0,.35)}
.dc-lb button:hover{background:rgba(255,255,255,.38)}
.dc-lb button[hidden]{display:none}
/* 닫기는 글자까지 — 「닫기가 없네」(2026-10-11 난영님): 동그라미 × 만으로는 눈에 안 띄었습니다 */
.dc-lb .dc-lbx{top:14px; right:16px; width:auto; height:42px; padding:0 18px; font-size:15px; font-weight:700}
.dc-lb .dc-lbp{left:18px; top:50%; transform:translateY(-50%)}
.dc-lb .dc-lbq{right:18px; top:50%; transform:translateY(-50%)}
body.dc-lbon{overflow:hidden}
body.dc-lbon #gotop{display:none}
.dc-sec{margin:0 0 26px}
.dc-sec h2{margin:0 0 10px; font-size:18px; color:var(--accent-strong)}
.dc-sec p{margin:0 0 12px; font-size:16.5px; line-height:1.9; word-break:keep-all}
.dc-easy{padding:22px 24px; border-radius:16px; background:var(--p-0); border:1px solid var(--p-2)}
.dc-easy p:last-child{margin-bottom:0}
.dc-note{display:flex; gap:8px; align-items:flex-start; margin:-8px 0 26px; padding:12px 16px; border-radius:12px;
  background:var(--info-bg); border:.5px solid var(--info); font-size:14px; line-height:1.7; color:var(--info)}
.dc-note i{font-size:18px; margin-top:2px}
.dc-wiki{margin-top:8px; padding-top:22px; border-top:1px solid var(--line)}
.dc-ln{color:inherit; text-decoration:underline dotted var(--accent); text-underline-offset:3px}
.dc-ln:hover{color:var(--accent-strong); text-decoration-style:solid}
.dc-src{margin:8px 0 22px; font-size:13px; line-height:1.7; color:var(--muted)}
.dc-src a{color:var(--accent)}

.dc-toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:var(--accent-ink);
  padding:9px 16px; border-radius:999px; font-size:13.5px; z-index:60; max-width:calc(100% - 32px)}
.dc-toast[hidden]{display:none}

@media (max-width:700px){
  .dc-band{padding:30px 22px 26px; margin-top:18px}
  .dc-band h1{font-size:28px}
  .dc-head h1{font-size:30px}
  .dc-one{font-size:17px}
  .dc-easy{padding:18px}
  .dc-cards{grid-template-columns:1fr}
  .dc-gal-3{aspect-ratio:4/3}
  .dc-lb{padding:56px 8px 20px}
  .dc-lb button.dc-lbp, .dc-lb button.dc-lbq{width:48px; height:48px; font-size:26px; top:auto; bottom:18px; transform:none}
}