/* 자료실 · 루트 공용 스타일 — 포털 토큰만 사용 */
.arc-wrap { max-width: 820px; margin: 0 auto; padding: 26px 20px 60px; }
.arc-wrap.wide { max-width: 1060px; }
.arc-crumbs { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; letter-spacing: .01em; }
.arc-crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.arc-crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.arc-crumbs i { opacity: .5; font-style: normal; margin: 0 2px; }

.arc-title { font-size: clamp(22px, 4vw, 32px); margin: 0 0 8px; letter-spacing: -.02em; line-height: 1.3; }
.arc-sub { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.arc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.arc-chip { font-size: 11.5px; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); }
.arc-chip.on { border-color: var(--accent); color: var(--accent); }

.arc-cat { margin: 34px 0 0; }
.arc-cat h2 { font-size: 18px; margin: 0 0 4px; }
.arc-cat .cs { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; line-height: 1.6; }

.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.arc-card { display: block; text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 17px; box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease; }
.arc-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.arc-card h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; }
.arc-card p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.65; }
.arc-q { display: block; margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--accent);
  font-size: 12.5px; line-height: 1.6; color: var(--ink); font-style: italic; }
.arc-card .n { display: block; margin-top: 10px; font-size: 11.5px; color: var(--accent); letter-spacing: .03em; }

.arc-list { list-style: none; padding: 0; margin: 20px 0 0; }
.arc-list li { border-bottom: 1px solid var(--line); }
.arc-list a { display: block; padding: 15px 4px; text-decoration: none; color: inherit; }
.arc-list a:hover { background: var(--surface-2); }
.arc-list .t { font-size: 15.5px; line-height: 1.45; margin: 0 0 5px; }
.arc-list .s { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.arc-list .i { font-size: 11.5px; color: var(--accent); letter-spacing: .05em; margin-right: 8px; }

.arc-body { font-size: 16px; line-height: 1.95; }
.arc-body p { margin: 0 0 1.15em; }
.arc-body h3 { font-size: 15px; margin: 30px 0 10px; padding-left: 10px; border-left: 3px solid var(--accent); }
.arc-lead { font-size: 15px; line-height: 1.8; color: var(--ink-soft); border-left: 3px solid var(--accent-warm);
  padding: 2px 0 2px 14px; margin: 0 0 26px; }
.arc-orig { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 18px 14px; margin: 0 0 8px; font-size: 15px; line-height: 2.15; white-space: pre-wrap;
  word-break: keep-all; font-family: "Noto Serif KR", serif; }
.arc-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 26px; }
.arc-kv { margin: 0 0 22px; font-size: 14px; line-height: 1.8; }
.arc-kv div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.arc-kv b { flex: 0 0 84px; font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.arc-story { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 10px; }
.arc-story b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.arc-story span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }

.arc-q { margin: 34px 0 0; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 14px; padding: 20px 22px; }
.arc-q .lb { font-size: 11px; letter-spacing: .12em; color: var(--accent); margin-bottom: 8px; }
.arc-q .qq { font-size: 17px; line-height: 1.65; margin: 0; }

.arc-src { margin: 30px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; }
.arc-src b { display: block; font-size: 12px; letter-spacing: .06em; margin-bottom: 6px; color: var(--ink); }
.arc-origin { margin: 22px 0 0; font-size: 13px; color: var(--ink-soft); background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; line-height: 1.7; }
.arc-origin a { color: var(--accent); }

/* 글 첫머리 건너가기 줄 · 형제 줄 (2026-09-29) */
.arc-jump { margin: -8px 0 20px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.arc-jump a { color: var(--accent); font-weight: 600; }
.arc-sibs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -6px 0 22px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.arc-sibs .lb { flex-basis: 100%; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft); }
.arc-sibs a, .arc-sibs b { font-size: 13.5px; padding: 3px 11px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500; }
.arc-sibs a:hover { border-color: var(--accent); color: var(--accent); }
.arc-sibs b { border-color: var(--accent); color: var(--accent); }

/* 루트 — 들른 곳 순서 (지도 밑 글 목록, 2026-09-29)
   지도 그림만 있으면 검색엔진이 순서를 읽지 못한다. 한 줄씩 짧게. */
.rt-order { margin: 26px 0 0; }
.rt-order h2 { font-size: 17px; margin: 0 0 10px; }
.rt-order ol { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.rt-order li { counter-increment: st; border-bottom: 1px dashed var(--line); }
.rt-order li a { display: block; position: relative; padding: 8px 4px 8px 38px; text-decoration: none;
  color: inherit; font-size: 14px; line-height: 1.6; }
.rt-order li a::before { content: counter(st); position: absolute; left: 4px; top: 8px; width: 24px; height: 24px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent); box-sizing: border-box; }
.rt-order li a:hover, .rt-order li.on a { background: var(--surface-2); }
.rt-order li b { font-weight: 700; margin-right: 8px; }
.rt-order li span.d { color: var(--ink-soft); }

.arc-nav { display: flex; justify-content: space-between; gap: 12px; margin: 34px 0 0; }
.arc-nav a { flex: 1; text-decoration: none; color: var(--ink-soft); font-size: 13px;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.arc-nav a:hover { border-color: var(--accent); color: var(--accent); }
.arc-nav a.next { text-align: right; }

/* ── 추천 루트 (한 시간 로테이션) ─────────────────────
   썸네일이 있으면 왼쪽에 붙고, 없으면 .thumb 이 스스로 제거돼 텍스트만 남는다. */
.rt-picker { margin: 4px 0 30px; }
.rt-feature[hidden] { display: none; }
.rt-feature {
  display: flex; gap: 22px; align-items: center;
  text-decoration: none; color: inherit; position: relative;
  padding: 22px 26px; border: 1px solid var(--accent); border-radius: 18px;
  background: var(--surface);   /* color-mix 미지원 시 이 배경이 남는다 */
  background:
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rt-feature:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
html[data-theme="night"] .rt-feature:hover { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.rt-feature .thumb {
  flex: 0 0 40%; max-width: 340px; aspect-ratio: 16 / 10;
  border-radius: 13px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line);
}
.rt-feature .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.rt-feature:hover .thumb img { transform: scale(1.045); }
html[data-theme="night"] .rt-feature .thumb img { filter: brightness(.84) saturate(.9); }
.rt-feature .tx { flex: 1; min-width: 0; display: block; }
.rt-feature .tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .14em; font-weight: 700;
  color: var(--bg); background: var(--accent);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 11px;
}
.rt-feature .ttl {
  display: block; margin: 0 0 9px; font-weight: 800;
  font-size: clamp(19px, 3vw, 25px); line-height: 1.3; letter-spacing: -.02em;
}
.rt-feature .ttl .ic { margin-right: 8px; }
.rt-feature .lead { display: block; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.rt-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 15px 0 0; }
.rt-stats div { display: flex; flex-direction: column; gap: 2px; }
.rt-stats b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1; }
.rt-stats span { font-size: 11px; color: var(--ink-soft); }
.rt-feature .go {
  display: inline-block; margin-top: 15px; font-size: 13.5px; font-weight: 600;
  color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px;
}
@media (max-width: 720px) {
  .rt-feature { flex-direction: column; align-items: stretch; gap: 15px; padding: 16px; }
  .rt-feature .thumb { flex: none; max-width: none; aspect-ratio: 16 / 9; }
  .rt-stats { gap: 8px 16px; }
  .rt-stats b { font-size: 18px; }
}

/* 추천이 앞에 서면 나머지 목록은 몸집을 줄인다 */
.arc-title.sm { font-size: clamp(19px, 3vw, 24px); margin-bottom: 4px; }
.arc-sub.sm { font-size: 14px; margin-bottom: 18px; }
.arc-grid.tight { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 11px; }
.arc-grid.tight .arc-card { padding: 14px 15px; }
.arc-grid.tight .arc-card h3 { font-size: 14.5px; }
.arc-grid.tight .arc-card p { font-size: 12.3px; line-height: 1.6; }
.arc-cat h2 .soon { font-weight: 400; font-size: .78em; color: var(--ink-soft); }

.term-strip { margin: 26px 0 0; padding: 16px 18px; background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: 14px; }
.term-strip b { display: block; font-size: 11px; letter-spacing: .1em; color: var(--accent);
  margin-bottom: 10px; font-weight: 700; }
.term-strip .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.term-strip a { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }
.term-strip a:hover { border-color: var(--accent); color: var(--accent); }

.arc-foot { text-align: center; padding: 26px 20px 40px;
  border-top: 1px solid var(--line); font-size: 13.5px; }
.arc-foot-nav { display: flex; gap: 18px; justify-content: center; }
.arc-foot-nav a { color: var(--ink-soft); text-decoration: none; }
.arc-foot-nav a:hover { color: var(--accent); }

/* 루트 지도 */
.rt-shell { position: relative; height: 62vh; min-height: 380px; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: var(--sea); }
#rtmap { position: absolute; inset: 0; background: var(--sea); }
.leaflet-container { background: var(--sea) !important; font-family: inherit; }
.rt-rel { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rt-rel .lb { display: block; font-size: 10.5px; letter-spacing: .12em; color: var(--accent); margin-bottom: 8px; }
.rt-rel a { display: inline-block; font-size: 13px; padding: 7px 13px; margin: 0 6px 6px 0;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); }
.rt-rel a:hover { border-color: var(--accent); color: var(--accent); }
.wp-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface);
  color: var(--ink); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.28);
  transition: transform .18s ease; }
.wp-dot.on { background: var(--accent); color: var(--bg); transform: scale(1.25); }
.rt-chips { display: flex; gap: 7px; overflow-x: auto; padding: 14px 2px 4px; }
.rt-chips button { flex: 0 0 auto; font-size: 12px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }
.rt-chips button.on { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.rt-panel { margin: 12px 0 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; }
.rt-panel .pl { font-size: 11.5px; letter-spacing: .06em; color: var(--accent); margin-bottom: 6px; }
.rt-panel h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; }
.rt-panel p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.rt-panel .go { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid var(--accent); }
.rt-move { display: flex; gap: 10px; margin: 12px 0 0; }
.rt-move button { flex: 1; padding: 11px; border-radius: 10px; cursor: pointer; font-size: 13.5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.rt-move button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) { .rt-shell { height: 52vh; } .arc-body { font-size: 15.5px; } }